Remove Box in favor of Atom

theatre/core/src/sequences/Sequence.ts

@@ -3,9 +3,10 @@ import type Sheet from '@theatre/core/sheets/Sheet'
 import type {SequenceAddress} from '@theatre/shared/utils/addresses'
 import didYouMean from '@theatre/shared/utils/didYouMean'
 import {InvalidArgumentError} from '@theatre/shared/utils/errors'
-import type {IBox, Prism, Pointer} from '@theatre/dataverse'
+import type {Prism, Pointer} from '@theatre/dataverse'
+import {Atom} from '@theatre/dataverse'
 import {pointer} from '@theatre/dataverse'
-import {Box, prism, val} from '@theatre/dataverse'
+import {prism, val} from '@theatre/dataverse'
 import {padStart} from 'lodash-es'
 import type {
   IPlaybackController,
@@ -37,7 +38,7 @@ export default class Sequence {
   public readonly address: SequenceAddress
   publicApi: TheatreSequence
 
-  private _playbackControllerBox: IBox<IPlaybackController>
+  private _playbackControllerBox: Atom<IPlaybackController>
   private _prismOfStatePointer: Prism<Pointer<IPlaybackState>>
   private _positionD: Prism<number>
   private _positionFormatterD: Prism<ISequencePositionFormatter>
@@ -62,7 +63,7 @@ export default class Sequence {
 
     this.publicApi = new TheatreSequence(this)
 
-    this._playbackControllerBox = new Box(
+    this._playbackControllerBox = new Atom(
       playbackController ?? new DefaultPlaybackController(getCoreTicker()),
     )
 
@@ -123,7 +124,7 @@ export default class Sequence {
   }
 
   get position() {
-    return this._playbackControllerBox.get().getCurrentPosition()
+    return this._playbackControllerBox.getState().getCurrentPosition()
   }
 
   get subUnitsPerUnit(): number {
@@ -165,7 +166,7 @@ export default class Sequence {
     }
     const dur = this.length
     this._playbackControllerBox
-      .get()
+      .getState()
       .gotoPosition(position > dur ? dur : position)
   }
 
@@ -174,7 +175,7 @@ export default class Sequence {
   }
 
   get playing() {
-    return val(this._playbackControllerBox.get().statePointer.playing)
+    return val(this._playbackControllerBox.getState().statePointer.playing)
   }
 
   _makeRangeFromSequenceTemplate(): Prism<IPlaybackRange> {
@@ -195,7 +196,7 @@ export default class Sequence {
    *
    */
   playDynamicRange(rangeD: Prism<IPlaybackRange>): Promise<unknown> {
-    return this._playbackControllerBox.get().playDynamicRange(rangeD)
+    return this._playbackControllerBox.getState().playDynamicRange(rangeD)
   }
 
   async play(
@@ -329,18 +330,18 @@ To fix this, either set \`conf.range[1]\` to be less the duration of the sequenc
     direction: IPlaybackDirection,
   ): Promise<boolean> {
     return this._playbackControllerBox
-      .get()
+      .getState()
       .play(iterationCount, range, rate, direction)
   }
 
   pause() {
-    this._playbackControllerBox.get().pause()
+    this._playbackControllerBox.getState().pause()
   }
 
   replacePlaybackController(playbackController: IPlaybackController) {
     this.pause()
-    const oldController = this._playbackControllerBox.get()
-    this._playbackControllerBox.set(playbackController)
+    const oldController = this._playbackControllerBox.getState()
+    this._playbackControllerBox.setState(playbackController)
 
     const time = oldController.getCurrentPosition()
     oldController.destroy()

theatre/studio/src/UIRoot/useKeyboardShortcuts.ts

@@ -4,7 +4,7 @@ import {cmdIsDown} from '@theatre/studio/utils/keyboardUtils'
 import {getSelectedSequence} from '@theatre/studio/selectors'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import type {Prism} from '@theatre/dataverse'
-import {Box, prism, val} from '@theatre/dataverse'
+import {Atom, prism, val} from '@theatre/dataverse'
 import type {IPlaybackRange} from '@theatre/core/sequences/Sequence'
 import type Sequence from '@theatre/core/sequences/Sequence'
 import memoizeFn from '@theatre/shared/utils/memoizeFn'
@@ -150,13 +150,13 @@ export default function useKeyboardShortcuts() {
   }, [])
 }
 
-type ControlledPlaybackStateBox = Box<
+type ControlledPlaybackStateBox = Atom<
   undefined | Prism<{range: IPlaybackRange; isFollowingARange: boolean}>
 >
 
 const getPlaybackStateBox = memoizeFn(
   (sequence: Sequence): ControlledPlaybackStateBox => {
-    const box = new Box(undefined) as ControlledPlaybackStateBox
+    const box = new Atom(undefined) as ControlledPlaybackStateBox
     return box
   },
 )

theatre/studio/src/panels/DetailPanel/DetailPanel.tsx

@@ -19,7 +19,7 @@ import ObjectDetails from './ObjectDetails'
 import ProjectDetails from './ProjectDetails'
 import getStudio from '@theatre/studio/getStudio'
 import useHotspot from '@theatre/studio/uiComponents/useHotspot'
-import {Box, prism, val} from '@theatre/dataverse'
+import {Atom, prism, val} from '@theatre/dataverse'
 import EmptyState from './EmptyState'
 import useLockSet from '@theatre/studio/uiComponents/useLockSet'
 import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence'
@@ -195,8 +195,8 @@ export default () => {
   )
 }
 
-const isDetailPanelHotspotActiveB = new Box<boolean>(false)
-const isDetailPanelHoveredB = new Box<boolean>(false)
+const isDetailPanelHotspotActiveB = new Atom<boolean>(false)
+const isDetailPanelHoveredB = new Atom<boolean>(false)
 
 export const shouldShowDetailD = prism<boolean>(() => {
   const isHovered = val(isDetailPanelHoveredB.prism)

theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx

@@ -5,7 +5,7 @@ import ProjectsList from './ProjectsList/ProjectsList'
 import {useVal} from '@theatre/react'
 import getStudio from '@theatre/studio/getStudio'
 import useHotspot from '@theatre/studio/uiComponents/useHotspot'
-import {Box, prism, val} from '@theatre/dataverse'
+import {Atom, prism, val} from '@theatre/dataverse'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 
 const headerHeight = `44px`
@@ -79,8 +79,8 @@ const OutlinePanel: React.FC<{}> = () => {
 
 export default OutlinePanel
 
-const isOutlinePanelHotspotActiveB = new Box<boolean>(false)
-const isOutlinePanelHoveredB = new Box<boolean>(false)
+const isOutlinePanelHotspotActiveB = new Atom<boolean>(false)
+const isOutlinePanelHoveredB = new Atom<boolean>(false)
 
 export const shouldShowOutlineD = prism<boolean>(() => {
   const isHovered = val(isOutlinePanelHoveredB.prism)

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

@@ -1,4 +1,4 @@
-import {Box, prism} from '@theatre/dataverse'
+import {Atom, prism} from '@theatre/dataverse'
 import type {KeyboardEvent} from 'react'
 import React, {
   useEffect,
@@ -532,7 +532,7 @@ function areConnectedKeyframesTheSameAs({
 
 const {isCurveEditorOpenD, isConnectionEditingInCurvePopover, getLock} =
   (() => {
-    const connectionsInCurvePopoverEdit = new Box<
+    const connectionsInCurvePopoverEdit = new Atom<
       Array<KeyframeConnectionWithAddress>
     >([])
 

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget.tsx

@@ -1,6 +1,7 @@
 import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
-import type {Pointer} from '@theatre/dataverse'
-import {Box, val} from '@theatre/dataverse'
+import type { Pointer} from '@theatre/dataverse';
+import {Atom} from '@theatre/dataverse'
+import {val} from '@theatre/dataverse'
 import React from 'react'
 import styled from 'styled-components'
 import {DopeSnapHitZoneUI} from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI'
@@ -62,7 +63,7 @@ export type KeyframeSnapPositions = {
   }
 }
 
-const stateB = new Box<
+const stateB = new Atom<
   | {
       // all keyframes must be snap targets
       mode: 'snapToAll'

theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx

@@ -1,4 +1,4 @@
-import {Box} from '@theatre/dataverse'
+import {Atom} from '@theatre/dataverse'
 import {useVal} from '@theatre/react'
 import type {IExtension} from '@theatre/studio'
 import getStudio from '@theatre/studio/getStudio'
@@ -29,11 +29,11 @@ const ExtensionToolsetRender: React.FC<{
   extension: IExtension
   toolbarId: string
 }> = ({extension, toolbarId}) => {
-  const toolsetConfigBox = useMemo(() => new Box<ToolsetConfig>([]), [])
+  const toolsetConfigBox = useMemo(() => new Atom<ToolsetConfig>([]), [])
 
   useLayoutEffect(() => {
     const detach = extension.toolbars?.[toolbarId]?.(
-      toolsetConfigBox.set.bind(toolsetConfigBox),
+      toolsetConfigBox.setState.bind(toolsetConfigBox),
       getStudio()!.publicApi,
     )
 

theatre/studio/src/uiComponents/Popover/TooltipContext.tsx

@@ -1,5 +1,5 @@
-import type {Prism} from '@theatre/dataverse'
-import {Box} from '@theatre/dataverse'
+import type { Prism} from '@theatre/dataverse';
+import {Atom} from '@theatre/dataverse'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import React, {
   createContext,
@@ -40,7 +40,7 @@ export const useTooltipOpenState = (): [
 }
 
 const TooltipContext: React.FC<{}> = ({children}) => {
-  const currentTooltipId = useMemo(() => new Box(-1), [])
+  const currentTooltipId = useMemo(() => new Atom(-1), [])
   const cur = currentTooltipId.prism
 
   const set = useMemo(() => {

theatre/studio/src/uiComponents/usePresence.tsx

@@ -3,7 +3,7 @@ import type {StrictRecord} from '@theatre/shared/utils/types'
 import React, {useMemo} from 'react'
 import {useEffect} from 'react'
 import {useLogger} from './useLogger'
-import {Box, prism, pointerToPrism} from '@theatre/dataverse'
+import {prism, pointerToPrism} from '@theatre/dataverse'
 import {Atom} from '@theatre/dataverse'
 import {usePrismInstance} from '@theatre/react'
 import {selectClosestHTMLAncestor} from '@theatre/studio/utils/selectClosestHTMLAncestor'
@@ -24,7 +24,7 @@ undefinedD.keepHot() // constant anyway...
 function createPresenceContext(options: {
   enabled: boolean
 }): InternalPresenceContext {
-  const currentUserHoverItemB = new Box<StudioSheetItemKey | undefined>(
+  const currentUserHoverItemB = new Atom<StudioSheetItemKey | undefined>(
     undefined,
   )
   const currentUserHoverFlagItemsAtom = new Atom(
@@ -98,14 +98,14 @@ function createPresenceContext(options: {
       return usePrismInstance(focusD)
     },
     setUserHover(itemKeyOpt) {
-      const prev = currentUserHoverItemB.get()
+      const prev = currentUserHoverItemB.getState()
       if (prev === itemKeyOpt) {
         return
       }
       if (prev) {
         currentUserHoverFlagItemsAtom.setIn([prev], false)
       }
-      currentUserHoverItemB.set(itemKeyOpt)
+      currentUserHoverItemB.setState(itemKeyOpt)
       if (itemKeyOpt) {
         currentUserHoverFlagItemsAtom.setIn([itemKeyOpt], true)
       }