@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/uiComponents/icons/Package.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function Package(props) {
+    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { d: "M8.339 4.5l-2.055.644 4.451 1.393v2.748l-2.966.928-2.504-.783V6.738l2.42.758 2.055-.644-4.458-1.395L4 5.858v4.463L7.768 11.5 12 10.175V5.646L8.339 4.5z", fill: "currentColor" })));
+}
+export default Package;

package/dist/uiComponents/icons/Resize.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function Resize(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default Resize;
+//# sourceMappingURL=Resize.d.ts.map

package/dist/uiComponents/icons/Resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resize.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/icons/Resize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,iBAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,qBAsBnD;AAED,eAAe,MAAM,CAAA"}

package/dist/uiComponents/icons/Resize.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+function Resize(props) {
+    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.452 3.452a2 2 0 012-2h9.096a2 2 0 012 2v9.096a2 2 0 01-2 2H3.452a2 2 0 01-2-2V3.452zm2-1h9.096a1 1 0 011 1v9.096a1 1 0 01-1 1h-5.06V8.511H2.451V3.452a1 1 0 011-1z", fill: "currentColor" }),
+        React.createElement("path", { d: "M12.501 4.09a.5.5 0 00-.5-.5H8.95a.5.5 0 100 1h1.98l-2.45 2.449a.5.5 0 10.707.707l2.315-2.315v1.627a.5.5 0 001 0V4.09z", fill: "currentColor" })));
+}
+export default Resize;

package/dist/uiComponents/icons/Trash.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function Trash(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default Trash;
+//# sourceMappingURL=Trash.d.ts.map

package/dist/uiComponents/icons/Trash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trash.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/icons/Trash.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,iBAAS,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,qBAgBlD;AAED,eAAe,KAAK,CAAA"}

package/dist/uiComponents/icons/Trash.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function Trash(props) {
+    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { d: "M6.8 11.6a.6.6 0 00.6-.6V7.4a.6.6 0 00-1.2 0V11a.6.6 0 00.6.6zm6-7.2h-2.4v-.6A1.8 1.8 0 008.6 2H7.4a1.8 1.8 0 00-1.8 1.8v.6H3.2a.6.6 0 100 1.2h.6v6.6A1.8 1.8 0 005.6 14h4.8a1.8 1.8 0 001.8-1.8V5.6h.6a.6.6 0 100-1.2zm-6-.6a.6.6 0 01.6-.6h1.2a.6.6 0 01.6.6v.6H6.8v-.6zm4.2 8.4a.6.6 0 01-.6.6H5.6a.6.6 0 01-.6-.6V5.6h6v6.6zm-1.8-.6a.6.6 0 00.6-.6V7.4a.6.6 0 00-1.2 0V11a.6.6 0 00.6.6z", fill: "currentColor" })));
+}
+export default Trash;

package/dist/uiComponents/icons/index.d.ts

@@ -0,0 +1,21 @@
+export { default as Outline } from './Outline';
+export { default as ArrowClockwise } from './ArrowClockwise';
+export { default as ArrowsOutCardinal } from './ArrowsOutCardinal';
+export { default as Camera } from './Camera';
+export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronRight } from './ChevronRight';
+export { default as ChevronLeft } from './ChevronLeft';
+export { default as Cube } from './Cube';
+export { default as CubeFull } from './CubeFull';
+export { default as CubeHalf } from './CubeHalf';
+export { default as CubeRendered } from './CubeRendered';
+export { default as Details } from './Details';
+export { default as Ellipsis } from './Ellipsis';
+export { default as GlobeSimple } from './GlobeSimple';
+export { default as Resize } from './Resize';
+export { default as Package } from './Package';
+export { default as Bell } from './Bell';
+export { default as Trash } from './Trash';
+export { default as AddImage } from './AddImage';
+export { default as EllipsisFill } from './EllipsisFill';
+//# sourceMappingURL=index.d.ts.map

package/dist/uiComponents/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAA;AACxC,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA"}

package/dist/uiComponents/icons/index.js

@@ -0,0 +1,20 @@
+export { default as Outline } from './Outline';
+export { default as ArrowClockwise } from './ArrowClockwise';
+export { default as ArrowsOutCardinal } from './ArrowsOutCardinal';
+export { default as Camera } from './Camera';
+export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronRight } from './ChevronRight';
+export { default as ChevronLeft } from './ChevronLeft';
+export { default as Cube } from './Cube';
+export { default as CubeFull } from './CubeFull';
+export { default as CubeHalf } from './CubeHalf';
+export { default as CubeRendered } from './CubeRendered';
+export { default as Details } from './Details';
+export { default as Ellipsis } from './Ellipsis';
+export { default as GlobeSimple } from './GlobeSimple';
+export { default as Resize } from './Resize';
+export { default as Package } from './Package';
+export { default as Bell } from './Bell';
+export { default as Trash } from './Trash';
+export { default as AddImage } from './AddImage';
+export { default as EllipsisFill } from './EllipsisFill';

package/dist/uiComponents/isSafari.d.ts

@@ -0,0 +1,2 @@
+export declare const isSafari: boolean;
+//# sourceMappingURL=isSafari.d.ts.map

package/dist/uiComponents/isSafari.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isSafari.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/isSafari.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,SAEuC,CAAA"}

package/dist/uiComponents/isSafari.js

@@ -0,0 +1,2 @@
+export const isSafari = typeof window !== 'undefined' &&
+    /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

package/dist/uiComponents/onPointerOutside.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Calls the callback when the mouse pointer moves outside the
+ * bounds of the node.
+ */
+export default function onPointerOutside(node: Element, threshold: number, onPointerOutside: (e: MouseEvent) => void): () => void;
+//# sourceMappingURL=onPointerOutside.d.ts.map

package/dist/uiComponents/onPointerOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onPointerOutside.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/onPointerOutside.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,cAoB1C"}

package/dist/uiComponents/onPointerOutside.js

@@ -0,0 +1,19 @@
+/**
+ * Calls the callback when the mouse pointer moves outside the
+ * bounds of the node.
+ */
+export default function onPointerOutside(node, threshold, onPointerOutside) {
+    const containerRect = node.getBoundingClientRect();
+    const onMouseMove = (e) => {
+        if (e.clientX < containerRect.left - threshold ||
+            e.clientX > containerRect.left + containerRect.width + threshold ||
+            e.clientY < containerRect.top - threshold ||
+            e.clientY > containerRect.top + containerRect.height + threshold) {
+            onPointerOutside(e);
+        }
+    };
+    window.addEventListener('mousemove', onMouseMove);
+    return () => {
+        window.removeEventListener('mousemove', onMouseMove);
+    };
+}

package/dist/uiComponents/selects/BasicSelect.d.ts

@@ -0,0 +1,15 @@
+import type { ElementType } from 'react';
+import React from 'react';
+type Option = {
+    label: string;
+    value: string;
+};
+declare const BasicSelect: React.FC<{
+    label: string | ElementType;
+    options: Array<Option>;
+    value: string | undefined;
+    defaultOption: undefined | string;
+    onChange: (newValue: string) => void;
+}>;
+export default BasicSelect;
+//# sourceMappingURL=BasicSelect.d.ts.map

package/dist/uiComponents/selects/BasicSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicSelect.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/selects/BasicSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAkBzB,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,WAAW,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACtB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,aAAa,EAAE,SAAS,GAAG,MAAM,CAAA;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC,CAgCA,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/uiComponents/selects/BasicSelect.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+const Container = styled.div `
+  display: flex;
+  flex-grow: 1;
+`;
+const Label = styled.div `
+  flex-grow: 0;
+  color: hsl(0, 0%, 80%);
+`;
+const SelectedValueLabel = styled.div `
+  flex-grow: 1;
+  padding-left: 8px;
+`;
+const BasicSelect = (props) => {
+    // const [isOpen, setIsOpen] = useState<boolean>(false)
+    const selectedValue = typeof props.value === 'string' ? props.value : props.defaultOption;
+    const selectedLabel = props.options.find((opt) => opt.value === selectedValue)?.label;
+    return (React.createElement(Container, null,
+        React.createElement(Label, null,
+            React.createElement(React.Fragment, null, props.label)),
+        React.createElement(SelectedValueLabel, null, selectedLabel)));
+};
+export default BasicSelect;

package/dist/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.d.ts

@@ -0,0 +1,16 @@
+import type { ElementType } from 'react';
+import React from 'react';
+import type { $FixMe } from '@tomorrowevening/theatre-shared/utils/types';
+type MenuItem = {
+    label: string | ElementType;
+    callback?: (e: React.MouseEvent) => void;
+    enabled?: boolean;
+};
+declare const BaseMenu: React.FC<{
+    items: MenuItem[];
+    ref?: $FixMe;
+    displayName?: string;
+    onRequestClose: () => void;
+}>;
+export default BaseMenu;
+//# sourceMappingURL=BaseMenu.d.ts.map

package/dist/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseMenu.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAiCvE,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,MAAM,GAAG,WAAW,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;CAElB,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IACvB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B,CAqBC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Item from './Item';
+import styled from 'styled-components';
+import { transparentize } from 'polished';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+const minWidth = 190;
+const SHOW_OPTIONAL_MENU_TITLE = true;
+const MenuContainer = styled.ul `
+  position: absolute;
+  min-width: ${minWidth}px;
+  z-index: 10000;
+  background: ${transparentize(0.2, '#111')};
+  backdrop-filter: blur(2px);
+  color: white;
+  list-style-type: none;
+  padding: 2px 0;
+  margin: 0;
+  border-radius: 1px;
+  cursor: default;
+  ${pointerEventsAutoInNormalMode};
+  border-radius: 3px;
+`;
+const MenuTitle = styled.div `
+  padding: 4px 10px;
+  border-bottom: 1px solid #6262626d;
+  color: #adadadb3;
+  font-size: 11px;
+  font-weight: 500;
+`;
+const BaseMenu = React.forwardRef((props, ref) => {
+    return (React.createElement(MenuContainer, { ref: ref },
+        SHOW_OPTIONAL_MENU_TITLE && props.displayName ? (React.createElement(MenuTitle, null, props.displayName)) : null,
+        props.items.map((item, i) => (React.createElement(Item, { key: `item-${i}`, label: item.label, enabled: item.enabled === false ? false : true, onClick: (e) => {
+                if (item.callback) {
+                    item.callback(e);
+                }
+                props.onRequestClose();
+            } })))));
+});
+export default BaseMenu;

package/dist/uiComponents/simpleContextMenu/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,27 @@
+import type { ElementType } from 'react';
+import React from 'react';
+export type IContextMenuItemCustomNodeRenderFn = (controls: {
+    closeMenu(): void;
+}) => React.ReactChild;
+export type IContextMenuItem = {
+    label: string | ElementType;
+    callback?: (e: React.MouseEvent) => void;
+    enabled?: boolean;
+};
+export type IContextMenuItemsValue = IContextMenuItem[] | (() => IContextMenuItem[]);
+export type ContextMenuProps = {
+    items: IContextMenuItemsValue;
+    displayName?: string;
+    clickPoint: {
+        clientX: number;
+        clientY: number;
+    };
+    onRequestClose: () => void;
+};
+/**
+ * TODO let's make sure that triggering a context menu would close
+ * the other open context menu (if one _is_ open).
+ */
+declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;
+//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/uiComponents/simpleContextMenu/ContextMenu/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/simpleContextMenu/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAkC,MAAM,OAAO,CAAA;AAatD,MAAM,MAAM,kCAAkC,GAAG,CAAC,QAAQ,EAAE;IAC1D,SAAS,IAAI,IAAI,CAAA;CAClB,KAAK,KAAK,CAAC,UAAU,CAAA;AAEtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,GAAG,WAAW,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;CAElB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAC9B,gBAAgB,EAAE,GAClB,CAAC,MAAM,gBAAgB,EAAE,CAAC,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,sBAAsB,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B,CAAA;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoF3C,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/uiComponents/simpleContextMenu/ContextMenu/ContextMenu.js

@@ -0,0 +1,87 @@
+import useBoundingClientRect from '@tomorrowevening/theatre-studio/uiComponents/useBoundingClientRect';
+import { useMemo } from 'react';
+import { useContext } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import useWindowSize from 'react-use/esm/useWindowSize';
+import { height as itemHeight } from './Item';
+import { PortalContext } from 'reakit';
+import useOnKeyDown from '@tomorrowevening/theatre-studio/uiComponents/useOnKeyDown';
+import BaseMenu from './BaseMenu';
+/**
+ * How far from the menu should the pointer travel to auto close the menu
+ */
+const pointerDistanceThreshold = 20;
+/**
+ * TODO let's make sure that triggering a context menu would close
+ * the other open context menu (if one _is_ open).
+ */
+const ContextMenu = (props) => {
+    const [container, setContainer] = useState(null);
+    const rect = useBoundingClientRect(container);
+    const windowSize = useWindowSize();
+    useLayoutEffect(() => {
+        if (!rect || !container)
+            return;
+        const preferredAnchorPoint = {
+            left: rect.width / 2,
+            // if there is a displayName, make sure to move the context menu up by one item,
+            // so that the first active item is the one the mouse is hovering over
+            top: itemHeight / 2 + (props.displayName ? itemHeight : 0),
+        };
+        const pos = {
+            left: props.clickPoint.clientX - preferredAnchorPoint.left,
+            top: props.clickPoint.clientY - preferredAnchorPoint.top,
+        };
+        if (pos.left < 0) {
+            pos.left = 0;
+        }
+        else if (pos.left + rect.width > windowSize.width) {
+            pos.left = windowSize.width - rect.width;
+        }
+        if (pos.top < 0) {
+            pos.top = 0;
+        }
+        else if (pos.top + rect.height > windowSize.height) {
+            pos.top = windowSize.height - rect.height;
+        }
+        container.style.left = pos.left + 'px';
+        container.style.top = pos.top + 'px';
+        const onMouseMove = (e) => {
+            if (e.clientX < pos.left - pointerDistanceThreshold ||
+                e.clientX > pos.left + rect.width + pointerDistanceThreshold ||
+                e.clientY < pos.top - pointerDistanceThreshold ||
+                e.clientY > pos.top + rect.height + pointerDistanceThreshold) {
+                props.onRequestClose();
+            }
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [rect, container, props.clickPoint, windowSize, props.onRequestClose]);
+    const portalLayer = useContext(PortalContext);
+    useOnKeyDown((ev) => {
+        if (ev.key === 'Escape')
+            props.onRequestClose();
+    });
+    const items = useMemo(() => {
+        const itemsArr = Array.isArray(props.items) ? props.items : props.items();
+        if (itemsArr.length > 0)
+            return itemsArr;
+        else
+            return [
+                {
+                    /**
+                     * TODO Need design for this
+                     */
+                    label: props.displayName
+                        ? `No actions for ${props.displayName}`
+                        : `No actions found`,
+                    enabled: false,
+                },
+            ];
+    }, [props.items]);
+    return createPortal(React.createElement(BaseMenu, { items: items, onRequestClose: props.onRequestClose, displayName: props.displayName, ref: setContainer }), portalLayer);
+};
+export default ContextMenu;

package/dist/uiComponents/simpleContextMenu/ContextMenu/Item.d.ts

@@ -0,0 +1,10 @@
+import type { ElementType } from 'react';
+import React from 'react';
+export declare const height = 26;
+declare const Item: React.FC<{
+    label: string | ElementType;
+    onClick: (e: React.MouseEvent) => void;
+    enabled: boolean;
+}>;
+export default Item;
+//# sourceMappingURL=Item.d.ts.map

package/dist/uiComponents/simpleContextMenu/ContextMenu/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,MAAM,KAAK,CAAA;AAgCxB,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAA;IAC3B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACtC,OAAO,EAAE,OAAO,CAAA;CACjB,CAYA,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/uiComponents/simpleContextMenu/ContextMenu/Item.js

@@ -0,0 +1,37 @@
+import noop from '@tomorrowevening/theatre-shared/utils/noop';
+import React from 'react';
+import styled from 'styled-components';
+export const height = 26;
+const ItemContainer = styled.li `
+  height: ${height}px;
+  padding: 0 12px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 400;
+  position: relative;
+  color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')};
+  cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};
+
+  &:after {
+    position: absolute;
+    inset: 2px 1px;
+    display: block;
+    content: ' ';
+    pointer-events: none;
+    z-index: -1;
+    border-radius: 3px;
+  }
+
+  &:hover:after {
+    background-color: ${(props) => props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'};
+  }
+`;
+const ItemLabel = styled.span ``;
+const Item = (props) => {
+    return (React.createElement(ItemContainer, { onClick: props.enabled ? props.onClick : noop, enabled: props.enabled, title: props.enabled ? undefined : 'Disabled' },
+        React.createElement(ItemLabel, null,
+            React.createElement(React.Fragment, null, props.label))));
+};
+export default Item;

package/dist/uiComponents/simpleContextMenu/useContextMenu.d.ts

@@ -0,0 +1,11 @@
+import type { VoidFn } from '@tomorrowevening/theatre-shared/utils/types';
+import React from 'react';
+import type { IContextMenuItemsValue, IContextMenuItem } from './ContextMenu/ContextMenu';
+import type { IRequestContextMenuOptions } from './useRequestContextMenu';
+export type { IContextMenuItemsValue, IContextMenuItem, IRequestContextMenuOptions, };
+export default function useContextMenu(target: HTMLElement | SVGElement | null, opts: IRequestContextMenuOptions & {
+    menuItems: IContextMenuItemsValue;
+    displayName?: string;
+    onOpen?: () => void;
+}): [node: React.ReactNode, close: VoidFn, isOpen: boolean];
+//# sourceMappingURL=useContextMenu.d.ts.map

package/dist/uiComponents/simpleContextMenu/useContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContextMenu.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/simpleContextMenu/useContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAA;AACvE,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAElC,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,yBAAyB,CAAA;AAIvE,YAAY,EACV,sBAAsB,EACtB,gBAAgB,EAChB,0BAA0B,GAC3B,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,EACvC,IAAI,EAAE,0BAA0B,GAAG;IACjC,SAAS,EAAE,sBAAsB,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,GACA,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CA4BzD"}

package/dist/uiComponents/simpleContextMenu/useContextMenu.js

@@ -0,0 +1,20 @@
+import React, { useContext, useEffect } from 'react';
+import ContextMenu from './ContextMenu/ContextMenu';
+import useRequestContextMenu from './useRequestContextMenu';
+import { contextMenuShownContext } from '@tomorrowevening/theatre-studio/panels/DetailPanel/DetailPanel';
+const emptyNode = React.createElement(React.Fragment, null);
+export default function useContextMenu(target, opts) {
+    const [status, close] = useRequestContextMenu(target, opts);
+    // TODO: this lock is now exported from the detail panel, do refactor it when you get the chance
+    const [, addContextMenu] = useContext(contextMenuShownContext);
+    useEffect(() => {
+        let removeContextMenu;
+        if (status.isOpen) {
+            opts.onOpen?.();
+            removeContextMenu = addContextMenu();
+        }
+        return () => removeContextMenu?.();
+    }, [status.isOpen, opts.onOpen]);
+    const node = !status.isOpen ? (emptyNode) : (React.createElement(ContextMenu, { items: opts.menuItems, displayName: opts.displayName, clickPoint: status.event, onRequestClose: close }));
+    return [node, close, status.isOpen];
+}

package/dist/uiComponents/simpleContextMenu/useRequestContextMenu.d.ts

@@ -0,0 +1,13 @@
+type IState = {
+    isOpen: true;
+    event: MouseEvent;
+} | {
+    isOpen: false;
+};
+type CloseMenuFn = () => void;
+export type IRequestContextMenuOptions = {
+    disabled?: boolean;
+};
+declare const useRequestContextMenu: (target: HTMLElement | SVGElement | null, opts: IRequestContextMenuOptions) => [state: IState, close: CloseMenuFn];
+export default useRequestContextMenu;
+//# sourceMappingURL=useRequestContextMenu.d.ts.map

package/dist/uiComponents/simpleContextMenu/useRequestContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequestContextMenu.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/simpleContextMenu/useRequestContextMenu.ts"],"names":[],"mappings":"AAGA,KAAK,MAAM,GAAG;IAAC,MAAM,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAC,GAAG;IAAC,MAAM,EAAE,KAAK,CAAA;CAAC,CAAA;AAEjE,KAAK,WAAW,GAAG,MAAM,IAAI,CAAA;AAE7B,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,qBAAqB,WACjB,WAAW,GAAG,UAAU,GAAG,IAAI,QACjC,0BAA0B,wCAuBjC,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/uiComponents/simpleContextMenu/useRequestContextMenu.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from 'react';
+const useRequestContextMenu = (target, opts) => {
+    const [state, setState] = useState({ isOpen: false });
+    const close = useCallback(() => setState({ isOpen: false }), []);
+    useEffect(() => {
+        if (!target || opts.disabled === true) {
+            setState({ isOpen: false });
+            return;
+        }
+        const onTrigger = (event) => {
+            setState({ isOpen: true, event });
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        target.addEventListener('contextmenu', onTrigger);
+        return () => {
+            target.removeEventListener('contextmenu', onTrigger);
+        };
+    }, [target, opts.disabled]);
+    return [state, close];
+};
+export default useRequestContextMenu;

package/dist/uiComponents/toolbar/ToolbarDropdownSelect.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const ToolbarDropdownSelect: React.FC<{
+    value: string;
+    options: Array<{
+        label: string;
+        value: string;
+        icon: React.ReactElement;
+    }>;
+    onChange: (value: string) => void;
+    label: (cur: {
+        label: string;
+        value: string;
+    }) => string;
+}>;
+export default ToolbarDropdownSelect;
+//# sourceMappingURL=ToolbarDropdownSelect.d.ts.map

package/dist/uiComponents/toolbar/ToolbarDropdownSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDropdownSelect.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/toolbar/ToolbarDropdownSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAA;KAAC,CAAC,CAAA;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,CAAC,GAAG,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,KAAK,MAAM,CAAA;CACvD,CAEA,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/uiComponents/toolbar/ToolbarDropdownSelect.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import styled from 'styled-components';
+const Container = styled.div ``;
+const ToolbarDropdownSelect = (props) => {
+    return React.createElement(Container, null);
+};
+export default ToolbarDropdownSelect;

package/dist/uiComponents/toolbar/ToolbarIconButton.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"button", any, {}, never>;
+declare const ToolbarIconButton: typeof Container;
+export default ToolbarIconButton;
+//# sourceMappingURL=ToolbarIconButton.d.ts.map

package/dist/uiComponents/toolbar/ToolbarIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/toolbar/ToolbarIconButton.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,uEA0DrB,CAAA;AAED,QAAA,MAAM,iBAAiB,EAAE,OAAO,SAcZ,CAAA;AAEpB,eAAe,iBAAiB,CAAA"}

package/dist/uiComponents/toolbar/ToolbarIconButton.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import React from 'react';
+import useTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/useTooltip';
+import { mergeRefs } from 'react-merge-refs';
+import MinimalTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/MinimalTooltip';
+import ToolbarSwitchSelectContainer from './ToolbarSwitchSelectContainer';
+export const Container = styled.button `
+  ${pointerEventsAutoInNormalMode};
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  width: 32px;
+  height: 32px;
+  outline: none;
+
+  color: #a8a8a9;
+
+  background: rgba(40, 43, 47, 0.8);
+  backdrop-filter: blur(14px);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
+
+  svg {
+    display: block;
+  }
+
+  &:hover {
+    background: rgba(59, 63, 69, 0.8);
+  }
+
+  &:active {
+    background: rgba(82, 88, 96, 0.8);
+  }
+
+  &.selected {
+    color: rgba(255, 255, 255, 0.8);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
+  }
+
+  // Don't blur if in a button group, because it already blurs. We need to blur
+  // on the group-level, otherwise we get seams.
+  ${ToolbarSwitchSelectContainer} > & {
+    backdrop-filter: none;
+    filter: none;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: 2px;
+      border-bottom-left-radius: 2px;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 2px;
+      border-top-right-radius: 2px;
+    }
+  }
+
+  @supports not (backdrop-filter: blur()) {
+    background: rgba(40, 43, 47, 0.95);
+  }
+`;
+const ToolbarIconButton = React.forwardRef(({ title, ...props }, ref) => {
+    const [tooltip, localRef] = useTooltip({ enabled: typeof title === 'string' }, () => React.createElement(MinimalTooltip, null, title));
+    return (React.createElement(React.Fragment, null,
+        tooltip,
+        React.createElement(Container, { ref: mergeRefs([localRef, ref]), ...props }),
+        ' '));
+});
+export default ToolbarIconButton;

package/dist/uiComponents/toolbar/ToolbarSwitchSelect.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconType } from 'react-icons';
+interface Props<Option> {
+    value: Option;
+    onChange: (value: Option) => void;
+    options: {
+        value: Option;
+        label: string;
+        icon: ReactElement<IconType>;
+    }[];
+}
+declare const ToolbarSwitchSelect: <Option extends string | number>({ value: valueOfSwitch, onChange, options, }: Props<Option>) => React.JSX.Element;
+export default ToolbarSwitchSelect;
+//# sourceMappingURL=ToolbarSwitchSelect.d.ts.map

package/dist/uiComponents/toolbar/ToolbarSwitchSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSwitchSelect.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAiCzC,UAAU,KAAK,CAAC,MAAM;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;KAC7B,EAAE,CAAA;CACJ;AAED,QAAA,MAAM,mBAAmB,oHAmBxB,CAAA;AAED,eAAe,mBAAmB,CAAA"}