@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/uiComponents/toolbar/ToolbarSwitchSelect.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from 'reakit';
+import ButtonImpl from './ToolbarIconButton';
+import Container from './ToolbarSwitchSelectContainer';
+function OptionButton({ value, label, icon, onClick, isSelected, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonImpl, { forwardedAs: Button, className: isSelected ? 'selected' : undefined, "aria-label": label, onClick: onClick, title: label }, icon)));
+}
+const ToolbarSwitchSelect = ({ value: valueOfSwitch, onChange, options, }) => {
+    return (React.createElement(Container, null, options.map(({ label, icon, value: optionValue }) => (React.createElement(OptionButton, { key: optionValue, value: optionValue, isSelected: valueOfSwitch === optionValue, label: label, icon: icon, onClick: () => onChange(optionValue) })))));
+};
+export default ToolbarSwitchSelect;

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

@@ -0,0 +1,3 @@
+declare const Container: import("styled-components").StyledComponent<import("reakit-system/ts/createComponent").Component<"div", import("reakit").RoleOptions>, any, {}, never>;
+export default Container;
+//# sourceMappingURL=ToolbarSwitchSelectContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSwitchSelectContainer.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,SAAS,wJAKd,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/uiComponents/toolbar/ToolbarSwitchSelectContainer.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Group } from 'reakit';
+const Container = styled(Group) `
+  display: flex;
+  height: fit-content;
+  backdrop-filter: blur(14px);
+  border-radius: 2px;
+`;
+export default Container;

package/dist/uiComponents/useBoundingClientRect.d.ts

@@ -0,0 +1,2 @@
+export default function useBoundingClientRect(node: Element | null): null | DOMRect;
+//# sourceMappingURL=useBoundingClientRect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBoundingClientRect.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useBoundingClientRect.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAC3C,IAAI,EAAE,OAAO,GAAG,IAAI,GACnB,IAAI,GAAG,OAAO,CAchB"}

package/dist/uiComponents/useBoundingClientRect.js

@@ -0,0 +1,13 @@
+import { useLayoutEffect, useState } from 'react';
+export default function useBoundingClientRect(node) {
+    const [bounds, set] = useState(null);
+    useLayoutEffect(() => {
+        if (node) {
+            set(node.getBoundingClientRect());
+        }
+        return () => {
+            set(null);
+        };
+    }, [node]);
+    return bounds;
+}

package/dist/uiComponents/useDebugRefreshEvery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Little utility hook that refreshes a react element every `ms` milliseconds. Use
+ * it to debug whether the props of the element, or the return values of its hooks
+ * are getting properly updated.
+ *
+ * @param ms - interval in milliseconds
+ */
+export default function useDebugRefreshEvery(ms?: number): void;
+//# sourceMappingURL=useDebugRefreshEvery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebugRefreshEvery.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useDebugRefreshEvery.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,GAAE,MAAY,QAY5D"}

package/dist/uiComponents/useDebugRefreshEvery.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+/**
+ * Little utility hook that refreshes a react element every `ms` milliseconds. Use
+ * it to debug whether the props of the element, or the return values of its hooks
+ * are getting properly updated.
+ *
+ * @param ms - interval in milliseconds
+ */
+export default function useDebugRefreshEvery(ms = 500) {
+    const [_, setState] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setState((i) => i + 1);
+        }, ms);
+        return () => {
+            clearInterval(interval);
+        };
+    }, []);
+}

package/dist/uiComponents/useDrag.d.ts

@@ -0,0 +1,76 @@
+export declare enum MouseButton {
+    Left = 0,
+    Middle = 1
+}
+/**
+ * dx, dy: delta x/y from the start of the drag
+ *
+ * Total movement since the start of the drag. This is commonly used with something like "drag keyframe" or "drag handle",
+ * where you might be dragging an item around in the UI.
+ * @param totalDragDeltaX - x moved total
+ * @param totalDragDeltaY - y moved total
+ *
+ * Movement from the last event / on drag call. This is commonly used with something like "prop nudge".
+ * @param dxFromLastEvent - x moved since last event
+ * @param dyFromLastEvent - y moved since last event
+ */
+type OnDragCallback = (totalDragDeltaX: number, totalDragDeltaY: number, event: MouseEvent, dxFromLastEvent: number, dyFromLastEvent: number) => void;
+type OnClickCallback = (mouseUpEvent: MouseEvent) => void;
+type OnDragEndCallback = (dragHappened: boolean, event?: MouseEvent) => void;
+export type UseDragOpts = {
+    /**
+     * Provide a name for the thing wanting to use the drag helper.
+     * This can show up in various errors and potential debug logs to help narrow down.
+     */
+    debugName: string;
+    /**
+     * Setting it to true will disable the listeners.
+     */
+    disabled?: boolean;
+    /**
+     * Setting it to true will allow the mouse down events to propagate up
+     */
+    dontBlockMouseDown?: boolean;
+    /**
+     * Tells the browser to take control of the mouse pointer so that
+     * the user can drag endlessly in any direction without hitting the
+     * side of their screen.
+     *
+     * Note: that if we detect that the browser is
+     * safari then pointer lock is not used because the pointer lock
+     * banner annoyingly shifts the entire page down.
+     *
+     * ref: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
+     */
+    shouldPointerLock?: boolean;
+    /**
+     * The css cursor property during the gesture will be locked to this value
+     */
+    lockCSSCursorTo?: string;
+    /**
+     * Called at the start of the gesture. Mind you, that this would be called, even
+     * if the user is just clicking (and not dragging). However, if the gesture turns
+     * out to be a click, then `onDragEnd(false)` will be called. Otherwise,
+     * a series of `onDrag(dx, dy, event)` events will be called, and the
+     * gesture will end with `onDragEnd(true)`.
+     *
+     *
+     * @returns
+     * onDragStart can be undefined, in which case, we always handle useDrag,
+     * but when defined, we can allow the handler to return false to indicate ignore this dragging
+     */
+    onDragStart: (event: MouseEvent) => false | {
+        /**
+         * Called at the end of the drag gesture.
+         * `dragHappened` will be `true` if the user actually moved the pointer
+         * (if onDrag isn't called, then this will be false becuase the user hasn't moved the pointer)
+         */
+        onDragEnd?: OnDragEndCallback;
+        onDrag: OnDragCallback;
+        onClick?: OnClickCallback;
+    };
+    buttons?: [MouseButton] | [MouseButton, MouseButton] | [MouseButton | MouseButton | MouseButton];
+};
+export default function useDrag(target: HTMLElement | SVGElement | undefined | null, opts: UseDragOpts): [isDragging: boolean];
+export {};
+//# sourceMappingURL=useDrag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useDrag.ts"],"names":[],"mappings":"AASA,oBAAY,WAAW;IACrB,IAAI,IAAI;IACR,MAAM,IAAI;CAGX;AAED;;;;;;;;;;;GAWG;AACH,KAAK,cAAc,GAAG,CACpB,eAAe,EAAE,MAAM,EACvB,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,UAAU,EACjB,eAAe,EAAE,MAAM,EACvB,eAAe,EAAE,MAAM,KACpB,IAAI,CAAA;AAET,KAAK,eAAe,GAAG,CAAC,YAAY,EAAE,UAAU,KAAK,IAAI,CAAA;AAEzD,KAAK,iBAAiB,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;AAE5E,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;;;;;;OAUG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;;;;;OAWG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAC3B,KAAK,GACL;QACE;;;;WAIG;QACH,SAAS,CAAC,EAAE,iBAAiB,CAAA;QAC7B,MAAM,EAAE,cAAc,CAAA;QACtB,OAAO,CAAC,EAAE,eAAe,CAAA;KAC1B,CAAA;IAGL,OAAO,CAAC,EACJ,CAAC,WAAW,CAAC,GACb,CAAC,WAAW,EAAE,WAAW,CAAC,GAC1B,CAAC,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAA;CAC9C,CAAA;AAqDD,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,EACnD,IAAI,EAAE,WAAW,GAChB,CAAC,UAAU,EAAE,OAAO,CAAC,CAiNvB"}

package/dist/uiComponents/useDrag.js

@@ -0,0 +1,199 @@
+import { useLayoutEffect, useRef } from 'react';
+import { useCssCursorLock } from './PointerEventsHandler';
+import { usePointerCapturing } from '@tomorrowevening/theatre-studio/UIRoot/PointerCapturing';
+import noop from '@tomorrowevening/theatre-shared/utils/noop';
+import { isSafari } from './isSafari';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+export var MouseButton;
+(function (MouseButton) {
+    MouseButton[MouseButton["Left"] = 0] = "Left";
+    MouseButton[MouseButton["Middle"] = 1] = "Middle";
+    // Not including Right because it _might_ interfere with chord clicking.
+    // So we'll wait for chord-clicking to land before exploring right-button gestures
+})(MouseButton || (MouseButton = {}));
+/** How far in total does the cursor have to move before we decide that the user is dragging */
+const DRAG_DETECTION_DISTANCE_THRESHOLD = 3;
+const DRAG_DETECTION_WAS_POINTER_LOCK_MOVEMENT = 100;
+export default function useDrag(target, opts) {
+    const optsRef = useRef(opts);
+    optsRef.current = opts;
+    /**
+     * Safari has a gross behavior with locking the pointer changes the height of the webpage
+     * See {@link UseDragOpts.shouldPointerLock} for more context.
+     */
+    const isPointerLockUsed = opts.shouldPointerLock && !isSafari;
+    const stateRef = useRef({
+        domDragStarted: false,
+    });
+    const { capturePointer } = usePointerCapturing(`useDrag for ${opts.debugName}`);
+    const callbacksRef = useRef({ onDrag: noop, onDragEnd: noop, onClick: noop });
+    const capturedPointerRef = useRef();
+    // needed to have a state on the react lifecycle which can be updated
+    // via a ref (e.g. via the below layout effect).
+    const [isDraggingRef, isDragging] = useRefAndState(false);
+    useLayoutEffect(() => {
+        if (!target)
+            return;
+        const ensureIsDraggingUpToDateForReactLifecycle = () => {
+            const isDragging = stateRef.current.domDragStarted && stateRef.current.detection.detected;
+            if (isDraggingRef.current !== isDragging) {
+                isDraggingRef.current = isDragging;
+            }
+        };
+        const dragHandler = (event) => {
+            if (!stateRef.current.domDragStarted)
+                return;
+            const stateStarted = stateRef.current;
+            if (didPointerLockCauseMovement(event, stateStarted))
+                return;
+            if (!stateStarted.detection.detected) {
+                stateStarted.detection.totalDistanceMoved +=
+                    Math.abs(event.movementY) + Math.abs(event.movementX);
+                if (stateStarted.detection.totalDistanceMoved >
+                    DRAG_DETECTION_DISTANCE_THRESHOLD) {
+                    if (isPointerLockUsed) {
+                        target.requestPointerLock();
+                    }
+                    stateStarted.detection = {
+                        detected: true,
+                        dragMovement: { x: 0, y: 0 },
+                        dragEventCount: 0,
+                    };
+                    ensureIsDraggingUpToDateForReactLifecycle();
+                }
+            }
+            // drag detection threshold checking
+            if (stateStarted.detection.detected) {
+                stateStarted.detection.dragEventCount += 1;
+                const { dragMovement } = stateStarted.detection;
+                if (isPointerLockUsed) {
+                    // when locked, the pointer event screen position is going to be 0s, since the pointer can't move.
+                    // So, we use the movement on the event
+                    dragMovement.x += event.movementX;
+                    dragMovement.y += event.movementY;
+                }
+                else {
+                    const { startPos } = stateStarted;
+                    dragMovement.x = event.screenX - startPos.x;
+                    dragMovement.y = event.screenY - startPos.y;
+                }
+                callbacksRef.current.onDrag(dragMovement.x, dragMovement.y, event, event.movementX, event.movementY);
+            }
+        };
+        const dragEndHandler = (e) => {
+            removeDragListeners();
+            if (!stateRef.current.domDragStarted)
+                return;
+            const dragHappened = stateRef.current.detection.detected;
+            stateRef.current = { domDragStarted: false };
+            if (opts.shouldPointerLock && !isSafari)
+                document.exitPointerLock();
+            callbacksRef.current.onDragEnd(dragHappened);
+            // ensure that the window is focused after a successful drag
+            // this fixes an issue where after dragging something like the playhead
+            // through an iframe, you can immediately hit [space] and the animation
+            // will play, even if you hadn't been focusing in the iframe at the start
+            // of the drag.
+            //
+            // Fixes https://linear.app/theatre/issue/P-177/beginners-scrubbing-the-playhead-from-within-an-iframe-then-[space]
+            window.focus();
+            if (!dragHappened) {
+                callbacksRef.current.onClick(e);
+            }
+            ensureIsDraggingUpToDateForReactLifecycle();
+        };
+        const addDragListeners = () => {
+            document.addEventListener('mousemove', dragHandler);
+            document.addEventListener('mouseup', dragEndHandler);
+        };
+        const removeDragListeners = () => {
+            capturedPointerRef.current?.release();
+            document.removeEventListener('mousemove', dragHandler);
+            document.removeEventListener('mouseup', dragEndHandler);
+        };
+        const preventUnwantedClick = (event) => {
+            if (optsRef.current.disabled)
+                return;
+            if (!stateRef.current.domDragStarted)
+                return;
+            if (stateRef.current.detection.detected) {
+                if (!optsRef.current.dontBlockMouseDown) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                stateRef.current.detection = {
+                    detected: false,
+                    totalDistanceMoved: 0,
+                };
+                ensureIsDraggingUpToDateForReactLifecycle();
+            }
+        };
+        const dragStartHandler = (event) => {
+            // defensively release
+            capturedPointerRef.current?.release();
+            const opts = optsRef.current;
+            if (opts.disabled === true)
+                return;
+            const acceptedButtons = opts.buttons ?? [MouseButton.Left];
+            if (!acceptedButtons.includes(event.button))
+                return;
+            const returnOfOnDragStart = opts.onDragStart(event);
+            if (returnOfOnDragStart === false) {
+                // we should ignore the gesture
+                return;
+            }
+            callbacksRef.current.onDrag = returnOfOnDragStart.onDrag;
+            callbacksRef.current.onDragEnd = returnOfOnDragStart.onDragEnd ?? noop;
+            callbacksRef.current.onClick = returnOfOnDragStart.onClick ?? noop;
+            // need to capture pointer after we know the provided handler wants to handle drag start
+            capturedPointerRef.current = capturePointer('Drag start');
+            if (!opts.dontBlockMouseDown) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            stateRef.current = {
+                domDragStarted: true,
+                startPos: { x: event.screenX, y: event.screenY },
+                detection: {
+                    detected: false,
+                    totalDistanceMoved: 0,
+                },
+            };
+            ensureIsDraggingUpToDateForReactLifecycle();
+            addDragListeners();
+        };
+        const onMouseDown = (e) => {
+            dragStartHandler(e);
+        };
+        target.addEventListener('mousedown', onMouseDown);
+        target.addEventListener('click', preventUnwantedClick);
+        return () => {
+            removeDragListeners();
+            target.removeEventListener('mousedown', onMouseDown);
+            target.removeEventListener('click', preventUnwantedClick);
+            if (stateRef.current.domDragStarted) {
+                callbacksRef.current.onDragEnd?.(stateRef.current.detection.detected);
+            }
+            stateRef.current = { domDragStarted: false };
+            ensureIsDraggingUpToDateForReactLifecycle();
+        };
+    }, [target]);
+    useCssCursorLock(isDragging && !!opts.lockCSSCursorTo, 'dragging', opts.lockCSSCursorTo);
+    return [isDragging];
+}
+/**
+ * shouldPointerLock moves the mouse to the center of your screen in firefox, which
+ * can cause it to report very large movementX when the pointer lock begins. This
+ * function hackily detects unnaturally large movements of the mouse.
+ *
+ * @param event - MouseEvent from onDrag
+ * @returns
+ */
+function didPointerLockCauseMovement(event, state) {
+    const isEarlyInDragging = !state.detection.detected ||
+        (state.detection.detected && state.detection.dragEventCount < 3);
+    return (isEarlyInDragging &&
+        // sudden movement
+        (Math.abs(event.movementX) > DRAG_DETECTION_WAS_POINTER_LOCK_MOVEMENT ||
+            Math.abs(event.movementY) > DRAG_DETECTION_WAS_POINTER_LOCK_MOVEMENT));
+}

package/dist/uiComponents/useHotspot.d.ts

@@ -0,0 +1,2 @@
+export default function useHotspot(spot: 'left' | 'right'): boolean;
+//# sourceMappingURL=useHotspot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHotspot.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useHotspot.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,WAqCxD"}

package/dist/uiComponents/useHotspot.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+export default function useHotspot(spot) {
+    const [active, setActive] = useState(false);
+    useEffect(() => {
+        const hoverListener = (e) => {
+            const threshold = active ? 200 : 50;
+            // This is a super specific solution just for now so that the hotspot region
+            // excludes the pin button.
+            const topBuffer = 56;
+            let mouseInside = spot === 'left' ? e.x < threshold : e.x > window.innerWidth - threshold;
+            mouseInside &&= e.y > topBuffer;
+            if (mouseInside) {
+                setActive(true);
+            }
+            else {
+                setActive(false);
+            }
+        };
+        document.addEventListener('mousemove', hoverListener);
+        const leaveListener = () => {
+            setActive(false);
+        };
+        document.addEventListener('mouseleave', leaveListener);
+        return () => {
+            document.removeEventListener('mousemove', hoverListener);
+            document.removeEventListener('mouseleave', leaveListener);
+        };
+    }, [active]);
+    return active;
+}

package/dist/uiComponents/useHover.d.ts

@@ -0,0 +1,2 @@
+export default function useHover(target: HTMLElement | null | undefined): boolean;
+//# sourceMappingURL=useHover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useHover.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC9B,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAwBT"}

package/dist/uiComponents/useHover.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+export default function useHover(target) {
+    const [isHovered, setIsHovered] = useState(false);
+    useEffect(() => {
+        setIsHovered(false);
+        if (!target)
+            return;
+        const onMouseEnter = () => {
+            setIsHovered(true);
+        };
+        const onMouseLeave = () => {
+            setIsHovered(false);
+        };
+        target.addEventListener('mouseenter', onMouseEnter);
+        target.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            setIsHovered(false);
+            target.removeEventListener('mouseenter', onMouseEnter);
+            target.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [target]);
+    return isHovered;
+}

package/dist/uiComponents/useHoverWithoutDescendants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A react hook that returns true if the pointer is hovering over the target element and not its descendants
+ */
+export default function useHoverWithoutDescendants(target: HTMLElement | null | undefined): boolean;
+//# sourceMappingURL=useHoverWithoutDescendants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverWithoutDescendants.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useHoverWithoutDescendants.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAChD,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CA+BT"}

package/dist/uiComponents/useHoverWithoutDescendants.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+/**
+ * A react hook that returns true if the pointer is hovering over the target element and not its descendants
+ */
+export default function useHoverWithoutDescendants(target) {
+    const [isHovered, setIsHovered] = useState(false);
+    useEffect(() => {
+        setIsHovered(false);
+        if (!target)
+            return;
+        const onMouseEnterOrMove = (e) => {
+            if (e.target === target) {
+                setIsHovered(true);
+            }
+            else {
+                setIsHovered(false);
+            }
+        };
+        const onMouseLeave = () => {
+            setIsHovered(false);
+        };
+        target.addEventListener('mouseenter', onMouseEnterOrMove);
+        target.addEventListener('mousemove', onMouseEnterOrMove);
+        target.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            setIsHovered(false);
+            target.removeEventListener('mouseenter', onMouseEnterOrMove);
+            target.removeEventListener('mousemove', onMouseEnterOrMove);
+            target.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [target]);
+    return isHovered;
+}

package/dist/uiComponents/useKeyDown.d.ts

@@ -0,0 +1,3 @@
+import useKeyDownCallback from './useKeyDownCallback';
+export default function useKeyDown(combo: Parameters<typeof useKeyDownCallback>[0]): boolean;
+//# sourceMappingURL=useKeyDown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyDown.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useKeyDown.ts"],"names":[],"mappings":"AACA,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AAErD,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,KAAK,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAC9C,OAAO,CAMT"}

package/dist/uiComponents/useKeyDown.js

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+import useKeyDownCallback from './useKeyDownCallback';
+export default function useKeyDown(combo) {
+    const [state, setState] = useState(false);
+    useKeyDownCallback(combo, ({ down }) => {
+        setState(down);
+    });
+    return state;
+}

package/dist/uiComponents/useKeyDownCallback.d.ts

@@ -0,0 +1,7 @@
+type AcceptableCombo = 'Shift' | 'Meta' | 'Control' | 'Alt';
+export default function useKeyDownCallback(combo: AcceptableCombo, listener: (opts: {
+    down: boolean;
+    event: KeyboardEvent | undefined;
+}) => void): void;
+export {};
+//# sourceMappingURL=useKeyDownCallback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyDownCallback.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useKeyDownCallback.tsx"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAA;AAE3D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,CAAC,IAAI,EAAE;IAAC,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAC,KAAK,IAAI,QA8B5E"}

package/dist/uiComponents/useKeyDownCallback.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+export default function useKeyDownCallback(combo, listener) {
+    const refs = useRef({ combo, listener });
+    refs.current = { combo, listener };
+    useEffect(() => {
+        function onKeyDown(event) {
+            if (event.key === refs.current.combo) {
+                refs.current.listener({ down: true, event });
+            }
+        }
+        function onKeyUp(event) {
+            if (event.key === refs.current.combo) {
+                refs.current.listener({ down: false, event });
+            }
+        }
+        function onBlur(event) {
+            refs.current.listener({ down: false, event: undefined });
+        }
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onBlur);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
+}

package/dist/uiComponents/useLockSet.d.ts

@@ -0,0 +1,5 @@
+type Unlock = () => void;
+type AddLock = () => Unlock;
+export default function useLockSet(): [isLocked: boolean, addLock: AddLock];
+export {};
+//# sourceMappingURL=useLockSet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLockSet.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useLockSet.ts"],"names":[],"mappings":"AAEA,KAAK,MAAM,GAAG,MAAM,IAAI,CAAA;AAExB,KAAK,OAAO,GAAG,MAAM,MAAM,CAAA;AAE3B,MAAM,CAAC,OAAO,UAAU,UAAU,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAe1E"}

package/dist/uiComponents/useLockSet.js

@@ -0,0 +1,17 @@
+import { useMemo, useState } from 'react';
+export default function useLockSet() {
+    const [isLocked, _setIsLocked] = useState(false);
+    const addLock = useMemo(() => {
+        const locks = new Set();
+        return () => {
+            const unlock = () => {
+                locks.delete(unlock);
+                _setIsLocked(locks.size > 0);
+            };
+            locks.add(unlock);
+            _setIsLocked(true);
+            return unlock;
+        };
+    }, []);
+    return [isLocked, addLock];
+}

package/dist/uiComponents/useLogger.d.ts

@@ -0,0 +1,7 @@
+import type { ILogger } from '@tomorrowevening/theatre-shared/logger';
+import React from 'react';
+export declare function ProvideLogger(props: React.PropsWithChildren<{
+    logger: ILogger;
+}>): React.JSX.Element;
+export declare function useLogger(name?: string, key?: number | string): ILogger;
+//# sourceMappingURL=useLogger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLogger.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useLogger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,wCAAwC,CAAA;AACnE,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,wBAAgB,aAAa,CAC3B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAC,CAAC,qBAOlD;AAED,wBAAgB,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,WAS7D"}

package/dist/uiComponents/useLogger.js

@@ -0,0 +1,16 @@
+import React, { useContext, useMemo } from 'react';
+const loggerContext = React.createContext(null);
+export function ProvideLogger(props) {
+    return (React.createElement(loggerContext.Provider, { value: props.logger }, props.children));
+}
+export function useLogger(name, key) {
+    const parentLogger = useContext(loggerContext);
+    return useMemo(() => {
+        if (name) {
+            return parentLogger.named(name, key);
+        }
+        else {
+            return parentLogger;
+        }
+    }, [parentLogger, name, key]);
+}

package/dist/uiComponents/useOnClickOutside.d.ts

@@ -0,0 +1,2 @@
+export default function useOnClickOutside(container: Element | null | (Element | null)[], onOutside: (e: MouseEvent) => void, enabled?: boolean): void;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/useOnClickOutside.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,EAC9C,SAAS,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EAClC,OAAO,CAAC,EAAE,OAAO,QA8BlB"}

package/dist/uiComponents/useOnClickOutside.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+export default function useOnClickOutside(container, onOutside, enabled) {
+    useEffect(() => {
+        if (!container || enabled === false)
+            return;
+        const containers = Array.isArray(container)
+            ? container.filter((container) => container)
+            : [container];
+        const onMouseDown = (e) => {
+            if (containers.every((container) => !e.composedPath().includes(container))) {
+                onOutside(e);
+            }
+        };
+        window.addEventListener('mousedown', onMouseDown, {
+            capture: true,
+            passive: false,
+        });
+        return () => {
+            window.removeEventListener('mousedown', onMouseDown, {
+                capture: true,
+                passive: false,
+            });
+        };
+    }, [container, enabled]);
+}

package/dist/uiComponents/useOnKeyDown.d.ts

@@ -0,0 +1,2 @@
+export default function useOnKeyDown(callback: (ev: KeyboardEvent) => void): void;
+//# sourceMappingURL=useOnKeyDown.d.ts.map