@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/UI/UINonSSRBits.js

@@ -0,0 +1,60 @@
+import UIRoot from '@tomorrowevening/theatre-studio/UIRoot/UIRoot';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { getMounter } from '@tomorrowevening/theatre-studio/utils/renderInPortalInContext';
+import { withStyledShadow } from '@tomorrowevening/theatre-studio/css';
+import ExtensionToolbar from '@tomorrowevening/theatre-studio/toolbars/ExtensionToolbar/ExtensionToolbar';
+export default class UINonSSRBits {
+    containerEl = document.createElement('div');
+    _renderTimeout = undefined;
+    _documentBodyUIIsRenderedIn = undefined;
+    containerShadow;
+    constructor() {
+        // @todo we can't bootstrap Theatre.js (as in, to design Theatre.js using theatre), if we rely on IDed elements
+        this.containerEl.id = 'theatrejs-studio-root';
+        this.containerEl.style.cssText = `
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 100;
+    `;
+        const createShadowRoot = () => {
+            if (window.__IS_VISUAL_REGRESSION_TESTING === true) {
+                const fauxRoot = document.createElement('div');
+                fauxRoot.id = 'theatrejs-faux-shadow-root';
+                document.body.appendChild(fauxRoot);
+                return fauxRoot;
+            }
+            else {
+                return this.containerEl.attachShadow({
+                    mode: 'open',
+                    // To see why I had to cast this value to HTMLElement, take a look at its
+                    // references of this prop. There are a few functions that actually work
+                    // with a ShadowRoot but are typed to accept HTMLElement
+                });
+            }
+        };
+        this.containerShadow = createShadowRoot();
+    }
+    render() {
+        const renderCallback = () => {
+            if (!document.body) {
+                this._renderTimeout = setTimeout(renderCallback, 5);
+                return;
+            }
+            this._renderTimeout = undefined;
+            this._documentBodyUIIsRenderedIn = document.body;
+            this._documentBodyUIIsRenderedIn.appendChild(this.containerEl);
+            ReactDOM.createRoot(this.containerShadow).render(React.createElement(UIRoot, { containerShadow: this.containerShadow }));
+        };
+        this._renderTimeout = setTimeout(renderCallback, 10);
+    }
+    renderToolset(toolsetId, htmlNode) {
+        const s = getMounter();
+        s.mountOrRender(withStyledShadow(ExtensionToolbar), { toolbarId: toolsetId }, htmlNode);
+        return s.unmount;
+    }
+}

package/dist/UIRoot/PanelsRoot.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const PanelsRoot: React.VFC;
+export default PanelsRoot;
+//# sourceMappingURL=PanelsRoot.d.ts.map

package/dist/UIRoot/PanelsRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelsRoot.d.ts","sourceRoot":"","sources":["../../../../../studio/src/UIRoot/PanelsRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,GAmBvB,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/UIRoot/PanelsRoot.js

@@ -0,0 +1,19 @@
+import OutlinePanel from '@tomorrowevening/theatre-studio/panels/OutlinePanel/OutlinePanel';
+import DetailPanel from '@tomorrowevening/theatre-studio/panels/DetailPanel/DetailPanel';
+import React from 'react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { useVal } from '@tomorrowevening/theatre-react';
+import ExtensionPaneWrapper from '@tomorrowevening/theatre-studio/panels/BasePanel/ExtensionPaneWrapper';
+import SequenceEditorPanel from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/SequenceEditorPanel';
+const PanelsRoot = () => {
+    const panes = useVal(getStudio().paneManager.allPanesD);
+    const paneEls = Object.entries(panes).map(([instanceId, paneInstance]) => {
+        return (React.createElement(ExtensionPaneWrapper, { key: `pane-${instanceId}`, paneInstance: paneInstance }));
+    });
+    return (React.createElement(React.Fragment, null,
+        paneEls,
+        React.createElement(OutlinePanel, null),
+        React.createElement(DetailPanel, null),
+        React.createElement(SequenceEditorPanel, null)));
+};
+export default PanelsRoot;

package/dist/UIRoot/PointerCapturing.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+/** See {@link PointerCapturing} */
+export type CapturedPointer = {
+    release(): void;
+    /** Double check that you still have the current capture and weren't forcibly released */
+    isCapturing(): boolean;
+};
+/**
+ * Introduced `PointerCapturing` for addressing issues with over-shooting easing curves closing the popup preset modal.
+ *
+ * Goal is to be able to determine if the pointer is being captured somewhere in studio (e.g. dragging).
+ *
+ * Some other ideas we considered before going with the PointerCapturing provider and context
+ * - provider: `onPointerCaptureChanged`
+ * - `onDragging={isMouseActive = true}` / `onMouseActive={isMouseActive = true}`
+ * - dragging tracked application wide (ephemeral state) in popover
+ *
+ * Caveats: I wonder if there's a shared abstraction we should use for "releasing" e.g. unsubscribe / untap in rxjs / tapable patterns.
+ */
+export type PointerCapturing = {
+    isPointerBeingCaptured(): boolean;
+    capturePointer(debugReason: string): CapturedPointer;
+};
+/**
+ * See {@link PointerCapturing}.
+ *
+ * This should likely live towards the root of the application.
+ *
+ * Uncertain about whether nesting pointer capturing providers should be cognizant of each other.
+ */
+export declare function ProvidePointerCapturing(props: {
+    children?: React.ReactNode;
+}): React.ReactElement;
+/**
+ * Used to ensure we're locking drag and pointer events to a single place in the UI logic.
+ * Without this, we can much more easily accidentally create multiple drag handlers on
+ * child / parent dom elements which both `useDrag`, for example.
+ *
+ * An example of this helping us was when we first started building the Curve editor popover.
+ * In that activity, we were experiencing a weird issue where the popover would unmount while
+ * dragging away from the popover, and the drag end listener would not be called.
+ * By having "Pointer Capturing" we're able to identify that the pointer was not being properly
+ * released, because there would be a lock contention when trying to drag something else.
+ */
+export declare function usePointerCapturing(forDebugName: string): PointerCapturing;
+//# sourceMappingURL=PointerCapturing.d.ts.map

package/dist/UIRoot/PointerCapturing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerCapturing.d.ts","sourceRoot":"","sources":["../../../../../studio/src/UIRoot/PointerCapturing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAI3D,mCAAmC;AACnC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,IAAI,IAAI,CAAA;IACf,yFAAyF;IACzF,WAAW,IAAI,OAAO,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sBAAsB,IAAI,OAAO,CAAA;IACjC,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,eAAe,CAAA;CACrD,CAAA;AAgFD;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,YAAY,CAWrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,gBAAgB,CAc1E"}

package/dist/UIRoot/PointerCapturing.js

@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useMemo } from 'react';
+import { useLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
+function _usePointerCapturingContext() {
+    const logger = useLogger('PointerCapturing');
+    let currentCaptureRef = React.useRef(null);
+    const isPointerBeingCaptured = () => currentCaptureRef.current != null;
+    return (forDebugName) => {
+        /** keep track of the captures being made by this user of {@link usePointerCapturing} */
+        let localCapture;
+        const updateCapture = (to) => {
+            localCapture = to;
+            currentCaptureRef.current = to;
+            return to;
+        };
+        const capturing = {
+            capturePointer(reason) {
+                logger._debug('Capturing pointer', { forDebugName, reason });
+                if (currentCaptureRef.current != null) {
+                    throw new Error(`"${forDebugName}" attempted capturing pointer for "${reason}" while already captured by "${currentCaptureRef.current.debugOwnerName}" for "${currentCaptureRef.current.debugReason}"`);
+                }
+                const releaseCapture = updateCapture({
+                    debugOwnerName: forDebugName,
+                    debugReason: reason,
+                });
+                return {
+                    isCapturing() {
+                        return releaseCapture === currentCaptureRef.current;
+                    },
+                    release() {
+                        if (releaseCapture === currentCaptureRef.current) {
+                            logger._debug('Releasing pointer', {
+                                forDebugName,
+                                reason,
+                            });
+                            updateCapture(null);
+                            return true;
+                        }
+                        return false;
+                    },
+                };
+            },
+            isPointerBeingCaptured,
+        };
+        return {
+            capturing,
+            forceRelease() {
+                if (localCapture && currentCaptureRef.current === localCapture) {
+                    logger._debug('Force releasing pointer', { localCapture });
+                    updateCapture(null);
+                }
+            },
+        };
+    };
+}
+const PointerCapturingContext = React.createContext(null);
+const ProviderChildrenMemo = React.memo(({ children }) => React.createElement(React.Fragment, null, children));
+/**
+ * See {@link PointerCapturing}.
+ *
+ * This should likely live towards the root of the application.
+ *
+ * Uncertain about whether nesting pointer capturing providers should be cognizant of each other.
+ */
+export function ProvidePointerCapturing(props) {
+    const ctx = _usePointerCapturingContext();
+    // Consider whether we want to manage multiple providers nested (e.g. embedding Theatre.js in Theatre.js or studio into whatever else)
+    // This may not be necessary to consider due to the design of allowing a default value for contexts...
+    // 1/10 importance to think about, now.
+    // const parentCapturing = useContext(PointerCapturingContext)
+    return (React.createElement(PointerCapturingContext.Provider, { value: ctx },
+        React.createElement(ProviderChildrenMemo, { children: props.children })));
+}
+/**
+ * Used to ensure we're locking drag and pointer events to a single place in the UI logic.
+ * Without this, we can much more easily accidentally create multiple drag handlers on
+ * child / parent dom elements which both `useDrag`, for example.
+ *
+ * An example of this helping us was when we first started building the Curve editor popover.
+ * In that activity, we were experiencing a weird issue where the popover would unmount while
+ * dragging away from the popover, and the drag end listener would not be called.
+ * By having "Pointer Capturing" we're able to identify that the pointer was not being properly
+ * released, because there would be a lock contention when trying to drag something else.
+ */
+export function usePointerCapturing(forDebugName) {
+    const pointerCapturingFn = useContext(PointerCapturingContext);
+    const control = useMemo(() => {
+        return pointerCapturingFn(forDebugName);
+    }, [forDebugName, pointerCapturingFn]);
+    useEffect(() => {
+        return () => {
+            // force release on unmount
+            control.forceRelease();
+        };
+    }, [control]);
+    return control.capturing;
+}

package/dist/UIRoot/ProvideTheme.d.ts

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

package/dist/UIRoot/ProvideTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvideTheme.d.ts","sourceRoot":"","sources":["../../../../../studio/src/UIRoot/ProvideTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAExD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/UIRoot/ProvideTheme.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+const Container = styled.div `
+  --colors-panel-1: red;
+`;
+const ProvideTheme = (props) => {
+    return React.createElement(Container, null, props.children);
+};
+export default ProvideTheme;

package/dist/UIRoot/UIRoot.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function UIRoot(props: {
+    containerShadow: ShadowRoot & HTMLElement;
+}): React.JSX.Element | null;
+//# sourceMappingURL=UIRoot.d.ts.map

package/dist/UIRoot/UIRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIRoot.d.ts","sourceRoot":"","sources":["../../../../../studio/src/UIRoot/UIRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,MAAM,OAAO,CAAA;AA6CtC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE;IACpC,eAAe,EAAE,UAAU,GAAG,WAAW,CAAA;CAC1C,4BAkEA"}

package/dist/UIRoot/UIRoot.js

@@ -0,0 +1,79 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React, { useEffect } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import PanelsRoot from './PanelsRoot';
+import GlobalToolbar from '@tomorrowevening/theatre-studio/toolbars/GlobalToolbar';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { PortalContext } from 'reakit';
+import useKeyboardShortcuts from './useKeyboardShortcuts';
+import PointerEventsHandler from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import TooltipContext from '@tomorrowevening/theatre-studio/uiComponents/Popover/TooltipContext';
+import { ProvidePointerCapturing } from './PointerCapturing';
+import { MountAll } from '@tomorrowevening/theatre-studio/utils/renderInPortalInContext';
+import { PortalLayer, ProvideStyles } from '@tomorrowevening/theatre-studio/css';
+import { createTheatreInternalLogger, TheatreLoggerLevel, } from '@tomorrowevening/theatre-shared/logger';
+import { ProvideLogger } from '@tomorrowevening/theatre-studio/uiComponents/useLogger';
+import { Notifier } from '@tomorrowevening/theatre-studio/notify';
+const MakeRootHostContainStatic = typeof window !== 'undefined'
+    ? createGlobalStyle `
+  :host {
+    contain: strict;
+  }
+`
+    : {};
+const Container = styled(PointerEventsHandler) `
+  z-index: 50;
+  position: fixed;
+  inset: 0;
+
+  &.invisible {
+    pointer-events: none !important;
+    opacity: 0;
+    transform: translateX(1000000px);
+  }
+`;
+const INTERNAL_LOGGING = /Playground.+Theatre\.js/.test((typeof document !== 'undefined' ? document?.title : null) ?? '');
+export default function UIRoot(props) {
+    const studio = getStudio();
+    const [portalLayerRef, portalLayer] = useRefAndState(undefined);
+    const uiRootLogger = createTheatreInternalLogger();
+    uiRootLogger.configureLogging({
+        min: TheatreLoggerLevel.DEBUG,
+        dev: INTERNAL_LOGGING,
+        internal: INTERNAL_LOGGING,
+    });
+    const logger = uiRootLogger.getLogger().named('Theatre.js UIRoot');
+    useKeyboardShortcuts();
+    const visiblityState = useVal(studio.atomP.ahistoric.visibilityState);
+    useEffect(() => {
+        if (visiblityState === 'everythingIsHidden') {
+            console.warn(`Theatre.js Studio is hidden. Use the keyboard shortcut 'alt + \\' to restore the studio, or call studio.ui.restore().`);
+        }
+        return () => { };
+    }, [visiblityState]);
+    const inside = usePrism(() => {
+        const visiblityState = val(studio.atomP.ahistoric.visibilityState);
+        const initialised = val(studio.atomP.ephemeral.initialised);
+        return !initialised ? null : (React.createElement(ProvideLogger, { logger: logger },
+            React.createElement(TooltipContext, null,
+                React.createElement(ProvidePointerCapturing, null,
+                    React.createElement(MountExtensionComponents, null),
+                    React.createElement(PortalContext.Provider, { value: portalLayer },
+                        React.createElement(ProvideStyles, { target: window.__IS_VISUAL_REGRESSION_TESTING === true
+                                ? undefined
+                                : props.containerShadow },
+                            React.createElement(React.Fragment, null,
+                                React.createElement(MakeRootHostContainStatic, null),
+                                React.createElement(Container, { className: visiblityState === 'everythingIsHidden' ? 'invisible' : '' },
+                                    React.createElement(PortalLayer, { ref: portalLayerRef }),
+                                    React.createElement(GlobalToolbar, null),
+                                    React.createElement(PanelsRoot, null),
+                                    React.createElement(Notifier, null)))))))));
+    }, [studio, portalLayerRef, portalLayer]);
+    return inside;
+}
+const MountExtensionComponents = () => {
+    return React.createElement(MountAll, null);
+};

package/dist/UIRoot/useKeyboardShortcuts.d.ts

@@ -0,0 +1,7 @@
+import type { Prism } from '@tomorrowevening/theatre-dataverse';
+import type Sequence from '@tomorrowevening/theatre-core/sequences/Sequence';
+export declare function __experimental_disblePlayPauseKeyboardShortcut(): void;
+export declare function __experimental_enablePlayPauseKeyboardShortcut(): void;
+export default function useKeyboardShortcuts(): void;
+export declare const getIsPlayheadAttachedToFocusRange: (k: Sequence) => Prism<boolean>;
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

package/dist/UIRoot/useKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../../studio/src/UIRoot/useKeyboardShortcuts.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,KAAK,QAAQ,MAAM,kDAAkD,CAAA;AAI5E,wBAAgB,8CAA8C,SAE7D;AAED,wBAAgB,8CAA8C,SAE7D;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,SA6I3C;AAmBD,eAAO,MAAM,iCAAiC,iCAuB7C,CAAA"}

package/dist/UIRoot/useKeyboardShortcuts.js

@@ -0,0 +1,158 @@
+import { useEffect } from 'react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { cmdIsDown } from '@tomorrowevening/theatre-studio/utils/keyboardUtils';
+import { getSelectedSequence } from '@tomorrowevening/theatre-studio/selectors';
+import { Atom, prism, val } from '@tomorrowevening/theatre-dataverse';
+import memoizeFn from '@tomorrowevening/theatre-shared/utils/memoizeFn';
+let playPauseKeyboardShortcutIsEnabled = true;
+export function __experimental_disblePlayPauseKeyboardShortcut() {
+    playPauseKeyboardShortcutIsEnabled = false;
+}
+export function __experimental_enablePlayPauseKeyboardShortcut() {
+    playPauseKeyboardShortcutIsEnabled = true;
+}
+export default function useKeyboardShortcuts() {
+    const studio = getStudio();
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            const target = e.composedPath()[0];
+            if (target &&
+                (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {
+                return;
+            }
+            if (e.key === 'z' || e.key === 'Z' || e.code === 'KeyZ') {
+                if (cmdIsDown(e)) {
+                    if (e.shiftKey === true) {
+                        studio.redo();
+                    }
+                    else {
+                        studio.undo();
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            else if (e.code === 'Space' &&
+                !e.shiftKey &&
+                !e.metaKey &&
+                !e.altKey &&
+                !e.ctrlKey) {
+                if (!playPauseKeyboardShortcutIsEnabled)
+                    return;
+                // Control the playback using the `Space` key
+                const seq = getSelectedSequence();
+                if (seq) {
+                    if (seq.playing) {
+                        seq.pause();
+                    }
+                    else {
+                        /*
+                         * The sequence will be played in its whole length unless all of the
+                         * following conditions are met:
+                         *  1. the focus range is set and enabled
+                         *  2. the playback starts within the focus range.
+                         */
+                        const { projectId, sheetId } = seq.address;
+                        /*
+                         * The value of this prism is an array that contains the
+                         * range of the playback (start and end), and a boolean that is
+                         * `true` if the playback should be played within that range.
+                         */
+                        const controlledPlaybackStateD = prism(() => {
+                            const focusRange = val(getStudio().atomP.ahistoric.projects.stateByProjectId[projectId].stateBySheetId[sheetId].sequence.focusRange);
+                            // Determines whether the playback should be played
+                            // within the focus range.
+                            const shouldFollowFocusRange = prism.memo('shouldFollowFocusRange', () => {
+                                const posBeforePlay = seq.position;
+                                if (focusRange) {
+                                    const withinRange = posBeforePlay >= focusRange.range.start &&
+                                        posBeforePlay <= focusRange.range.end;
+                                    if (focusRange.enabled) {
+                                        if (withinRange) {
+                                            return true;
+                                        }
+                                        else {
+                                            return false;
+                                        }
+                                    }
+                                    else {
+                                        return true;
+                                    }
+                                }
+                                else {
+                                    return true;
+                                }
+                            }, []);
+                            if (shouldFollowFocusRange &&
+                                focusRange &&
+                                focusRange.enabled) {
+                                return {
+                                    range: [focusRange.range.start, focusRange.range.end],
+                                    isFollowingARange: true,
+                                };
+                            }
+                            else {
+                                const sequenceLength = val(seq.pointer.length);
+                                return { range: [0, sequenceLength], isFollowingARange: false };
+                            }
+                        });
+                        const playbackPromise = seq.playDynamicRange(prism(() => val(controlledPlaybackStateD).range), getStudio().ticker);
+                        const playbackStateBox = getPlaybackStateBox(seq);
+                        void playbackPromise.finally(() => {
+                            playbackStateBox.set(undefined);
+                        });
+                        playbackStateBox.set(controlledPlaybackStateD);
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            // alt + \
+            else if (e.altKey &&
+                (e.key === '\\' || e.code === 'Backslash' || e.code === 'IntlBackslash')) {
+                studio.transaction(({ stateEditors, drafts }) => {
+                    stateEditors.studio.ahistoric.setVisibilityState(drafts.ahistoric.visibilityState === 'everythingIsHidden'
+                        ? 'everythingIsVisible'
+                        : 'everythingIsHidden');
+                });
+            }
+            else {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+}
+const getPlaybackStateBox = memoizeFn((sequence) => {
+    const box = new Atom(undefined);
+    return box;
+});
+/*
+ * A memoized function that returns a prism with a boolean value.
+ * This value is set to `true` if:
+ * 1. the playback is playing and using the focus range instead of the whole sequence
+ * 2. the playback is stopped, but would use the focus range if it were started.
+ */
+export const getIsPlayheadAttachedToFocusRange = memoizeFn((sequence) => prism(() => {
+    const controlledPlaybackState = getPlaybackStateBox(sequence).prism.getValue();
+    if (controlledPlaybackState) {
+        return controlledPlaybackState.getValue().isFollowingARange;
+    }
+    else {
+        const { projectId, sheetId } = sequence.address;
+        const focusRange = val(getStudio().atomP.ahistoric.projects.stateByProjectId[projectId]
+            .stateBySheetId[sheetId].sequence.focusRange);
+        if (!focusRange || !focusRange.enabled)
+            return false;
+        const pos = val(sequence.pointer.position);
+        const withinRange = pos >= focusRange.range.start && pos <= focusRange.range.end;
+        return withinRange;
+    }
+}));

package/dist/checkForUpdates.d.ts

@@ -0,0 +1,2 @@
+export default function checkForUpdates(): Promise<void>;
+//# sourceMappingURL=checkForUpdates.d.ts.map

package/dist/checkForUpdates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkForUpdates.d.ts","sourceRoot":"","sources":["../../../../studio/src/checkForUpdates.ts"],"names":[],"mappings":"AA6BA,wBAA8B,eAAe,kBA0D5C"}

package/dist/checkForUpdates.js

@@ -0,0 +1,86 @@
+import { pointerToPrism, val } from '@tomorrowevening/theatre-dataverse';
+import { defer } from '@tomorrowevening/theatre-shared/utils/defer';
+import getStudio from './getStudio';
+const UPDATE_CHECK_INTERVAL = 30 * 60 * 1000; // check for updates every 30 minutes
+const TIME_TO_WAIT_ON_ERROR = 1000 * 60 * 60; // an hour
+/**
+ * Returns a promise that will resolve when the UI is visible. If the UI is hidden, it'll
+ * wait for it to become visible.
+ */
+async function waitTilUIIsVisible() {
+    const visibilityStatePt = getStudio().atomP.ahistoric.visibilityState;
+    if (val(visibilityStatePt) === 'everythingIsVisible')
+        return;
+    const deferred = defer();
+    const unsub = pointerToPrism(visibilityStatePt).onStale(() => {
+        const newVal = val(visibilityStatePt);
+        if (newVal === 'everythingIsVisible') {
+            unsub();
+            deferred.resolve(undefined);
+        }
+    });
+    return deferred.promise;
+}
+export default async function checkForUpdates() {
+    if (process.env.BUILT_FOR_PLAYGROUND === 'true') {
+        // Build for playground. Skipping update check
+        return;
+    }
+    if (process.env.THEATRE_VERSION?.match(/COMPAT/)) {
+        // Built for compat tests. Skipping update check
+        return;
+    }
+    // let's wait a bit in case the user has called for the UI to be hidden.
+    await wait(500);
+    await waitTilUIIsVisible();
+    while (true) {
+        const state = val(getStudio().atomP.ahistoric.updateChecker);
+        if (state) {
+            if (state.result !== 'error') {
+                const lastChecked = state.lastChecked;
+                const now = Date.now();
+                const timeElapsedSinceLastCheckedForUpdate = Math.abs(now - lastChecked);
+                // doing Math.max in case the clock has shifted
+                if (timeElapsedSinceLastCheckedForUpdate < UPDATE_CHECK_INTERVAL) {
+                    await wait(UPDATE_CHECK_INTERVAL - timeElapsedSinceLastCheckedForUpdate);
+                }
+            }
+        }
+        try {
+            const response = await fetch(new Request(`https://updates.theatrejs.com/updates/${process.env.THEATRE_VERSION}`));
+            if (response.ok) {
+                const json = await response.json();
+                if (!isValidUpdateCheckerResponse(json)) {
+                    throw new Error(`Bad response`);
+                }
+                getStudio().transaction(({ drafts }) => {
+                    drafts.ahistoric.updateChecker = {
+                        lastChecked: Date.now(),
+                        result: { ...json },
+                    };
+                });
+                await wait(1000);
+            }
+            else {
+                throw new Error(`HTTP Error ${response.statusText}`);
+            }
+        }
+        catch (error) {
+            // TODO log an error here
+            await wait(TIME_TO_WAIT_ON_ERROR);
+        }
+    }
+}
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function isValidUpdateCheckerResponse(json) {
+    if (typeof json !== 'object')
+        return false;
+    const obj = json;
+    if (typeof obj['hasUpdates'] !== 'boolean')
+        return false;
+    // could use a runtime type checker but not important yet
+    return ((obj.hasUpdates === true &&
+        typeof obj.newVersion === 'string' &&
+        typeof obj.releasePage === 'string') ||
+        obj.hasUpdates === false);
+}

package/dist/css.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * This CSS string is used to correctly set pointer-events on an element
+ * when the pointer is dragging something.
+ * Naming explanation: "NormalMode" as opposed to dragging mode.
+ *
+ * @see PointerEventsHandler - the place that sets `.normal` on #pointer-root
+ */
+export declare const pointerEventsAutoInNormalMode: import("styled-components").FlattenSimpleInterpolation;
+export declare const theme: {
+    panel: {
+        bg: string;
+        head: {
+            title: {
+                color: string;
+            };
+            punctuation: {
+                color: string;
+            };
+        };
+        body: {
+            compoudThing: {
+                label: {
+                    readonly color: string;
+                };
+            };
+        };
+    };
+};
+export declare const panelUtils: {
+    panelBorder: string;
+};
+export declare const PortalLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProvideStyles: React.FC<{
+    target: undefined | HTMLElement;
+    children: React.ReactNode;
+}>;
+export declare function withStyledShadow<Props extends {}>(Comp: React.ComponentType<Props>): React.ComponentType<Props>;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../studio/src/css.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B,wDAOzC,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;CAqBjB,CAAA;AAED,eAAO,MAAM,UAAU;;CAEtB,CAAA;AAuBD,eAAO,MAAM,WAAW,oEAQvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,MAAM,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CASA,CAAA;AAED,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,EAAE,EAC/C,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,GAC/B,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAM5B"}