From ec18687a981423ad5cd44ed4efee28a29dbf4da7 Mon Sep 17 00:00:00 2001
From: Aria <aria.minaei@gmail.com>
Date: Wed, 25 May 2022 00:37:18 +0200
Subject: [PATCH] Re-do bundling, compat tests, and extension API (#174)

---
 compatibility-tests/.gitignore                |   5 +
 compatibility-tests/package.json              |   6 +-
 compatibility-tests/scripts/clean.mjs         |   3 +
 compatibility-tests/scripts/utils.mjs         |  24 ++-
 .../.gitignore                                |   0
 .../test-cra-react18/README.md                |   1 +
 .../package.json                              |   3 +-
 .../public/index.html                         |   8 +-
 .../test-cra-react18/src/App.js               |   6 +
 .../test-cra-react18/src/index.js             |  19 +++
 .../test-create-react-app/README.md           |  16 --
 .../test-create-react-app/public/favicon.ico  | Bin 3870 -> 0 bytes
 .../test-create-react-app/public/logo192.png  | Bin 5347 -> 0 bytes
 .../test-create-react-app/public/logo512.png  | Bin 9664 -> 0 bytes
 .../public/manifest.json                      |  25 ---
 .../test-create-react-app/public/robots.txt   |   3 -
 .../test-create-react-app/src/App.css         |  38 -----
 .../test-create-react-app/src/App.js          | 150 ------------------
 .../test-create-react-app/src/App.test.js     |   7 -
 .../test-create-react-app/src/index.css       |  13 --
 .../test-create-react-app/src/index.js        |  19 ---
 .../test-create-react-app/src/logo.svg        |   1 -
 .../src/react-app-env.d.ts                    |   1 -
 .../src/reportWebVitals.js                    |  13 --
 .../test-create-react-app/src/setupTests.js   |   5 -
 .../test-create-react-app/src/useDrag.js      | 130 ---------------
 compatibility-tests/test-next/.gitignore      |  31 ++++
 compatibility-tests/test-next/README.md       |   1 +
 compatibility-tests/test-next/package.json    |  15 ++
 compatibility-tests/test-next/pages/index.js  |  23 +++
 .../test-next/public/favicon.ico              | Bin 0 -> 15086 bytes
 .../test-parcel1-react18/.gitignore           |   3 +
 .../test-parcel1-react18/index.html           |  13 ++
 .../test-parcel1-react18/package.json         |  13 ++
 .../test-parcel1-react18/src/App.js           |   6 +
 .../test-parcel1-react18/src/index.js         |  19 +++
 .../test-parcel2-react18/.gitignore           |   4 +
 .../test-parcel2-react18/index.html           |  13 ++
 .../test-parcel2-react18/package.json         |  13 ++
 .../test-parcel2-react18/src/App.js           |   6 +
 .../test-parcel2-react18/src/index.js         |  19 +++
 .../test-vite-react18/.gitignore              |  24 +++
 .../test-vite-react18/index.html              |  12 ++
 .../test-vite-react18/package.json            |  23 +++
 .../test-vite-react18/src/App.tsx             |   6 +
 .../test-vite-react18/src/main.tsx            |  19 +++
 .../test-vite-react18/src/vite-env.d.ts       |   1 +
 .../test-vite-react18/tsconfig.json           |  21 +++
 .../test-vite-react18/tsconfig.node.json      |   8 +
 .../test-vite-react18/vite.config.ts          |   7 +
 packages/dataverse/devEnv/build.ts            |   4 +-
 packages/dataverse/src/Ticker.ts              |  32 ++++
 .../derivations/prism/discoveryMechanism.ts   |  12 +-
 packages/playground/devEnv/vite.config.ts     |   5 +-
 .../ReferenceWindow/ReferenceWindow.tsx       |   2 +-
 .../r3f/src/components/SnapshotEditor.tsx     |  22 +--
 .../r3f/src/components/Toolbar/Toolbar.tsx    | 118 --------------
 .../Toolbar/TransformControlsModeSelect.tsx   |  41 -----
 .../Toolbar/TransformControlsSpaceSelect.tsx  |  34 ----
 .../Toolbar/ViewportShadingSelect.tsx         |  46 ------
 packages/r3f/src/extension.ts                 | 142 ++++++++++++++++-
 theatre/core/src/coreTicker.ts                |  12 +-
 theatre/core/src/sequences/TheatreSequence.ts |   5 +
 theatre/devEnv/buildUtils.ts                  |  15 +-
 theatre/studio/package.json                   |   5 +-
 theatre/studio/src/Studio.ts                  |   3 +-
 theatre/studio/src/TheatreStudio.ts           |  71 ++++++---
 theatre/studio/src/UI.ts                      |  11 ++
 theatre/studio/src/UIRoot/UIRoot.tsx          |  96 +++++------
 theatre/studio/src/css.ts                     |  45 ------
 theatre/studio/src/css.tsx                    | 146 +++++++++++++++++
 theatre/studio/src/index.ts                   |   9 +-
 .../panels/BasePanel/ExtensionPaneWrapper.tsx |  26 ++-
 theatre/studio/src/studioTicker.ts            |  11 +-
 .../toolbars/GlobalToolbar/GlobalToolbar.tsx  |  66 +++++---
 .../src/toolbars/GlobalToolbar/Toolset.tsx    |  53 +++++++
 .../GlobalToolbar/tools/IconButton.tsx        |  28 ++++
 .../toolbars/GlobalToolbar/tools/Switch.tsx   |  32 ++++
 theatre/studio/src/uiComponents/isSafari.ts   |   6 +-
 .../src/utils/contextualWebComponents.tsx     |  58 +++++++
 theatre/studio/src/utils/isMac.ts             |   3 +-
 .../src/utils/renderInPortalInContext.tsx     |  66 ++++++++
 yarn.lock                                     |   3 -
 83 files changed, 1138 insertions(+), 886 deletions(-)
 create mode 100644 compatibility-tests/.gitignore
 create mode 100644 compatibility-tests/scripts/clean.mjs
 rename compatibility-tests/{test-create-react-app => test-cra-react18}/.gitignore (100%)
 create mode 100644 compatibility-tests/test-cra-react18/README.md
 rename compatibility-tests/{test-create-react-app => test-cra-react18}/package.json (91%)
 rename compatibility-tests/{test-create-react-app => test-cra-react18}/public/index.html (77%)
 create mode 100644 compatibility-tests/test-cra-react18/src/App.js
 create mode 100644 compatibility-tests/test-cra-react18/src/index.js
 delete mode 100644 compatibility-tests/test-create-react-app/README.md
 delete mode 100644 compatibility-tests/test-create-react-app/public/favicon.ico
 delete mode 100644 compatibility-tests/test-create-react-app/public/logo192.png
 delete mode 100644 compatibility-tests/test-create-react-app/public/logo512.png
 delete mode 100644 compatibility-tests/test-create-react-app/public/manifest.json
 delete mode 100644 compatibility-tests/test-create-react-app/public/robots.txt
 delete mode 100644 compatibility-tests/test-create-react-app/src/App.css
 delete mode 100644 compatibility-tests/test-create-react-app/src/App.js
 delete mode 100644 compatibility-tests/test-create-react-app/src/App.test.js
 delete mode 100644 compatibility-tests/test-create-react-app/src/index.css
 delete mode 100644 compatibility-tests/test-create-react-app/src/index.js
 delete mode 100644 compatibility-tests/test-create-react-app/src/logo.svg
 delete mode 100644 compatibility-tests/test-create-react-app/src/react-app-env.d.ts
 delete mode 100644 compatibility-tests/test-create-react-app/src/reportWebVitals.js
 delete mode 100644 compatibility-tests/test-create-react-app/src/setupTests.js
 delete mode 100644 compatibility-tests/test-create-react-app/src/useDrag.js
 create mode 100644 compatibility-tests/test-next/.gitignore
 create mode 100644 compatibility-tests/test-next/README.md
 create mode 100644 compatibility-tests/test-next/package.json
 create mode 100644 compatibility-tests/test-next/pages/index.js
 create mode 100644 compatibility-tests/test-next/public/favicon.ico
 create mode 100644 compatibility-tests/test-parcel1-react18/.gitignore
 create mode 100644 compatibility-tests/test-parcel1-react18/index.html
 create mode 100644 compatibility-tests/test-parcel1-react18/package.json
 create mode 100644 compatibility-tests/test-parcel1-react18/src/App.js
 create mode 100644 compatibility-tests/test-parcel1-react18/src/index.js
 create mode 100644 compatibility-tests/test-parcel2-react18/.gitignore
 create mode 100644 compatibility-tests/test-parcel2-react18/index.html
 create mode 100644 compatibility-tests/test-parcel2-react18/package.json
 create mode 100644 compatibility-tests/test-parcel2-react18/src/App.js
 create mode 100644 compatibility-tests/test-parcel2-react18/src/index.js
 create mode 100644 compatibility-tests/test-vite-react18/.gitignore
 create mode 100644 compatibility-tests/test-vite-react18/index.html
 create mode 100644 compatibility-tests/test-vite-react18/package.json
 create mode 100644 compatibility-tests/test-vite-react18/src/App.tsx
 create mode 100644 compatibility-tests/test-vite-react18/src/main.tsx
 create mode 100644 compatibility-tests/test-vite-react18/src/vite-env.d.ts
 create mode 100644 compatibility-tests/test-vite-react18/tsconfig.json
 create mode 100644 compatibility-tests/test-vite-react18/tsconfig.node.json
 create mode 100644 compatibility-tests/test-vite-react18/vite.config.ts
 delete mode 100644 packages/r3f/src/components/Toolbar/Toolbar.tsx
 delete mode 100644 packages/r3f/src/components/Toolbar/TransformControlsModeSelect.tsx
 delete mode 100644 packages/r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx
 delete mode 100644 packages/r3f/src/components/Toolbar/ViewportShadingSelect.tsx
 delete mode 100644 theatre/studio/src/css.ts
 create mode 100644 theatre/studio/src/css.tsx
 create mode 100644 theatre/studio/src/toolbars/GlobalToolbar/Toolset.tsx
 create mode 100644 theatre/studio/src/toolbars/GlobalToolbar/tools/IconButton.tsx
 create mode 100644 theatre/studio/src/toolbars/GlobalToolbar/tools/Switch.tsx
 create mode 100644 theatre/studio/src/utils/contextualWebComponents.tsx
 create mode 100644 theatre/studio/src/utils/renderInPortalInContext.tsx

diff --git a/compatibility-tests/.gitignore b/compatibility-tests/.gitignore
new file mode 100644
index 0000000..6d9e0ed
--- /dev/null
+++ b/compatibility-tests/.gitignore
@@ -0,0 +1,5 @@
+# these lock files include checksums of the @theatre/*@compat packages, which
+# would change after every edit to their source, so we better not keep them
+# in the repo
+/*/package-lock.json
+/*/yarn.lock
\ No newline at end of file
diff --git a/compatibility-tests/package.json b/compatibility-tests/package.json
index eeb5f9b..0b9f43b 100644
--- a/compatibility-tests/package.json
+++ b/compatibility-tests/package.json
@@ -3,7 +3,8 @@
   "private": true,
   "scripts": {
     "registry:start": "zx ./scripts/start-registry.mjs",
-    "test:ci": "zx ./scripts/ci.mjs"
+    "test:ci": "zx ./scripts/ci.mjs",
+    "clean": "zx ./scripts/clean.mjs"
   },
   "dependencies": {
     "node-cleanup": "^2.1.2",
@@ -12,5 +13,6 @@
     "verdaccio-auth-memory": "^10.2.0",
     "verdaccio-memory": "^10.2.0",
     "zx": "^6.1.0"
-  }
+  },
+  "version": "0.0.1-COMPAT.1"
 }
diff --git a/compatibility-tests/scripts/clean.mjs b/compatibility-tests/scripts/clean.mjs
new file mode 100644
index 0000000..0d5fa88
--- /dev/null
+++ b/compatibility-tests/scripts/clean.mjs
@@ -0,0 +1,3 @@
+import {clean} from './utils.mjs'
+
+await clean()
diff --git a/compatibility-tests/scripts/utils.mjs b/compatibility-tests/scripts/utils.mjs
index aa75c99..890d873 100644
--- a/compatibility-tests/scripts/utils.mjs
+++ b/compatibility-tests/scripts/utils.mjs
@@ -2,9 +2,8 @@
  * Utility functions for the compatibility tests
  */
 
-import fs from 'fs'
 import path from 'path'
-import {YAML} from 'zx'
+import {globby, YAML} from 'zx'
 import onCleanup from 'node-cleanup'
 import * as verdaccioPackage from 'verdaccio'
 
@@ -14,6 +13,7 @@ const startVerdaccioServer = verdaccioPackage.default.default
 export const VERDACCIO_PORT = 4823
 export const VERDACCIO_HOST = `localhost`
 export const VERDACCIO_URL = `http://${VERDACCIO_HOST}:${VERDACCIO_PORT}/`
+export const PATH_TO_COMPAT_TESTS_ROOT = path.join(__dirname, '..')
 export const MONOREPO_ROOT = path.join(__dirname, '../..')
 export const PATH_TO_YARNRC = path.join(MONOREPO_ROOT, '.yarnrc.yml')
 
@@ -259,3 +259,23 @@ export function getCompatibilityTestSetups() {
 
   return setupsAbsPaths
 }
+
+/**
+ * Deletes ../test-*\/(node_modules|package-lock.json|yarn.lock)
+ */
+export async function clean() {
+  const toDelete = await globby(
+    './test-*/(node_modules|yarn.lock|package-lock.json)',
+    {
+      cwd: PATH_TO_COMPAT_TESTS_ROOT,
+      // node_modules et al are gitignored, but we still want to clean them
+      gitignore: false,
+      // include directories too
+      onlyFiles: false,
+    },
+  )
+  toDelete.forEach((fileOrDir) => {
+    console.log('deleting', fileOrDir)
+    fs.removeSync(path.join(PATH_TO_COMPAT_TESTS_ROOT, fileOrDir))
+  })
+}
diff --git a/compatibility-tests/test-create-react-app/.gitignore b/compatibility-tests/test-cra-react18/.gitignore
similarity index 100%
rename from compatibility-tests/test-create-react-app/.gitignore
rename to compatibility-tests/test-cra-react18/.gitignore
diff --git a/compatibility-tests/test-cra-react18/README.md b/compatibility-tests/test-cra-react18/README.md
new file mode 100644
index 0000000..a7eedd2
--- /dev/null
+++ b/compatibility-tests/test-cra-react18/README.md
@@ -0,0 +1 @@
+Testing `@theatre/core` and `@theatre/studio` with `npm`, `create-react-app`, and `react@18`
\ No newline at end of file
diff --git a/compatibility-tests/test-create-react-app/package.json b/compatibility-tests/test-cra-react18/package.json
similarity index 91%
rename from compatibility-tests/test-create-react-app/package.json
rename to compatibility-tests/test-cra-react18/package.json
index eafa8be..bab4a91 100644
--- a/compatibility-tests/test-create-react-app/package.json
+++ b/compatibility-tests/test-cra-react18/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@theatre-build-tests/react-app",
+  "name": "@compat/cra-react18",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -15,7 +15,6 @@
     "@testing-library/user-event": "^12.1.10",
     "@theatre/core": "^0.0.1-COMPAT.1",
     "@theatre/studio": "^0.0.1-COMPAT.1",
-    "@theatre/r3f": "^0.0.1-COMPAT.1",
     "react-scripts": "^5.0.1",
     "three": ">0.132.0",
     "web-vitals": "^1.0.1"
diff --git a/compatibility-tests/test-create-react-app/public/index.html b/compatibility-tests/test-cra-react18/public/index.html
similarity index 77%
rename from compatibility-tests/test-create-react-app/public/index.html
rename to compatibility-tests/test-cra-react18/public/index.html
index aa069f2..55dcc48 100644
--- a/compatibility-tests/test-create-react-app/public/index.html
+++ b/compatibility-tests/test-cra-react18/public/index.html
@@ -2,19 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/compatibility-tests/test-cra-react18/src/App.js b/compatibility-tests/test-cra-react18/src/App.js
new file mode 100644
index 0000000..1533aae
--- /dev/null
+++ b/compatibility-tests/test-cra-react18/src/App.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function App({obj}) {
+  console.log(obj)
+  return <div>hi</div>
+}
diff --git a/compatibility-tests/test-cra-react18/src/index.js b/compatibility-tests/test-cra-react18/src/index.js
new file mode 100644
index 0000000..69e4852
--- /dev/null
+++ b/compatibility-tests/test-cra-react18/src/index.js
@@ -0,0 +1,19 @@
+// import ReactDOM from 'react-dom'
+
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+// import React from 'react'
+// import App from './App'
+
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('Project')
+const sheet = project.sheet('Sheet')
+const obj = sheet.object('Obj', {str: 'some string', num: 0})
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App obj={obj} />
+//   </React.StrictMode>,
+//   document.getElementById('root'),
+// )
diff --git a/compatibility-tests/test-create-react-app/README.md b/compatibility-tests/test-create-react-app/README.md
deleted file mode 100644
index d2460b5..0000000
--- a/compatibility-tests/test-create-react-app/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Theatre.js project with `create-react-app` using the `r3f extension`
-
-## Setup
-
-Please refer to [this guide](../README.md#testing-the-configurations-locally).
-
-## Usage
-
-- start the development server:
-  ```sh
-  yarn start
-  ```
-- build the project:
-  ```sh
-  yarn build
-  ```
diff --git a/compatibility-tests/test-create-react-app/public/favicon.ico b/compatibility-tests/test-create-react-app/public/favicon.ico
deleted file mode 100644
index a11777cc471a4344702741ab1c8a588998b1311a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3870
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
baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@

diff --git a/compatibility-tests/test-create-react-app/public/logo192.png b/compatibility-tests/test-create-react-app/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5347
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
X@eDJUQo;Ye2mwlRs<JiGX2Jghdw)}T

diff --git a/compatibility-tests/test-create-react-app/public/logo512.png b/compatibility-tests/test-create-react-app/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9664
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
b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN

diff --git a/compatibility-tests/test-create-react-app/public/manifest.json b/compatibility-tests/test-create-react-app/public/manifest.json
deleted file mode 100644
index 080d6c7..0000000
--- a/compatibility-tests/test-create-react-app/public/manifest.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
diff --git a/compatibility-tests/test-create-react-app/public/robots.txt b/compatibility-tests/test-create-react-app/public/robots.txt
deleted file mode 100644
index e9e57dc..0000000
--- a/compatibility-tests/test-create-react-app/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/compatibility-tests/test-create-react-app/src/App.css b/compatibility-tests/test-create-react-app/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/compatibility-tests/test-create-react-app/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/compatibility-tests/test-create-react-app/src/App.js b/compatibility-tests/test-create-react-app/src/App.js
deleted file mode 100644
index 8b27166..0000000
--- a/compatibility-tests/test-create-react-app/src/App.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import {getProject} from '@theatre/core'
-import * as THREE from 'three'
-import {useState, useEffect, useRef} from 'react'
-import {useFrame, Canvas} from '@react-three/fiber'
-import {Shadow, softShadows} from '@react-three/drei'
-import React from 'react'
-import studio from '@theatre/studio'
-import {editable as e, SheetProvider, extension} from '@theatre/r3f'
-
-if (process.env.NODE_ENV === 'development') {
-  studio.extend(extension)
-  studio.initialize()
-}
-
-// Soft shadows are expensive, comment and refresh when it's too slow
-softShadows()
-
-// credit: https://codesandbox.io/s/camera-pan-nsb7f
-
-function Button() {
-  const vec = new THREE.Vector3()
-  const light = useRef(undefined)
-  const [active, setActive] = useState(false)
-  const [zoom, set] = useState(true)
-  useEffect(
-    () => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
-    [active],
-  )
-
-  useFrame((state) => {
-    const step = 0.1
-    const camera = state.camera
-    camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
-    camera.position.lerp(
-      vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
-      step,
-    )
-    state.camera.lookAt(0, 0, 0)
-    state.camera.updateProjectionMatrix()
-
-    light.current.position.lerp(
-      vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
-      step,
-    )
-  })
-
-  return (
-    <e.mesh
-      receiveShadow
-      castShadow
-      onClick={() => set(!zoom)}
-      onPointerOver={() => setActive(true)}
-      onPointerOut={() => setActive(false)}
-      uniqueName="The Button"
-    >
-      <sphereBufferGeometry args={[0.75, 64, 64]} />
-      <meshPhysicalMaterial
-        color={active ? 'purple' : '#e7b056'}
-        clearcoat={1}
-        clearcoatRoughness={0}
-      />
-      <Shadow
-        position-y={-0.79}
-        rotation-x={-Math.PI / 2}
-        opacity={0.6}
-        scale={[0.8, 0.8, 1]}
-      />
-      <directionalLight
-        ref={light}
-        castShadow
-        intensity={1.5}
-        shadow-camera-far={70}
-      />
-    </e.mesh>
-  )
-}
-
-function Plane({color, uniqueName, ...props}) {
-  return (
-    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
-      <boxBufferGeometry />
-      <meshStandardMaterial color={color} />
-    </e.mesh>
-  )
-}
-
-const sheet = getProject('Playground - R3F').sheet('R3F-Canvas')
-
-function App() {
-  return (
-    <div>
-      <Canvas
-        // @ts-ignore
-        shadowMap
-      >
-        <SheetProvider sheet={sheet}>
-          {/* @ts-ignore */}
-          <e.perspectiveCamera makeDefault uniqueName="Camera" />
-          <ambientLight intensity={0.4} />
-          <e.pointLight
-            position={[-10, -10, 5]}
-            intensity={2}
-            color="#ff20f0"
-            uniqueName="Light 1"
-          />
-          <e.pointLight
-            position={[0, 0.5, -1]}
-            distance={1}
-            intensity={2}
-            color="#e4be00"
-            uniqueName="Light 2"
-          />
-          <group position={[0, -0.9, -3]}>
-            <Plane
-              color="hotpink"
-              rotation-x={-Math.PI / 2}
-              position-z={2}
-              scale={[4, 20, 0.2]}
-              uniqueName="plane1"
-            />
-            <Plane
-              color="#e4be00"
-              rotation-x={-Math.PI / 2}
-              position-y={1}
-              scale={[4.2, 0.2, 4]}
-              uniqueName="plane2"
-            />
-            <Plane
-              color="#736fbd"
-              rotation-x={-Math.PI / 2}
-              position={[-1.7, 1, 3.5]}
-              scale={[0.5, 4, 4]}
-              uniqueName="plane3"
-            />
-            <Plane
-              color="white"
-              rotation-x={-Math.PI / 2}
-              position={[0, 4.5, 3]}
-              scale={[2, 0.03, 4]}
-              uniqueName="plane4"
-            />
-          </group>
-          <Button />
-        </SheetProvider>
-      </Canvas>
-    </div>
-  )
-}
-
-export default App
diff --git a/compatibility-tests/test-create-react-app/src/App.test.js b/compatibility-tests/test-create-react-app/src/App.test.js
deleted file mode 100644
index 426d4f4..0000000
--- a/compatibility-tests/test-create-react-app/src/App.test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {render, screen} from '@testing-library/react'
-
-test('renders learn react link', () => {
-  render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
-  expect(linkElement).toBeInTheDocument()
-})
diff --git a/compatibility-tests/test-create-react-app/src/index.css b/compatibility-tests/test-create-react-app/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/compatibility-tests/test-create-react-app/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/compatibility-tests/test-create-react-app/src/index.js b/compatibility-tests/test-create-react-app/src/index.js
deleted file mode 100644
index 60d82ab..0000000
--- a/compatibility-tests/test-create-react-app/src/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import ReactDOM from 'react-dom'
-import './index.css'
-import reportWebVitals from './reportWebVitals'
-import '@theatre/studio'
-import {getProject} from '@theatre/core'
-import React from 'react'
-import App from './App'
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App project={getProject('CRA project')} />
-  </React.StrictMode>,
-  document.getElementById('root'),
-)
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
diff --git a/compatibility-tests/test-create-react-app/src/logo.svg b/compatibility-tests/test-create-react-app/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/compatibility-tests/test-create-react-app/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/compatibility-tests/test-create-react-app/src/react-app-env.d.ts b/compatibility-tests/test-create-react-app/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/compatibility-tests/test-create-react-app/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
diff --git a/compatibility-tests/test-create-react-app/src/reportWebVitals.js b/compatibility-tests/test-create-react-app/src/reportWebVitals.js
deleted file mode 100644
index 21ea93d..0000000
--- a/compatibility-tests/test-create-react-app/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = (onPerfEntry) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
-      getCLS(onPerfEntry)
-      getFID(onPerfEntry)
-      getFCP(onPerfEntry)
-      getLCP(onPerfEntry)
-      getTTFB(onPerfEntry)
-    })
-  }
-}
-
-export default reportWebVitals
diff --git a/compatibility-tests/test-create-react-app/src/setupTests.js b/compatibility-tests/test-create-react-app/src/setupTests.js
deleted file mode 100644
index 52aaef1..0000000
--- a/compatibility-tests/test-create-react-app/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom'
diff --git a/compatibility-tests/test-create-react-app/src/useDrag.js b/compatibility-tests/test-create-react-app/src/useDrag.js
deleted file mode 100644
index 65ef93b..0000000
--- a/compatibility-tests/test-create-react-app/src/useDrag.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import {useLayoutEffect, useRef} from 'react'
-
-const noop = () => {}
-
-function createCursorLock(cursor) {
-  const el = document.createElement('div')
-  el.style.cssText = `
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9999999;`
-
-  el.style.cursor = cursor
-  document.body.appendChild(el)
-  const relinquish = () => {
-    document.body.removeChild(el)
-  }
-
-  return relinquish
-}
-
-export default function useDrag(target, opts) {
-  const optsRef = useRef(opts)
-  optsRef.current = opts
-
-  const modeRef = useRef('notDragging')
-
-  const stateRef = useRef({dragHappened: false, startPos: {x: 0, y: 0}})
-
-  useLayoutEffect(() => {
-    if (!target) return
-
-    const getDistances = (event) => {
-      const {startPos} = stateRef.current
-      return [event.screenX - startPos.x, event.screenY - startPos.y]
-    }
-
-    let relinquishCursorLock = noop
-
-    const dragHandler = (event) => {
-      if (!stateRef.current.dragHappened && optsRef.current.lockCursorTo) {
-        relinquishCursorLock = createCursorLock(optsRef.current.lockCursorTo)
-      }
-      if (!stateRef.current.dragHappened) stateRef.current.dragHappened = true
-      modeRef.current = 'dragging'
-
-      const deltas = getDistances(event)
-      optsRef.current.onDrag(deltas[0], deltas[1], event)
-    }
-
-    const dragEndHandler = () => {
-      removeDragListeners()
-      modeRef.current = 'notDragging'
-
-      optsRef.current.onDragEnd &&
-        optsRef.current.onDragEnd(stateRef.current.dragHappened)
-      relinquishCursorLock()
-      relinquishCursorLock = noop
-    }
-
-    const addDragListeners = () => {
-      document.addEventListener('mousemove', dragHandler)
-      document.addEventListener('mouseup', dragEndHandler)
-    }
-
-    const removeDragListeners = () => {
-      document.removeEventListener('mousemove', dragHandler)
-      document.removeEventListener('mouseup', dragEndHandler)
-    }
-
-    const preventUnwantedClick = (event) => {
-      if (optsRef.current.disabled) return
-      if (stateRef.current.dragHappened) {
-        if (
-          !optsRef.current.dontBlockMouseDown &&
-          modeRef.current !== 'notDragging'
-        ) {
-          event.stopPropagation()
-          event.preventDefault()
-        }
-        stateRef.current.dragHappened = false
-      }
-    }
-
-    const dragStartHandler = (event) => {
-      const opts = optsRef.current
-      if (opts.disabled === true) return
-
-      if (event.button !== 0) return
-      const resultOfStart = opts.onDragStart && opts.onDragStart(event)
-
-      if (resultOfStart === false) return
-
-      if (!opts.dontBlockMouseDown) {
-        event.stopPropagation()
-        event.preventDefault()
-      }
-
-      modeRef.current = 'dragStartCalled'
-
-      const {screenX, screenY} = event
-      stateRef.current.startPos = {x: screenX, y: screenY}
-      stateRef.current.dragHappened = false
-
-      addDragListeners()
-    }
-
-    const onMouseDown = (e) => {
-      dragStartHandler(e)
-    }
-
-    target.addEventListener('mousedown', onMouseDown)
-    target.addEventListener('click', preventUnwantedClick)
-
-    return () => {
-      removeDragListeners()
-      target.removeEventListener('mousedown', onMouseDown)
-      target.removeEventListener('click', preventUnwantedClick)
-      relinquishCursorLock()
-
-      if (modeRef.current !== 'notDragging') {
-        optsRef.current.onDragEnd &&
-          optsRef.current.onDragEnd(modeRef.current === 'dragging')
-      }
-      modeRef.current = 'notDragging'
-    }
-  }, [target])
-}
diff --git a/compatibility-tests/test-next/.gitignore b/compatibility-tests/test-next/.gitignore
new file mode 100644
index 0000000..b379a52
--- /dev/null
+++ b/compatibility-tests/test-next/.gitignore
@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
diff --git a/compatibility-tests/test-next/README.md b/compatibility-tests/test-next/README.md
new file mode 100644
index 0000000..02695bc
--- /dev/null
+++ b/compatibility-tests/test-next/README.md
@@ -0,0 +1 @@
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).
\ No newline at end of file
diff --git a/compatibility-tests/test-next/package.json b/compatibility-tests/test-next/package.json
new file mode 100644
index 0000000..ca816ba
--- /dev/null
+++ b/compatibility-tests/test-next/package.json
@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}
diff --git a/compatibility-tests/test-next/pages/index.js b/compatibility-tests/test-next/pages/index.js
new file mode 100644
index 0000000..ca7f1d3
--- /dev/null
+++ b/compatibility-tests/test-next/pages/index.js
@@ -0,0 +1,23 @@
+import Head from 'next/head'
+
+// import ReactDOM from 'react-dom'
+
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+// import React from 'react'
+// import App from './App'
+
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('Project')
+const sheet = project.sheet('Sheet')
+const obj = sheet.object('Obj', {str: 'some string', num: 0})
+
+function App({obj}) {
+  console.log(obj)
+  return <div>hi</div>
+}
+
+export default function Home() {
+  return <App obj={obj}>hi</App>
+}
diff --git a/compatibility-tests/test-next/public/favicon.ico b/compatibility-tests/test-next/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a
GIT binary patch
literal 15086
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
A761SM

literal 0
HcmV?d00001

diff --git a/compatibility-tests/test-parcel1-react18/.gitignore b/compatibility-tests/test-parcel1-react18/.gitignore
new file mode 100644
index 0000000..6ac9863
--- /dev/null
+++ b/compatibility-tests/test-parcel1-react18/.gitignore
@@ -0,0 +1,3 @@
+/.cache
+/dist
+/package-lock.json
\ No newline at end of file
diff --git a/compatibility-tests/test-parcel1-react18/index.html b/compatibility-tests/test-parcel1-react18/index.html
new file mode 100644
index 0000000..4a8bbbd
--- /dev/null
+++ b/compatibility-tests/test-parcel1-react18/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theatre.js Example - DOM</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/compatibility-tests/test-parcel1-react18/package.json b/compatibility-tests/test-parcel1-react18/package.json
new file mode 100644
index 0000000..d7cf605
--- /dev/null
+++ b/compatibility-tests/test-parcel1-react18/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@compat/parcel1-react18",
+  "scripts": {
+    "dev": "parcel serve ./index.html"
+  },
+  "dependencies": {
+    "@theatre/core": "0.0.1-COMPAT.1",
+    "@theatre/studio": "0.0.1-COMPAT.1",
+    "parcel-bundler": "^1.12.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}
diff --git a/compatibility-tests/test-parcel1-react18/src/App.js b/compatibility-tests/test-parcel1-react18/src/App.js
new file mode 100644
index 0000000..1533aae
--- /dev/null
+++ b/compatibility-tests/test-parcel1-react18/src/App.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function App({obj}) {
+  console.log(obj)
+  return <div>hi</div>
+}
diff --git a/compatibility-tests/test-parcel1-react18/src/index.js b/compatibility-tests/test-parcel1-react18/src/index.js
new file mode 100644
index 0000000..69e4852
--- /dev/null
+++ b/compatibility-tests/test-parcel1-react18/src/index.js
@@ -0,0 +1,19 @@
+// import ReactDOM from 'react-dom'
+
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+// import React from 'react'
+// import App from './App'
+
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('Project')
+const sheet = project.sheet('Sheet')
+const obj = sheet.object('Obj', {str: 'some string', num: 0})
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App obj={obj} />
+//   </React.StrictMode>,
+//   document.getElementById('root'),
+// )
diff --git a/compatibility-tests/test-parcel2-react18/.gitignore b/compatibility-tests/test-parcel2-react18/.gitignore
new file mode 100644
index 0000000..eb1bada
--- /dev/null
+++ b/compatibility-tests/test-parcel2-react18/.gitignore
@@ -0,0 +1,4 @@
+/.parcel-cache
+/.cache
+/dist
+/package-lock.json
diff --git a/compatibility-tests/test-parcel2-react18/index.html b/compatibility-tests/test-parcel2-react18/index.html
new file mode 100644
index 0000000..f095642
--- /dev/null
+++ b/compatibility-tests/test-parcel2-react18/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theatre.js Example - DOM</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/compatibility-tests/test-parcel2-react18/package.json b/compatibility-tests/test-parcel2-react18/package.json
new file mode 100644
index 0000000..a1df9f8
--- /dev/null
+++ b/compatibility-tests/test-parcel2-react18/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@compat/parcel2-react18",
+  "scripts": {
+    "dev": "parcel serve ./index.html"
+  },
+  "dependencies": {
+    "@theatre/core": "0.0.1-COMPAT.1",
+    "@theatre/studio": "0.0.1-COMPAT.1",
+    "parcel": "^2.5.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  }
+}
diff --git a/compatibility-tests/test-parcel2-react18/src/App.js b/compatibility-tests/test-parcel2-react18/src/App.js
new file mode 100644
index 0000000..1533aae
--- /dev/null
+++ b/compatibility-tests/test-parcel2-react18/src/App.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function App({obj}) {
+  console.log(obj)
+  return <div>hi</div>
+}
diff --git a/compatibility-tests/test-parcel2-react18/src/index.js b/compatibility-tests/test-parcel2-react18/src/index.js
new file mode 100644
index 0000000..69e4852
--- /dev/null
+++ b/compatibility-tests/test-parcel2-react18/src/index.js
@@ -0,0 +1,19 @@
+// import ReactDOM from 'react-dom'
+
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+// import React from 'react'
+// import App from './App'
+
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('Project')
+const sheet = project.sheet('Sheet')
+const obj = sheet.object('Obj', {str: 'some string', num: 0})
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App obj={obj} />
+//   </React.StrictMode>,
+//   document.getElementById('root'),
+// )
diff --git a/compatibility-tests/test-vite-react18/.gitignore b/compatibility-tests/test-vite-react18/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/compatibility-tests/test-vite-react18/index.html b/compatibility-tests/test-vite-react18/index.html
new file mode 100644
index 0000000..ec41bbd
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/compatibility-tests/test-vite-react18/package.json b/compatibility-tests/test-vite-react18/package.json
new file mode 100644
index 0000000..ae9fc28
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@compat/vite-react18",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9"
+  }
+}
diff --git a/compatibility-tests/test-vite-react18/src/App.tsx b/compatibility-tests/test-vite-react18/src/App.tsx
new file mode 100644
index 0000000..1533aae
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/src/App.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function App({obj}) {
+  console.log(obj)
+  return <div>hi</div>
+}
diff --git a/compatibility-tests/test-vite-react18/src/main.tsx b/compatibility-tests/test-vite-react18/src/main.tsx
new file mode 100644
index 0000000..69e4852
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/src/main.tsx
@@ -0,0 +1,19 @@
+// import ReactDOM from 'react-dom'
+
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+// import React from 'react'
+// import App from './App'
+
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('Project')
+const sheet = project.sheet('Sheet')
+const obj = sheet.object('Obj', {str: 'some string', num: 0})
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App obj={obj} />
+//   </React.StrictMode>,
+//   document.getElementById('root'),
+// )
diff --git a/compatibility-tests/test-vite-react18/src/vite-env.d.ts b/compatibility-tests/test-vite-react18/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/compatibility-tests/test-vite-react18/tsconfig.json b/compatibility-tests/test-vite-react18/tsconfig.json
new file mode 100644
index 0000000..3d0a51a
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/compatibility-tests/test-vite-react18/tsconfig.node.json b/compatibility-tests/test-vite-react18/tsconfig.node.json
new file mode 100644
index 0000000..e993792
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/compatibility-tests/test-vite-react18/vite.config.ts b/compatibility-tests/test-vite-react18/vite.config.ts
new file mode 100644
index 0000000..7a44b51
--- /dev/null
+++ b/compatibility-tests/test-vite-react18/vite.config.ts
@@ -0,0 +1,7 @@
+import {defineConfig} from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/packages/dataverse/devEnv/build.ts b/packages/dataverse/devEnv/build.ts
index 8e78ed6..063e614 100644
--- a/packages/dataverse/devEnv/build.ts
+++ b/packages/dataverse/devEnv/build.ts
@@ -1,9 +1,7 @@
 import * as path from 'path'
 import {build} from 'esbuild'
 
-const definedGlobals = {
-  global: 'window',
-}
+const definedGlobals = {}
 
 function createBundles(watch: boolean) {
   const pathToPackage = path.join(__dirname, '../')
diff --git a/packages/dataverse/src/Ticker.ts b/packages/dataverse/src/Ticker.ts
index 42d3218..cb2f6ce 100644
--- a/packages/dataverse/src/Ticker.ts
+++ b/packages/dataverse/src/Ticker.ts
@@ -1,10 +1,42 @@
 type ICallback = (t: number) => void
 
+function createRafTicker() {
+  const ticker = new Ticker()
+
+  if (typeof window !== 'undefined') {
+    /**
+     * @remarks
+     * TODO users should also be able to define their own ticker.
+     */
+    const onAnimationFrame = (t: number) => {
+      ticker.tick(t)
+      window.requestAnimationFrame(onAnimationFrame)
+    }
+    window.requestAnimationFrame(onAnimationFrame)
+  } else {
+    ticker.tick(0)
+    setTimeout(() => ticker.tick(1), 0)
+    console.log(
+      `@theatre/dataverse is running in a server rather than in a browser. We haven't gotten around to testing server-side rendering, so if something is working in the browser but not on the server, please file a bug: https://github.com/theatre-js/theatre/issues/new`,
+    )
+  }
+
+  return ticker
+}
+
+let rafTicker: undefined | Ticker
+
 /**
  * The Ticker class helps schedule callbacks. Scheduled callbacks are executed per tick. Ticks can be triggered by an
  * external scheduling strategy, e.g. a raf.
  */
 export default class Ticker {
+  static get raf(): Ticker {
+    if (!rafTicker) {
+      rafTicker = createRafTicker()
+    }
+    return rafTicker
+  }
   private _scheduledForThisOrNextTick: Set<ICallback>
   private _scheduledForNextTick: Set<ICallback>
   private _timeAtCurrentTick: number
diff --git a/packages/dataverse/src/derivations/prism/discoveryMechanism.ts b/packages/dataverse/src/derivations/prism/discoveryMechanism.ts
index 90b6e2a..a3849af 100644
--- a/packages/dataverse/src/derivations/prism/discoveryMechanism.ts
+++ b/packages/dataverse/src/derivations/prism/discoveryMechanism.ts
@@ -62,10 +62,16 @@ function createMechanism() {
 
 function getSharedMechanism(): ReturnType<typeof createMechanism> {
   const varName = '__dataverse_discoveryMechanism_sharedStack'
-  if (global) {
+  const root =
+    typeof window !== 'undefined'
+      ? window
+      : typeof global !== 'undefined'
+      ? global
+      : {}
+  if (root) {
     const existingMechanism: ReturnType<typeof createMechanism> | undefined =
       // @ts-ignore ignore
-      global[varName]
+      root[varName]
     if (
       existingMechanism &&
       typeof existingMechanism === 'object' &&
@@ -75,7 +81,7 @@ function getSharedMechanism(): ReturnType<typeof createMechanism> {
     } else {
       const mechanism = createMechanism()
       // @ts-ignore ignore
-      global[varName] = mechanism
+      root[varName] = mechanism
       return mechanism
     }
   } else {
diff --git a/packages/playground/devEnv/vite.config.ts b/packages/playground/devEnv/vite.config.ts
index 8486841..cc51854 100644
--- a/packages/playground/devEnv/vite.config.ts
+++ b/packages/playground/devEnv/vite.config.ts
@@ -39,5 +39,8 @@ export default defineConfig({
     */
     alias: [...getAliasesFromTsConfigForRollup()],
   },
-  define: {...definedGlobals, 'window.__IS_VISUAL_REGRESSION_TESTING': 'true'},
+  define: {
+    ...definedGlobals,
+    'window.__IS_VISUAL_REGRESSION_TESTING': 'true',
+  },
 })
diff --git a/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx b/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx
index fe11ebf..06c4fa9 100644
--- a/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx
+++ b/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx
@@ -99,7 +99,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
 
       const ctx = canvasRef.current!.getContext('2d')!
 
-      console.log(gl.domElement.getContext('webgl2')!.getContextAttributes())
+      // console.log(gl.domElement.getContext('webgl2')!.getContextAttributes())
 
       // https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing
       ctx.imageSmoothingQuality = 'high'
diff --git a/packages/r3f/src/components/SnapshotEditor.tsx b/packages/r3f/src/components/SnapshotEditor.tsx
index 32f3882..364b6f4 100644
--- a/packages/r3f/src/components/SnapshotEditor.tsx
+++ b/packages/r3f/src/components/SnapshotEditor.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useLayoutEffect, useMemo} from 'react'
+import {useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react'
 import React from 'react'
 import {Canvas, useThree} from '@react-three/fiber'
 import type {BaseSheetObjectType} from '../store'
@@ -6,7 +6,7 @@ import {allRegisteredObjects, useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow/styled-components'
 import ProxyManager from './ProxyManager'
-import studio, {ToolbarIconButton} from '@theatre/studio'
+import studio from '@theatre/studio'
 import {useVal} from '@theatre/react'
 import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
 import type {ISheet} from '@theatre/core'
@@ -16,7 +16,6 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {InfiniteGridHelper} from '../InfiniteGridHelper'
 import {DragDetectorProvider} from './DragDetector'
 import TooltipPortalProvider from './TooltipPortalProvider'
-import {FiRefreshCw} from 'react-icons/fi'
 import ReferenceWindow from './ReferenceWindow/ReferenceWindow'
 
 const GlobalStyle = createGlobalStyle`
@@ -168,6 +167,14 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
     }
   }, [])
 
+  const [toolsContainer, setToolsContainer] = useState<null | HTMLElement>()
+
+  useEffect(() => {
+    if (!toolsContainer) return
+
+    return studio.ui.renderToolset('snapshot-editor', toolsContainer)
+  }, [toolsContainer])
+
   if (!editorObject) return <></>
 
   return (
@@ -178,14 +185,7 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
           <TooltipPortalProvider>
             <Wrapper>
               <Overlay>
-                <Tools>
-                  <ToolbarIconButton
-                    title="Refresh Snapshot"
-                    onClick={createSnapshot}
-                  >
-                    <FiRefreshCw />
-                  </ToolbarIconButton>
-                </Tools>
+                <Tools ref={setToolsContainer} />
                 {showReferenceWindow && (
                   <ReferenceWindowContainer>
                     <ReferenceWindow height={120} />
diff --git a/packages/r3f/src/components/Toolbar/Toolbar.tsx b/packages/r3f/src/components/Toolbar/Toolbar.tsx
deleted file mode 100644
index 9336040..0000000
--- a/packages/r3f/src/components/Toolbar/Toolbar.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import {IoCameraOutline} from 'react-icons/io5'
-import studio, {ToolbarIconButton} from '@theatre/studio'
-import {useVal} from '@theatre/react'
-import TransformControlsModeSelect from './TransformControlsModeSelect'
-import ViewportShadingSelect from './ViewportShadingSelect'
-import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
-import {getEditorSheetObject} from '../editorStuff'
-
-const Toolbar: VFC = () => {
-  const editorObject = getEditorSheetObject()
-
-  const transformControlsMode =
-    useVal(editorObject?.props.transformControls.mode) ?? 'translate'
-  const transformControlsSpace =
-    useVal(editorObject?.props.transformControls.space) ?? 'world'
-  const viewportShading =
-    useVal(editorObject?.props.viewport.shading) ?? 'rendered'
-
-  if (!editorObject) return <></>
-
-  return (
-    <>
-      <ToolbarIconButton
-        onClick={() => {
-          studio.createPane('snapshot')
-        }}
-        title="Create snapshot"
-      >
-        <IoCameraOutline />
-      </ToolbarIconButton>
-      <TransformControlsModeSelect
-        value={transformControlsMode}
-        onChange={(value) =>
-          studio.transaction(({set}) =>
-            set(editorObject!.props.transformControls.mode, value),
-          )
-        }
-      />
-      <TransformControlsSpaceSelect
-        value={transformControlsSpace}
-        onChange={(space) => {
-          studio.transaction(({set}) => {
-            set(editorObject.props.transformControls.space, space)
-          })
-        }}
-      />
-      <ViewportShadingSelect
-        value={viewportShading}
-        onChange={(shading) => {
-          studio.transaction(({set}) => {
-            set(editorObject.props.viewport.shading, shading)
-          })
-        }}
-      />
-
-      {/* <ToolbarIconButton
-        label="Focus on selected"
-        icon={<RiFocus3Line />}
-        onClick={() => {
-          const orbitControls =
-            useEditorStore.getState().orbitControlsRef?.current
-          const selected = getSelected()
-
-          let focusObject
-
-          if (selected) {
-            focusObject =
-              useEditorStore.getState().editablesSnapshot![selected].proxyObject
-          }
-
-          if (orbitControls && focusObject) {
-            focusObject.getWorldPosition(
-              // @ts-ignore TODO
-              orbitControls.target as Vector3,
-            )
-          }
-        }}
-      /> */}
-
-      {/* <ToolbarIconButton
-        label="Align object to view"
-        icon={<GiPocketBow />}
-        onClick={() => {
-          const camera = (
-            useEditorStore.getState().orbitControlsRef?.current as $FixMe
-          )?.object
-
-          const selected = getSelected()
-
-          let proxyObject
-
-          if (selected) {
-            proxyObject =
-              useEditorStore.getState().editablesSnapshot![selected].proxyObject
-
-            if (proxyObject && camera) {
-              const direction = new Vector3()
-              const position = camera.position.clone()
-
-              camera.getWorldDirection(direction)
-              proxyObject.position.set(0, 0, 0)
-              proxyObject.lookAt(direction)
-
-              proxyObject.parent!.worldToLocal(position)
-              proxyObject.position.copy(position)
-
-              proxyObject.updateMatrix()
-            }
-          }
-        }}
-      /> */}
-    </>
-  )
-}
-
-export default Toolbar
diff --git a/packages/r3f/src/components/Toolbar/TransformControlsModeSelect.tsx b/packages/r3f/src/components/Toolbar/TransformControlsModeSelect.tsx
deleted file mode 100644
index 6b03b39..0000000
--- a/packages/r3f/src/components/Toolbar/TransformControlsModeSelect.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {ToolbarSwitchSelect} from '@theatre/studio'
-import type {VFC} from 'react'
-import React from 'react'
-import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/gi'
-import type {TransformControlsMode} from '../../store'
-
-export interface TransformControlsModeSelectProps {
-  value: TransformControlsMode
-  onChange: (value: string) => void
-}
-
-const TransformControlsModeSelect: VFC<TransformControlsModeSelectProps> = ({
-  value,
-  onChange,
-}) => {
-  return (
-    <ToolbarSwitchSelect
-      value={value}
-      onChange={onChange}
-      options={[
-        {
-          value: 'translate',
-          label: 'Tool: Translate',
-          icon: <GiMove />,
-        },
-        {
-          value: 'rotate',
-          label: 'Tool: Rotate',
-          icon: <GiClockwiseRotation />,
-        },
-        {
-          value: 'scale',
-          label: 'Tool: Scale',
-          icon: <GiResize />,
-        },
-      ]}
-    />
-  )
-}
-
-export default TransformControlsModeSelect
diff --git a/packages/r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx b/packages/r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx
deleted file mode 100644
index 4c1d874..0000000
--- a/packages/r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import type {TransformControlsSpace} from '../../store'
-import {BiCube, BiGlobe} from 'react-icons/bi'
-import {ToolbarSwitchSelect} from '@theatre/studio'
-
-export interface TransformControlsSpaceSelectProps {
-  value: TransformControlsSpace
-  onChange: (value: TransformControlsSpace) => void
-}
-
-const TransformControlsSpaceSelect: VFC<TransformControlsSpaceSelectProps> = ({
-  value,
-  onChange,
-}) => (
-  <ToolbarSwitchSelect
-    value={value}
-    onChange={onChange}
-    options={[
-      {
-        value: 'world',
-        label: 'Space: World',
-        icon: <BiGlobe />,
-      },
-      {
-        value: 'local',
-        label: 'Space: Local',
-        icon: <BiCube />,
-      },
-    ]}
-  />
-)
-
-export default TransformControlsSpaceSelect
diff --git a/packages/r3f/src/components/Toolbar/ViewportShadingSelect.tsx b/packages/r3f/src/components/Toolbar/ViewportShadingSelect.tsx
deleted file mode 100644
index 25e57a2..0000000
--- a/packages/r3f/src/components/Toolbar/ViewportShadingSelect.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import type {ViewportShading} from '../../store'
-import {FaCube} from 'react-icons/fa'
-import {GiCube, GiIceCube} from 'react-icons/gi'
-import {BiCube} from 'react-icons/bi'
-import {ToolbarSwitchSelect} from '@theatre/studio'
-
-export interface ViewportShadingSelectProps {
-  value: ViewportShading
-  onChange: (value: ViewportShading) => void
-}
-
-const ViewportShadingSelect: VFC<ViewportShadingSelectProps> = ({
-  value,
-  onChange,
-}) => (
-  <ToolbarSwitchSelect
-    value={value}
-    onChange={onChange}
-    options={[
-      {
-        value: 'wireframe',
-        label: 'Display: Wireframe',
-        icon: <BiCube />,
-      },
-      {
-        value: 'flat',
-        label: 'Display: Flat',
-        icon: <GiCube />,
-      },
-      {
-        value: 'solid',
-        label: 'Display: Solid',
-        icon: <FaCube />,
-      },
-      {
-        value: 'rendered',
-        label: 'Display: Rendered',
-        icon: <GiIceCube />,
-      },
-    ]}
-  />
-)
-
-export default ViewportShadingSelect
diff --git a/packages/r3f/src/extension.ts b/packages/r3f/src/extension.ts
index d1463d2..e3ce143 100644
--- a/packages/r3f/src/extension.ts
+++ b/packages/r3f/src/extension.ts
@@ -1,16 +1,150 @@
 import SnapshotEditor from './components/SnapshotEditor'
 import type {IExtension} from '@theatre/studio'
-import Toolbar from './components/Toolbar/Toolbar'
+import {prism, Ticker, val} from '@theatre/dataverse'
+import {getEditorSheetObject} from './components/editorStuff'
+import {useEditorStore} from './store'
+import ReactDOM from 'react-dom'
+import React from 'react'
+import type {ToolsetConfig} from '@theatre/studio'
+
+const io5CameraOutline = `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Camera</title><path d="M350.54 148.68l-26.62-42.06C318.31 100.08 310.62 96 302 96h-92c-8.62 0-16.31 4.08-21.92 10.62l-26.62 42.06C155.85 155.23 148.62 160 140 160H80a32 32 0 00-32 32v192a32 32 0 0032 32h352a32 32 0 0032-32V192a32 32 0 00-32-32h-59c-8.65 0-16.85-4.77-22.46-11.32z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="256" cy="272" r="80" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M124 158v-22h-24v22"/></svg>`
+const gameIconMove = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 34.47l-90.51 90.51h67.883v108.393H124.98V165.49L34.47 256l90.51 90.51v-67.883h108.393V387.02H165.49L256 477.53l90.51-90.51h-67.883V278.627H387.02v67.883L477.53 256l-90.51-90.51v67.883H278.627V124.98h67.883L256 34.47z"/></svg>`
+const gameIconClockwiseRotation = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M263.09 50c-11.882-.007-23.875 1.018-35.857 3.13C142.026 68.156 75.156 135.026 60.13 220.233 45.108 305.44 85.075 391.15 160.005 434.41c32.782 18.927 69.254 27.996 105.463 27.553 46.555-.57 92.675-16.865 129.957-48.15l-30.855-36.768c-50.95 42.75-122.968 49.05-180.566 15.797-57.597-33.254-88.152-98.777-76.603-164.274 11.55-65.497 62.672-116.62 128.17-128.168 51.656-9.108 103.323 7.98 139.17 43.862L327 192h128V64l-46.34 46.342C370.242 71.962 317.83 50.03 263.09 50z"/></svg>`
+const gameIconResize = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29 30l1 90h36V66h26V30H29zm99 0v36h72V30h-72zm108 0v36h72V30h-72zm108 0v36h72V30h-72zm102 0v78h36V30h-36zm-206 80v36h100.543l-118 118H30v218h218V289.457l118-118V272h36V110H240zm206 34v72h36v-72h-36zM30 156v72h36v-72H30zm416 96v72h36v-72h-36zm0 108v72h36v-72h-36zm-166 86v36h72v-36h-72zm108 0v36h72v-36h-72z"/></svg>`
+const boxIconsGlobe = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-2.764a14.67 14.67 0 0 0-1.792-6.243A8.013 8.013 0 0 1 19.931 11zM12.53 4.027c1.035 1.364 2.427 3.78 2.627 6.973H9.03c.139-2.596.994-5.028 2.451-6.974.172-.01.344-.026.519-.026.179 0 .354.016.53.027zm-3.842.7C7.704 6.618 7.136 8.762 7.03 11H4.069a8.013 8.013 0 0 1 4.619-6.273zM4.069 13h2.974c.136 2.379.665 4.478 1.556 6.23A8.01 8.01 0 0 1 4.069 13zm7.381 6.973C10.049 18.275 9.222 15.896 9.041 13h6.113c-.208 2.773-1.117 5.196-2.603 6.972-.182.012-.364.028-.551.028-.186 0-.367-.016-.55-.027zm4.011-.772c.955-1.794 1.538-3.901 1.691-6.201h2.778a8.005 8.005 0 0 1-4.469 6.201z"></path></svg>`
+const boxIconsCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-2.764a14.67 14.67 0 0 0-1.792-6.243A8.013 8.013 0 0 1 19.931 11zM12.53 4.027c1.035 1.364 2.427 3.78 2.627 6.973H9.03c.139-2.596.994-5.028 2.451-6.974.172-.01.344-.026.519-.026.179 0 .354.016.53.027zm-3.842.7C7.704 6.618 7.136 8.762 7.03 11H4.069a8.013 8.013 0 0 1 4.619-6.273zM4.069 13h2.974c.136 2.379.665 4.478 1.556 6.23A8.01 8.01 0 0 1 4.069 13zm7.381 6.973C10.049 18.275 9.222 15.896 9.041 13h6.113c-.208 2.773-1.117 5.196-2.603 6.972-.182.012-.364.028-.551.028-.186 0-.367-.016-.55-.027zm4.011-.772c.955-1.794 1.538-3.901 1.691-6.201h2.778a8.005 8.005 0 0 1-4.469 6.201z"></path></svg>`
+const gameIconsCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 24.585L51.47 118.989 256 213.394l204.53-94.405zM38.998 133.054v258.353L247 487.415V229.063zm434.004 0L265 229.062v258.353l208.002-96.008z"></path></svg>`
+const fontAwesomeCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"></path></svg>`
+const gameIconsIceCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M238.406 26.844c-9.653.12-18.926 2.69-30.437 7.062l-157.282 57c-20.984 7.65-21.587 11.834-22.344 33.28L20.937 358.22c-1.207 27.514-.654 33.187 23.25 43.56L229.97 483.19c19.34 8.29 31.906 7.655 45.186 3.218l181.938-56.53c21.95-7.295 25.04-9.627 25.875-36.845l7.686-250.155c.662-17.37-5.667-24.695-18.78-29.625L271.062 34.375c-12.977-5.344-23.003-7.653-32.657-7.53zm.813 24.875c23.637-.053 45.564 8.434 87.874 24.874 95.545 37.123 131.71 53.8 69.687 77.937-74.002 28.802-128.175 45.115-172.28 25.814L113.47 131.75c-34.57-15.127-44.69-27.46 17.843-50.094 55.64-20.14 82.742-29.882 107.906-29.937zm44.718 43.75c-38.284.402-55.285 21.205-56.813 38.936-.873 10.132 2.95 19.6 12.406 26.25 9.456 6.65 25.355 10.56 48.97 5.938 35.817-7.01 61.536-15.056 77.5-22.844 7.982-3.894 13.464-7.737 16.5-10.844 3.036-3.107 3.453-4.942 3.438-6-.016-1.057-.44-2.675-3.313-5.406-2.873-2.73-8.03-6.04-15.22-9.156-14.378-6.233-36.757-11.877-65.717-15.72-6.355-.842-12.28-1.213-17.75-1.155zM59.25 134c10.372-.29 29.217 7.2 63.906 22.656 140.925 62.786 140.52 65.876 130.97 200.656-7.783 109.81-8.797 109.85-128.47 59.282-73.15-30.91-86.806-40.853-85.187-88.97l5.468-162.937c.674-20.034 1.557-30.358 13.312-30.687zm381.938 30.906c29.172-.384 29.1 28.075 26.75 105.25-4.118 135.132-9.05 140.184-120.375 173.72-70.42 21.21-81.49 25.614-78.97-12.032l11-164.156c3.217-48.034 7.588-51.508 94.813-83.907 31.323-11.633 52.534-18.686 66.78-18.874zm-20.438 40.688c-.332-.002-.674.015-1 .03-5.22.263-10.226 2.77-14.188 8.407-3.96 5.638-6.81 14.71-5.687 27.907 1.448 17.033-4.507 38.11-15.156 56.938-10.65 18.827-26.502 35.91-47.814 38.813-29.127 3.968-42.41 23.58-43.5 42.062-.545 9.24 2.108 18.03 7.688 24.594s14.088 11.335 27.187 12.03c41.146 2.185 71.336-10.766 91.595-39.155 20.26-28.39 30.396-73.76 25.875-136.595-1.876-26.076-14.708-34.977-25-35.03zm-246.25 8.844c-.644 0-1.218.063-1.72.187-2.003.494-3.685 1.53-5.655 4.813-1.913 3.186-3.688 8.618-4.406 16.343l-.064.657c-1.388 16.732-8.098 28.602-17.844 35.063-9.745 6.46-20.794 7.808-31.125 9.094-10.33 1.286-20.177 2.39-28.156 5.75-7.977 3.36-14.36 8.38-19.468 19.78-7.2 16.076-7.143 28.027-3.124 38.563 4.018 10.537 12.688 20.106 24.687 28.75 23.998 17.29 60.27 29.956 88.906 41.844 11.386 4.727 20.496 6.484 27.282 6.126 6.787-.358 11.278-2.423 15.375-6.562 8.195-8.28 14.057-27.692 15-57.344 2.024-63.623-18.84-110.284-38.656-130.875-8.668-9.008-16.52-12.193-21.03-12.188zm184.22 6.812c-.95-.003-1.927.035-2.97.094-35.464 1.99-48.477 12.867-52.5 24.062-4.023 11.196.826 27.07 10.844 39.78 11.488 14.58 20.59 15.736 30.437 12.283 9.848-3.455 20.542-14.108 27.376-26.908s9.512-27.397 7.188-36.28c-1.163-4.443-3.144-7.422-6.47-9.626-2.908-1.928-7.274-3.388-13.905-3.406z"></path></svg>`
 
 const r3fExtension: IExtension = {
   id: '@theatre/r3f',
-  globalToolbar: {
-    component: Toolbar,
+  toolbars: {
+    global(set, studio) {
+      const calc = prism<ToolsetConfig>(() => {
+        const editorObject = getEditorSheetObject()
+
+        const transformControlsMode =
+          val(editorObject?.props.transformControls.mode) ?? 'translate'
+        const transformControlsSpace =
+          val(editorObject?.props.transformControls.space) ?? 'world'
+        const viewportShading =
+          val(editorObject?.props.viewport.shading) ?? 'rendered'
+
+        return [
+          {
+            type: 'Icon',
+            title: 'Create Snapshot',
+            svgSource: io5CameraOutline,
+            onClick: () => {
+              studio.createPane('snapshot')
+            },
+          },
+          {
+            type: 'Switch',
+            value: transformControlsMode,
+            onChange: (value) =>
+              studio.transaction(({set}) =>
+                set(editorObject!.props.transformControls.mode, value),
+              ),
+            options: [
+              {
+                value: 'translate',
+                label: 'Tool: Translate',
+                svgSource: gameIconMove,
+              },
+              {
+                value: 'rotate',
+                label: 'Tool: Rotate',
+                svgSource: gameIconClockwiseRotation,
+              },
+              {
+                value: 'scale',
+                label: 'Tool: Scale',
+                svgSource: gameIconResize,
+              },
+            ],
+          },
+          {
+            type: 'Switch',
+            value: transformControlsSpace,
+            onChange: (space) =>
+              studio.transaction(({set}) => {
+                set(editorObject!.props.transformControls.space, space)
+              }),
+            options: [
+              {
+                value: 'world',
+                label: 'Space: World',
+                svgSource: boxIconsGlobe,
+              },
+              {
+                value: 'local',
+                label: 'Space: Local',
+                svgSource: boxIconsCube,
+              },
+            ],
+          },
+          {
+            type: 'Switch',
+            value: viewportShading,
+            onChange: (shading) =>
+              studio.transaction(({set}) => {
+                set(editorObject!.props.viewport.shading, shading)
+              }),
+            options: [
+              {
+                value: 'wireframe',
+                label: 'Display: Wireframe',
+                svgSource: boxIconsCube,
+              },
+              {
+                value: 'flat',
+                label: 'Display: Flat',
+                svgSource: gameIconsCube,
+              },
+              {
+                value: 'solid',
+                label: 'Display: Solid',
+                svgSource: fontAwesomeCube,
+              },
+              {
+                value: 'rendered',
+                label: 'Display: Rendered',
+                svgSource: gameIconsIceCube,
+              },
+            ],
+          },
+        ]
+      })
+      return calc.tapImmediate(Ticker.raf, () => {
+        set(calc.getValue())
+      })
+    },
+    'snapshot-editor': (set) => {
+      const {createSnapshot} = useEditorStore.getState()
+      const onClick = createSnapshot
+      set([
+        {
+          type: 'Icon',
+          onClick,
+          title: 'Refresh Snapshot',
+          svgSource: `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
+        },
+      ])
+      return () => {}
+    },
   },
   panes: [
     {
       class: 'snapshot',
-      component: SnapshotEditor,
+      mount: ({paneId, node}) => {
+        ReactDOM.render(React.createElement(SnapshotEditor, {paneId}), node)
+        function unmount() {
+          ReactDOM.unmountComponentAtNode(node)
+        }
+        return unmount
+      },
     },
   ],
 }
diff --git a/theatre/core/src/coreTicker.ts b/theatre/core/src/coreTicker.ts
index 9f8b252..be1986f 100644
--- a/theatre/core/src/coreTicker.ts
+++ b/theatre/core/src/coreTicker.ts
@@ -1,15 +1,5 @@
 import {Ticker} from '@theatre/dataverse'
 
-const coreTicker = new Ticker()
+const coreTicker = Ticker.raf
 
 export default coreTicker
-
-/**
- * @remarks
- * TODO users should also be able to define their own ticker.
- */
-const onAnimationFrame = (t: number) => {
-  coreTicker.tick(t)
-  window.requestAnimationFrame(onAnimationFrame)
-}
-window.requestAnimationFrame(onAnimationFrame)
diff --git a/theatre/core/src/sequences/TheatreSequence.ts b/theatre/core/src/sequences/TheatreSequence.ts
index d94b4ea..acbab23 100644
--- a/theatre/core/src/sequences/TheatreSequence.ts
+++ b/theatre/core/src/sequences/TheatreSequence.ts
@@ -308,6 +308,11 @@ async function resolveAudioBuffer(args: IAttachAudioArgs): Promise<{
 
     // AudioContext is suspended, probably because the browser
     // has blocked it since it is not initiated by a user gesture
+
+    // if in SSR, just resolve the promise, as there is not much more to be done
+    if (typeof window === 'undefined') {
+      return Promise.resolve(ctx)
+    }
     return new Promise<AudioContext>((resolve) => {
       const listener = () => {
         ctx.resume()
diff --git a/theatre/devEnv/buildUtils.ts b/theatre/devEnv/buildUtils.ts
index 66a0e3e..ab17fae 100644
--- a/theatre/devEnv/buildUtils.ts
+++ b/theatre/devEnv/buildUtils.ts
@@ -2,10 +2,12 @@ import path from 'path'
 import {build} from 'esbuild'
 
 export const definedGlobals = {
-  global: 'window',
   'process.env.version': JSON.stringify(
     require('../studio/package.json').version,
   ),
+  // json-touch-patch (an unmaintained package) reads this value. We patch it to just 'Set', becauce
+  // this is only used in `@theatre/studio`, which only supports evergreen browsers
+  'global.Set': 'Set',
 }
 
 export function createBundles(watch: boolean) {
@@ -17,7 +19,10 @@ export function createBundles(watch: boolean) {
       loader: {'.png': 'file', '.svg': 'dataurl'},
       bundle: true,
       sourcemap: true,
-      define: {...definedGlobals, __IS_VISUAL_REGRESSION_TESTING: 'false'},
+      define: {
+        ...definedGlobals,
+        __IS_VISUAL_REGRESSION_TESTING: 'false',
+      },
       watch,
       external: [
         '@theatre/dataverse',
@@ -38,9 +43,9 @@ export function createBundles(watch: boolean) {
          * It's probably possible to bundle our own react version and somehow share it
          * with the plugins, but that's not urgent atm.
          */
-        'react',
-        'react-dom',
-        'styled-components',
+        // 'react',
+        // 'react-dom',
+        // 'styled-components',
       ],
     }
 
diff --git a/theatre/studio/package.json b/theatre/studio/package.json
index 86595c6..942d95d 100644
--- a/theatre/studio/package.json
+++ b/theatre/studio/package.json
@@ -26,10 +26,7 @@
     "@theatre/core": "*"
   },
   "dependencies": {
-    "@theatre/dataverse": "workspace:*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "styled-components": "^5.3.0"
+    "@theatre/dataverse": "workspace:*"
   },
   "//": "Add packages here to make them externals of studio. Add them to theatre/package.json if you want to bundle them with studio."
 }
diff --git a/theatre/studio/src/Studio.ts b/theatre/studio/src/Studio.ts
index 0108c74..639b434 100644
--- a/theatre/studio/src/Studio.ts
+++ b/theatre/studio/src/Studio.ts
@@ -52,7 +52,7 @@ export class Studio {
     this.address = {studioId: nanoid(10)}
     this.publicApi = new TheatreStudio(this)
 
-    if (process.env.NODE_ENV !== 'test') {
+    if (process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
       this.ui = new UI(this)
     }
 
@@ -170,6 +170,7 @@ export class Studio {
       if (drafts.ephemeral.extensions.byId[extension.id]) {
         throw new Error(`Extension id "${extension.id}" is already defined`)
       }
+
       drafts.ephemeral.extensions.byId[extension.id] = extension
 
       const allPaneClasses = drafts.ephemeral.extensions.paneClasses
diff --git a/theatre/studio/src/TheatreStudio.ts b/theatre/studio/src/TheatreStudio.ts
index 8c2624c..6c412b5 100644
--- a/theatre/studio/src/TheatreStudio.ts
+++ b/theatre/studio/src/TheatreStudio.ts
@@ -13,7 +13,6 @@ import {
 import {getOutlineSelection} from './selectors'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import getStudio from './getStudio'
-import type React from 'react'
 import {debounce} from 'lodash-es'
 import type Sheet from '@theatre/core/sheets/Sheet'
 import type {PaneInstanceId, ProjectId} from '@theatre/shared/utils/ids'
@@ -67,21 +66,45 @@ export interface PaneClassDefinition {
    * Each pane has a `class`, which is a string.
    */
   class: string
-  /**
-   * A react component that renders the content of the pane. It is given
-   * a single prop, `paneId`, which is a unique identifier for the pane.
-   *
-   * If you wish to store and persist the state of the pane,
-   * simply use a sheet and an object.
-   */
-  component: React.ComponentType<{
-    /**
-     * The unique identifier of the pane
-     */
-    paneId: string
-  }>
+  // /**
+  //  * A react component that renders the content of the pane. It is given
+  //  * a single prop, `paneId`, which is a unique identifier for the pane.
+  //  *
+  //  * If you wish to store and persist the state of the pane,
+  //  * simply use a sheet and an object.
+  //  */
+  // component: React.ComponentType<{
+  //   /**
+  //    * The unique identifier of the pane
+  //    */
+  //   paneId: string
+  // }>
+
+  mount: (opts: {paneId: string; node: HTMLElement}) => () => void
 }
 
+export type ToolConfigIcon = {
+  type: 'Icon'
+  svgSource: string
+  title: string
+  onClick: () => void
+}
+
+export type ToolConfigSwitch = {
+  type: 'Switch'
+  value: string
+  onChange: (value: string) => void
+  options: {
+    value: string
+    label: string
+    svgSource: string
+  }[]
+}
+
+export type ToolConfig = ToolConfigIcon | ToolConfigSwitch
+
+export type ToolsetConfig = Array<ToolConfig>
+
 /**
  * A Theatre.js Studio extension. You can define one either
  * in a separate package, or within your project.
@@ -98,15 +121,13 @@ export interface IExtension {
    * @example
    * TODO
    */
-  globalToolbar?: {
-    /**
-     * A basic react component.
-     *
-     * @example
-     * TODO
-     */
-    component: React.ComponentType<{}>
+  toolbars?: {
+    [key in 'global' | string]: (
+      set: (config: ToolsetConfig) => void,
+      studio: IStudio,
+    ) => () => void
   }
+
   /**
    * Introduces new pane types.
    * @example
@@ -134,6 +155,8 @@ export interface IStudioUI {
    * Makes the studio visible again.
    */
   restore(): void
+
+  renderToolset(toolsetId: string, htmlNode: HTMLElement): () => void
 }
 
 export interface _StudioInitializeOpts {
@@ -359,6 +382,10 @@ export default class TheatreStudio implements IStudio {
     restore() {
       getStudio().ui.restore()
     },
+
+    renderToolset(toolsetId: string, htmlNode: HTMLElement) {
+      return getStudio().ui.renderToolset(toolsetId, htmlNode)
+    },
   }
 
   private readonly _cache = new SimpleCache()
diff --git a/theatre/studio/src/UI.ts b/theatre/studio/src/UI.ts
index d32e33b..86cd396 100644
--- a/theatre/studio/src/UI.ts
+++ b/theatre/studio/src/UI.ts
@@ -4,6 +4,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import type {Studio} from './Studio'
 import {val} from '@theatre/dataverse'
+import {getMounter} from './utils/renderInPortalInContext'
+import {Toolbar} from './toolbars/GlobalToolbar/GlobalToolbar'
+import {withStyledShadow} from './css'
 
 export default class UI {
   readonly containerEl = document.createElement('div')
@@ -86,4 +89,12 @@ export default class UI {
       val(this.studio.atomP.ahistoric.visibilityState) === 'everythingIsHidden'
     )
   }
+
+  renderToolset(toolsetId: string, htmlNode: HTMLElement) {
+    const s = getMounter()
+
+    s.mountOrRender(withStyledShadow(Toolbar), {toolbarId: toolsetId}, htmlNode)
+
+    return s.unmount
+  }
 }
diff --git a/theatre/studio/src/UIRoot/UIRoot.tsx b/theatre/studio/src/UIRoot/UIRoot.tsx
index 2efd376..190a152 100644
--- a/theatre/studio/src/UIRoot/UIRoot.tsx
+++ b/theatre/studio/src/UIRoot/UIRoot.tsx
@@ -2,9 +2,8 @@ import getStudio from '@theatre/studio/getStudio'
 import {usePrism, useVal} from '@theatre/react'
 import {val} from '@theatre/dataverse'
 import React, {useEffect} from 'react'
-import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
+import styled, {createGlobalStyle} from 'styled-components'
 import PanelsRoot from './PanelsRoot'
-import ProvideTheme from './ProvideTheme'
 import GlobalToolbar from '@theatre/studio/toolbars/GlobalToolbar/GlobalToolbar'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import {PortalContext} from 'reakit'
@@ -13,25 +12,17 @@ import useKeyboardShortcuts from './useKeyboardShortcuts'
 import PointerEventsHandler from '@theatre/studio/uiComponents/PointerEventsHandler'
 import TooltipContext from '@theatre/studio/uiComponents/Popover/TooltipContext'
 import {ProvidePointerCapturing} from './PointerCapturing'
+import {MountAll} from '@theatre/studio/utils/renderInPortalInContext'
+import {PortalLayer, ProvideStyles} from '@theatre/studio/css'
 
-const GlobalStyle = createGlobalStyle`
+const MakeRootHostContainStatic =
+  typeof window !== 'undefined'
+    ? createGlobalStyle`
   :host {
-    all: initial;
     contain: strict;
-    color: white;
-    font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
-      HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
-  }
-
-  * {
-    padding: 0;
-    margin: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-    list-style: none;
   }
 `
+    : ({} as ReturnType<typeof createGlobalStyle>)
 
 const Container = styled(PointerEventsHandler)`
   z-index: 50;
@@ -48,24 +39,11 @@ const Container = styled(PointerEventsHandler)`
   }
 `
 
-const PortalLayer = styled.div`
-  z-index: 51;
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  pointer-events: none;
-`
-
 export default function UIRoot() {
   const studio = getStudio()
   const [portalLayerRef, portalLayer] = useRefAndState<HTMLDivElement>(
     undefined as $IntentionalAny,
   )
-  const [containerRef, container] = useRefAndState<HTMLDivElement>(
-    undefined as $IntentionalAny,
-  )
 
   useKeyboardShortcuts()
 
@@ -85,37 +63,39 @@ export default function UIRoot() {
     const initialised = val(studio.atomP.ephemeral.initialised)
 
     return !initialised ? null : (
-      <StyleSheetManager
-        disableVendorPrefixes
-        target={
-          window.__IS_VISUAL_REGRESSION_TESTING === true
-            ? undefined
-            : getStudio()!.ui.containerShadow
-        }
-      >
-        <>
-          <GlobalStyle />
-          <ProvidePointerCapturing>
-            <ProvideTheme>
-              <PortalContext.Provider value={portalLayer}>
-                <TooltipContext>
-                  <Container
-                    className={
-                      visiblityState === 'everythingIsHidden' ? 'invisible' : ''
-                    }
-                  >
-                    <PortalLayer ref={portalLayerRef} />
-                    {<GlobalToolbar />}
-                    {<PanelsRoot />}
-                  </Container>
-                </TooltipContext>
-              </PortalContext.Provider>
-            </ProvideTheme>
-          </ProvidePointerCapturing>
-        </>
-      </StyleSheetManager>
+      <TooltipContext>
+        <ProvidePointerCapturing>
+          <MountExtensionComponents />
+          <PortalContext.Provider value={portalLayer}>
+            <ProvideStyles
+              target={
+                window.__IS_VISUAL_REGRESSION_TESTING === true
+                  ? undefined
+                  : getStudio()!.ui.containerShadow
+              }
+            >
+              <>
+                <MakeRootHostContainStatic />
+                <Container
+                  className={
+                    visiblityState === 'everythingIsHidden' ? 'invisible' : ''
+                  }
+                >
+                  <PortalLayer ref={portalLayerRef} />
+                  {<GlobalToolbar />}
+                  {<PanelsRoot />}
+                </Container>
+              </>
+            </ProvideStyles>
+          </PortalContext.Provider>
+        </ProvidePointerCapturing>
+      </TooltipContext>
     )
   }, [studio, portalLayerRef, portalLayer])
 
   return inside
 }
+
+const MountExtensionComponents: React.FC<{}> = () => {
+  return <MountAll />
+}
diff --git a/theatre/studio/src/css.ts b/theatre/studio/src/css.ts
deleted file mode 100644
index 6c202b3..0000000
--- a/theatre/studio/src/css.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {lighten} from 'polished'
-import {css} from 'styled-components'
-
-/**
- * This CSS string is used to correctly set pointer-events on an element
- * when the pointer is dragging something.
- * Naming explanation: "NormalMode" as opposed to dragging mode.
- *
- * @see PointerEventsHandler - the place that sets `.normal` on #pointer-root
- */
-export const pointerEventsAutoInNormalMode = css`
-  #pointer-root & {
-    pointer-events: none;
-  }
-  #pointer-root.normal & {
-    pointer-events: auto;
-  }
-`
-
-export const theme = {
-  panel: {
-    bg: `#282b2f`,
-    head: {
-      title: {
-        color: `#bbb`,
-      },
-      punctuation: {
-        color: `#808080`,
-      },
-    },
-    body: {
-      compoudThing: {
-        label: {
-          get color(): string {
-            return lighten(0.6, theme.panel.bg)
-          },
-        },
-      },
-    },
-  },
-}
-
-export const panelUtils = {
-  panelBorder: `2px solid #1f1f1f`,
-}
diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx
new file mode 100644
index 0000000..671650b
--- /dev/null
+++ b/theatre/studio/src/css.tsx
@@ -0,0 +1,146 @@
+import {lighten} from 'polished'
+import {css} from 'styled-components'
+import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
+import React, {useLayoutEffect, useState} from 'react'
+import ReactDOM from 'react-dom'
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import {PortalContext} from 'reakit'
+import useRefAndState from './utils/useRefAndState'
+
+/**
+ * This CSS string is used to correctly set pointer-events on an element
+ * when the pointer is dragging something.
+ * Naming explanation: "NormalMode" as opposed to dragging mode.
+ *
+ * @see PointerEventsHandler - the place that sets `.normal` on #pointer-root
+ */
+export const pointerEventsAutoInNormalMode = css`
+  #pointer-root & {
+    pointer-events: none;
+  }
+  #pointer-root.normal & {
+    pointer-events: auto;
+  }
+`
+
+export const theme = {
+  panel: {
+    bg: `#282b2f`,
+    head: {
+      title: {
+        color: `#bbb`,
+      },
+      punctuation: {
+        color: `#808080`,
+      },
+    },
+    body: {
+      compoudThing: {
+        label: {
+          get color(): string {
+            return lighten(0.6, theme.panel.bg)
+          },
+        },
+      },
+    },
+  },
+}
+
+export const panelUtils = {
+  panelBorder: `2px solid #1f1f1f`,
+}
+
+const GlobalStyle =
+  typeof window !== 'undefined'
+    ? createGlobalStyle`
+  :host {
+    all: initial;
+    color: white;
+    font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
+      HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    list-style: none;
+  }
+`
+    : ({} as ReturnType<typeof createGlobalStyle>)
+
+export const PortalLayer = styled.div`
+  z-index: 51;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  pointer-events: none;
+`
+
+export const ProvideStyles: React.FC<{target: undefined | HTMLElement}> = (
+  props,
+) => {
+  return (
+    <StyleSheetManager disableVendorPrefixes target={props.target}>
+      <>
+        <GlobalStyle />
+        {props.children}
+      </>
+    </StyleSheetManager>
+  )
+}
+
+export function withStyledShadow<Props>(
+  Comp: React.ComponentType<Props>,
+): React.ComponentType<Props> {
+  return (props) => (
+    <ProvideStyledShadow>
+      <Comp {...props} />
+    </ProvideStyledShadow>
+  )
+}
+
+const ProvideStyledShadow: React.FC<{}> = (props) => {
+  const [template, ref] = useState<null | HTMLTemplateElement>(null)
+  const [shadowRoot, setShadowRoot] = useState<null | ShadowRoot>(null)
+
+  useLayoutEffect(() => {
+    if (!template) return
+    const shadowRoot = (template.parentNode as HTMLElement).attachShadow({
+      mode: 'open',
+    })
+    setShadowRoot(shadowRoot)
+
+    return () => {
+      template.parentNode?.removeChild(shadowRoot)
+    }
+  }, [template])
+
+  const [portalLayerRef, portalLayer] = useRefAndState<HTMLDivElement>(
+    undefined as $IntentionalAny,
+  )
+
+  if (!shadowRoot) {
+    return (
+      <template ref={ref} shadow-root={'open'}>
+        {props.children}
+      </template>
+    )
+  }
+
+  return ReactDOM.createPortal(
+    <ProvideStyles target={shadowRoot as $IntentionalAny as HTMLElement}>
+      <>
+        <PortalLayer ref={portalLayerRef} />
+        <PortalContext.Provider value={portalLayer}>
+          {props.children}
+        </PortalContext.Provider>
+      </>
+    </ProvideStyles>,
+    shadowRoot as $IntentionalAny as HTMLElement,
+  )
+}
diff --git a/theatre/studio/src/index.ts b/theatre/studio/src/index.ts
index 715f50c..2d463c6 100644
--- a/theatre/studio/src/index.ts
+++ b/theatre/studio/src/index.ts
@@ -69,9 +69,10 @@ function registerStudioBundle() {
   }
 }
 
-export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
-export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
+// export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
+// export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
 export {default as ToolbarDropdownSelect} from './uiComponents/toolbar/ToolbarDropdownSelect'
+
 export type {IScrub} from '@theatre/studio/Scrub'
 export type {
   IStudio,
@@ -80,4 +81,8 @@ export type {
   PaneClassDefinition,
   IStudioUI,
   _StudioInitializeOpts,
+  ToolsetConfig,
+  ToolConfig,
+  ToolConfigIcon,
+  ToolConfigSwitch,
 } from '@theatre/studio/TheatreStudio'
diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
index 7918a0d..b6cbdbe 100644
--- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
@@ -1,7 +1,7 @@
 import type {$FixMe} from '@theatre/shared/utils/types'
 import type {PanelPosition} from '@theatre/studio/store/types'
 import type {PaneInstance} from '@theatre/studio/TheatreStudio'
-import React, {useCallback} from 'react'
+import React, {useCallback, useLayoutEffect, useState} from 'react'
 import styled from 'styled-components'
 import {F2 as F2Impl, TitleBar} from './common'
 import BasePanel from './BasePanel'
@@ -136,7 +136,21 @@ const ErrorFallback: React.FC<{error: Error}> = (props) => {
 const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
   paneInstance,
 }) => {
-  const Comp = paneInstance.definition.component
+  const [mountingPoint, setMountingPoint] = useState<HTMLElement | null>(null)
+
+  const mount = paneInstance.definition.mount
+
+  useLayoutEffect(() => {
+    if (!mountingPoint) return
+    const unmount = mount({
+      paneId: paneInstance.instanceId,
+      node: mountingPoint!,
+    })
+    if (typeof unmount === 'function') {
+      return unmount
+    }
+  }, [mountingPoint, mount, paneInstance.instanceId])
+
   const closePane = useCallback(() => {
     getStudio().paneManager.destroyPane(
       paneInstance.instanceId as PaneInstanceId,
@@ -155,11 +169,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
           <Title>{paneInstance.instanceId}</Title>
         </TitleBar>
       </PanelDragZone>
-      <F2>
-        <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <Comp paneId={paneInstance.instanceId} />
-        </ErrorBoundary>
-      </F2>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <F2 ref={setMountingPoint} />
+      </ErrorBoundary>
     </Container>
   )
 }
diff --git a/theatre/studio/src/studioTicker.ts b/theatre/studio/src/studioTicker.ts
index afaf958..45dffe0 100644
--- a/theatre/studio/src/studioTicker.ts
+++ b/theatre/studio/src/studioTicker.ts
@@ -1,14 +1,5 @@
 import {Ticker} from '@theatre/dataverse'
 
-const studioTicker = new Ticker()
+const studioTicker = Ticker.raf
 
 export default studioTicker
-
-/**
- * TODO users should also be able to define their own ticker.
- */
-const onAnimationFrame = (t: number) => {
-  studioTicker.tick(t)
-  window.requestAnimationFrame(onAnimationFrame)
-}
-window.requestAnimationFrame(onAnimationFrame)
diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
index 1356a20..b09e2ef 100644
--- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
+++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
@@ -1,9 +1,13 @@
+import {Box} from '@theatre/dataverse'
 import {useVal} from '@theatre/react'
+import type {IExtension} from '@theatre/studio'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 import getStudio from '@theatre/studio/getStudio'
 import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
-import React from 'react'
+import type {ToolsetConfig} from '@theatre/studio/TheatreStudio'
+import React, {useLayoutEffect, useMemo} from 'react'
 import styled from 'styled-components'
+import Toolset from './Toolset'
 
 const Container = styled.div`
   position: fixed;
@@ -36,28 +40,54 @@ const Bg = styled.div`
   }
 `
 
+const ExtensionToolsetRender: React.FC<{
+  extension: IExtension
+  toolbarId: string
+}> = ({extension, toolbarId}) => {
+  const toolsetConfigBox = useMemo(() => new Box<ToolsetConfig>([]), [])
+
+  useLayoutEffect(() => {
+    const detach = extension.toolbars?.[toolbarId]?.(
+      toolsetConfigBox.set.bind(toolsetConfigBox),
+      getStudio()!.publicApi,
+    )
+
+    if (typeof detach === 'function') return detach
+  }, [extension, toolbarId])
+
+  const config = useVal(toolsetConfigBox.derivation)
+
+  return <Toolset config={config} />
+}
+
 const GlobalToolbar: React.FC<{}> = (props) => {
-  const groups: Array<React.ReactNode> = []
-  const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId)
-
-  for (const [, extension] of Object.entries(extensionsById)) {
-    if (!extension) continue
-    if (extension.globalToolbar) {
-      groups.push(
-        <extension.globalToolbar.component
-          key={'extensionToolbar-' + extension.id}
-        />,
-      )
-    }
-  }
-
-  if (groups.length === 0) return null
-
   return (
     <Container>
-      <Bg>{groups}</Bg>
+      <Bg>
+        <Toolbar toolbarId="global" />
+      </Bg>
     </Container>
   )
 }
 
+export const Toolbar: React.FC<{toolbarId: string}> = ({toolbarId}) => {
+  const groups: Array<React.ReactNode> = []
+  const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId)
+
+  for (const [, extension] of Object.entries(extensionsById)) {
+    if (!extension || !extension.toolbars?.[toolbarId]) continue
+
+    groups.push(
+      <ExtensionToolsetRender
+        extension={extension}
+        key={'extensionToolbar-' + extension.id}
+        toolbarId={toolbarId}
+      />,
+    )
+  }
+
+  if (groups.length === 0) return null
+  return <>{groups}</>
+}
+
 export default GlobalToolbar
diff --git a/theatre/studio/src/toolbars/GlobalToolbar/Toolset.tsx b/theatre/studio/src/toolbars/GlobalToolbar/Toolset.tsx
new file mode 100644
index 0000000..b99fc9c
--- /dev/null
+++ b/theatre/studio/src/toolbars/GlobalToolbar/Toolset.tsx
@@ -0,0 +1,53 @@
+import didYouMean from '@theatre/shared/utils/didYouMean'
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import userReadableTypeOfValue from '@theatre/shared/utils/userReadableTypeOfValue'
+import type {ToolConfig, ToolsetConfig} from '@theatre/studio/TheatreStudio'
+import React from 'react'
+import IconButton from './tools/IconButton'
+import Switch from './tools/Switch'
+
+const Toolset: React.FC<{
+  config: ToolsetConfig
+}> = (props) => {
+  return (
+    <>
+      {props.config.map((toolConfig, i) => {
+        return <Tool config={toolConfig} key={i} />
+      })}
+    </>
+  )
+}
+
+const toolByType: {
+  [Key in ToolConfig['type']]: React.FC<{
+    config: Extract<ToolConfig, {type: Key}>
+  }>
+} = {
+  Icon: IconButton,
+  Switch: Switch,
+}
+
+function getToolByType<Type extends ToolConfig['type']>(
+  type: Type,
+): React.FC<{config: Extract<ToolConfig, {type: Type}>}> {
+  return toolByType[type] as $IntentionalAny
+}
+
+const Tool: React.FC<{config: ToolConfig}> = ({config}) => {
+  const Comp = getToolByType(config.type)
+
+  if (!Comp) {
+    throw new Error(
+      `No tool with tool.type ${userReadableTypeOfValue(
+        config.type,
+      )} exists. Did you mean ${didYouMean(
+        config.type,
+        Object.keys(toolByType),
+      )}`,
+    )
+  }
+
+  return <Comp config={config} />
+}
+
+export default Toolset
diff --git a/theatre/studio/src/toolbars/GlobalToolbar/tools/IconButton.tsx b/theatre/studio/src/toolbars/GlobalToolbar/tools/IconButton.tsx
new file mode 100644
index 0000000..1a53bcf
--- /dev/null
+++ b/theatre/studio/src/toolbars/GlobalToolbar/tools/IconButton.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import ToolbarIconButton from '@theatre/studio/uiComponents/toolbar/ToolbarIconButton'
+import styled from 'styled-components'
+import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
+import type {ToolConfigIcon} from '@theatre/studio/TheatreStudio'
+
+const Container = styled(ToolbarIconButton)`
+  ${pointerEventsAutoInNormalMode};
+  & > svg {
+    width: 1em;
+    height: 1em;
+    pointer-events: none;
+  }
+`
+
+const IconButton: React.FC<{
+  config: ToolConfigIcon
+}> = ({config}) => {
+  return (
+    <Container
+      onClick={config.onClick}
+      title={config.title}
+      dangerouslySetInnerHTML={{__html: config['svgSource'] ?? ''}}
+    />
+  )
+}
+
+export default IconButton
diff --git a/theatre/studio/src/toolbars/GlobalToolbar/tools/Switch.tsx b/theatre/studio/src/toolbars/GlobalToolbar/tools/Switch.tsx
new file mode 100644
index 0000000..bcdd993
--- /dev/null
+++ b/theatre/studio/src/toolbars/GlobalToolbar/tools/Switch.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
+import type {ToolConfigSwitch} from '@theatre/studio/TheatreStudio'
+import ToolbarSwitchSelect from '@theatre/studio/uiComponents/toolbar/ToolbarSwitchSelect'
+
+const IconContainer = styled.div`
+  ${pointerEventsAutoInNormalMode};
+  & > svg {
+    width: 1em;
+    height: 1em;
+    pointer-events: none;
+  }
+`
+
+const IconButton: React.FC<{
+  config: ToolConfigSwitch
+}> = ({config}) => {
+  return (
+    <ToolbarSwitchSelect
+      onChange={config.onChange}
+      options={config.options.map(({label, value, svgSource}) => ({
+        label,
+        value,
+        icon: <IconContainer dangerouslySetInnerHTML={{__html: svgSource}} />,
+      }))}
+      value={config.value}
+    />
+  )
+}
+
+export default IconButton
diff --git a/theatre/studio/src/uiComponents/isSafari.ts b/theatre/studio/src/uiComponents/isSafari.ts
index 6519891..00cba9c 100644
--- a/theatre/studio/src/uiComponents/isSafari.ts
+++ b/theatre/studio/src/uiComponents/isSafari.ts
@@ -1,3 +1,3 @@
-export const isSafari = /^((?!chrome|android).)*safari/i.test(
-  navigator.userAgent,
-)
+export const isSafari =
+  typeof window !== 'undefined' &&
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
diff --git a/theatre/studio/src/utils/contextualWebComponents.tsx b/theatre/studio/src/utils/contextualWebComponents.tsx
new file mode 100644
index 0000000..76cda6b
--- /dev/null
+++ b/theatre/studio/src/utils/contextualWebComponents.tsx
@@ -0,0 +1,58 @@
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import type React from 'react'
+import {getMounter} from './renderInPortalInContext'
+
+export function registerContextualWebComponent<Props>(
+  ReactComponent: React.ComponentType<Props>,
+  componentName: string,
+  // currently only supporting string prop types
+  propKeys: {[propKey in keyof Props]: 'string'},
+): void {
+  if (typeof window === 'undefined' || typeof customElements === 'undefined')
+    return
+
+  const propList = Object.keys(propKeys)
+
+  class CustomWebComponent extends HTMLElement {
+    _mounted = false
+    _mountOrRender: ReturnType<typeof getMounter>['mountOrRender']
+    _unmount: ReturnType<typeof getMounter>['unmount']
+    static get observedAttributes() {
+      return propList
+    }
+    constructor() {
+      super()
+      const {mountOrRender, unmount} = getMounter()
+      this._mountOrRender = mountOrRender
+      this._unmount = unmount
+    }
+
+    connectedCallback() {
+      // const shadow = this.attachShadow({mode: 'open'})
+      this._mounted = true
+      this._render()
+    }
+
+    _render() {
+      const props = Object.fromEntries(
+        propList.map((propName) => [
+          propName,
+          this.getAttribute(propName as $IntentionalAny),
+        ]),
+      )
+      this._mountOrRender(ReactComponent, props as $IntentionalAny, this)
+    }
+
+    attributeChangedCallback() {
+      if (!this._mounted) return
+      this._render()
+    }
+
+    disconnectedCallback() {
+      this._mounted = false
+      this._unmount()
+    }
+  }
+
+  customElements.define(componentName, CustomWebComponent)
+}
diff --git a/theatre/studio/src/utils/isMac.ts b/theatre/studio/src/utils/isMac.ts
index 4fe3e28..92cfcbf 100644
--- a/theatre/studio/src/utils/isMac.ts
+++ b/theatre/studio/src/utils/isMac.ts
@@ -1,2 +1,3 @@
 export const isMac =
-  navigator && navigator.platform.toUpperCase().indexOf('MAC') >= 0
+  typeof navigator !== 'undefined' &&
+  navigator.platform.toUpperCase().indexOf('MAC') >= 0
diff --git a/theatre/studio/src/utils/renderInPortalInContext.tsx b/theatre/studio/src/utils/renderInPortalInContext.tsx
new file mode 100644
index 0000000..332d2cb
--- /dev/null
+++ b/theatre/studio/src/utils/renderInPortalInContext.tsx
@@ -0,0 +1,66 @@
+import {Atom} from '@theatre/dataverse'
+import {useVal} from '@theatre/react'
+import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
+import React from 'react'
+import {createPortal} from 'react-dom'
+
+type ElToRenderInContext = {
+  comp: React.ComponentType<$IntentionalAny>
+  props: {}
+  portalNode: HTMLElement | SVGElement
+}
+
+const theAtom = new Atom<{
+  set: Record<number, true>
+  byId: Record<number, ElToRenderInContext>
+}>({
+  set: {},
+  byId: {},
+})
+
+let lastId = 1
+
+export const getMounter = () => {
+  const id = lastId++
+  function mountOrRender<Props>(
+    comp: React.ComponentType<Props>,
+    props: Props,
+    portalNode: HTMLElement,
+  ) {
+    theAtom.reduceState([], (s) => {
+      return {
+        byId: {...s.byId, [id]: {comp, props, portalNode}},
+        set: {...s.set, [id]: true},
+      }
+    })
+  }
+
+  function unmount() {
+    theAtom.reduceState([], (s) => {
+      const set = {...s.set}
+      const byId = {...s.byId}
+      delete set[id]
+      return {byId, set}
+    })
+  }
+
+  return {mountOrRender, unmount}
+}
+
+export const MountAll = () => {
+  const ids = Object.keys(useVal(theAtom.pointer.set))
+  return (
+    <>
+      {ids.map((id) => (
+        <Mount key={'id-' + id} id={id} />
+      ))}
+    </>
+  )
+}
+
+const Mount = ({id}: {id: number}) => {
+  const {comp, portalNode, props} = useVal(theAtom.pointer.byId[id])
+  const Comp = comp as $FixMe
+
+  return createPortal(<Comp {...props} />, portalNode)
+}
diff --git a/yarn.lock b/yarn.lock
index 536c77e..c5f8922 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6663,9 +6663,6 @@ __metadata:
   resolution: "@theatre/studio@workspace:theatre/studio"
   dependencies:
     "@theatre/dataverse": "workspace:*"
-    react: ^17.0.2
-    react-dom: ^17.0.2
-    styled-components: ^5.3.0
   peerDependencies:
     "@theatre/core": "*"
   languageName: unknown