Add comments and remove extra performance measure

Co-authored-by: Cole Lawrence <cole@colelawrence.com>

packages/playground/src/shared/hello-world-extension/App.tsx

@@ -1,10 +1,14 @@
 import {editable as e, SheetProvider} from '@theatre/r3f'
 import {Stars, TorusKnot} from '@react-three/drei'
-import {getProject} from '@theatre/core'
+import {getProject, onChange} from '@theatre/core'
 import React from 'react'
 import {Canvas} from '@react-three/fiber'
 
 function App() {
+  const sheet = getProject('Space').sheet('Scene')
+  onChange(sheet.sequence.pointer, (a) => {
+    console.log('gasp!!', a)
+  })
   return (
     <div
       onClick={() => {
@@ -20,7 +24,7 @@ function App() {
         gl={{preserveDrawingBuffer: true}}
         frameloop="demand"
       >
-        <SheetProvider sheet={getProject('Space').sheet('Scene')}>
+        <SheetProvider sheet={sheet}>
           <ambientLight intensity={0.75} />
           <e.group uniqueName="trefoil">
             <TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>

packages/playground/src/shared/hello-world-extension/index.tsx

@@ -37,7 +37,7 @@ studio.extend({
             title: 'Example Icon',
             svgSource: '👁‍🗨',
             onClick: () => {
-              console.log('hello')
+              studio.createPane('example')
             },
           },
         ])
@@ -49,7 +49,16 @@ studio.extend({
       }
     },
   },
-  panes: [],
+  panes: [
+    {
+      class: 'example',
+      mount: ({paneId, node}) => {
+        studio.ui.renderToolset('global', node)
+
+        return () => {}
+      },
+    },
+  ],
 })
 studio.initialize()