@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/panels/BasePanel/PanelDragZone.js

@@ -0,0 +1,88 @@
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import React, { useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { panelDimsToPanelPosition, usePanel } from './BasePanel';
+import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import { clamp } from 'lodash-es';
+import { minVisibleSize } from './common';
+const Container = styled.div `
+  cursor: move;
+`;
+const PanelDragZone = (props) => {
+    const panelStuff = usePanel();
+    const panelStuffRef = useRef(panelStuff);
+    panelStuffRef.current = panelStuff;
+    const [ref, node] = useRefAndState(null);
+    const dragOpts = useMemo(() => {
+        return {
+            debugName: 'PanelDragZone',
+            lockCursorTo: 'move',
+            onDragStart() {
+                const stuffBeforeDrag = panelStuffRef.current;
+                let tempTransaction;
+                const unlock = panelStuff.addBoundsHighlightLock();
+                // Bring pane to front when starting to drag
+                const panelId = stuffBeforeDrag.panelId;
+                if (panelId.startsWith('pane-')) {
+                    const paneInstanceId = panelId.slice(5); // Remove 'pane-' prefix
+                    getStudio().paneManager.bringPaneToFront(paneInstanceId);
+                }
+                return {
+                    onDrag(dx, dy) {
+                        const newDims = {
+                            ...stuffBeforeDrag.dims,
+                            top: clamp(stuffBeforeDrag.dims.top + dy, 0, window.innerHeight - minVisibleSize),
+                            left: clamp(stuffBeforeDrag.dims.left + dx, -stuffBeforeDrag.dims.width + minVisibleSize, window.innerWidth - minVisibleSize),
+                        };
+                        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();
+                        }
+                    },
+                };
+            },
+        };
+    }, []);
+    const [isDragging] = useDrag(node, dragOpts);
+    useCssCursorLock(isDragging, 'dragging', 'move');
+    const [onMouseEnter, onMouseLeave] = useMemo(() => {
+        let unlock;
+        return [
+            function onMouseEnter() {
+                if (unlock) {
+                    const u = unlock;
+                    unlock = undefined;
+                    u();
+                }
+                unlock = panelStuff.addBoundsHighlightLock();
+            },
+            function onMouseLeave() {
+                if (unlock) {
+                    const u = unlock;
+                    unlock = undefined;
+                    u();
+                }
+            },
+        ];
+    }, []);
+    return (React.createElement(Container, { ...props, ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
+};
+export default PanelDragZone;

package/dist/panels/BasePanel/PanelResizeHandle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Which = 'Top' | 'Bottom' | 'Left' | 'Right' | 'TopLeft' | 'TopRight' | 'BottomLeft' | 'BottomRight';
+declare const PanelResizeHandle: React.FC<{
+    which: Which;
+}>;
+export default PanelResizeHandle;
+//# sourceMappingURL=PanelResizeHandle.d.ts.map

package/dist/panels/BasePanel/PanelResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/PanelResizeHandle.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAiH5C,KAAK,KAAK,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,CAAA;AAajB,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,KAAK,EAAE,KAAK,CAAA;CACb,CA0GA,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/panels/BasePanel/PanelResizeHandle.js

@@ -0,0 +1,184 @@
+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.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const PanelResizers: React.FC<{}>;
+export default PanelResizers;
+//# sourceMappingURL=PanelResizers.d.ts.map

package/dist/panels/BasePanel/PanelResizers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizers.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/PanelResizers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAa/B,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/panels/BasePanel/PanelResizers.js

@@ -0,0 +1,14 @@
+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.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const PanelWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
+export default PanelWrapper;
+//# sourceMappingURL=PanelWrapper.d.ts.map

package/dist/panels/BasePanel/PanelWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelWrapper.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/PanelWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,QAAA,MAAM,YAAY,4JA8BjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/panels/BasePanel/PanelWrapper.js

@@ -0,0 +1,34 @@
+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.d.ts

@@ -0,0 +1,15 @@
+export declare const panelZIndexes: {
+    readonly outlinePanel: number;
+    readonly propsPanel: number;
+    readonly sequenceEditorPanel: number;
+    readonly toolbar: number;
+    readonly pluginPanes: number;
+};
+export declare const propsEditorBackground: string;
+export declare const TitleBar_Piece: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TitleBar_Punctuation: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const F2: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const titleBarHeight = 18;
+export declare const TitleBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const minVisibleSize = 100;
+//# sourceMappingURL=common.d.ts.map

package/dist/panels/BasePanel/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/common.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;CAoBzB,CAAA;AAED,eAAO,MAAM,qBAAqB,QAAiB,CAAA;AAEnD,eAAO,MAAM,cAAc,qEAE1B,CAAA;AAED,eAAO,MAAM,oBAAoB,qEAGhC,CAAA;AAED,eAAO,MAAM,EAAE,oEAKd,CAAA;AAED,eAAO,MAAM,cAAc,KAAK,CAAA;AAEhC,eAAO,MAAM,QAAQ,oEAepB,CAAA;AAGD,eAAO,MAAM,cAAc,MAAM,CAAA"}

package/dist/panels/BasePanel/common.js

@@ -0,0 +1,52 @@
+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.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const contextMenuShownContext: React.Context<[isLocked: boolean, addLock: () => () => void]>;
+declare const _default: () => React.JSX.Element;
+export default _default;
+export declare const shouldShowDetailD: import("@tomorrowevening/theatre-dataverse").Prism<boolean>;
+//# sourceMappingURL=DetailPanel.d.ts.map

package/dist/panels/DetailPanel/DetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPanel.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/DetailPanel/DetailPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAA;AAgFd,eAAO,MAAM,uBAAuB,+DAEV,CAAA;;AAiG1B,wBAQC;AAKD,eAAO,MAAM,iBAAiB,6DAK5B,CAAA"}

package/dist/panels/DetailPanel/DetailPanel.js

@@ -0,0 +1,146 @@
+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.d.ts

@@ -0,0 +1,14 @@
+import type { PropTypeConfig_Compound } from '@tomorrowevening/theatre-core/propTypes';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+export type ICompoundPropDetailEditorProps<TPropTypeConfig extends PropTypeConfig_Compound<any>> = {
+    propConfig: TPropTypeConfig;
+    pointerToProp: Pointer<TPropTypeConfig['valueType']>;
+    obj: SheetObject;
+    visualIndentation: number;
+};
+declare function DetailCompoundPropEditor<TPropTypeConfig extends PropTypeConfig_Compound<any>>({ pointerToProp, obj, propConfig, visualIndentation, }: ICompoundPropDetailEditorProps<TPropTypeConfig>): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DetailCompoundPropEditor>;
+export default _default;
+//# sourceMappingURL=DetailCompoundPropEditor.d.ts.map

package/dist/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailCompoundPropEditor.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EAExB,MAAM,yCAAyC,CAAA;AAIhD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAG/D,OAAO,KAAiC,MAAM,OAAO,CAAA;AAOrD,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AA4IrF,MAAM,MAAM,8BAA8B,CACxC,eAAe,SAAS,uBAAuB,CAAC,GAAG,CAAC,IAClD;IACF,UAAU,EAAE,eAAe,CAAA;IAC3B,aAAa,EAAE,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACpD,GAAG,EAAE,WAAW,CAAA;IAChB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,iBAAS,wBAAwB,CAC/B,eAAe,SAAS,uBAAuB,CAAC,GAAG,CAAC,EACpD,EACA,aAAa,EACb,GAAG,EACH,UAAU,EACV,iBAAiB,GAClB,EAAE,8BAA8B,CAAC,eAAe,CAAC,qBAyHjD;;AAED,wBAAmD"}