refactor: Assorted VFCs, dead code removal, use Nominals in ahistoric

theatre/studio/src/UIRoot/PanelsRoot.tsx

@@ -6,7 +6,7 @@ import {useVal} from '@theatre/react'
 import ExtensionPaneWrapper from '@theatre/studio/panels/BasePanel/ExtensionPaneWrapper'
 import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 
-const PanelsRoot: React.FC = () => {
+const PanelsRoot: React.VFC = () => {
   const panes = useVal(getStudio().paneManager.allPanesD)
   const paneEls = Object.entries(panes).map(([instanceId, paneInstance]) => {
     return (

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/DopeSheet.tsx

@@ -14,7 +14,7 @@ const Container = styled.div`
   right: 0;
 `
 
-const DopeSheet: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
+const DopeSheet: React.VFC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
   layoutP,
 }) => {
   const height = useVal(layoutP.dopeSheetDims.height)

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/Left.tsx

@@ -18,7 +18,7 @@ const ListContainer = styled.ul`
   list-style: none;
 `
 
-const Left: React.FC<{
+const Left: React.VFC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
 }> = ({layoutP}) => {
   return usePrism(() => {

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/SheetRow.tsx

@@ -1,12 +1,9 @@
 import type {SequenceEditorTree_Sheet} from '@theatre/studio/panels/SequenceEditorPanel/layout/tree'
 import {usePrism} from '@theatre/react'
 import React from 'react'
-import styled from 'styled-components'
 import SheetObjectRow from './SheetObjectRow'
 
-const Container = styled.div``
+const SheetRow: React.VFC<{
-
-const SheetRow: React.FC<{
   leaf: SequenceEditorTree_Sheet
 }> = ({leaf}) => {
   return usePrism(() => {

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/SheetRow.tsx

@@ -3,18 +3,13 @@ import type {SequenceEditorTree_Sheet} from '@theatre/studio/panels/SequenceEdit
 import {usePrism} from '@theatre/react'
 import type {Pointer} from '@theatre/dataverse'
 import React from 'react'
-import styled from 'styled-components'
 import SheetObjectRow from './SheetObjectRow'
 
-const Container = styled.div``
-
 const SheetRow: React.FC<{
   leaf: SequenceEditorTree_Sheet
   layoutP: Pointer<SequenceEditorPanelLayout>
 }> = ({leaf, layoutP}) => {
   return usePrism(() => {
-    const node = <div />
-
     return (
       <>
         {leaf.children.map((sheetObjectLeaf) => (

theatre/studio/src/store/types/ahistoric.ts

@@ -1,6 +1,9 @@
 import type {ProjectState} from '@theatre/core/projects/store/storeTypes'
 import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Historic'
-import type {ProjectId} from '@theatre/shared/utils/ids'
+import type {
+  ProjectId,
+  SheetId,
+} from '@theatre/shared/utils/ids'
 import type {IRange, StrictRecord} from '@theatre/shared/utils/types'
 
 export type StudioAhistoricState = {
@@ -18,10 +21,10 @@ export type StudioAhistoricState = {
   }
   projects: {
     stateByProjectId: StrictRecord<
-      string,
+      ProjectId,
       {
         stateBySheetId: StrictRecord<
-          string,
+          SheetId,
           {
             sequence?: {
               /**