vim-web 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/vim-web.d.ts

@@ -3,8 +3,9 @@ export { THREE };
 import * as BIM from 'vim-format';
 import { IElement, VimHelpers, VimHeader, VimDocument } from 'vim-format';
 export { BIM };
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
 
 /**
  * @module vim-loader
@@ -311,8 +312,8 @@ type ViewerSettings = {
      */
     background: {
         /**
-         * Color of the cavas background
-         * Default: THREE.Color('#96999f')
+         * Color of the canvas background.
+         * Default: #F0F0F0
          */
         color: THREE.Color;
     };
@@ -442,7 +443,11 @@ interface IScene {
  * A signal with no payload.
  * Subscribe to be notified when the signal fires.
  */
-interface ISignal {
+interface ISignalHandler {
+    (ev: IEventManagement): void;
+}
+
+interface ISignal$1 {
     /** Number of active subscriptions. */
     readonly count: number;
     /** Subscribe to the signal. Returns a function that unsubscribes. */
@@ -520,6 +525,12 @@ interface IVim<T extends IVimElement> {
      * @returns The element corresponding to the element index, or undefined if not found.
      */
     getElementFromIndex(element: number): T | undefined;
+    /**
+     * Retrieves the element associated with the specified Revit unique ID string.
+     * @param uniqueId - The Revit unique ID string.
+     * @returns The element, or undefined if not found.
+     */
+    getElementFromUniqueId(uniqueId: string): T | undefined;
     /**
      * Retrieves all elements within the Vim.
      * @returns An array of all Vim objects.
@@ -561,7 +572,7 @@ interface ISelection<T extends IVimElement> {
     /** Returns true if at least one object is selected. */
     any(): boolean;
     /** Signal that fires whenever the selection changes. */
-    readonly onSelectionChanged: ISignal;
+    readonly onSelectionChanged: ISignal$1;
     /** Replaces the entire selection with the given object. */
     select(object: T): void;
     /** Replaces the entire selection with the given objects. */
@@ -665,9 +676,13 @@ interface IElement3D extends ISelectable {
     readonly element: number;
     /** The unique element ID. */
     readonly elementId: bigint;
+    /** The Revit unique ID string. */
+    readonly elementUniqueId: string | undefined;
     /** The geometry instances associated with this element. */
     readonly instances: number[] | undefined;
-    /** True if this element has associated geometry. */
+    /** True if this element has geometry definitions (instances). Always available after the vim is parsed, even before geometry is loaded. */
+    readonly hasGeometry: boolean;
+    /** True if this element has loaded mesh data. Only true after `vim.load()` has been called for a subset containing this element. */
     readonly hasMesh: boolean;
     /** True if this element is a room. */
     readonly isRoom: boolean;
@@ -728,6 +743,101 @@ interface ISubset {
     except(mode: SubsetFilter, filter: number[] | Set<number>): ISubset;
     /** Return a new subset including only instances matching the filter. */
     filter(mode: SubsetFilter, filter: number[] | Set<number>): ISubset;
+    /** Return a new subset including only instances whose element matches one of the given Revit unique IDs. */
+    filterByUniqueId(uniqueIds: string[] | Set<string>): ISubset;
+    /** Return a new subset excluding instances whose element matches one of the given Revit unique IDs. */
+    exceptByUniqueId(uniqueIds: string[] | Set<string>): ISubset;
+}
+
+/**
+ * Event handler type definition for subscription changes.
+ */
+type SubscriptionChangeEventHandler = (count: number) => void;
+
+/**
+ * Indicates the object implements generic subscriptions.
+ *
+ * @export
+ * @interface ISubscribable
+ * @template TEventHandler The type of events to handle.
+ */
+interface ISubscribable<TEventHandler> {
+    /**
+     * Returns the number of subscriptions.
+     *
+     * @type {number}
+     * @memberOf ISubscribable
+     */
+    readonly count: number;
+    /**
+     * Subscribe to the event.
+     *
+     * @param {TEventHandler} fn The event handler that is called when the event is dispatched.
+     * @returns {() => void} function that unsubscribes the event handler from the event.
+     *
+     * @memberOf ISubscribable
+     */
+    subscribe(fn: TEventHandler): () => void;
+    /**
+     * Subscribe to the event.
+     * @param {TEventHandler} fn The event handler that is called when the event is dispatched.
+     * @returns A function that unsubscribes the event handler from the event.
+     *
+     * @memberOf ISubscribable
+     */
+    sub(fn: TEventHandler): () => void;
+    /**
+     * Unsubscribe from the event.
+     * @param {TEventHandler} fn The event handler that will be unsubsribed from the event.
+     *
+     * @memberOf ISubscribable
+     */
+    unsubscribe(fn: TEventHandler): void;
+    /**
+     * Unsubscribe from the event.
+     * @param {TEventHandler} fn The event handler that will be unsubsribed from the event.
+     *
+     * @memberOf ISubscribable
+     */
+    unsub(fn: TEventHandler): void;
+    /**
+     * Subscribes to the event only once.
+     * @param {TEventHandler} fn The event handler that is called when the event is dispatched.
+     * @returns A function that unsubscribes the event handler from the event.
+     *
+     * @memberOf ISubscribable
+     */
+    one(fn: TEventHandler): () => void;
+    /**
+     * Checks it the event has a subscription for the specified handler.
+     * @param {TEventHandler} fn The event handler.
+     *
+     * @memberOf ISubscribable
+     */
+    has(fn: TEventHandler): boolean;
+    /**
+     * Clears all the subscriptions.
+     *
+     * @memberOf ISubscribable
+     */
+    clear(): void;
+    /**
+     * Triggered when subscriptions are changed (added or removed).
+     *
+     * @type {ISubscribable<SubscriptionChangeEventHandler>}
+     * @memberOf ISubscribable
+     */
+    readonly onSubscriptionChange: ISubscribable<SubscriptionChangeEventHandler>;
+}
+
+/**
+ * Models a signal. This type of events has no arguments.
+ *
+ * @export
+ * @interface ISignal
+ * @extends {ISubscribable<ISignalHandler>}
+ */
+interface ISignal extends ISubscribable<ISignalHandler> {
 }
 
 /**
@@ -790,6 +900,8 @@ interface IWebglVim extends IVim<IElement3D> {
     load(subset?: ISubset): Promise<void>;
     /** Removes all loaded geometry from the renderer (does NOT unload the vim from the viewer). */
     clear(): void;
+    /** Fires after `load(subset)` completes and new geometry is available. */
+    readonly onGeometryLoaded: ISignal;
 }
 
 interface ILoadSuccess<T> {
@@ -951,11 +1063,11 @@ interface IWebglCamera {
     /**
      * A signal that is dispatched when camera settings change.
      */
-    onSettingsChanged: ISignal;
+    onSettingsChanged: ISignal$1;
     /**
      * A signal that is dispatched when camera moves.
      */
-    onMoved: ISignal;
+    onMoved: ISignal$1;
     /**
      * True if the camera has moved this frame.
      */
@@ -1139,7 +1251,7 @@ type MeasureStage = 'ready' | 'active' | 'done' | 'failed';
  */
 interface IWebglSectionBox {
     /** Dispatches when active, visible, or interactive change. */
-    readonly onStateChanged: ISignal;
+    readonly onStateChanged: ISignal$1;
     /** Dispatches when the user finishes manipulating the box. */
     readonly onBoxConfirm: ISimpleEvent<THREE.Box3>;
     /** Dispatches boolean indicating pointer hover state on box handles. */
@@ -1276,9 +1388,9 @@ interface IWebglViewport {
     /** Triggers a resize to match parent dimensions. */
     resizeToParent(): void;
     /** Signal dispatched when the canvas is reparented. */
-    readonly onReparent: ISignal;
+    readonly onReparent: ISignal$1;
     /** Signal dispatched when the canvas is resized. */
-    readonly onResize: ISignal;
+    readonly onResize: ISignal$1;
 }
 
 /**
@@ -1505,13 +1617,13 @@ interface IInputHandler {
     /** Temporary pointer mode during drag (e.g., right-drag = LOOK). Read-only. */
     readonly pointerOverride: PointerMode | undefined;
     /** Fires when {@link pointerMode} or {@link pointerOverride} changes. */
-    readonly onPointerModeChanged: ISignal;
+    readonly onPointerModeChanged: ISignal$1;
     /** WASD move speed. Exponential scale: actual speed = 1.25^moveSpeed. Range: [-10, +10]. */
     moveSpeed: number;
     /** Scroll wheel zoom speed. Higher = faster zoom per scroll tick. */
     scrollSpeed: number;
     /** Fires when any speed setting changes (moveSpeed, scrollSpeed). */
-    readonly onSettingsChanged: ISignal;
+    readonly onSettingsChanged: ISignal$1;
     /** Fires when a right-click context menu should be shown. Payload is client-space position. */
     readonly onContextMenu: ISimpleEvent<THREE.Vector2 | undefined>;
 }
@@ -1569,9 +1681,9 @@ interface IWebglRenderer {
     /** Scale factor for outline/selection render target resolution (0-1). */
     outlineScale: number;
     /** Signal dispatched once per render frame if the scene was updated. */
-    readonly onSceneUpdated: ISignal;
+    readonly onSceneUpdated: ISignal$1;
     /** Signal dispatched when bounding box is updated. */
-    readonly onBoxUpdated: ISignal;
+    readonly onBoxUpdated: ISignal$1;
     /** Whether text rendering is enabled. */
     textEnabled: boolean;
     /** Instance count below which ghosted meshes are hidden entirely. */
@@ -1621,7 +1733,7 @@ interface IWebglViewer {
     readonly camera: IWebglCamera;
     readonly gizmos: IGizmos;
     /** Fires when a vim finishes loading and is added to the scene. */
-    readonly onVimLoaded: ISignal;
+    readonly onVimLoaded: ISignal$1;
     /** All loaded VIM models. Auto-populated on load, auto-removed on unload. */
     readonly vims: IWebglVim[];
     /** Loads a VIM file. The resulting vim is added to `vims` on success. */
@@ -1696,7 +1808,7 @@ type VimLoadingState = {
      */
     status: VimLoadingStatus;
     /**
-     * Loading progress as a percentage from 0 to 100.
+     * Loading progress as a fraction from 0 to 1.
      */
     progress: number;
 };
@@ -1956,7 +2068,7 @@ declare const defaultRenderSettings: RenderSettings;
  * Interface defining the basic renderer capabilities
  */
 interface IUltraRenderer {
-    onSceneUpdated: ISignal;
+    onSceneUpdated: ISignal$1;
     ghostColor: THREE.Color;
     ghostOpacity: number;
     hdrScale: number;
@@ -1964,7 +2076,7 @@ interface IUltraRenderer {
     hdrBackgroundScale: number;
     hdrBackgroundSaturation: number;
     backgroundBlur: number;
-    backgroundColor: THREE.Color;
+    background: THREE.Color;
     getBoundingBox(): Promise<THREE.Box3 | undefined>;
 }
 
@@ -1981,7 +2093,7 @@ interface IUltraRenderer {
  * ```
  */
 interface IUltraSectionBox {
-    readonly onUpdate: ISignal;
+    readonly onUpdate: ISignal$1;
     visible: boolean;
     interactive: boolean;
     active: boolean;
@@ -2149,7 +2261,7 @@ declare namespace Core_Ultra {
 
 declare namespace Core {
   export { PointerMode, Core_Ultra as Ultra, Core_Webgl as Webgl, authHeaders };
-  export type { ClickHandler, ContextMenuHandler, DoubleClickHandler, DragCallback, DragHandler, IInputHandler, IKeyboardInput, ILoadError, ILoadRequest, ILoadSuccess, IMouseInput, IProgress, ISignal, ISimpleEvent, ITouchInput, IVim, IVimElement, LoadResult, MouseOverrides, MoveHandler, PinchHandler, PinchStartHandler, PointerButtonHandler, ProgressType, TapHandler, TouchOverrides, WheelHandler };
+  export type { ClickHandler, ContextMenuHandler, DoubleClickHandler, DragCallback, DragHandler, IInputHandler, IKeyboardInput, ILoadError, ILoadRequest, ILoadSuccess, IMouseInput, IProgress, ISignal$1 as ISignal, ISimpleEvent, ITouchInput, IVim, IVimElement, LoadResult, MouseOverrides, MoveHandler, PinchHandler, PinchStartHandler, PointerButtonHandler, ProgressType, TapHandler, TouchOverrides, WheelHandler };
 }
 
 /**
@@ -2198,10 +2310,6 @@ interface StateRef<T> {
      * @param value - The new state value.
      */
     set(value: T): void;
-    /**
-     * Confirms the current state (potentially applying a confirmation transformation).
-     */
-    confirm(): void;
     onChange: ISimpleEvent<T>;
 }
 /**
@@ -2252,74 +2360,137 @@ interface FuncRef<TArg, TReturn> {
 }
 
 /**
- * Controls the section box clipping volume.
- * Shared between WebGL and Ultra viewers.
- *
- * @example
- * viewer.sectionBox.active.set(true)
- * viewer.sectionBox.sectionSelection.call()  // Fit to selection
- * viewer.sectionBox.sectionScene.call()      // Fit to scene
+ * A boolean setting that can be locked by the host application.
+ * - `true` / `false` — user-toggleable default value, shown in settings UI.
+ * - `"AlwaysTrue"` / `"AlwaysFalse"` — locked value, hidden from settings UI.
  */
-interface SectionBoxApi {
-    active: StateRef<boolean>;
-    visible: StateRef<boolean>;
-    auto: StateRef<boolean>;
-    sectionSelection: FuncRef<void, Promise<void>>;
-    sectionScene: FuncRef<void, Promise<void>>;
-    sectionBox: FuncRef<THREE.Box3, void>;
-    getBox: () => THREE.Box3;
-    showOffsetPanel: StateRef<boolean>;
-    topOffset: StateRef<number>;
-    sideOffset: StateRef<number>;
-    bottomOffset: StateRef<number>;
-    getSelectionBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
-    getSceneBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
-}
-
+type UserBoolean = boolean | 'AlwaysTrue' | 'AlwaysFalse';
 /**
- * @module viw-webgl-react
+ * Checks if a UserBoolean value is effectively true
+ * @param {UserBoolean | boolean} value - The value to check
+ * @returns {boolean} True if the value is true or 'AlwaysTrue'
+ */
+declare function isTrue(value: UserBoolean | boolean): value is true | "AlwaysTrue";
+/**
+ * Checks if a UserBoolean value is effectively false
+ * @param {UserBoolean | boolean} value - The value to check
+ * @returns {boolean} True if the value is false or 'AlwaysFalse'
  */
+declare function isFalse(value: UserBoolean | boolean): value is false | "AlwaysFalse";
 
 /**
- * High-level framing controls for the React viewer.
- * Provides semantic operations like "frame selection" and "frame scene".
- *
- * For low-level camera movement (orbit, pan, zoom, snap/lerp), use
- * `viewer.core.camera` which exposes {@link IWebglCamera}.
- *
- * @example
- * // Frame the current selection with animation
- * viewer.framing.frameSelection.call()
- *
- * // For direct camera manipulation, use the core camera:
- * viewer.core.camera.lerp(1).frame('all')
- * viewer.core.camera.snap().set(position, target)
+ * @module icons
  */
-interface FramingApi {
-    /** When true, automatically frames the camera on the selection whenever it changes. */
-    autoCamera: StateRef<boolean>;
-    /** Resets the camera to its last saved position. */
-    reset: FuncRef<void, void>;
-    /** Frames the camera on the current selection (or scene if nothing selected). */
-    frameSelection: FuncRef<void, Promise<void>>;
-    /** Frames the camera to show all loaded geometry. */
-    frameScene: FuncRef<void, Promise<void>>;
-    /** Returns the bounding box of the current selection, or undefined if nothing selected. */
-    getSelectionBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
-    /** Returns the bounding box of all loaded geometry. */
-    getSceneBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
+/**
+ * Common Icon Options.
+ */
+type IconOptions = {
+    height?: number | string;
+    width?: number | string;
+    fill?: string;
+    className?: string;
+};
+declare function pointer({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function filter({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function slidersHoriz({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function settings({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function help({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function trash({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function checkmark({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function undo({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function closeIcon({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function home({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function fullScreen({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function minimize({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function treeView({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function more({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function collapse({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function arrowLeft({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function fullArrowLeft({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function visible({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function hidden({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function frameScene({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function autoCamera({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function orbit({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function look({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function perspective({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function orthographic({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function camera({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function pan({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function zoom({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function frameRect({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function frameSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function showAll({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function showSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function hideSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function isolateSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function autoIsolate({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function toggleIsolation({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function measure({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxSettings({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxAuto({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxVisible({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBox({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxDisable({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxClip({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxIgnore({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxReset({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxShrink({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function sectionBoxShrink2({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function ghost({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+declare function ghostDead({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
+
+declare namespace React_Icons {
+  export { arrowLeft, autoCamera, autoIsolate, camera, checkmark, closeIcon, collapse, filter, frameRect, frameScene, frameSelection, fullArrowLeft, fullScreen, ghost, ghostDead, help, hidden, hideSelection, home, isolateSelection, look, measure, minimize, more, orbit, orthographic, pan, perspective, pointer, sectionBox, sectionBoxAuto, sectionBoxClip, sectionBoxDisable, sectionBoxIgnore, sectionBoxReset, sectionBoxSettings, sectionBoxShrink, sectionBoxShrink2, sectionBoxVisible, settings, showAll, showSelection, slidersHoriz, toggleIsolation, trash, treeView, undo, visible, zoom };
+  export type { IconOptions };
 }
 
+type MessageBoxProps = {
+    title: string;
+    body: string | JSX.Element;
+    icon?: JSX.Element;
+    footer?: string | JSX.Element;
+    canClose?: boolean;
+    minimize?: boolean;
+    onClose?: () => void;
+};
+type MessageBoxPropsTyped = MessageBoxProps & {
+    type: 'message';
+};
+
+type ProgressMode = 'percent' | 'bytes';
+/**
+ * Interface for message information displayed in the LoadingBox.
+ * @property message - Optional main message text.
+ * @property info - Optional additional information or tooltip text.
+ * @property progress - The progress of an operation.
+ */
+type LoadingBoxProps = {
+    message?: string;
+    progress?: number;
+    mode?: ProgressMode;
+    more?: ReactNode;
+};
+type LoadingBoxPropsTyped = LoadingBoxProps & {
+    type: 'loading';
+};
+
 /**
  * @module viw-webgl-react
  */
+type HelpPropsTyped = {
+    type: 'help';
+};
 
-type AugmentedElement = BIM.IElement & {
-    bimDocumentName: string;
-    categoryName: string;
-    familyTypeName: string;
-    levelName: string;
-    worksetName: string;
+type ModalProps = (MessageBoxPropsTyped | LoadingBoxPropsTyped | HelpPropsTyped) & {
+    canClose?: boolean;
+    onClose?: () => void;
+};
+type ModalApi = {
+    getActiveState(): ModalProps | undefined;
+    loading(content: LoadingBoxProps | undefined): void;
+    message(content: MessageBoxProps | undefined): void;
+    help(show: boolean): void;
 };
 
 type VisibilityStatus = 'all' | 'allButSelection' | 'onlySelection' | 'some' | 'none';
@@ -2387,54 +2558,236 @@ interface IsolationApi {
     showAll(): void;
 }
 
-type MessageBoxProps = {
-    title: string;
-    body: string | JSX.Element;
-    icon?: JSX.Element;
-    footer?: string | JSX.Element;
-    canClose?: boolean;
-    minimize?: boolean;
-    onClose?: () => void;
-};
-type MessageBoxPropsTyped = MessageBoxProps & {
-    type: 'message';
-};
+type ButtonVariant = 'default' | 'expand' | 'disabled' | 'disabled-default' | 'blue';
+type SectionVariant = 'default' | 'blue';
+declare const buttonDefaultStyle: ButtonVariant;
+declare const buttonExpandStyle: ButtonVariant;
+declare const buttonDisableStyle: ButtonVariant;
+declare const buttonDisableDefaultStyle: ButtonVariant;
+declare const buttonBlueStyle: ButtonVariant;
+declare const sectionDefaultStyle: SectionVariant;
+declare const sectionBlueStyle: SectionVariant;
+declare const sectionNoPadStyle: SectionVariant;
 
-type ProgressMode = 'percent' | 'bytes';
-/**
- * Interface for message information displayed in the LoadingBox.
- * @property message - Optional main message text.
- * @property info - Optional additional information or tooltip text.
- * @property progress - The progress of an operation.
- */
-type LoadingBoxProps = {
-    message?: string;
-    progress?: number;
-    mode?: ProgressMode;
-    more?: ReactNode;
-};
-type LoadingBoxPropsTyped = LoadingBoxProps & {
-    type: 'loading';
-};
+declare namespace React_ControlBar_Style {
+  export { buttonBlueStyle, buttonDefaultStyle, buttonDisableDefaultStyle, buttonDisableStyle, buttonExpandStyle, sectionBlueStyle, sectionDefaultStyle, sectionNoPadStyle };
+  export type { ButtonVariant, SectionVariant };
+}
 
-/**
- * @module viw-webgl-react
+interface IControlBarButton {
+    id: string;
+    enabled?: (() => boolean) | undefined;
+    tip: string;
+    action: () => void;
+    icon: (options?: IconOptions) => JSX.Element;
+    isOn?: () => boolean;
+    variant?: ButtonVariant;
+}
+
+interface IControlBarSection {
+    id: string;
+    enable?: (() => boolean) | undefined;
+    buttons: (IControlBarButton)[];
+    variant?: SectionVariant;
+}
+
+type PartialUltraSettings = RecursivePartial<UltraSettings>;
+/**
+ * React UI feature toggles for the Ultra viewer, passed to `React.Ultra.createViewer(container, settings)`.
+ * Controls which UI panels and toolbar buttons are shown.
+ * Access at runtime via `viewer.ui.controlBar.set(false)`.
+ *
+ * @example
+ * const viewer = await React.Ultra.createViewer(div, {
+ *   ui: { panelControlBar: true, miscHelp: false }
+ * })
  */
-type HelpPropsTyped = {
-    type: 'help';
+type UltraSettings = {
+    capacity: CapacitySettings;
+    isolation: IsolationSettings;
+    sectionBox: SectionBoxSettings;
+    cursor: CursorSettings;
+    camera: CameraSettings;
+    ui: ControlBarCameraSettings & ControlBarCursorSettings & ControlBarSectionBoxSettings & ControlBarVisibilitySettings & {
+        panelLogo: UserBoolean;
+        panelControlBar: UserBoolean;
+        miscSettings: UserBoolean;
+        miscHelp: UserBoolean;
+    };
 };
+declare function getDefaultUltraSettings(): UltraSettings;
 
-type ModalProps = (MessageBoxPropsTyped | LoadingBoxPropsTyped | HelpPropsTyped) & {
-    canClose?: boolean;
-    onClose?: () => void;
+type ControlBarSectionBoxSettings = {
+    sectioningEnable: UserBoolean;
+    sectioningFitToSelection: UserBoolean;
+    sectioningReset: UserBoolean;
+    sectioningShow: UserBoolean;
+    sectioningAuto: UserBoolean;
+    sectioningSettings: UserBoolean;
 };
-type ModalApi = {
-    getActiveState(): ModalProps | undefined;
-    loading(content: LoadingBoxProps | undefined): void;
-    message(content: MessageBoxProps | undefined): void;
-    help(show: boolean): void;
+type ControlBarCursorSettings = {
+    cursorOrbit: UserBoolean;
+    cursorLookAround: UserBoolean;
+    cursorPan: UserBoolean;
+    cursorZoom: UserBoolean;
+};
+type ControlBarMeasureSettings = {
+    measureEnable: UserBoolean;
+};
+type ControlBarCameraSettings = {
+    cameraAuto: UserBoolean;
+    cameraFrameSelection: UserBoolean;
+    cameraFrameScene: UserBoolean;
+};
+type ControlBarVisibilitySettings = {
+    visibilityClearSelection: UserBoolean;
+    visibilityShowAll: UserBoolean;
+    visibilityToggle: UserBoolean;
+    visibilityIsolate: UserBoolean;
+    visibilityAutoIsolate: UserBoolean;
+    visibilitySettings: UserBoolean;
+};
+
+type PartialWebglSettings = RecursivePartial<WebglSettings>;
+/**
+ * React UI feature toggles, passed to `React.Webgl.createViewer(container, settings)`.
+ * Controls which UI panels and toolbar buttons are shown.
+ * Access at runtime via `viewer.ui.bimTree.set(false)`.
+ * Not to be confused with {@link ViewerSettings} (renderer config) or {@link VimSettings} (per-model transform).
+ *
+ * @example
+ * const viewer = await React.Webgl.createViewer(div, {
+ *   ui: { panelBimTree: false, miscHelp: false }
+ * })
+ */
+type IsolationSettings = {
+    autoIsolate: boolean;
+    showGhost: boolean;
+    transparency: boolean;
+    showRooms: boolean;
+};
+type SectionBoxSettings = {
+    active: boolean;
+    auto: boolean;
+    topOffset: number;
+    sideOffset: number;
+    bottomOffset: number;
+};
+type CursorSettings = {
+    default: PointerMode;
+};
+type CameraSettings = {
+    autoCamera: boolean;
+};
+type CapacitySettings = {
+    canFollowUrl: boolean;
+    canGoFullScreen: boolean;
+    canDownload: boolean;
+    canReadLocalStorage: boolean;
+};
+type WebglSettings = {
+    capacity: CapacitySettings;
+    isolation: IsolationSettings;
+    sectionBox: SectionBoxSettings;
+    cursor: CursorSettings;
+    camera: CameraSettings;
+    ui: ControlBarCameraSettings & ControlBarCursorSettings & ControlBarSectionBoxSettings & ControlBarVisibilitySettings & ControlBarMeasureSettings & {
+        panelLogo: UserBoolean;
+        panelBimTree: UserBoolean;
+        panelBimInfo: UserBoolean;
+        panelPerformance: UserBoolean;
+        panelAxes: UserBoolean;
+        panelControlBar: UserBoolean;
+        axesOrthographic: UserBoolean;
+        axesHome: UserBoolean;
+        miscProjectInspector: UserBoolean;
+        miscSettings: UserBoolean;
+        miscHelp: UserBoolean;
+        miscMaximise: UserBoolean;
+    };
+};
+/**
+ * Default settings configuration for the React Webgl Vim viewer
+ * @constant
+ * @type {WebglSettings}
+ */
+declare function getDefaultSettings(): WebglSettings;
+
+/**
+ * Controls the section box clipping volume.
+ * Shared between WebGL and Ultra viewers.
+ *
+ * @example
+ * viewer.sectionBox.active.set(true)
+ * viewer.sectionBox.sectionSelection.call()  // Fit to selection
+ * viewer.sectionBox.sectionScene.call()      // Fit to scene
+ */
+interface SectionBoxApi {
+    active: StateRef<boolean>;
+    visible: StateRef<boolean>;
+    auto: StateRef<boolean>;
+    sectionSelection: FuncRef<void, Promise<void>>;
+    sectionScene: FuncRef<void, Promise<void>>;
+    sectionBox: FuncRef<THREE.Box3, void>;
+    getBox: () => THREE.Box3;
+    showOffsetPanel: StateRef<boolean>;
+    topOffset: StateRef<number>;
+    sideOffset: StateRef<number>;
+    bottomOffset: StateRef<number>;
+    getSelectionBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
+    getSceneBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
+}
+
+/**
+ * @module viw-webgl-react
+ */
+
+/**
+ * High-level framing controls for the React viewer.
+ * Provides semantic operations like "frame selection" and "frame scene".
+ *
+ * For low-level camera movement (orbit, pan, zoom, snap/lerp), use
+ * `viewer.core.camera` which exposes {@link IWebglCamera}.
+ *
+ * @example
+ * // Frame the current selection with animation
+ * viewer.framing.frameSelection.call()
+ *
+ * // For direct camera manipulation, use the core camera:
+ * viewer.core.camera.lerp(1).frame('all')
+ * viewer.core.camera.snap().set(position, target)
+ */
+interface FramingApi {
+    /** When true, automatically frames the camera on the selection whenever it changes. */
+    autoCamera: StateRef<boolean>;
+    /** Resets the camera to its last saved position. */
+    reset: FuncRef<void, void>;
+    /** Frames the camera on the current selection (or scene if nothing selected). */
+    frameSelection: FuncRef<void, Promise<void>>;
+    /** Frames the camera to show all loaded geometry. */
+    frameScene: FuncRef<void, Promise<void>>;
+    /** Returns the bounding box of the current selection, or undefined if nothing selected. */
+    getSelectionBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
+    /** Returns the bounding box of all loaded geometry. */
+    getSceneBox: FuncRef<void, Promise<THREE.Box3 | undefined>>;
+}
+
+/**
+ * @module viw-webgl-react
+ */
+
+type AugmentedElement = BIM.IElement & {
+    bimDocumentName: string;
+    categoryName: string;
+    familyTypeName: string;
+    levelName: string;
+    worksetName: string;
 };
 
+/**
+ * @module viw-webgl-react
+ */
+
 /**
  * Reference to manage context menu functionality in the viewer.
  */
@@ -2453,7 +2806,7 @@ interface IContextMenuButton {
     id: string;
     label: string;
     keyboard?: string;
-    action: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    action: (e: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     enabled: boolean;
 }
 /**
@@ -2607,90 +2960,6 @@ type BimInfoPanelApi = {
     onRenderBodyEntryValue: DataRender<Entry>;
 };
 
-/**
- * @module icons
- */
-/**
- * Common Icon Options.
- */
-type IconOptions = {
-    height?: number | string;
-    width?: number | string;
-    fill?: string;
-    className?: string;
-};
-declare function pointer({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function filter({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function slidersHoriz({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function settings({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function help({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function trash({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function checkmark({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function undo({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function closeIcon({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function home({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function fullScreen({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function minimize({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function treeView({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function more({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function collapse({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function arrowLeft({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function fullArrowLeft({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function visible({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function hidden({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function frameScene({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function autoCamera({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function orbit({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function look({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function perspective({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function orthographic({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function camera({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function pan({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function zoom({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function frameRect({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function frameSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function showAll({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function showSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function hideSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function isolateSelection({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function autoIsolate({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function toggleIsolation({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function measure({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxSettings({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxAuto({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxVisible({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBox({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxDisable({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxClip({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxIgnore({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxReset({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxShrink({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function sectionBoxShrink2({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function ghost({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-declare function ghostDead({ height, width, fill, className }?: IconOptions): react_jsx_runtime.JSX.Element;
-
-declare namespace React_Icons {
-  export { arrowLeft, autoCamera, autoIsolate, camera, checkmark, closeIcon, collapse, filter, frameRect, frameScene, frameSelection, fullArrowLeft, fullScreen, ghost, ghostDead, help, hidden, hideSelection, home, isolateSelection, look, measure, minimize, more, orbit, orthographic, pan, perspective, pointer, sectionBox, sectionBoxAuto, sectionBoxClip, sectionBoxDisable, sectionBoxIgnore, sectionBoxReset, sectionBoxSettings, sectionBoxShrink, sectionBoxShrink2, sectionBoxVisible, settings, showAll, showSelection, slidersHoriz, toggleIsolation, trash, treeView, undo, visible, zoom };
-  export type { IconOptions };
-}
-
-interface IControlBarButton {
-    id: string;
-    enabled?: (() => boolean) | undefined;
-    tip: string;
-    action: () => void;
-    icon: (options?: IconOptions) => JSX.Element;
-    isOn?: () => boolean;
-    style?: (on: boolean) => string;
-}
-
-interface IControlBarSection {
-    id: string;
-    enable?: (() => boolean) | undefined;
-    buttons: (IControlBarButton)[];
-    style?: string;
-}
-
 /**
  * Reference to manage control bar functionality in the viewer.
  */
@@ -2706,144 +2975,6 @@ type ControlBarApi = {
  */
 type ControlBarCustomization = (e: IControlBarSection[]) => IControlBarSection[];
 
-/**
- * A boolean setting that can be locked by the host application.
- * - `true` / `false` — user-toggleable default value, shown in settings UI.
- * - `"AlwaysTrue"` / `"AlwaysFalse"` — locked value, hidden from settings UI.
- */
-type UserBoolean = boolean | 'AlwaysTrue' | 'AlwaysFalse';
-/**
- * Checks if a UserBoolean value is effectively true
- * @param {UserBoolean | boolean} value - The value to check
- * @returns {boolean} True if the value is true or 'AlwaysTrue'
- */
-declare function isTrue(value: UserBoolean | boolean): value is true | "AlwaysTrue";
-/**
- * Checks if a UserBoolean value is effectively false
- * @param {UserBoolean | boolean} value - The value to check
- * @returns {boolean} True if the value is false or 'AlwaysFalse'
- */
-declare function isFalse(value: UserBoolean | boolean): value is false | "AlwaysFalse";
-
-declare const baseSectionStyle = "vc-flex vc-items-center vc-rounded-full vc-mb-2 vc-shadow-md";
-declare const sectionDefaultStyle: string;
-declare const sectionBlueStyle: string;
-declare const sectionNoPadStyle: string;
-declare const buttonBaseStyle = "vim-control-bar-button vc-rounded-full vc-items-center vc-justify-center vc-flex vc-transition-all hover:vc-scale-110";
-declare function buttonDefaultStyle(on: boolean): string;
-declare function buttonExpandStyle(on: boolean): string;
-declare function buttonDisableStyle(on: boolean): string;
-declare function buttonDisableDefaultStyle(on: boolean): string;
-declare function buttonBlueStyle(on: boolean): string;
-
-declare namespace React_ControlBar_Style {
-  export {
-    baseSectionStyle,
-    buttonBaseStyle,
-    buttonBlueStyle,
-    buttonDefaultStyle,
-    buttonDisableDefaultStyle,
-    buttonDisableStyle,
-    buttonExpandStyle,
-    sectionBlueStyle,
-    sectionDefaultStyle,
-    sectionNoPadStyle,
-  };
-}
-
-type PartialUltraSettings = RecursivePartial<UltraSettings>;
-/**
- * React UI feature toggles for the Ultra viewer, passed to `React.Ultra.createViewer(container, settings)`.
- * Controls which UI panels and toolbar buttons are shown.
- * Access at runtime via `viewer.settings.update(s => { s.ui.panelControlBar = false })`.
- *
- * @example
- * const viewer = await React.Ultra.createViewer(div, {
- *   ui: { panelControlBar: true, miscHelp: false }
- * })
- */
-type UltraSettings = {
-    ui: ControlBarCameraSettings & ControlBarCursorSettings & ControlBarSectionBoxSettings & ControlBarVisibilitySettings & {
-        panelLogo: UserBoolean;
-        panelControlBar: UserBoolean;
-        miscSettings: UserBoolean;
-        miscHelp: UserBoolean;
-    };
-};
-declare function getDefaultUltraSettings(): UltraSettings;
-
-type ControlBarSectionBoxSettings = {
-    sectioningEnable: UserBoolean;
-    sectioningFitToSelection: UserBoolean;
-    sectioningReset: UserBoolean;
-    sectioningShow: UserBoolean;
-    sectioningAuto: UserBoolean;
-    sectioningSettings: UserBoolean;
-};
-type ControlBarCursorSettings = {
-    cursorOrbit: UserBoolean;
-    cursorLookAround: UserBoolean;
-    cursorPan: UserBoolean;
-    cursorZoom: UserBoolean;
-};
-type ControlBarMeasureSettings = {
-    measureEnable: UserBoolean;
-};
-type ControlBarCameraSettings = {
-    cameraAuto: UserBoolean;
-    cameraFrameSelection: UserBoolean;
-    cameraFrameScene: UserBoolean;
-};
-type ControlBarVisibilitySettings = {
-    visibilityClearSelection: UserBoolean;
-    visibilityShowAll: UserBoolean;
-    visibilityToggle: UserBoolean;
-    visibilityIsolate: UserBoolean;
-    visibilityAutoIsolate: UserBoolean;
-    visibilitySettings: UserBoolean;
-};
-
-type PartialWebglSettings = RecursivePartial<WebglSettings>;
-/**
- * React UI feature toggles, passed to `React.Webgl.createViewer(container, settings)`.
- * Controls which UI panels and toolbar buttons are shown.
- * Access at runtime via `viewer.settings.update(s => { s.ui.panelBimTree = false })`.
- * Not to be confused with {@link ViewerSettings} (renderer config) or {@link VimSettings} (per-model transform).
- *
- * @example
- * const viewer = await React.Webgl.createViewer(div, {
- *   ui: { panelBimTree: false, miscHelp: false }
- * })
- */
-type WebglSettings = {
-    capacity: {
-        canFollowUrl: boolean;
-        canGoFullScreen: boolean;
-        canDownload: boolean;
-        canReadLocalStorage: boolean;
-    };
-    ui: ControlBarCameraSettings & ControlBarCursorSettings & ControlBarSectionBoxSettings & ControlBarVisibilitySettings & ControlBarMeasureSettings & {
-        panelLogo: UserBoolean;
-        panelBimTree: UserBoolean;
-        panelBimInfo: UserBoolean;
-        panelPerformance: UserBoolean;
-        panelAxes: UserBoolean;
-        panelControlBar: UserBoolean;
-        axesOrthographic: UserBoolean;
-        axesHome: UserBoolean;
-        miscProjectInspector: UserBoolean;
-        miscSettings: UserBoolean;
-        miscHelp: UserBoolean;
-        miscMaximise: UserBoolean;
-    };
-};
-/**
- * Default settings configuration for the React Webgl Vim viewer
- * @constant
- * @type {WebglSettings}
- */
-declare function getDefaultSettings(): WebglSettings;
-
 /**
  * @module viw-webgl-react
  */
@@ -2875,6 +3006,8 @@ interface GenericNumberEntry {
     min?: number;
     max?: number;
     step?: number;
+    info?: string;
+    transform?: (n: number) => number;
 }
 interface GenericBoolEntry {
     type: "bool";
@@ -2896,78 +3029,105 @@ interface GenericSelectEntry {
     }[];
     state: StateRef<string>;
 }
-type GenericEntryType = GenericTextEntry | GenericBoolEntry | GenericNumberEntry | GenericSelectEntry;
-
-type GenericPanelApi = {
-    customize(fn: (entries: GenericEntryType[]) => GenericEntryType[]): void;
-};
-
-/**
- * @module viw-webgl-react
- * Contains settings and type definitions for the Vim web viewer
- */
-
-type AnySettings = WebglSettings | UltraSettings;
-
-type SettingsCustomization<T extends AnySettings> = (items: SettingsItem<T>[]) => SettingsItem<T>[];
-type SettingsItem<T extends AnySettings> = SettingsSubtitle | SettingsToggle<T> | SettingsBox<T> | SettingsSelect<T> | SettingsElement;
-type SettingsSubtitle = {
-    type: 'subtitle';
-    key: string;
-    title: string;
-};
-type SettingsToggle<T extends AnySettings> = {
-    type: 'toggle';
-    key: string;
+interface GenericSubtitleEntry {
+    type: 'section';
+    id: string;
     label: string;
-    getter: (settings: T) => UserBoolean;
-    setter: (settings: T, b: boolean) => void;
-};
-type SettingsBox<T extends AnySettings> = {
-    type: 'box';
-    key: string;
+}
+interface GenericGroupEntry {
+    type: 'group';
+    id: string;
     label: string;
-    info: string;
-    transform: (value: number) => number;
-    getter: (settings: T) => number;
-    setter: (settings: T, b: number) => void;
-};
-type SettingsSelect<T extends AnySettings> = {
-    type: 'select';
-    key: string;
+}
+interface GenericReadonlyEntry {
+    type: 'readonly';
+    id: string;
     label: string;
-    options: {
-        label: string;
-        value: string;
-    }[];
-    getter: (settings: T) => string;
-    setter: (settings: T, value: string) => void;
-};
-type SettingsElement = {
+    value: string;
+    visible?: () => boolean;
+    renderValue?: () => React__default.ReactNode;
+}
+interface GenericElementEntry {
     type: 'element';
-    key: string;
+    id: string;
     element: JSX.Element;
+}
+type GenericEntryType = GenericTextEntry | GenericBoolEntry | GenericNumberEntry | GenericSelectEntry | GenericSubtitleEntry | GenericGroupEntry | GenericReadonlyEntry | GenericElementEntry;
+
+type GenericPanelApi = {
+    customize(fn: (entries: GenericEntryType[]) => GenericEntryType[]): void;
 };
 
 /**
-* Settings API managing settings applied to the viewer.
-*/
-type SettingsApi<T extends AnySettings> = {
-    /**
-     * Allows updating settings by providing a callback function.
-     * @param updater A function that updates the current settings.
-     */
-    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: 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<T>[]) => SettingsItem<T>[]) => void;
+ * Reactive UI visibility API for the WebGL viewer.
+ * Each member is a `StateRef<boolean>` that can be read, written, and subscribed to.
+ *
+ * @example
+ * viewer.ui.bimTree.set(false)              // Hide BIM tree
+ * viewer.ui.controlBar.get()                // Read current state
+ * viewer.ui.axes.onChange.subscribe(…)       // Subscribe to changes
+ */
+type WebglUiApi = {
+    logo: StateRef<boolean>;
+    controlBar: StateRef<boolean>;
+    bimTree: StateRef<boolean>;
+    bimInfo: StateRef<boolean>;
+    axes: StateRef<boolean>;
+    performance: StateRef<boolean>;
+    axesOrthographic: StateRef<boolean>;
+    axesHome: StateRef<boolean>;
+    cursorOrbit: StateRef<boolean>;
+    cursorLookAround: StateRef<boolean>;
+    cursorPan: StateRef<boolean>;
+    cursorZoom: StateRef<boolean>;
+    cameraAuto: StateRef<boolean>;
+    cameraFrameScene: StateRef<boolean>;
+    cameraFrameSelection: StateRef<boolean>;
+    sectioningEnable: StateRef<boolean>;
+    sectioningFitToSelection: StateRef<boolean>;
+    sectioningReset: StateRef<boolean>;
+    sectioningShow: StateRef<boolean>;
+    sectioningAuto: StateRef<boolean>;
+    sectioningSettings: StateRef<boolean>;
+    measureEnable: StateRef<boolean>;
+    visibilityClearSelection: StateRef<boolean>;
+    visibilityShowAll: StateRef<boolean>;
+    visibilityToggle: StateRef<boolean>;
+    visibilityIsolate: StateRef<boolean>;
+    visibilityAutoIsolate: StateRef<boolean>;
+    visibilitySettings: StateRef<boolean>;
+    miscProjectInspector: StateRef<boolean>;
+    miscSettings: StateRef<boolean>;
+    miscHelp: StateRef<boolean>;
+    miscMaximise: StateRef<boolean>;
+};
+/**
+ * Reactive UI visibility API for the Ultra viewer.
+ */
+type UltraUiApi = {
+    logo: StateRef<boolean>;
+    controlBar: StateRef<boolean>;
+    cursorOrbit: StateRef<boolean>;
+    cursorLookAround: StateRef<boolean>;
+    cursorPan: StateRef<boolean>;
+    cursorZoom: StateRef<boolean>;
+    cameraAuto: StateRef<boolean>;
+    cameraFrameScene: StateRef<boolean>;
+    cameraFrameSelection: StateRef<boolean>;
+    sectioningEnable: StateRef<boolean>;
+    sectioningFitToSelection: StateRef<boolean>;
+    sectioningReset: StateRef<boolean>;
+    sectioningShow: StateRef<boolean>;
+    sectioningAuto: StateRef<boolean>;
+    sectioningSettings: StateRef<boolean>;
+    visibilityClearSelection: StateRef<boolean>;
+    visibilityShowAll: StateRef<boolean>;
+    visibilityToggle: StateRef<boolean>;
+    visibilityIsolate: StateRef<boolean>;
+    visibilityAutoIsolate: StateRef<boolean>;
+    visibilitySettings: StateRef<boolean>;
+    miscSettings: StateRef<boolean>;
+    miscHelp: StateRef<boolean>;
 };
 
 /**
@@ -3037,10 +3197,6 @@ type WebglViewerApi = {
      * Control bar API managing the content and behavior of the control bar.
      */
     controlBar: ControlBarApi;
-    /**
-     * Settings API managing settings applied to the viewer.
-     */
-    settings: SettingsApi<WebglSettings>;
     /**
      * Message API to interact with the loading box.
      */
@@ -3063,6 +3219,16 @@ type WebglViewerApi = {
      * API to interact with the section box panel.
      */
     sectionBoxPanel: GenericPanelApi;
+    /**
+     * Reactive UI visibility controls. Each key from the settings `ui` block
+     * is a `StateRef<boolean>` that can be read, written, and subscribed to.
+     *
+     * @example
+     * viewer.ui.bimTree.set(false)             // Hide BIM tree
+     * viewer.ui.controlBar.get()               // Read current state
+     * viewer.ui.axes.onChange.subscribe(…)      // Subscribe to changes
+     */
+    ui: WebglUiApi;
     /**
      * Cleans up and releases resources used by the viewer.
      */
@@ -3076,10 +3242,10 @@ type WebglViewerApi = {
  * @param container An optional container or DOM element. If none is provided, one will be created.
  * @param settings React UI feature toggles (panels, buttons). See {@link WebglSettings}.
  * @param coreSettings Core renderer config (camera, materials, lighting). See {@link ViewerSettings}.
- * @returns A promise resolving to the viewer API.
+ * @returns The viewer API.
  *
  * @example
- * const viewer = await React.Webgl.createViewer(document.getElementById('app'))
+ * const viewer = React.Webgl.createViewer(document.getElementById('app'))
  * const vim = await viewer.load({ url: 'model.vim' }).getVim()
  * viewer.framing.frameScene.call()
  */
@@ -3091,12 +3257,11 @@ declare function createWebglViewer(container?: Container | HTMLElement, settings
  * @param onMount A callback function triggered when the viewer is mounted. Receives a reference to the Vim viewer.
  * @param settings Optional settings for configuring the Vim viewer's behavior.
  */
-declare function WebglViewerComponent(props: {
+declare const WebglViewerComponent: React.ForwardRefExoticComponent<{
     container: Container;
     viewer: IWebglViewer;
-    onMount: (viewer: WebglViewerApi) => void;
     settings?: PartialWebglSettings;
-}): react_jsx_runtime.JSX.Element;
+} & React.RefAttributes<WebglViewerApi>>;
 
 declare namespace React_Webgl {
   export { WebglViewerComponent as ViewerComponent, createWebglViewer as createViewer, getDefaultSettings };
@@ -3148,11 +3313,6 @@ type UltraViewerApi = {
      * @see {@link IsolationApi}
      */
     isolation: IsolationApi;
-    /**
-     * Settings API managing UI feature toggles applied to the viewer.
-     * Use `update()` to modify settings at runtime.
-     */
-    settings: SettingsApi<UltraSettings>;
     /**
      * API to interact with the isolation panel.
      */
@@ -3161,6 +3321,15 @@ type UltraViewerApi = {
      * API to interact with the section box panel.
      */
     sectionBoxPanel: GenericPanelApi;
+    /**
+     * Reactive UI visibility controls. Each key from the settings `ui` block
+     * is a `StateRef<boolean>` that can be read, written, and subscribed to.
+     *
+     * @example
+     * viewer.ui.logo.set(false)                // Hide logo
+     * viewer.ui.controlBar.get()               // Read current state
+     */
+    ui: UltraUiApi;
     /**
      * Disposes of the viewer and its resources.
      */
@@ -3186,10 +3355,10 @@ type UltraViewerApi = {
  *
  * @param container An optional container or DOM element. If none is provided, one will be created.
  * @param settings React UI feature toggles (panels, buttons). See {@link UltraSettings}.
- * @returns A promise resolving to the viewer API.
+ * @returns The viewer API.
  *
  * @example
- * const viewer = await React.Ultra.createViewer(document.getElementById('app'))
+ * const viewer = React.Ultra.createViewer(document.getElementById('app'))
  * await viewer.core.connect({ url: 'wss://server:8080' })
  * viewer.load({ url: 'model.vim' })
  */
@@ -3201,12 +3370,11 @@ declare function createUltraViewer(container?: Container | HTMLElement, settings
  * @param onMount A callback function triggered when the viewer is mounted. Receives a reference to the Vim viewer.
  * @param settings Optional settings for configuring the Vim viewer's behavior.
  */
-declare function UltraViewerComponent(props: {
+declare const UltraViewerComponent: React.ForwardRefExoticComponent<{
     container: Container;
     core: IUltraViewer;
     settings?: PartialUltraSettings;
-    onMount: (viewer: UltraViewerApi) => void;
-}): react_jsx_runtime.JSX.Element;
+} & React.RefAttributes<UltraViewerApi>>;
 
 declare namespace React_Ultra {
   export { UltraViewerComponent as ViewerComponent, createUltraViewer as createViewer, getDefaultUltraSettings };
@@ -3253,18 +3421,13 @@ declare namespace React_ControlBar {
   export type { ControlBarApi, ControlBarCustomization, IControlBarButton, IControlBarSection };
 }
 
+type SettingsCustomization = (items: GenericEntryType[]) => GenericEntryType[];
+
 declare namespace React_Settings {
   export { isFalse, isTrue };
-  export type { SettingsBox, SettingsCustomization, SettingsElement, SettingsItem, SettingsSubtitle, SettingsToggle, UserBoolean };
+  export type { SettingsCustomization, GenericEntryType as SettingsItem, UserBoolean };
 }
 
-declare const vcColorPrimary = "vc-text-[#212733]";
-declare const vcColorSecondary = "vc-text-[#787C83]";
-declare const vcColorLink = "vc-text-[#0590CC]";
-declare const vcLink = "vc-text-[#0590CC] vc-underline";
-declare const vcLabel = "vc-text-[#3F444F]";
-declare const vcRoboto = "vc-font-['Roboto',sans-serif]";
-declare function footer(): react_jsx_runtime.JSX.Element;
 declare function mainText(text: JSX.Element): react_jsx_runtime.JSX.Element;
 declare function detailText(text: string): react_jsx_runtime.JSX.Element;
 declare function bold(text: string): react_jsx_runtime.JSX.Element;
@@ -3273,6 +3436,7 @@ declare function dotList(elements: (JSX.Element | string)[]): react_jsx_runtime.
 declare function numList(elements: (JSX.Element | string)[]): react_jsx_runtime.JSX.Element;
 declare function bullet(label: string, value: string): react_jsx_runtime.JSX.Element;
 declare function link(url: string, text: string): react_jsx_runtime.JSX.Element;
+declare function footer(): react_jsx_runtime.JSX.Element;
 
 declare namespace React_Errors_Style {
   export {
@@ -3285,12 +3449,6 @@ declare namespace React_Errors_Style {
     mainText,
     numList,
     subTitle,
-    vcColorLink,
-    vcColorPrimary,
-    vcColorSecondary,
-    vcLabel,
-    vcLink,
-    vcRoboto,
   };
 }
 
@@ -3347,8 +3505,8 @@ type ViewerApi = WebglViewerApi | UltraViewerApi;
 
 declare namespace React {
   export { React_ContextMenu as ContextMenu, React_ControlBar as ControlBar, React_Errors as Errors, React_Icons as Icons, IsolationPanel, SectionBoxPanel, React_Settings as Settings, React_Ultra as Ultra, React_Webgl as Webgl, createContainer, createState };
-  export type { AugmentedElement, BimInfoPanelApi, Container, Data, DataCustomization, DataRender, Entry, FramingApi, FuncRef, GenericBoolEntry, GenericEntryType, GenericNumberEntry, GenericPanelApi, GenericTextEntry, Group, IsolationApi, LoadingBoxProps, MessageBoxProps, ModalApi, ModalProps, ProgressMode, Section, SectionBoxApi, SettingsApi, StateRef, ViewerApi, VisibilityStatus };
+  export type { AugmentedElement, BimInfoPanelApi, Container, Data, DataCustomization, DataRender, Entry, FramingApi, FuncRef, GenericBoolEntry, GenericEntryType, GenericNumberEntry, GenericPanelApi, GenericTextEntry, Group, IsolationApi, LoadingBoxProps, MessageBoxProps, ModalApi, ModalProps, ProgressMode, Section, SectionBoxApi, StateRef, UltraUiApi, ViewerApi, VisibilityStatus, WebglUiApi };
 }
 
 export { Core as Core, React as React };
-export type { ISignal, ISimpleEvent };
+export type { ISignal$1 as ISignal, ISimpleEvent };