@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/panels/OutlinePanel/OutlinePanel.js

@@ -1,73 +0,0 @@
-import React, { useEffect, useLayoutEffect } from 'react';
-import styled from 'styled-components';
-import { panelZIndexes } from '@tomorrowevening/theatre-studio/panels/BasePanel/common';
-import ProjectsList from './ProjectsList/ProjectsList';
-import { useVal } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useHotspot from '@tomorrowevening/theatre-studio/uiComponents/useHotspot';
-import { Atom, prism, val } from '@tomorrowevening/theatre-dataverse';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-const headerHeight = `44px`;
-const Container = styled.div `
-  ${pointerEventsAutoInNormalMode};
-  background-color: transparent;
-  position: absolute;
-  left: 8px;
-  z-index: ${panelZIndexes.outlinePanel};
-
-  top: calc(${headerHeight} + 8px);
-  height: fit-content;
-  max-height: calc(100% - ${headerHeight});
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding: 0;
-  user-select: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  scrollbar-width: none;
-
-  display: ${({ pin }) => (pin ? 'block' : 'none')};
-
-  &:hover {
-    display: block;
-  }
-
-  // Create a small buffer on the bottom to aid selecting the bottom item in a long, scrolling list
-  &::after {
-    content: '';
-    display: block;
-    height: 20px;
-  }
-`;
-const OutlinePanel = () => {
-    const pin = useVal(getStudio().atomP.ahistoric.pinOutline) ?? true;
-    const show = useVal(shouldShowOutlineD);
-    const active = useHotspot('left');
-    useLayoutEffect(() => {
-        isOutlinePanelHotspotActiveB.set(active);
-    }, [active]);
-    // cleanup
-    useEffect(() => {
-        return () => {
-            isOutlinePanelHoveredB.set(false);
-            isOutlinePanelHotspotActiveB.set(false);
-        };
-    }, []);
-    return (React.createElement(Container, { pin: pin || show, onMouseEnter: () => {
-            isOutlinePanelHoveredB.set(true);
-        }, onMouseLeave: () => {
-            isOutlinePanelHoveredB.set(false);
-        } },
-        React.createElement(ProjectsList, null)));
-};
-export default OutlinePanel;
-const isOutlinePanelHotspotActiveB = new Atom(false);
-const isOutlinePanelHoveredB = new Atom(false);
-export const shouldShowOutlineD = prism(() => {
-    const isHovered = val(isOutlinePanelHoveredB.prism);
-    const isHotspotActive = val(isOutlinePanelHotspotActiveB.prism);
-    return isHovered || isHotspotActive;
-});

package/dist/panels/OutlinePanel/ProjectsList/ProjectListItem.js

@@ -1,38 +0,0 @@
-import React, { useCallback } from 'react';
-import BaseItem from '@tomorrowevening/theatre-studio/panels/OutlinePanel/BaseItem';
-import SheetsList from '@tomorrowevening/theatre-studio/panels/OutlinePanel/SheetsList/SheetsList';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { getOutlineSelection } from '@tomorrowevening/theatre-studio/selectors';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import styled from 'styled-components';
-import { useCollapseStateInOutlinePanel } from '@tomorrowevening/theatre-studio/panels/OutlinePanel/outlinePanelUtils';
-const ConflictNotice = styled.div `
-  color: #ff6363;
-  margin-left: 11px;
-  background: #4c282d;
-  padding: 2px 8px;
-  border-radius: 2px;
-  font-size: 10px;
-  box-shadow: 0 2px 8px -4px black;
-`;
-const ProjectListItem = ({ depth, project }) => {
-    const selection = usePrism(() => getOutlineSelection(), []);
-    const hasConflict = usePrism(() => {
-        const projectId = project.address.projectId;
-        const loadingState = val(getStudio().atomP.ephemeral.coreByProject[projectId].loadingState);
-        return loadingState?.type === 'browserStateIsNotBasedOnDiskState';
-    }, [project]);
-    const select = useCallback(() => {
-        getStudio().transaction(({ stateEditors }) => {
-            stateEditors.studio.historic.panels.outline.selection.set([project]);
-        });
-    }, [project]);
-    const { collapsed, setCollapsed } = useCollapseStateInOutlinePanel(project);
-    return (React.createElement(BaseItem, { depth: depth, label: project.address.projectId, setIsCollapsed: setCollapsed, collapsed: collapsed, labelDecoration: hasConflict ? React.createElement(ConflictNotice, null, "Has Conflicts") : null, children: React.createElement(SheetsList, { project: project, depth: depth + 1 }), selectionStatus: selection.includes(project)
-            ? 'selected'
-            : selection.some((s) => s.address.projectId === project.address.projectId)
-                ? 'descendant-is-selected'
-                : 'not-selected', select: select }));
-};
-export default ProjectListItem;

package/dist/panels/OutlinePanel/ProjectsList/ProjectsList.js

@@ -1,22 +0,0 @@
-import { val } from '@tomorrowevening/theatre-dataverse';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import React from 'react';
-import styled from 'styled-components';
-import ProjectListItem from './ProjectListItem';
-const Container = styled.ul `
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  padding-right: 4px;
-`;
-const ProjectsList = (props) => {
-    return usePrism(() => {
-        const projects = val(getStudio().projectsP);
-        return (React.createElement(Container, null, Object.keys(projects).map((projectId) => {
-            const project = projects[projectId];
-            return (React.createElement(ProjectListItem, { depth: 0, project: project, key: `projectListItem-${projectId}` }));
-        })));
-    }, []);
-};
-export default ProjectsList;

package/dist/panels/OutlinePanel/SheetsList/SheetInstanceItem.js

@@ -1,36 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { getOutlineSelection } from '@tomorrowevening/theatre-studio/selectors';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import ObjectsList from '@tomorrowevening/theatre-studio/panels/OutlinePanel/ObjectsList/ObjectsList';
-import BaseItem from '@tomorrowevening/theatre-studio/panels/OutlinePanel/BaseItem';
-import { useCollapseStateInOutlinePanel } from '@tomorrowevening/theatre-studio/panels/OutlinePanel/outlinePanelUtils';
-const Head = styled.div `
-  display: flex;
-`;
-const Container = styled.li `
-  color: ${(props) => (props.isSelected ? 'white' : 'hsl(1, 1%, 80%)')};
-`;
-const Body = styled.div ``;
-export const SheetInstanceItem = ({ sheet, depth }) => {
-    const { collapsed, setCollapsed } = useCollapseStateInOutlinePanel(sheet);
-    const setSelectedSheet = useCallback(() => {
-        getStudio().transaction(({ stateEditors }) => {
-            stateEditors.studio.historic.panels.outline.selection.set([sheet]);
-        });
-    }, [sheet]);
-    return usePrism(() => {
-        const selection = getOutlineSelection();
-        return (React.createElement(BaseItem, { depth: depth, select: setSelectedSheet, setIsCollapsed: setCollapsed, collapsed: collapsed, selectionStatus: selection.some((s) => s === sheet)
-                ? 'selected'
-                : selection.some((s) => s.type === 'Theatre_SheetObject' && s.sheet === sheet)
-                    ? 'descendant-is-selected'
-                    : 'not-selected', label: React.createElement(Head, null,
-                sheet.address.sheetId,
-                ": ",
-                sheet.address.sheetInstanceId) },
-            React.createElement(Body, null,
-                React.createElement(ObjectsList, { depth: depth + 1, sheet: sheet, key: 'objectList' + sheet.address.sheetInstanceId }))));
-    }, [depth, collapsed]);
-};

package/dist/panels/OutlinePanel/SheetsList/SheetItem.js

@@ -1,23 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import { SheetInstanceItem } from './SheetInstanceItem';
-const Head = styled.div `
-  display: flex;
-`;
-const Container = styled.li `
-  color: ${(props) => (props.isSelected ? 'white' : 'hsl(1, 1%, 80%)')};
-`;
-const Body = styled.div ``;
-export const SheetItem = ({ sheetId, depth, project }) => {
-    return usePrism(() => {
-        const template = val(project.sheetTemplatesP[sheetId]);
-        if (!template)
-            return React.createElement(React.Fragment, null);
-        const allInstances = val(template.instancesP);
-        return (React.createElement(React.Fragment, null, Object.entries(allInstances).map(([_, inst]) => {
-            return (React.createElement(SheetInstanceItem, { key: inst.address.sheetInstanceId, sheet: inst, depth: depth }));
-        })));
-    }, [depth, sheetId, project]);
-};

package/dist/panels/OutlinePanel/SheetsList/SheetsList.js

@@ -1,15 +0,0 @@
-import { getRegisteredSheetIds } from '@tomorrowevening/theatre-studio/selectors';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import { SheetItem } from './SheetItem';
-const SheetsList = ({ project, depth }) => {
-    return usePrism(() => {
-        if (!project)
-            return null;
-        const registeredSheetIds = getRegisteredSheetIds(project);
-        return (React.createElement(React.Fragment, null, registeredSheetIds.map((sheetId) => {
-            return (React.createElement(SheetItem, { depth: depth, sheetId: sheetId, key: `sheet-${sheetId}`, project: project }));
-        })));
-    }, [project, depth]);
-};
-export default SheetsList;

package/dist/panels/OutlinePanel/outlinePanelUtils.js

@@ -1,23 +0,0 @@
-import { useCallback } from 'react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { useVal } from '@tomorrowevening/theatre-react';
-export function useCollapseStateInOutlinePanel(item) {
-    const itemKey = item.type === 'namespace'
-        ? `namespace:${item.sheet.address.sheetId}:${item.path.join('/')}`
-        : item.type === 'Theatre_Project'
-            ? 'project'
-            : item.type === 'Theatre_Sheet'
-                ? `sheetInstance:${item.address.sheetId}:${item.address.sheetInstanceId}`
-                : 'unknown';
-    const projectId = item.type === 'namespace'
-        ? item.sheet.address.projectId
-        : item.address.projectId;
-    const isCollapsed = useVal(getStudio().atomP.ahistoric.projects.stateByProjectId[projectId]
-        .collapsedItemsInOutline[itemKey]) ?? false;
-    const setCollapsed = useCallback((isCollapsed) => {
-        getStudio().transaction(({ stateEditors }) => {
-            stateEditors.studio.ahistoric.projects.stateByProjectId.collapsedItemsInOutline.set({ projectId, isCollapsed, itemKey: itemKey });
-        });
-    }, [itemKey]);
-    return { collapsed: isCollapsed, setCollapsed };
-}

package/dist/panels/SequenceEditorPanel/DopeSheet/DopeSheet.js

@@ -1,21 +0,0 @@
-import { useVal } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import styled from 'styled-components';
-import Left from './Left/Left';
-import DopeSheetBackground from './Right/DopeSheetBackground';
-import Right from './Right/Right';
-import VerticalScrollContainer from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/VerticalScrollContainer';
-const Container = styled.div `
-  position: absolute;
-  left: 0;
-  right: 0;
-`;
-const DopeSheet = ({ layoutP, }) => {
-    const height = useVal(layoutP.dopeSheetDims.height);
-    return (React.createElement(Container, { style: { height: height + 'px' } },
-        React.createElement(DopeSheetBackground, { layoutP: layoutP }),
-        React.createElement(VerticalScrollContainer, null,
-            React.createElement(Left, { layoutP: layoutP }),
-            React.createElement(Right, { layoutP: layoutP }))));
-};
-export default DopeSheet;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.js

@@ -1,74 +0,0 @@
-import { theme } from '@tomorrowevening/theatre-studio/css';
-import React, { useRef } from 'react';
-import { HiOutlineChevronRight } from 'react-icons/all';
-import styled from 'styled-components';
-import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
-import { usePropHighlightMouseEnter } from './usePropHighlightMouseEnter';
-export const LeftRowContainer = styled.li `
-  --depth: ${(props) => props.depth};
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-export const BaseHeader = styled.div `
-  border-bottom: 1px solid #7695b705;
-`;
-const LeftRowHeader = styled(BaseHeader) `
-  padding-left: calc(8px + var(--depth) * 20px);
-
-  display: flex;
-  align-items: stretch;
-  color: ${theme.panel.body.compoudThing.label.color};
-
-  box-sizing: border-box;
-
-  ${(props) => props.isSelected && `background: blue`};
-`;
-const LeftRowHead_Label = styled.span `
-  ${propNameTextCSS};
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 4px;
-  line-height: 26px;
-  flex-wrap: nowrap;
-
-  ${LeftRowHeader}:hover & {
-    color: #ccc;
-  }
-`;
-const LeftRowHead_Icon = styled.span `
-  width: 12px;
-  padding: 8px;
-  font-size: 9px;
-  display: flex;
-  align-items: center;
-
-  transition: transform 0.05s ease-out, color 0.1s ease-out;
-  transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
-  color: #66686a;
-
-  &:hover {
-    transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg);
-    color: #c0c4c9;
-  }
-`;
-const LeftRowChildren = styled.ul `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-const AnyCompositeRow = ({ leaf, label, children, isSelectable, isSelected, toggleSelect, toggleCollapsed, isCollapsed, }) => {
-    const hasChildren = Array.isArray(children) && children.length > 0;
-    const rowHeaderRef = useRef(null);
-    usePropHighlightMouseEnter(rowHeaderRef.current, leaf);
-    return leaf.shouldRender ? (React.createElement(LeftRowContainer, { depth: leaf.depth },
-        React.createElement(LeftRowHeader, { ref: rowHeaderRef, style: {
-                height: leaf.nodeHeight + 'px',
-            }, isSelectable: isSelectable === true, isSelected: isSelected === true, onClick: toggleSelect, isEven: leaf.n % 2 === 0 },
-            React.createElement(LeftRowHead_Icon, { isCollapsed: isCollapsed, onClick: toggleCollapsed },
-                React.createElement(HiOutlineChevronRight, null)),
-            React.createElement(LeftRowHead_Label, null, label)),
-        hasChildren && React.createElement(LeftRowChildren, null, children))) : null;
-};
-export default AnyCompositeRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/Left.js

@@ -1,25 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import SheetRow from './SheetRow';
-const Container = styled.div `
-  position: absolute;
-  left: 0;
-  overflow-x: visible;
-`;
-const ListContainer = styled.ul `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-const Left = ({ layoutP }) => {
-    return usePrism(() => {
-        const tree = val(layoutP.tree);
-        const width = val(layoutP.leftDims.width);
-        return (React.createElement(Container, { style: { width: width + 'px', top: tree.top + 'px' } },
-            React.createElement(ListContainer, null,
-                React.createElement(SheetRow, { leaf: tree }))));
-    }, [layoutP]);
-};
-export default Left;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.js

@@ -1,97 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { encodePathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
-import pointerDeep from '@tomorrowevening/theatre-shared/utils/pointerDeep';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React, { useCallback, useRef } from 'react';
-import styled from 'styled-components';
-import { useEditingToolsForSimplePropInDetailsPanel } from '@tomorrowevening/theatre-studio/propEditors/useEditingToolsForSimpleProp';
-import { nextPrevCursorsTheme } from '@tomorrowevening/theatre-studio/propEditors/NextPrevKeyframeCursors';
-import { graphEditorColors } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor';
-import { BaseHeader, LeftRowContainer as BaseContainer } from './AnyCompositeRow';
-import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
-import { usePropHighlightMouseEnter } from './usePropHighlightMouseEnter';
-const theme = {
-    label: {
-        color: `#9a9a9a`,
-    },
-};
-const PrimitivePropRowContainer = styled(BaseContainer) ``;
-const PrimitivePropRowHead = styled(BaseHeader) `
-  display: flex;
-  color: ${theme.label.color};
-  padding-right: 12px;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-`;
-const PrimitivePropRowIconContainer = styled.button `
-  background: none;
-  border: none;
-  outline: none;
-  display: flex;
-  box-sizing: border-box;
-  font-size: 14px;
-  align-items: center;
-  height: 100%;
-  margin-left: 12px;
-  color: ${(props) => props.isSelected
-    ? graphEditorColors[props.graphEditorColor].iconColor
-    : nextPrevCursorsTheme.offColor};
-
-  &:not([disabled]):hover {
-    color: white;
-  }
-`;
-const GraphIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "12", viewBox: "0 0 640 512" },
-    React.createElement("g", { transform: "translate(0 100)" },
-        React.createElement("path", { fill: "currentColor", d: "M368 32h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zM208 88h-84.75C113.75 64.56 90.84 48 64 48 28.66 48 0 76.65 0 112s28.66 64 64 64c26.84 0 49.75-16.56 59.25-40h79.73c-55.37 32.52-95.86 87.32-109.54 152h49.4c11.3-41.61 36.77-77.21 71.04-101.56-3.7-8.08-5.88-16.99-5.88-26.44V88zm-48 232H64c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32zM576 48c-26.84 0-49.75 16.56-59.25 40H432v72c0 9.45-2.19 18.36-5.88 26.44 34.27 24.35 59.74 59.95 71.04 101.56h49.4c-13.68-64.68-54.17-119.48-109.54-152h79.73c9.5 23.44 32.41 40 59.25 40 35.34 0 64-28.65 64-64s-28.66-64-64-64zm0 272h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32z" }))));
-const PrimitivePropRowHead_Label = styled.span `
-  margin-right: 4px;
-  ${propNameTextCSS};
-
-  ${PrimitivePropRowHead}:hover & {
-    color: #ccc;
-  }
-`;
-const PrimitivePropRow = ({ leaf }) => {
-    const pointerToProp = pointerDeep(leaf.sheetObject.propsP, leaf.pathToProp);
-    const obj = leaf.sheetObject;
-    const { controlIndicators } = useEditingToolsForSimplePropInDetailsPanel(pointerToProp, obj, leaf.propConf);
-    const possibleColor = usePrism(() => {
-        const c = leaf.sheetObject.address;
-        const encodedPathToProp = encodePathToProp(leaf.pathToProp);
-        return val(getStudio().atomP.historic.projects.stateByProjectId[c.projectId]
-            .stateBySheetId[c.sheetId].sequenceEditor.selectedPropsByObject[c.objectKey][encodedPathToProp]);
-    }, [leaf]);
-    const isSelectedRef = useRef(false);
-    const isSelected = typeof possibleColor === 'string';
-    isSelectedRef.current = isSelected;
-    const toggleSelect = useCallback(() => {
-        const c = leaf.sheetObject.address;
-        getStudio().transaction(({ stateEditors }) => {
-            if (isSelectedRef.current) {
-                stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.removePropFromGraphEditor({ ...c, pathToProp: leaf.pathToProp });
-            }
-            else {
-                stateEditors.studio.historic.projects.stateByProjectId.stateBySheetId.sequenceEditor.addPropToGraphEditor({ ...c, pathToProp: leaf.pathToProp });
-                stateEditors.studio.historic.panels.sequenceEditor.graphEditor.setIsOpen({
-                    isOpen: true,
-                });
-            }
-        });
-    }, [leaf]);
-    const label = leaf.propConf.label ?? leaf.pathToProp[leaf.pathToProp.length - 1];
-    const isSelectable = true;
-    const headRef = useRef(null);
-    usePropHighlightMouseEnter(headRef.current, leaf);
-    return (React.createElement(PrimitivePropRowContainer, { depth: leaf.depth },
-        React.createElement(PrimitivePropRowHead, { ref: headRef, isEven: leaf.n % 2 === 0, style: {
-                height: leaf.nodeHeight + 'px',
-            }, isSelected: isSelected === true },
-            React.createElement(PrimitivePropRowHead_Label, null, label),
-            controlIndicators,
-            React.createElement(PrimitivePropRowIconContainer, { onClick: toggleSelect, isSelected: isSelected === true, graphEditorColor: possibleColor ?? '1', style: { opacity: isSelectable ? 1 : 0.25 }, disabled: !isSelectable },
-                React.createElement(GraphIcon, null)))));
-};
-export default PrimitivePropRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/PropWithChildrenRow.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import AnyCompositeRow from './AnyCompositeRow';
-import PrimitivePropRow from './PrimitivePropRow';
-import { setCollapsedSheetItem } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp';
-export const decideRowByPropType = (leaf) => {
-    const key = 'prop' + leaf.pathToProp[leaf.pathToProp.length - 1];
-    return leaf.shouldRender ? (leaf.type === 'propWithChildren' ? (React.createElement(PropWithChildrenRow, { leaf: leaf, key: key })) : (React.createElement(PrimitivePropRow, { leaf: leaf, key: key }))) : (React.createElement(React.Fragment, { key: key }));
-};
-const PropWithChildrenRow = ({ leaf }) => {
-    return (React.createElement(AnyCompositeRow, { leaf: leaf, label: leaf.pathToProp[leaf.pathToProp.length - 1], isCollapsed: leaf.isCollapsed, toggleCollapsed: () => setCollapsedSheetItem(!leaf.isCollapsed, {
-            sheetAddress: leaf.sheetObject.address,
-            sheetItemKey: leaf.sheetItemKey,
-        }) }, leaf.children.map((propLeaf) => decideRowByPropType(propLeaf))));
-};
-export default PropWithChildrenRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/SheetObjectRow.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import AnyCompositeRow from './AnyCompositeRow';
-import { decideRowByPropType } from './PropWithChildrenRow';
-import { setCollapsedSheetItem } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-const LeftSheetObjectRow = ({ leaf }) => {
-    return (React.createElement(AnyCompositeRow, { leaf: leaf, label: leaf.sheetObject.address.objectKey, isCollapsed: leaf.isCollapsed, toggleSelect: () => {
-            // set selection to this sheet object on click
-            getStudio().transaction(({ stateEditors }) => {
-                stateEditors.studio.historic.panels.outline.selection.set([
-                    leaf.sheetObject,
-                ]);
-            });
-        }, toggleCollapsed: () => setCollapsedSheetItem(!leaf.isCollapsed, {
-            sheetAddress: leaf.sheetObject.address,
-            sheetItemKey: leaf.sheetItemKey,
-        }) }, leaf.children.map((leaf) => decideRowByPropType(leaf))));
-};
-export default LeftSheetObjectRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/SheetRow.js

@@ -1,20 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import React from 'react';
-import LeftSheetObjectRow from './SheetObjectRow';
-import AnyCompositeRow from './AnyCompositeRow';
-import { setCollapsedSheetItem } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/setCollapsedSheetObjectOrCompoundProp';
-import uniqueKeyForAnyObject from '@tomorrowevening/theatre-shared/utils/uniqueKeyForAnyObject';
-const SheetRow = ({ leaf }) => {
-    return usePrism(() => {
-        return (React.createElement(AnyCompositeRow, { leaf: leaf, label: leaf.sheet.address.sheetId, isCollapsed: leaf.isCollapsed, toggleCollapsed: () => {
-                setCollapsedSheetItem(!leaf.isCollapsed, {
-                    sheetAddress: leaf.sheet.address,
-                    sheetItemKey: leaf.sheetItemKey,
-                });
-            } }, leaf.children.map((sheetObjectLeaf) => (React.createElement(LeftSheetObjectRow, { key: 'sheetObject-' +
-                // we don't use the object's address as the key because if a user calls `sheet.detachObject(key)` and later
-                // calls `sheet.object(key)` with the same key, we want to re-render this row.
-                uniqueKeyForAnyObject(sheetObjectLeaf.sheetObject), leaf: sheetObjectLeaf })))));
-    }, [leaf]);
-};
-export default SheetRow;

package/dist/panels/SequenceEditorPanel/DopeSheet/Left/usePropHighlightMouseEnter.js

@@ -1,33 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { whatPropIsHighlighted } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/whatPropIsHighlighted';
-/** This should ignore if  */
-export function usePropHighlightMouseEnter(node, leaf) {
-    useLayoutEffect(() => {
-        if (!node)
-            return;
-        if (leaf.type !== 'propWithChildren' &&
-            leaf.type !== 'primitiveProp' &&
-            leaf.type !== 'sheetObject')
-            return;
-        let unlock = null;
-        const propAddress = {
-            ...leaf.sheetObject.address,
-            pathToProp: leaf.type === 'sheetObject' ? [] : leaf.pathToProp,
-        };
-        function onMouseEnter() {
-            unlock = whatPropIsHighlighted.replaceLock(propAddress, () => {
-                // cleanup on forced unlock
-            });
-        }
-        function onMouseLeave() {
-            unlock?.();
-        }
-        node.addEventListener('mouseenter', onMouseEnter);
-        node.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            unlock?.();
-            node.removeEventListener('mouseenter', onMouseEnter);
-            node.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [node]);
-}