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

package/dist/vim-web.js

@@ -45819,7 +45819,7 @@ class ElementNoMapping {
   }
 }
 class ElementMapping {
-  constructor(instances, instanceToElement, elementIds2, instanceMeshes) {
+  constructor(instances, instanceToElement, elementIds, instanceMeshes) {
     __publicField(this, "_instanceToElement");
     __publicField(this, "_instanceMeshes");
     __publicField(this, "_elementToInstances");
@@ -45832,17 +45832,17 @@ class ElementMapping {
     this._elementToInstances = ElementMapping.invertMap(
       this._instanceToElement
     );
-    this._elementIds = elementIds2;
-    this._elementIdToElements = ElementMapping.invertArray(elementIds2);
+    this._elementIds = elementIds;
+    this._elementIdToElements = ElementMapping.invertArray(elementIds);
     this._instanceMeshes = instanceMeshes;
   }
   static async fromG3d(g3d2, bim) {
     const instanceToElement = await bim.node.getAllElementIndex();
-    const elementIds2 = await bim.element.getAllId();
+    const elementIds = await bim.element.getAllId();
     return new ElementMapping(
       Array.from(g3d2.instanceNodes),
       instanceToElement,
-      elementIds2,
+      elementIds,
       g3d2.instanceMeshes
     );
   }
@@ -60796,8 +60796,8 @@ class Vim2 {
     if (nodes === "all") {
       this._rpc.RPCClearMaterialOverrides(this._handle);
     } else {
-      const ids = new Array(nodes.length).fill(MaterialHandles.Invalid);
-      this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids);
+      const ids2 = new Array(nodes.length).fill(MaterialHandles.Invalid);
+      this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids2);
     }
   }
   updateMap(nodes, state) {
@@ -66801,6 +66801,25 @@ function hidden({ height, width, fill: fill2, className = "" }) {
     }
   );
 }
+function autoCamera({ height, width, fill: fill2 = "", className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: fill2,
+        d: "M 242.35934,69.720521 V 192.19034 c 0,9.46501 -7.97359,15.37204 -14.35248,10.67406 l -39.68884,-29.41993 v 8.38267 c 0,25.1595 -15.90243,45.64407 -35.51391,45.64407 H 48.520099 C 28.90861,227.51727 13.006195,206.98664 13.006195,181.80411 V 80.187338 c 0,-25.159506 15.902415,-45.644066 35.513904,-45.644066 H 152.55325 c 19.57566,0 35.51392,20.4385 35.51392,45.644066 v 8.382665 L 227.756,59.150074 c 6.33409,-4.801607 14.60334,1.162981 14.60334,10.570447 z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: "white",
+        d: "m 134.24221,179.28573 -6.38,-16.771 H 73.539201 l -6.38,17.135 c -2.492,6.684 -4.618,11.211 -6.38,13.581 -1.763,2.309 -4.649,3.464 -8.659,3.464 -3.403,0 -6.411,-1.246 -9.024,-3.737 -2.613,-2.492 -3.919,-5.317 -3.919,-8.477 0,-1.823 0.304,-3.706 0.911,-5.651 0.608,-1.944 1.611,-4.648 3.008,-8.112 l 34.18,-86.771005 c 0.972,-2.491 2.127,-5.469 3.463,-8.932 1.398,-3.525 2.856,-6.441 4.375,-8.75 1.58,-2.309 3.616,-4.163 6.107,-5.56 2.552005,-1.458 5.682005,-2.188 9.388009,-2.188 3.768,0 6.897,0.73 9.388,2.188 2.552,1.397 4.588,3.22 6.107,5.469 1.58,2.248 2.886,4.678 3.919,7.291 1.094,2.552 2.461,5.986 4.102,10.3 l 34.909,86.224005 c 2.734,6.562 4.101,11.332 4.101,14.31 0,3.099 -1.306,5.955 -3.919,8.568 -2.552,2.552 -5.651,3.828 -9.297,3.828 -2.126,0 -3.949,-0.395 -5.468,-1.185 -1.52,-0.729 -2.796,-1.732 -3.829,-3.008 -1.033,-1.337 -2.157,-3.342 -3.372,-6.016 -1.155,-2.734 -2.157,-5.134 -3.008,-7.2 z m -53.594009,-37.097 h 39.922009 l -20.143,-55.143005 z"
+      }
+    )
+  ] });
+}
 function orbit({ height, width, fill: fill2 = "", className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
@@ -67324,6 +67343,7 @@ function ghostDead({ height, width, fill: fill2, className }) {
 const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   arrowLeft,
+  autoCamera,
   camera,
   checkmark,
   close,
@@ -67470,7 +67490,7 @@ function AxesPanel(props) {
     );
   };
   const onHomeBtn = () => {
-    props.camera.reset();
+    props.camera.reset.call();
   };
   const btnStyle2 = "vim-axes-button vc-flex vc-items-center vc-justify-center vc-text-gray-medium vc-transition-all hover:vc-text-primary-royal";
   const btnIsolation = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -67561,15 +67581,17 @@ function createSection$1(section) {
   if (section.enable !== void 0 && !section.enable()) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `vim-control-bar-section ${section.style ?? sectionDefaultStyle}`, children: section.buttons.map((b) => createButton(b)) }, section.id);
 }
-const elementIds = {
+const ids = {
   // Sections
   sectionCamera: "controlBar.sectionCamera",
+  sectionInputs: "controlBar.sectionInputs",
   sectionActions: "controlBar.sectionActions",
   sectionTools: "controlBar.sectionTools",
   sectionSettings: "controlBar.sectionSettings",
   sectionMeasure: "controlBar.sectionMeasure",
   sectionSectionBox: "controlBar.sectionSectionBox",
   // Camera buttons
+  buttonCameraAuto: "controlBar.camera.auto",
   buttonCameraOrbit: "controlBar.camera.orbit",
   buttonCameraLook: "controlBarcamera.look",
   buttonCameraPan: "controlBar.camera.pan",
@@ -67591,7 +67613,7 @@ const elementIds = {
   buttonSectionBoxVisible: "controlBar.sectionBox.visible",
   buttonSectionBoxShrinkToSelection: "controlBar.sectionBox.shrinkToSelection",
   buttonSectionBoxAuto: "controlBar.sectionBox.auto",
-  buttonSectionBoxClip: "controlBar.sectionBox.clip",
+  buttonSectionBoxReset: "controlBar.sectionBox.reset",
   buttonSectionBoxSettings: "controlBar.sectionBox.settings"
 };
 function ControlBar(props) {
@@ -67623,7 +67645,7 @@ const controlBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   buttonExpandStyle,
   createButton,
   createSection: createSection$1,
-  elementIds,
+  ids,
   sectionBlueStyle,
   sectionDefaultStyle,
   sectionNoPadStyle
@@ -67811,12 +67833,12 @@ function getMeasureState(viewer, cursor) {
 }
 function controlBarSectionBox(section, hasSelection) {
   return {
-    id: elementIds.sectionSectionBox,
+    id: ids.sectionSectionBox,
     style: section.enable.get() ? sectionNoPadStyle : sectionDefaultStyle,
     //enable: () => section.getEnable(),
     buttons: [
       {
-        id: elementIds.buttonSectionBoxEnable,
+        id: ids.buttonSectionBoxEnable,
         tip: "Enable Section Box",
         isOn: () => section.enable.get(),
         style: (on) => buttonExpandStyle(on),
@@ -67824,7 +67846,7 @@ function controlBarSectionBox(section, hasSelection) {
         icon: sectionBox
       },
       {
-        id: elementIds.buttonSectionBoxShrinkToSelection,
+        id: ids.buttonSectionBoxShrinkToSelection,
         tip: "Fit Section",
         enabled: () => section.enable.get(),
         isOn: () => hasSelection,
@@ -67833,7 +67855,7 @@ function controlBarSectionBox(section, hasSelection) {
         icon: sectionBoxShrink
       },
       {
-        id: elementIds.buttonSectionBoxClip,
+        id: ids.buttonSectionBoxReset,
         tip: "Reset Section",
         enabled: () => section.enable.get(),
         style: (on) => buttonDefaultStyle(on),
@@ -67841,7 +67863,7 @@ function controlBarSectionBox(section, hasSelection) {
         icon: sectionBoxReset
       },
       {
-        id: elementIds.buttonSectionBoxVisible,
+        id: ids.buttonSectionBoxVisible,
         tip: "Show Section Box",
         enabled: () => section.enable.get(),
         isOn: () => section.visible.get(),
@@ -67850,7 +67872,7 @@ function controlBarSectionBox(section, hasSelection) {
         icon: visible
       },
       {
-        id: elementIds.buttonSectionBoxAuto,
+        id: ids.buttonSectionBoxAuto,
         tip: "Auto Section",
         enabled: () => section.enable.get(),
         isOn: () => section.auto.get(),
@@ -67859,7 +67881,7 @@ function controlBarSectionBox(section, hasSelection) {
         icon: sectionBoxAuto
       },
       {
-        id: elementIds.buttonSectionBoxSettings,
+        id: ids.buttonSectionBoxSettings,
         tip: "Section Settings",
         enabled: () => section.enable.get(),
         isOn: () => section.showOffsetPanel.get(),
@@ -67873,12 +67895,12 @@ function controlBarSectionBox(section, hasSelection) {
 function controlBarPointer(viewer, camera2, settings2, section) {
   const pointer = getPointerState(viewer);
   return {
-    id: elementIds.sectionCamera,
+    id: ids.sectionInputs,
     enable: () => anyUiCursorButton(settings2),
     style: sectionDefaultStyle,
     buttons: [
       {
-        id: elementIds.buttonCameraOrbit,
+        id: ids.buttonCameraOrbit,
         enabled: () => isTrue(settings2.ui.orbit),
         tip: "Orbit",
         action: () => pointer.onButton("orbit"),
@@ -67887,7 +67909,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraLook,
+        id: ids.buttonCameraLook,
         enabled: () => isTrue(settings2.ui.lookAround),
         tip: "Look Around",
         action: () => pointer.onButton("look"),
@@ -67896,7 +67918,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraPan,
+        id: ids.buttonCameraPan,
         enabled: () => isTrue(settings2.ui.pan),
         tip: "Pan",
         action: () => pointer.onButton("pan"),
@@ -67905,7 +67927,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraZoom,
+        id: ids.buttonCameraZoom,
         enabled: () => isTrue(settings2.ui.zoom),
         tip: "Zoom",
         action: () => pointer.onButton("zoom"),
@@ -67914,7 +67936,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraZoomWindow,
+        id: ids.buttonCameraZoomWindow,
         enabled: () => isTrue(settings2.ui.zoomWindow),
         tip: "Zoom Window",
         action: () => {
@@ -67929,21 +67951,21 @@ function controlBarPointer(viewer, camera2, settings2, section) {
 }
 function controlBarActions(camera2, settings2, isolation, measure$1) {
   return {
-    id: elementIds.sectionActions,
+    id: ids.sectionActions,
     enable: () => true,
     style: sectionDefaultStyle,
     buttons: [
       {
-        id: elementIds.buttonZoomToFit,
+        id: ids.buttonZoomToFit,
         enabled: () => isTrue(settings2.ui.zoomToFit),
         tip: "Zoom to Fit",
-        action: () => camera2.frameContext(),
+        action: () => camera2.frameSelection.call(),
         icon: frameSelection,
         isOn: () => false,
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonToggleIsolation,
+        id: ids.buttonToggleIsolation,
         enabled: () => isTrue(settings2.ui.toggleIsolation),
         tip: "Toggle Isolation",
         action: () => isolation.toggle("controlBar"),
@@ -67951,7 +67973,7 @@ function controlBarActions(camera2, settings2, isolation, measure$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonMeasure,
+        id: ids.buttonMeasure,
         enabled: () => isTrue(settings2.ui.measuringMode),
         isOn: () => measure$1.active,
         tip: "Measuring Mode",
@@ -67965,12 +67987,12 @@ function controlBarActions(camera2, settings2, isolation, measure$1) {
 function controlBarSettings(modal, side, settings$1) {
   const fullScreen = getFullScreenState();
   return {
-    id: elementIds.sectionSettings,
+    id: ids.sectionSettings,
     enable: () => anyUiSettingButton(settings$1),
     style: sectionDefaultStyle,
     buttons: [
       {
-        id: elementIds.buttonProjectInspector,
+        id: ids.buttonProjectInspector,
         enabled: () => isTrue(settings$1.ui.projectInspector) && (isTrue(settings$1.ui.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
         tip: "Project Inspector",
         action: () => side.toggleContent("bim"),
@@ -67978,7 +68000,7 @@ function controlBarSettings(modal, side, settings$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonSettings,
+        id: ids.buttonSettings,
         enabled: () => isTrue(settings$1.ui.settings),
         tip: "Settings",
         action: () => side.toggleContent("settings"),
@@ -67986,7 +68008,7 @@ function controlBarSettings(modal, side, settings$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonHelp,
+        id: ids.buttonHelp,
         enabled: () => isTrue(settings$1.ui.help),
         tip: "Help",
         action: () => modal.help(true),
@@ -67994,7 +68016,7 @@ function controlBarSettings(modal, side, settings$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonMaximize,
+        id: ids.buttonMaximize,
         enabled: () => isTrue(settings$1.ui.maximise) && settings$1.capacity.canGoFullScreen,
         tip: fullScreen.get() ? "Minimize" : "Fullscreen",
         action: () => fullScreen.toggle(),
@@ -68004,15 +68026,34 @@ function controlBarSettings(modal, side, settings$1) {
     ]
   };
 }
+function controlBarCamera(camera2) {
+  return {
+    id: ids.sectionCamera,
+    enable: () => true,
+    style: sectionDefaultStyle,
+    buttons: [
+      {
+        id: ids.buttonCameraAuto,
+        tip: "Auto Camera",
+        isOn: () => camera2.autoCamera.get(),
+        action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
+        icon: autoCamera,
+        style: buttonDefaultStyle
+      }
+    ]
+  };
+}
 function useControlBar(viewer, camera2, modal, side, isolation, cursor, settings2, section, customization) {
   const measure2 = getMeasureState(viewer, cursor);
   const pointerSection = controlBarPointer(viewer, camera2, settings2);
   const actionSection = controlBarActions(camera2, settings2, isolation, measure2);
   const sectionBoxSection = controlBarSectionBox(section, viewer.selection.count > 0);
   const settingsSection = controlBarSettings(modal, side, settings2);
+  const cameraSection = controlBarCamera(camera2);
   let controlBarSections = [
     pointerSection,
     actionSection,
+    cameraSection,
     sectionBoxSection,
     // Optional section
     settingsSection
@@ -72038,11 +72079,11 @@ function VimContextMenu(props) {
     e.stopPropagation();
   };
   const onCameraResetBtn = (e) => {
-    camera2.reset();
+    camera2.reset.call();
     e.stopPropagation();
   };
   const onCameraFrameBtn = (e) => {
-    camera2.frameContext();
+    camera2.frameSelection.call();
     e.stopPropagation();
   };
   const onSelectionIsolateBtn = (e) => {
@@ -72374,7 +72415,7 @@ function BimTree(props) {
             createInteractiveElementProps: (item, treeId, actions, renderFlags) => ({
               onKeyUp: (e) => {
                 if (e.key === "f") {
-                  props.camera.frameContext();
+                  props.camera.frameSelection.call();
                 }
                 if (e.key === "Escape") {
                   props.viewer.selection.clear();
@@ -72417,7 +72458,7 @@ function BimTree(props) {
           },
           onPrimaryAction: (item, _) => {
             if (doubleClick.isDoubleClick(item.index)) {
-              props.camera.frameSelection();
+              props.camera.frameSelection.call();
             }
           },
           onFocusItem: (item) => {
@@ -74708,7 +74749,7 @@ class ComponentInputs {
         return true;
       }
       case KEYS.KEY_F: {
-        this._camera.frameContext();
+        this._camera.frameSelection.call();
         return true;
       }
       case KEYS.KEY_I: {
@@ -74902,7 +74943,7 @@ class Isolation {
     if (!this._settings.isolation.enable) return;
     this._isolation = objects ?? [];
     this._apply(source);
-    this._camera.frameVisibleObjects();
+    this._camera.frameVisibleObjects.call();
   }
   /**
    * Toggles isolation by using the current selection.
@@ -74917,7 +74958,7 @@ class Isolation {
     if (!this._settings.isolation.enable) return;
     this._isolation = [...this._viewer.selection.objects].filter((o) => o.type === "Object3D");
     this._apply(source);
-    this._camera.frameVisibleObjects();
+    this._camera.frameVisibleObjects.call();
     this._viewer.selection.clear();
   }
   /**
@@ -75017,74 +75058,139 @@ class Isolation {
     return objects;
   }
 }
-class ComponentCamera {
-  constructor(viewer) {
-    __publicField(this, "_viewer");
-    this._viewer = viewer;
-  }
-  /**
-   * Resets the camera to its initial position.
-   */
-  reset() {
-    this._viewer.camera.lerp(1).reset();
-  }
-  /**
-   * Frames selected elements if there is an active selection; otherwise, frames all visible objects.
-   * @param duration Optional duration of the camera movement animation (default: 1).
-   */
-  frameContext(duration = 1) {
-    if (this._viewer.selection.count > 0) {
-      this.frameSelection(duration);
-    } else {
-      this.frameVisibleObjects(void 0, duration);
+function useStateRef(initialValue) {
+  const [value, setValue] = useState(initialValue);
+  const ref = useRef(initialValue);
+  const event = useRef(new distExports.SimpleEventDispatcher());
+  const validate = useRef((value2) => value2);
+  const confirm = useRef((value2) => value2);
+  const set3 = (value2) => {
+    const finalValue = validate.current(value2) ?? value2;
+    if (finalValue === void 0) return;
+    if (finalValue === ref.current) return;
+    ref.current = finalValue;
+    setValue(finalValue);
+    event.current.dispatch(finalValue);
+  };
+  return {
+    get() {
+      return ref.current;
+    },
+    set: set3,
+    confirm() {
+      set3(confirm.current(ref.current));
+    },
+    useOnChange(on) {
+      useEffect(() => {
+        return event.current.subscribe(on);
+      }, []);
+    },
+    useMemo(on, deps) {
+      return useMemo(() => on(value), [...deps || [], value]);
+    },
+    useValidate(on) {
+      useEffect(() => {
+        validate.current = on;
+      }, []);
+    },
+    useConfirm(on) {
+      useEffect(() => {
+        confirm.current = on;
+      }, []);
     }
-  }
-  /**
-   * Frames selected elements if there is an active selection; otherwise, does nothing.
-   * @param duration Optional duration of the camera movement animation (default: 1).
-   */
-  frameSelection(duration = 1) {
-    if (this._viewer.selection.count === 0) return;
-    const box = this._viewer.selection.getBoundingBox();
-    if (box && this._viewer.gizmos.sectionBox.box.intersectsBox(box)) {
-      const movement = duration === 0 ? this._viewer.camera.snap() : this._viewer.camera.lerp(duration);
-      movement.frame(box);
+  };
+}
+function useActionRef(action) {
+  const ref = useRef(action);
+  return {
+    call() {
+      ref == null ? void 0 : ref.current();
+    },
+    set(func) {
+      ref.current = func;
     }
-  }
-  /**
-  * Frames all visible objects in the scene.
-  * @param source Optional VIM to specify the source of objects to frame.
-  * @param duration Duration of the camera movement animation (default: 1).
-  */
-  frameVisibleObjects(source, duration = 1) {
-    const movement = duration === 0 ? this._viewer.camera.snap() : this._viewer.camera.lerp(duration);
-    const box = this.getVisibleBoundingBox(source);
-    movement.frame(box);
-  }
-  /**
-   * Returns the bounding box of all visible objects.
-   * @param source Optional VIM to specify the source of visible objects.
-   * @returns The bounding box of all visible objects.
-   */
-  getVisibleBoundingBox(source) {
-    let box;
-    const vimBoxUnion = (vim) => {
-      for (const obj of vim.getObjects()) {
-        if (!obj.visible) continue;
-        const b = obj.getBoundingBox();
-        if (!b) continue;
-        box = box ? box.union(b) : b == null ? void 0 : b.clone();
-      }
-    };
-    if (source) {
-      vimBoxUnion(source);
-    } else {
-      for (const vim of this._viewer.vims) {
-        vimBoxUnion(vim);
+  };
+}
+function useArgActionRef(action) {
+  const ref = useRef(action);
+  return {
+    call(arg) {
+      ref == null ? void 0 : ref.current(arg);
+    },
+    set(func) {
+      ref.current = func;
+    }
+  };
+}
+function useFuncRef(func) {
+  const ref = useRef(func);
+  return {
+    call() {
+      return ref == null ? void 0 : ref.current();
+    },
+    set(func2) {
+      ref.current = func2;
+    }
+  };
+}
+function useCamera(viewer) {
+  const autoCamera2 = useStateRef(false);
+  autoCamera2.useOnChange((v) => {
+    if (v) {
+      frameSelection2.call();
+    }
+  });
+  useEffect(() => {
+    viewer.selection.onValueChanged.sub(() => {
+      if (autoCamera2.get()) {
+        frameSelection2.call();
       }
+    });
+  }, []);
+  const reset = useActionRef(() => viewer.camera.lerp(1).reset());
+  const frameSelection2 = useActionRef(() => {
+    if (viewer.selection.count === 0) {
+      frameVisibleObjects.call();
+      return;
+    }
+    const box = viewer.selection.getBoundingBox();
+    if (!box) {
+      return;
+    }
+    box.intersect(viewer.gizmos.sectionBox.box);
+    if (box.isEmpty()) {
+      return;
+    }
+    viewer.camera.lerp(1).frame(box);
+  });
+  const frameVisibleObjects = useActionRef(() => {
+    const movement = viewer.camera.lerp(1);
+    const box = getVisibleBoundingBox(viewer);
+    movement.frame(box);
+  });
+  return {
+    autoCamera: autoCamera2,
+    reset,
+    frameSelection: frameSelection2,
+    frameVisibleObjects
+  };
+}
+function getVisibleBoundingBox(viewer, source) {
+  let box;
+  const vimBoxUnion = (vim) => {
+    for (const obj of vim.getObjects()) {
+      if (!obj.visible) continue;
+      const b = obj.getBoundingBox();
+      if (!b) continue;
+      box = box ? box.union(b) : b == null ? void 0 : b.clone();
+    }
+  };
+  {
+    for (const vim of viewer.vims) {
+      vimBoxUnion(vim);
     }
-    return box;
   }
+  return box;
 }
 function createContainer(element) {
   let root = element;
@@ -75797,70 +75903,6 @@ function addBox(b1, b2) {
   r.max.z += b2.max.z;
   return r;
 }
-function useStateRef(initialValue) {
-  const [value, setValue] = useState(initialValue);
-  const ref = useRef(initialValue);
-  const event = useRef(new distExports.SimpleEventDispatcher());
-  const validate = useRef((value2) => value2);
-  const confirm = useRef((value2) => value2);
-  const set3 = (value2) => {
-    const finalValue = validate.current(value2) ?? value2;
-    if (finalValue === void 0) return;
-    if (finalValue === ref.current) return;
-    ref.current = finalValue;
-    setValue(finalValue);
-    event.current.dispatch(finalValue);
-  };
-  return {
-    get() {
-      return ref.current;
-    },
-    set: set3,
-    confirm() {
-      set3(confirm.current(ref.current));
-    },
-    useOnChange(on) {
-      useEffect(() => {
-        return event.current.subscribe(on);
-      }, []);
-    },
-    useMemo(on, deps) {
-      return useMemo(() => on(value), [...deps || [], value]);
-    },
-    useValidate(on) {
-      useEffect(() => {
-        validate.current = on;
-      }, []);
-    },
-    useConfirm(on) {
-      useEffect(() => {
-        confirm.current = on;
-      }, []);
-    }
-  };
-}
-function useArgActionRef(action) {
-  const ref = useRef(action);
-  return {
-    call(arg) {
-      ref == null ? void 0 : ref.current(arg);
-    },
-    set(func) {
-      ref.current = func;
-    }
-  };
-}
-function useFuncRef(func) {
-  const ref = useRef(func);
-  return {
-    call() {
-      return ref == null ? void 0 : ref.current();
-    },
-    set(func2) {
-      ref.current = func2;
-    }
-  };
-}
 function useSectionBox(adapter) {
   const enable = useStateRef(false);
   const visible2 = useStateRef(false);
@@ -75993,7 +76035,7 @@ function VimComponent(props) {
   var _a2;
   const settings2 = useSettings(props.viewer, props.settings ?? {});
   const modal = useModal(settings2.value.capacity.canFollowUrl);
-  const camera2 = useMemo(() => new ComponentCamera(props.viewer), []);
+  const camera2 = useCamera(props.viewer);
   const cursor = useMemo(() => new CursorManager(props.viewer), []);
   const loader = useRef(new ComponentLoader(props.viewer, modal));
   const [isolation] = useState(() => new Isolation(props.viewer, camera2, settings2.value));
@@ -76494,15 +76536,26 @@ function createUltraComponent(container) {
 function UltraComponent(props) {
   const modal = useModal(true);
   const sectionBox2 = useUltraSectionBox(props.viewer);
-  const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, (_2) => _2);
   const side = useSideState(true, 400);
   const [_, setSelectState] = useState(0);
+  const [controlBarCustom, setControlBarCustom] = useState(() => (c) => c);
+  const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, (_2) => _2);
   useEffect(() => {
     props.viewer.onStateChanged.subscribe((state) => updateModal(modal, state));
     props.viewer.selection.onValueChanged.subscribe(() => {
       setSelectState((i) => (i + 1) % 2);
     });
-    props.onMount(createComponentRef(props.viewer, modal, sectionBox2));
+    props.onMount({
+      viewer: props.viewer,
+      modal,
+      sectionBox: sectionBox2,
+      dispose: () => {
+      },
+      controlBar: {
+        customize: (v) => setControlBarCustom(() => v)
+      },
+      load: patchLoad(props.viewer, modal)
+    });
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
@@ -76512,18 +76565,28 @@ function UltraComponent(props) {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ControlBar,
           {
-            content: controlBar2,
+            content: controlBarCustom(controlBar2),
             show: true
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBox2 })
       ] });
     } }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ReactTooltip,
+      {
+        multiline: true,
+        arrowColor: "transparent",
+        type: "light",
+        className: "!vc-max-w-xs !vc-border !vc-border-solid !vc-border-gray-medium !vc-bg-white !vc-text-xs !vc-text-gray-darkest !vc-opacity-100 !vc-shadow-[2px_6px_15px_rgba(0,0,0,0.3)] !vc-transition-opacity",
+        delayShow: 200
+      }
+    )
   ] });
 }
-function createComponentRef(viewer, modal, sectionBox2) {
-  function load(source) {
+function patchLoad(viewer, modal) {
+  return function load(source) {
     const request2 = viewer.loadVim(source);
     void updateProgress(request2, modal);
     void request2.getResult().then(
@@ -76538,18 +76601,11 @@ function createComponentRef(viewer, modal, sectionBox2) {
       }
     );
     return request2;
-  }
-  return {
-    viewer,
-    modal,
-    sectionBox: sectionBox2,
-    dispose: () => {
-    },
-    load
   };
 }
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  ControlBar: controlBar,
   UltraComponent,
   createUltraComponent
 }, Symbol.toStringTag, { value: "Module" }));