From c246e7e23d46d5f0600e084b4719f93d432944f3 Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Wed, 12 Nov 2025 15:35:16 -0500
Subject: [PATCH 1/8] added customization to settings panel

---
 .../react-viewers/helpers/reactUtils.ts       |  32 +-
 .../settings/settingsInputBox.tsx             |  41 ++
 .../react-viewers/settings/settingsItem.ts    |  38 ++
 .../react-viewers/settings/settingsKeys.ts    |  42 ++
 .../react-viewers/settings/settingsPanel.tsx  | 387 ++++++++++--------
 .../react-viewers/settings/settingsState.ts   |   7 +-
 .../settings/settingsSubtitle.tsx             |   5 +
 .../react-viewers/settings/settingsToggle.tsx |  36 ++
 .../react-viewers/state/sharedIsolation.ts    |   4 +-
 src/vim-web/react-viewers/webgl/viewer.tsx    |   7 +-
 src/vim-web/react-viewers/webgl/viewerRef.ts  |   7 +
 11 files changed, 415 insertions(+), 191 deletions(-)
 create mode 100644 src/vim-web/react-viewers/settings/settingsInputBox.tsx
 create mode 100644 src/vim-web/react-viewers/settings/settingsItem.ts
 create mode 100644 src/vim-web/react-viewers/settings/settingsKeys.ts
 create mode 100644 src/vim-web/react-viewers/settings/settingsSubtitle.tsx
 create mode 100644 src/vim-web/react-viewers/settings/settingsToggle.tsx

diff --git a/src/vim-web/react-viewers/helpers/reactUtils.ts b/src/vim-web/react-viewers/helpers/reactUtils.ts
index 0796e856..24c605ff 100644
--- a/src/vim-web/react-viewers/helpers/reactUtils.ts
+++ b/src/vim-web/react-viewers/helpers/reactUtils.ts
@@ -89,19 +89,27 @@ export function useRefresher() : StateRefresher{
  * The reference provides access to the state, along with event dispatching, validation, and confirmation logic.
  *
  * @param initialValue - The initial state value.
+ * @param isLazy - Whether to treat the initialValue as a lazy initializer function.
  * @returns An object implementing StateRef along with additional helper hooks.
  */
-export function useStateRef<T>(initialValue: T | (() => T)) {
-  const [value, setValue] = useState(initialValue);
-  
-  // https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
-  const ref = useRef<T>(undefined);
-  if(ref.current === undefined) {
-    if (typeof initialValue === "function") {
-      ref.current = (initialValue as () => T)();
-    } else {
-      ref.current = initialValue;
+
+export function useStateRef<T>(initialValue: T | (() => T), isLazy = false) {
+  const getInitialValue = (): T => {
+    if (isLazy && typeof initialValue === 'function') {
+      return (initialValue as () => T)();
     }
+    return initialValue as T;
+  };
+
+  // Box the state value to prevent React from ever calling it
+  type Box<T> = { current: T };
+  const [box, setBox] = useState<Box<T>>(() => ({
+    current: getInitialValue()
+  }));
+  
+  const ref = useRef<T>(undefined!);
+  if (ref.current === undefined) {
+    ref.current = getInitialValue();
   }
 
   const event = useRef(new SimpleEventDispatcher<T>());
@@ -119,7 +127,7 @@ export function useStateRef<T>(initialValue: T | (() => T)) {
     if (finalValue === ref.current) return;
 
     ref.current = finalValue;
-    setValue(finalValue);
+    setBox({ current: finalValue });
     event.current.dispatch(finalValue);
   };
 
@@ -164,7 +172,7 @@ export function useStateRef<T>(initialValue: T | (() => T)) {
      * @returns The memoized value.
      */
     useMemo<TOut>(on: (value: T) => TOut, deps?: any[]) {
-      return useMemo<TOut>(() => on(value), [...(deps || []), value]);
+      return useMemo<TOut>(() => on(box.current), [...(deps || []), box.current]);
     },
 
     /**
diff --git a/src/vim-web/react-viewers/settings/settingsInputBox.tsx b/src/vim-web/react-viewers/settings/settingsInputBox.tsx
new file mode 100644
index 00000000..908c9626
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/settingsInputBox.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react'
+import { SettingsBox } from './settingsItem'
+import * as Core from '../../core-viewers'
+import { SettingsState } from './settingsState'
+
+export function renderSettingsInputBox(viewer: Core.Webgl.Viewer, settings: SettingsState, item: SettingsBox) {
+  const ref = React.useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    ref.current.value = item.getter(settings.value)?.toString()
+  }, [])
+
+  const update = (event: React.FocusEvent<HTMLInputElement, Element>) => {
+    const str = event.target.value
+    const n = Number.parseFloat(str)
+    if (Number.isNaN(n)) {
+      event.target.value = item.getter(settings.value).toString()
+    } else {
+      const value = item.transform(n)
+      event.target.value = value.toString()
+      settings.update((s) => item.setter(s, value))
+    }
+  }
+
+  return (
+    <div className="vc-box-input vc-my-1">
+      <label htmlFor="textbox" className="vc-w-3 vc-h-2">
+        {item.label}:
+      </label>
+      <input
+        ref={ref}
+        type="text"
+        className="vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1"
+        onBlur={update}
+      />
+      <label htmlFor="textbox" className="vc-w-3 vc-h-2 vc-text-gray vc-ml-1">
+        {item.info}
+      </label>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsItem.ts b/src/vim-web/react-viewers/settings/settingsItem.ts
new file mode 100644
index 00000000..f8acb211
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/settingsItem.ts
@@ -0,0 +1,38 @@
+import { Settings } from './settings'
+import { UserBoolean } from './userBoolean'
+
+
+export type SettingsCustomizer = (items: SettingsItem[]) => SettingsItem[]
+
+export type SettingsItem = SettingsSubtitle | SettingsToggle | SettingsBox | SettingsElement
+
+export type BaseSettingsItem = {
+  type: string
+  key: string
+}
+
+export type SettingsSubtitle = BaseSettingsItem & {
+  type: 'subtitle'
+  title: string
+}
+
+export type SettingsToggle = BaseSettingsItem & {
+  type: 'toggle'
+  label: string
+  getter: (settings: Settings) => UserBoolean
+  setter: (settings: Settings, b: boolean) => void
+}
+
+export type SettingsBox = BaseSettingsItem & {
+  type: 'box'
+  label: string
+  info: string
+  transform: (value: number) => number
+  getter: (settings: Settings) => number
+  setter: (settings: Settings, b: number) => void
+}
+
+export type SettingsElement = BaseSettingsItem & {
+  type: 'element'
+  element: JSX.Element
+}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsKeys.ts b/src/vim-web/react-viewers/settings/settingsKeys.ts
new file mode 100644
index 00000000..131d068d
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/settingsKeys.ts
@@ -0,0 +1,42 @@
+
+export class SettingsPanelKeys {
+  // === Inputs ===
+  static InputsSubtitle = 'inputs'
+  static InputsScrollSpeedBox = 'scrollSpeed'
+
+  // === Panels ===
+  static PanelsSubtitle = 'panels'
+  static PanelsShowLogoToggle = 'logo'
+  static PanelsShowBimTreeToggle = 'bimTree'
+  static PanelsShowBimInfoToggle = 'bimInfo'
+  static PanelsShowAxesPanelToggle = 'axesPanel'
+  static PanelsShowPerformancePanelToggle = 'performance'
+
+  // === Axes ===
+  static AxesSubtitle = 'axes'
+  static AxesShowOrthographicButtonToggle = 'orthographic'
+  static AxesShowResetCameraButtonToggle = 'resetCamera'
+
+  // === Control Bar ===
+  static ControlBarSubtitle = 'controlBar'
+  static ControlBarShowControlBarToggle = 'controlBarVisible'
+
+  // --- Control Bar - Cursors ---
+  static ControlBarCursorsSubtitle = 'controlBarCursors'
+  static ControlBarCursorsShowOrbitButtonToggle = 'orbit'
+  static ControlBarCursorsShowLookAroundButtonToggle = 'lookAround'
+  static ControlBarCursorsShowPanButtonToggle = 'pan'
+  static ControlBarCursorsShowZoomButtonToggle = 'zoom'
+  static ControlBarCursorsShowZoomWindowButtonToggle = 'zoomWindow'
+
+  // --- Control Bar - Tools ---
+  static ControlBarToolsSubtitle = 'controlBarTools'
+  static ControlBarToolsShowMeasuringModeButtonToggle = 'measuringMode'
+
+  // --- Control Bar - Settings ---
+  static ControlBarSettingsSubtitle = 'controlBarSettings'
+  static ControlBarSettingsShowProjectInspectorButtonToggle = 'projectInspector'
+  static ControlBarSettingsShowSettingsButtonToggle = 'settingsButton'
+  static ControlBarSettingsShowHelpButtonToggle = 'help'
+  static ControlBarSettingsShowMaximiseButtonToggle = 'maximise'
+}
diff --git a/src/vim-web/react-viewers/settings/settingsPanel.tsx b/src/vim-web/react-viewers/settings/settingsPanel.tsx
index c6143317..ba83a715 100644
--- a/src/vim-web/react-viewers/settings/settingsPanel.tsx
+++ b/src/vim-web/react-viewers/settings/settingsPanel.tsx
@@ -2,14 +2,15 @@
  * @module viw-webgl-react
  */
 
-import React, { useEffect } from 'react'
+import React from 'react'
 import * as Core from '../../core-viewers'
-import { Settings } from './settings'
-import { UserBoolean } from './userBoolean'
 import { SettingsState } from './settingsState'
 import * as THREE from 'three'
-
-// TODO Use generic panels for all settings
+import { SettingsPanelKeys } from './settingsKeys'
+import { renderSettingsInputBox } from './settingsInputBox'
+import { renderSettingsToggle } from './settingsToggle'
+import { SettingsItem } from './settingsItem'
+import { renderSettingsSubtitle } from './settingsSubtitle'
 
 /**
  * JSX Component to interact with settings.
@@ -18,189 +19,225 @@ import * as THREE from 'three'
  * @param visible will return null if this is false.
  * @returns
  */
-export function SettingsPanel (props: {
+export function SettingsPanel(props: {
   viewer: Core.Webgl.Viewer
   settings: SettingsState
   visible: boolean
 }) {
   if (!props.visible) return null
-  const toggleElement = (label: string, state: boolean, action: () => void) => {
-    return (
-      <label className="vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm">
-        <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 "
-        ></input>{' '}
-        {label}
-      </label>
-    )
-  }
-
-  const settingsToggle = (
-    label: string,
-    getter: (settings: Settings) => UserBoolean,
-    setter: (settings: Settings, b: boolean) => void
-  ) => {
-    const value = getter(props.settings.value)
-    if (value === 'AlwaysTrue' || value === 'AlwaysFalse') {
-      return null
-    }
-    return toggleElement(label, value, () => {
-      const value = getter(props.settings.value)
-      props.settings.update((s) => setter(s, !value))
-    })
-  }
 
-  const settingsBox = (label: string,
-    info: string,
-    transform : (value:number) => number,
-    getter: (settings: Settings) => number,
-    setter: (settings: Settings, b: number) => void) => {
-    const ref = React.useRef<HTMLInputElement>(null)
-
-    useEffect(() => {
-      ref.current.value = props.viewer.inputs.scrollSpeed.toFixed(2)
-    },[])
-
-    const value = getter(props.settings.value).toString()
-    const update = (event: React.FocusEvent<HTMLInputElement, Element>) => {
-      const str = event.target.value
-      const n = Number.parseFloat(str)
-      if (Number.isNaN(n)) {
-        event.target.value = getter(props.settings.value).toString()
-      } else {
-        const value = transform(n)
-        event.target.value = value.toString()
-        props.settings.update(s => setter(s, value))
-      }
-    }
-
-    return <div className="vc-box-input vc-my-1">
-      <label htmlFor="textbox" className='vc-w-3 vc-h-2'>{label}:</label>
-      <input ref={ref} type="text" className='vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1' onBlur={e => update(e)}/>
-      <label htmlFor="textbox" className='vc-w-3 vc-h-2 vc-text-gray vc-ml-1'>{info}</label>
-    </div>
-  }
-
-  function settingsSubtitle (title: string) {
+  function renderItem(
+    viewer: Core.Webgl.Viewer,
+    settings: SettingsState,
+    item: SettingsItem,
+  ): JSX.Element | null {
     return (
-      <h3 className="vc-subtitle">{title}</h3>
+      <React.Fragment key={item.key}>
+        {(() => {
+          switch (item.type) {
+            case 'subtitle': return renderSettingsSubtitle(item)
+            case 'toggle':   return renderSettingsToggle(viewer, settings, item)
+            case 'box':      return renderSettingsInputBox(viewer, settings, item)
+            case 'element':  return item.element
+            default: return null
+          }
+        })()}
+      </React.Fragment>
     )
   }
 
+  var customizer = props.settings.customizer.get()
+  var content = GetSettingsContent(props.viewer)
+  content = customizer ? customizer(content) : content
+
   return (
-    <div
-      className='vc-absolute vc-inset-0'>
-        <h3 className="vc-title">Settings </h3>
+    <div className="vc-absolute vc-inset-0">
+      <h3 className="vc-title">Settings </h3>
       <div className="vim-settings vc-absolute vc-top-6 vc-left-0 vc-bottom-0 vc-right-0 vc-overflow-y-auto">
-        {settingsSubtitle('Inputs')}
-        {settingsBox(
-          'Scroll Speed',
-          '[0.1,10]',
-          n => THREE.MathUtils.clamp(n, 0.1, 10),
-          s => props.viewer.inputs.scrollSpeed,
-          (s, v) => { props.viewer.inputs.scrollSpeed = v }
-        )}
-        {settingsSubtitle('Panels')}
-        {settingsToggle(
-          'Show Logo',
-          (settings) => settings.ui.logo,
-          (settings, value) => (settings.ui.logo = value)
-        )}
-        {settingsToggle(
-          'Show Bim Tree',
-          (settings) => settings.ui.bimTreePanel,
-          (settings, value) => (settings.ui.bimTreePanel = value)
-        )}
-        {settingsToggle(
-          'Show Bim Info',
-          (settings) => settings.ui.bimInfoPanel,
-          (settings, value) => (settings.ui.bimInfoPanel = value)
-        )}
-        {settingsToggle(
-          'Show Axes Panel',
-          (settings) => settings.ui.axesPanel,
-          (settings, value) => (settings.ui.axesPanel = value)
-        )}
-        {settingsToggle(
-          'Show Performance Panel',
-          (settings) => settings.ui.performance,
-          (settings, value) => (settings.ui.performance = value)
-        )}
-
-        {settingsSubtitle('Axes')}
-        {settingsToggle(
-          'Show Orthographic Button',
-          (settings) => settings.ui.orthographic,
-          (settings, value) => (settings.ui.orthographic = value)
-        )}
-        {settingsToggle(
-          'Show Reset Camera Button',
-          (settings) => settings.ui.resetCamera,
-          (settings, value) => (settings.ui.resetCamera = value)
-        )}
-        {settingsSubtitle('Control Bar')}
-        {settingsToggle(
-          'Show Control Bar',
-          (settings) => settings.ui.controlBar,
-          (settings, value) => (settings.ui.controlBar = value)
-        )}
-        {settingsSubtitle('Control Bar - Cursors')}
-        {settingsToggle(
-          'Show Orbit Button',
-          (settings) => settings.ui.orbit,
-          (settings, value) => (settings.ui.orbit = value)
-        )}
-        {settingsToggle(
-          'Show Look Around Button',
-          (settings) => settings.ui.lookAround,
-          (settings, value) => (settings.ui.lookAround = value)
-        )}
-        {settingsToggle(
-          'Show Pan Button',
-          (settings) => settings.ui.pan,
-          (settings, value) => (settings.ui.pan = value)
-        )}
-        {settingsToggle(
-          'Show Zoom Button',
-          (settings) => settings.ui.zoom,
-          (settings, value) => (settings.ui.zoom = value)
-        )}
-        {settingsToggle(
-          'Show Zoom Window Button',
-          (settings) => settings.ui.zoomWindow,
-          (settings, value) => (settings.ui.zoomWindow = value)
-        )}
-        {settingsSubtitle('Control Bar - Tools')}
-        {settingsToggle(
-          'Show Measuring Mode Button',
-          (settings) => settings.ui.measuringMode,
-          (settings, value) => (settings.ui.measuringMode = value)
-        )}
-        {settingsSubtitle('Control Bar - Settings')}
-        {settingsToggle(
-          'Show Project Inspector Button',
-          (settings) => settings.ui.projectInspector,
-          (settings, value) => (settings.ui.projectInspector = value)
-        )}
-        {settingsToggle(
-          'Show Settings Button',
-          (settings) => settings.ui.settings,
-          (settings, value) => (settings.ui.settings = value)
-        )}
-        {settingsToggle(
-          'Show Help Button',
-          (settings) => settings.ui.help,
-          (settings, value) => (settings.ui.help = value)
-        )}
-        {settingsToggle(
-          'Show Maximise Button',
-          (settings) => settings.ui.maximise,
-          (settings, value) => (settings.ui.maximise = value)
-        )}
+        {content.map(item => renderItem(props.viewer, props.settings, item))}
       </div>
     </div>
   )
 }
+
+function GetSettingsContent(viewer: Core.Webgl.Viewer): SettingsItem[] {
+  return [
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.InputsSubtitle,
+      title: 'Inputs'
+    },
+    {
+      type: 'box',
+      key: SettingsPanelKeys.InputsScrollSpeedBox,
+      label: 'Scroll Speed',
+      info: '[0.1,10]',
+      transform: (n) => THREE.MathUtils.clamp(n, 0.1, 10),
+      getter: (_s) => viewer.inputs.scrollSpeed,
+      setter: (_s, v) => {
+        viewer.inputs.scrollSpeed = v
+      }
+    },
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.PanelsSubtitle,
+      title: 'Panels'
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.PanelsShowLogoToggle,
+      label: 'Show Logo',
+      getter: (s) => s.ui.logo,
+      setter: (s, v) => (s.ui.logo = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.PanelsShowBimTreeToggle,
+      label: 'Show Bim Tree',
+      getter: (s) => s.ui.bimTreePanel,
+      setter: (s, v) => (s.ui.bimTreePanel = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.PanelsShowBimInfoToggle,
+      label: 'Show Bim Info',
+      getter: (s) => s.ui.bimInfoPanel,
+      setter: (s, v) => (s.ui.bimInfoPanel = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.PanelsShowAxesPanelToggle,
+      label: 'Show Axes Panel',
+      getter: (s) => s.ui.axesPanel,
+      setter: (s, v) => (s.ui.axesPanel = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.PanelsShowPerformancePanelToggle,
+      label: 'Show Performance Panel',
+      getter: (s) => s.ui.performance,
+      setter: (s, v) => (s.ui.performance = v)
+    },
+
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.AxesSubtitle,
+      title: 'Axes'
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.AxesShowOrthographicButtonToggle,
+      label: 'Show Orthographic Button',
+      getter: (s) => s.ui.orthographic,
+      setter: (s, v) => (s.ui.orthographic = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.AxesShowResetCameraButtonToggle,
+      label: 'Show Reset Camera Button',
+      getter: (s) => s.ui.resetCamera,
+      setter: (s, v) => (s.ui.resetCamera = v)
+    },
+
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.ControlBarSubtitle,
+      title: 'Control Bar'
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarShowControlBarToggle,
+      label: 'Show Control Bar',
+      getter: (s) => s.ui.controlBar,
+      setter: (s, v) => (s.ui.controlBar = v)
+    },
+
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.ControlBarCursorsSubtitle,
+      title: 'Control Bar - Cursors'
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarCursorsShowOrbitButtonToggle,
+      label: 'Show Orbit Button',
+      getter: (s) => s.ui.orbit,
+      setter: (s, v) => (s.ui.orbit = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarCursorsShowLookAroundButtonToggle,
+      label: 'Show Look Around Button',
+      getter: (s) => s.ui.lookAround,
+      setter: (s, v) => (s.ui.lookAround = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarCursorsShowPanButtonToggle,
+      label: 'Show Pan Button',
+      getter: (s) => s.ui.pan,
+      setter: (s, v) => (s.ui.pan = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarCursorsShowZoomButtonToggle,
+      label: 'Show Zoom Button',
+      getter: (s) => s.ui.zoom,
+      setter: (s, v) => (s.ui.zoom = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarCursorsShowZoomWindowButtonToggle,
+      label: 'Show Zoom Window Button',
+      getter: (s) => s.ui.zoomWindow,
+      setter: (s, v) => (s.ui.zoomWindow = v)
+    },
+
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.ControlBarToolsSubtitle,
+      title: 'Control Bar - Tools'
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarToolsShowMeasuringModeButtonToggle,
+      label: 'Show Measuring Mode Button',
+      getter: (s) => s.ui.measuringMode,
+      setter: (s, v) => (s.ui.measuringMode = v)
+    },
+
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.ControlBarSettingsSubtitle,
+      title: 'Control Bar - Settings'
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarSettingsShowProjectInspectorButtonToggle,
+      label: 'Show Project Inspector Button',
+      getter: (s) => s.ui.projectInspector,
+      setter: (s, v) => (s.ui.projectInspector = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
+      label: 'Show Settings Button',
+      getter: (s) => s.ui.settings,
+      setter: (s, v) => (s.ui.settings = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarSettingsShowHelpButtonToggle,
+      label: 'Show Help Button',
+      getter: (s) => s.ui.help,
+      setter: (s, v) => (s.ui.help = v)
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarSettingsShowMaximiseButtonToggle,
+      label: 'Show Maximise Button',
+      getter: (s) => s.ui.maximise,
+      setter: (s, v) => (s.ui.maximise = v)
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsState.ts b/src/vim-web/react-viewers/settings/settingsState.ts
index 68bb9551..a7b4a54a 100644
--- a/src/vim-web/react-viewers/settings/settingsState.ts
+++ b/src/vim-web/react-viewers/settings/settingsState.ts
@@ -7,11 +7,14 @@ import * as Core from '../../core-viewers'
 import { Settings, PartialSettings, createSettings } from './settings'
 import { isTrue } from './userBoolean'
 import { saveSettingsToLocal } from './settingsStorage'
+import { ArgFuncRef, StateRef, useArgFuncRef, useFuncRef, useStateRef } from '../helpers/reactUtils'
+import { SettingsCustomizer, SettingsItem } from './settingsItem'
 
 export type SettingsState = {
   value: Settings
   update: (updater: (s: Settings) => void) => void
   register: (action: (s: Settings) => void) => void
+  customizer : StateRef<SettingsCustomizer>
 }
 
 /**
@@ -24,6 +27,7 @@ export function useSettings (
   const merged = createSettings(value)
   const [settings, setSettings] = useState(merged)
   const onUpdate = useRef<(s: Settings) => void>()
+  const customizer = useStateRef<SettingsCustomizer>(settings => settings)
 
   const update = function (updater: (s: Settings) => void) {
     const next = { ...settings } // Shallow copy
@@ -47,7 +51,8 @@ export function useSettings (
     () => ({
       value: settings,
       update,
-      register: (v) => (onUpdate.current = v)
+      register: (v) => (onUpdate.current = v),
+      customizer
     }),
     [settings]
   )
diff --git a/src/vim-web/react-viewers/settings/settingsSubtitle.tsx b/src/vim-web/react-viewers/settings/settingsSubtitle.tsx
new file mode 100644
index 00000000..6e19304b
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/settingsSubtitle.tsx
@@ -0,0 +1,5 @@
+  import { SettingsSubtitle } from './settingsItem'
+
+  export function renderSettingsSubtitle(item: SettingsSubtitle) {
+    return <h3 className="vc-subtitle">{item.title}</h3>
+  }
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsToggle.tsx b/src/vim-web/react-viewers/settings/settingsToggle.tsx
new file mode 100644
index 00000000..a7e5b968
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/settingsToggle.tsx
@@ -0,0 +1,36 @@
+import { SettingsToggle } from './settingsItem'
+import * as Core from '../../core-viewers'
+import { SettingsState } from './settingsState'
+
+/**
+ * Renders a toggle (checkbox) UI element for a given SettingsToggle item.
+ * @param viewer   The WebGL viewer instance (for future consistency).
+ * @param settings The current settings state object.
+ * @param item     The SettingsToggle configuration.
+ * @returns JSX.Element | null
+ */
+export function renderSettingsToggle(
+  viewer: Core.Webgl.Viewer,
+  settings: SettingsState,
+  item: SettingsToggle
+): JSX.Element | null {
+  const value = item.getter(settings.value)
+  if (value === 'AlwaysTrue' || value === 'AlwaysFalse') return null
+
+  const handleChange = () => {
+    const current = item.getter(settings.value)
+    settings.update((s) => item.setter(s, !current))
+  }
+
+  return (
+    <label className="vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm">
+      <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}
+    </label>
+  )
+}
diff --git a/src/vim-web/react-viewers/state/sharedIsolation.ts b/src/vim-web/react-viewers/state/sharedIsolation.ts
index a8551c29..2f602e95 100644
--- a/src/vim-web/react-viewers/state/sharedIsolation.ts
+++ b/src/vim-web/react-viewers/state/sharedIsolation.ts
@@ -48,12 +48,12 @@ export interface IsolationAdapter{
 
 export function useSharedIsolation(adapter : IsolationAdapter){
   const _adapter = useRef(adapter);
-  const visibility = useStateRef<VisibilityStatus>(() => adapter.computeVisibility());
+  const visibility = useStateRef<VisibilityStatus>(() => adapter.computeVisibility(), true);
   const autoIsolate = useStateRef<boolean>(false);
   const showPanel = useStateRef<boolean>(false);
   const showRooms = useStateRef<boolean>(false);
   const showGhost = useStateRef<boolean>(false);
-  const ghostOpacity = useStateRef<number>(() => adapter.getGhostOpacity());
+  const ghostOpacity = useStateRef<number>(() => adapter.getGhostOpacity(), true);
   
   const onAutoIsolate = useFuncRef(() => {
     if(adapter.hasSelection()){
diff --git a/src/vim-web/react-viewers/webgl/viewer.tsx b/src/vim-web/react-viewers/webgl/viewer.tsx
index bc1d9a75..e4ccae0c 100644
--- a/src/vim-web/react-viewers/webgl/viewer.tsx
+++ b/src/vim-web/react-viewers/webgl/viewer.tsx
@@ -44,6 +44,7 @@ import { IsolationPanel } from '../panels/isolationPanel'
 import { useWebglIsolation } from './isolation'
 import { GenericPanelHandle } from '../generic'
 import { ControllablePromise } from '../../utils'
+import { SettingsCustomizer } from '../settings/settingsItem'
 
 /**
  * Creates a UI container along with a VIM.Viewer and its associated React viewer.
@@ -176,7 +177,11 @@ export function Viewer (props: {
       loader: loader.current,
       isolation: isolationRef,
       camera,
-      settings,
+      settings: {
+        update : settings.update,
+        register : settings.register,
+        customize : (c: SettingsCustomizer) => settings.customizer.set(c)
+      },
       get isolationPanel(){
         return isolationPanelHandle.current
       },
diff --git a/src/vim-web/react-viewers/webgl/viewerRef.ts b/src/vim-web/react-viewers/webgl/viewerRef.ts
index d083707c..5075cb29 100644
--- a/src/vim-web/react-viewers/webgl/viewerRef.ts
+++ b/src/vim-web/react-viewers/webgl/viewerRef.ts
@@ -14,6 +14,7 @@ import { ModalHandle } from '../panels/modal'
 import { SectionBoxRef } from '../state/sectionBoxState'
 import { IsolationRef } from '../state/sharedIsolation'
 import { GenericPanelHandle } from '../generic'
+import { SettingsItem } from '../settings/settingsItem'
 /**
 * Settings API managing settings applied to the viewer.
 */
@@ -33,6 +34,12 @@ export type SettingsRef = {
    */
   register : (callback: (settings: Settings) => void) => void
 
+  /**
+   * Customizes the settings panel by providing a customizer function.
+   * @param customizer A function that modifies the settings items.
+   */
+  customize : (customizer: (items: SettingsItem[]) => SettingsItem[]) => void
+
 }
 
 

From 83e38c5d59aa251e3dbdfccf8e2e601c3c2d13cd Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Fri, 14 Nov 2025 15:13:02 -0500
Subject: [PATCH 2/8] settings

---
 src/main.tsx                                  |  82 +++-
 src/vim-web/core-viewers/ultra/viewport.ts    |  11 +
 .../viewer/gizmos/markers/gizmoMarker.ts      |   4 +
 .../webgl/viewer/rendering/renderer.ts        |  10 +-
 .../core-viewers/webgl/viewer/viewport.ts     |   2 +-
 .../react-viewers/errors/errorStyle.tsx       |   9 +-
 .../react-viewers/panels/isolationPanel.tsx   |  27 +-
 .../react-viewers/panels/sidePanel.tsx        |  11 +-
 .../react-viewers/settings/settings.ts        | 131 +++--
 .../settings/settingsInputBox.tsx             |   7 +-
 .../react-viewers/settings/settingsItem.ts    |  18 +-
 .../react-viewers/settings/settingsKeys.ts    |  25 +
 .../react-viewers/settings/settingsPanel.tsx  | 450 ++++++++++++++----
 .../react-viewers/settings/settingsState.ts   |  35 +-
 .../react-viewers/settings/settingsStorage.ts |  14 +-
 .../react-viewers/settings/settingsToggle.tsx |   6 +-
 .../react-viewers/state/controlBarState.tsx   | 136 ++++--
 .../react-viewers/state/sharedIsolation.ts    |   9 +-
 src/vim-web/react-viewers/style.css           |   9 +-
 src/vim-web/react-viewers/ultra/controlBar.ts |  17 +-
 .../ultra/errors/fileLoadingError.tsx         |   2 +-
 .../ultra/errors/fileOpeningError.tsx         |   2 +-
 .../ultra/errors/serverCompatibilityError.tsx |   2 +-
 .../ultra/errors/serverConnectionError.tsx    |   2 +-
 .../errors/serverFileDownloadingError.tsx     |   2 +-
 .../ultra/errors/serverStreamError.tsx        |   2 +-
 src/vim-web/react-viewers/ultra/isolation.ts  |   3 +
 src/vim-web/react-viewers/ultra/settings.ts   |   0
 src/vim-web/react-viewers/ultra/viewer.tsx    |  45 +-
 src/vim-web/react-viewers/urls.ts             |   1 -
 src/vim-web/react-viewers/webgl/isolation.ts  |  81 ++--
 src/vim-web/react-viewers/webgl/viewer.tsx    |  18 +-
 32 files changed, 871 insertions(+), 302 deletions(-)
 create mode 100644 src/vim-web/react-viewers/ultra/settings.ts

diff --git a/src/main.tsx b/src/main.tsx
index 11310a6d..5455fae7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,9 @@
 import React, { MutableRefObject, useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import * as VIM from './vim-web'
+import * as THREE from 'three'
+import { Icons } from "./vim-web/react-viewers";
+import { useStateRef } from "./vim-web/react-viewers/helpers/reactUtils";
 
 type ViewerRef = VIM.React.Webgl.ViewerRef | VIM.React.Ultra.ViewerRef
 
@@ -19,20 +22,57 @@ console.log("Root container found", container);
 // Render your App
 root.render(
   //<React.StrictMode>
-    <App />
+  <App />
   //</React.StrictMode>
 );
 
 function App() {
-
   const div = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<ViewerRef>()
+
+  var customToggle = useStateRef(false)
+  var customValue = useStateRef(10)
+
   useEffect(() => {
-    if(window.location.pathname.includes('ultra')){
-      createUltra(viewerRef, div.current!) 
+    if (window.location.pathname.includes('ultra')) {
+      createUltra(viewerRef, div.current!)
     }
-    else{
-      createWebgl(viewerRef, div.current!)
+    else {
+      createWebgl(viewerRef, div.current!).then((viewer) => {
+        viewer.settings.customize((s) => [
+          {
+            type: 'subtitle',
+            key: 'custom-subtitle',
+            title: 'Custom Section'
+          },
+          {
+            type: 'toggle',
+            key: 'custom-toggle',
+            label: 'Custom Toggle',
+            getter: (s) =>  customToggle.get(),
+            setter: (s, v) => (customToggle.set(!v))
+          },
+          {
+            type: 'box',
+            key: 'custom-box',
+            label: 'Custom Box',
+            info: 'closest even number',
+            transform: (n) => Math.round(n / 2) * 2,
+            getter: (s) => customValue.get(),
+            setter: (s, v) => (customValue.set(v))
+          },
+          {
+            type: 'element',
+            key: 'custom-element',
+            // example custom text
+            element: (
+              <div className="vc-m-2 vc-p-2 vc-border vc-border-gray-medium vc-rounded vc-bg-gray-light">
+                This is a custom element added to the settings panel.
+              </div>)
+          },
+          ...s // keep all exising settings
+        ])
+      })
     }
 
     return () => {
@@ -41,35 +81,46 @@ function App() {
   }, [])
 
   return (
-    <div ref={div} className='vc-inset-0 vc-absolute'/>
+    <div ref={div} className='vc-inset-0 vc-absolute' />
   )
 }
 
-async function createWebgl (viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
+async function createWebgl(viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
   const viewer = await VIM.React.Webgl.createViewer(div)
   viewerRef.current = viewer
   globalThis.viewer = viewer // for testing in browser console
 
   const url = getPathFromUrl() ?? 'https://storage.cdn.vimaec.com/samples/residence.v1.2.75.vim'
   const request = viewer.loader.request(
-    { url }, 
+    { url },
   )
+
   const result = await request.getResult()
   if (result.isSuccess()) {
     viewer.loader.add(result.result)
     viewer.camera.frameScene.call()
   }
+
+  return viewer
 }
 
-async function createUltra (viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
-  const viewer = await VIM.React.Ultra.createViewer(div)
+async function createUltra(viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
+  const viewer = await VIM.React.Ultra.createViewer(div,
+    {ui:{
+      sectioningEnable: true,
+      
+    }}
+  )
+  viewer.camera.autoCamera.set(true) // Enable auto camera framing
+  viewer.isolation.autoIsolate.set(true) // Enable auto isolation
+
   await viewer.core.connect()
   viewerRef.current = viewer
   globalThis.viewer = viewer // for testing in browser console
 
   const url = getPathFromUrl() ?? 'https://storage.cdn.vimaec.com/samples/residence.v1.2.75.vim'
   const request = viewer.load(
-    { url }, 
+    { url },
   )
   const result = await request.getResult()
   if (result.isSuccess) {
@@ -77,10 +128,7 @@ async function createUltra (viewerRef: MutableRefObject<ViewerRef>, div: HTMLDiv
   }
 }
 
-
-
-function getPathFromUrl () {
+function getPathFromUrl() {
   const params = new URLSearchParams(window.location.search)
   return params.get('vim') ?? undefined
-}
-
+}
\ No newline at end of file
diff --git a/src/vim-web/core-viewers/ultra/viewport.ts b/src/vim-web/core-viewers/ultra/viewport.ts
index 93cd4266..275e5501 100644
--- a/src/vim-web/core-viewers/ultra/viewport.ts
+++ b/src/vim-web/core-viewers/ultra/viewport.ts
@@ -8,8 +8,12 @@ import { RpcSafeClient } from "./rpcSafeClient";
 export interface IViewport {
   /** The HTML canvas element used for rendering */
   canvas: HTMLCanvasElement
+  
   /** Updates the aspect ratio of the viewport on the server */
   update(): void
+
+  /** Resizes the viewport to match its parent's dimensions */
+  resizeToParent(): void
 }
 
 /**
@@ -57,6 +61,13 @@ export class Viewport {
     }
   }
 
+  /**
+   * Resizes the viewport to match its parent's dimensions
+   */
+  resizeToParent() {
+    this.update()
+  }
+
   /**
    * Cleans up resources by removing resize observer and clearing timeouts
    */
diff --git a/src/vim-web/core-viewers/webgl/viewer/gizmos/markers/gizmoMarker.ts b/src/vim-web/core-viewers/webgl/viewer/gizmos/markers/gizmoMarker.ts
index 009d9f76..43d64b89 100644
--- a/src/vim-web/core-viewers/webgl/viewer/gizmos/markers/gizmoMarker.ts
+++ b/src/vim-web/core-viewers/webgl/viewer/gizmos/markers/gizmoMarker.ts
@@ -43,6 +43,10 @@ export class Marker implements IVimElement {
     return this._submesh.index
   }
 
+  get isRoom(): boolean {
+    return false
+  }
+
   private _outlineAttribute: WebglAttribute<boolean>
   private _visibleAttribute: WebglAttribute<boolean>
   private _coloredAttribute: WebglAttribute<boolean>
diff --git a/src/vim-web/core-viewers/webgl/viewer/rendering/renderer.ts b/src/vim-web/core-viewers/webgl/viewer/rendering/renderer.ts
index 7a529686..edb2d77c 100644
--- a/src/vim-web/core-viewers/webgl/viewer/rendering/renderer.ts
+++ b/src/vim-web/core-viewers/webgl/viewer/rendering/renderer.ts
@@ -146,14 +146,22 @@ export class Renderer implements IRenderer {
     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: ModelMaterial) {
-    this._scene.modelMaterial = material
+    this._scene.modelMaterial = material ?? this.defaultModelMaterial
   }
 
+  /**
+   * The material that will be used when setting model material to undefined.
+   */
+  defaultModelMaterial: ModelMaterial
+
   /**
    * Signal dispatched at the end of each frame if the scene was updated, such as visibility changes.
    */
diff --git a/src/vim-web/core-viewers/webgl/viewer/viewport.ts b/src/vim-web/core-viewers/webgl/viewer/viewport.ts
index 0bea9fea..84191812 100644
--- a/src/vim-web/core-viewers/webgl/viewer/viewport.ts
+++ b/src/vim-web/core-viewers/webgl/viewer/viewport.ts
@@ -150,7 +150,7 @@ export class Viewport {
   /**
    * Resizes the canvas and updates the camera to match new parent dimensions.
    */
-  ResizeToParent () {
+  resizeToParent () {
     this._onResize.dispatch()
   }
 
diff --git a/src/vim-web/react-viewers/errors/errorStyle.tsx b/src/vim-web/react-viewers/errors/errorStyle.tsx
index 9db7f117..8ac9620f 100644
--- a/src/vim-web/react-viewers/errors/errorStyle.tsx
+++ b/src/vim-web/react-viewers/errors/errorStyle.tsx
@@ -5,13 +5,8 @@ export const vcLink = `${vcColorLink} vc-underline`
 export const vcLabel = 'vc-text-[#3F444F]'
 export const vcRoboto = 'vc-font-[\'Roboto\',sans-serif]'
 
-export function footer (url: string) {
-  return (
-    <p className={`vc-text-xs vc-font-normal ${vcColorSecondary}`}>
-      More troubleshooting tips can be found{' '}
-      {link(url, 'here')}
-    </p>
-  )
+export function footer () {
+  return <></>
 }
 
 export function mainText (text: JSX.Element) {
diff --git a/src/vim-web/react-viewers/panels/isolationPanel.tsx b/src/vim-web/react-viewers/panels/isolationPanel.tsx
index c61b46ef..b002023f 100644
--- a/src/vim-web/react-viewers/panels/isolationPanel.tsx
+++ b/src/vim-web/react-viewers/panels/isolationPanel.tsx
@@ -5,9 +5,10 @@ import { GenericPanel, GenericPanelHandle } from "../generic/genericPanel";
 export const Ids = {
   showGhost: "isolationPanel.showGhost",
   ghostOpacity: "isolationPanel.ghostOpacity",
+  transparency: "isolationPanel.transparency",
 }
 
-export const IsolationPanel = forwardRef<GenericPanelHandle, { state: IsolationRef }>(
+export const IsolationPanel = forwardRef<GenericPanelHandle, { state: IsolationRef, transparency: boolean }>(
   (props, ref) => {
     return (
       <GenericPanel
@@ -16,8 +17,18 @@ export const IsolationPanel = forwardRef<GenericPanelHandle, { state: IsolationR
         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,
@@ -26,7 +37,15 @@ export const IsolationPanel = forwardRef<GenericPanelHandle, { state: IsolationR
             enabled: () => props.state.showGhost.get(),
             min: 0,
             max: 1,
-            step: 0.05 },
+            step: 0.05
+          },
+          {
+            type: "bool",
+            visible: () => props.transparency,
+            id: Ids.transparency,
+            label: "Transparency",
+            state: props.state.transparency
+          },
         ]}
       />
     );
diff --git a/src/vim-web/react-viewers/panels/sidePanel.tsx b/src/vim-web/react-viewers/panels/sidePanel.tsx
index d882d4d9..e713cc40 100644
--- a/src/vim-web/react-viewers/panels/sidePanel.tsx
+++ b/src/vim-web/react-viewers/panels/sidePanel.tsx
@@ -22,7 +22,7 @@ export const SidePanelMemo = React.memo(SidePanel)
 export function SidePanel (props: {
   container: Container
   side: SideState
-  viewer: Core.Webgl.Viewer
+  viewer: Core.Webgl.Viewer | Core.Ultra.Viewer
   content: () => JSX.Element
 }) {
   const resizeTimeOut = useRef<number>()
@@ -36,7 +36,7 @@ export function SidePanel (props: {
       props.container.gfx.style.left = '0px'
     }
 
-    props.viewer.viewport.ResizeToParent()
+    props.viewer.viewport.resizeToParent()
   }
 
   const getMaxSize = () => {
@@ -104,9 +104,10 @@ export 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'}`}
     >
       <button
         className="vim-side-panel-nav vc-z-30 vc-absolute vc-right-1 vc-top-1 vc-w-4 vc-h-4 vc-text-gray-medium"
diff --git a/src/vim-web/react-viewers/settings/settings.ts b/src/vim-web/react-viewers/settings/settings.ts
index 8befe3d0..3b5bc2eb 100644
--- a/src/vim-web/react-viewers/settings/settings.ts
+++ b/src/vim-web/react-viewers/settings/settings.ts
@@ -5,6 +5,7 @@
 
 import deepmerge from "deepmerge"
 import { UserBoolean } from "./userBoolean"
+import { ControlBarCameraSettings, ControlBarCursorSettings, ControlBarMeasureSettings, ControlBarSectionBoxSettings, ControlBarVisibilitySettings } from "../state"
 
 /**
  * Makes all fields optional recursively
@@ -30,37 +31,25 @@ export type Settings = {
     canDownload: boolean
     canReadLocalStorage: boolean
   }
-  ui: {
+  ui: ControlBarCameraSettings &
+      ControlBarCursorSettings &
+      ControlBarSectionBoxSettings &
+      ControlBarVisibilitySettings &
+      ControlBarMeasureSettings & {
+    
     // panels
     logo: UserBoolean
     bimTreePanel: UserBoolean
     bimInfoPanel: UserBoolean
     performance: UserBoolean
+    axesPanel: UserBoolean
+    controlBar: UserBoolean
 
     // axesPanel
-    axesPanel: UserBoolean
     orthographic: UserBoolean
     resetCamera: UserBoolean
 
-    // Control bar
-    controlBar: UserBoolean
-    // Control bar - cursors
-    orbit: UserBoolean
-    lookAround: UserBoolean
-    pan: UserBoolean
-    zoom: UserBoolean
-    zoomWindow: UserBoolean
-
-    autoCamera : UserBoolean
-    frameSelection: UserBoolean
-    frameScene: UserBoolean
-
-    // Control bar - tools
-    sectioningMode: UserBoolean
-    measuringMode: UserBoolean
-    toggleIsolation: UserBoolean
-
-    // Control bar - tools
+    // Control bar - settings
     projectInspector: UserBoolean
     settings: UserBoolean
     help: UserBoolean
@@ -68,6 +57,22 @@ export type Settings = {
   }
 }
 
+export type AnySettings = Settings | UltraSettings
+
+export type UltraSettings = {
+  ui: ControlBarCameraSettings &
+      ControlBarCursorSettings &
+      ControlBarSectionBoxSettings &
+      ControlBarVisibilitySettings &
+      ControlBarMeasureSettings & {
+      
+      settings: UserBoolean
+  }
+}
+
+export type PartialUltraSettings = RecursivePartial<UltraSettings>
+
+
 /**
  * Partial version of ComponentSettings where all properties are optional
  */
@@ -100,21 +105,34 @@ export function getDefaultSettings(): Settings {
       // Control bar
       controlBar: true,
       // Control bar - cursors
-      orbit: true,
-      lookAround: true,
-      pan: true,
-      zoom: true,
-      zoomWindow: true,
+      cursorOrbit: true,
+      cursorLookAround: true,
+      cursorPan: true,
+      cursorZoom: true,
   
       // Control bar - camera
-      autoCamera: true,
-      frameScene: true,
-      frameSelection: true,
+      cameraAuto: true,
+      cameraFrameScene: true,
+      cameraFrameSelection: true,
   
       // Control bar - tools
-      sectioningMode: true,
+      sectioningEnable: true,
+      sectioningFitToSelection: true,
+      sectioningReset: true,
+      sectioningShow : true,
+      sectioningAuto : true,
+      sectioningSettings : true,
+
       measuringMode: true,
-      toggleIsolation: true,
+
+      // Control bar - Visibility
+      visibilityEnable: true,
+      visibilityClearSelection: true,
+      visibilityShowAll: true,
+      visibilityToggle: true,
+      visibilityIsolate: true,
+      visibilityAutoIsolate: true,
+      visibilitySettings: true,
   
       // Control bar - settings
       projectInspector: true,
@@ -125,8 +143,53 @@ export function getDefaultSettings(): Settings {
   }
 }
 
-export function createSettings(settings: PartialSettings): Settings {
+export function getDefaultUltraSettings(): UltraSettings {
+  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,
+
+      measuringMode: true,
+
+      // Control bar - Visibility
+      visibilityEnable: true,
+      visibilityClearSelection: true,
+      visibilityShowAll: true,
+      visibilityToggle: true,
+      visibilityIsolate: true,
+      visibilityAutoIsolate: true,
+      visibilitySettings: true,
+
+      settings: true
+    }
+  }
+}
+
+export function createSettings<T extends Settings | UltraSettings>(settings: RecursivePartial<T>, defaultSettings: T): T {
+  return settings !== undefined
+    ? deepmerge(defaultSettings, settings as Partial<T>) as T
+    : defaultSettings
+}
+
+export function createUltraSettings(settings: PartialUltraSettings): UltraSettings {
   return settings !== undefined
-    ? deepmerge(getDefaultSettings(), settings) as Settings
-    : getDefaultSettings()
+    ? deepmerge(getDefaultUltraSettings(), settings) as UltraSettings
+    : getDefaultUltraSettings()
 }
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsInputBox.tsx b/src/vim-web/react-viewers/settings/settingsInputBox.tsx
index 908c9626..b1a991c1 100644
--- a/src/vim-web/react-viewers/settings/settingsInputBox.tsx
+++ b/src/vim-web/react-viewers/settings/settingsInputBox.tsx
@@ -2,8 +2,9 @@ import React, { useEffect } from 'react'
 import { SettingsBox } from './settingsItem'
 import * as Core from '../../core-viewers'
 import { SettingsState } from './settingsState'
+import { AnySettings } from './settings'
 
-export function renderSettingsInputBox(viewer: Core.Webgl.Viewer, settings: SettingsState, item: SettingsBox) {
+export function renderSettingsInputBox(settings: SettingsState<AnySettings>, item: SettingsBox<AnySettings>) {
   const ref = React.useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -23,14 +24,14 @@ export function renderSettingsInputBox(viewer: Core.Webgl.Viewer, settings: Sett
   }
 
   return (
-    <div className="vc-box-input vc-my-1">
+    <div className="vc-box-input vc-my-1 ">
       <label htmlFor="textbox" className="vc-w-3 vc-h-2">
         {item.label}:
       </label>
       <input
         ref={ref}
         type="text"
-        className="vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1"
+        className="vim-settings-textbox vc-border vc-rounded-sm vc-border-gray vc-w-14 vc-ml-1 vc-p-1"
         onBlur={update}
       />
       <label htmlFor="textbox" className="vc-w-3 vc-h-2 vc-text-gray vc-ml-1">
diff --git a/src/vim-web/react-viewers/settings/settingsItem.ts b/src/vim-web/react-viewers/settings/settingsItem.ts
index f8acb211..9bf88932 100644
--- a/src/vim-web/react-viewers/settings/settingsItem.ts
+++ b/src/vim-web/react-viewers/settings/settingsItem.ts
@@ -1,10 +1,10 @@
-import { Settings } from './settings'
+import { AnySettings, Settings } from './settings'
 import { UserBoolean } from './userBoolean'
 
 
-export type SettingsCustomizer = (items: SettingsItem[]) => SettingsItem[]
+export type SettingsCustomizer<T extends AnySettings> = (items: SettingsItem<T>[]) => SettingsItem<T>[]
 
-export type SettingsItem = SettingsSubtitle | SettingsToggle | SettingsBox | SettingsElement
+export type SettingsItem<T extends AnySettings> = SettingsSubtitle | SettingsToggle<T> | SettingsBox<T> | SettingsElement
 
 export type BaseSettingsItem = {
   type: string
@@ -16,20 +16,20 @@ export type SettingsSubtitle = BaseSettingsItem & {
   title: string
 }
 
-export type SettingsToggle = BaseSettingsItem & {
+export type SettingsToggle<T extends AnySettings> = BaseSettingsItem & {
   type: 'toggle'
   label: string
-  getter: (settings: Settings) => UserBoolean
-  setter: (settings: Settings, b: boolean) => void
+  getter: (settings: T) => UserBoolean
+  setter: (settings: T, b: boolean) => void
 }
 
-export type SettingsBox = BaseSettingsItem & {
+export type SettingsBox<T extends AnySettings> = BaseSettingsItem & {
   type: 'box'
   label: string
   info: string
   transform: (value: number) => number
-  getter: (settings: Settings) => number
-  setter: (settings: Settings, b: number) => void
+  getter: (settings: T) => number
+  setter: (settings: T, b: number) => void
 }
 
 export type SettingsElement = BaseSettingsItem & {
diff --git a/src/vim-web/react-viewers/settings/settingsKeys.ts b/src/vim-web/react-viewers/settings/settingsKeys.ts
index 131d068d..47cb775b 100644
--- a/src/vim-web/react-viewers/settings/settingsKeys.ts
+++ b/src/vim-web/react-viewers/settings/settingsKeys.ts
@@ -33,6 +33,31 @@ export class SettingsPanelKeys {
   static ControlBarToolsSubtitle = 'controlBarTools'
   static ControlBarToolsShowMeasuringModeButtonToggle = 'measuringMode'
 
+  // --- Control Bar Camera ---
+  static ControlBarCameraSubtitle = 'settingsPanel.controlBar.Camera'
+  static ControlBarAutoCamera = 'settingsPanel.controlBar.autoCamera'
+  static ControlBarFrameSelection = 'settingsPanel.controlBar.frameSelection'
+  static ControlBarFrameAll = 'settingsPanel.controlBar.frameAll'
+
+  // --- Control Bar - Sectioning ---
+  static ControlBarSectioningSubtitle = 'settingsPanel.controlBar.sectioning'
+  static ControlBarSectioningEnable = 'settingsPanel.controlBar.enableSectioning'
+  static ControlBarSectioningFitToSelection = 'settingsPanel.controlBar.fitToSelection'
+  static ControlBarSectioningReset = 'settingsPanel.controlBar.reset'
+  static ControlBarSectioningShow = 'settingsPanel.controlBar.show'
+  static ControlBarSectioningAuto = 'settingsPanel.controlBar.auto'
+  static ControlBarSectioningSettings = 'settingsPanel.controlBar.settings'
+
+  // --- Control Bar - Visibility ---
+  static ControlBarVisibilitySubtitle = 'controlBar.visibility.subtitle'
+  static ControlBarVisibilityClearSelection = 'controlBar.visibility.clearSelection'
+  static ControlBarVisibilityShowAll = 'controlBar.visibility.showAll'
+  static ControlBarVisibilityToggle = 'controlBar.visibility.toggle'
+  static ControlBarVisibilityIsolate = 'controlBar.visibility.isolate'
+  static ControlBarVisibilityAutoIsolate = 'controlBar.visibility.autoIsolate'
+  static ControlBarVisibilitySettings = 'controlBar.visibility.settings'
+
+
   // --- Control Bar - Settings ---
   static ControlBarSettingsSubtitle = 'controlBarSettings'
   static ControlBarSettingsShowProjectInspectorButtonToggle = 'projectInspector'
diff --git a/src/vim-web/react-viewers/settings/settingsPanel.tsx b/src/vim-web/react-viewers/settings/settingsPanel.tsx
index ba83a715..ca082b03 100644
--- a/src/vim-web/react-viewers/settings/settingsPanel.tsx
+++ b/src/vim-web/react-viewers/settings/settingsPanel.tsx
@@ -11,6 +11,7 @@ import { renderSettingsInputBox } from './settingsInputBox'
 import { renderSettingsToggle } from './settingsToggle'
 import { SettingsItem } from './settingsItem'
 import { renderSettingsSubtitle } from './settingsSubtitle'
+import { AnySettings, Settings } from './settings'
 
 /**
  * JSX Component to interact with settings.
@@ -19,25 +20,24 @@ import { renderSettingsSubtitle } from './settingsSubtitle'
  * @param visible will return null if this is false.
  * @returns
  */
-export function SettingsPanel(props: {
-  viewer: Core.Webgl.Viewer
-  settings: SettingsState
+export function SettingsPanel<T extends AnySettings>(props: {
+  content: SettingsItem<T>[]
+  settings: SettingsState<T>
   visible: boolean
 }) {
   if (!props.visible) return null
 
-  function renderItem(
-    viewer: Core.Webgl.Viewer,
-    settings: SettingsState,
-    item: SettingsItem,
+  function renderItem<T extends AnySettings>(
+    settings: SettingsState<T>,
+    item: SettingsItem<T>,
   ): JSX.Element | null {
     return (
       <React.Fragment key={item.key}>
         {(() => {
           switch (item.type) {
             case 'subtitle': return renderSettingsSubtitle(item)
-            case 'toggle':   return renderSettingsToggle(viewer, settings, item)
-            case 'box':      return renderSettingsInputBox(viewer, settings, item)
+            case 'toggle':   return renderSettingsToggle(settings, item)
+            case 'box':      return renderSettingsInputBox(settings, item)
             case 'element':  return item.element
             default: return null
           }
@@ -46,198 +46,464 @@ export function SettingsPanel(props: {
     )
   }
 
-  var customizer = props.settings.customizer.get()
-  var content = GetSettingsContent(props.viewer)
-  content = customizer ? customizer(content) : content
+  const customizer = props.settings.customizer.get()
+  const content = customizer ? customizer(props.content) : props.content
+
+  const sections = buildSections(content)
 
   return (
     <div className="vc-absolute vc-inset-0">
-      <h3 className="vc-title">Settings </h3>
-      <div className="vim-settings vc-absolute vc-top-6 vc-left-0 vc-bottom-0 vc-right-0 vc-overflow-y-auto">
-        {content.map(item => renderItem(props.viewer, props.settings, item))}
+      {/* CHANGED: add bottom margin so title sits a bit away from the list */}
+      <h3 className="vc-title vc-mb-2">Settings</h3>
+
+      {/* CHANGED: add padding + vertical spacing between sections */}
+      <div className="
+        vim-settings
+        vc-absolute vc-top-8 vc-left-0 vc-right-0 vc-bottom-0
+        vc-overflow-y-auto
+        vc-pr-2
+        vc-space-y-2
+        vc-box-border
+      ">
+        {sections.map(section => (
+          <details
+            key={section.key}
+            open
+            /* CHANGED: make each section look like a card */
+            className="
+              vim-settings-section
+              vc-bg-white
+              vc-rounded-md
+              vc-shadow-sm
+              vc-border
+              vc-border-slate-200
+              vc-p-2
+              vc-space-y-2
+            "
+          >
+            {/* CHANGED: slightly bolder title + clickable cursor */}
+            <summary className="vim-settings-section-title vc-font-medium vc-text-sm vc-cursor-pointer">
+              {section.title}
+            </summary>
+
+            {/* CHANGED: add spacing between items inside each card */}
+            <div className="vim-settings-section-content vc-mt-2 vc-space-y-2">
+              {section.items.map(item =>
+                renderItem<T>(props.settings, item),
+              )}
+            </div>
+          </details>
+        ))}
       </div>
     </div>
   )
 }
 
-function GetSettingsContent(viewer: Core.Webgl.Viewer): SettingsItem[] {
-  return [
-    {
-      type: 'subtitle',
-      key: SettingsPanelKeys.InputsSubtitle,
-      title: 'Inputs'
-    },
-    {
-      type: 'box',
-      key: SettingsPanelKeys.InputsScrollSpeedBox,
-      label: 'Scroll Speed',
-      info: '[0.1,10]',
-      transform: (n) => THREE.MathUtils.clamp(n, 0.1, 10),
-      getter: (_s) => viewer.inputs.scrollSpeed,
-      setter: (_s, v) => {
-        viewer.inputs.scrollSpeed = v
+type SettingsSection<T extends AnySettings> = {
+  key: string
+  title: string
+  items: SettingsItem<T>[]
+}
+
+function buildSections<T extends AnySettings>(items: SettingsItem<T>[]): SettingsSection<T>[] {
+  const sections: SettingsSection<T>[] = []
+  let current: SettingsSection<T> | null = null
+
+  for (const item of items) {
+    if (item.type === 'subtitle') {
+      current = {
+        key: item.key,
+        title: item.title,
+        items: [],
       }
-    },
+      sections.push(current)
+    } else {
+      if (!current) {
+        // optional: items before the first subtitle
+        current = {
+          key: 'default',
+          title: '',
+          items: [],
+        }
+        sections.push(current)
+      }
+      current.items.push(item)
+    }
+  }
+
+  return sections
+}
+function getPanelsVisibilitySettings(): SettingsItem<Settings>[] {
+  return [
     {
       type: 'subtitle',
       key: SettingsPanelKeys.PanelsSubtitle,
-      title: 'Panels'
+      title: 'Panels Visibility',
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowLogoToggle,
-      label: 'Show Logo',
+      label: 'Logo',
       getter: (s) => s.ui.logo,
-      setter: (s, v) => (s.ui.logo = v)
+      setter: (s, v) => (s.ui.logo = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowBimTreeToggle,
-      label: 'Show Bim Tree',
+      label: 'Bim Tree',
       getter: (s) => s.ui.bimTreePanel,
-      setter: (s, v) => (s.ui.bimTreePanel = v)
+      setter: (s, v) => (s.ui.bimTreePanel = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowBimInfoToggle,
-      label: 'Show Bim Info',
+      label: 'Bim Info',
       getter: (s) => s.ui.bimInfoPanel,
-      setter: (s, v) => (s.ui.bimInfoPanel = v)
+      setter: (s, v) => (s.ui.bimInfoPanel = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowAxesPanelToggle,
-      label: 'Show Axes Panel',
+      label: 'Axes',
       getter: (s) => s.ui.axesPanel,
-      setter: (s, v) => (s.ui.axesPanel = v)
+      setter: (s, v) => (s.ui.axesPanel = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowPerformancePanelToggle,
-      label: 'Show Performance Panel',
+      label: 'Performance',
       getter: (s) => s.ui.performance,
-      setter: (s, v) => (s.ui.performance = v)
+      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 getAxesPanelSettings(): SettingsItem<Settings>[] {
+  return [
     {
       type: 'subtitle',
       key: SettingsPanelKeys.AxesSubtitle,
-      title: 'Axes'
+      title: 'Axes Panel',
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.AxesShowOrthographicButtonToggle,
-      label: 'Show Orthographic Button',
+      label: 'Orthographic Camera',
       getter: (s) => s.ui.orthographic,
-      setter: (s, v) => (s.ui.orthographic = v)
+      setter: (s, v) => (s.ui.orthographic = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.AxesShowResetCameraButtonToggle,
-      label: 'Show Reset Camera Button',
+      label: 'Reset Camera',
       getter: (s) => s.ui.resetCamera,
-      setter: (s, v) => (s.ui.resetCamera = v)
+      setter: (s, v) => (s.ui.resetCamera = v),
     },
+  ]
+}
 
+function getControlBarCursorSettings(): SettingsItem<Settings>[] {
+  return [
     {
       type: 'subtitle',
-      key: SettingsPanelKeys.ControlBarSubtitle,
-      title: 'Control Bar'
+      key: SettingsPanelKeys.ControlBarCursorsSubtitle,
+      title: 'Control Bar - Cursors',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarShowControlBarToggle,
-      label: 'Show Control Bar',
-      getter: (s) => s.ui.controlBar,
-      setter: (s, v) => (s.ui.controlBar = v)
+      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 getControlBarMeasureSettings(): SettingsItem<Settings>[] {
+  return [
     {
       type: 'subtitle',
-      key: SettingsPanelKeys.ControlBarCursorsSubtitle,
-      title: 'Control Bar - Cursors'
+      key: SettingsPanelKeys.ControlBarToolsSubtitle,
+      title: 'Control Bar - Measurement',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarCursorsShowOrbitButtonToggle,
-      label: 'Show Orbit Button',
-      getter: (s) => s.ui.orbit,
-      setter: (s, v) => (s.ui.orbit = v)
+      key: SettingsPanelKeys.ControlBarToolsShowMeasuringModeButtonToggle,
+      label: 'Enable',
+      getter: (s) => s.ui.measuringMode,
+      setter: (s, v) => (s.ui.measuringMode = v),
+    },
+  ]
+}
+
+function getControlBarCameraSettings(): SettingsItem<Settings>[] {
+  return [
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.ControlBarCameraSubtitle,
+      title: 'Control Bar - Camera',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarCursorsShowLookAroundButtonToggle,
-      label: 'Show Look Around Button',
-      getter: (s) => s.ui.lookAround,
-      setter: (s, v) => (s.ui.lookAround = v)
+      key: SettingsPanelKeys.ControlBarAutoCamera,
+      label: 'Auto Camera',
+      getter: (s) => s.ui.cameraAuto,
+      setter: (s, v) => (s.ui.cameraAuto = v),
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarCursorsShowPanButtonToggle,
-      label: 'Show Pan Button',
-      getter: (s) => s.ui.pan,
-      setter: (s, v) => (s.ui.pan = v)
+      key: SettingsPanelKeys.ControlBarFrameSelection,
+      label: 'Frame Selection',
+      getter: (s) => s.ui.cameraFrameSelection,
+      setter: (s, v) => (s.ui.cameraFrameSelection = v),
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarCursorsShowZoomButtonToggle,
-      label: 'Show Zoom Button',
-      getter: (s) => s.ui.zoom,
-      setter: (s, v) => (s.ui.zoom = v)
+      key: SettingsPanelKeys.ControlBarFrameAll,
+      label: 'Frame All',
+      getter: (s) => s.ui.cameraFrameScene,
+      setter: (s, v) => (s.ui.cameraFrameScene = v),
+    },
+  ]
+}
+
+function getControlBarSectionBoxSettings(): SettingsItem<Settings>[] {
+  return [
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.ControlBarSectioningSubtitle,
+      title: 'Control Bar - Sectioning',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarCursorsShowZoomWindowButtonToggle,
-      label: 'Show Zoom Window Button',
-      getter: (s) => s.ui.zoomWindow,
-      setter: (s, v) => (s.ui.zoomWindow = v)
+      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(): SettingsItem<Settings>[] {
+  return [
     {
       type: 'subtitle',
-      key: SettingsPanelKeys.ControlBarToolsSubtitle,
-      title: 'Control Bar - Tools'
+      key: SettingsPanelKeys.ControlBarVisibilitySubtitle,
+      title: 'Control Bar - Visibility',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarToolsShowMeasuringModeButtonToggle,
-      label: 'Show Measuring Mode Button',
-      getter: (s) => s.ui.measuringMode,
-      setter: (s, v) => (s.ui.measuringMode = v)
+      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 getControlBarSettings(): SettingsItem<Settings>[] {
+  return [
     {
       type: 'subtitle',
       key: SettingsPanelKeys.ControlBarSettingsSubtitle,
-      title: 'Control Bar - Settings'
+      title: 'Control Bar - Settings',
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.ControlBarSettingsShowProjectInspectorButtonToggle,
-      label: 'Show Project Inspector Button',
+      label: 'Project Inspector',
       getter: (s) => s.ui.projectInspector,
-      setter: (s, v) => (s.ui.projectInspector = v)
+      setter: (s, v) => (s.ui.projectInspector = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
-      label: 'Show Settings Button',
+      label: 'Settings',
       getter: (s) => s.ui.settings,
-      setter: (s, v) => (s.ui.settings = v)
+      setter: (s, v) => (s.ui.settings = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.ControlBarSettingsShowHelpButtonToggle,
-      label: 'Show Help Button',
+      label: 'Help',
       getter: (s) => s.ui.help,
-      setter: (s, v) => (s.ui.help = v)
+      setter: (s, v) => (s.ui.help = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.ControlBarSettingsShowMaximiseButtonToggle,
-      label: 'Show Maximise Button',
+      label: 'Maximise',
       getter: (s) => s.ui.maximise,
-      setter: (s, v) => (s.ui.maximise = v)
-    }
+      setter: (s, v) => (s.ui.maximise = v),
+    },
+  ]
+}
+
+
+function getControlBarUltraSettings(): SettingsItem<Settings>[] {
+  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 getInputsSettings(
+  viewer: Core.Webgl.Viewer,
+): SettingsItem<Settings>[] {
+  return [
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.InputsSubtitle,
+      title: 'Inputs',
+    },
+    {
+      type: 'box',
+      key: SettingsPanelKeys.InputsScrollSpeedBox,
+      label: 'Scroll Speed',
+      info: '[0.1,10]',
+      transform: (n) => THREE.MathUtils.clamp(n, 0.1, 10),
+      getter: (_s) => viewer.inputs.scrollSpeed,
+      setter: (_s, v) => {
+        viewer.inputs.scrollSpeed = v
+      },
+    },
+  ]
+}
+
+export function GetWebglSettingsContent(
+  viewer: Core.Webgl.Viewer,
+): SettingsItem<Settings>[] {
+  return [
+    ...getInputsSettings(viewer),
+    ...getPanelsVisibilitySettings(),
+    ...getAxesPanelSettings(),
+    ...getControlBarCursorSettings(),
+    ...getControlBarCameraSettings(),
+    ...getControlBarVisibilitySettings(),
+    ...getControlBarMeasureSettings(),
+    ...getControlBarSectionBoxSettings(),
+    ...getControlBarSettings(),
+  ]
+}
+
+  // Ultra: only control bar–related sections
+export function GetUltraSettingsContent(
+  viewer: Core.Ultra.Viewer,
+): SettingsItem<Settings>[] {
+  // viewer kept for a consistent signature, in case you need it later
+  return [
+    ...getControlBarCameraSettings(),
+    ...getControlBarVisibilitySettings(),
+    ...getControlBarSectionBoxSettings(),
+    ...getControlBarUltraSettings(),
   ]
 }
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsState.ts b/src/vim-web/react-viewers/settings/settingsState.ts
index a7b4a54a..a72bab1b 100644
--- a/src/vim-web/react-viewers/settings/settingsState.ts
+++ b/src/vim-web/react-viewers/settings/settingsState.ts
@@ -4,32 +4,33 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import * as Core from '../../core-viewers'
-import { Settings, PartialSettings, createSettings } from './settings'
+import { Settings, PartialSettings, createSettings, UltraSettings, RecursivePartial, AnySettings } from './settings'
 import { isTrue } from './userBoolean'
 import { saveSettingsToLocal } from './settingsStorage'
 import { ArgFuncRef, StateRef, useArgFuncRef, useFuncRef, useStateRef } from '../helpers/reactUtils'
 import { SettingsCustomizer, SettingsItem } from './settingsItem'
 
-export type SettingsState = {
-  value: Settings
-  update: (updater: (s: Settings) => void) => void
-  register: (action: (s: Settings) => void) => void
-  customizer : StateRef<SettingsCustomizer>
+export type SettingsState<T extends AnySettings> = {
+  value: T
+  update: (updater: (s: T) => void) => void
+  register: (action: (s: T) => void) => void
+  customizer : StateRef<SettingsCustomizer<T>>
 }
 
 /**
  * Returns a new state closure for settings.
  */
-export function useSettings (
-  viewer: Core.Webgl.Viewer,
-  value: PartialSettings
-): SettingsState {
-  const merged = createSettings(value)
+export function useSettings<T extends AnySettings> (
+  value: RecursivePartial<T>,
+  defaultSettings: T,
+  applySettings: (settings: T) => void = () => {}
+): SettingsState<T> {
+  const merged = createSettings(value, defaultSettings)
   const [settings, setSettings] = useState(merged)
-  const onUpdate = useRef<(s: Settings) => void>()
-  const customizer = useStateRef<SettingsCustomizer>(settings => settings)
+  const onUpdate = useRef<(s: T) => void>()
+  const customizer = useStateRef<SettingsCustomizer<T>>(settings => settings)
 
-  const update = function (updater: (s: Settings) => void) {
+  const update = function (updater: (s: T) => void) {
     const next = { ...settings } // Shallow copy
     updater(next)
     saveSettingsToLocal(next)
@@ -39,12 +40,12 @@ export function useSettings (
 
   // First Time
   useEffect(() => {
-    applySettings(viewer, settings)
+    applySettings(settings)
   }, [])
 
   // On Change
   useEffect(() => {
-    applySettings(viewer, settings)
+    applySettings(settings)
   }, [settings])
 
   return useMemo(
@@ -61,7 +62,7 @@ export function useSettings (
 /**
  * Apply given vim viewer settings to the given viewer.
  */
-export function applySettings (viewer: Core.Webgl.Viewer, settings: Settings) {
+export function applyWebglSettings (settings: Settings) {
   // Show/Hide performance gizmo
   const performance = document.getElementsByClassName('vim-performance-div')[0]
   if (performance) {
diff --git a/src/vim-web/react-viewers/settings/settingsStorage.ts b/src/vim-web/react-viewers/settings/settingsStorage.ts
index 7db28cb9..a8bc1c10 100644
--- a/src/vim-web/react-viewers/settings/settingsStorage.ts
+++ b/src/vim-web/react-viewers/settings/settingsStorage.ts
@@ -2,7 +2,7 @@
  * @module viw-webgl-react
  */
 
-import { Settings, RecursivePartial, PartialSettings } from './settings'
+import { Settings, RecursivePartial, PartialSettings, UltraSettings, AnySettings } from './settings'
 import { UserBoolean } from './userBoolean'
 
 /**
@@ -10,10 +10,10 @@ import { UserBoolean } from './userBoolean'
  * @param settings - Partial viewer settings to apply permissions from
  * @returns The stored settings with applied permissions, or empty object if retrieval fails
  */
-export function getLocalSettings (settings: PartialSettings = {}) {
+export function getLocalSettings (settings: Partial<AnySettings> = {}) {
   try {
     const json = localStorage.getItem('viewer.settings')
-    const previous = JSON.parse(json) as Settings
+    const previous = JSON.parse(json) as AnySettings
     applyPermission(previous, settings)
     return previous ?? {}
   } catch (e) {
@@ -26,7 +26,7 @@ export function getLocalSettings (settings: PartialSettings = {}) {
  * Saves viewer settings to localStorage after removing permissions
  * @param value - Component settings to save
  */
-export function saveSettingsToLocal (value: Settings) {
+export function saveSettingsToLocal (value: AnySettings) {
   try {
     const save = removePermission(value)
     localStorage.setItem('viewer.settings', JSON.stringify(save))
@@ -41,8 +41,8 @@ export function saveSettingsToLocal (value: Settings) {
  * @param current - The new partial settings containing permission rules
  */
 function applyPermission (
-  previous: Settings,
-  current: RecursivePartial<Settings>
+  previous: AnySettings,
+  current: RecursivePartial<AnySettings>
 ) {
   if (!current?.ui) return
   for (const k of Object.keys(current.ui)) {
@@ -62,7 +62,7 @@ function applyPermission (
  * @param settings - The viewer settings to process
  * @returns A new settings object with permissions converted to boolean values
  */
-function removePermission (settings: Settings) {
+function removePermission (settings: Settings | UltraSettings) {
   const clone = structuredClone(settings)
   const ui = clone.ui as Record<string, UserBoolean>
   for (const k of Object.keys(clone.ui)) {
diff --git a/src/vim-web/react-viewers/settings/settingsToggle.tsx b/src/vim-web/react-viewers/settings/settingsToggle.tsx
index a7e5b968..dee19a76 100644
--- a/src/vim-web/react-viewers/settings/settingsToggle.tsx
+++ b/src/vim-web/react-viewers/settings/settingsToggle.tsx
@@ -1,6 +1,7 @@
 import { SettingsToggle } from './settingsItem'
 import * as Core from '../../core-viewers'
 import { SettingsState } from './settingsState'
+import { AnySettings } from './settings'
 
 /**
  * Renders a toggle (checkbox) UI element for a given SettingsToggle item.
@@ -10,9 +11,8 @@ import { SettingsState } from './settingsState'
  * @returns JSX.Element | null
  */
 export function renderSettingsToggle(
-  viewer: Core.Webgl.Viewer,
-  settings: SettingsState,
-  item: SettingsToggle
+  settings: SettingsState<AnySettings>,
+  item: SettingsToggle<AnySettings>
 ): JSX.Element | null {
   const value = item.getter(settings.value)
   if (value === 'AlwaysTrue' || value === 'AlwaysFalse') return null
diff --git a/src/vim-web/react-viewers/state/controlBarState.tsx b/src/vim-web/react-viewers/state/controlBarState.tsx
index 1a386127..6c37a757 100644
--- a/src/vim-web/react-viewers/state/controlBarState.tsx
+++ b/src/vim-web/react-viewers/state/controlBarState.tsx
@@ -2,7 +2,7 @@ import * as Core from "../../core-viewers";
 import { CameraRef } from './cameraState';
 import { CursorManager } from '../helpers/cursor';
 
-import { Settings, isTrue } from '../settings';
+import { Settings, UltraSettings, UserBoolean, isTrue } from '../settings';
 
 import { SideState } from './sideState';
 import * as Icons from '../icons';
@@ -20,12 +20,22 @@ import * as ControlBar from '../controlbar'
 import Style = ControlBar.Style;
 import Ids = ControlBar.Ids;
 
+export type ControlBarSectionBoxSettings = {
+  sectioningEnable: UserBoolean
+  sectioningFitToSelection: UserBoolean
+  sectioningReset: UserBoolean
+  sectioningShow: UserBoolean
+  sectioningAuto: UserBoolean
+  sectioningSettings: UserBoolean
+}
+
 /**
  * Returns a control bar section for the section box.
  */
 export function controlBarSectionBox(
   section: SectionBoxRef,
-  hasSelection : boolean
+  hasSelection : boolean,
+  settings: ControlBarSectionBoxSettings
 ): ControlBar.IControlBarSection {
 
   return {
@@ -35,6 +45,7 @@ export function controlBarSectionBox(
     buttons: [
       {
         id: Ids.buttonSectionBoxEnable,
+        enabled: () => isTrue(settings.sectioningEnable),
         tip: 'Enable Section Box',
         isOn: () => section.enable.get(),
         style: (on) => Style.buttonExpandStyle(on),
@@ -43,8 +54,9 @@ export function controlBarSectionBox(
       },
       {
         id: Ids.buttonSectionBoxToSelection,
+        
         tip: 'Fit Section',
-        enabled: () => section.enable.get(),
+        enabled: () => section.enable.get() && isTrue(settings.sectioningFitToSelection),
         isOn: () => hasSelection,
         style: (on) => Style.buttonDisableStyle(on),
         action: () => section.sectionSelection.call(), 
@@ -53,7 +65,7 @@ export function controlBarSectionBox(
       {
         id: Ids.buttonSectionBoxToScene,
         tip: 'Reset Section',
-        enabled: () => section.enable.get(),
+        enabled: () => section.enable.get() && isTrue(settings.sectioningReset),
         style: (on) => Style.buttonDefaultStyle(on),
         action: () => section.sectionScene.call(), 
         icon: Icons.sectionBoxReset,
@@ -61,7 +73,7 @@ export function controlBarSectionBox(
       {
         id: Ids.buttonSectionBoxVisible,
         tip: 'Show Section Box',
-        enabled: () => section.enable.get(),
+        enabled: () => section.enable.get() && isTrue(settings.sectioningShow),
         isOn: () => section.visible.get(),
         style: (on) => Style.buttonDefaultStyle(on),
         action: () => section.visible.set(!section.visible.get()),
@@ -70,7 +82,7 @@ export function controlBarSectionBox(
       {
         id: Ids.buttonSectionBoxAuto,
         tip: 'Auto Section',
-        enabled: () => section.enable.get(),
+        enabled: () => section.enable.get() && isTrue(settings.sectioningAuto),
         isOn: () => section.auto.get(),
         style: (on) => Style.buttonDefaultStyle(on),
         action: () => section.auto.set(!section.auto.get()),
@@ -79,7 +91,7 @@ export function controlBarSectionBox(
       {
         id: Ids.buttonSectionBoxSettings,
         tip: 'Section Settings',
-        enabled: () => section.enable.get(),
+        enabled: () => section.enable.get() && isTrue(settings.sectioningSettings),
         isOn: () => section.showOffsetPanel.get(),
         style: (on) => Style.buttonDefaultStyle(on),
         action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
@@ -89,13 +101,20 @@ export function controlBarSectionBox(
   };
 }
 
+export type ControlBarCursorSettings = {
+  cursorOrbit: UserBoolean
+  cursorLookAround: UserBoolean
+  cursorPan: UserBoolean
+  cursorZoom: UserBoolean
+}
+
 /**
  * Returns a control bar section for pointer/camera modes.
  */
 function controlBarPointer(
   viewer: Core.Webgl.Viewer,
   camera: CameraRef,
-  settings: Settings,
+  settings: ControlBarCursorSettings,
   section: SectionBoxRef
 ): ControlBar.IControlBarSection {
   const pointer = getPointerState(viewer);
@@ -107,7 +126,7 @@ function controlBarPointer(
     buttons: [
       {
         id: Ids.buttonCameraOrbit,
-        enabled: () => isTrue(settings.ui.orbit),
+        enabled: () => isTrue(settings.cursorOrbit),
         tip: 'Orbit',
         action: () => pointer.onButton(PointerMode.ORBIT),
         icon: Icons.orbit,
@@ -116,7 +135,7 @@ function controlBarPointer(
       },
       {
         id: Ids.buttonCameraLook,
-        enabled: () => isTrue(settings.ui.lookAround),
+        enabled: () => isTrue(settings.cursorLookAround),
         tip: 'Look Around',
         action: () => pointer.onButton(PointerMode.LOOK),
         icon: Icons.look,
@@ -125,7 +144,7 @@ function controlBarPointer(
       },
       {
         id: Ids.buttonCameraPan,
-        enabled: () => isTrue(settings.ui.pan),
+        enabled: () => isTrue(settings.cursorPan),
         tip: 'Pan',
         action: () => pointer.onButton(PointerMode.PAN),
         icon: Icons.pan,
@@ -134,7 +153,7 @@ function controlBarPointer(
       },
       {
         id: Ids.buttonCameraZoom,
-        enabled: () => isTrue(settings.ui.zoom),
+        enabled: () => isTrue(settings.cursorZoom),
         tip: 'Zoom',
         action: () => pointer.onButton(PointerMode.ZOOM),
         icon: Icons.zoom,
@@ -145,9 +164,13 @@ function controlBarPointer(
   };
 }
 
+export type ControlBarMeasureSettings = {
+  measuringMode: UserBoolean
+}
+
 export function controlBarMeasure(
-  settings: Settings,
-  measure: ReturnType<typeof getMeasureState>
+  measure: ReturnType<typeof getMeasureState>,
+  settings: ControlBarMeasureSettings
 ){
   return {
     id: Ids.sectionActions,
@@ -156,7 +179,7 @@ export function controlBarMeasure(
     buttons: [
       {
         id: Ids.buttonMeasure,
-        enabled: () => isTrue(settings.ui.measuringMode),
+        enabled: () => isTrue(settings.measuringMode),
         isOn: () => measure.active,
         tip: 'Measuring Mode',
         action: () => measure.toggle(),
@@ -167,6 +190,27 @@ export function controlBarMeasure(
   }
 }
 
+export function controlBarSettingsUltra(
+  side: SideState,
+  settings: UltraSettings): ControlBar.IControlBarSection {
+
+  return {
+    id: Ids.sectionSettings,
+    enable: () => isTrue(settings.ui.settings),
+    style: Style.sectionDefaultStyle,
+    buttons: [
+      {
+        id: Ids.buttonSettings,
+        enabled: () => isTrue(settings.ui.settings),
+        tip: 'Settings',
+        action: () => side.toggleContent('settings'),
+        icon: Icons.settings,
+        style: Style.buttonDefaultStyle
+      },
+    ]
+  }
+}
+
 function controlBarSettings(
   modal: ModalHandle,
   side: SideState,
@@ -219,7 +263,13 @@ function controlBarSettings(
   }
 }
 
-export function controlBarCamera(camera: CameraRef): ControlBar.IControlBarSection {
+export type ControlBarCameraSettings ={
+  cameraAuto : UserBoolean
+  cameraFrameSelection: UserBoolean
+  cameraFrameScene: UserBoolean
+}
+
+export function controlBarCamera(camera: CameraRef, settings: ControlBarCameraSettings): ControlBar.IControlBarSection {
   return {
     id: Ids.sectionCamera,
     enable: () => true,
@@ -227,6 +277,7 @@ export function controlBarCamera(camera: CameraRef): ControlBar.IControlBarSecti
     buttons: [
       {
         id: Ids.buttonCameraAuto,
+        enabled: () => isTrue(settings.cameraAuto),
         tip: 'Auto Camera',
         isOn: () => camera.autoCamera.get(),
         action: () => camera.autoCamera.set(!camera.autoCamera.get()),
@@ -235,7 +286,7 @@ export function controlBarCamera(camera: CameraRef): ControlBar.IControlBarSecti
       },
       {
         id: Ids.buttonCameraFrameSelection,
-        // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+        enabled: () => isTrue(settings.cameraFrameSelection),
         tip: 'Frame Selection',
         action: () => camera.frameSelection.call(),
         icon: Icons.frameSelection,
@@ -244,7 +295,7 @@ export function controlBarCamera(camera: CameraRef): ControlBar.IControlBarSecti
       },
       {
         id: Ids.buttonCameraFrameScene,
-        // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+        enabled: () => isTrue(settings.cameraFrameScene),
         tip: 'Frame All',
         action: () => camera.frameScene.call(),
         icon: Icons.frameScene,
@@ -255,8 +306,17 @@ export function controlBarCamera(camera: CameraRef): ControlBar.IControlBarSecti
   }
 }
 
+export type ControlBarVisibilitySettings = {
+    visibilityEnable: UserBoolean
+    visibilityClearSelection: UserBoolean
+    visibilityShowAll: UserBoolean
+    visibilityToggle: UserBoolean
+    visibilityIsolate: UserBoolean
+    visibilityAutoIsolate: UserBoolean
+    visibilitySettings: UserBoolean
+}
 
-export function controlBarSelection(isolation: IsolationRef): ControlBar.IControlBarSection {
+export function controlBarVisibility(isolation: IsolationRef, settings: ControlBarVisibilitySettings): ControlBar.IControlBarSection {
   const adapter = isolation.adapter.current
   const someVisible = adapter.hasVisibleSelection() || !adapter.hasHiddenSelection()  
 
@@ -267,6 +327,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
     buttons: [
       {
         id: Ids.buttonClearSelection,
+        enabled: () => isTrue(settings.visibilityClearSelection),
         tip: 'Clear Selection',
         action: () => adapter.clearSelection(),
         icon: Icons.pointer,
@@ -276,6 +337,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
       {
         id: Ids.buttonShowAll,
         tip: 'Show All',
+        enabled: () => isTrue(settings.visibilityShowAll),
         action: () =>  adapter.showAll(),
         icon: Icons.showAll,
         isOn: () =>!isolation.autoIsolate.get() && isolation.visibility.get() !== 'all',
@@ -284,7 +346,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
 
       {
         id: Ids.buttonHideSelection,
-        enabled: () => someVisible,
+        enabled: () => someVisible && isTrue(settings.visibilityToggle),
         tip: 'Hide Selection',
         action: () => adapter.hideSelection(),
         icon: Icons.hideSelection,
@@ -293,7 +355,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
       },
       {
         id: Ids.buttonShowSelection,
-        enabled: () => !someVisible,
+        enabled: () => !someVisible && isTrue(settings.visibilityToggle),
         tip: 'Show Selection',
         action: () => adapter.showSelection(),
         icon: Icons.showSelection,
@@ -302,6 +364,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
       },
       {
         id: Ids.buttonIsolateSelection,
+        enabled: () => isTrue(settings.visibilityIsolate),
         tip: 'Isolate Selection',
         action: () => adapter.isolateSelection(),
         icon: Icons.isolateSelection,
@@ -310,6 +373,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
       },
       {
         id: Ids.buttonAutoIsolate,
+        enabled: () => isTrue(settings.visibilityAutoIsolate),
         tip: 'Auto Isolate',
         action: () => isolation.autoIsolate.set(!isolation.autoIsolate.get()),
         isOn: () =>  isolation.autoIsolate.get(),
@@ -317,6 +381,7 @@ export function controlBarSelection(isolation: IsolationRef): ControlBar.IContro
       },
       {
         id: Ids.buttonIsolationSettings,
+        enabled: () => isTrue(settings.visibilitySettings),
         tip: 'Isolation Settings',
         action: () => isolation.showPanel.set(!isolation.showPanel.get()),
         icon: Icons.slidersHoriz,
@@ -341,21 +406,15 @@ export function useControlBar(
   customization: ControlBar.ControlBarCustomization | undefined
 ) {
   const measure = getMeasureState(viewer, cursor);
-  const pointerSection = controlBarPointer(viewer, camera, settings, section);
-  const actionSection = controlBarMeasure(settings, measure);
-  const sectionBoxSection = controlBarSectionBox(section,viewer.selection.any());
-  const settingsSection = controlBarSettings(modal, side, settings);
-  const cameraSection = controlBarCamera(camera);
-  const selectionSection = controlBarSelection(isolationRef);
 
   // Apply user customization (note that pointerSection is added twice per original design)
   let controlBarSections = [
-    pointerSection,
-    actionSection,
-    cameraSection,
-    sectionBoxSection,
-    selectionSection,
-    settingsSection
+    controlBarPointer(viewer, camera, settings.ui, section),
+    controlBarCamera(camera, settings.ui),
+    controlBarVisibility(isolationRef, settings.ui),
+    controlBarMeasure(measure, settings.ui),
+    controlBarSectionBox(section, viewer.selection.any(), settings.ui),
+    controlBarSettings(modal, side, settings)
   ];
   controlBarSections = customization?.(controlBarSections) ?? controlBarSections;
   return controlBarSections;
@@ -366,13 +425,12 @@ export function useControlBar(
  * @param {Settings} settings - The viewer settings to check
  * @returns {boolean} True if any cursor buttons are enabled
  */
-function anyUiCursorButton (settings: Settings) {
+function anyUiCursorButton (settings: ControlBarCursorSettings) {
   return (
-    isTrue(settings.ui.orbit) ||
-    isTrue(settings.ui.lookAround) ||
-    isTrue(settings.ui.pan) ||
-    isTrue(settings.ui.zoom) ||
-    isTrue(settings.ui.zoomWindow)
+    isTrue(settings.cursorOrbit) ||
+    isTrue(settings.cursorLookAround) ||
+    isTrue(settings.cursorPan) ||
+    isTrue(settings.cursorZoom)
   )
 }
 
diff --git a/src/vim-web/react-viewers/state/sharedIsolation.ts b/src/vim-web/react-viewers/state/sharedIsolation.ts
index 2f602e95..f1647bfa 100644
--- a/src/vim-web/react-viewers/state/sharedIsolation.ts
+++ b/src/vim-web/react-viewers/state/sharedIsolation.ts
@@ -11,6 +11,7 @@ export interface IsolationRef {
   showPanel: StateRef<boolean>;
   showGhost: StateRef<boolean>;
   ghostOpacity: StateRef<number>;
+  transparency: StateRef<boolean>;
   showRooms: StateRef<boolean>;
   onAutoIsolate: FuncRef<void>;
   onVisibilityChange: FuncRef<void>;
@@ -42,6 +43,8 @@ export interface IsolationAdapter{
   getGhostOpacity(): number;
   setGhostOpacity(opacity: number): void;
 
+  enableTransparency(enable: boolean): void;
+
   getShowRooms(): boolean;
   setShowRooms(show: boolean): void;
 }
@@ -54,6 +57,7 @@ export function useSharedIsolation(adapter : IsolationAdapter){
   const showRooms = useStateRef<boolean>(false);
   const showGhost = useStateRef<boolean>(false);
   const ghostOpacity = useStateRef<number>(() => adapter.getGhostOpacity(), true);
+  const transparency = useStateRef<boolean>(true);
   
   const onAutoIsolate = useFuncRef(() => {
     if(adapter.hasSelection()){
@@ -85,6 +89,8 @@ export function useSharedIsolation(adapter : IsolationAdapter){
   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
   });
@@ -99,6 +105,7 @@ export function useSharedIsolation(adapter : IsolationAdapter){
     showRooms,
     ghostOpacity,
     onAutoIsolate,
-    onVisibilityChange
+    onVisibilityChange,
+    transparency,
   } as IsolationRef
 }
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/style.css b/src/vim-web/react-viewers/style.css
index 09b51c2b..518fd225 100644
--- a/src/vim-web/react-viewers/style.css
+++ b/src/vim-web/react-viewers/style.css
@@ -462,6 +462,10 @@
 }
 
 /* === Cursors ===*/
+.cursor-regular {
+  cursor: default;
+}
+
 .cursor-orbit:hover {
   cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojMjEyMzI5O30uY2xzLTN7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48ZyBpZD0iRlJBTUVTIj48ZyBpZD0iZnJhbWUiPjxyZWN0IGNsYXNzPSJjbHMtMyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PC9nPjwvZz48ZyBpZD0iSUNPTlMiPjxnPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE0LDIwLjIzNGMtNS42NTIsMC0xMC4yNS0yLjYzNi0xMC4yNS01Ljg3NSwwLTEuNzUxLDEuMzA2LTMuMzY2LDMuNjA0LTQuNDgtLjUwOC0uMzEyLS43MDYtLjk2Mi0uNDQtMS40ODgsLjE5NC0uMzg2LC41ODItLjYyNSwxLjAxLS42MjUsLjE0MiwwLC4yODIsLjAyNiwuNDE2LC4wNzlsLjA5NywuMDQyLDIuMTQ4LDEuMDg2Yy42OSwuMzQ5LC45NjksMS4xOTUsLjYyLDEuODg2bC0xLjA4MywyLjE0NWMtLjE5NSwuMzg2LS41ODIsLjYyNS0xLjAxMiwuNjI1LS4xNDEsMC0uMjgtLjAyNS0uNDE0LS4wNzdsLS4wOTgtLjA0NGMtLjU1LS4yNzgtLjY3OC0uODI4LS41NjctMS4zMDYtLjAyMSwuMDExLS4wNDEsLjAyMS0uMDYsLjAzMy0xLjE1NiwuNjUtMS44NDYsMS40NDQtMS44NDYsMi4xMjVzLjY5LDEuNDc2LDEuODQ2LDIuMTI2YzEuNTUzLC44NzMsMy43NTEsMS4zNzQsNi4wMjksMS4zNzRzNC40NzYtLjUwMSw2LjAyOS0xLjM3NGMxLjE1Ni0uNjUsMS44NDYtMS40NDUsMS44NDYtMi4xMjZzLS42OS0xLjQ3NS0xLjg0Ni0yLjEyNWMtMS41NTMtLjg3NC0zLjc1LTEuMzc1LTYuMDI5LTEuMzc1aC0uMTAyYy0uNjI0LDAtMS4xMzItLjQ1Ni0xLjE5Ni0xLjA2Mi0uMDM1LS4zMzQsLjA3My0uNjY4LC4yOTYtLjkxNywuMjIzLS4yNDgsLjU0Mi0uMzkzLC44NzUtLjM5NWguMTI2YzUuNjUyLDAsMTAuMjUsMi42MzUsMTAuMjUsNS44NzRzLTQuNTk4LDUuODc1LTEwLjI1LDUuODc1WiIvPjxwYXRoIGQ9Ik03LjkyNSw4LjAxNmMuMTA4LDAsLjIxNywuMDIsLjMyMywuMDYxLC4wMjYsLjAxMSwuMDUyLC4wMjIsLjA3OCwuMDM1bDIuMTQ1LDEuMDgzYy41NjgsLjI4NywuNzk3LC45ODIsLjUxLDEuNTVsLTEuMDgzLDIuMTQ2Yy0uMTU1LC4zMDgtLjQ2MywuNDg3LS43ODgsLjQ4Ny0uMTA4LDAtLjIxNy0uMDItLjMyNC0uMDYyLS4wMjYtLjAxLS4wNTItLjAyMi0uMDc4LS4wMzUtLjUxMi0uMjU5LS41MzEtLjc5MS0uMzkxLTEuMTY4bC4xNTItLjQxMWMtLjIxNiwuMDk5LS40MjUsLjIwMy0uNjIyLC4zMTMtMS4yNTQsLjcwNi0xLjk3MywxLjU2LTEuOTczLDIuMzQzcy43MTksMS42MzgsMS45NzMsMi4zNDNjMS41ODksLjg5NCwzLjgzMiwxLjQwNyw2LjE1MiwxLjQwN3M0LjU2Mi0uNTEzLDYuMTUyLTEuNDA3YzEuMjU0LS43MDUsMS45NzMtMS41NTksMS45NzMtMi4zNDNzLS43MTktMS42MzgtMS45NzMtMi4zNDNjLTEuNTg5LS44OTQtMy44MzItMS40MDctNi4xNTItMS40MDctLjAzNiwwLS4wNzMsMC0uMTA5LDBoLS4wMDhjLS40OCwwLS44ODMtLjM2Mi0uOTMyLS44NC0uMDU3LS41NSwuMzcyLTEuMDMxLC45MjUtMS4wMzUsLjA0MSwwLC4wODMsMCwuMTI0LDAsNS41MjMsMCwxMCwyLjUxOSwxMCw1LjYyNXMtNC40NzcsNS42MjUtMTAsNS42MjUtMTAtMi41MTgtMTAtNS42MjVjMC0xLjgxNywxLjUzMi0zLjQzMiwzLjkwOS00LjQ2bC0uMDA0LS4wMTEtLjM2Ni0uMTkxYy0uNDM4LS4yMjktLjYxOS0uNzY1LS40MDItMS4xOTQsLjE1Ni0uMzA4LC40NjQtLjQ4NywuNzg4LS40ODdtMC0uNWgwYy0uNTI0LDAtLjk5NywuMjkyLTEuMjM0LC43NjItLjI2MSwuNTE4LS4xNTcsMS4xMzEsLjIxNCwxLjU0OS0yLjE3NiwxLjE1MS0zLjQwNSwyLjc3Mi0zLjQwNSw0LjUzMywwLDMuNDM1LDQuNjEyLDYuMTI1LDEwLjUsNi4xMjVzMTAuNS0yLjY5LDEwLjUtNi4xMjUtNC42MTItNi4xMjUtMTAuNS02LjEyNWgtLjA2NXMtLjA1OSwwLS4wNTksMGMtLjQwNywuMDAzLS43OTMsLjE3Ny0xLjA2MywuNDc5LS4yNywuMzAyLS40MDEsLjcwNi0uMzU5LDEuMTA4LC4wNzYsLjczNCwuNjkxLDEuMjg4LDEuNDMsMS4yODhoLjA2NXMuMDUxLDAsLjA1MSwwYzIuMjM3LDAsNC4zOSwuNDg5LDUuOTA3LDEuMzQyLDEuMDc2LC42MDUsMS43MTgsMS4zMTksMS43MTgsMS45MDhzLS42NDIsMS4zMDItMS43MTgsMS45MDdjLTEuNTE3LC44NTQtMy42NywxLjM0My01LjkwNywxLjM0M3MtNC4zOS0uNDg5LTUuOTA3LTEuMzQyYy0xLjA3Ni0uNjA1LTEuNzE4LTEuMzE4LTEuNzE4LTEuOTA4LDAtLjUyMywuNTA3LTEuMTQ0LDEuMzc0LTEuNzAxLC4wMzgsLjQyMiwuMjU2LC44MjgsLjczNCwxLjA3LC4wNDIsLjAyMSwuMDgyLC4wMzksLjEyMSwuMDU0LC4xNjMsLjA2NCwuMzMzLC4wOTYsLjUwNiwuMDk2LC41MjQsMCwuOTk3LS4yOTIsMS4yMzQtLjc2MmwxLjA4My0yLjE0NWMuMTk5LS4zOTQsLjIzMy0uODQyLC4wOTQtMS4yNjJzLS40MzEtLjc2MS0uODI1LS45NmwtMi4xNDYtMS4wODNjLS4wMzUtLjAxOC0uMDc0LS4wMzUtLjExMy0uMDUxLS4xNzEtLjA2Ny0uMzQxLS4wOTktLjUxMy0uMDk5aDBaIi8+PC9nPjxnPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iMTQiIGN5PSIxNC4zNTkiIHI9IjIuNDM4Ii8+PHBhdGggZD0iTTE0LDEyLjE3MmMxLjIwNiwwLDIuMTg4LC45ODEsMi4xODgsMi4xODhzLS45ODEsMi4xODgtMi4xODgsMi4xODgtMi4xODgtLjk4MS0yLjE4OC0yLjE4OCwuOTgxLTIuMTg4LDIuMTg4LTIuMTg4bTAtLjVjLTEuNDgyLDAtMi42ODgsMS4yMDYtMi42ODgsMi42ODhzMS4yMDYsMi42ODgsMi42ODgsMi42ODgsMi42ODgtMS4yMDYsMi42ODgtMi42ODgtMS4yMDYtMi42ODgtMi42ODgtMi42ODhoMFoiLz48L2c+PC9nPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuMDA3LDUuNzVjLS4zNzIsMC0uNzU3LS4yODEtLjc1Ny0uNzUyVjFDLjI1LC41ODcsLjU4NiwuMjUsMSwuMjVoMy45OThjLjM2OSwwLC42LC4yMzksLjY5MywuNDYzcy4wOTksLjU1Ny0uMTYzLC44MTdMMS41Myw1LjUyOGMtLjE4MywuMTg0LS4zODYsLjIyMi0uNTIzLC4yMjJaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNC45OTgsLjVjLjMxLDAsLjQzMiwuMjM2LC40NjIsLjMwOXMuMTExLC4zMjYtLjEwOCwuNTQ1TDEuMzU0LDUuMzUyYy0uMTIzLC4xMjMtLjI1NiwuMTQ4LS4zNDYsLjE0OC0uMjUsMC0uNTA3LS4xODgtLjUwNy0uNTAyVjFjMC0uMjc2LC4yMjQtLjUsLjUtLjVoMy45OThtMC0uNUgxQy40NDgsMCwwLC40NDgsMCwxdjMuOTk4YzAsLjYwMywuNDkzLDEuMDAyLDEuMDA3LDEuMDAyLC4yNDYsMCwuNDk2LS4wOTEsLjctLjI5NUw1LjcwNSwxLjcwN2MuNjMtLjYzLC4xODQtMS43MDctLjcwNy0xLjcwN2gwWiIvPjwvZz48L2c+PC9zdmc+'),
     auto;
@@ -477,11 +481,6 @@
     auto;
 }
 
-.cursor-pan:active {
-  cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojMjEyMzI5O30uY2xzLTN7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48ZyBpZD0iRlJBTUVTIj48ZyBpZD0iZnJhbWUiPjxyZWN0IGNsYXNzPSJjbHMtMyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PC9nPjwvZz48ZyBpZD0iSUNPTlMiPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuMDA3LDUuNzVjLS4zNzIsMC0uNzU3LS4yODEtLjc1Ny0uNzUyVjFDLjI1LC41ODcsLjU4NiwuMjUsMSwuMjVoMy45OThjLjM2OSwwLC42LC4yMzksLjY5MywuNDYzcy4wOTksLjU1Ny0uMTYzLC44MTdMMS41Myw1LjUyOGMtLjE4MywuMTg0LS4zODYsLjIyMi0uNTIzLC4yMjJaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNC45OTgsLjVjLjMxLDAsLjQzMiwuMjM2LC40NjIsLjMwOXMuMTExLC4zMjYtLjEwOCwuNTQ1TDEuMzU0LDUuMzUyYy0uMTIzLC4xMjMtLjI1NiwuMTQ4LS4zNDYsLjE0OC0uMjUsMC0uNTA3LS4xODgtLjUwNy0uNTAyVjFjMC0uMjc2LC4yMjQtLjUsLjUtLjVoMy45OThtMC0uNUgxQy40NDgsMCwwLC40NDgsMCwxdjMuOTk4YzAsLjYwMywuNDkzLDEuMDAyLDEuMDA3LDEuMDAyLC4yNDYsMCwuNDk2LS4wOTEsLjctLjI5NUw1LjcwNSwxLjcwN2MuNjMtLjYzLC4xODQtMS43MDctLjcwNy0xLjcwN2gwWiIvPjwvZz48Zz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNC4xMzksMjMuMDYyYy0xLjY0NywwLTMuMTUzLS43OTMtNC4wMy0yLjEyMmwtMi4xNTktMy4yOTFjLS4yMDktLjMxOS0uMjc1LS42OTUtLjE4Ny0xLjA2MSwuMDg5LS4zNjYsLjMyMi0uNjc3LC42NTYtLjg3NiwuMjM1LS4xNCwuNTA1LS4yMTQsLjc4MS0uMjE0LC4wOCwwLC4xNjEsLjAwNiwuMjQxLC4wMTlsLjU3MiwuMDl2LTMuNjg3YzAtLjY0MiwuNTEzLTEuMTY5LDEuMTY5LTEuMiwuMDIxLDAsLjA0MS0uMDAxLC4wNjItLjAwMSwuNjc4LDAsMS4yMywuNTI2LDEuMjMsMS4xNzJ2LjM5MWMwLC4wODYsLjA3NCwuMTU2LC4xNjQsLjE1NnMuMTY0LS4wNywuMTY0LS4xNTZ2LTEuMjk5YzAtLjY0MiwuNTEzLTEuMTY5LDEuMTY5LTEuMiwuMDIxLDAsLjA0MS0uMDAxLC4wNjItLjAwMSwuNjc4LDAsMS4yMywuNTI2LDEuMjMsMS4xNzJ2MS40ODRjMCwuMDg2LC4wNzQsLjE1NiwuMTY0LC4xNTZzLjE2NC0uMDcsLjE2NC0uMTU2di0uODNjMC0uNjQyLC41MTMtMS4xNjksMS4xNjktMS4yLC4wMjEsMCwuMDQxLS4wMDEsLjA2Mi0uMDAxLC42NzgsMCwxLjIzLC41MjYsMS4yMywxLjE3MnYxLjAxNmMwLC4wODYsLjA3NCwuMTU2LC4xNjQsLjE1NnMuMTY0LS4wNywuMTY0LS4xNTZ2LS4zNjFjMC0uNjQyLC41MTMtMS4xNjksMS4xNjktMS4yLC4wMjEsMCwuMDQxLS4wMDEsLjA2Mi0uMDAxLC42NzgsMCwxLjIzLC41MjYsMS4yMywxLjE3MnY2LjMyOGMwLDIuNDk5LTIuMTM0LDQuNTMxLTQuNzU4LDQuNTMxaC0xLjk0NFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMC42NzcsMTIuOTA2djUuNjI1YzAsMi40MTYtMi4wNTcsNC4zNzUtNC41OTQsNC4zNzVoLTEuOTQ0Yy0xLjU5LDAtMy4wNDUtLjc2Ni0zLjg5MS0yLjA0OWwtMi4xNTktMy4yOWMtLjE4Ni0uMjgzLS4yNDUtLjYxOC0uMTY2LS45NDQsLjA3OS0uMzI1LC4yODYtLjYwMiwuNTgzLS43NzksLjIwOS0uMTI0LC40NDktLjE5LC42OTQtLjE5LC4wNzEsMCwuMTQzLC4wMDYsLjIxNCwuMDE3bC43NjMsLjExOXYtLjczNnMwLTMuMTM0LDAtMy4xMzRjMC0uNTQ2LC40NC0xLjAxNywxLjAxMy0xLjA0NCwuNjEyLS4wMjksMS4xMiwuNDM3LDEuMTIsMS4wMTR2LjM5MWMwLC4xNzMsLjE0NywuMzEyLC4zMjgsLjMxMmgwYy4xODEsMCwuMzI4LS4xNCwuMzI4LS4zMTJ2LTEuMjk5YzAtLjU0NiwuNDQtMS4wMTcsMS4wMTMtMS4wNDQsLjYxMi0uMDI5LDEuMTIsLjQzNywxLjEyLDEuMDE0djEuNDg0YzAsLjE3MywuMTQ3LC4zMTIsLjMyOCwuMzEyaDBjLjE4MSwwLC4zMjgtLjE0LC4zMjgtLjMxMnYtLjgzYzAtLjU0NiwuNDQtMS4wMTcsMS4wMTMtMS4wNDQsLjYxMi0uMDI5LDEuMTIsLjQzNywxLjEyLDEuMDE0djEuMDE2YzAsLjE3MywuMTQ3LC4zMTIsLjMyOCwuMzEyaDBjLjE4MSwwLC4zMjgtLjE0LC4zMjgtLjMxMnYtLjM2MWMwLS41NDYsLjQ0LTEuMDE3LDEuMDEzLTEuMDQ0LC42MTItLjAyOSwxLjEyLC40MzcsMS4xMiwxLjAxNHYuNzAzWiIvPjxwYXRoIGQ9Ik0yMS4zMzMsMTIuMjAzYzAtLjkwNi0uNzcxLTEuNjQxLTEuNzIzLTEuNjQxLS40NTUsMC0uODY4LC4xNjktMS4xNzYsLjQ0NC0uMjQ0LS42MjQtLjg3My0xLjA2OS0xLjYxMy0xLjA2OWgwYy0uNDU1LDAtLjg2OCwuMTY5LTEuMTc2LC40NDQtLjI0NC0uNjI0LS44NzMtMS4wNjktMS42MTMtMS4wNjktLjgzNSwwLTEuNTMsLjU2Ni0xLjY4OSwxLjMxNi0uMjk4LS4yMzYtLjY4Mi0uMzc5LTEuMS0uMzc5aDBjLS45NTEsMC0xLjcyMywuNzM1LTEuNzIzLDEuNjQxdjMuMTY0Yy0uMTA2LS4wMTctLjIxMy0uMDI1LS4zMjEtLjAyNS0uMzU2LDAtLjcxNywuMDkyLTEuMDQxLC4yODUtLjkyMiwuNTQ5LTEuMjAzLDEuNzA2LS42MjYsMi41ODRsMi4xNTksMy4yOWMuOTI5LDEuNDA3LDIuNTc0LDIuMzQzLDQuNDQ4LDIuMzQzaDEuOTQ0YzIuOSwwLDUuMjUtMi4yMzksNS4yNS01di02LjMyOFptLS42NTYsLjcwM3Y1LjYyNWMwLDIuNDE2LTIuMDU3LDQuMzc1LTQuNTk0LDQuMzc1aC0xLjk0NGMtMS41OSwwLTMuMDQ1LS43NjYtMy44OTEtMi4wNDlsLTIuMTU5LTMuMjljLS4xODYtLjI4My0uMjQ1LS42MTgtLjE2Ni0uOTQ0LC4wNzktLjMyNSwuMjg2LS42MDIsLjU4My0uNzc5LC4yMDktLjEyNCwuNDQ5LS4xOSwuNjk0LS4xOSwuMDcxLDAsLjE0MywuMDA2LC4yMTQsLjAxN2wuNzYzLC4xMTl2LS43MzZzMC0zLjEzNCwwLTMuMTM0YzAtLjU0NiwuNDQtMS4wMTcsMS4wMTMtMS4wNDQsLjYxMi0uMDI5LDEuMTIsLjQzNywxLjEyLDEuMDE0di4zOTFjMCwuMTczLC4xNDcsLjMxMiwuMzI4LC4zMTJoMGMuMTgxLDAsLjMyOC0uMTQsLjMyOC0uMzEydi0xLjI5OWMwLS41NDYsLjQ0LTEuMDE3LDEuMDEzLTEuMDQ0LC42MTItLjAyOSwxLjEyLC40MzcsMS4xMiwxLjAxNHYxLjQ4NGMwLC4xNzMsLjE0NywuMzEyLC4zMjgsLjMxMmgwYy4xODEsMCwuMzI4LS4xNCwuMzI4LS4zMTJ2LS44M2MwLS41NDYsLjQ0LTEuMDE3LDEuMDEzLTEuMDQ0LC42MTItLjAyOSwxLjEyLC40MzcsMS4xMiwxLjAxNHYxLjAxNmMwLC4xNzMsLjE0NywuMzEyLC4zMjgsLjMxMmgwYy4xODEsMCwuMzI4LS4xNCwuMzI4LS4zMTJ2LS4zNjFjMC0uNTQ2LC40NC0xLjAxNywxLjAxMy0xLjA0NCwuNjEyLS4wMjksMS4xMiwuNDM3LDEuMTIsMS4wMTR2LjcwM1oiLz48L2c+PC9nPjwvc3ZnPg=='),
-    auto;
-}
-
 .cursor-zoom:hover {
   cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogIDxnIGlkPSJhIiBkYXRhLW5hbWU9IkZSQU1FUyI+DQogICAgPGcgaWQ9ImIiIGRhdGEtbmFtZT0iZnJhbWUiPg0KICAgICAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+DQogICAgPC9nPg0KICA8L2c+DQogIDxnIGlkPSJjIiBkYXRhLW5hbWU9IklDT05TIj4NCiAgICA8cGF0aCBpZD0iZCIgZGF0YS1uYW1lPSJQYXRoIDE1MDc4IiBkPSJNMTQsNC43ODFjLS4wNTYsMC0uMTEyLC4wMDMtLjE2NywuMDA4cy0uMTExLC4wMTMtLjE2NSwuMDI0LS4xMDgsLjAyNC0uMTYxLC4wMzljLS4wNTMsLjAxNi0uMTA0LC4wMzQtLjE1NSwuMDU1bC00LjIyMSwxLjc2Yy0uMTU0LC4wNjMtLjI5NiwuMTUzLS40MTksLjI2NS0uMTA4LC4wOTktLjE5MywuMjE5LS4yNTEsLjM1Mi0uMDU0LC4xMjUtLjA3NiwuMjYxLS4wNjUsLjM5NywuMDE0LC4xNDIsLjA2NCwuMjc3LC4xNDUsLjM5NCwuMDU5LC4wODYsLjEzMSwuMTYzLC4yMTIsLjIyOCwuMDg1LC4wNjgsLjE3OSwuMTI1LC4yNzgsLjE2OSwuMTA0LC4wNDcsLjIxMywuMDgyLC4zMjUsLjEwNSwuMTE2LC4wMjQsLjIzNCwuMDM2LC4zNTIsLjAzNiwuMDU3LDAsLjExNC0uMDAzLC4xNzItLjAwOHMuMTE1LS4wMTQsLjE3MS0uMDI1Yy4wNTctLjAxMSwuMTEzLS4wMjUsLjE2OS0uMDQyLC4wNTYtLjAxNywuMTExLS4wMzcsLjE2NS0uMDZsMi4yNTgtLjk2NS0uNzcsMTEuOTU2LTMuMzA3LTEuNzE3Yy0uMDU5LS4wMy0uMTE5LS4wNTctLjE4MS0uMDgtLjA2Mi0uMDIzLS4xMjUtLjA0MS0uMTg5LS4wNTYtLjA2NC0uMDE1LS4xMjgtLjAyNi0uMTkzLS4wMzMtLjA2NS0uMDA3LS4xMy0uMDExLS4xOTYtLjAxMS0uMTI3LDAtLjI1NCwuMDE0LS4zNzgsLjA0LS4xMjQsLjAyNi0uMjQ0LC4wNjYtLjM1OSwuMTE4LS4xMTQsLjA1Mi0uMjIzLC4xMTYtLjMyMiwuMTkzLS4xLC4wNzYtLjE4OSwuMTY1LS4yNjYsLjI2NC0uMTExLC4xNDEtLjE5MSwuMzA0LS4yMzQsLjQ3OS0uMDM5LC4xNjItLjA0LC4zMzEtLjAwNCwuNDk0LC4wMzcsLjE2NSwuMTExLC4zMTksLjIxNiwuNDUyLC4xMTUsLjE0NSwuMjYsLjI2NSwuNDI1LC4zNTFsNi4zMDksMy4zNjhjLjA2MiwuMDMzLC4xMjYsLjA2MiwuMTkyLC4wODcsLjA2NiwuMDI1LC4xMzMsLjA0NiwuMjAxLC4wNjIsLjI3NCwuMDY2LC41NiwuMDY2LC44MzQsMCwuMDY4LS4wMTcsLjEzNS0uMDM3LC4yMDEtLjA2MiwuMDY2LS4wMjUsLjEzLS4wNTQsLjE5Mi0uMDg3bDYuMzA3LTMuMzY4Yy4xNjQtLjA4NiwuMzA5LS4yMDYsLjQyNC0uMzUxLC4xMDUtLjEzMywuMTc4LS4yODcsLjIxNi0uNDUyLC4wMzYtLjE2MywuMDM1LS4zMzItLjAwNC0uNDk0LS4wNDMtLjE3NC0uMTIyLS4zMzgtLjIzNC0uNDc5LS4wNzctLjA5OS0uMTY3LS4xODgtLjI2Ni0uMjY0LS4xLS4wNzYtLjIwOC0uMTQxLS4zMjItLjE5My0uMTE1LS4wNTItLjIzNi0uMDkyLS4zNTktLjExOC0uMTI0LS4wMjctLjI1MS0uMDQtLjM3OC0uMDQtLjA2NSwwLS4xMzEsLjAwNC0uMTk2LC4wMTEtLjA2NSwuMDA3LS4xMywuMDE4LS4xOTMsLjAzMy0uMDY0LC4wMTUtLjEyNywuMDM0LS4xODksLjA1Ni0uMDYyLC4wMjMtLjEyMiwuMDQ5LS4xODEsLjA4bC0zLjMwNywxLjcxNy0uNzcyLTExLjk1NywyLjI1OCwuOTY1Yy4wNTQsLjAyMywuMTA5LC4wNDMsLjE2NSwuMDYsLjA1NiwuMDE3LC4xMTIsLjAzMSwuMTY5LC4wNDIsLjA1NywuMDExLC4xMTQsLjAyLC4xNzEsLjAyNXMuMTE1LC4wMDgsLjE3MiwuMDA4Yy4xMTgsMCwuMjM2LS4wMTIsLjM1Mi0uMDM2LC4xMTItLjAyMywuMjIxLS4wNTgsLjMyNS0uMTA1LC4wOTktLjA0NCwuMTkzLS4xMDEsLjI3OC0uMTY5LC4wODItLjA2NSwuMTUzLS4xNDIsLjIxMi0uMjI4LC4wODEtLjExNywuMTMxLS4yNTMsLjE0NS0uMzk0LC4wMTItLjEzNS0uMDExLS4yNzEtLjA2NC0uMzk2LS4wNTgtLjEzNC0uMTQ0LS4yNTQtLjI1Mi0uMzUyLS4xMjMtLjExMi0uMjY1LS4yMDItLjQxOS0uMjY1bC00LjIyMS0xLjc2MWMtLjA1MS0uMDIxLS4xMDItLjA0LS4xNTUtLjA1NS0uMDUyLS4wMTYtLjEwNi0uMDI5LS4xNjEtLjAzOXMtLjEwOS0uMDE4LS4xNjUtLjAyNC0uMTExLS4wMDgtLjE2Ny0uMDA4IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNSIvPg0KICAgIDxnPg0KICAgICAgPHBhdGggZD0iTTEuMDA3LDUuNzVjLS4zNzIsMC0uNzU3LS4yODEtLjc1Ny0uNzUyVjFDLjI1LC41ODcsLjU4NiwuMjUsMSwuMjVoMy45OThjLjM2OSwwLC42LC4yMzksLjY5MywuNDYzcy4wOTksLjU1Ny0uMTYzLC44MTdMMS41Myw1LjUyOGMtLjE4MywuMTg0LS4zODYsLjIyMi0uNTIzLC4yMjJaIiBmaWxsPSIjZmZmIi8+DQogICAgICA8cGF0aCBkPSJNNC45OTgsLjVjLjMxLDAsLjQzMiwuMjM2LC40NjIsLjMwOXMuMTExLC4zMjYtLjEwOCwuNTQ1TDEuMzU0LDUuMzUyYy0uMTIzLC4xMjMtLjI1NiwuMTQ4LS4zNDYsLjE0OC0uMjUsMC0uNTA3LS4xODgtLjUwNy0uNTAyVjFjMC0uMjc2LC4yMjQtLjUsLjUtLjVoMy45OThtMC0uNUgxQy40NDgsMCwwLC40NDgsMCwxdjMuOTk4YzAsLjYwMywuNDkzLDEuMDAyLDEuMDA3LDEuMDAyLC4yNDYsMCwuNDk2LS4wOTEsLjctLjI5NUw1LjcwNSwxLjcwN2MuNjMtLjYzLC4xODQtMS43MDctLjcwNy0xLjcwN2gwWiIgZmlsbD0iIzIxMjMyOSIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+'),
     auto;
diff --git a/src/vim-web/react-viewers/ultra/controlBar.ts b/src/vim-web/react-viewers/ultra/controlBar.ts
index 48e0c7a9..41cc4518 100644
--- a/src/vim-web/react-viewers/ultra/controlBar.ts
+++ b/src/vim-web/react-viewers/ultra/controlBar.ts
@@ -1,22 +1,29 @@
 
 import * as Core from '../../core-viewers/ultra'
 import { ControlBarCustomization } from '../controlbar/controlBar'
+import { settings } from '../icons'
+import { Settings, UltraSettings } from '../settings/settings'
 import { CameraRef } from '../state/cameraState'
-import { controlBarCamera, controlBarSectionBox, controlBarSelection } from '../state/controlBarState'
+import { controlBarCamera, controlBarSectionBox, controlBarSettingsUltra, controlBarVisibility } from '../state/controlBarState'
 import { SectionBoxRef } from '../state/sectionBoxState'
 import { IsolationRef } from '../state/sharedIsolation'
+import { SideState } from '../state/sideState'
 
 export function useUltraControlBar (
   viewer: Core.Viewer,
   section: SectionBoxRef,
   isolation: IsolationRef,
   camera: CameraRef,
+  settings: UltraSettings,
+  side: SideState,
   customization: ControlBarCustomization | undefined
 ) {
-  const sectionSectionBox = controlBarSectionBox(section, viewer.selection.any())
-  const selection = controlBarSelection(isolation)
-  const sectionCamera = controlBarCamera(camera)
-  let bar = [selection, sectionCamera, sectionSectionBox]
+  let bar = [
+    controlBarCamera(camera, settings.ui),
+    controlBarVisibility(isolation, settings.ui),
+    controlBarSectionBox(section, viewer.selection.any(), settings.ui),
+    controlBarSettingsUltra(side, settings)
+  ]
   bar = customization?.(bar) ?? bar
   return bar
 }
diff --git a/src/vim-web/react-viewers/ultra/errors/fileLoadingError.tsx b/src/vim-web/react-viewers/ultra/errors/fileLoadingError.tsx
index d47ec275..f6f0cb9b 100644
--- a/src/vim-web/react-viewers/ultra/errors/fileLoadingError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/fileLoadingError.tsx
@@ -6,7 +6,7 @@ export function serverFileLoadingError (url: string): MessageBoxProps {
   return {
     title: 'File Loading Error',
     body: body(url),
-    footer: style.footer(Urls.support),
+    footer: style.footer(),
     canClose: false
   }
 }
diff --git a/src/vim-web/react-viewers/ultra/errors/fileOpeningError.tsx b/src/vim-web/react-viewers/ultra/errors/fileOpeningError.tsx
index 8d1f27e5..1e384ce8 100644
--- a/src/vim-web/react-viewers/ultra/errors/fileOpeningError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/fileOpeningError.tsx
@@ -6,7 +6,7 @@ export function fileOpeningError (url: string): MessageBoxProps {
   return {
     title: 'File Opening Error',
     body: serverFileOpeningErrorBody(url),
-    footer: style.footer(Urls.support),
+    footer: style.footer(),
     canClose: false
   }
 }
diff --git a/src/vim-web/react-viewers/ultra/errors/serverCompatibilityError.tsx b/src/vim-web/react-viewers/ultra/errors/serverCompatibilityError.tsx
index 58ca1b79..851c9fe7 100644
--- a/src/vim-web/react-viewers/ultra/errors/serverCompatibilityError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/serverCompatibilityError.tsx
@@ -6,7 +6,7 @@ export function serverCompatibilityError (url: string, localVersion: string, rem
   return {
     title: 'Compatibility Error',
     body: body(url, localVersion, remoteVersion),
-    footer: style.footer(Urls.support),
+    footer: style.footer(),
     canClose: false
   }
 }
diff --git a/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx b/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx
index 4c212c8e..988c71a5 100644
--- a/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx
@@ -7,7 +7,7 @@ export function serverConnectionError (url: string): MessageBoxProps {
   return {
     title: 'Connection Error',
     body: body(url, isLocalUrl(url)),
-    footer: style.footer(Urls.support),
+    footer: style.footer(),
     canClose: false
   }
 }
diff --git a/src/vim-web/react-viewers/ultra/errors/serverFileDownloadingError.tsx b/src/vim-web/react-viewers/ultra/errors/serverFileDownloadingError.tsx
index 3eb8d482..997cc187 100644
--- a/src/vim-web/react-viewers/ultra/errors/serverFileDownloadingError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/serverFileDownloadingError.tsx
@@ -12,7 +12,7 @@ export function serverFileDownloadingError (url : string, authToken?: string, se
   return {
     title: 'File Downloading Error',
     body: body(url, authToken, server),
-    footer: style.footer(Urls.support),
+    footer: style.footer(),
     canClose: false
   }
 }
diff --git a/src/vim-web/react-viewers/ultra/errors/serverStreamError.tsx b/src/vim-web/react-viewers/ultra/errors/serverStreamError.tsx
index 46697f54..2da80b7a 100644
--- a/src/vim-web/react-viewers/ultra/errors/serverStreamError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/serverStreamError.tsx
@@ -6,7 +6,7 @@ export function serverStreamError (url: string): MessageBoxProps {
   return {
     title: 'Stream Error',
     body: body(url),
-    footer: style.footer(Urls.support),
+    footer: style.footer(),
     canClose: false
   }
 }
diff --git a/src/vim-web/react-viewers/ultra/isolation.ts b/src/vim-web/react-viewers/ultra/isolation.ts
index 1d211b70..70c2b1b3 100644
--- a/src/vim-web/react-viewers/ultra/isolation.ts
+++ b/src/vim-web/react-viewers/ultra/isolation.ts
@@ -111,6 +111,9 @@ function createAdapter(viewer: Viewer): IsolationAdapter {
         }
       }
     },
+    enableTransparency: (enable: boolean) => {
+      console.log("enableTransparency not implemented")
+    },
 
     getGhostOpacity: () => viewer.renderer.ghostOpacity,
     setGhostOpacity: (opacity: number) => {
diff --git a/src/vim-web/react-viewers/ultra/settings.ts b/src/vim-web/react-viewers/ultra/settings.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/vim-web/react-viewers/ultra/viewer.tsx b/src/vim-web/react-viewers/ultra/viewer.tsx
index 93e83ab3..92f76ff7 100644
--- a/src/vim-web/react-viewers/ultra/viewer.tsx
+++ b/src/vim-web/react-viewers/ultra/viewer.tsx
@@ -1,7 +1,9 @@
 
 
-import * as Core from '../../core-viewers' 
-import React, {useRef, RefObject, useEffect, useState } from 'react'
+import * as Core from '../../core-viewers'
+import { Settings, PartialSettings, PartialUltraSettings, getDefaultUltraSettings } from '../../react-viewers/settings/settings'
+import { useSettings } from '../../react-viewers/settings/settingsState'
+import {useRef, RefObject, useEffect, useState } from 'react'
 import { Container, createContainer } from '../container'
 import { createRoot } from 'react-dom/client'
 import { Overlay } from '../panels/overlay'
@@ -24,6 +26,9 @@ import { useUltraIsolation } from './isolation'
 import { IsolationPanel } from '../panels/isolationPanel'
 import { GenericPanelHandle } from '../generic/genericPanel'
 import { ControllablePromise } from '../../utils'
+import { GetUltraSettingsContent, SettingsPanel } from '../settings/settingsPanel'
+import { SidePanelMemo } from '../panels/sidePanel'
+
 
 /**
  * Creates a UI container along with a VIM.Viewer and its associated React viewer.
@@ -31,8 +36,10 @@ import { ControllablePromise } from '../../utils'
  * @returns An object containing the resulting container, reactRoot, and viewer.
  */
 export function createViewer (
-  container?: Container | HTMLElement
+  container?: Container | HTMLElement,
+  settings?: PartialUltraSettings 
 ) : Promise<ViewerRef> {
+  
   const controllablePromise = new ControllablePromise<ViewerRef>()
   const cmpContainer = container instanceof HTMLElement
     ? createContainer(container)
@@ -58,6 +65,7 @@ export function createViewer (
     <Viewer
       container={cmpContainer}
       core={core}
+      settings={settings}
       onMount = {(cmp : ViewerRef) => controllablePromise.resolve(attachDispose(cmp))}
     />
   )
@@ -74,9 +82,10 @@ export function createViewer (
 export function Viewer (props: {
   container: Container
   core: Core.Ultra.Viewer
+  settings?: PartialUltraSettings
   onMount: (viewer: ViewerRef) => void}) {
 
-
+  const settings = useSettings(props.settings ?? {}, getDefaultUltraSettings())
   const sectionBoxRef = useUltraSectionBox(props.core)
   const camera = useUltraCamera(props.core, sectionBoxRef)
   const isolationPanelHandle = useRef<GenericPanelHandle>(null)
@@ -87,7 +96,15 @@ export function Viewer (props: {
   const [_, setSelectState] = useState(0)
   const [controlBarCustom, setControlBarCustom] = useState<ControlBarCustomization>(() => c => c)
   const isolationRef = useUltraIsolation(props.core)
-  const controlBar = useUltraControlBar(props.core, sectionBoxRef, isolationRef, camera, _ =>_)
+  const controlBar = useUltraControlBar(
+    props.core,
+    sectionBoxRef,
+    isolationRef,
+    camera,
+    settings.value,
+    side,
+    _ =>_
+  )
   
   useViewerInput(props.core.inputs, camera)
 
@@ -129,7 +146,23 @@ export function Viewer (props: {
     })
   }, [])
 
+  const sidePanel = () => (
+    <>
+      <SettingsPanel
+        visible={side.getContent() === 'settings'}
+        content={GetUltraSettingsContent(props.core)}
+        settings={settings}
+      />
+    </>
+  )
+
   return <>
+  <SidePanelMemo
+    container={props.container}
+    viewer={props.core}
+    side={side}
+    content={sidePanel}
+  />
   <RestOfScreen side={side} content={() => {
     return <>
     {whenTrue(true, <LogoMemo/>)}
@@ -139,7 +172,7 @@ export function Viewer (props: {
       show={true}
     />
     <SectionBoxPanel ref={sectionBoxPanelHandle} state={sectionBoxRef}/>
-    <IsolationPanel ref={isolationPanelHandle} state={isolationRef} />
+    <IsolationPanel ref={isolationPanelHandle} state={isolationRef} transparency={false}/>
   </>
   }}/>
   
diff --git a/src/vim-web/react-viewers/urls.ts b/src/vim-web/react-viewers/urls.ts
index 7db6bd76..160aac59 100644
--- a/src/vim-web/react-viewers/urls.ts
+++ b/src/vim-web/react-viewers/urls.ts
@@ -1,4 +1,3 @@
 
-export const support = 'https://docs.vimaec.com'
 export const supportUltra = 'https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra'
 export const supportControls = 'https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide'
diff --git a/src/vim-web/react-viewers/webgl/isolation.ts b/src/vim-web/react-viewers/webgl/isolation.ts
index 1a7c3827..932a3254 100644
--- a/src/vim-web/react-viewers/webgl/isolation.ts
+++ b/src/vim-web/react-viewers/webgl/isolation.ts
@@ -1,4 +1,5 @@
 import * as Core from "../../core-viewers";
+import { Element3D, Selectable } from "../../core-viewers/webgl";
 import { IsolationAdapter, useSharedIsolation as useSharedIsolation, VisibilityStatus } from "../state/sharedIsolation";
 
 export function useWebglIsolation(viewer: Core.Webgl.Viewer){
@@ -7,7 +8,33 @@ export function useWebglIsolation(viewer: Core.Webgl.Viewer){
 }
 
 function createWebglIsolationAdapter(viewer: Core.Webgl.Viewer): IsolationAdapter {
-  
+  var transparency: boolean = true;
+  var ghost: boolean = false;
+  var rooms: boolean = false;
+
+  function updateMaterials(){
+    viewer.renderer.modelMaterial =
+        ghost ? [viewer.materials.simple, viewer.materials.ghost]
+      : transparency ? undefined 
+      : viewer.materials.simple
+  }
+
+  function updateVisibility(elements: 'all' | Selectable[], predicate: (object: Selectable) => boolean){
+    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,
@@ -18,30 +45,30 @@ function createWebglIsolationAdapter(viewer: Core.Webgl.Viewer): IsolationAdapte
 
     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: number[]) => {
       const set = new Set(instances)
-      updateAllVisibility(viewer, o => o.instances.some(i => set.has(i)))
+      updateVisibility('all', o => o.instances.some(i => set.has(i)))
     },
     show: (instances: number[]) => {
       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
         }
       }
     },
@@ -50,36 +77,34 @@ function createWebglIsolationAdapter(viewer: Core.Webgl.Viewer): IsolationAdapte
       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
         }
       }
     },
-
     
-    showGhost: (show: boolean) => {
-      viewer.renderer.modelMaterial = show
-      ? [viewer.materials.simple, viewer.materials.ghost]
-      : undefined
+    enableTransparency: (enable: boolean) => {
+      if(transparency !== enable){
+        transparency = enable;
+        updateMaterials();
+      };
     },
 
+    showGhost: (show: boolean) => {
+      ghost = show;
+      updateMaterials();
+    },    
+
     getGhostOpacity: () => viewer.materials.ghostOpacity,
     setGhostOpacity: (opacity: number) => viewer.materials.ghostOpacity = opacity,
 
-    getShowRooms: () => true,
-    setShowRooms: (show: boolean) => {console.log("setShowRooms not implemented")},
-
-
-  };
-}
-
-function updateAllVisibility(viewer: Core.Webgl.Viewer, predicate: (object: Core.Webgl.Element3D) => boolean){
- for(let v of viewer.vims){
-    for(let o of v.getAllElements()){
-      if(o.type === 'Element3D'){
-        o.visible = predicate(o)
+    getShowRooms: () => rooms,
+    setShowRooms: (show: boolean) => {
+      if(rooms !== show){
+        rooms = show;
+        updateVisibility('all', o => o.visible);arguments
       }
-    }
-  }
+    },
+  };
 }
 
 function getVisibilityState(viewer: Core.Webgl.Viewer): VisibilityStatus {
diff --git a/src/vim-web/react-viewers/webgl/viewer.tsx b/src/vim-web/react-viewers/webgl/viewer.tsx
index e4ccae0c..597b8f99 100644
--- a/src/vim-web/react-viewers/webgl/viewer.tsx
+++ b/src/vim-web/react-viewers/webgl/viewer.tsx
@@ -19,14 +19,14 @@ import {
 } from '../panels/contextMenu'
 import { SidePanelMemo } from '../panels/sidePanel'
 import { useSideState } from '../state/sideState'
-import { SettingsPanel } from '../settings/settingsPanel'
+import { GetWebglSettingsContent, SettingsPanel } from '../settings/settingsPanel'
 import { MenuToastMemo } from '../panels/toast'
 import { Overlay } from '../panels/overlay'
 import { addPerformanceCounter } from '../panels/performance'
 import { applyWebglBindings } from './inputsBindings'
 import { CursorManager } from '../helpers/cursor'
-import { PartialSettings, isTrue } from '../settings'
-import { useSettings } from '../settings/settingsState'
+import { PartialSettings, Settings, getDefaultSettings, getDefaultUltraSettings, isTrue } from '../settings'
+import { applyWebglSettings, useSettings } from '../settings/settingsState'
 import { TreeActionRef } from '../bim/bimTree'
 import { Container, createContainer } from '../container'
 import { useViewerState } from './viewerState'
@@ -108,7 +108,7 @@ export function Viewer (props: {
   onMount: (viewer: ViewerRef) => void
   settings?: PartialSettings
 }) {
-  const settings = useSettings(props.viewer, props.settings ?? {})
+  const settings = useSettings(props.settings ?? {}, getDefaultSettings(), (s) => applyWebglSettings(s))
   const modal = useRef<ModalHandle>(null)
 
   const sectionBoxRef = useWebglSectionBox(props.viewer)
@@ -133,12 +133,8 @@ export function Viewer (props: {
   const treeRef = useRef<TreeActionRef>()
   const performanceRef = useRef<HTMLDivElement>(null)
   const isolationRef = useWebglIsolation(props.viewer)
-
   const controlBar = useControlBar(props.viewer, camera, modal.current, side, cursor, settings.value, sectionBoxRef, isolationRef, controlBarCustom)
 
-
-
-
   useEffect(() => {
     side.setHasBim(viewerState.vim.get()?.bim !== undefined)
   })
@@ -180,7 +176,7 @@ export function Viewer (props: {
       settings: {
         update : settings.update,
         register : settings.register,
-        customize : (c: SettingsCustomizer) => settings.customizer.set(c)
+        customize : (c: SettingsCustomizer<Settings>) => settings.customizer.set(c)
       },
       get isolationPanel(){
         return isolationPanelHandle.current
@@ -223,7 +219,7 @@ export function Viewer (props: {
       />}
       <SettingsPanel
         visible={side.getContent() === 'settings'}
-        viewer={props.viewer}
+        content={GetWebglSettingsContent(props.viewer)}
         settings={settings}
       />
     </>
@@ -247,7 +243,7 @@ export function Viewer (props: {
           show={isTrue(settings.value.ui.controlBar)}
         />
         <SectionBoxPanel ref={sectionBoxPanelHandle} state={sectionBoxRef}/>
-        <IsolationPanel ref={isolationPanelHandle} state={isolationRef}/>
+        <IsolationPanel ref={isolationPanelHandle} state={isolationRef} transparency={true}/>
         <AxesPanelMemo
           viewer={props.viewer}
           camera={camera}

From b2502d71ca2cdfcc7d1a2e89dbcf8442a8c4151f Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Fri, 14 Nov 2025 16:43:42 -0500
Subject: [PATCH 3/8] split settings into webgl, shared, ultra

---
 src/vim-web/react-viewers/helpers/utils.ts    |  13 +
 .../react-viewers/settings/anySettings.ts     |  10 +
 src/vim-web/react-viewers/settings/index.ts   |   2 +-
 .../react-viewers/settings/settings.ts        | 195 ---------
 .../settings/settingsInputBox.tsx             |   3 +-
 .../react-viewers/settings/settingsItem.ts    |   2 +-
 .../react-viewers/settings/settingsKeys.ts    |   1 -
 .../react-viewers/settings/settingsPanel.tsx  | 379 +-----------------
 .../settings/settingsPanelContent.ts          | 179 +++++++++
 .../react-viewers/settings/settingsState.ts   |  29 +-
 .../react-viewers/settings/settingsStorage.ts |   5 +-
 .../react-viewers/settings/settingsToggle.tsx |   2 +-
 .../react-viewers/state/controlBarState.tsx   |  11 +-
 src/vim-web/react-viewers/ultra/controlBar.ts |   3 +-
 src/vim-web/react-viewers/ultra/index.ts      |   1 +
 src/vim-web/react-viewers/ultra/settings.ts   |  52 +++
 .../react-viewers/ultra/settingsPanel.ts      |  35 ++
 src/vim-web/react-viewers/ultra/viewer.tsx    |   7 +-
 src/vim-web/react-viewers/webgl/index.ts      |   1 +
 src/vim-web/react-viewers/webgl/settings.ts   | 109 +++++
 .../react-viewers/webgl/settingsPanel.ts      | 194 +++++++++
 src/vim-web/react-viewers/webgl/viewer.tsx    |  16 +-
 src/vim-web/react-viewers/webgl/viewerRef.ts  |   2 +-
 23 files changed, 635 insertions(+), 616 deletions(-)
 create mode 100644 src/vim-web/react-viewers/settings/anySettings.ts
 delete mode 100644 src/vim-web/react-viewers/settings/settings.ts
 create mode 100644 src/vim-web/react-viewers/settings/settingsPanelContent.ts
 create mode 100644 src/vim-web/react-viewers/ultra/settingsPanel.ts
 create mode 100644 src/vim-web/react-viewers/webgl/settings.ts
 create mode 100644 src/vim-web/react-viewers/webgl/settingsPanel.ts

diff --git a/src/vim-web/react-viewers/helpers/utils.ts b/src/vim-web/react-viewers/helpers/utils.ts
index a5fbfb31..1f13eb00 100644
--- a/src/vim-web/react-viewers/helpers/utils.ts
+++ b/src/vim-web/react-viewers/helpers/utils.ts
@@ -24,3 +24,16 @@ export function whenSomeFalse (value: (UserBoolean| boolean)[], element: JSX.Ele
   return value.some(isFalse) ? element : null
 }
 
+
+/**
+ * Makes all fields optional recursively
+ * @template T - The type to make recursively partial
+ * @returns A type with all nested properties made optional
+ */
+export type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? RecursivePartial<U>[]
+    : T[P] extends object
+    ? RecursivePartial<T[P]>
+    : T[P]
+}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/anySettings.ts b/src/vim-web/react-viewers/settings/anySettings.ts
new file mode 100644
index 00000000..53f64aa0
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/anySettings.ts
@@ -0,0 +1,10 @@
+/**
+ * @module viw-webgl-react
+ * Contains settings and type definitions for the Vim web viewer
+ */
+
+import { UltraSettings } from "../ultra/settings"
+import { WebglSettings } from "../webgl/settings"
+
+export type AnySettings = WebglSettings | UltraSettings
+
diff --git a/src/vim-web/react-viewers/settings/index.ts b/src/vim-web/react-viewers/settings/index.ts
index 9e92c80e..54bef09f 100644
--- a/src/vim-web/react-viewers/settings/index.ts
+++ b/src/vim-web/react-viewers/settings/index.ts
@@ -1,6 +1,6 @@
 
 //Full exports
-export * from './settings';
+export * from './anySettings';
 export * from './settingsStorage';
 export * from './userBoolean';
 
diff --git a/src/vim-web/react-viewers/settings/settings.ts b/src/vim-web/react-viewers/settings/settings.ts
deleted file mode 100644
index 3b5bc2eb..00000000
--- a/src/vim-web/react-viewers/settings/settings.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * @module viw-webgl-react
- * Contains settings and type definitions for the Vim web viewer
- */
-
-import deepmerge from "deepmerge"
-import { UserBoolean } from "./userBoolean"
-import { ControlBarCameraSettings, ControlBarCursorSettings, ControlBarMeasureSettings, ControlBarSectionBoxSettings, ControlBarVisibilitySettings } from "../state"
-
-/**
- * Makes all fields optional recursively
- * @template T - The type to make recursively partial
- * @returns A type with all nested properties made optional
- */
-export type RecursivePartial<T> = {
-  [P in keyof T]?: T[P] extends (infer U)[]
-    ? RecursivePartial<U>[]
-    : T[P] extends object
-    ? RecursivePartial<T[P]>
-    : T[P]
-}
-
-/**
- * Complete settings configuration for the Vim viewer
- * @interface Settings
- */
-export type Settings = {
-  capacity: {
-    canFollowUrl: boolean
-    canGoFullScreen: boolean
-    canDownload: boolean
-    canReadLocalStorage: boolean
-  }
-  ui: ControlBarCameraSettings &
-      ControlBarCursorSettings &
-      ControlBarSectionBoxSettings &
-      ControlBarVisibilitySettings &
-      ControlBarMeasureSettings & {
-    
-    // panels
-    logo: UserBoolean
-    bimTreePanel: UserBoolean
-    bimInfoPanel: UserBoolean
-    performance: UserBoolean
-    axesPanel: UserBoolean
-    controlBar: UserBoolean
-
-    // axesPanel
-    orthographic: UserBoolean
-    resetCamera: UserBoolean
-
-    // Control bar - settings
-    projectInspector: UserBoolean
-    settings: UserBoolean
-    help: UserBoolean
-    maximise: UserBoolean
-  }
-}
-
-export type AnySettings = Settings | UltraSettings
-
-export type UltraSettings = {
-  ui: ControlBarCameraSettings &
-      ControlBarCursorSettings &
-      ControlBarSectionBoxSettings &
-      ControlBarVisibilitySettings &
-      ControlBarMeasureSettings & {
-      
-      settings: UserBoolean
-  }
-}
-
-export type PartialUltraSettings = RecursivePartial<UltraSettings>
-
-
-/**
- * Partial version of ComponentSettings where all properties are optional
- */
-export type PartialSettings = RecursivePartial<Settings>
-
-/**
- * Default settings configuration for the Vim Viewer
- * @constant
- * @type {Settings}
- */
-export function getDefaultSettings(): Settings {
-  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
-    }
-  }
-}
-
-export function getDefaultUltraSettings(): UltraSettings {
-  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,
-
-      measuringMode: true,
-
-      // Control bar - Visibility
-      visibilityEnable: true,
-      visibilityClearSelection: true,
-      visibilityShowAll: true,
-      visibilityToggle: true,
-      visibilityIsolate: true,
-      visibilityAutoIsolate: true,
-      visibilitySettings: true,
-
-      settings: true
-    }
-  }
-}
-
-export function createSettings<T extends Settings | UltraSettings>(settings: RecursivePartial<T>, defaultSettings: T): T {
-  return settings !== undefined
-    ? deepmerge(defaultSettings, settings as Partial<T>) as T
-    : defaultSettings
-}
-
-export function createUltraSettings(settings: PartialUltraSettings): UltraSettings {
-  return settings !== undefined
-    ? deepmerge(getDefaultUltraSettings(), settings) as UltraSettings
-    : getDefaultUltraSettings()
-}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsInputBox.tsx b/src/vim-web/react-viewers/settings/settingsInputBox.tsx
index b1a991c1..b432f255 100644
--- a/src/vim-web/react-viewers/settings/settingsInputBox.tsx
+++ b/src/vim-web/react-viewers/settings/settingsInputBox.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react'
 import { SettingsBox } from './settingsItem'
-import * as Core from '../../core-viewers'
 import { SettingsState } from './settingsState'
-import { AnySettings } from './settings'
+import { AnySettings } from './anySettings'
 
 export function renderSettingsInputBox(settings: SettingsState<AnySettings>, item: SettingsBox<AnySettings>) {
   const ref = React.useRef<HTMLInputElement>(null)
diff --git a/src/vim-web/react-viewers/settings/settingsItem.ts b/src/vim-web/react-viewers/settings/settingsItem.ts
index 9bf88932..218bdfb1 100644
--- a/src/vim-web/react-viewers/settings/settingsItem.ts
+++ b/src/vim-web/react-viewers/settings/settingsItem.ts
@@ -1,4 +1,4 @@
-import { AnySettings, Settings } from './settings'
+import { AnySettings } from './anySettings'
 import { UserBoolean } from './userBoolean'
 
 
diff --git a/src/vim-web/react-viewers/settings/settingsKeys.ts b/src/vim-web/react-viewers/settings/settingsKeys.ts
index 47cb775b..68f20d2f 100644
--- a/src/vim-web/react-viewers/settings/settingsKeys.ts
+++ b/src/vim-web/react-viewers/settings/settingsKeys.ts
@@ -57,7 +57,6 @@ export class SettingsPanelKeys {
   static ControlBarVisibilityAutoIsolate = 'controlBar.visibility.autoIsolate'
   static ControlBarVisibilitySettings = 'controlBar.visibility.settings'
 
-
   // --- Control Bar - Settings ---
   static ControlBarSettingsSubtitle = 'controlBarSettings'
   static ControlBarSettingsShowProjectInspectorButtonToggle = 'projectInspector'
diff --git a/src/vim-web/react-viewers/settings/settingsPanel.tsx b/src/vim-web/react-viewers/settings/settingsPanel.tsx
index ca082b03..27c0af96 100644
--- a/src/vim-web/react-viewers/settings/settingsPanel.tsx
+++ b/src/vim-web/react-viewers/settings/settingsPanel.tsx
@@ -3,15 +3,12 @@
  */
 
 import React from 'react'
-import * as Core from '../../core-viewers'
 import { SettingsState } from './settingsState'
-import * as THREE from 'three'
-import { SettingsPanelKeys } from './settingsKeys'
 import { renderSettingsInputBox } from './settingsInputBox'
 import { renderSettingsToggle } from './settingsToggle'
 import { SettingsItem } from './settingsItem'
 import { renderSettingsSubtitle } from './settingsSubtitle'
-import { AnySettings, Settings } from './settings'
+import { AnySettings } from './anySettings'
 
 /**
  * JSX Component to interact with settings.
@@ -133,377 +130,3 @@ function buildSections<T extends AnySettings>(items: SettingsItem<T>[]): Setting
 
   return sections
 }
-function getPanelsVisibilitySettings(): SettingsItem<Settings>[] {
-  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 getAxesPanelSettings(): SettingsItem<Settings>[] {
-  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 getControlBarCursorSettings(): SettingsItem<Settings>[] {
-  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 getControlBarMeasureSettings(): SettingsItem<Settings>[] {
-  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 getControlBarCameraSettings(): SettingsItem<Settings>[] {
-  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(): SettingsItem<Settings>[] {
-  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(): SettingsItem<Settings>[] {
-  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 getControlBarSettings(): SettingsItem<Settings>[] {
-  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 getControlBarUltraSettings(): SettingsItem<Settings>[] {
-  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 getInputsSettings(
-  viewer: Core.Webgl.Viewer,
-): SettingsItem<Settings>[] {
-  return [
-    {
-      type: 'subtitle',
-      key: SettingsPanelKeys.InputsSubtitle,
-      title: 'Inputs',
-    },
-    {
-      type: 'box',
-      key: SettingsPanelKeys.InputsScrollSpeedBox,
-      label: 'Scroll Speed',
-      info: '[0.1,10]',
-      transform: (n) => THREE.MathUtils.clamp(n, 0.1, 10),
-      getter: (_s) => viewer.inputs.scrollSpeed,
-      setter: (_s, v) => {
-        viewer.inputs.scrollSpeed = v
-      },
-    },
-  ]
-}
-
-export function GetWebglSettingsContent(
-  viewer: Core.Webgl.Viewer,
-): SettingsItem<Settings>[] {
-  return [
-    ...getInputsSettings(viewer),
-    ...getPanelsVisibilitySettings(),
-    ...getAxesPanelSettings(),
-    ...getControlBarCursorSettings(),
-    ...getControlBarCameraSettings(),
-    ...getControlBarVisibilitySettings(),
-    ...getControlBarMeasureSettings(),
-    ...getControlBarSectionBoxSettings(),
-    ...getControlBarSettings(),
-  ]
-}
-
-  // Ultra: only control bar–related sections
-export function GetUltraSettingsContent(
-  viewer: Core.Ultra.Viewer,
-): SettingsItem<Settings>[] {
-  // viewer kept for a consistent signature, in case you need it later
-  return [
-    ...getControlBarCameraSettings(),
-    ...getControlBarVisibilitySettings(),
-    ...getControlBarSectionBoxSettings(),
-    ...getControlBarUltraSettings(),
-  ]
-}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/settings/settingsPanelContent.ts b/src/vim-web/react-viewers/settings/settingsPanelContent.ts
new file mode 100644
index 00000000..0dd5c00a
--- /dev/null
+++ b/src/vim-web/react-viewers/settings/settingsPanelContent.ts
@@ -0,0 +1,179 @@
+ import { SettingsPanelKeys } from './settingsKeys'
+import { SettingsItem } from './settingsItem'
+import { AnySettings } from './anySettings'
+
+export function getControlBarCursorSettings(): SettingsItem<AnySettings>[] {
+  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),
+    },
+  ]
+}
+
+export function getControlBarCameraSettings(): SettingsItem<AnySettings>[] {
+  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),
+    },
+  ]
+}
+
+export function getControlBarSectionBoxSettings(): SettingsItem<AnySettings>[] {
+  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),
+    },
+  ]
+}
+
+export function getControlBarVisibilitySettings(): SettingsItem<AnySettings>[] {
+  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),
+    },
+  ]
+}
+
+
+
diff --git a/src/vim-web/react-viewers/settings/settingsState.ts b/src/vim-web/react-viewers/settings/settingsState.ts
index a72bab1b..bf02fefc 100644
--- a/src/vim-web/react-viewers/settings/settingsState.ts
+++ b/src/vim-web/react-viewers/settings/settingsState.ts
@@ -3,12 +3,13 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react'
-import * as Core from '../../core-viewers'
-import { Settings, PartialSettings, createSettings, UltraSettings, RecursivePartial, AnySettings } from './settings'
 import { isTrue } from './userBoolean'
 import { saveSettingsToLocal } from './settingsStorage'
-import { ArgFuncRef, StateRef, useArgFuncRef, useFuncRef, useStateRef } from '../helpers/reactUtils'
-import { SettingsCustomizer, SettingsItem } from './settingsItem'
+import { StateRef, useStateRef } from '../helpers/reactUtils'
+import { SettingsCustomizer } from './settingsItem'
+import { AnySettings } from './anySettings'
+import { RecursivePartial } from '../../utils'
+import deepmerge from 'deepmerge'
 
 export type SettingsState<T extends AnySettings> = {
   value: T
@@ -59,17 +60,11 @@ export function useSettings<T extends AnySettings> (
   )
 }
 
-/**
- * Apply given vim viewer settings to the given viewer.
- */
-export function applyWebglSettings (settings: Settings) {
-  // Show/Hide performance gizmo
-  const performance = document.getElementsByClassName('vim-performance-div')[0]
-  if (performance) {
-    if (isTrue(settings.ui.performance)) {
-      performance.classList.remove('vc-hidden')
-    } else {
-      performance.classList.add('vc-hidden')
-    }
-  }
+export function createSettings<T extends AnySettings>(settings: RecursivePartial<T>, defaultSettings: T): T {
+  return settings !== undefined
+    ? deepmerge(defaultSettings, settings as Partial<T>) as T
+    : defaultSettings
 }
+
+
+
diff --git a/src/vim-web/react-viewers/settings/settingsStorage.ts b/src/vim-web/react-viewers/settings/settingsStorage.ts
index a8bc1c10..5c194749 100644
--- a/src/vim-web/react-viewers/settings/settingsStorage.ts
+++ b/src/vim-web/react-viewers/settings/settingsStorage.ts
@@ -2,7 +2,8 @@
  * @module viw-webgl-react
  */
 
-import { Settings, RecursivePartial, PartialSettings, UltraSettings, AnySettings } from './settings'
+import { RecursivePartial } from '../../utils'
+import { AnySettings } from './anySettings'
 import { UserBoolean } from './userBoolean'
 
 /**
@@ -62,7 +63,7 @@ function applyPermission (
  * @param settings - The viewer settings to process
  * @returns A new settings object with permissions converted to boolean values
  */
-function removePermission (settings: Settings | UltraSettings) {
+function removePermission (settings: AnySettings) {
   const clone = structuredClone(settings)
   const ui = clone.ui as Record<string, UserBoolean>
   for (const k of Object.keys(clone.ui)) {
diff --git a/src/vim-web/react-viewers/settings/settingsToggle.tsx b/src/vim-web/react-viewers/settings/settingsToggle.tsx
index dee19a76..2ae49f0e 100644
--- a/src/vim-web/react-viewers/settings/settingsToggle.tsx
+++ b/src/vim-web/react-viewers/settings/settingsToggle.tsx
@@ -1,7 +1,7 @@
 import { SettingsToggle } from './settingsItem'
 import * as Core from '../../core-viewers'
 import { SettingsState } from './settingsState'
-import { AnySettings } from './settings'
+import { AnySettings } from './anySettings'
 
 /**
  * Renders a toggle (checkbox) UI element for a given SettingsToggle item.
diff --git a/src/vim-web/react-viewers/state/controlBarState.tsx b/src/vim-web/react-viewers/state/controlBarState.tsx
index 6c37a757..5a7996e1 100644
--- a/src/vim-web/react-viewers/state/controlBarState.tsx
+++ b/src/vim-web/react-viewers/state/controlBarState.tsx
@@ -2,8 +2,6 @@ import * as Core from "../../core-viewers";
 import { CameraRef } from './cameraState';
 import { CursorManager } from '../helpers/cursor';
 
-import { Settings, UltraSettings, UserBoolean, isTrue } from '../settings';
-
 import { SideState } from './sideState';
 import * as Icons from '../icons';
 
@@ -19,6 +17,9 @@ import { PointerMode } from '../../core-viewers/shared';
 import * as ControlBar from '../controlbar'
 import Style = ControlBar.Style;
 import Ids = ControlBar.Ids;
+import { isTrue, UserBoolean } from "../settings/userBoolean";
+import { UltraSettings } from "../ultra/settings";
+import { WebglSettings } from "../webgl/settings";
 
 export type ControlBarSectionBoxSettings = {
   sectioningEnable: UserBoolean
@@ -214,7 +215,7 @@ export function controlBarSettingsUltra(
 function controlBarSettings(
   modal: ModalHandle,
   side: SideState,
-  settings: Settings): ControlBar.IControlBarSection {
+  settings: WebglSettings): ControlBar.IControlBarSection {
   const fullScreen = getFullScreenState();
 
   return {
@@ -400,7 +401,7 @@ export function useControlBar(
   modal: ModalHandle,
   side: SideState,
   cursor: CursorManager,
-  settings: Settings,
+  settings: WebglSettings,
   section: SectionBoxRef,
   isolationRef: IsolationRef,
   customization: ControlBar.ControlBarCustomization | undefined
@@ -439,7 +440,7 @@ function anyUiCursorButton (settings: ControlBarCursorSettings) {
  * @param {Settings} settings - The viewer settings to check
  * @returns {boolean} True if any settings buttons are enabled
  */
-export function anyUiSettingButton (settings: Settings) {
+export function anyUiSettingButton (settings: WebglSettings) {
   return (
     isTrue(settings.ui.projectInspector) ||
     isTrue(settings.ui.settings) ||
diff --git a/src/vim-web/react-viewers/ultra/controlBar.ts b/src/vim-web/react-viewers/ultra/controlBar.ts
index 41cc4518..faeda5b6 100644
--- a/src/vim-web/react-viewers/ultra/controlBar.ts
+++ b/src/vim-web/react-viewers/ultra/controlBar.ts
@@ -1,13 +1,12 @@
 
 import * as Core from '../../core-viewers/ultra'
 import { ControlBarCustomization } from '../controlbar/controlBar'
-import { settings } from '../icons'
-import { Settings, UltraSettings } from '../settings/settings'
 import { CameraRef } from '../state/cameraState'
 import { controlBarCamera, controlBarSectionBox, controlBarSettingsUltra, controlBarVisibility } from '../state/controlBarState'
 import { SectionBoxRef } from '../state/sectionBoxState'
 import { IsolationRef } from '../state/sharedIsolation'
 import { SideState } from '../state/sideState'
+import { UltraSettings } from './settings'
 
 export function useUltraControlBar (
   viewer: Core.Viewer,
diff --git a/src/vim-web/react-viewers/ultra/index.ts b/src/vim-web/react-viewers/ultra/index.ts
index daa5a5cd..4c885760 100644
--- a/src/vim-web/react-viewers/ultra/index.ts
+++ b/src/vim-web/react-viewers/ultra/index.ts
@@ -1,2 +1,3 @@
 export * from './viewer'
 export * from './viewerRef'
+export * from './settings'
diff --git a/src/vim-web/react-viewers/ultra/settings.ts b/src/vim-web/react-viewers/ultra/settings.ts
index e69de29b..9cadd585 100644
--- a/src/vim-web/react-viewers/ultra/settings.ts
+++ b/src/vim-web/react-viewers/ultra/settings.ts
@@ -0,0 +1,52 @@
+import { RecursivePartial } from "../helpers/utils"
+import { UserBoolean } from "../settings/userBoolean"
+import { ControlBarCameraSettings, ControlBarCursorSettings, ControlBarMeasureSettings, ControlBarSectionBoxSettings, ControlBarVisibilitySettings } from "../state/controlBarState"
+
+export type PartialUltraSettings = RecursivePartial<UltraSettings>
+
+export type UltraSettings = {
+  ui: ControlBarCameraSettings &
+      ControlBarCursorSettings &
+      ControlBarSectionBoxSettings &
+      ControlBarVisibilitySettings & {
+      
+      settings: UserBoolean
+  }
+}
+
+export function getDefaultUltraSettings(): UltraSettings {
+  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
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/ultra/settingsPanel.ts b/src/vim-web/react-viewers/ultra/settingsPanel.ts
new file mode 100644
index 00000000..9fd50883
--- /dev/null
+++ b/src/vim-web/react-viewers/ultra/settingsPanel.ts
@@ -0,0 +1,35 @@
+import { Viewer } from "../../core-viewers/ultra";
+import { SettingsItem } from "../settings/settingsItem";
+import { SettingsPanelKeys } from "../settings/settingsKeys";
+import { getControlBarCameraSettings, getControlBarSectionBoxSettings, getControlBarVisibilitySettings } from "../settings/settingsPanelContent";
+import { UltraSettings } from "./settings";
+
+export function getControlBarUltraSettings(): SettingsItem<UltraSettings>[] {
+  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),
+    },
+  ]
+}
+
+  // Ultra: only control bar–related sections
+export function getUltraSettingsContent(
+  viewer: Viewer,
+): SettingsItem<UltraSettings>[] {
+  // viewer kept for a consistent signature, in case you need it later
+  return [
+    ...getControlBarCameraSettings(),
+    ...getControlBarVisibilitySettings(),
+    ...getControlBarSectionBoxSettings(),
+    ...getControlBarUltraSettings(),
+  ]
+}
diff --git a/src/vim-web/react-viewers/ultra/viewer.tsx b/src/vim-web/react-viewers/ultra/viewer.tsx
index 92f76ff7..2c7039d1 100644
--- a/src/vim-web/react-viewers/ultra/viewer.tsx
+++ b/src/vim-web/react-viewers/ultra/viewer.tsx
@@ -1,7 +1,6 @@
 
 
 import * as Core from '../../core-viewers'
-import { Settings, PartialSettings, PartialUltraSettings, getDefaultUltraSettings } from '../../react-viewers/settings/settings'
 import { useSettings } from '../../react-viewers/settings/settingsState'
 import {useRef, RefObject, useEffect, useState } from 'react'
 import { Container, createContainer } from '../container'
@@ -26,8 +25,10 @@ import { useUltraIsolation } from './isolation'
 import { IsolationPanel } from '../panels/isolationPanel'
 import { GenericPanelHandle } from '../generic/genericPanel'
 import { ControllablePromise } from '../../utils'
-import { GetUltraSettingsContent, SettingsPanel } from '../settings/settingsPanel'
+import { SettingsPanel } from '../settings/settingsPanel'
 import { SidePanelMemo } from '../panels/sidePanel'
+import { getDefaultUltraSettings, PartialUltraSettings } from './settings'
+import { getUltraSettingsContent } from './settingsPanel'
 
 
 /**
@@ -150,7 +151,7 @@ export function Viewer (props: {
     <>
       <SettingsPanel
         visible={side.getContent() === 'settings'}
-        content={GetUltraSettingsContent(props.core)}
+        content={getUltraSettingsContent(props.core)}
         settings={settings}
       />
     </>
diff --git a/src/vim-web/react-viewers/webgl/index.ts b/src/vim-web/react-viewers/webgl/index.ts
index 73b57ba1..4cf53ed0 100644
--- a/src/vim-web/react-viewers/webgl/index.ts
+++ b/src/vim-web/react-viewers/webgl/index.ts
@@ -2,6 +2,7 @@
 // Full exports
 export * from './viewer';
 export * from './viewerRef';
+export * from './settings'
 
 // Type exports
 export type * from './loading';
diff --git a/src/vim-web/react-viewers/webgl/settings.ts b/src/vim-web/react-viewers/webgl/settings.ts
new file mode 100644
index 00000000..81a9f7d1
--- /dev/null
+++ b/src/vim-web/react-viewers/webgl/settings.ts
@@ -0,0 +1,109 @@
+import { RecursivePartial } from "../../utils"
+import { UserBoolean } from "../settings/userBoolean"
+import { ControlBarCameraSettings, ControlBarCursorSettings, ControlBarMeasureSettings, ControlBarSectionBoxSettings, ControlBarVisibilitySettings } from "../state/controlBarState"
+
+export type PartialWebglSettings = RecursivePartial<WebglSettings>
+  
+/**
+ * Complete settings configuration for the Vim viewer
+ * @interface Settings
+ */
+export type WebglSettings = {
+  capacity: {
+    canFollowUrl: boolean
+    canGoFullScreen: boolean
+    canDownload: boolean
+    canReadLocalStorage: boolean
+  }
+  ui: ControlBarCameraSettings &
+      ControlBarCursorSettings &
+      ControlBarSectionBoxSettings &
+      ControlBarVisibilitySettings &
+      ControlBarMeasureSettings & {
+    
+    // panels
+    logo: UserBoolean
+    bimTreePanel: UserBoolean
+    bimInfoPanel: UserBoolean
+    performance: UserBoolean
+    axesPanel: UserBoolean
+    controlBar: UserBoolean
+
+    // axesPanel
+    orthographic: UserBoolean
+    resetCamera: UserBoolean
+
+    // Control bar - settings
+    projectInspector: UserBoolean
+    settings: UserBoolean
+    help: UserBoolean
+    maximise: UserBoolean
+  }
+}
+
+
+/**
+ * Default settings configuration for the React Webgl Vim viewer
+ * @constant
+ * @type {WebglSettings}
+ */
+export function getDefaultSettings(): WebglSettings {
+  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
+    }
+  }
+}
+
diff --git a/src/vim-web/react-viewers/webgl/settingsPanel.ts b/src/vim-web/react-viewers/webgl/settingsPanel.ts
new file mode 100644
index 00000000..914bc7f7
--- /dev/null
+++ b/src/vim-web/react-viewers/webgl/settingsPanel.ts
@@ -0,0 +1,194 @@
+import { THREE } from "../..";
+import { Viewer } from "../../core-viewers/webgl";
+import { isTrue } from "../settings";
+import { SettingsItem } from "../settings/settingsItem";
+import { SettingsPanelKeys } from "../settings/settingsKeys";
+import { getControlBarCameraSettings, getControlBarCursorSettings, getControlBarSectionBoxSettings, getControlBarVisibilitySettings } from "../settings/settingsPanelContent";
+import { WebglSettings } from "./settings";
+
+export function getControlBarVariousSettings(): SettingsItem<WebglSettings>[] {
+  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),
+    },
+  ]
+}
+
+
+
+export function getPanelsVisibilitySettings(): SettingsItem<WebglSettings>[] {
+  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),
+    },
+  ]
+}
+
+export function getInputsSettings(
+  viewer: Viewer,
+): SettingsItem<WebglSettings>[] {
+  return [
+    {
+      type: 'subtitle',
+      key: SettingsPanelKeys.InputsSubtitle,
+      title: 'Inputs',
+    },
+    {
+      type: 'box',
+      key: SettingsPanelKeys.InputsScrollSpeedBox,
+      label: 'Scroll Speed',
+      info: '[0.1,10]',
+      transform: (n) => THREE.MathUtils.clamp(n, 0.1, 10),
+      getter: (_s) => viewer.inputs.scrollSpeed,
+      setter: (_s, v) => {
+        viewer.inputs.scrollSpeed = v
+      },
+    },
+  ]
+}
+
+function getAxesPanelSettings(): SettingsItem<WebglSettings>[] {
+  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),
+    },
+  ]
+}
+
+export function getControlBarMeasureSettings(): SettingsItem<WebglSettings>[] {
+  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),
+    },
+  ]
+}
+
+export function getWebglSettingsContent(
+  viewer: Viewer,
+): SettingsItem<WebglSettings>[] {
+  return [
+    ...getInputsSettings(viewer),
+    ...getPanelsVisibilitySettings(),
+    ...getAxesPanelSettings(),
+    ...getControlBarCursorSettings(),
+    ...getControlBarCameraSettings(),
+    ...getControlBarVisibilitySettings(),
+    ...getControlBarMeasureSettings(),
+    ...getControlBarSectionBoxSettings(),
+    ...getControlBarVariousSettings(),
+  ]
+}
+
+/**
+ * Apply given vim viewer settings to the given viewer.
+ */
+export function applyWebglSettings (settings: WebglSettings) {
+  // Show/Hide performance gizmo
+  const performance = document.getElementsByClassName('vim-performance-div')[0]
+  if (performance) {
+    if (isTrue(settings.ui.performance)) {
+      performance.classList.remove('vc-hidden')
+    } else {
+      performance.classList.add('vc-hidden')
+    }
+  }
+}
diff --git a/src/vim-web/react-viewers/webgl/viewer.tsx b/src/vim-web/react-viewers/webgl/viewer.tsx
index 597b8f99..265cb38b 100644
--- a/src/vim-web/react-viewers/webgl/viewer.tsx
+++ b/src/vim-web/react-viewers/webgl/viewer.tsx
@@ -19,14 +19,12 @@ import {
 } from '../panels/contextMenu'
 import { SidePanelMemo } from '../panels/sidePanel'
 import { useSideState } from '../state/sideState'
-import { GetWebglSettingsContent, SettingsPanel } from '../settings/settingsPanel'
 import { MenuToastMemo } from '../panels/toast'
 import { Overlay } from '../panels/overlay'
 import { addPerformanceCounter } from '../panels/performance'
 import { applyWebglBindings } from './inputsBindings'
 import { CursorManager } from '../helpers/cursor'
-import { PartialSettings, Settings, getDefaultSettings, getDefaultUltraSettings, isTrue } from '../settings'
-import { applyWebglSettings, useSettings } from '../settings/settingsState'
+import { useSettings } from '../settings/settingsState'
 import { TreeActionRef } from '../bim/bimTree'
 import { Container, createContainer } from '../container'
 import { useViewerState } from './viewerState'
@@ -45,6 +43,10 @@ import { useWebglIsolation } from './isolation'
 import { GenericPanelHandle } from '../generic'
 import { ControllablePromise } from '../../utils'
 import { SettingsCustomizer } from '../settings/settingsItem'
+import { getDefaultSettings, PartialWebglSettings, WebglSettings } from './settings'
+import { isTrue } from '../settings/userBoolean'
+import { SettingsPanel } from '../settings/settingsPanel'
+import { applyWebglSettings, getWebglSettingsContent } from './settingsPanel'
 
 /**
  * Creates a UI container along with a VIM.Viewer and its associated React viewer.
@@ -55,7 +57,7 @@ import { SettingsCustomizer } from '../settings/settingsItem'
  */
 export function createViewer (
   container?: Container | HTMLElement,
-  settings: PartialSettings = {},
+  settings: PartialWebglSettings = {},
   coreSettings: Core.Webgl.PartialViewerSettings = {}
 ) : Promise<ViewerRef> {
   const controllablePromise = new ControllablePromise<ViewerRef>()
@@ -106,7 +108,7 @@ export function Viewer (props: {
   container: Container
   viewer: Core.Webgl.Viewer
   onMount: (viewer: ViewerRef) => void
-  settings?: PartialSettings
+  settings?: PartialWebglSettings
 }) {
   const settings = useSettings(props.settings ?? {}, getDefaultSettings(), (s) => applyWebglSettings(s))
   const modal = useRef<ModalHandle>(null)
@@ -176,7 +178,7 @@ export function Viewer (props: {
       settings: {
         update : settings.update,
         register : settings.register,
-        customize : (c: SettingsCustomizer<Settings>) => settings.customizer.set(c)
+        customize : (c: SettingsCustomizer<WebglSettings>) => settings.customizer.set(c)
       },
       get isolationPanel(){
         return isolationPanelHandle.current
@@ -219,7 +221,7 @@ export function Viewer (props: {
       />}
       <SettingsPanel
         visible={side.getContent() === 'settings'}
-        content={GetWebglSettingsContent(props.viewer)}
+        content={getWebglSettingsContent(props.viewer)}
         settings={settings}
       />
     </>
diff --git a/src/vim-web/react-viewers/webgl/viewerRef.ts b/src/vim-web/react-viewers/webgl/viewerRef.ts
index 5075cb29..c4bcc862 100644
--- a/src/vim-web/react-viewers/webgl/viewerRef.ts
+++ b/src/vim-web/react-viewers/webgl/viewerRef.ts
@@ -4,7 +4,7 @@
 
 import * as Core from '../../core-viewers'
 import { ContextMenuRef } from '../panels/contextMenu'
-import { Settings } from '../settings/settings'
+import { Settings } from '../settings/anySettings'
 import { CameraRef } from '../state/cameraState'
 import { Container } from '../container'
 import { BimInfoPanelRef } from '../bim/bimInfoData'

From fcee7b42a7372f8dbafa00cee3deca013f6e91dd Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Mon, 17 Nov 2025 12:40:38 -0500
Subject: [PATCH 4/8] can ensable both ghost and transparency

---
 src/vim-web/core-viewers/webgl/loader/mesh.ts | 55 +++++++++++++----
 .../loader/progressive/insertableMesh.ts      | 61 ++++++++++++++-----
 .../webgl/loader/progressive/instancedMesh.ts | 56 +++++++++++++----
 .../react-viewers/panels/isolationPanel.tsx   |  2 +
 src/vim-web/react-viewers/webgl/isolation.ts  |  8 ++-
 5 files changed, 138 insertions(+), 44 deletions(-)

diff --git a/src/vim-web/core-viewers/webgl/loader/mesh.ts b/src/vim-web/core-viewers/webgl/loader/mesh.ts
index 00067fdc..667dc580 100644
--- a/src/vim-web/core-viewers/webgl/loader/mesh.ts
+++ b/src/vim-web/core-viewers/webgl/loader/mesh.ts
@@ -94,20 +94,49 @@ export class Mesh {
   }
 
   /**
-   * Overrides mesh material, set to undefine to restore initial material.
-   */
-  setMaterial (value: ModelMaterial) {
-    if (this._material === value) return
-    if (this.ignoreSceneMaterial) return
-    this.mesh.material = value ?? this._material
-
-    // Update material groups
-    this.mesh.geometry.clearGroups()
-    if(value instanceof Array) {
-      value.forEach((m, i) => {
-        this.mesh.geometry.addGroup(0, Infinity, i)
-      })
+   * Sets the material for this mesh. 
+   * Set to undefined to reset to original materials.
+   */
+  setMaterial(value: ModelMaterial) {
+    if (this.ignoreSceneMaterial) return;
+
+    const base = this._material; // always defined
+    let mat: ModelMaterial;
+
+    if (Array.isArray(value)) {
+      mat = this._mergeMaterials(value, base);
+    } else {
+      mat = value ?? base;
     }
+
+    // Apply it
+    this.mesh.material = mat;
+
+    // Update groups
+    this.mesh.geometry.clearGroups();
+    if (Array.isArray(mat)) {
+      mat.forEach((_m, i) => {
+        this.mesh.geometry.addGroup(0, Infinity, i);
+      });
+    }
+  }
+
+  private _mergeMaterials(
+    value: THREE.Material[],
+    base: ModelMaterial
+  ): THREE.Material[] {
+    const baseArr = Array.isArray(base) ? base : [base];
+    const result: THREE.Material[] = [];
+
+    for (const v of value) {
+      if (v === undefined) {
+        result.push(...baseArr);
+      } else {
+        result.push(v);
+      }
+    }
+
+    return result;
   }
 
   /**
diff --git a/src/vim-web/core-viewers/webgl/loader/progressive/insertableMesh.ts b/src/vim-web/core-viewers/webgl/loader/progressive/insertableMesh.ts
index 811d37cb..d2bdd5c4 100644
--- a/src/vim-web/core-viewers/webgl/loader/progressive/insertableMesh.ts
+++ b/src/vim-web/core-viewers/webgl/loader/progressive/insertableMesh.ts
@@ -129,20 +129,49 @@ export class InsertableMesh {
     // }
   }
 
-  /**
-   * Overrides mesh material, set to undefine to restore initial material.
-   */
-  setMaterial (value: ModelMaterial) {
-    if (this._material === value) return
-    if (this.ignoreSceneMaterial) return
-    this.mesh.material = value ?? this._material
-
-    // Update material groups
-    this.mesh.geometry.clearGroups()
-    if(value instanceof Array) {
-      value.forEach((m, i) => {
-        this.mesh.geometry.addGroup(0, Infinity, i)
-      })
-    }
-  }
+ /**
+    * Sets the material for this mesh. 
+    * Set to undefined to reset to original materials.
+    */
+   setMaterial(value: ModelMaterial) {
+     if (this.ignoreSceneMaterial) return;
+ 
+     const base = this._material; // always defined
+     let mat: ModelMaterial;
+ 
+     if (Array.isArray(value)) {
+       mat = this._mergeMaterials(value, base);
+     } else {
+       mat = value ?? base;
+     }
+ 
+     // Apply it
+     this.mesh.material = mat;
+ 
+     // Update groups
+     this.mesh.geometry.clearGroups();
+     if (Array.isArray(mat)) {
+       mat.forEach((_m, i) => {
+         this.mesh.geometry.addGroup(0, Infinity, i);
+       });
+     }
+   }
+ 
+   private _mergeMaterials(
+     value: THREE.Material[],
+     base: ModelMaterial
+   ): THREE.Material[] {
+     const baseArr = Array.isArray(base) ? base : [base];
+     const result: THREE.Material[] = [];
+ 
+     for (const v of value) {
+       if (v === undefined) {
+         result.push(...baseArr);
+       } else {
+         result.push(v);
+       }
+     }
+ 
+     return result;
+   }
 }
diff --git a/src/vim-web/core-viewers/webgl/loader/progressive/instancedMesh.ts b/src/vim-web/core-viewers/webgl/loader/progressive/instancedMesh.ts
index 5eb8e036..504cbc49 100644
--- a/src/vim-web/core-viewers/webgl/loader/progressive/instancedMesh.ts
+++ b/src/vim-web/core-viewers/webgl/loader/progressive/instancedMesh.ts
@@ -70,19 +70,51 @@ export class InstancedMesh {
     return submeshes
   }
 
-  setMaterial (value: ModelMaterial) {
-    if (this._material === value) return
-    if (this.ignoreSceneMaterial) return
-    this.mesh.material = value ?? this._material
-
-    // Update material groups
-    this.mesh.geometry.clearGroups()
-    if(value instanceof Array) {
-      value.forEach((m, i) => {
-        this.mesh.geometry.addGroup(0, Infinity, i)
-      })
+  /**
+     * Sets the material for this mesh. 
+     * Set to undefined to reset to original materials.
+     */
+    setMaterial(value: ModelMaterial) {
+      if (this.ignoreSceneMaterial) return;
+
+      const base = this._material; // always defined
+      let mat: ModelMaterial;
+
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+
+      // Apply it
+      this.mesh.material = mat;
+
+      // Update groups
+      this.mesh.geometry.clearGroups();
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i) => {
+          this.mesh.geometry.addGroup(0, Infinity, i);
+        });
+      }
+    }
+
+    private _mergeMaterials(
+      value: THREE.Material[],
+      base: ModelMaterial
+    ): THREE.Material[] {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result: THREE.Material[] = [];
+
+      for (const v of value) {
+        if (v === undefined) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+
+      return result;
     }
-  }
 
   private computeBoundingBoxes () {
     this.mesh.geometry.computeBoundingBox()
diff --git a/src/vim-web/react-viewers/panels/isolationPanel.tsx b/src/vim-web/react-viewers/panels/isolationPanel.tsx
index b002023f..1f877b78 100644
--- a/src/vim-web/react-viewers/panels/isolationPanel.tsx
+++ b/src/vim-web/react-viewers/panels/isolationPanel.tsx
@@ -23,12 +23,14 @@ export const IsolationPanel = forwardRef<GenericPanelHandle, { state: IsolationR
             label: "Show Ghost",
             state: props.state.showGhost
           },
+          /*
           {
             type: "bool",
             id: "showRooms",
             label: "Show Rooms",
             state: props.state.showRooms
           },
+          */
           {
             type: "number",
             id: Ids.ghostOpacity,
diff --git a/src/vim-web/react-viewers/webgl/isolation.ts b/src/vim-web/react-viewers/webgl/isolation.ts
index 932a3254..6b322d64 100644
--- a/src/vim-web/react-viewers/webgl/isolation.ts
+++ b/src/vim-web/react-viewers/webgl/isolation.ts
@@ -14,9 +14,11 @@ function createWebglIsolationAdapter(viewer: Core.Webgl.Viewer): IsolationAdapte
 
   function updateMaterials(){
     viewer.renderer.modelMaterial =
-        ghost ? [viewer.materials.simple, viewer.materials.ghost]
-      : transparency ? undefined 
-      : viewer.materials.simple
+      !ghost && transparency ? undefined 
+      : ghost && transparency ? [undefined, viewer.materials.ghost]
+      : !ghost && !transparency ? viewer.materials.simple
+      : ghost && !transparency ? [viewer.materials.simple, viewer.materials.ghost]
+      : (() => { throw new Error("Unreachable state in isolation materials") })();
   }
 
   function updateVisibility(elements: 'all' | Selectable[], predicate: (object: Selectable) => boolean){

From 4d934721fe5a12fc887177dea747dbab4e61efd4 Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Mon, 17 Nov 2025 17:04:45 -0500
Subject: [PATCH 5/8] consistency in settings

---
 src/vim-web/react-viewers/bim/bimPanel.tsx    |  26 +--
 .../react-viewers/controlbar/controlBarIds.ts |  85 ++++----
 .../react-viewers/panels/axesPanel.tsx        |  17 +-
 .../react-viewers/settings/settingsKeys.ts    |  10 +-
 .../react-viewers/state/controlBarState.tsx   | 201 ++++++++++--------
 src/vim-web/react-viewers/ultra/controlBar.ts |   6 +-
 src/vim-web/react-viewers/ultra/settings.ts   |  16 +-
 .../react-viewers/ultra/settingsPanel.ts      |  15 +-
 src/vim-web/react-viewers/ultra/viewer.tsx    |  14 +-
 src/vim-web/react-viewers/ultra/viewerRef.ts  |   4 +
 src/vim-web/react-viewers/webgl/loading.ts    |   4 +-
 src/vim-web/react-viewers/webgl/settings.ts   |  55 +++--
 .../react-viewers/webgl/settingsPanel.ts      |  64 +++---
 src/vim-web/react-viewers/webgl/viewer.tsx    |   8 +-
 src/vim-web/react-viewers/webgl/viewerRef.ts  |  13 +-
 15 files changed, 291 insertions(+), 247 deletions(-)

diff --git a/src/vim-web/react-viewers/bim/bimPanel.tsx b/src/vim-web/react-viewers/bim/bimPanel.tsx
index fc239424..f675b835 100644
--- a/src/vim-web/react-viewers/bim/bimPanel.tsx
+++ b/src/vim-web/react-viewers/bim/bimPanel.tsx
@@ -5,9 +5,7 @@
 import React, { useMemo, useState } from 'react'
 import * as Core from '../../core-viewers'
 
-import { AugmentedElement } from '../helpers/element'
 import { whenAllTrue, whenFalse, whenSomeTrue, whenTrue } from '../helpers/utils'
-import { Settings, isFalse } from '../settings'
 import { CameraRef } from '../state/cameraState'
 import { IsolationRef } from '../state/sharedIsolation'
 import { ViewerState } from '../webgl/viewerState'
@@ -16,6 +14,8 @@ import { BimInfoPanel } from './bimInfoPanel'
 import { BimSearch } from './bimSearch'
 import { BimTree, TreeActionRef } from './bimTree'
 import { toTreeData } from './bimTreeData'
+import { WebglSettings } from '../webgl/settings'
+import { isFalse } from '../settings/userBoolean'
 
 // Not sure why I need this,
 // when I inline this method in viewer.tsx it causes an error.
@@ -26,13 +26,13 @@ export function OptionalBimPanel (props: {
   viewerState: ViewerState
   isolation: IsolationRef
   visible: boolean
-  settings: Settings
+  settings: WebglSettings
   treeRef: React.MutableRefObject<TreeActionRef | undefined>
   bimInfoRef: BimInfoPanelRef
 }) {
   return whenSomeTrue([
-    props.settings.ui.bimTreePanel,
-    props.settings.ui.bimInfoPanel],
+    props.settings.ui.panelBimTree,
+    props.settings.ui.panelBimInfo],
   React.createElement(BimPanel, props))
 }
 
@@ -51,7 +51,7 @@ export function BimPanel (props: {
   viewerState: ViewerState
   isolation: IsolationRef
   visible: boolean
-  settings: Settings
+  settings: WebglSettings
   treeRef: React.MutableRefObject<TreeActionRef | undefined>
   bimInfoRef: BimInfoPanelRef
 }) {
@@ -63,11 +63,11 @@ export function BimPanel (props: {
 
   const selection = props.viewerState.selection.get()
   const last = selection[selection.length - 1] 
-  const fullTree = isFalse(props.settings.ui.bimInfoPanel)
-  const fullInfo = isFalse(props.settings.ui.bimTreePanel)
+  const fullTree = isFalse(props.settings.ui.panelBimInfo)
+  const fullInfo = isFalse(props.settings.ui.panelBimTree)
   return (
     <div className={`vim-bim-panel vc-inset-0 vc-absolute vc-h-full vc-w-full ${fullTree ? 'full-tree' : ''} ${props.visible ? '' : 'vc-hidden'}`}>
-      {whenTrue(props.settings.ui.bimTreePanel,
+      {whenTrue(props.settings.ui.panelBimTree,
         <div className={`vim-bim-upper vc-flex vc-flex-col vc-absolute vc-w-full ${fullTree ? 'vc-h-full' : 'vc-h-[49%]'} `}>
           {<h2
             className="vim-bim-upper-title vc-title vc-text-xs vc-font-bold vc-uppercase">
@@ -92,19 +92,19 @@ export function BimPanel (props: {
       {
         // Divider if needed.
         whenAllTrue([
-          props.settings.ui.bimTreePanel,
-          props.settings.ui.bimInfoPanel,
+          props.settings.ui.panelBimTree,
+          props.settings.ui.panelBimInfo,
           props.viewerState.elements.get()?.length > 0,
         ],
         divider())
       }
-      {whenTrue(props.settings.ui.bimInfoPanel,
+      {whenTrue(props.settings.ui.panelBimInfo,
         <div className={`vim-bim-lower-container vc-absolute ${fullInfo ? 'vc-top-0' : 'vc-top-[50%]'} vc-bottom-0 vc-bottom vc-left-0 vc-right-0`}>
           <BimInfoPanel
             object={last}
             vim={props.viewerState.vim.get()}
             elements={props.viewerState.elements.get()}
-            full={isFalse(props.settings.ui.bimTreePanel)}
+            full={isFalse(props.settings.ui.panelBimTree)}
             bimInfoRef={props.bimInfoRef}
           />
         </div>)}
diff --git a/src/vim-web/react-viewers/controlbar/controlBarIds.ts b/src/vim-web/react-viewers/controlbar/controlBarIds.ts
index d505ab1a..99d1aed9 100644
--- a/src/vim-web/react-viewers/controlbar/controlBarIds.ts
+++ b/src/vim-web/react-viewers/controlbar/controlBarIds.ts
@@ -1,52 +1,43 @@
-// Sections
-export const sectionSelection = 'controlBar.sectionSelection'
-export const sectionCamera = 'controlBar.sectionCamera'
-export const sectionInputs = 'controlBar.sectionInputs'
-export const sectionActions = 'controlBar.sectionActions'
-export const sectionTools = 'controlBar.sectionTools'
-export const sectionSettings = 'controlBar.sectionSettings'
-export const sectionMeasure = 'controlBar.sectionMeasure'
-export const sectionSectionBox = 'controlBar.sectionSectionBox'
-
 // Camera buttons
-export const buttonCameraFrameSelection = 'controlBar.camera.frameSelection'
-export const buttonCameraFrameScene = 'controlBar.camera.frameScene'
-export const buttonCameraAuto = 'controlBar.camera.auto'
+export const cameraSpan = 'controlBar.cameraSpan'
+export const cameraFrameSelection = 'controlBar.cameraFrameSelection'
+export const cameraFrameScene = 'controlBar.cameraFrameScene'
+export const cameraAuto = 'controlBar.cameraAuto'
 
 // Camera Control buttons
-export const buttonCameraOrbit = 'controlBar.camera.orbit'
-export const buttonCameraLook = 'controlBarcamera.look'
-export const buttonCameraPan = 'controlBar.camera.pan'
-export const buttonCameraZoom = 'controlBar.camera.zoom'
-export const buttonCameraZoomWindow = 'controlBar.camera.zoomWindow'
+export const cursorSpan = 'controlBar.cursorSpan'
+export const cursorOrbit = 'controlBar.cursorOrbit'
+export const cursorLook = 'controlBar.cursorLook'
+export const cursorPan = 'controlBar.cursorPan'
+export const cursorZoom = 'controlBar.cursorZoom'
+export const cursorZoomWindow = 'controlBar.cursorZoomWindow'
+
+// Visibility buttons
+export const visibilitySpan = 'controlBar.visibilitySpan'
+export const visibilityClearSelection = 'controlBar.visibilityClearSelection'
+export const visibilityShowAll = 'controlBar.visibilityShowAll'
+export const visibilityIsolateSelection = 'controlBar.visibilityIsolateSelection'
+export const visibilityHideSelection = 'controlBar.visibilityHideSelection'
+export const visibilityShowSelection = 'controlBar.visibilityShowSelection'
+export const visibilityAutoIsolate = 'controlBar.visibilityAutoIsolate'
+export const visibilitySettings = 'controlBar.visibilitySettings'
+
+// Section buttons
+export const sectioningSpan = 'controlBar.sectioningSpan'
+export const sectioningEnable = 'controlBar.sectioningEnable'
+export const sectioningVisible = 'controlBar.sectioningVisible'
+export const sectioningFitSelection = 'controlBar.sectioningFitSelection'
+export const sectioningFitScene = 'controlBar.sectioningFitScene'
+export const sectioningAuto = 'controlBar.sectioningAuto'
+export const sectioningSettings = 'controlBar.sectioningSettings'
+
+// Measure buttons
+export const measureSpan = 'controlBar.measureSpan'
+export const measureEnable = 'controlBar.measureEnable'
 
 // Settings buttons
-export const buttonProjectInspector = 'controlBar.projectInspector'
-export const buttonSettings = 'controlBar.settings'
-export const buttonHelp = 'controlBar.help'
-export const buttonMaximize = 'controlBar.maximize'
-
-// Selection buttons
-export const buttonClearSelection = 'controlBar.action.clearSelection'
-export const buttonShowAll = 'controlBar.selection.showAll'
-export const buttonIsolateSelection = 'controlBar.selection.isolate'
-export const buttonHideSelection = 'controlBar.selection.hide'
-export const buttonShowSelection = 'controlBar.selection.show'
-export const buttonAutoIsolate = 'controlBar.selection.autoIsolate'
-export const buttonIsolationSettings = 'controlBar.selection.isolationSettings'
-
-// Action Buttons
-export const buttonRenderSettings = 'controlBar.action.renderSettings'
-
-// Tools buttons
-export const buttonSectionBox = 'controlBar.sectionBox'
-export const buttonMeasure = 'controlBar.measure'
-
-// Section box buttons
-export const buttonSectionBoxEnable = 'controlBar.sectionBox.enable'
-export const buttonSectionBoxVisible = 'controlBar.sectionBox.visible'
-
-export const buttonSectionBoxToSelection = 'controlBar.sectionBox.sectionSelection'
-export const buttonSectionBoxToScene = 'controlBar.sectionBox.sectionScene'
-export const buttonSectionBoxAuto = 'controlBar.sectionBox.auto'
-export const buttonSectionBoxSettings = 'controlBar.sectionBox.settings'
+export const miscSpan = 'controlBar.miscSpan'
+export const miscInspector = 'controlBar.miscInspector'
+export const miscSettings = 'controlBar.miscSettings'
+export const miscHelp = 'controlBar.miscHelp'
+export const miscMaximize = 'controlBar.miscMaximize'
diff --git a/src/vim-web/react-viewers/panels/axesPanel.tsx b/src/vim-web/react-viewers/panels/axesPanel.tsx
index 27b10c15..5514e828 100644
--- a/src/vim-web/react-viewers/panels/axesPanel.tsx
+++ b/src/vim-web/react-viewers/panels/axesPanel.tsx
@@ -6,14 +6,15 @@ import React, { useEffect, useRef, useState } from 'react'
 import * as Core from '../../core-viewers'
 import * as Icons from '../icons'
 import { CameraRef } from '../state/cameraState'
-import { isTrue, Settings } from '../settings'
 import { SettingsState } from '../settings/settingsState'
 import { whenAllTrue, whenTrue } from '../helpers/utils'
+import { WebglSettings } from '../webgl/settings'
+import { isTrue } from '../settings/userBoolean'
 
-function anyUiAxesButton (settings: Settings) {
+function anyUiAxesButton (settings: WebglSettings) {
   return (
-    settings.ui.orthographic ||
-    settings.ui.resetCamera
+    settings.ui.axesOrthographic ||
+    settings.ui.axesHome
   )
 }
 
@@ -25,7 +26,7 @@ export const AxesPanelMemo = React.memo(AxesPanel)
 /**
  * JSX Component for axes gizmo.
  */
-function AxesPanel (props: { viewer: Core.Webgl.Viewer, camera: CameraRef, settings: SettingsState }) {
+function AxesPanel (props: { viewer: Core.Webgl.Viewer, camera: CameraRef, settings: SettingsState<WebglSettings> }) {
   const viewer = props.viewer
 
   const [ortho, setOrtho] = useState<boolean>(viewer.camera.orthographic)
@@ -97,7 +98,7 @@ function AxesPanel (props: { viewer: Core.Webgl.Viewer, camera: CameraRef, setti
     </button>
   )
 
-  const hidden = isTrue(props.settings.value.ui.axesPanel) ? '' : ' vc-hidden'
+  const hidden = isTrue(props.settings.value.ui.panelAxes) ? '' : ' vc-hidden'
   const empty = !anyUiAxesButton(props.settings.value)
 
   const createBar = () => {
@@ -106,9 +107,9 @@ function AxesPanel (props: { viewer: Core.Webgl.Viewer, camera: CameraRef, setti
       <div className='vim-axes-panel-bar vc-absolute vc-top-[75%] vc-bottom-0 vc-right-0 vc-left-0'>
         <div className="vim-axes-panel-buttons vc-absolute vc-inset-0 vc-pointer-events-auto vc-order-2 vc-flex vc-items-center vc-justify-evenly vc-bg-white">
           {whenAllTrue([
-            props.settings.value.ui.orthographic
+            props.settings.value.ui.axesOrthographic
           ], btnOrtho)}
-          {whenTrue(props.settings.value.ui.resetCamera, btnHome)}
+          {whenTrue(props.settings.value.ui.axesHome, btnHome)}
         </div>
       </div>
     )
diff --git a/src/vim-web/react-viewers/settings/settingsKeys.ts b/src/vim-web/react-viewers/settings/settingsKeys.ts
index 68f20d2f..e8b0b9af 100644
--- a/src/vim-web/react-viewers/settings/settingsKeys.ts
+++ b/src/vim-web/react-viewers/settings/settingsKeys.ts
@@ -58,9 +58,9 @@ export class SettingsPanelKeys {
   static ControlBarVisibilitySettings = 'controlBar.visibility.settings'
 
   // --- Control Bar - Settings ---
-  static ControlBarSettingsSubtitle = 'controlBarSettings'
-  static ControlBarSettingsShowProjectInspectorButtonToggle = 'projectInspector'
-  static ControlBarSettingsShowSettingsButtonToggle = 'settingsButton'
-  static ControlBarSettingsShowHelpButtonToggle = 'help'
-  static ControlBarSettingsShowMaximiseButtonToggle = 'maximise'
+  static ControlBarMiscSubtitle = 'controlBarSettings'
+  static ControlBarMiscShowProjectInspectorButtonToggle = 'projectInspector'
+  static ControlBarMiscShowSettingsButtonToggle = 'settingsButton'
+  static ControlBarMiscShowHelpButtonToggle = 'help'
+  static ControlBarMiscShowMaximiseButtonToggle = 'maximise'
 }
diff --git a/src/vim-web/react-viewers/state/controlBarState.tsx b/src/vim-web/react-viewers/state/controlBarState.tsx
index 5a7996e1..44aec542 100644
--- a/src/vim-web/react-viewers/state/controlBarState.tsx
+++ b/src/vim-web/react-viewers/state/controlBarState.tsx
@@ -17,9 +17,10 @@ import { PointerMode } from '../../core-viewers/shared';
 import * as ControlBar from '../controlbar'
 import Style = ControlBar.Style;
 import Ids = ControlBar.Ids;
-import { isTrue, UserBoolean } from "../settings/userBoolean";
+import { isFalse, isTrue, UserBoolean } from "../settings/userBoolean";
 import { UltraSettings } from "../ultra/settings";
 import { WebglSettings } from "../webgl/settings";
+import { AnySettings } from "../settings";
 
 export type ControlBarSectionBoxSettings = {
   sectioningEnable: UserBoolean
@@ -40,61 +41,61 @@ export function controlBarSectionBox(
 ): ControlBar.IControlBarSection {
 
   return {
-    id: Ids.sectionSectionBox,
+    id: Ids.sectioningSpan,
     style: section.enable.get()? Style.sectionNoPadStyle : Style.sectionDefaultStyle,
     //enable: () => section.getEnable(),
     buttons: [
       {
-        id: Ids.buttonSectionBoxEnable,
+        id: Ids.sectioningEnable,
         enabled: () => isTrue(settings.sectioningEnable),
         tip: 'Enable Section Box',
         isOn: () => section.enable.get(),
-        style: (on) => Style.buttonExpandStyle(on),
+        style: Style.buttonExpandStyle,
         action: () => section.enable.set(!section.enable.get()),
         icon: Icons.sectionBox,
       },
       {
-        id: Ids.buttonSectionBoxToSelection,
+        id: Ids.sectioningFitSelection,
         
         tip: 'Fit Section',
         enabled: () => section.enable.get() && isTrue(settings.sectioningFitToSelection),
         isOn: () => hasSelection,
-        style: (on) => Style.buttonDisableStyle(on),
+        style: Style.buttonDisableStyle,
         action: () => section.sectionSelection.call(), 
         icon: Icons.sectionBoxShrink,
       },
       {
-        id: Ids.buttonSectionBoxToScene,
+        id: Ids.sectioningFitScene,
         tip: 'Reset Section',
         enabled: () => section.enable.get() && isTrue(settings.sectioningReset),
-        style: (on) => Style.buttonDefaultStyle(on),
+        style: Style.buttonDefaultStyle,
         action: () => section.sectionScene.call(), 
         icon: Icons.sectionBoxReset,
       },
       {
-        id: Ids.buttonSectionBoxVisible,
+        id: Ids.sectioningVisible,
         tip: 'Show Section Box',
         enabled: () => section.enable.get() && isTrue(settings.sectioningShow),
         isOn: () => section.visible.get(),
-        style: (on) => Style.buttonDefaultStyle(on),
+        style: Style.buttonDefaultStyle,
         action: () => section.visible.set(!section.visible.get()),
         icon: Icons.visible,
       },
       {
-        id: Ids.buttonSectionBoxAuto,
+        id: Ids.sectioningAuto,
         tip: 'Auto Section',
         enabled: () => section.enable.get() && isTrue(settings.sectioningAuto),
         isOn: () => section.auto.get(),
-        style: (on) => Style.buttonDefaultStyle(on),
+        style: Style.buttonDefaultStyle,
         action: () => section.auto.set(!section.auto.get()),
         icon: Icons.sectionBoxAuto,
       },
       {
-        id: Ids.buttonSectionBoxSettings,
+        id: Ids.sectioningSettings,
         tip: 'Section Settings',
         enabled: () => section.enable.get() && isTrue(settings.sectioningSettings),
         isOn: () => section.showOffsetPanel.get(),
-        style: (on) => Style.buttonDefaultStyle(on),
+        style: Style.buttonDefaultStyle,
         action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
         icon: Icons.slidersHoriz,
       },
@@ -114,19 +115,17 @@ export type ControlBarCursorSettings = {
  */
 function controlBarPointer(
   viewer: Core.Webgl.Viewer,
-  camera: CameraRef,
   settings: ControlBarCursorSettings,
-  section: SectionBoxRef
 ): ControlBar.IControlBarSection {
   const pointer = getPointerState(viewer);
 
   return {
-    id: Ids.sectionInputs,
+    id: Ids.cursorSpan,
     enable: () => anyUiCursorButton(settings),
     style: Style.sectionDefaultStyle,
     buttons: [
       {
-        id: Ids.buttonCameraOrbit,
+        id: Ids.cursorOrbit,
         enabled: () => isTrue(settings.cursorOrbit),
         tip: 'Orbit',
         action: () => pointer.onButton(PointerMode.ORBIT),
@@ -135,7 +134,7 @@ function controlBarPointer(
         style: Style.buttonDefaultStyle,
       },
       {
-        id: Ids.buttonCameraLook,
+        id: Ids.cursorLook,
         enabled: () => isTrue(settings.cursorLookAround),
         tip: 'Look Around',
         action: () => pointer.onButton(PointerMode.LOOK),
@@ -144,7 +143,7 @@ function controlBarPointer(
         style: Style.buttonDefaultStyle,
       },
       {
-        id: Ids.buttonCameraPan,
+        id: Ids.cursorPan,
         enabled: () => isTrue(settings.cursorPan),
         tip: 'Pan',
         action: () => pointer.onButton(PointerMode.PAN),
@@ -153,7 +152,7 @@ function controlBarPointer(
         style: Style.buttonDefaultStyle,
       },
       {
-        id: Ids.buttonCameraZoom,
+        id: Ids.cursorZoom,
         enabled: () => isTrue(settings.cursorZoom),
         tip: 'Zoom',
         action: () => pointer.onButton(PointerMode.ZOOM),
@@ -166,7 +165,7 @@ function controlBarPointer(
 }
 
 export type ControlBarMeasureSettings = {
-  measuringMode: UserBoolean
+  measureEnable: UserBoolean
 }
 
 export function controlBarMeasure(
@@ -174,13 +173,13 @@ export function controlBarMeasure(
   settings: ControlBarMeasureSettings
 ){
   return {
-    id: Ids.sectionActions,
+    id: Ids.measureSpan,
     enable: () => true,
     style: Style.sectionDefaultStyle,
     buttons: [
       {
-        id: Ids.buttonMeasure,
-        enabled: () => isTrue(settings.measuringMode),
+        id: Ids.measureEnable,
+        enabled: () => isTrue(settings.measureEnable),
         isOn: () => measure.active,
         tip: 'Measuring Mode',
         action: () => measure.toggle(),
@@ -190,70 +189,79 @@ export function controlBarMeasure(
     ]
   }
 }
-
-export function controlBarSettingsUltra(
+// Shared misc button builders
+function createMiscSettingsButton(
   side: SideState,
-  settings: UltraSettings): ControlBar.IControlBarSection {
+  settings: AnySettings
+) {
+  return {
+    id: Ids.miscSettings,
+    enabled: () => isTrue(settings.ui.miscSettings),
+    tip: 'Settings',
+    action: () => side.toggleContent('settings'),
+    icon: Icons.settings,
+    style: Style.buttonDefaultStyle
+  };
+}
 
+function createMiscHelpButton(
+  modal : ModalHandle,
+  settings: AnySettings,
+){
+  return {
+    id: Ids.miscHelp,
+    enabled: () => isTrue(settings.ui.miscHelp),
+    tip: 'Help',
+    action: () => modal.help(true),
+    icon: Icons.help,
+    style: Style.buttonDefaultStyle
+  };
+}
+
+// Ultra version
+export function controlBarMiscUltra(
+  modal : ModalHandle,
+  side: SideState,
+  settings: UltraSettings
+): ControlBar.IControlBarSection {
   return {
-    id: Ids.sectionSettings,
-    enable: () => isTrue(settings.ui.settings),
+    id: Ids.miscSpan,
+    enable: () => anyUltraMiscButton(settings),
     style: Style.sectionDefaultStyle,
     buttons: [
-      {
-        id: Ids.buttonSettings,
-        enabled: () => isTrue(settings.ui.settings),
-        tip: 'Settings',
-        action: () => side.toggleContent('settings'),
-        icon: Icons.settings,
-        style: Style.buttonDefaultStyle
-      },
+      createMiscSettingsButton(side, settings),
+      createMiscHelpButton(modal, settings)
     ]
-  }
+  };
 }
 
-function controlBarSettings(
+// WebGL version
+function controlBarMisc(
   modal: ModalHandle,
   side: SideState,
-  settings: WebglSettings): ControlBar.IControlBarSection {
+  settings: WebglSettings
+): ControlBar.IControlBarSection {
   const fullScreen = getFullScreenState();
 
   return {
-    id: Ids.sectionSettings,
-    enable: () => anyUiSettingButton(settings),
+    id: Ids.miscSpan,
+    enable: () => anyWebglMiscButton(settings),
     style: Style.sectionDefaultStyle,
     buttons: [
       {
-        id: Ids.buttonProjectInspector,
-        enabled: () => isTrue(settings.ui.projectInspector) && (
-          isTrue(settings.ui.bimTreePanel) ||
-          isTrue(settings.ui.bimInfoPanel)
-        ),
+        id: Ids.miscInspector,
+        enabled: () => showBimButton(settings),
         tip: 'Project Inspector',
         action: () => side.toggleContent('bim'),
         icon: Icons.treeView,
         style: Style.buttonDefaultStyle
       },
+      createMiscSettingsButton(side, settings),
+      createMiscHelpButton(modal, settings),
       {
-        id: Ids.buttonSettings,
-        enabled: () => isTrue(settings.ui.settings),
-        tip: 'Settings',
-        action: () => side.toggleContent('settings'),
-        icon: Icons.settings,
-        style: Style.buttonDefaultStyle
-      },
-      {
-        id: Ids.buttonHelp,
-        enabled: () => isTrue(settings.ui.help),
-        tip: 'Help',
-        action: () => modal.help(true),
-        icon: Icons.help,
-        style: Style.buttonDefaultStyle
-      },
-      {
-        id: Ids.buttonMaximize,
+        id: Ids.miscMaximize,
         enabled: () =>
-          isTrue(settings.ui.maximise) &&
+          isTrue(settings.ui.miscMaximise) &&
           settings.capacity.canGoFullScreen,
         tip: fullScreen.get() ? 'Minimize' : 'Fullscreen',
         action: () => fullScreen.toggle(),
@@ -261,7 +269,7 @@ function controlBarSettings(
         style: Style.buttonDefaultStyle
       }
     ]
-  }
+  };
 }
 
 export type ControlBarCameraSettings ={
@@ -272,12 +280,12 @@ export type ControlBarCameraSettings ={
 
 export function controlBarCamera(camera: CameraRef, settings: ControlBarCameraSettings): ControlBar.IControlBarSection {
   return {
-    id: Ids.sectionCamera,
+    id: Ids.cameraSpan,
     enable: () => true,
     style: Style.sectionDefaultStyle,
     buttons: [
       {
-        id: Ids.buttonCameraAuto,
+        id: Ids.cameraAuto,
         enabled: () => isTrue(settings.cameraAuto),
         tip: 'Auto Camera',
         isOn: () => camera.autoCamera.get(),
@@ -286,7 +294,7 @@ export function controlBarCamera(camera: CameraRef, settings: ControlBarCameraSe
         style: Style.buttonDefaultStyle,
       },
       {
-        id: Ids.buttonCameraFrameSelection,
+        id: Ids.cameraFrameSelection,
         enabled: () => isTrue(settings.cameraFrameSelection),
         tip: 'Frame Selection',
         action: () => camera.frameSelection.call(),
@@ -295,7 +303,7 @@ export function controlBarCamera(camera: CameraRef, settings: ControlBarCameraSe
         style: Style.buttonDefaultStyle,
       },
       {
-        id: Ids.buttonCameraFrameScene,
+        id: Ids.cameraFrameScene,
         enabled: () => isTrue(settings.cameraFrameScene),
         tip: 'Frame All',
         action: () => camera.frameScene.call(),
@@ -308,7 +316,6 @@ export function controlBarCamera(camera: CameraRef, settings: ControlBarCameraSe
 }
 
 export type ControlBarVisibilitySettings = {
-    visibilityEnable: UserBoolean
     visibilityClearSelection: UserBoolean
     visibilityShowAll: UserBoolean
     visibilityToggle: UserBoolean
@@ -322,12 +329,12 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
   const someVisible = adapter.hasVisibleSelection() || !adapter.hasHiddenSelection()  
 
   return {
-    id: Ids.sectionSelection,
+    id: Ids.visibilitySpan,
     enable: () => true,
-    style: `${Style.sectionDefaultStyle}`,
+    style: Style.sectionDefaultStyle,
     buttons: [
       {
-        id: Ids.buttonClearSelection,
+        id: Ids.visibilityClearSelection,
         enabled: () => isTrue(settings.visibilityClearSelection),
         tip: 'Clear Selection',
         action: () => adapter.clearSelection(),
@@ -336,7 +343,7 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
         style: Style.buttonDisableDefaultStyle,
       },
       {
-        id: Ids.buttonShowAll,
+        id: Ids.visibilityShowAll,
         tip: 'Show All',
         enabled: () => isTrue(settings.visibilityShowAll),
         action: () =>  adapter.showAll(),
@@ -346,7 +353,7 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
       },
 
       {
-        id: Ids.buttonHideSelection,
+        id: Ids.visibilityHideSelection,
         enabled: () => someVisible && isTrue(settings.visibilityToggle),
         tip: 'Hide Selection',
         action: () => adapter.hideSelection(),
@@ -355,7 +362,7 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
         style: Style.buttonDisableStyle,
       },
       {
-        id: Ids.buttonShowSelection,
+        id: Ids.visibilityShowSelection,
         enabled: () => !someVisible && isTrue(settings.visibilityToggle),
         tip: 'Show Selection',
         action: () => adapter.showSelection(),
@@ -364,7 +371,7 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
         style: Style.buttonDisableStyle,
       },
       {
-        id: Ids.buttonIsolateSelection,
+        id: Ids.visibilityIsolateSelection,
         enabled: () => isTrue(settings.visibilityIsolate),
         tip: 'Isolate Selection',
         action: () => adapter.isolateSelection(),
@@ -373,7 +380,7 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
         style: Style.buttonDisableStyle,
       },
       {
-        id: Ids.buttonAutoIsolate,
+        id: Ids.visibilityAutoIsolate,
         enabled: () => isTrue(settings.visibilityAutoIsolate),
         tip: 'Auto Isolate',
         action: () => isolation.autoIsolate.set(!isolation.autoIsolate.get()),
@@ -381,7 +388,7 @@ export function controlBarVisibility(isolation: IsolationRef, settings: ControlB
         icon: Icons.autoIsolate,
       },
       {
-        id: Ids.buttonIsolationSettings,
+        id: Ids.visibilitySettings,
         enabled: () => isTrue(settings.visibilitySettings),
         tip: 'Isolation Settings',
         action: () => isolation.showPanel.set(!isolation.showPanel.get()),
@@ -410,17 +417,26 @@ export function useControlBar(
 
   // Apply user customization (note that pointerSection is added twice per original design)
   let controlBarSections = [
-    controlBarPointer(viewer, camera, settings.ui, section),
+    controlBarPointer(viewer, settings.ui),
     controlBarCamera(camera, settings.ui),
     controlBarVisibility(isolationRef, settings.ui),
     controlBarMeasure(measure, settings.ui),
     controlBarSectionBox(section, viewer.selection.any(), settings.ui),
-    controlBarSettings(modal, side, settings)
+    controlBarMisc(modal, side, settings)
   ];
   controlBarSections = customization?.(controlBarSections) ?? controlBarSections;
   return controlBarSections;
 }
 
+
+function showBimButton(settings: WebglSettings){
+if(isFalse(settings.ui.miscProjectInspector)) return false
+  if(isTrue(settings.ui.panelBimTree) ) return true
+  if(isTrue(settings.ui.panelBimInfo) ) return true
+  return false
+}
+
+
 /**
  * Checks if any cursor-related UI buttons are enabled
  * @param {Settings} settings - The viewer settings to check
@@ -440,11 +456,18 @@ function anyUiCursorButton (settings: ControlBarCursorSettings) {
  * @param {Settings} settings - The viewer settings to check
  * @returns {boolean} True if any settings buttons are enabled
  */
-export function anyUiSettingButton (settings: WebglSettings) {
+export function anyWebglMiscButton (settings: WebglSettings) {
   return (
-    isTrue(settings.ui.projectInspector) ||
-    isTrue(settings.ui.settings) ||
-    isTrue(settings.ui.help) ||
-    isTrue(settings.ui.maximise)
+    isTrue(settings.ui.miscProjectInspector) ||
+    isTrue(settings.ui.miscSettings) ||
+    isTrue(settings.ui.miscHelp) ||
+    isTrue(settings.ui.miscMaximise)
   )
-}
\ No newline at end of file
+}
+
+export function anyUltraMiscButton (settings: UltraSettings) {
+  return (
+    isTrue(settings.ui.miscSettings) ||
+    isTrue(settings.ui.miscHelp)
+  )
+}
diff --git a/src/vim-web/react-viewers/ultra/controlBar.ts b/src/vim-web/react-viewers/ultra/controlBar.ts
index faeda5b6..6c144f35 100644
--- a/src/vim-web/react-viewers/ultra/controlBar.ts
+++ b/src/vim-web/react-viewers/ultra/controlBar.ts
@@ -1,8 +1,9 @@
 
 import * as Core from '../../core-viewers/ultra'
 import { ControlBarCustomization } from '../controlbar/controlBar'
+import { ModalHandle } from '../panels'
 import { CameraRef } from '../state/cameraState'
-import { controlBarCamera, controlBarSectionBox, controlBarSettingsUltra, controlBarVisibility } from '../state/controlBarState'
+import { controlBarCamera, controlBarSectionBox, controlBarMiscUltra, controlBarVisibility } from '../state/controlBarState'
 import { SectionBoxRef } from '../state/sectionBoxState'
 import { IsolationRef } from '../state/sharedIsolation'
 import { SideState } from '../state/sideState'
@@ -15,13 +16,14 @@ export function useUltraControlBar (
   camera: CameraRef,
   settings: UltraSettings,
   side: SideState,
+  modal: ModalHandle,
   customization: ControlBarCustomization | undefined
 ) {
   let bar = [
     controlBarCamera(camera, settings.ui),
     controlBarVisibility(isolation, settings.ui),
     controlBarSectionBox(section, viewer.selection.any(), settings.ui),
-    controlBarSettingsUltra(side, settings)
+    controlBarMiscUltra(modal, side, settings)
   ]
   bar = customization?.(bar) ?? bar
   return bar
diff --git a/src/vim-web/react-viewers/ultra/settings.ts b/src/vim-web/react-viewers/ultra/settings.ts
index 9cadd585..f3d8a01f 100644
--- a/src/vim-web/react-viewers/ultra/settings.ts
+++ b/src/vim-web/react-viewers/ultra/settings.ts
@@ -9,8 +9,13 @@ export type UltraSettings = {
       ControlBarCursorSettings &
       ControlBarSectionBoxSettings &
       ControlBarVisibilitySettings & {
+      // Panels
+      panelLogo: UserBoolean
+      panelControlBar: UserBoolean
       
-      settings: UserBoolean
+      // Control bar - misc
+      miscSettings: UserBoolean
+      miscHelp: UserBoolean
   }
 }
 
@@ -18,6 +23,10 @@ export function getDefaultUltraSettings(): UltraSettings {
   return {
 
     ui: {
+      // panels
+      panelLogo: true,
+      panelControlBar: true,
+
       // Control bar - cursors
       cursorOrbit: true,
       cursorLookAround: true,
@@ -38,7 +47,6 @@ export function getDefaultUltraSettings(): UltraSettings {
       sectioningSettings : true,
 
       // Control bar - Visibility
-      visibilityEnable: true,
       visibilityClearSelection: true,
       visibilityShowAll: true,
       visibilityToggle: true,
@@ -46,7 +54,9 @@ export function getDefaultUltraSettings(): UltraSettings {
       visibilityAutoIsolate: true,
       visibilitySettings: true,
 
-      settings: true
+      // Control bar - misc
+      miscSettings: true,
+      miscHelp: true,
     }
   }
 }
\ No newline at end of file
diff --git a/src/vim-web/react-viewers/ultra/settingsPanel.ts b/src/vim-web/react-viewers/ultra/settingsPanel.ts
index 9fd50883..279e0ef2 100644
--- a/src/vim-web/react-viewers/ultra/settingsPanel.ts
+++ b/src/vim-web/react-viewers/ultra/settingsPanel.ts
@@ -8,15 +8,22 @@ export function getControlBarUltraSettings(): SettingsItem<UltraSettings>[] {
   return [
     {
       type: 'subtitle',
-      key: SettingsPanelKeys.ControlBarSettingsSubtitle,
+      key: SettingsPanelKeys.ControlBarMiscSubtitle,
       title: 'Control Bar - Settings',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
+      key: SettingsPanelKeys.ControlBarMiscShowSettingsButtonToggle,
       label: 'Settings',
-      getter: (s) => s.ui.settings,
-      setter: (s, v) => (s.ui.settings = v),
+      getter: (s) => s.ui.miscSettings,
+      setter: (s, v) => (s.ui.miscSettings = v),
+    },
+    {
+      type: 'toggle',
+      key: SettingsPanelKeys.ControlBarMiscShowHelpButtonToggle,
+      label: 'Help',
+      getter: (s) => s.ui.miscHelp,
+      setter: (s, v) => (s.ui.miscHelp = v),
     },
   ]
 }
diff --git a/src/vim-web/react-viewers/ultra/viewer.tsx b/src/vim-web/react-viewers/ultra/viewer.tsx
index 2c7039d1..2ccc19c1 100644
--- a/src/vim-web/react-viewers/ultra/viewer.tsx
+++ b/src/vim-web/react-viewers/ultra/viewer.tsx
@@ -27,8 +27,10 @@ import { GenericPanelHandle } from '../generic/genericPanel'
 import { ControllablePromise } from '../../utils'
 import { SettingsPanel } from '../settings/settingsPanel'
 import { SidePanelMemo } from '../panels/sidePanel'
-import { getDefaultUltraSettings, PartialUltraSettings } from './settings'
+import { getDefaultUltraSettings, PartialUltraSettings, UltraSettings } from './settings'
 import { getUltraSettingsContent } from './settingsPanel'
+import { SettingsCustomizer } from '../settings/settingsItem'
+import { isTrue } from '../settings/userBoolean'
 
 
 /**
@@ -104,6 +106,7 @@ export function Viewer (props: {
     camera,
     settings.value,
     side,
+    modalHandle.current,
     _ =>_
   )
   
@@ -133,6 +136,11 @@ export function Viewer (props: {
       isolation: isolationRef,
       sectionBox: sectionBoxRef,
       camera,
+      settings: {
+        update : settings.update,
+        register : settings.register,
+        customize : (c: SettingsCustomizer<UltraSettings>) => settings.customizer.set(c)
+      },
       get isolationPanel(){
         return isolationPanelHandle.current
       },
@@ -166,11 +174,11 @@ export function Viewer (props: {
   />
   <RestOfScreen side={side} content={() => {
     return <>
-    {whenTrue(true, <LogoMemo/>)}
+    {whenTrue(settings.value.ui.panelLogo, <LogoMemo/>)}
     <Overlay canvas={props.core.viewport.canvas}/>
     <ControlBar
       content={controlBarCustom(controlBar)}
-      show={true}
+      show={isTrue(settings.value.ui.panelControlBar)}
     />
     <SectionBoxPanel ref={sectionBoxPanelHandle} state={sectionBoxRef}/>
     <IsolationPanel ref={isolationPanelHandle} state={isolationRef} transparency={false}/>
diff --git a/src/vim-web/react-viewers/ultra/viewerRef.ts b/src/vim-web/react-viewers/ultra/viewerRef.ts
index df5eade2..99cac71a 100644
--- a/src/vim-web/react-viewers/ultra/viewerRef.ts
+++ b/src/vim-web/react-viewers/ultra/viewerRef.ts
@@ -6,6 +6,8 @@ import { SectionBoxRef } from '../state/sectionBoxState';
 import { IsolationRef } from '../state/sharedIsolation';
 import { ControlBarRef } from '../controlbar';
 import { GenericPanelHandle } from '../generic/';
+import { SettingsRef } from '../webgl';
+import { UltraSettings } from './settings';
 
 export type ViewerRef = {
   /**
@@ -34,6 +36,8 @@ export type ViewerRef = {
   camera: CameraRef
 
   isolation: IsolationRef
+
+  settings: SettingsRef<UltraSettings>
   
   /**
    * API to interact with the isolation panel.
diff --git a/src/vim-web/react-viewers/webgl/loading.ts b/src/vim-web/react-viewers/webgl/loading.ts
index 7edecba9..fc71ccbd 100644
--- a/src/vim-web/react-viewers/webgl/loading.ts
+++ b/src/vim-web/react-viewers/webgl/loading.ts
@@ -7,7 +7,7 @@ import * as Core from '../../core-viewers'
 import { LoadRequest } from '../helpers/loadRequest'
 import { ModalHandle } from '../panels/modal'
 import { UltraSuggestion } from '../panels/loadingBox'
-import { Settings } from '../settings'
+import { WebglSettings } from './settings'
 
 type AddSettings = {
   /**
@@ -39,7 +39,7 @@ export class ComponentLoader {
   private _modal: React.RefObject<ModalHandle>
   private _addLink : boolean = false
 
-  constructor (viewer : Core.Webgl.Viewer, modal: React.RefObject<ModalHandle>, settings: Settings) {
+  constructor (viewer : Core.Webgl.Viewer, modal: React.RefObject<ModalHandle>, settings: WebglSettings) {
     this._viewer = viewer
     this._modal = modal
     // TODO: Enable this when we are ready to support it
diff --git a/src/vim-web/react-viewers/webgl/settings.ts b/src/vim-web/react-viewers/webgl/settings.ts
index 81a9f7d1..58bd49b9 100644
--- a/src/vim-web/react-viewers/webgl/settings.ts
+++ b/src/vim-web/react-viewers/webgl/settings.ts
@@ -22,22 +22,22 @@ export type WebglSettings = {
       ControlBarMeasureSettings & {
     
     // panels
-    logo: UserBoolean
-    bimTreePanel: UserBoolean
-    bimInfoPanel: UserBoolean
-    performance: UserBoolean
-    axesPanel: UserBoolean
-    controlBar: UserBoolean
+    panelLogo: UserBoolean
+    panelBimTree: UserBoolean
+    panelBimInfo: UserBoolean
+    panelPerformance: UserBoolean
+    panelAxes: UserBoolean
+    panelControlBar: UserBoolean
 
     // axesPanel
-    orthographic: UserBoolean
-    resetCamera: UserBoolean
+    axesOrthographic: UserBoolean
+    axesHome: UserBoolean
 
     // Control bar - settings
-    projectInspector: UserBoolean
-    settings: UserBoolean
-    help: UserBoolean
-    maximise: UserBoolean
+    miscProjectInspector: UserBoolean
+    miscSettings: UserBoolean
+    miscHelp: UserBoolean
+    miscMaximise: UserBoolean
   }
 }
 
@@ -56,18 +56,16 @@ export function getDefaultSettings(): WebglSettings {
       canReadLocalStorage: true
     },
     ui: {
-      logo: true,
-      performance: false,
-      bimTreePanel: true,
-      bimInfoPanel: true,
+      panelLogo: true,
+      panelPerformance: false,
+      panelBimTree: true,
+      panelBimInfo: true,
+      panelAxes: true,
+      panelControlBar: true,
   
-      // axesPanel
-      axesPanel: true,
-      orthographic: true,
-      resetCamera: true,
-  
-      // Control bar
-      controlBar: true,
+      axesOrthographic: true,
+      axesHome: true,
+      
       // Control bar - cursors
       cursorOrbit: true,
       cursorLookAround: true,
@@ -87,10 +85,9 @@ export function getDefaultSettings(): WebglSettings {
       sectioningAuto : true,
       sectioningSettings : true,
 
-      measuringMode: true,
+      measureEnable: true,
 
       // Control bar - Visibility
-      visibilityEnable: true,
       visibilityClearSelection: true,
       visibilityShowAll: true,
       visibilityToggle: true,
@@ -99,10 +96,10 @@ export function getDefaultSettings(): WebglSettings {
       visibilitySettings: true,
   
       // Control bar - settings
-      projectInspector: true,
-      settings: true,
-      help: true,
-      maximise: true
+      miscProjectInspector: true,
+      miscSettings: true,
+      miscHelp: true,
+      miscMaximise: true
     }
   }
 }
diff --git a/src/vim-web/react-viewers/webgl/settingsPanel.ts b/src/vim-web/react-viewers/webgl/settingsPanel.ts
index 914bc7f7..8f6faee5 100644
--- a/src/vim-web/react-viewers/webgl/settingsPanel.ts
+++ b/src/vim-web/react-viewers/webgl/settingsPanel.ts
@@ -10,36 +10,36 @@ export function getControlBarVariousSettings(): SettingsItem<WebglSettings>[] {
   return [
     {
       type: 'subtitle',
-      key: SettingsPanelKeys.ControlBarSettingsSubtitle,
+      key: SettingsPanelKeys.ControlBarMiscSubtitle,
       title: 'Control Bar - Settings',
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarSettingsShowProjectInspectorButtonToggle,
+      key: SettingsPanelKeys.ControlBarMiscShowProjectInspectorButtonToggle,
       label: 'Project Inspector',
-      getter: (s) => s.ui.projectInspector,
-      setter: (s, v) => (s.ui.projectInspector = v),
+      getter: (s) => s.ui.miscProjectInspector,
+      setter: (s, v) => (s.ui.miscProjectInspector = v),
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
+      key: SettingsPanelKeys.ControlBarMiscShowSettingsButtonToggle,
       label: 'Settings',
-      getter: (s) => s.ui.settings,
-      setter: (s, v) => (s.ui.settings = v),
+      getter: (s) => s.ui.miscSettings,
+      setter: (s, v) => (s.ui.miscSettings = v),
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarSettingsShowHelpButtonToggle,
+      key: SettingsPanelKeys.ControlBarMiscShowHelpButtonToggle,
       label: 'Help',
-      getter: (s) => s.ui.help,
-      setter: (s, v) => (s.ui.help = v),
+      getter: (s) => s.ui.miscHelp,
+      setter: (s, v) => (s.ui.miscHelp = v),
     },
     {
       type: 'toggle',
-      key: SettingsPanelKeys.ControlBarSettingsShowMaximiseButtonToggle,
+      key: SettingsPanelKeys.ControlBarMiscShowMaximiseButtonToggle,
       label: 'Maximise',
-      getter: (s) => s.ui.maximise,
-      setter: (s, v) => (s.ui.maximise = v),
+      getter: (s) => s.ui.miscMaximise,
+      setter: (s, v) => (s.ui.miscMaximise = v),
     },
   ]
 }
@@ -57,43 +57,43 @@ export function getPanelsVisibilitySettings(): SettingsItem<WebglSettings>[] {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowLogoToggle,
       label: 'Logo',
-      getter: (s) => s.ui.logo,
-      setter: (s, v) => (s.ui.logo = v),
+      getter: (s) => s.ui.panelLogo,
+      setter: (s, v) => (s.ui.panelLogo = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowBimTreeToggle,
       label: 'Bim Tree',
-      getter: (s) => s.ui.bimTreePanel,
-      setter: (s, v) => (s.ui.bimTreePanel = v),
+      getter: (s) => s.ui.panelBimTree,
+      setter: (s, v) => (s.ui.panelBimTree = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowBimInfoToggle,
       label: 'Bim Info',
-      getter: (s) => s.ui.bimInfoPanel,
-      setter: (s, v) => (s.ui.bimInfoPanel = v),
+      getter: (s) => s.ui.panelBimInfo,
+      setter: (s, v) => (s.ui.panelBimInfo = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowAxesPanelToggle,
       label: 'Axes',
-      getter: (s) => s.ui.axesPanel,
-      setter: (s, v) => (s.ui.axesPanel = v),
+      getter: (s) => s.ui.panelAxes,
+      setter: (s, v) => (s.ui.panelAxes = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.PanelsShowPerformancePanelToggle,
       label: 'Performance',
-      getter: (s) => s.ui.performance,
-      setter: (s, v) => (s.ui.performance = v),
+      getter: (s) => s.ui.panelPerformance,
+      setter: (s, v) => (s.ui.panelPerformance = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.ControlBarShowControlBarToggle,
       label: 'Control Bar',
-      getter: (s) => s.ui.controlBar,
-      setter: (s, v) => (s.ui.controlBar = v),
+      getter: (s) => s.ui.panelControlBar,
+      setter: (s, v) => (s.ui.panelControlBar = v),
     },
   ]
 }
@@ -132,15 +132,15 @@ function getAxesPanelSettings(): SettingsItem<WebglSettings>[] {
       type: 'toggle',
       key: SettingsPanelKeys.AxesShowOrthographicButtonToggle,
       label: 'Orthographic Camera',
-      getter: (s) => s.ui.orthographic,
-      setter: (s, v) => (s.ui.orthographic = v),
+      getter: (s) => s.ui.axesOrthographic,
+      setter: (s, v) => (s.ui.axesOrthographic = v),
     },
     {
       type: 'toggle',
       key: SettingsPanelKeys.AxesShowResetCameraButtonToggle,
       label: 'Reset Camera',
-      getter: (s) => s.ui.resetCamera,
-      setter: (s, v) => (s.ui.resetCamera = v),
+      getter: (s) => s.ui.axesHome,
+      setter: (s, v) => (s.ui.axesHome = v),
     },
   ]
 }
@@ -156,8 +156,8 @@ export function getControlBarMeasureSettings(): SettingsItem<WebglSettings>[] {
       type: 'toggle',
       key: SettingsPanelKeys.ControlBarToolsShowMeasuringModeButtonToggle,
       label: 'Enable',
-      getter: (s) => s.ui.measuringMode,
-      setter: (s, v) => (s.ui.measuringMode = v),
+      getter: (s) => s.ui.measureEnable,
+      setter: (s, v) => (s.ui.measureEnable = v),
     },
   ]
 }
@@ -185,7 +185,7 @@ export function applyWebglSettings (settings: WebglSettings) {
   // Show/Hide performance gizmo
   const performance = document.getElementsByClassName('vim-performance-div')[0]
   if (performance) {
-    if (isTrue(settings.ui.performance)) {
+    if (isTrue(settings.ui.panelPerformance)) {
       performance.classList.remove('vc-hidden')
     } else {
       performance.classList.add('vc-hidden')
diff --git a/src/vim-web/react-viewers/webgl/viewer.tsx b/src/vim-web/react-viewers/webgl/viewer.tsx
index 265cb38b..0ded9cc0 100644
--- a/src/vim-web/react-viewers/webgl/viewer.tsx
+++ b/src/vim-web/react-viewers/webgl/viewer.tsx
@@ -123,8 +123,8 @@ export function Viewer (props: {
   useViewerInput(props.viewer.inputs, camera)
 
   const side = useSideState(
-    isTrue(settings.value.ui.bimTreePanel) ||
-    isTrue(settings.value.ui.bimInfoPanel),
+    isTrue(settings.value.ui.panelBimTree) ||
+    isTrue(settings.value.ui.panelBimInfo),
     Math.min(props.container.root.clientWidth * 0.25, 340)
   )
   const [contextMenu, setcontextMenu] = useState<ContextMenuCustomization>()
@@ -239,10 +239,10 @@ export function Viewer (props: {
       <RestOfScreen side={side} content={() => {
         return <>
         <Overlay canvas={props.viewer.viewport.canvas}></Overlay>
-        {whenTrue(settings.value.ui.logo, <LogoMemo/>)}
+        {whenTrue(settings.value.ui.panelLogo, <LogoMemo/>)}
         <ControlBar
           content={controlBar}
-          show={isTrue(settings.value.ui.controlBar)}
+          show={isTrue(settings.value.ui.panelControlBar)}
         />
         <SectionBoxPanel ref={sectionBoxPanelHandle} state={sectionBoxRef}/>
         <IsolationPanel ref={isolationPanelHandle} state={isolationRef} transparency={true}/>
diff --git a/src/vim-web/react-viewers/webgl/viewerRef.ts b/src/vim-web/react-viewers/webgl/viewerRef.ts
index c4bcc862..0b561457 100644
--- a/src/vim-web/react-viewers/webgl/viewerRef.ts
+++ b/src/vim-web/react-viewers/webgl/viewerRef.ts
@@ -4,7 +4,7 @@
 
 import * as Core from '../../core-viewers'
 import { ContextMenuRef } from '../panels/contextMenu'
-import { Settings } from '../settings/anySettings'
+import { AnySettings } from '../settings/anySettings'
 import { CameraRef } from '../state/cameraState'
 import { Container } from '../container'
 import { BimInfoPanelRef } from '../bim/bimInfoData'
@@ -15,10 +15,11 @@ import { SectionBoxRef } from '../state/sectionBoxState'
 import { IsolationRef } from '../state/sharedIsolation'
 import { GenericPanelHandle } from '../generic'
 import { SettingsItem } from '../settings/settingsItem'
+import { WebglSettings } from './settings'
 /**
 * Settings API managing settings applied to the viewer.
 */
-export type SettingsRef = {
+export type SettingsRef<T extends AnySettings> = {
   // Double lambda is required to prevent react from using reducer pattern
   // https://stackoverflow.com/questions/59040989/usestate-with-a-lambda-invokes-the-lambda-when-set
 
@@ -26,19 +27,19 @@ export type SettingsRef = {
    * Allows updating settings by providing a callback function.
    * @param updater A function that updates the current settings.
    */
-  update : (updater: (settings: Settings) => void) => void
+  update : (updater: (settings: T) => void) => void
 
   /**
    * Registers a callback function to be notified when settings are updated.
    * @param callback A function to be called when settings are updated, receiving the updated settings.
    */
-  register : (callback: (settings: Settings) => void) => void
+  register : (callback: (settings: T) => void) => void
 
   /**
    * Customizes the settings panel by providing a customizer function.
    * @param customizer A function that modifies the settings items.
    */
-  customize : (customizer: (items: SettingsItem[]) => SettingsItem[]) => void
+  customize : (customizer: (items: SettingsItem<T>[]) => SettingsItem<T>[]) => void
 
 }
 
@@ -104,7 +105,7 @@ export type ViewerRef = {
   /**
    * Settings API managing settings applied to the viewer.
    */
-  settings: SettingsRef
+  settings: SettingsRef<WebglSettings>
 
   /**
    * Message API to interact with the loading box.

From 2679298a36eff993b0eb87c153e50e6670982c0a Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Tue, 18 Nov 2025 13:25:17 -0500
Subject: [PATCH 6/8] reverted test code in main

---
 src/main.tsx                                  | 82 ++++---------------
 .../react-viewers/state/controlBarState.tsx   |  2 +-
 2 files changed, 18 insertions(+), 66 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 5455fae7..11310a6d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,6 @@
 import React, { MutableRefObject, useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import * as VIM from './vim-web'
-import * as THREE from 'three'
-import { Icons } from "./vim-web/react-viewers";
-import { useStateRef } from "./vim-web/react-viewers/helpers/reactUtils";
 
 type ViewerRef = VIM.React.Webgl.ViewerRef | VIM.React.Ultra.ViewerRef
 
@@ -22,57 +19,20 @@ console.log("Root container found", container);
 // Render your App
 root.render(
   //<React.StrictMode>
-  <App />
+    <App />
   //</React.StrictMode>
 );
 
 function App() {
+
   const div = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<ViewerRef>()
-
-  var customToggle = useStateRef(false)
-  var customValue = useStateRef(10)
-
   useEffect(() => {
-    if (window.location.pathname.includes('ultra')) {
-      createUltra(viewerRef, div.current!)
+    if(window.location.pathname.includes('ultra')){
+      createUltra(viewerRef, div.current!) 
     }
-    else {
-      createWebgl(viewerRef, div.current!).then((viewer) => {
-        viewer.settings.customize((s) => [
-          {
-            type: 'subtitle',
-            key: 'custom-subtitle',
-            title: 'Custom Section'
-          },
-          {
-            type: 'toggle',
-            key: 'custom-toggle',
-            label: 'Custom Toggle',
-            getter: (s) =>  customToggle.get(),
-            setter: (s, v) => (customToggle.set(!v))
-          },
-          {
-            type: 'box',
-            key: 'custom-box',
-            label: 'Custom Box',
-            info: 'closest even number',
-            transform: (n) => Math.round(n / 2) * 2,
-            getter: (s) => customValue.get(),
-            setter: (s, v) => (customValue.set(v))
-          },
-          {
-            type: 'element',
-            key: 'custom-element',
-            // example custom text
-            element: (
-              <div className="vc-m-2 vc-p-2 vc-border vc-border-gray-medium vc-rounded vc-bg-gray-light">
-                This is a custom element added to the settings panel.
-              </div>)
-          },
-          ...s // keep all exising settings
-        ])
-      })
+    else{
+      createWebgl(viewerRef, div.current!)
     }
 
     return () => {
@@ -81,46 +41,35 @@ function App() {
   }, [])
 
   return (
-    <div ref={div} className='vc-inset-0 vc-absolute' />
+    <div ref={div} className='vc-inset-0 vc-absolute'/>
   )
 }
 
-async function createWebgl(viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
+async function createWebgl (viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
   const viewer = await VIM.React.Webgl.createViewer(div)
   viewerRef.current = viewer
   globalThis.viewer = viewer // for testing in browser console
 
   const url = getPathFromUrl() ?? 'https://storage.cdn.vimaec.com/samples/residence.v1.2.75.vim'
   const request = viewer.loader.request(
-    { url },
+    { url }, 
   )
-
   const result = await request.getResult()
   if (result.isSuccess()) {
     viewer.loader.add(result.result)
     viewer.camera.frameScene.call()
   }
-
-  return viewer
 }
 
-async function createUltra(viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
-  const viewer = await VIM.React.Ultra.createViewer(div,
-    {ui:{
-      sectioningEnable: true,
-      
-    }}
-  )
-  viewer.camera.autoCamera.set(true) // Enable auto camera framing
-  viewer.isolation.autoIsolate.set(true) // Enable auto isolation
-
+async function createUltra (viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivElement) {
+  const viewer = await VIM.React.Ultra.createViewer(div)
   await viewer.core.connect()
   viewerRef.current = viewer
   globalThis.viewer = viewer // for testing in browser console
 
   const url = getPathFromUrl() ?? 'https://storage.cdn.vimaec.com/samples/residence.v1.2.75.vim'
   const request = viewer.load(
-    { url },
+    { url }, 
   )
   const result = await request.getResult()
   if (result.isSuccess) {
@@ -128,7 +77,10 @@ async function createUltra(viewerRef: MutableRefObject<ViewerRef>, div: HTMLDivE
   }
 }
 
-function getPathFromUrl() {
+
+
+function getPathFromUrl () {
   const params = new URLSearchParams(window.location.search)
   return params.get('vim') ?? undefined
-}
\ No newline at end of file
+}
+
diff --git a/src/vim-web/react-viewers/state/controlBarState.tsx b/src/vim-web/react-viewers/state/controlBarState.tsx
index 44aec542..6e294251 100644
--- a/src/vim-web/react-viewers/state/controlBarState.tsx
+++ b/src/vim-web/react-viewers/state/controlBarState.tsx
@@ -109,7 +109,7 @@ export type ControlBarCursorSettings = {
   cursorPan: UserBoolean
   cursorZoom: UserBoolean
 }
-
+  
 /**
  * Returns a control bar section for pointer/camera modes.
  */

From e082c115c83cf3952a596aceaf029dbfc4b4f84d Mon Sep 17 00:00:00 2001
From: vim-sroberge <simon.roberge@vimaec.com>
Date: Fri, 21 Nov 2025 14:42:25 -0500
Subject: [PATCH 7/8] improved click detection when dragging

---
 package.json                                  |  2 +-
 .../core-viewers/shared/mouseHandler.ts       | 45 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 92a73670..eb42dd7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vim-web",
-  "version": "0.5.0-dev.17", 
+  "version": "0.5.0-dev.24", 
   "description": "A demonstration app built on top of the vim-webgl-viewer",
   "type": "module",
   "files": [
diff --git a/src/vim-web/core-viewers/shared/mouseHandler.ts b/src/vim-web/core-viewers/shared/mouseHandler.ts
index 4d1de34c..63145587 100644
--- a/src/vim-web/core-viewers/shared/mouseHandler.ts
+++ b/src/vim-web/core-viewers/shared/mouseHandler.ts
@@ -11,6 +11,7 @@ export class MouseHandler extends BaseInputHandler {
   private _capture: CaptureHandler;
   private _dragHandler: DragHandler;
   private _doubleClickHandler: DoubleClickHandler = new DoubleClickHandler();
+  private _clickHandler: ClickHandler = new ClickHandler();
 
   onButtonDown: (pos: THREE.Vector2, button: number) => void;
   onButtonUp: (pos: THREE.Vector2, button: number) => void;
@@ -47,27 +48,36 @@ export class MouseHandler extends BaseInputHandler {
     this._lastMouseDownPosition = pos;
     // Start drag
     this._dragHandler.onPointerDown(pos, event.button);
+    this._clickHandler.onPointerDown(pos);
     this._capture.onPointerDown(event);
     event.preventDefault();
   }
 
   private handlePointerUp(event: PointerEvent): void {
     if (event.pointerType !== 'mouse') return;
+    event.preventDefault();
+
     const pos = this.relativePosition(event);
 
     // Button up event
     this.onButtonUp?.(pos, event.button);
     this._capture.onPointerUp(event);
     this._dragHandler.onPointerUp();
+    this._clickHandler.onPointerUp();
+
 
     // Click type event
-    if(this._doubleClickHandler.checkForDoubleClick(event)){
+    if(this._doubleClickHandler.isDoubleClick(event)){
       this.handleDoubleClick(event);
-    }else{
+      return
+  }
+    if(this._clickHandler.isClick(event)){
       this.handleMouseClick(event);
-      this.handleContextMenu(event);
+      return
     }
-    event.preventDefault();
+
+    this.handleContextMenu(event);
+    
   }
 
   private async handleMouseClick(event: PointerEvent): Promise<void> {
@@ -102,8 +112,8 @@ export class MouseHandler extends BaseInputHandler {
     if (event.pointerType !== 'mouse') return;
     this._canvas.focus();
     const pos = this.relativePosition(event);
-
     this._dragHandler.onPointerMove(pos);
+    this._clickHandler.onPointerMove(pos);
     this.onMouseMove?.(pos);
   }
 
@@ -157,13 +167,36 @@ class CaptureHandler {
   }
 }
 
+class ClickHandler {
+  private _moved: boolean = false;
+  private _startPosition: THREE.Vector2 = new THREE.Vector2();
+  private _clickThreshold: number = 0.003 ; 
+
+  onPointerDown(pos: THREE.Vector2): void {
+    this._moved = false;
+    this._startPosition.copy(pos);
+  }
+  onPointerMove(pos: THREE.Vector2): void {
+    if (pos.distanceTo(this._startPosition) > this._clickThreshold) {
+      this._moved = true;
+    }
+  }
+
+  onPointerUp(): void { }
+
+  isClick(event: PointerEvent): boolean {
+    if (event.button !== 0) return false; // Only left button
+    return !this._moved;
+  }
+}
+
 class DoubleClickHandler {
   private _lastClickTime: number = 0;
   private _clickDelay: number = 300; // Max time between clicks for double-click
   private _lastClickPosition: THREE.Vector2 | null = null;
   private _positionThreshold: number = 5; // Max pixel distance between clicks
 
-  checkForDoubleClick(event: MouseEvent): boolean {
+  isDoubleClick(event: MouseEvent): boolean {
     const currentTime = Date.now();
     const currentPosition = new THREE.Vector2(event.clientX, event.clientY);
     const timeDiff = currentTime - this._lastClickTime;

From 90292331a6bf1561b064ab4bc6fc4fbccae01c38 Mon Sep 17 00:00:00 2001
From: Martin Ashton <martin.ashton@vimaec.com>
Date: Mon, 24 Nov 2025 10:59:42 -0500
Subject: [PATCH 8/8] Fixed formatting error

---
 .../react-viewers/ultra/errors/serverConnectionError.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx b/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx
index c567936c..d184cc0f 100644
--- a/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx
+++ b/src/vim-web/react-viewers/ultra/errors/serverConnectionError.tsx
@@ -20,7 +20,7 @@ function body (url: string, local: boolean): JSX.Element {
       </>)}
       {style.subTitle('Tips')}
       {style.numList([
-        `Ensure that VIM Ultra is running at ${style.detailText(url)}`,
+        <>Ensure that VIM Ultra is running at {style.detailText(url)}</>,
         'Check your network connection and access policies'
       ])}
     </div>