API naming tweaks

packages/playground/src/dom/Scene.tsx

@@ -6,6 +6,8 @@ import type {IProject, ISheet, ISheetObject} from '@theatre/core'
 import {types as t} from '@theatre/core'
 import type {IScrub, IStudio} from '@theatre/studio'
 
+studio.initialize()
+
 const boxObjectConfig = t.compound({
   x: t.number(0),
   y: t.number(0),
@@ -44,7 +46,7 @@ const Box: React.FC<{
       },
       onDrag(x, y) {
         if (!firstOnDragCalled) {
-          studio.__experimental_setSelection([obj])
+          studio.setSelection([obj])
           firstOnDragCalled = true
         }
         scrub!.capture(({set}) => {
@@ -67,7 +69,7 @@ const Box: React.FC<{
   return (
     <div
       onClick={() => {
-        studio.__experimental_setSelection([obj])
+        studio.setSelection([obj])
       }}
       ref={setDivRef}
       style={{
@@ -94,7 +96,7 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
   const [selection, setSelection] = useState<IStudio['selection']>()
 
   useLayoutEffect(() => {
-    return studio.__experimental_onSelectionChange((newState) => {
+    return studio.onSelectionChange((newState) => {
       setSelection(newState)
     })
   })

packages/playground/src/dom/index.tsx

@@ -4,7 +4,7 @@ import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
 
-studio.ui
+studio.initialize()
 
 ReactDOM.render(
   <Scene project={getProject('Sample project')} />,

packages/playground/src/redesign/Scene.tsx

@@ -6,6 +6,8 @@ import type {IProject, ISheet, ISheetObject} from '@theatre/core'
 import {types as t} from '@theatre/core'
 import type {IScrub, IStudio} from '@theatre/studio'
 
+studio.initialize()
+
 const boxObjectConfig = t.compound({
   position: t.compound({
     x: t.number(0),
@@ -57,7 +59,7 @@ const Box: React.FC<{
       },
       onDrag(x, y) {
         if (!firstOnDragCalled) {
-          studio.__experimental_setSelection([obj])
+          studio.setSelection([obj])
           firstOnDragCalled = true
         }
         scrub!.capture(({set}) => {
@@ -84,7 +86,7 @@ const Box: React.FC<{
   return (
     <div
       onClick={() => {
-        studio.__experimental_setSelection([obj])
+        studio.setSelection([obj])
       }}
       ref={setDivRef}
       style={{
@@ -111,7 +113,7 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
   const [selection, setSelection] = useState<IStudio['selection']>()
 
   useLayoutEffect(() => {
-    return studio.__experimental_onSelectionChange((newState) => {
+    return studio.onSelectionChange((newState) => {
       setSelection(newState)
     })
   })

packages/playground/src/redesign/index.tsx

@@ -5,7 +5,7 @@ import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
 import bg from '../../xeno/bgs/8.png'
 
-studio.ui
+studio.initialize()
 
 document.body.style.cssText = `
   background-image: url(${bg});

packages/playground/src/space-exploration/App.tsx

@@ -5,6 +5,9 @@ import React, {Suspense} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {useGLTF} from '@react-three/drei'
 import sceneGLB from './scene.glb'
+import studio from '@theatre/studio'
+
+studio.initialize()
 
 document.body.style.backgroundColor = '#171717'
 

packages/playground/src/turtle/TurtleRenderer.tsx

@@ -13,6 +13,8 @@ import {types} from '@theatre/core'
 import type {ITurtle} from './turtle'
 import {drawTurtlePlan, makeTurtlePlan} from './turtle'
 
+studio.initialize()
+
 const objConfig = types.compound({
   startingPoint: types.compound({
     x: types.number(0.5, {range: [0, 1]}),

packages/plugin-r3f/src/components/EditableProxy.tsx

@@ -172,7 +172,7 @@ const EditableProxy: VFC<EditableProxyProps> = ({
             if (!theatreObject) {
               console.log('no theatre object for', uniqueName)
             } else {
-              studio.__experimental_setSelection([theatreObject])
+              studio.setSelection([theatreObject])
             }
           }
         }}
@@ -206,7 +206,7 @@ const EditableProxy: VFC<EditableProxyProps> = ({
                   if (!theatreObject) {
                     console.log('no theatre object for', uniqueName)
                   } else {
-                    studio.__experimental_setSelection([theatreObject])
+                    studio.setSelection([theatreObject])
                   }
                 }
               }}

packages/plugin-r3f/src/components/SnapshotEditor.tsx

@@ -120,7 +120,7 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
   }, [editorOpen])
 
   const onPointerMissed = useCallback(() => {
-    if (sheet !== null) studio.__experimental_setSelection([sheet])
+    if (sheet !== null) studio.setSelection([sheet])
   }, [sheet])
 
   if (!editorObject) return <></>

packages/plugin-r3f/src/components/useSelected.tsx

@@ -20,7 +20,7 @@ export function useSelected(): undefined | string {
       }
     }
     setFromStudio(studio.selection)
-    return studio.__experimental_onSelectionChange(setFromStudio)
+    return studio.onSelectionChange(setFromStudio)
   }, [sheet])
 
   return state