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]}),