@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/panels/BasePanel/PanelResizeHandle.js

@@ -1,184 +0,0 @@
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import { lighten } from 'polished';
-import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { panelDimsToPanelPosition, usePanel } from './BasePanel';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { clamp } from 'lodash-es';
-import { minVisibleSize } from './common';
-const Base = styled.div `
-  position: absolute;
-  ${pointerEventsAutoInNormalMode};
-  &:after {
-    position: absolute;
-    inset: -5px;
-    display: block;
-    content: ' ';
-  }
-
-  opacity: 0;
-  background-color: #478698;
-
-  &.isHighlighted {
-    opacity: 0.7;
-  }
-
-  &.isDragging {
-    opacity: 1;
-    /* background-color: ${lighten(0.2, '#478698')}; */
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-`;
-const Side = styled(Base) `
-  /**
-  The horizintal/vertical resize handles have z-index:-1 and are offset 1px outside of the panel
-  to make sure they don't occlude any element that pops out of the panel (like the Playhead in SequenceEditorPanel).
-
-  This means that panels will always need an extra 1px margin for their resize handles to be visible, but that's not a problem
-  that we have to deal with right now (if it is at all a problem).
-  
-   */
-  z-index: -1;
-`;
-const Horizontal = styled(Side) `
-  left: 0px;
-  right: 0px;
-  height: 1px;
-`;
-const Top = styled(Horizontal) `
-  top: -1px;
-`;
-const Bottom = styled(Horizontal) `
-  bottom: -1px;
-`;
-const Vertical = styled(Side) `
-  z-index: -1;
-  top: -1px;
-  bottom: -1px;
-  width: 1px;
-`;
-const Left = styled(Vertical) `
-  left: -1px;
-`;
-const Right = styled(Vertical) `
-  right: -1px;
-`;
-const Angle = styled(Base) `
-  // The angles have z-index: 10 to make sure they _do_ occlude other elements in the panel.
-  z-index: 10;
-  width: 8px;
-  height: 8px;
-`;
-const TopLeft = styled(Angle) `
-  top: 0;
-  left: 0;
-`;
-const TopRight = styled(Angle) `
-  top: 0;
-  right: 0;
-`;
-const BottomLeft = styled(Angle) `
-  bottom: 0;
-  left: 0;
-`;
-const BottomRight = styled(Angle) `
-  bottom: 0;
-  right: 0;
-`;
-const els = {
-    Top,
-    TopLeft,
-    TopRight,
-    Bottom,
-    BottomLeft,
-    BottomRight,
-    Left,
-    Right,
-};
-const cursors = {
-    Top: 'ns-resize',
-    Bottom: 'ns-resize',
-    Left: 'ew-resize',
-    Right: 'ew-resize',
-    TopLeft: 'nw-resize',
-    TopRight: 'ne-resize',
-    BottomLeft: 'sw-resize',
-    BottomRight: 'se-resize',
-};
-const PanelResizeHandle = ({ which }) => {
-    const panelStuff = usePanel();
-    const panelStuffRef = useRef(panelStuff);
-    panelStuffRef.current = panelStuff;
-    const [ref, node] = useRefAndState(null);
-    const dragOpts = useMemo(() => {
-        return {
-            debugName: 'PanelResizeHandle',
-            lockCursorTo: cursors[which],
-            onDragStart() {
-                let tempTransaction;
-                const stuffBeforeDrag = panelStuffRef.current;
-                const unlock = panelStuff.addBoundsHighlightLock();
-                return {
-                    onDrag(dx, dy) {
-                        const newDims = {
-                            ...stuffBeforeDrag.dims,
-                        };
-                        if (which.startsWith('Bottom')) {
-                            newDims.height = Math.max(newDims.height + dy, stuffBeforeDrag.minDims.height);
-                        }
-                        else if (which.startsWith('Top')) {
-                            const bottom = newDims.top + newDims.height;
-                            const top = clamp(newDims.top + dy, 0, Math.min(bottom - stuffBeforeDrag.minDims.height, window.innerHeight - minVisibleSize));
-                            const height = bottom - top;
-                            newDims.height = height;
-                            newDims.top = top;
-                        }
-                        if (which.endsWith('Left')) {
-                            const right = newDims.left + newDims.width;
-                            const left = Math.min(newDims.left + dx, Math.min(right - stuffBeforeDrag.minDims.width, window.innerWidth - minVisibleSize));
-                            const width = right - left;
-                            newDims.width = width;
-                            newDims.left = left;
-                        }
-                        else if (which.endsWith('Right')) {
-                            newDims.width = Math.max(newDims.width + dx, Math.max(stuffBeforeDrag.minDims.width, minVisibleSize - stuffBeforeDrag.dims.left));
-                        }
-                        const position = panelDimsToPanelPosition(newDims, {
-                            width: window.innerWidth,
-                            height: window.innerHeight,
-                        });
-                        tempTransaction?.discard();
-                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                            stateEditors.studio.historic.panelPositions.setPanelPosition({
-                                position,
-                                panelId: stuffBeforeDrag.panelId,
-                            });
-                        });
-                    },
-                    onDragEnd(dragHappened) {
-                        unlock();
-                        if (dragHappened) {
-                            tempTransaction?.commit();
-                        }
-                        else {
-                            tempTransaction?.discard();
-                        }
-                    },
-                };
-            },
-        };
-    }, [which]);
-    const [isDragging] = useDrag(node, dragOpts);
-    const Comp = els[which];
-    const isOnCorner = which.length <= 6;
-    return (React.createElement(Comp, { ref: ref, className: [
-            isDragging ? 'isDragging' : '',
-            panelStuff.boundsHighlighted && isOnCorner ? 'isHighlighted' : '',
-        ].join(' '), style: { cursor: cursors[which] } }));
-};
-export default PanelResizeHandle;

package/dist/panels/BasePanel/PanelResizers.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import PanelResizeHandle from './PanelResizeHandle';
-const PanelResizers = (props) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PanelResizeHandle, { which: "Bottom" }),
-        React.createElement(PanelResizeHandle, { which: "Top" }),
-        React.createElement(PanelResizeHandle, { which: "Left" }),
-        React.createElement(PanelResizeHandle, { which: "Right" }),
-        React.createElement(PanelResizeHandle, { which: "TopLeft" }),
-        React.createElement(PanelResizeHandle, { which: "TopRight" }),
-        React.createElement(PanelResizeHandle, { which: "BottomLeft" }),
-        React.createElement(PanelResizeHandle, { which: "BottomRight" })));
-};
-export default PanelResizers;

package/dist/panels/BasePanel/PanelWrapper.js

@@ -1,34 +0,0 @@
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import React from 'react';
-import styled from 'styled-components';
-import { usePanel } from './BasePanel';
-import PanelResizers from './PanelResizers';
-const Container = styled.div `
-  position: absolute;
-  user-select: none;
-  box-sizing: border-box;
-  ${pointerEventsAutoInNormalMode};
-  /* box-shadow: 1px 2px 10px -5px black; */
-
-  z-index: 1000;
-`;
-const PanelWrapper = React.forwardRef((props, ref) => {
-    const stuff = usePanel();
-    const { style, children, ...otherProps } = props;
-    return (
-    // @ts-ignore
-    React.createElement(Container
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        ref: ref, ...otherProps, style: {
-            width: stuff.dims.width + 'px',
-            height: stuff.dims.height + 'px',
-            top: stuff.dims.top + 'px',
-            left: stuff.dims.left + 'px',
-            ...(style ?? {}),
-        } },
-        React.createElement(PanelResizers, null),
-        children));
-});
-export default PanelWrapper;

package/dist/panels/BasePanel/common.js

@@ -1,52 +0,0 @@
-import { theme } from '@tomorrowevening/theatre-studio/css';
-import styled from 'styled-components';
-export const panelZIndexes = {
-    get outlinePanel() {
-        return 1;
-    },
-    get propsPanel() {
-        return panelZIndexes.outlinePanel;
-    },
-    get sequenceEditorPanel() {
-        return this.outlinePanel - 1;
-    },
-    get toolbar() {
-        return this.outlinePanel + 1;
-    },
-    get pluginPanes() {
-        return this.sequenceEditorPanel - 1;
-    },
-};
-export const propsEditorBackground = theme.panel.bg;
-export const TitleBar_Piece = styled.span `
-  white-space: nowrap;
-`;
-export const TitleBar_Punctuation = styled.span `
-  white-space: nowrap;
-  color: ${theme.panel.head.punctuation.color};
-`;
-export const F2 = styled.div `
-  background: ${propsEditorBackground};
-  flex-grow: 1;
-  overflow-y: scroll;
-  padding: 0;
-`;
-export const titleBarHeight = 18;
-export const TitleBar = styled.div `
-  height: ${titleBarHeight}px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  position: relative;
-  color: #adadadb3;
-  border-bottom: 1px solid rgb(0 0 0 / 13%);
-  background-color: #25272b;
-  font-size: 10px;
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-// the minimum visible width or height when the panel is partially offscreen
-export const minVisibleSize = 100;

package/dist/panels/DetailPanel/DetailPanel.js

@@ -1,146 +0,0 @@
-import { getOutlineSelection } from '@tomorrowevening/theatre-studio/selectors';
-import { usePrism, useVal } from '@tomorrowevening/theatre-react';
-import React, { createContext, useContext, useEffect, useLayoutEffect, useState, } from 'react';
-import styled from 'styled-components';
-import { isProject, isSheetObject } from '@tomorrowevening/theatre-shared/instanceTypes';
-import { panelZIndexes, TitleBar_Piece, TitleBar_Punctuation, } from '@tomorrowevening/theatre-studio/panels/BasePanel/common';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import ObjectDetails from './ObjectDetails';
-import ProjectDetails from './ProjectDetails';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useHotspot from '@tomorrowevening/theatre-studio/uiComponents/useHotspot';
-import { Atom, prism, val } from '@tomorrowevening/theatre-dataverse';
-import EmptyState from './EmptyState';
-import useLockSet from '@tomorrowevening/theatre-studio/uiComponents/useLockSet';
-import { usePresenceListenersOnRootElement } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
-const headerHeight = `32px`;
-const Container = styled.div `
-  ${pointerEventsAutoInNormalMode};
-  background-color: rgba(40, 43, 47, 0.8);
-  position: fixed;
-  right: 8px;
-  top: 50px;
-  // Temporary, see comment about CSS grid in SingleRowPropEditor.
-  width: 280px;
-  height: fit-content;
-  z-index: ${panelZIndexes.propsPanel};
-
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(14px);
-  border-radius: 2px;
-
-  display: ${({ pin }) => (pin ? 'block' : 'none')};
-
-  &:hover {
-    display: block;
-  }
-
-  @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
-  }
-`;
-const Title = styled.div `
-  margin: 0 10px;
-  color: #919191;
-  font-weight: 500;
-  font-size: 10px;
-  user-select: none;
-  ${pointerEventsAutoInNormalMode};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const Header = styled.div `
-  height: ${headerHeight};
-  display: flex;
-  align-items: center;
-`;
-const Body = styled.div `
-  ${pointerEventsAutoInNormalMode};
-  max-height: calc(100vh - 100px);
-  overflow-y: scroll;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  scrollbar-width: none;
-  padding: 0;
-  user-select: none;
-
-  /* Set the font-size for input values in the detail panel */
-  font-size: 12px;
-`;
-export const contextMenuShownContext = createContext([false, () => () => { }]);
-const DetailPanel = (props) => {
-    const pin = useVal(getStudio().atomP.ahistoric.pinDetails) !== false;
-    const hotspotActive = useHotspot('right');
-    useLayoutEffect(() => {
-        isDetailPanelHotspotActiveB.set(hotspotActive);
-    }, [hotspotActive]);
-    // cleanup
-    useEffect(() => {
-        return () => {
-            isDetailPanelHoveredB.set(false);
-            isDetailPanelHotspotActiveB.set(false);
-        };
-    }, []);
-    const [isContextMenuShown] = useContext(contextMenuShownContext);
-    const showDetailsPanel = pin || hotspotActive || isContextMenuShown;
-    const [containerElt, setContainerElt] = useState(null);
-    usePresenceListenersOnRootElement(containerElt);
-    return usePrism(() => {
-        const selection = getOutlineSelection();
-        const obj = selection.find(isSheetObject);
-        if (obj) {
-            return (React.createElement(Container, { "data-testid": "DetailPanel-Object", pin: showDetailsPanel, ref: setContainerElt, onMouseEnter: () => {
-                    isDetailPanelHoveredB.set(true);
-                }, onMouseLeave: () => {
-                    isDetailPanelHoveredB.set(false);
-                } },
-                React.createElement(Header, null,
-                    React.createElement(Title, { title: `${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${obj.address.objectKey}` },
-                        React.createElement(TitleBar_Piece, null,
-                            obj.sheet.address.sheetId,
-                            " "),
-                        React.createElement(TitleBar_Punctuation, null,
-                            ':',
-                            "\u00A0"),
-                        React.createElement(TitleBar_Piece, null,
-                            obj.sheet.address.sheetInstanceId,
-                            ' '),
-                        React.createElement(TitleBar_Punctuation, null, "\u00A0\u2192\u00A0"),
-                        React.createElement(TitleBar_Piece, null, obj.address.objectKey))),
-                React.createElement(Body, null,
-                    React.createElement(ObjectDetails, { objects: [obj] }))));
-        }
-        const project = selection.find(isProject);
-        if (project) {
-            return (React.createElement(Container, { pin: showDetailsPanel },
-                React.createElement(Header, null,
-                    React.createElement(Title, { title: `${project.address.projectId}` },
-                        React.createElement(TitleBar_Piece, null,
-                            project.address.projectId,
-                            " "))),
-                React.createElement(Body, null,
-                    React.createElement(ProjectDetails, { projects: [project] }))));
-        }
-        return (React.createElement(Container, { pin: showDetailsPanel, onMouseEnter: () => {
-                isDetailPanelHoveredB.set(true);
-            }, onMouseLeave: () => {
-                isDetailPanelHoveredB.set(false);
-            } },
-            React.createElement(EmptyState, null)));
-    }, [showDetailsPanel]);
-};
-export default () => {
-    const lockSet = useLockSet();
-    return (React.createElement(contextMenuShownContext.Provider, { value: lockSet },
-        React.createElement(DetailPanel, null)));
-};
-const isDetailPanelHotspotActiveB = new Atom(false);
-const isDetailPanelHoveredB = new Atom(false);
-export const shouldShowDetailD = prism(() => {
-    const isHovered = val(isDetailPanelHoveredB.prism);
-    const isHotspotActive = val(isDetailPanelHotspotActiveB.prism);
-    return isHovered || isHotspotActive;
-});

package/dist/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.js

@@ -1,169 +0,0 @@
-import { isPropConfigComposite } from '@tomorrowevening/theatre-shared/propTypes/utils';
-import { Atom, getPointerParts } from '@tomorrowevening/theatre-dataverse';
-import last from 'lodash-es/last';
-import { darken, transparentize } from 'polished';
-import React, { useLayoutEffect, useMemo } from 'react';
-import styled from 'styled-components';
-import { rowIndentationFormulaCSS } from '@tomorrowevening/theatre-studio/panels/DetailPanel/DeterminePropEditorForDetail/rowIndentationFormulaCSS';
-import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import DeterminePropEditorForDetail from '@tomorrowevening/theatre-studio/panels/DetailPanel/DeterminePropEditorForDetail';
-import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
-import { useEditingToolsForCompoundProp } from '@tomorrowevening/theatre-studio/propEditors/useEditingToolsForCompoundProp';
-import { whatPropIsHighlighted } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/whatPropIsHighlighted';
-import { deriver } from '@tomorrowevening/theatre-studio/utils/derive-utils';
-import NumberPropEditor from '@tomorrowevening/theatre-studio/propEditors/simpleEditors/NumberPropEditor';
-import { useEditingToolsForSimplePropInDetailsPanel } from '@tomorrowevening/theatre-studio/propEditors/useEditingToolsForSimpleProp';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import { HiOutlineChevronRight } from 'react-icons/all';
-import memoizeFn from '@tomorrowevening/theatre-shared/utils/memoizeFn';
-const Container = styled.div `
-  --step: 15px;
-  --left-pad: 15px;
-  ${pointerEventsAutoInNormalMode};
-  --right-width: 60%;
-`;
-const Header = styled.div `
-  height: 30px;
-  display: flex;
-  align-items: stretch;
-  position: relative;
-`;
-const Padding = styled.div `
-  padding-left: ${rowIndentationFormulaCSS};
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  ${({ isVectorProp }) => isVectorProp ? 'width: calc(100% - var(--right-width))' : ''};
-`;
-const ControlIndicators = styled.div `
-  flexshrink: 0;
-`;
-const PropName = deriver(styled.div `
-  margin-left: 4px;
-  cursor: default;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  user-select: none;
-  &:hover {
-    color: white;
-  }
-  overflow: hidden;
-
-  ${() => propNameTextCSS};
-`);
-const CollapseIcon = styled.span `
-  width: 28px;
-  height: 28px;
-  font-size: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  transition: transform 0.05s ease-out, color 0.1s ease-out;
-  transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
-  color: #66686a;
-
-  visibility: ${(props) => 
-// If it's a vector, show the collapse icon only when it's expanded
-(!props.isVector && props.isCollapsed) ||
-    // If it's a regular compond prop, show the collapse icon only when it's collapsed
-    (props.isVector && !props.isCollapsed)
-    ? 'visible'
-    : 'hidden'};
-
-  ${Header}:hover & {
-    visibility: visible;
-  }
-
-  &:hover {
-    transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg);
-    color: #c0c4c9;
-  }
-`;
-const color = transparentize(0.05, `#282b2f`);
-const SubProps = styled.div `
-  /* background: ${({ depth }) => darken(depth * 0.03, color)}; */
-  /* padding: ${(props) => (props.lastSubIsComposite ? 0 : '4px')} 0; */
-`;
-const isVectorProp = memoizeFn((propConfig) => {
-    const props = Object.entries(propConfig.props);
-    return (props.length <= 3 &&
-        props.every(([name, conf]) => conf.type === 'number' && ['x', 'y', 'z'].includes(name)));
-});
-function VectorComponentEditor({ propConfig, pointerToProp, obj, SimpleEditorComponent: EditorComponent, }) {
-    const editingTools = useEditingToolsForSimplePropInDetailsPanel(pointerToProp, obj, propConfig);
-    return (React.createElement(NumberPropEditor, { editingTools: editingTools, propConfig: propConfig, value: editingTools.value }));
-}
-const InputContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  padding: 0 8px 0 2px;
-  box-sizing: border-box;
-  height: 100%;
-  width: var(--right-width);
-  flex-shrink: 0;
-  flex-grow: 0;
-`;
-function DetailCompoundPropEditor({ pointerToProp, obj, propConfig, visualIndentation, }) {
-    const propName = propConfig.label ?? last(getPointerParts(pointerToProp).path);
-    const allSubs = Object.entries(propConfig.props);
-    const compositeSubs = allSubs.filter(([_, conf]) => isPropConfigComposite(conf));
-    const nonCompositeSubs = allSubs.filter(([_, conf]) => !isPropConfigComposite(conf));
-    const [propNameContainerRef, propNameContainer] = useRefAndState(null);
-    const tools = useEditingToolsForCompoundProp(pointerToProp, obj, propConfig);
-    const [contextMenu] = useContextMenu(propNameContainer, {
-        menuItems: tools.contextMenuItems,
-    });
-    const lastSubPropIsComposite = compositeSubs.length > 0;
-    const isPropHighlightedD = useMemo(() => whatPropIsHighlighted.getIsPropHighlightedD({
-        ...obj.address,
-        pathToProp: getPointerParts(pointerToProp).path,
-    }), [pointerToProp]);
-    const globalPointerPath = `${obj.address.projectId},${obj.address.sheetId},${obj.address.sheetInstanceId},${obj.address.objectKey},${getPointerParts(pointerToProp).path.join()}`;
-    // isVectorProp is already memoized, so no need to wrap this in `useMemo()`
-    const isVector = isVectorProp(propConfig);
-    useLayoutEffect(() => {
-        if (!collapsedMap.has(globalPointerPath)) {
-            collapsedMap.set(globalPointerPath, new Atom(isVector));
-        }
-    }, [globalPointerPath, propConfig]);
-    const box = collapsedMap.get(globalPointerPath);
-    const isCollapsed = usePrism(() => {
-        return box ? val(box.pointer) : isVector;
-    }, [box]);
-    return (React.createElement(Container, null,
-        contextMenu,
-        React.createElement(Header
-        // @ts-ignore
-        , { 
-            // @ts-ignore
-            style: { '--depth': visualIndentation - 1 } },
-            React.createElement(Padding, { isVectorProp: isVector },
-                React.createElement(ControlIndicators, null, tools.controlIndicators),
-                React.createElement(PropName, { isHighlighted: isPropHighlightedD, ref: propNameContainerRef },
-                    React.createElement("span", null, propName || 'Props')),
-                React.createElement(CollapseIcon, { isCollapsed: isCollapsed, isVector: isVector, onClick: () => {
-                        box?.set(!box.get());
-                    } },
-                    React.createElement(HiOutlineChevronRight, null))),
-            isVector && isCollapsed && (React.createElement(InputContainer, null, [...allSubs].map(([subPropKey, subPropConfig]) => {
-                return (React.createElement(VectorComponentEditor, { key: 'prop-' + subPropKey, 
-                    // @ts-ignore
-                    propConfig: subPropConfig, pointerToProp: pointerToProp[subPropKey], obj: obj }));
-            })))),
-        !isCollapsed && (React.createElement(SubProps
-        // @ts-ignore
-        , { 
-            // @ts-ignore
-            style: { '--depth': visualIndentation }, depth: visualIndentation, lastSubIsComposite: lastSubPropIsComposite }, [...nonCompositeSubs, ...compositeSubs].map(([subPropKey, subPropConfig]) => {
-            return (React.createElement(DeterminePropEditorForDetail, { key: 'prop-' + subPropKey, propConfig: subPropConfig, pointerToProp: pointerToProp[subPropKey], obj: obj, visualIndentation: visualIndentation + 1 }));
-        })))));
-}
-export default React.memo(DetailCompoundPropEditor);
-const collapsedMap = new Map();

package/dist/panels/DetailPanel/DeterminePropEditorForDetail/DetailSimplePropEditor.js

@@ -1,22 +0,0 @@
-import React, { useMemo } from 'react';
-import { useEditingToolsForSimplePropInDetailsPanel } from '@tomorrowevening/theatre-studio/propEditors/useEditingToolsForSimpleProp';
-import { SingleRowPropEditor } from '@tomorrowevening/theatre-studio/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor';
-import { getPointerParts } from '@tomorrowevening/theatre-dataverse';
-import { whatPropIsHighlighted } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/whatPropIsHighlighted';
-/**
- * Shown in the Object details panel, changes to this editor are usually reflected at either
- * the playhead position (the `sequence.position`) or if static, the static override value.
- */
-function DetailSimplePropEditor({ propConfig, pointerToProp, obj, SimpleEditorComponent: EditorComponent, }) {
-    const editingTools = useEditingToolsForSimplePropInDetailsPanel(pointerToProp, obj, propConfig);
-    const isPropHighlightedD = useMemo(() => whatPropIsHighlighted.getIsPropHighlightedD({
-        ...obj.address,
-        pathToProp: getPointerParts(pointerToProp).path,
-    }), [pointerToProp]);
-    return (React.createElement(SingleRowPropEditor, { editingTools: editingTools,
-        propConfig,
-        pointerToProp,
-        isPropHighlightedD },
-        React.createElement(EditorComponent, { editingTools: editingTools, propConfig: propConfig, value: editingTools.value })));
-}
-export default React.memo(DetailSimplePropEditor);