Implemented "close pane"

theatre/studio/src/PaneManager.ts

@@ -118,4 +118,17 @@ export default class PaneManager {
 
     return this._getAllPanes().getValue()[instanceId]!
   }
+
+  destroyPane(instanceId: string): void {
+    const core = this._studio.core
+    if (!core) {
+      throw new Error(
+        `Can't do this yet because @theatre/core is not yet loaded`,
+      )
+    }
+
+    this._studio.transaction(({drafts}) => {
+      delete drafts.historic.panelInstanceDesceriptors[instanceId]
+    })
+  }
 }

theatre/studio/src/TheatreStudio.ts

@@ -163,9 +163,14 @@ export default class TheatreStudio implements IStudio {
   ): PaneInstance<PaneClass>[] {
     return getStudio().paneManager.getPanesOfType(paneClass)
   }
+
   createPane<PaneClass extends string>(
     paneClass: PaneClass,
   ): PaneInstance<PaneClass> {
     return getStudio().paneManager.createPane(paneClass)
   }
+
+  destroyPane(paneId: string): void {
+    return getStudio().paneManager.destroyPane(paneId)
+  }
 }

theatre/studio/src/panels/BasePanel/PaneWrapper.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 from 'react'
+import React, {useCallback} from 'react'
 import styled from 'styled-components'
 import {
   TitleBar,
@@ -11,6 +11,8 @@ import BasePanel from './BasePanel'
 import PanelDragZone from './PanelDragZone'
 import PanelWrapper from './PanelWrapper'
 import {ErrorBoundary} from 'react-error-boundary'
+import {IoClose} from 'react-icons/all'
+import getStudio from '@theatre/studio/getStudio'
 
 const defaultPosition: PanelPosition = {
   edges: {
@@ -47,6 +49,33 @@ const Title = styled.div`
   width: 100%;
 `
 
+const PaneTools = styled.div`
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+`
+
+const ClosePanelButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  font-size: 11px;
+  height: 10px;
+  width: 18px;
+  color: #adadadb3;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    color: white;
+  }
+`
+
 const F2 = styled(F2Impl)`
   position: relative;
 `
@@ -84,10 +113,19 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
   paneInstance,
 }) => {
   const Comp = paneInstance.definition.component
+  const closePane = useCallback(() => {
+    getStudio().paneManager.destroyPane(paneInstance.instanceId)
+  }, [paneInstance])
+
   return (
     <Container>
       <PanelDragZone>
         <TitleBar>
+          <PaneTools>
+            <ClosePanelButton onClick={closePane} title={'Close Pane'}>
+              <IoClose />
+            </ClosePanelButton>
+          </PaneTools>
           <Title>{paneInstance.instanceId}</Title>
         </TitleBar>
       </PanelDragZone>

theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx

@@ -42,6 +42,7 @@ export const TitleBar = styled.div`
   display: flex;
   align-items: center;
   padding: 0 10px;
+  position: relative;
   color: #adadadb3;
   border-bottom: 1px solid rgb(0 0 0 / 13%);
   background-color: #25272b;