WIP: Upgrade to THREE 155: Upgrade OrbitControls

packages/playground/package.json

@@ -31,13 +31,14 @@
     "@types/node": "^15.6.2",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
+    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "fast-glob": "^3.3.0",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "^5.3.11",
     "theatric": "workspace:*",
     "three": "^0.155.0",
     "typescript": "^4.4.2",

packages/playground/src/shared/three-basic/ThreeScene.tsx

@@ -10,7 +10,7 @@ import {
   RawShaderMaterial,
   Scene,
   ShaderMaterial,
-  SphereBufferGeometry,
+  SphereGeometry,
   Vector2,
   Vector3,
   WebGLRenderer,
@@ -190,7 +190,7 @@ export default function ThreeScene(props: ThreeSceneProps) {
     light.position.set(1, 5, 4)
     scene.add(light)
 
-    mesh = new Mesh(new SphereBufferGeometry(3), new MeshPhongMaterial())
+    mesh = new Mesh(new SphereGeometry(3), new MeshPhongMaterial())
     scene.add(mesh)
 
     // RAF

packages/r3f/package.json

@@ -56,8 +56,8 @@
     "@types/node": "^15.6.2",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
-    "@types/styled-components": "^5.1.9",
+    "@types/styled-components": "^5.1.26",
-    "@types/three": "0.131.0",
+    "@types/three": "0.155.0",
     "esbuild": "^0.18.17",
     "esbuild-register": "^3.4.2",
     "lodash-es": "^4.17.21",
@@ -66,18 +66,18 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.2.0",
-    "react-merge-refs": "^1.1.0",
+    "react-merge-refs": "^2.0.2",
-    "react-shadow": "^19.0.3",
+    "react-shadow": "^20.4.0",
-    "react-use-measure": "^2.0.4",
+    "react-use-measure": "^2.1.1",
     "reakit": "^1.3.8",
-    "styled-components": "^5.3.5",
+    "styled-components": "^5.3.11",
     "three": "0.155.0",
     "three-stdlib": "^2.24.1",
     "typescript": "^4.4.2",
     "zustand": "^3.5.1"
   },
   "peerDependencies": {
-    "@react-three/fiber": ">=7.0.6",
+    "@react-three/fiber": "^8.13.6",
     "@theatre/core": "*",
     "@theatre/studio": "*",
     "react": ">=17.0.2",

packages/r3f/src/drei/OrthographicCamera.tsx

@@ -4,7 +4,7 @@ import type {
   Object3D,
 } from 'three'
 import {useFrame, useThree} from '@react-three/fiber'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import {editable} from '../index'
 import {Vector3} from 'three'
 import type {MutableRefObject} from 'react'

packages/r3f/src/drei/PerspectiveCamera.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type {PerspectiveCamera as PerspectiveCameraImpl, Object3D} from 'three'
 import {useFrame, useThree} from '@react-three/fiber'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import {editable} from '../index'
 import {Vector3} from 'three'
 import {editorStore} from '../main/store'

packages/r3f/src/extension/components/OrbitControls/OrbitControlsImpl.ts

@@ -1,8 +1,6 @@
-/* eslint-disable */
+import type {Matrix4} from 'three'
 import {
-  Camera,
   EventDispatcher,
-  Matrix4,
   MOUSE,
   OrthographicCamera,
   PerspectiveCamera,
@@ -13,6 +11,9 @@ import {
   Vector3,
 } from 'three'
 
+// Almost an exact copy of https://github.com/pmndrs/three-stdlib/blob/4c04593ee49bb0b022025718844f3ce2b21f67bf/src/controls/OrbitControls.ts
+// The only change is that we added `(if (altKey)` at line 866 to only rotate if alt key is pressed
+
 // This set of controls performs orbiting, dollying (zooming), and panning.
 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
 //
@@ -23,8 +24,8 @@ import {
 const moduloWrapAround = (offset: number, capacity: number) =>
   ((offset % capacity) + capacity) % capacity
 
-class OrbitControlsImpl extends EventDispatcher {
+class OrbitControls extends EventDispatcher {
-  object: Camera
+  object: PerspectiveCamera | OrthographicCamera
   domElement: HTMLElement | undefined
   // Set to false to disable this control
   enabled = true
@@ -73,13 +74,20 @@ class OrbitControlsImpl extends EventDispatcher {
     BOTTOM: 'ArrowDown',
   }
   // Mouse buttons
-  mouseButtons = {
+  mouseButtons: Partial<{
+    LEFT: MOUSE
+    MIDDLE: MOUSE
+    RIGHT: MOUSE
+  }> = {
     LEFT: MOUSE.ROTATE,
     MIDDLE: MOUSE.DOLLY,
     RIGHT: MOUSE.PAN,
   }
   // Touch fingers
-  touches = {ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN}
+  touches: Partial<{
+    ONE: TOUCH
+    TWO: TOUCH
+  }> = {ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN}
   target0: Vector3
   position0: Vector3
   zoom0: number
@@ -93,13 +101,17 @@ class OrbitControlsImpl extends EventDispatcher {
   getDistance: () => number
 
   listenToKeyEvents: (domElement: HTMLElement) => void
+  stopListenToKeyEvents: () => void
   saveState: () => void
   reset: () => void
   update: () => void
   connect: (domElement: HTMLElement) => void
   dispose: () => void
 
-  constructor(object: Camera, domElement?: HTMLElement) {
+  constructor(
+    object: PerspectiveCamera | OrthographicCamera,
+    domElement?: HTMLElement,
+  ) {
     super()
 
     this.object = object
@@ -108,7 +120,7 @@ class OrbitControlsImpl extends EventDispatcher {
     // for reset
     this.target0 = this.target.clone()
     this.position0 = this.object.position.clone()
-    this.zoom0 = this.object instanceof PerspectiveCamera ? this.object.zoom : 1
+    this.zoom0 = this.object.zoom
 
     //
     // public methods
@@ -166,20 +178,22 @@ class OrbitControlsImpl extends EventDispatcher {
       this._domElementKeyEvents = domElement
     }
 
+    this.stopListenToKeyEvents = (): void => {
+      this._domElementKeyEvents.removeEventListener('keydown', onKeyDown)
+      this._domElementKeyEvents = null
+    }
+
     this.saveState = (): void => {
       scope.target0.copy(scope.target)
       scope.position0.copy(scope.object.position)
-      scope.zoom0 =
+      scope.zoom0 = scope.object.zoom
-        scope.object instanceof PerspectiveCamera ? scope.object.zoom : 1
     }
 
     this.reset = (): void => {
       scope.target.copy(scope.target0)
       scope.object.position.copy(scope.position0)
-      if (scope.object instanceof PerspectiveCamera) {
       scope.object.zoom = scope.zoom0
       scope.object.updateProjectionMatrix()
-      }
 
       scope.dispatchEvent(changeEvent)
 
@@ -191,12 +205,10 @@ class OrbitControlsImpl extends EventDispatcher {
     // this method is exposed, but perhaps it would be better if we can make it private...
     this.update = ((): (() => void) => {
       const offset = new Vector3()
+      const up = new Vector3(0, 1, 0)
 
       // so camera.up is the orbit axis
-      const quat = new Quaternion().setFromUnitVectors(
+      const quat = new Quaternion().setFromUnitVectors(object.up, up)
-        object.up,
-        new Vector3(0, 1, 0),
-      )
       const quatInverse = quat.clone().invert()
 
       const lastPosition = new Vector3()
@@ -207,6 +219,10 @@ class OrbitControlsImpl extends EventDispatcher {
       return function update(): boolean {
         const position = scope.object.position
 
+        // update new up direction
+        quat.setFromUnitVectors(object.up, up)
+        quatInverse.copy(quat).invert()
+
         offset.copy(position).sub(scope.target)
 
         // rotate offset to "y-axis-is-up" space
@@ -1059,8 +1075,11 @@ class OrbitControlsImpl extends EventDispatcher {
 //    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
 //    Pan - left mouse, or arrow keys / touch: one-finger move
 
-class MapControls extends OrbitControlsImpl {
+class MapControls extends OrbitControls {
-  constructor(object: Camera, domElement?: HTMLElement) {
+  constructor(
+    object: PerspectiveCamera | OrthographicCamera,
+    domElement?: HTMLElement,
+  ) {
     super(object, domElement)
 
     this.screenSpacePanning = false // pan orthogonal to world-space direction camera.up
@@ -1073,4 +1092,4 @@ class MapControls extends OrbitControlsImpl {
   }
 }
 
-export {OrbitControlsImpl, MapControls}
+export {OrbitControls as OrbitControlsImpl, MapControls}

packages/r3f/src/extension/components/OrbitControls/index.tsx

@@ -1,9 +1,12 @@
 import type {EventManager, ReactThreeFiber} from '@react-three/fiber'
 import {useFrame, useThree} from '@react-three/fiber'
 import * as React from 'react'
-import {forwardRef, useEffect, useMemo} from 'react'
 import type {Camera, Event} from 'three'
-import {OrbitControlsImpl as OrbitControlsImpl} from './OrbitControlsImpl'
+import {OrbitControlsImpl} from './OrbitControlsImpl'
+
+export type OrbitControlsChangeEvent = Event & {
+  target: EventTarget & {object: Camera}
+}
 
 export type OrbitControlsProps = Omit<
   ReactThreeFiber.Overwrite<
@@ -13,17 +16,21 @@ export type OrbitControlsProps = Omit<
       domElement?: HTMLElement
       enableDamping?: boolean
       makeDefault?: boolean
-      onChange?: (e?: Event) => void
+      onChange?: (e?: OrbitControlsChangeEvent) => void
       onEnd?: (e?: Event) => void
       onStart?: (e?: Event) => void
       regress?: boolean
       target?: ReactThreeFiber.Vector3
+      keyEvents?: boolean | HTMLElement
     }
   >,
   'ref'
 >
 
-export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
+export const OrbitControls = React.forwardRef<
+  OrbitControlsImpl,
+  OrbitControlsProps
+>(
   (
     {
       makeDefault,
@@ -31,6 +38,7 @@ export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
       regress,
       domElement,
       enableDamping = true,
+      keyEvents = false,
       onChange,
       onStart,
       onEnd,
@@ -38,56 +46,67 @@ export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
     },
     ref,
   ) => {
-    const invalidate = useThree(({invalidate}) => invalidate)
+    const invalidate = useThree((state) => state.invalidate)
-    const defaultCamera = useThree(({camera}) => camera)
+    const defaultCamera = useThree((state) => state.camera)
-    const gl = useThree(({gl}) => gl)
+    const gl = useThree((state) => state.gl)
-    const events = useThree(({events}) => events) as EventManager<HTMLElement>
+    const events = useThree(
-    const set = useThree(({set}) => set)
+      (state) => state.events,
-    const get = useThree(({get}) => get)
+    ) as EventManager<HTMLElement>
-    const performance = useThree(({performance}) => performance)
+    const setEvents = useThree((state) => state.setEvents)
-    const explCamera = camera || defaultCamera
+    const set = useThree((state) => state.set)
-    const explDomElement =
+    const get = useThree((state) => state.get)
-      domElement ||
+    const performance = useThree((state) => state.performance)
-      (typeof events.connected !== 'boolean' ? events.connected : gl.domElement)
+    const explCamera = (camera || defaultCamera) as
-    const controls = useMemo(
+      | THREE.OrthographicCamera
+      | THREE.PerspectiveCamera
+    const explDomElement = (domElement ||
+      events.connected ||
+      gl.domElement) as HTMLElement
+    const controls = React.useMemo(
       () => new OrbitControlsImpl(explCamera),
       [explCamera],
     )
 
     useFrame(() => {
       if (controls.enabled) controls.update()
-    })
+    }, -1)
 
-    useEffect(() => {
+    React.useEffect(() => {
-      const callback = (e: Event) => {
+      if (keyEvents) {
+        controls.connect(keyEvents === true ? explDomElement : keyEvents)
+      }
+
+      controls.connect(explDomElement)
+      return () => void controls.dispose()
+    }, [keyEvents, explDomElement, regress, controls, invalidate])
+
+    React.useEffect(() => {
+      const callback = (e: OrbitControlsChangeEvent) => {
         invalidate()
         if (regress) performance.regress()
         if (onChange) onChange(e)
       }
 
-      controls.connect(explDomElement!)
+      const onStartCb = (e: Event) => {
-      controls.addEventListener('change', callback)
+        if (onStart) onStart(e)
+      }
 
-      if (onStart) controls.addEventListener('start', onStart)
+      const onEndCb = (e: Event) => {
-      if (onEnd) controls.addEventListener('end', onEnd)
+        if (onEnd) onEnd(e)
+      }
+
+      controls.addEventListener('change', callback)
+      controls.addEventListener('start', onStartCb)
+      controls.addEventListener('end', onEndCb)
 
       return () => {
+        controls.removeEventListener('start', onStartCb)
+        controls.removeEventListener('end', onEndCb)
         controls.removeEventListener('change', callback)
-        if (onStart) controls.removeEventListener('start', onStart)
-        if (onEnd) controls.removeEventListener('end', onEnd)
-        controls.dispose()
       }
-    }, [
+    }, [onChange, onStart, onEnd, controls, invalidate, setEvents])
-      explDomElement,
-      onChange,
-      onStart,
-      onEnd,
-      regress,
-      controls,
-      invalidate,
-    ])
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (makeDefault) {
         const old = get().controls
         set({controls})
@@ -105,5 +124,4 @@ export const OrbitControls = forwardRef<OrbitControlsImpl, OrbitControlsProps>(
     )
   },
 )
-
 export {OrbitControlsImpl}

packages/r3f/src/main/editable.tsx

@@ -2,7 +2,7 @@ import type {ComponentProps, ComponentType, Ref, RefAttributes} from 'react'
 import {useMemo, useState} from 'react'
 import React, {forwardRef, useEffect, useLayoutEffect, useRef} from 'react'
 import {allRegisteredObjects, editorStore} from './store'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import useInvalidate from './useInvalidate'
 import {useCurrentSheet} from './SheetProvider'
 import defaultEditableFactoryConfig from './defaultEditableFactoryConfig'

theatre/package.json

@@ -41,7 +41,7 @@
     "@types/redux-actions": "^2.6.1",
     "@types/rollup": "0.54.0",
     "@types/shallowequal": "^1.1.1",
-    "@types/styled-components": "^5.1.9",
+    "@types/styled-components": "^5.1.26",
     "@types/uuid": "^8.3.0",
     "blob-compare": "1.1.0",
     "cross-env": "^7.0.3",
@@ -69,8 +69,8 @@
     "react-hot-toast": "^2.4.0",
     "react-icons": "^4.2.0",
     "react-is": "^17.0.2",
-    "react-merge-refs": "^1.1.0",
+    "react-merge-refs": "^2.0.2",
-    "react-shadow": "^19.0.3",
+    "react-shadow": "^20.4.0",
     "react-use": "^17.2.4",
     "react-use-gesture": "^9.1.3",
     "reakit": "^1.3.8",
@@ -80,7 +80,7 @@
     "rollup": "^2.56.3",
     "rollup-plugin-dts": "^4.0.0",
     "shallowequal": "^1.1.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "^5.3.11",
     "timing-function": "^0.2.3",
     "typescript": "^4.4.2",
     "uuid": "^8.3.2"

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import styled, {css} from 'styled-components'
 import {handlesFromCssCubicBezierArgs} from './shared'
 import SVGCurveSegment from './SVGCurveSegment'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import {COLOR_BASE} from './colors'
 import BasicPopover from '@theatre/studio/uiComponents/Popover/BasicPopover'
 

theatre/studio/src/uiComponents/form/BasicNumberInput.tsx

@@ -4,7 +4,7 @@ import {useEffect} from 'react'
 import {useState} from 'react'
 import React, {useMemo, useRef} from 'react'
 import styled from 'styled-components'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 import useDrag from '@theatre/studio/uiComponents/useDrag'

theatre/studio/src/uiComponents/form/BasicStringInput.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
-import type {MutableRefObject} from 'react';
+import type {MutableRefObject} from 'react'
-import { useEffect} from 'react'
+import {useEffect} from 'react'
 import React, {useMemo, useRef} from 'react'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -3,7 +3,7 @@ import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 import React from 'react'
 import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
 import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip'
-import mergeRefs from 'react-merge-refs'
+import {mergeRefs} from 'react-merge-refs'
 import MinimalTooltip from '@theatre/studio/uiComponents/Popover/MinimalTooltip'
 import ToolbarSwitchSelectContainer from './ToolbarSwitchSelectContainer'
 

yarn.lock

@@ -7934,8 +7934,8 @@ __metadata:
     "@types/node": ^15.6.2
     "@types/react": ^18.2.18
     "@types/react-dom": ^18.2.7
-    "@types/styled-components": ^5.1.9
+    "@types/styled-components": ^5.1.26
-    "@types/three": 0.131.0
+    "@types/three": 0.155.0
     esbuild: ^0.18.17
     esbuild-register: ^3.4.2
     lodash-es: ^4.17.21
@@ -7944,17 +7944,17 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     react-icons: ^4.2.0
-    react-merge-refs: ^1.1.0
+    react-merge-refs: ^2.0.2
-    react-shadow: ^19.0.3
+    react-shadow: ^20.4.0
-    react-use-measure: ^2.0.4
+    react-use-measure: ^2.1.1
     reakit: ^1.3.8
-    styled-components: ^5.3.5
+    styled-components: ^5.3.11
     three: 0.155.0
     three-stdlib: ^2.24.1
     typescript: ^4.4.2
     zustand: ^3.5.1
   peerDependencies:
-    "@react-three/fiber": ">=7.0.6"
+    "@react-three/fiber": ^8.13.6
     "@theatre/core": "*"
     "@theatre/studio": "*"
     react: ">=17.0.2"
@@ -8037,6 +8037,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tweenjs/tween.js@npm:~18.6.4":
+  version: 18.6.4
+  resolution: "@tweenjs/tween.js@npm:18.6.4"
+  checksum: 47208db3f6c32cde80284a852d0fca016284f90c4798eb4ebb2ebfc2e379504007bf0c031c2c33044df8a0878fd1942ebc4e0b7f5b8bcccf812b532ea1ee73eb
+  languageName: node
+  linkType: hard
+
 "@types/argparse@npm:1.0.38":
   version: 1.0.38
   resolution: "@types/argparse@npm:1.0.38"
@@ -8356,7 +8363,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/js-cookie@npm:2.2.6, @types/js-cookie@npm:^2.2.6":
+"@types/js-cookie@npm:^2.2.6":
   version: 2.2.6
   resolution: "@types/js-cookie@npm:2.2.6"
   checksum: 97c50ff6cd0a27409b028aad94b0c4eb5cc43623532a1bdbbcccdb200539593eff3cc7f0d874b6b9bee586167638e3a10093c811ff6603ff2a9639564c82b3b1
@@ -8796,14 +8803,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.9":
+"@types/stats.js@npm:*":
-  version: 5.1.9
+  version: 0.17.0
-  resolution: "@types/styled-components@npm:5.1.9"
+  resolution: "@types/stats.js@npm:0.17.0"
+  checksum: ac8dc5e622fa3b7cc37b9e21663193a2f171a4f5896285e4dfc04f2874acbb75edc958f077bffbd85b0ae358daa5bf4ecbc71210386a4300bff05d09435e35f9
+  languageName: node
+  linkType: hard
+
+"@types/styled-components@npm:^5.1.26":
+  version: 5.1.26
+  resolution: "@types/styled-components@npm:5.1.26"
   dependencies:
     "@types/hoist-non-react-statics": "*"
     "@types/react": "*"
     csstype: ^3.0.2
-  checksum: 99b5e069a01980b6baec40ecb273bcb51baabbb5ca12905e59d575ab8672e2db1b60a5cf3715214ccf99597d4094aebbaa5d5c54c314332332fe6ec41a19e6c6
+  checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
   languageName: node
   linkType: hard
 
@@ -8823,10 +8837,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/three@npm:0.131.0":
+"@types/three@npm:0.155.0":
-  version: 0.131.0
+  version: 0.155.0
-  resolution: "@types/three@npm:0.131.0"
+  resolution: "@types/three@npm:0.155.0"
-  checksum: 3d8def97d9a42855a7726f26bfd3339fc6f0565adf6206852cb2d6e4296af8372fb5dc9c39312fa8472824776664e16b20f860e7560697f0a3ec4e8db222dcb9
+  dependencies:
+    "@tweenjs/tween.js": ~18.6.4
+    "@types/stats.js": "*"
+    "@types/webxr": "*"
+    fflate: ~0.6.9
+    lil-gui: ~0.17.0
+    meshoptimizer: ~0.18.1
+  checksum: decd966b198ad0f24febcbd16a2c3ff584e7b0f7f89e70c2ecb8c1a7842598a51f79cd0965220aa74d216ab4474ca2f6e4023904aa7ca0f38c93fc8b99e2a0d6
   languageName: node
   linkType: hard
 
@@ -8885,7 +8906,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webxr@npm:^0.5.2":
+"@types/webxr@npm:*, @types/webxr@npm:^0.5.2":
   version: 0.5.2
   resolution: "@types/webxr@npm:0.5.2"
   checksum: e3387c3d64c140557796a4bcececd82d912a88f73ff8e34bf51c04d44078390fbe4756b256b2844b1ae4664a883d46f96bb40913d21f12e9ab484d9d8dbc68c3
@@ -9929,7 +9950,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xobotyi/scrollbar-width@npm:1.9.5, @xobotyi/scrollbar-width@npm:^1.9.5":
+"@xobotyi/scrollbar-width@npm:^1.9.5":
   version: 1.9.5
   resolution: "@xobotyi/scrollbar-width@npm:1.9.5"
   checksum: e880c8696bd6c7eedaad4e89cc7bcfcd502c22dc6c061288ffa7f5a4fe5dab4aa2358bdd68e7357bf0334dc8b56724ed9bee05e010b60d83a3bb0d855f3d886f
@@ -13207,7 +13228,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to-clipboard@npm:^3.2.0, copy-to-clipboard@npm:^3.3.1":
+"copy-to-clipboard@npm:^3.3.1":
   version: 3.3.1
   resolution: "copy-to-clipboard@npm:3.3.1"
   dependencies:
@@ -14134,7 +14155,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debounce@npm:^1.2.0, debounce@npm:^1.2.1":
+"debounce@npm:^1.2.1":
   version: 1.2.1
   resolution: "debounce@npm:1.2.1"
   checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
@@ -17478,7 +17499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fflate@npm:^0.6.9":
+"fflate@npm:^0.6.9, fflate@npm:~0.6.9":
   version: 0.6.10
   resolution: "fflate@npm:0.6.10"
   checksum: 96384bc4090987fe565c0de8204e3830f538144ec950576fea50aee1b42adbe9fc3ed5e7905dfa7979faaa20979def330dbebce548f3dcafc3e118cc9838526d
@@ -22510,6 +22531,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"lil-gui@npm:~0.17.0":
+  version: 0.17.0
+  resolution: "lil-gui@npm:0.17.0"
+  checksum: a6f33e90748ea98477f1f7af6d6cbdc4a1b38ce9da86d674d73f7b0bbdc7f3e947d81edee04c32f33fb28c69a108ba04c24270a8398064ffcc56ffeabc0a916e
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:2.0.5, lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5":
   version: 2.0.5
   resolution: "lilconfig@npm:2.0.5"
@@ -23175,6 +23203,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"meshoptimizer@npm:~0.18.1":
+  version: 0.18.1
+  resolution: "meshoptimizer@npm:0.18.1"
+  checksum: 101dbed8abd4cf167cdb7a0bc13db90dd0743332c689e43b18cc5254d238f0766750752432401fa63dc7e9e32399ef68daacf48f0d89db1484042c1761c7362d
+  languageName: node
+  linkType: hard
+
 "methods@npm:~1.1.2":
   version: 1.1.2
   resolution: "methods@npm:1.1.2"
@@ -23695,7 +23730,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"nano-css@npm:^5.2.1, nano-css@npm:^5.3.1":
+"nano-css@npm:^5.3.1":
   version: 5.3.1
   resolution: "nano-css@npm:5.3.1"
   dependencies:
@@ -25397,13 +25432,14 @@ fsevents@^1.2.7:
     "@types/node": ^15.6.2
     "@types/react": ^18.2.18
     "@types/react-dom": ^18.2.7
+    "@types/styled-components": ^5.1.26
     "@vitejs/plugin-react": ^4.0.0
     "@vitejs/plugin-react-swc": ^3.3.2
     fast-glob: ^3.3.0
     lodash-es: ^4.17.21
     react: ^18.2.0
     react-dom: ^18.2.0
-    styled-components: ^5.3.5
+    styled-components: ^5.3.11
     theatric: "workspace:*"
     three: ^0.155.0
     typescript: ^4.4.2
@@ -27997,6 +28033,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"react-merge-refs@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "react-merge-refs@npm:2.0.2"
+  checksum: 64758870d79ad52e6666d1d30cdecd5a72722edfd5c89808b41acdbd81a039f0c78b8b576f7ae247010468fc45cb57dd31f402693c64224439dbe0127f4389f3
+  languageName: node
+  linkType: hard
+
 "react-reconciler@npm:^0.27.0":
   version: 0.27.0
   resolution: "react-reconciler@npm:0.27.0"
@@ -28175,17 +28218,16 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-shadow@npm:^19.0.3":
+"react-shadow@npm:^20.4.0":
-  version: 19.0.3
+  version: 20.4.0
-  resolution: "react-shadow@npm:19.0.3"
+  resolution: "react-shadow@npm:20.4.0"
   dependencies:
     humps: ^2.0.1
-    react-use: ^15.3.3
   peerDependencies:
     prop-types: ^15.0.0
-    react: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.0.0 || ^17.0.0
+    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: eb789ac10a85bf872406493189916a60aacec07a4eaaaf5b15d7fc8f7de3bfb9b1531f17dd899c6270700b6e964c828355798bc06e688c71a372272cbd8a5729
+  checksum: 88be6a3f2ed8336116458585d3acd09d2c21b43bd857dac305c72d26b13e9d0c56a21db1c6cc49cecaa92f976b563b8cd487c19ee4e8f1ffb0ad13ea677f021e
   languageName: node
   linkType: hard
 
@@ -28208,18 +28250,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-use-measure@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "react-use-measure@npm:2.0.4"
-  dependencies:
-    debounce: ^1.2.0
-  peerDependencies:
-    react: ">=16.13"
-    react-dom: ">=16.13"
-  checksum: cbaf8896f14bb4b3259a39181b8cd26bf8291cda5f02729f6f977169145acfa1b727d9a99710f20329eb717bad189f599a1616e735053ff07f9ae0a0bd7fd206
-  languageName: node
-  linkType: hard
-
 "react-use-measure@npm:^2.1.1":
   version: 2.1.1
   resolution: "react-use-measure@npm:2.1.1"
@@ -28232,31 +28262,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-use@npm:^15.3.3":
-  version: 15.3.8
-  resolution: "react-use@npm:15.3.8"
-  dependencies:
-    "@types/js-cookie": 2.2.6
-    "@xobotyi/scrollbar-width": 1.9.5
-    copy-to-clipboard: ^3.2.0
-    fast-deep-equal: ^3.1.3
-    fast-shallow-equal: ^1.0.0
-    js-cookie: ^2.2.1
-    nano-css: ^5.2.1
-    react-universal-interface: ^0.6.2
-    resize-observer-polyfill: ^1.5.1
-    screenfull: ^5.0.0
-    set-harmonic-interval: ^1.0.1
-    throttle-debounce: ^2.1.0
-    ts-easing: ^0.2.0
-    tslib: ^2.0.0
-  peerDependencies:
-    react: ^16.8.0  || ^17.0.0
-    react-dom: ^16.8.0  || ^17.0.0
-  checksum: 732a21f7c2295556d9cd501188644b9191f85370b5dc6347277e06c52dfe2ecf376c869056084ee7c7d4e57b8c5f723a3f00ee818f6cf59409b93cf704dbef33
-  languageName: node
-  linkType: hard
-
 "react-use@npm:^17.2.4":
   version: 17.2.4
   resolution: "react-use@npm:17.2.4"
@@ -29624,7 +29629,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"screenfull@npm:^5.0.0, screenfull@npm:^5.1.0":
+"screenfull@npm:^5.1.0":
   version: 5.1.0
   resolution: "screenfull@npm:5.1.0"
   checksum: e8ab486ba2310055aeabd84d8f76f1c9e729669942a4b1bdd675131333076ac9ee6655fb41c2507de3be93865e120cf3641e5ff636090f9e2458170827e650c7
@@ -31105,9 +31110,9 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.5":
+"styled-components@npm:^5.3.11":
-  version: 5.3.5
+  version: 5.3.11
-  resolution: "styled-components@npm:5.3.5"
+  resolution: "styled-components@npm:5.3.11"
   dependencies:
     "@babel/helper-module-imports": ^7.0.0
     "@babel/traverse": ^7.4.5
@@ -31123,7 +31128,7 @@ fsevents@^1.2.7:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
     react-is: ">= 16.8.0"
-  checksum: 05a664dfe423c2906959a0f3f47f9b1ad630e493eb2e06deea0dc0906af33ba5ca17277b98948a6c9642e73894d6533391aebf45576489f5afe920c974e9f8eb
+  checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
   languageName: node
   linkType: hard
 
@@ -31627,7 +31632,7 @@ fsevents@^1.2.7:
     "@types/redux-actions": ^2.6.1
     "@types/rollup": 0.54.0
     "@types/shallowequal": ^1.1.1
-    "@types/styled-components": ^5.1.9
+    "@types/styled-components": ^5.1.26
     "@types/uuid": ^8.3.0
     blob-compare: 1.1.0
     cross-env: ^7.0.3
@@ -31657,8 +31662,8 @@ fsevents@^1.2.7:
     react-hot-toast: ^2.4.0
     react-icons: ^4.2.0
     react-is: ^17.0.2
-    react-merge-refs: ^1.1.0
+    react-merge-refs: ^2.0.2
-    react-shadow: ^19.0.3
+    react-shadow: ^20.4.0
     react-use: ^17.2.4
     react-use-gesture: ^9.1.3
     reakit: ^1.3.8
@@ -31668,7 +31673,7 @@ fsevents@^1.2.7:
     rollup: ^2.56.3
     rollup-plugin-dts: ^4.0.0
     shallowequal: ^1.1.0
-    styled-components: ^5.3.5
+    styled-components: ^5.3.11
     timing-function: ^0.2.3
     typescript: ^4.4.2
     uuid: ^8.3.2
@@ -31793,13 +31798,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"throttle-debounce@npm:^2.1.0":
-  version: 2.3.0
-  resolution: "throttle-debounce@npm:2.3.0"
-  checksum: 6d90aa2ddb294f8dad13d854a1cfcd88fdb757469669a096a7da10f515ee466857ac1e750649cb9da931165c6f36feb448318e7cb92570f0a3679d20e860a925
-  languageName: node
-  linkType: hard
-
 "throttle-debounce@npm:^3.0.1":
   version: 3.0.1
   resolution: "throttle-debounce@npm:3.0.1"
@@ -32181,7 +32179,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0":
+"tslib@npm:^2.0.3, tslib@npm:^2.1.0":
   version: 2.1.0
   resolution: "tslib@npm:2.1.0"
   checksum: aa189c8179de0427b0906da30926fd53c59d96ec239dff87d6e6bc831f608df0cbd6f77c61dabc074408bd0aa0b9ae4ec35cb2c15f729e32f37274db5730cb78