@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/panels/DetailPanel/ProjectDetails.js

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

@@ -0,0 +1,18 @@
+import type { VoidFn } from '@tomorrowevening/theatre-shared/utils/types';
+import React from 'react';
+export declare const Container: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const BaseHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const outlineItemFont: import("styled-components").FlattenSimpleInterpolation;
+type SelectionStatus = 'not-selectable' | 'not-selected' | 'selected' | 'descendant-is-selected';
+declare const BaseItem: React.FC<{
+    label: React.ReactNode;
+    select?: VoidFn;
+    depth: number;
+    selectionStatus: SelectionStatus;
+    labelDecoration?: React.ReactNode;
+    children?: React.ReactNode | undefined;
+    collapsed?: boolean;
+    setIsCollapsed?: (v: boolean) => void;
+}>;
+export default BaseItem;
+//# sourceMappingURL=BaseItem.d.ts.map

package/dist/panels/OutlinePanel/BaseItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseItem.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/OutlinePanel/BaseItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAA;AACvE,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,SAAS,mEAQrB,CAAA;AAED,eAAO,MAAM,UAAU,oEAAe,CAAA;AAqDtC,eAAO,MAAM,eAAe,wDAK3B,CAAA;AAqDD,KAAK,eAAe,GAChB,gBAAgB,GAChB,cAAc,GACd,UAAU,GACV,wBAAwB,CAAA;AAE5B,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,eAAe,CAAA;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC,CA6CA,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/panels/OutlinePanel/BaseItem.js

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

@@ -0,0 +1,8 @@
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import React from 'react';
+export declare const ObjectItem: React.VFC<{
+    sheetObject: SheetObject;
+    depth: number;
+    overrideLabel?: string;
+}>;
+//# sourceMappingURL=ObjectItem.d.ts.map

package/dist/panels/OutlinePanel/ObjectsList/ObjectItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectItem.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/OutlinePanel/ObjectsList/ObjectItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAErF,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC;IACjC,WAAW,EAAE,WAAW,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAmBA,CAAA"}

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

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

@@ -0,0 +1,11 @@
+import type Sheet from '@tomorrowevening/theatre-core/sheets/Sheet';
+import React from 'react';
+export declare const Li: import("styled-components").StyledComponent<"li", any, {
+    isSelected: boolean;
+}, never>;
+declare const ObjectsList: React.FC<{
+    depth: number;
+    sheet: Sheet;
+}>;
+export default ObjectsList;
+//# sourceMappingURL=ObjectsList.d.ts.map

package/dist/panels/OutlinePanel/ObjectsList/ObjectsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectsList.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,4CAA4C,CAAA;AAGnE,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,EAAE;gBAA0B,OAAO;SAE/C,CAAA;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAA;CACb,CAqBA,CAAA;AAkFD,eAAe,WAAW,CAAA"}

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

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

package/dist/panels/OutlinePanel/OutlinePanel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const OutlinePanel: React.FC<{}>;
+export default OutlinePanel;
+export declare const shouldShowOutlineD: import("@tomorrowevening/theatre-dataverse").Prism<boolean>;
+//# sourceMappingURL=OutlinePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinePanel.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/OutlinePanel/OutlinePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAA;AA+CvD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CA8B9B,CAAA;AAED,eAAe,YAAY,CAAA;AAK3B,eAAO,MAAM,kBAAkB,6DAK7B,CAAA"}

package/dist/panels/OutlinePanel/OutlinePanel.js

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

package/dist/panels/OutlinePanel/ProjectsList/ProjectListItem.d.ts

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

package/dist/panels/OutlinePanel/ProjectsList/ProjectListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectListItem.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,gDAAgD,CAAA;AACzE,OAAO,KAAoB,MAAM,OAAO,CAAA;AAoBxC,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;CACjB,CAyCA,CAAA;AAED,eAAe,eAAe,CAAA"}

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

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

package/dist/panels/OutlinePanel/ProjectsList/ProjectsList.d.ts

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

package/dist/panels/OutlinePanel/ProjectsList/ProjectsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsList.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/OutlinePanel/ProjectsList/ProjectsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAmB9B,CAAA;AAED,eAAe,YAAY,CAAA"}

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

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

package/dist/panels/OutlinePanel/SheetsList/SheetInstanceItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type Sheet from '@tomorrowevening/theatre-core/sheets/Sheet';
+export declare const SheetInstanceItem: React.FC<{
+    depth: number;
+    sheet: Sheet;
+}>;
+//# sourceMappingURL=SheetInstanceItem.d.ts.map

package/dist/panels/OutlinePanel/SheetsList/SheetInstanceItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetInstanceItem.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/OutlinePanel/SheetsList/SheetInstanceItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAIxC,OAAO,KAAK,KAAK,MAAM,4CAA4C,CAAA;AAanE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAA;CACb,CA2CA,CAAA"}

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

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

package/dist/panels/OutlinePanel/SheetsList/SheetItem.d.ts

@@ -0,0 +1,8 @@
+import type Project from '@tomorrowevening/theatre-core/projects/Project';
+import React from 'react';
+export declare const SheetItem: React.FC<{
+    depth: number;
+    sheetId: string;
+    project: Project;
+}>;
+//# sourceMappingURL=SheetItem.d.ts.map

package/dist/panels/OutlinePanel/SheetsList/SheetItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetItem.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/OutlinePanel/SheetsList/SheetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,gDAAgD,CAAA;AAIzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;CACjB,CAoBA,CAAA"}

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

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

package/dist/panels/OutlinePanel/SheetsList/SheetsList.d.ts

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