@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

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

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

@@ -0,0 +1,20 @@
+import type { IBasePropType, PropTypeConfig_AllSimples } from '@tomorrowevening/theatre-core/propTypes';
+import React from 'react';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { ISimplePropEditorReactProps } from '@tomorrowevening/theatre-studio/propEditors/simpleEditors/ISimplePropEditorReactProps';
+export type IDetailSimplePropEditorProps<TPropTypeConfig extends IBasePropType<string, any>> = {
+    propConfig: TPropTypeConfig;
+    pointerToProp: Pointer<TPropTypeConfig['valueType']>;
+    obj: SheetObject;
+    visualIndentation: number;
+    SimpleEditorComponent: React.VFC<ISimplePropEditorReactProps<TPropTypeConfig>>;
+};
+/**
+ * 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.
+ */
+declare function DetailSimplePropEditor<TPropTypeConfig extends PropTypeConfig_AllSimples>({ propConfig, pointerToProp, obj, SimpleEditorComponent: EditorComponent, }: IDetailSimplePropEditorProps<TPropTypeConfig>): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DetailSimplePropEditor>;
+export default _default;
+//# sourceMappingURL=DetailSimplePropEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailSimplePropEditor.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailSimplePropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,yBAAyB,EAC1B,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AACrF,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,uFAAuF,CAAA;AAGtI,MAAM,MAAM,4BAA4B,CACtC,eAAe,SAAS,aAAa,CAAC,MAAM,EAAE,GAAG,CAAC,IAChD;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;IACzB,qBAAqB,EAAE,KAAK,CAAC,GAAG,CAAC,2BAA2B,CAAC,eAAe,CAAC,CAAC,CAAA;CAC/E,CAAA;AAED;;;GAGG;AACH,iBAAS,sBAAsB,CAC7B,eAAe,SAAS,yBAAyB,EACjD,EACA,UAAU,EACV,aAAa,EACb,GAAG,EACH,qBAAqB,EAAE,eAAe,GACvC,EAAE,4BAA4B,CAAC,eAAe,CAAC,qBAgC/C;;AAED,wBAAiD"}

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

@@ -0,0 +1,22 @@
+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);

package/dist/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.d.ts

@@ -0,0 +1,14 @@
+import type * as propTypes from '@tomorrowevening/theatre-core/propTypes';
+import type { Pointer, Prism } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { useEditingToolsForSimplePropInDetailsPanel } from '@tomorrowevening/theatre-studio/propEditors/useEditingToolsForSimpleProp';
+import type { PropHighlighted } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/whatPropIsHighlighted';
+type ISingleRowPropEditorProps<T> = {
+    propConfig: propTypes.PropTypeConfig;
+    pointerToProp: Pointer<T>;
+    editingTools: ReturnType<typeof useEditingToolsForSimplePropInDetailsPanel>;
+    isPropHighlightedD: Prism<PropHighlighted>;
+};
+export declare function SingleRowPropEditor<T>({ propConfig, pointerToProp, editingTools, children, isPropHighlightedD, }: React.PropsWithChildren<ISingleRowPropEditorProps<T>>): React.ReactElement<any, any> | null;
+export {};
+//# sourceMappingURL=SingleRowPropEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SingleRowPropEditor.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,SAAS,MAAM,yCAAyC,CAAA;AAEzE,OAAO,KAAK,EAAC,OAAO,EAAE,KAAK,EAAC,MAAM,oCAAoC,CAAA;AAItE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,0CAA0C,EAAC,MAAM,0EAA0E,CAAA;AAIxI,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,kFAAkF,CAAA;AA+ErH,KAAK,yBAAyB,CAAC,CAAC,IAAI;IAClC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAA;IACpC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACzB,YAAY,EAAE,UAAU,CAAC,OAAO,0CAA0C,CAAC,CAAA;IAC3E,kBAAkB,EAAE,KAAK,CAAC,eAAe,CAAC,CAAA;CAC3C,CAAA;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,UAAU,EACV,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,kBAAkB,GACnB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAC3E,GAAG,EACH,GAAG,CACJ,GAAG,IAAI,CA6BP"}

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

@@ -0,0 +1,89 @@
+import { getPointerParts } from '@tomorrowevening/theatre-dataverse';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { last } from 'lodash-es';
+import React from 'react';
+import styled from 'styled-components';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { propNameTextCSS } from '@tomorrowevening/theatre-studio/propEditors/utils/propNameTextCSS';
+import { deriver } from '@tomorrowevening/theatre-studio/utils/derive-utils';
+import { rowIndentationFormulaCSS } from './rowIndentationFormulaCSS';
+import { getDetailRowHighlightBackground } from './getDetailRowHighlightBackground';
+const Container = deriver(styled.div `
+  display: flex;
+  height: 30px;
+  justify-content: flex-start;
+  align-items: stretch;
+  // We cannot calculate both the container (details panel) width and the descendant
+  // (this) width dynamically. This leads to the container width being calculated
+  // without this percentage being taken into consideration leads to horizontal
+  // clipping/scrolling--the same way as if we explicitly fixed either the container
+  // width, or the descendant width.
+  // The correct solution for tabulated UIs with dynamic container widths is to use
+  // CSS grid. For now I fixed this issue by just giving a great enough width
+  // to the details panel so most things don't break.
+  --right-width: 60%;
+  position: relative;
+  ${pointerEventsAutoInNormalMode};
+
+  /* background-color: ${getDetailRowHighlightBackground}; */
+`);
+const Left = styled.div `
+  box-sizing: border-box;
+  padding-left: ${rowIndentationFormulaCSS};
+  padding-right: 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  gap: 4px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: calc(100% - var(--right-width));
+`;
+const PropNameContainer = deriver(styled.div `
+  text-align: left;
+  flex: 1 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: default;
+
+  ${propNameTextCSS};
+  &:hover {
+    color: white;
+  }
+`);
+const ControlsContainer = styled.div `
+  flex-basis: 8px;
+  flex: 0 0;
+  display: flex;
+  align-items: center;
+`;
+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;
+`;
+export function SingleRowPropEditor({ propConfig, pointerToProp, editingTools, children, isPropHighlightedD, }) {
+    const label = propConfig.label ?? last(getPointerParts(pointerToProp).path);
+    const [propNameContainerRef, propNameContainer] = useRefAndState(null);
+    const [contextMenu] = useContextMenu(propNameContainer, {
+        menuItems: editingTools.contextMenuItems,
+    });
+    return (React.createElement(Container, { isHighlighted: isPropHighlightedD },
+        contextMenu,
+        React.createElement(Left, null,
+            React.createElement(ControlsContainer, null, editingTools.controlIndicators),
+            React.createElement(PropNameContainer, { isHighlighted: isPropHighlightedD, ref: propNameContainerRef, title: ['obj', 'props', ...getPointerParts(pointerToProp).path].join('.') }, label)),
+        React.createElement(InputContainer, null, children)));
+}

package/dist/panels/DetailPanel/DeterminePropEditorForDetail/getDetailRowHighlightBackground.d.ts

@@ -0,0 +1,5 @@
+import type { PropHighlighted } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/whatPropIsHighlighted';
+export declare function getDetailRowHighlightBackground({ isHighlighted, }: {
+    isHighlighted: PropHighlighted;
+}): string;
+//# sourceMappingURL=getDetailRowHighlightBackground.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getDetailRowHighlightBackground.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/DetailPanel/DeterminePropEditorForDetail/getDetailRowHighlightBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,kFAAkF,CAAA;AAErH,wBAAgB,+BAA+B,CAAC,EAC9C,aAAa,GACd,EAAE;IACD,aAAa,EAAE,eAAe,CAAA;CAC/B,GAAG,MAAM,CAMT"}

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

@@ -0,0 +1,7 @@
+export function getDetailRowHighlightBackground({ isHighlighted, }) {
+    return isHighlighted === 'self'
+        ? '#1857a4'
+        : isHighlighted === 'descendent'
+            ? '#0a2f5c'
+            : 'initial';
+}

package/dist/panels/DetailPanel/DeterminePropEditorForDetail/rowIndentationFormulaCSS.d.ts

@@ -0,0 +1,2 @@
+export declare const rowIndentationFormulaCSS = "calc(var(--left-pad) + var(--depth) * var(--step))";
+//# sourceMappingURL=rowIndentationFormulaCSS.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rowIndentationFormulaCSS.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/DetailPanel/DeterminePropEditorForDetail/rowIndentationFormulaCSS.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,uDAAuD,CAAA"}

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

@@ -0,0 +1 @@
+export const rowIndentationFormulaCSS = `calc(var(--left-pad) + var(--depth) * var(--step))`;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import type { PropTypeConfig } from '@tomorrowevening/theatre-core/propTypes';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { PropConfigForType } from '@tomorrowevening/theatre-studio/propEditors/utils/PropConfigForType';
+/**
+ * Given a propConfig, this function gives the corresponding prop editor for
+ * use in the details panel. {@link DeterminePropEditorForKeyframe} does the
+ * same thing for the dope sheet inline prop editor on a keyframe. The main difference
+ * between this function and {@link DeterminePropEditorForKeyframe} is that this
+ * one shows prop editors *with* keyframe navigation controls (that look
+ * like `< ・ >`).
+ *
+ * @param p - propConfig object for any type of prop.
+ */
+declare const DeterminePropEditorForDetail: React.VFC<IDeterminePropEditorForDetailProps<PropTypeConfig['type']>>;
+export default DeterminePropEditorForDetail;
+type IDeterminePropEditorForDetailProps<K extends PropTypeConfig['type']> = IDetailEditablePropertyProps<K> & {
+    visualIndentation: number;
+};
+type IDetailEditablePropertyProps<K extends PropTypeConfig['type']> = {
+    obj: SheetObject;
+    pointerToProp: Pointer<PropConfigForType<K>['valueType']>;
+    propConfig: PropConfigForType<K>;
+};
+//# sourceMappingURL=DeterminePropEditorForDetail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeterminePropEditorForDetail.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/DetailPanel/DeterminePropEditorForDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAC/D,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAErF,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,qEAAqE,CAAA;AAK1G;;;;;;;;;GASG;AACH,QAAA,MAAM,4BAA4B,EAAE,KAAK,CAAC,GAAG,CAC3C,kCAAkC,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CA+B3D,CAAA;AAED,eAAe,4BAA4B,CAAA;AAE3C,KAAK,kCAAkC,CAAC,CAAC,SAAS,cAAc,CAAC,MAAM,CAAC,IACtE,4BAA4B,CAAC,CAAC,CAAC,GAAG;IAChC,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AACH,KAAK,4BAA4B,CAAC,CAAC,SAAS,cAAc,CAAC,MAAM,CAAC,IAAI;IACpE,GAAG,EAAE,WAAW,CAAA;IAChB,aAAa,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAA;IACzD,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;CACjC,CAAA"}

package/dist/panels/DetailPanel/DeterminePropEditorForDetail.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { simplePropEditorByPropType } from '@tomorrowevening/theatre-studio/propEditors/simpleEditors/simplePropEditorByPropType';
+import DetailCompoundPropEditor from './DeterminePropEditorForDetail/DetailCompoundPropEditor';
+import DetailSimplePropEditor from './DeterminePropEditorForDetail/DetailSimplePropEditor';
+/**
+ * Given a propConfig, this function gives the corresponding prop editor for
+ * use in the details panel. {@link DeterminePropEditorForKeyframe} does the
+ * same thing for the dope sheet inline prop editor on a keyframe. The main difference
+ * between this function and {@link DeterminePropEditorForKeyframe} is that this
+ * one shows prop editors *with* keyframe navigation controls (that look
+ * like `< ・ >`).
+ *
+ * @param p - propConfig object for any type of prop.
+ */
+const DeterminePropEditorForDetail = ({ propConfig, visualIndentation, pointerToProp, obj }) => {
+    if (propConfig.type === 'compound') {
+        return (React.createElement(DetailCompoundPropEditor, { obj: obj, visualIndentation: visualIndentation, pointerToProp: pointerToProp, propConfig: propConfig }));
+    }
+    else if (propConfig.type === 'enum') {
+        // notice: enums are not implemented, yet.
+        return React.createElement(React.Fragment, null);
+    }
+    else {
+        const PropEditor = simplePropEditorByPropType[propConfig.type];
+        return (React.createElement(DetailSimplePropEditor, { SimpleEditorComponent: PropEditor, obj: obj, visualIndentation: visualIndentation, pointerToProp: pointerToProp, propConfig: propConfig }));
+    }
+};
+export default DeterminePropEditorForDetail;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/DetailPanel/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,OAAO,CAAA;AA8B7B,QAAA,MAAM,UAAU,EAAE,EAsBjB,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/panels/DetailPanel/EmptyState.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Outline } from '@tomorrowevening/theatre-studio/uiComponents/icons';
+const Container = styled.div `
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+const Message = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  color: rgba(255, 255, 255, 0.9);
+`;
+const Icon = styled.div `
+  color: rgba(145, 145, 145, 0.8);
+`;
+const LinkToDoc = styled.a `
+  color: #919191;
+  font-size: 10px;
+  text-decoration-color: #40434a;
+  text-underline-offset: 3px;
+`;
+const EmptyState = () => {
+    return (React.createElement(Container, null,
+        React.createElement(Message, null,
+            React.createElement(Icon, null,
+                React.createElement(Outline, null)),
+            React.createElement("div", null,
+                "Please select an object from the ",
+                React.createElement("u", null, "Outline Menu"),
+                " to see its properties.")),
+        React.createElement(LinkToDoc, { href: "https://www.theatrejs.com/docs/latest/manual/objects", target: "_blank" }, "Learn more about Objects")));
+};
+export default EmptyState;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+declare const ObjectDetails: React.FC<{
+    /** TODO: add support for multiple objects (it would show their common props) */
+    objects: [SheetObject];
+}>;
+export default ObjectDetails;
+//# sourceMappingURL=ObjectDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectDetails.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/DetailPanel/ObjectDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAqCrF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,gFAAgF;IAChF,OAAO,EAAE,CAAC,WAAW,CAAC,CAAA;CACvB,CAiCA,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/panels/DetailPanel/ObjectDetails.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import DeterminePropEditorForDetail from './DeterminePropEditorForDetail';
+import { useVal } from '@tomorrowevening/theatre-react';
+import uniqueKeyForAnyObject from '@tomorrowevening/theatre-shared/utils/uniqueKeyForAnyObject';
+import styled from 'styled-components';
+const ActionButtonContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+`;
+const ActionButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  border-radius: 2px;
+
+  color: #a8a8a9;
+  background: rgba(255, 255, 255, 0.1);
+
+  border: none;
+  height: 28px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.2);
+  }
+`;
+const ObjectDetails = ({ objects }) => {
+    const obj = objects[0];
+    const config = useVal(obj.template.configPointer);
+    const actions = useVal(obj.template._temp_actionsPointer);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DeterminePropEditorForDetail
+        // 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 the object details panel.
+        , { 
+            // 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 the object details panel.
+            key: uniqueKeyForAnyObject(obj), obj: obj, pointerToProp: obj.propsP, propConfig: config, visualIndentation: 1 }),
+        React.createElement(ActionButtonContainer, null, actions &&
+            Object.entries(actions).map(([actionName, action]) => {
+                return (React.createElement(ActionButton, { key: actionName, onClick: () => {
+                        action(obj.publicApi);
+                    } }, actionName));
+            }))));
+};
+export default ObjectDetails;

package/dist/panels/DetailPanel/ProjectDetails/StateConflictRow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ProjectId } from '@tomorrowevening/theatre-shared/utils/ids';
+declare const StateConflictRow: React.FC<{
+    projectId: ProjectId;
+}>;
+export default StateConflictRow;
+//# sourceMappingURL=StateConflictRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StateConflictRow.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/DetailPanel/ProjectDetails/StateConflictRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,2CAA2C,CAAA;AA8BxE,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAC,CAYtD,CAAA;AAmFD,eAAe,gBAAgB,CAAA"}

package/dist/panels/DetailPanel/ProjectDetails/StateConflictRow.js

@@ -0,0 +1,86 @@
+import { useVal } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import React from 'react';
+import styled from 'styled-components';
+import { generateDiskStateRevision } from '@tomorrowevening/theatre-studio/StudioStore/generateDiskStateRevision';
+import useTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/useTooltip';
+import BasicTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicTooltip';
+import DetailPanelButton from '@tomorrowevening/theatre-studio/uiComponents/DetailPanelButton';
+const Container = styled.div `
+  padding: 8px 10px;
+  position: relative;
+  background-color: #6d232352;
+  &:before {
+    position: absolute;
+    content: ' ';
+    display: block;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: #ff000070;
+  }
+`;
+const Message = styled.div `
+  margin-bottom: 1em;
+  & a {
+    color: inherit;
+  }
+`;
+const ChooseStateRow = styled.div `
+  display: flex;
+  gap: 8px;
+`;
+const StateConflictRow = ({ projectId }) => {
+    const loadingState = useVal(getStudio().atomP.ephemeral.coreByProject[projectId].loadingState);
+    if (!loadingState)
+        return null;
+    if (loadingState.type === 'browserStateIsNotBasedOnDiskState') {
+        return React.createElement(InConflict, { loadingState: loadingState, projectId: projectId });
+    }
+    else {
+        return null;
+    }
+};
+const InConflict = ({ projectId, loadingState }) => {
+    /**
+     * This stuff is not undo-safe, but once we switch to the new persistence
+     * scheme, these will be unnecessary anyway.
+     */
+    const useBrowserState = () => {
+        getStudio().transaction(({ drafts, stateEditors }) => {
+            stateEditors.coreByProject.historic.revisionHistory.add({
+                projectId,
+                revision: loadingState.onDiskState.revisionHistory[0],
+            });
+            stateEditors.coreByProject.historic.revisionHistory.add({
+                projectId,
+                revision: generateDiskStateRevision(),
+            });
+            drafts.ephemeral.coreByProject[projectId].loadingState = {
+                type: 'loaded',
+            };
+        });
+    };
+    const useOnDiskState = () => {
+        getStudio().transaction(({ drafts }) => {
+            drafts.historic.coreByProject[projectId] = loadingState.onDiskState;
+            drafts.ephemeral.coreByProject[projectId].loadingState = {
+                type: 'loaded',
+            };
+        });
+    };
+    const [browserStateNode, browserStateRef] = useTooltip({}, () => (React.createElement(BasicTooltip, null, "The browser's state will override the disk state.")));
+    const [diskStateNode, diskStateRef] = useTooltip({}, () => (React.createElement(BasicTooltip, null, "The disk's state will override the browser's state.")));
+    return (React.createElement(Container, null,
+        React.createElement(Message, null,
+            "Browser state is not based on disk state.",
+            ' ',
+            React.createElement("a", { href: "https://www.theatrejs.com/docs/latest/manual/projects#state", target: "_blank" }, "Learn more.")),
+        React.createElement(ChooseStateRow, null,
+            browserStateNode,
+            React.createElement(DetailPanelButton, { onClick: useBrowserState, ref: browserStateRef }, "Use browser's state"),
+            diskStateNode,
+            React.createElement(DetailPanelButton, { onClick: useOnDiskState, ref: diskStateRef }, "Use disk state"))));
+};
+export default StateConflictRow;

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

@@ -0,0 +1,7 @@
+import type Project from '@tomorrowevening/theatre-core/projects/Project';
+import React from 'react';
+declare const ProjectDetails: React.FC<{
+    projects: Project[];
+}>;
+export default ProjectDetails;
+//# sourceMappingURL=ProjectDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectDetails.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/DetailPanel/ProjectDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,gDAAgD,CAAA;AAIzE,OAAO,KAA8B,MAAM,OAAO,CAAA;AA+ClD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,QAAQ,EAAE,OAAO,EAAE,CAAA;CACpB,CA4GA,CAAA;AAED,eAAe,cAAc,CAAA"}