@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

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

@@ -1,89 +0,0 @@
-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.js

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

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

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

package/dist/panels/DetailPanel/DeterminePropEditorForDetail.js

@@ -1,28 +0,0 @@
-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.js

@@ -1,36 +0,0 @@
-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.js

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

@@ -1,86 +0,0 @@
-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.js

@@ -1,98 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
-import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
-import React, { useCallback, useState } from 'react';
-import styled from 'styled-components';
-import DetailPanelButton from '@tomorrowevening/theatre-studio/uiComponents/DetailPanelButton';
-import StateConflictRow from './ProjectDetails/StateConflictRow';
-import JSZip from 'jszip';
-import { notify } from '@tomorrowevening/theatre-studio/notify';
-import { getAllPossibleAssetIDs } from '@tomorrowevening/theatre-shared/utils/assets';
-const Container = styled.div ``;
-const TheExportRow = styled.div `
-  padding: 8px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-`;
-const ExportTooltip = styled(BasicPopover) `
-  display flex;
-  flex-direction: column;
-  gap: 1em;
-  width: 280px;
-  padding: 1em;
-`;
-/**
- * Initiates a file download for the provided data with the provided file name
- *
- * @param content - The content to save
- * @param fileName - The name of the file to save
- */
-function saveFile(content, fileName) {
-    const file = new File([content], fileName);
-    const objUrl = URL.createObjectURL(file);
-    const a = Object.assign(document.createElement('a'), {
-        href: objUrl,
-        target: '_blank',
-        rel: 'noopener',
-    });
-    a.setAttribute('download', fileName);
-    a.click();
-    setTimeout(() => {
-        URL.revokeObjectURL(objUrl);
-    }, 40000);
-}
-const ProjectDetails = ({ projects }) => {
-    const project = projects[0];
-    const projectId = project.address.projectId;
-    const slugifiedProjectId = projectId.replace(/[^\w\d'_\-]+/g, ' ').trim();
-    // const [dateString, _timeString] = new Date().toISOString().split('T')
-    // e.g. `Butterfly.theatre-project-state.json`
-    const suggestedFileName = `${slugifiedProjectId}.theatre-project-state.json`;
-    const [downloaded, setDownloaded] = useState(false);
-    const exportProject = useCallback(async () => {
-        // get all possible asset ids referenced by either static props or keyframes
-        const allValues = getAllPossibleAssetIDs(project);
-        const blobs = new Map();
-        try {
-            // only export assets that are referenced by the project
-            await Promise.all(allValues.map(async (value) => {
-                const assetUrl = project.assetStorage.getAssetUrl(value);
-                const response = await fetch(assetUrl);
-                if (response.ok) {
-                    blobs.set(value, await response.blob());
-                }
-            }));
-        }
-        catch (e) {
-            notify.error(`Failed to access assets`, `Export aborted. Failed to access assets at ${project.config.assets?.baseUrl ?? '/'}. This is likely due to a CORS issue.`);
-            // abort the export
-            return;
-        }
-        if (blobs.size > 0) {
-            const zip = new JSZip();
-            for (const [assetID, blob] of blobs) {
-                zip.file(assetID, blob);
-            }
-            const assetsFile = await zip.generateAsync({ type: 'blob' });
-            saveFile(assetsFile, `${slugifiedProjectId}.assets.zip`);
-        }
-        const str = JSON.stringify(getStudio().createContentOfSaveFile(project.address.projectId), null, 2);
-        saveFile(str, suggestedFileName);
-        setDownloaded(true);
-        setTimeout(() => {
-            setDownloaded(false);
-        }, 2000);
-    }, [project, suggestedFileName]);
-    const exportTooltip = usePopover({ debugName: 'ProjectDetails', pointerDistanceThreshold: 50 }, () => (React.createElement(ExportTooltip, null,
-        React.createElement("p", null, "This will create a JSON file with the state of your project. You can commit this file to your git repo and include it in your production bundle."),
-        React.createElement("p", null, "If your project uses assets, this will also create a zip file with all the assets that you can unpack in your public folder."),
-        React.createElement("a", { href: "https://www.theatrejs.com/docs/latest/manual/projects#state", target: "_blank" }, "Here is a quick guide on how to export to production."))));
-    return (React.createElement(React.Fragment, null,
-        exportTooltip.node,
-        React.createElement(Container, null,
-            React.createElement(StateConflictRow, { projectId: projectId }),
-            React.createElement(TheExportRow, null,
-                React.createElement(DetailPanelButton, { onMouseEnter: (e) => exportTooltip.open(e, e.target), onClick: !downloaded ? exportProject : undefined, disabled: downloaded }, downloaded ? '(Exported)' : `Export ${projectId} to JSON`)))));
-};
-export default ProjectDetails;

package/dist/panels/OutlinePanel/BaseItem.js

@@ -1,136 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import noop from '@tomorrowevening/theatre-shared/utils/noop';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import { ChevronDown, Package } from '@tomorrowevening/theatre-studio/uiComponents/icons';
-export const Container = styled.li `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-export const BaseHeader = styled.div ``;
-const Header = styled(BaseHeader) `
-  position: relative;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  margin-left: calc(4px + var(--depth) * 16px);
-  padding-left: 4px;
-  padding-right: 8px;
-  gap: 4px;
-  height: 21px;
-  line-height: 0;
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  pointer-events: none;
-  white-space: nowrap;
-
-  border-radius: 2px;
-  box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);
-
-  color: rgba(255, 255, 255, 0.9);
-  background: rgba(40, 43, 47, 0.65);
-  backdrop-filter: blur(14px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-
-  &.descendant-is-selected {
-    background: rgba(29, 53, 59, 0.7);
-  }
-
-  ${pointerEventsAutoInNormalMode};
-  &:not(.not-selectable):not(.selected):hover {
-    background: rgba(59, 63, 69, 0.9);
-
-    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
-  }
-
-  &:not(.not-selectable):not(.selected):active {
-    background: rgba(82, 88, 96, 0.9);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
-  }
-
-  &.selected {
-    background: rgba(30, 88, 102, 0.7);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  }
-
-  @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
-  }
-`;
-export const outlineItemFont = css `
-  font-weight: 500;
-  font-size: 11px;
-  & {
-  }
-`;
-const Head_Label = styled.span `
-  ${outlineItemFont};
-
-  ${pointerEventsAutoInNormalMode};
-  position: relative;
-  // Compensate for border bottom
-  top: 0.5px;
-  display: flex;
-  height: 20px;
-  align-items: center;
-  box-sizing: border-box;
-`;
-const Head_IconContainer = styled.div `
-  font-weight: 500;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  opacity: 0.99;
-`;
-const Head_Icon_WithDescendants = styled.span `
-  font-size: 9px;
-  position: relative;
-  display: block;
-  transition: transform 0.1s ease-out;
-
-  &:hover {
-    transform: rotate(-20deg);
-  }
-
-  ${Container}.collapsed & {
-    transform: rotate(-90deg);
-
-    &:hover {
-      transform: rotate(-70deg);
-    }
-  }
-`;
-const ChildrenContainer = styled.ul `
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  ${Container}.collapsed & {
-    display: none;
-  }
-`;
-const BaseItem = ({ label, children, depth, select, selectionStatus, labelDecoration, collapsed = false, setIsCollapsed, }) => {
-    const canContainChildren = children !== undefined;
-    return (React.createElement(Container, { style: 
-        /* @ts-ignore */
-        { '--depth': depth }, className: collapsed ? 'collapsed' : '' },
-        React.createElement(Header, { className: selectionStatus, onClick: select ?? noop, "data-header": true },
-            React.createElement(Head_IconContainer, null, canContainChildren ? (React.createElement(Head_Icon_WithDescendants, { onClick: (evt) => {
-                    evt.stopPropagation();
-                    evt.preventDefault();
-                    setIsCollapsed?.(!collapsed);
-                } },
-                React.createElement(ChevronDown, null))) : (React.createElement(Package, null))),
-            React.createElement(Head_Label, null,
-                React.createElement("span", null, label)),
-            labelDecoration),
-        canContainChildren && React.createElement(ChildrenContainer, null, children)));
-};
-export default BaseItem;

package/dist/panels/OutlinePanel/ObjectsList/ObjectItem.js

@@ -1,14 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import React from 'react';
-import BaseItem from '@tomorrowevening/theatre-studio/panels/OutlinePanel/BaseItem';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { getOutlineSelection } from '@tomorrowevening/theatre-studio/selectors';
-export const ObjectItem = ({ sheetObject, depth, overrideLabel }) => {
-    const select = () => {
-        getStudio().transaction(({ stateEditors }) => {
-            stateEditors.studio.historic.panels.outline.selection.set([sheetObject]);
-        });
-    };
-    const selection = usePrism(() => getOutlineSelection(), []);
-    return (React.createElement(BaseItem, { select: select, label: overrideLabel ?? sheetObject.address.objectKey, depth: depth, selectionStatus: selection.includes(sheetObject) ? 'selected' : 'not-selected' }));
-};

package/dist/panels/OutlinePanel/ObjectsList/ObjectsList.js

@@ -1,85 +0,0 @@
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { val } from '@tomorrowevening/theatre-dataverse';
-import React from 'react';
-import styled from 'styled-components';
-import { ObjectItem } from './ObjectItem';
-import BaseItem from '@tomorrowevening/theatre-studio/panels/OutlinePanel/BaseItem';
-import { useCollapseStateInOutlinePanel } from '@tomorrowevening/theatre-studio/panels/OutlinePanel/outlinePanelUtils';
-export const Li = styled.li `
-  color: ${(props) => (props.isSelected ? 'white' : 'hsl(1, 1%, 80%)')};
-`;
-const ObjectsList = ({ sheet, depth }) => {
-    return usePrism(() => {
-        const objectsMap = val(sheet.objectsP);
-        const objects = Object.values(objectsMap).filter((a) => a != null);
-        const rootObject = new Map();
-        objects.forEach((object) => {
-            addToNamespace(rootObject, object);
-        });
-        return (React.createElement(NamespaceTree, { namespace: rootObject, visualIndentation: depth, path: [], sheet: sheet }));
-    }, [sheet, depth]);
-};
-function NamespaceTree(props) {
-    return (React.createElement(React.Fragment, null, [...props.namespace.entries()].map(([label, { object, nested }]) => {
-        return (React.createElement(Namespace, { key: label, label: label, object: object, nested: nested, visualIndentation: props.visualIndentation, path: props.path, sheet: props.sheet }));
-    })));
-}
-function Namespace(props) {
-    const { nested, label, object, sheet } = props;
-    const { collapsed, setCollapsed } = useCollapseStateInOutlinePanel({
-        type: 'namespace',
-        sheet,
-        path: [...props.path, label],
-    });
-    const nestedChildrenElt = nested && (React.createElement(NamespaceTree, { namespace: nested, path: [...props.path, label], 
-        // Question: will there be key conflict if two components have the same labels?
-        key: 'namespaceTree(' + label + ')', visualIndentation: props.visualIndentation + 1, sheet: sheet }));
-    const sameNameElt = object && (React.createElement(ObjectItem, { depth: props.visualIndentation, 
-        // key is useful for navigating react dev component tree
-        key: 'objectPath(' + object.address.objectKey + ')', 
-        // object entries should not allow this to be undefined
-        sheetObject: object, overrideLabel: label }));
-    return (React.createElement(React.Fragment, { key: `${label} - ${props.visualIndentation}` },
-        sameNameElt,
-        nestedChildrenElt && (React.createElement(BaseItem, { selectionStatus: "not-selectable", label: label, 
-            // key necessary for no duplicate keys (next to other React.Fragments)
-            key: `baseItem(${label})`, depth: props.visualIndentation, children: nestedChildrenElt, collapsed: collapsed, setIsCollapsed: setCollapsed }))));
-}
-export default ObjectsList;
-function addToNamespace(mutObjects, object, path = getObjectNamespacePath(object)) {
-    const [next, ...rest] = path;
-    let existing = mutObjects.get(next);
-    if (!existing) {
-        existing = {
-            nested: undefined,
-            object: undefined,
-            path: [...path],
-        };
-        mutObjects.set(next, existing);
-    }
-    if (rest.length === 0) {
-        console.assert(!existing.object, 'expect not to have existing object with same name', { existing, object });
-        existing.object = object;
-    }
-    else {
-        if (!existing.nested) {
-            existing.nested = new Map();
-        }
-        addToNamespace(existing.nested, object, rest);
-    }
-}
-function getObjectNamespacePath(object) {
-    let existing = OBJECT_SPLITS_MEMO.get(object);
-    if (!existing) {
-        existing = object.address.objectKey.split(RE_SPLIT_BY_SLASH_WITHOUT_WHITESPACE);
-        console.assert(existing.length > 0, 'expected not empty');
-        OBJECT_SPLITS_MEMO.set(object, existing);
-    }
-    return existing;
-}
-/**
- * Relying on the fact we try to "sanitize paths" earlier.
- * Go look for `sanifySlashedPath` in a `utils/slashedPaths.ts`.
- */
-const RE_SPLIT_BY_SLASH_WITHOUT_WHITESPACE = /\s*\/\s*/g;
-const OBJECT_SPLITS_MEMO = new WeakMap();