More style tweaks

theatre/studio/src/UIRoot/PanelsRoot.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import getStudio from '@theatre/studio/getStudio'
 import {useVal} from '@theatre/dataverse-react'
 import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper'
+import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 
 const PanelsRoot: React.FC = () => {
   const panes = useVal(getStudio().paneManager.allPanesD)
@@ -18,7 +19,7 @@ const PanelsRoot: React.FC = () => {
       {/* {paneEls} */}
       <OutlinePanel />
       <ObjectEditorPanel />
-      {/* <SequenceEditorPanel /> */}
+      <SequenceEditorPanel />
     </>
   )
 }

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

@@ -52,7 +52,12 @@ const F1_1 = styled.div`
   display: none;
 `
 
-export const Punctuation = styled.span`
+export const TitleBar_Piece = styled.span`
+  white-space: nowrap;
+`
+
+export const TitleBar_Punctuation = styled.span`
+  white-space: nowrap;
   color: ${theme.panel.head.punctuation.color};
 `
 
@@ -109,9 +114,10 @@ const Content: React.FC<{}> = () => {
       <Container>
         <PanelDragZone>
           <F1_1>
-            {obj.sheet.address.sheetId} <Punctuation>{':'}&nbsp;</Punctuation>
+            {obj.sheet.address.sheetId}{' '}
+            <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
             {obj.sheet.address.sheetInstanceId}{' '}
-            <Punctuation>&nbsp;{'>'}&nbsp;</Punctuation>
+            <TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
             {obj.address.objectKey}
           </F1_1>
         </PanelDragZone>

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

@@ -22,7 +22,7 @@ export const rowBg = css`
   &:after {
     position: absolute;
     display: block;
-    inset: 0px 0 1px calc(0px + var(--left-pad) + var(--depth) * var(--step));
+    inset: 0px 0 1px calc(-2px + var(--left-pad) + var(--depth) * var(--step));
     content: ' ';
     z-index: -1;
     background-color: #282b2f;

theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx

@@ -16,7 +16,8 @@ const Container = styled.button<{isOpen: boolean}>`
   padding: 0 8px;
   display: flex;
   color: #656d77;
-  line-height: 22px;
+  line-height: 20px;
+  font-size: 10px;
 
   &:hover {
     color: white;

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

@@ -4,6 +4,7 @@ import type {VoidFn} from '@theatre/shared/utils/types'
 import React from 'react'
 import {GoChevronRight} from 'react-icons/go'
 import styled from 'styled-components'
+import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
 
 export const Container = styled.li<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -31,7 +32,9 @@ const Header = styled(BaseHeader)<{
   ${(props) => props.isSelected && `background: blue`};
 `
 
-const Head_Label = styled.span``
+const Head_Label = styled.span`
+  ${propNameText};
+`
 
 const Head_Icon = styled.span<{isOpen: boolean}>`
   width: 12px;

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

@@ -12,6 +12,7 @@ import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEdit
 import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors'
 import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor'
 import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow'
+import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
 
 const theme = {
   label: {
@@ -74,6 +75,7 @@ const GraphIcon = () => (
 
 const Head_Label = styled.span`
   margin-right: 4px;
+  ${propNameText};
 `
 
 const PrimitivePropRow: React.FC<{

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

@@ -6,8 +6,8 @@ import {prism, val} from '@theatre/dataverse'
 import React from 'react'
 import styled from 'styled-components'
 import {
-  F1,
-  Punctuation,
+  TitleBar_Piece,
+  TitleBar_Punctuation,
 } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 import DopeSheet from './DopeSheet/DopeSheet'
 import GraphEditor from './GraphEditor/GraphEditor'
@@ -27,6 +27,24 @@ import {uniq} from 'lodash-es'
 
 const Container = styled(PanelWrapper)``
 
+export const titleBarHeight = 20
+
+const TitleBar = styled.div`
+  height: ${titleBarHeight}px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  color: #adadadb3;
+  border-bottom: 1px solid rgb(0 0 0 / 13%);
+  background: #00000017;
+  font-size: 10px;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
 export const zIndexes = (() => {
   const scrollableArea = 0
   const rightOverlay = scrollableArea + 1
@@ -172,12 +190,15 @@ const Header: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
           width: val(layoutP.leftDims.width),
         }}
       >
-        <F1>
-          {sheet.address.sheetId} <Punctuation>{':'}&nbsp;</Punctuation>
-          {sheet.address.sheetInstanceId}{' '}
-          <Punctuation>&nbsp;{'>'}&nbsp;</Punctuation>
-          Sequence
-        </F1>
+        <TitleBar>
+          <TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
+
+          <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
+          <TitleBar_Piece>{sheet.address.sheetInstanceId} </TitleBar_Piece>
+
+          <TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
+          <TitleBar_Piece>Sequence</TitleBar_Piece>
+        </TitleBar>
       </Header_Container>
     )
   }, [layoutP])

theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts

@@ -156,7 +156,7 @@ export function sequenceEditorPanelLayout(
         }
 
         const graphEditorOpen = graphEditorState?.isOpen === true
-        const bottomRectangleThingyHeight = 26
+        const bottomRectangleThingyHeight = 20
         const graphEditorHeight = Math.floor(
           (graphEditorOpen
             ? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)

theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts

@@ -12,8 +12,8 @@ import type {PathToProp} from '@theatre/shared/utils/addresses'
 import type {SequenceTrackId} from '@theatre/shared/utils/ids'
 import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
 import {prism, val} from '@theatre/dataverse'
-import {F1Height as F1Height} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 import logger from '@theatre/shared/logger'
+import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 
 export type SequenceEditorTree_Row<Type> = {
   type: Type
@@ -71,7 +71,7 @@ export const calculateSequenceEditorTree = (
   sheet: Sheet,
 ): SequenceEditorTree => {
   prism.ensurePrism()
-  let topSoFar = F1Height
+  let topSoFar = titleBarHeight
   let nSoFar = 0
 
   const tree: SequenceEditorTree = {
@@ -121,7 +121,7 @@ export const calculateSequenceEditorTree = (
       sheetObject,
       trackSetups,
       [],
-      sheetObject.template.config.props,
+      sheetObject.template.config,
       row.children,
       level + 1,
     )