@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/notify.js

@@ -1,328 +0,0 @@
-import React, { Fragment } from 'react';
-import toast, { useToaster } from 'react-hot-toast/headless';
-import styled from 'styled-components';
-import { pointerEventsAutoInNormalMode } from './css';
-import { useVal } from '@tomorrowevening/theatre-react';
-import getStudio from './getStudio';
-import { marked } from 'marked';
-import useTooltip from './uiComponents/Popover/useTooltip';
-import MinimalTooltip from './uiComponents/Popover/MinimalTooltip';
-/**
- * Creates a string key unique to a notification with a certain title and message.
- */
-const hashNotification = ({ title, message }) => `${title} ${message}`;
-/**
- * Used to check if a notification with a certain title and message is already displayed.
- */
-const notificationUniquenessChecker = (() => {
-    const map = new Map();
-    return {
-        add: (notification) => {
-            const key = hashNotification(notification);
-            if (map.has(key)) {
-                map.set(key, map.get(key) + 1);
-            }
-            else {
-                map.set(key, 1);
-            }
-        },
-        delete: (notification) => {
-            const key = hashNotification(notification);
-            if (map.has(key) && map.get(key) > 1) {
-                map.set(key, map.get(key) - 1);
-            }
-            else {
-                map.delete(key);
-            }
-        },
-        clear: () => {
-            map.clear();
-        },
-        check: (notification) => map.has(hashNotification(notification)),
-    };
-})();
-/**
- * Used to check if a notification with a certain type is already displayed.
- *
- * Massive hack, we should be able to attach this info to toasts.
- */
-const notificationTypeChecker = (() => {
-    const map = new Map();
-    return {
-        add: (type) => {
-            if (map.has(type)) {
-                map.set(type, map.get(type) + 1);
-            }
-            else {
-                map.set(type, 1);
-            }
-        },
-        delete: (type) => {
-            if (map.has(type) && map.get(type) > 1) {
-                map.set(type, map.get(type) - 1);
-            }
-            else {
-                map.delete(type);
-            }
-        },
-        clear: () => {
-            map.clear();
-        },
-        check: (type) => map.has(type),
-        get types() {
-            return Array.of(...map.keys());
-        },
-    };
-})();
-//region Styles
-const NotificationContainer = styled.div `
-  width: 100%;
-  border-radius: 4px;
-  display: flex;
-  gap: 12px;
-  ${pointerEventsAutoInNormalMode};
-  background-color: rgba(40, 43, 47, 0.8);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(14px);
-
-  @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
-  }
-`;
-const NotificationTitle = styled.div `
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-`;
-const NotificationMain = styled.div `
-  flex: 1;
-  flex-direction: column;
-  width: 0;
-  display: flex;
-  padding: 16px 0;
-  gap: 12px;
-`;
-const NotificationMessage = styled.div `
-  color: #b4b4b4;
-  font-size: 12px;
-  line-height: 1.4;
-
-  a {
-    color: rgba(255, 255, 255, 0.9);
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  strong {
-    font-weight: bold;
-    color: #d5d5d5;
-  }
-
-  p {
-    margin-bottom: 8px;
-  }
-
-  code {
-    font-family: monospace;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 1px 1px 2px;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    white-space: pre-wrap;
-  }
-
-  pre > code {
-    white-space: pre;
-    display: block;
-    overflow: auto;
-    padding: 4px;
-  }
-
-  pre {
-    white-space: pre-wrap;
-    margin-bottom: 8px;
-  }
-`;
-const DismissButton = styled.button `
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding-left: 12px;
-  padding-right: 12px;
-  border-left: 1px solid rgba(255, 255, 255, 0.05);
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.05);
-  }
-`;
-const COLORS = {
-    info: '#3b82f6',
-    success: '#10b981',
-    warning: '#f59e0b',
-    error: '#ef4444',
-};
-const IndicatorDot = styled.div `
-  display: flex;
-  justify-content: center;
-  margin-left: 12px;
-  padding-top: 21px;
-
-  ::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 999999px;
-    background-color: ${({ type }) => COLORS[type]};
-  }
-`;
-//endregion
-/**
- * Creates handlers for different types of notifications.
- */
-const createHandler = (type) => (title, message, docs = [], allowDuplicates = false) => {
-    // We can disallow duplicates. We do this through checking the notification contents
-    // against a registry of already displayed notifications.
-    if (allowDuplicates ||
-        !notificationUniquenessChecker.check({ title, message })) {
-        notificationUniquenessChecker.add({ title, message });
-        // We have not way sadly to attach custom notification types to react-hot-toast toasts,
-        // so we use our own data structure for it.
-        notificationTypeChecker.add(type);
-        toast.custom((t) => (React.createElement(NotificationContainer, null,
-            React.createElement(IndicatorDot, { type: type }),
-            React.createElement(NotificationMain, null,
-                React.createElement(NotificationTitle, null, title),
-                React.createElement(NotificationMessage, { dangerouslySetInnerHTML: {
-                        __html: marked.parse(message),
-                    } }),
-                docs.length > 0 && (React.createElement(NotificationMessage, null,
-                    React.createElement("span", null,
-                        "Docs:",
-                        ' ',
-                        docs.map((doc, i) => (React.createElement(Fragment, { key: i },
-                            i > 0 && ', ',
-                            React.createElement("a", { target: "_blank", href: doc.url }, doc.title)))))))),
-            React.createElement(DismissButton, { onClick: () => {
-                    toast.remove(t.id);
-                    notificationUniquenessChecker.delete({ title, message });
-                    notificationTypeChecker.delete(type);
-                } }, "Close"))), { duration: Infinity });
-    }
-};
-export const notify = {
-    warning: createHandler('warning'),
-    success: createHandler('success'),
-    info: createHandler('info'),
-    error: createHandler('error'),
-};
-//region Styles
-const ButtonContainer = styled.div `
-  display: flex;
-  justify-content: ${({ align }) => (align === 'center' ? 'center' : 'flex-end')};
-  gap: 12px;
-`;
-const Button = styled.button `
-  position: relative;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  ${pointerEventsAutoInNormalMode};
-  background-color: rgba(40, 43, 47, 0.8);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(14px);
-  border: none;
-  padding: 12px;
-  color: #fff;
-  overflow: hidden;
-
-  ::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
-  :hover::before {
-    background: ${({ danger }) => danger ? 'rgba(255, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'};
-  }
-
-  @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
-  }
-`;
-const NotifierContainer = styled.div `
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: fixed;
-  right: 92px;
-  top: 50px;
-  width: 500px;
-  height: 85vh;
-  min-height: 400px;
-`;
-const NotificationScroller = styled.div `
-  overflow: hidden;
-  pointer-events: auto;
-  border-radius: 4px;
-
-  & > div {
-    display: flex;
-    flex-direction: column-reverse;
-    gap: 8px;
-    overflow: scroll;
-    height: 100%;
-  }
-`;
-const EmptyState = styled.div `
-  width: fit-content;
-  padding: 8px;
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  color: #b4b4b4;
-  font-size: 12px;
-  line-height: 1.4;
-`;
-//endregion
-export const useEmptyNotificationsTooltip = () => {
-    const { hasNotifications } = useNotifications();
-    return useTooltip({ enabled: !hasNotifications }, () => (React.createElement(MinimalTooltip, null,
-        React.createElement(EmptyState, null,
-            React.createElement(NotificationTitle, null, "No notifications"),
-            "Notifications will appear here when you get them."))));
-};
-/**
- * The component responsible for rendering the notifications.
- */
-export const Notifier = () => {
-    const { toasts, handlers } = useToaster();
-    const { startPause, endPause } = handlers;
-    const pinNotifications = useVal(getStudio().atomP.ahistoric.pinNotifications) ?? false;
-    return (React.createElement(NotifierContainer, null,
-        !pinNotifications
-            ? null
-            : toasts.length > 0 && (React.createElement(NotificationScroller, { onMouseEnter: startPause, onMouseLeave: endPause },
-                React.createElement("div", null, toasts.map((toast) => {
-                    return (React.createElement("div", { key: toast.id }, toast.message(toast)));
-                })))),
-        React.createElement(ButtonContainer, { align: "side" }, pinNotifications && toasts.length > 0 && (React.createElement(Button, { onClick: () => {
-                notificationTypeChecker.clear();
-                notificationUniquenessChecker.clear();
-                toast.remove();
-            }, danger: true }, "Clear")))));
-};
-export const useNotifications = () => {
-    const { toasts } = useToaster();
-    return {
-        hasNotifications: toasts.length > 0,
-    };
-};

package/dist/panels/BasePanel/BasePanel.js

@@ -1,74 +0,0 @@
-import { prism, val } from '@tomorrowevening/theatre-dataverse';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useLockSet from '@tomorrowevening/theatre-studio/uiComponents/useLockSet';
-import React, { useContext } from 'react';
-import useWindowSize from 'react-use/esm/useWindowSize';
-export const panelDimsToPanelPosition = (dims, windowDims) => {
-    const left = dims.left / windowDims.width;
-    const right = (dims.left + dims.width) / windowDims.width;
-    const top = dims.top / windowDims.height;
-    const bottom = (dims.height + dims.top) / windowDims.height;
-    const position = {
-        edges: {
-            left: left <= 0.5
-                ? { from: 'screenLeft', distance: left }
-                : { from: 'screenRight', distance: 1 - left },
-            right: right <= 0.5
-                ? { from: 'screenLeft', distance: right }
-                : { from: 'screenRight', distance: 1 - right },
-            top: top <= 0.5
-                ? { from: 'screenTop', distance: top }
-                : { from: 'screenBottom', distance: 1 - top },
-            bottom: bottom <= 0.5
-                ? { from: 'screenTop', distance: bottom }
-                : { from: 'screenBottom', distance: 1 - bottom },
-        },
-    };
-    return position;
-};
-const PanelContext = React.createContext(null);
-export const usePanel = () => useContext(PanelContext);
-const BasePanel = ({ panelId, children, defaultPosition, minDims }) => {
-    const windowSize = useWindowSize(800, 200);
-    const [boundsHighlighted, addBoundsHighlightLock] = useLockSet();
-    const { stuff } = usePrism(() => {
-        const { edges } = val(getStudio().atomP.historic.panelPositions[panelId]) ??
-            defaultPosition;
-        const left = Math.floor(windowSize.width *
-            (edges.left.from === 'screenLeft'
-                ? edges.left.distance
-                : 1 - edges.left.distance));
-        const right = Math.floor(windowSize.width *
-            (edges.right.from === 'screenLeft'
-                ? edges.right.distance
-                : 1 - edges.right.distance));
-        const top = Math.floor(windowSize.height *
-            (edges.top.from === 'screenTop'
-                ? edges.top.distance
-                : 1 - edges.top.distance));
-        const bottom = Math.floor(windowSize.height *
-            (edges.bottom.from === 'screenTop'
-                ? edges.bottom.distance
-                : 1 - edges.bottom.distance));
-        const width = Math.max(right - left, minDims.width);
-        const height = Math.max(bottom - top, minDims.height);
-        // memo-ing dims so its ref can be used as a cache key
-        const dims = prism.memo('dims', () => ({
-            width,
-            left,
-            top,
-            height,
-        }), [width, left, top, height]);
-        const stuff = {
-            dims: dims,
-            panelId,
-            minDims,
-            boundsHighlighted,
-            addBoundsHighlightLock,
-        };
-        return { stuff };
-    }, [panelId, windowSize, boundsHighlighted, addBoundsHighlightLock]);
-    return React.createElement(PanelContext.Provider, { value: stuff }, children);
-};
-export default BasePanel;

package/dist/panels/BasePanel/ExtensionPaneWrapper.js

@@ -1,138 +0,0 @@
-import React, { useCallback, useLayoutEffect, useState } from 'react';
-import styled from 'styled-components';
-import { F2 as F2Impl, TitleBar } from './common';
-import BasePanel from './BasePanel';
-import PanelDragZone from './PanelDragZone';
-import PanelWrapper from './PanelWrapper';
-import { ErrorBoundary } from 'react-error-boundary';
-import { IoClose } from 'react-icons/all';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import { panelZIndexes } from '@tomorrowevening/theatre-studio/panels/BasePanel/common';
-import { useVal } from '@tomorrowevening/theatre-react';
-const defaultPosition = {
-    edges: {
-        left: { from: 'screenLeft', distance: 0.3 },
-        right: { from: 'screenRight', distance: 0.3 },
-        top: { from: 'screenTop', distance: 0.3 },
-        bottom: { from: 'screenBottom', distance: 0.3 },
-    },
-};
-const minDims = { width: 300, height: 300 };
-const ExtensionPaneWrapper = ({ paneInstance }) => {
-    return (React.createElement(BasePanel, { panelId: `pane-${paneInstance.instanceId}`, defaultPosition: defaultPosition, minDims: minDims },
-        React.createElement(Content, { paneInstance: paneInstance })));
-};
-const Container = styled(PanelWrapper) `
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: 0px 5px 12px -4px rgb(0 0 0 / 22%);
-  z-index: ${(props) => props.$zIndex};
-`;
-const Title = styled.div `
-  width: 100%;
-`;
-const PaneTools = styled.div `
-  display: flex;
-  align-items: center;
-  opacity: 1;
-  position: absolute;
-  right: 4px;
-  top: 0;
-  bottom: 0;
-`;
-const ClosePanelButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-  font-size: 11px;
-  height: 10px;
-  width: 18px;
-  color: #adadadb3;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  &:hover {
-    color: white;
-  }
-`;
-/**
- * The &:after part blocks pointer events from reaching the content of the
- * pane when a drag gesture is active in theatre's UI. It's a hack and its downside
- * is that pane content cannot interact with the rest of theatre's UI while a drag
- * gesture is active.
- * TODO find a less hacky way?
- */
-const F2 = styled(F2Impl) `
-  position: relative;
-  overflow: hidden;
-
-  &:after {
-    z-index: 10;
-    position: absolute;
-    inset: 0;
-    display: block;
-    content: ' ';
-    pointer-events: none;
-
-    #pointer-root:not(.normal) & {
-      pointer-events: auto;
-    }
-  }
-`;
-const ErrorContainer = styled.div `
-  padding: 12px;
-
-  & > pre {
-    border: 1px solid #ff62624f;
-    background-color: rgb(255 0 0 / 5%);
-    margin: 8px 0;
-    padding: 8px;
-    font-family: monospace;
-    overflow: scroll;
-    color: #ff9896;
-  }
-`;
-const ErrorFallback = (props) => {
-    return (React.createElement(ErrorContainer, null,
-        "An Error occurred rendering this pane. Open the console for more info.",
-        React.createElement("pre", null, JSON.stringify({ message: props.error.message, stack: props.error.stack }, null, 2))));
-};
-const Content = ({ paneInstance, }) => {
-    const [mountingPoint, setMountingPoint] = useState(null);
-    const mount = paneInstance.definition.mount;
-    useLayoutEffect(() => {
-        if (!mountingPoint)
-            return;
-        const unmount = mount({
-            paneId: paneInstance.instanceId,
-            node: mountingPoint,
-        });
-        if (typeof unmount === 'function') {
-            return unmount;
-        }
-    }, [mountingPoint, mount, paneInstance.instanceId]);
-    const closePane = useCallback(() => {
-        getStudio().paneManager.destroyPane(paneInstance.instanceId);
-    }, [paneInstance]);
-    const bringToFront = useCallback(() => {
-        getStudio().paneManager.bringPaneToFront(paneInstance.instanceId);
-    }, [paneInstance]);
-    // Calculate z-index based on focus order
-    const focusOrder = useVal(getStudio().atomP.historic.paneFocusOrder) ?? [];
-    const focusIndex = focusOrder.indexOf(paneInstance.instanceId);
-    const zIndex = focusIndex >= 0
-        ? panelZIndexes.pluginPanes + focusIndex
-        : panelZIndexes.pluginPanes;
-    return (React.createElement(Container, { "data-testid": `theatre-pane-wrapper-${paneInstance.instanceId}`, "$zIndex": zIndex, onMouseDown: bringToFront },
-        React.createElement(PanelDragZone, null,
-            React.createElement(TitleBar, null,
-                React.createElement(PaneTools, null,
-                    React.createElement(ClosePanelButton, { onClick: closePane, title: 'Close Pane' },
-                        React.createElement(IoClose, null))),
-                React.createElement(Title, null, paneInstance.instanceId))),
-        React.createElement(ErrorBoundary, { FallbackComponent: ErrorFallback },
-            React.createElement(F2, { "data-testid": `theatre-pane-content-${paneInstance.instanceId}`, ref: setMountingPoint }))));
-};
-export default ExtensionPaneWrapper;

package/dist/panels/BasePanel/PanelDragZone.js

@@ -1,88 +0,0 @@
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
-import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { panelDimsToPanelPosition, usePanel } from './BasePanel';
-import { useCssCursorLock } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
-import { clamp } from 'lodash-es';
-import { minVisibleSize } from './common';
-const Container = styled.div `
-  cursor: move;
-`;
-const PanelDragZone = (props) => {
-    const panelStuff = usePanel();
-    const panelStuffRef = useRef(panelStuff);
-    panelStuffRef.current = panelStuff;
-    const [ref, node] = useRefAndState(null);
-    const dragOpts = useMemo(() => {
-        return {
-            debugName: 'PanelDragZone',
-            lockCursorTo: 'move',
-            onDragStart() {
-                const stuffBeforeDrag = panelStuffRef.current;
-                let tempTransaction;
-                const unlock = panelStuff.addBoundsHighlightLock();
-                // Bring pane to front when starting to drag
-                const panelId = stuffBeforeDrag.panelId;
-                if (panelId.startsWith('pane-')) {
-                    const paneInstanceId = panelId.slice(5); // Remove 'pane-' prefix
-                    getStudio().paneManager.bringPaneToFront(paneInstanceId);
-                }
-                return {
-                    onDrag(dx, dy) {
-                        const newDims = {
-                            ...stuffBeforeDrag.dims,
-                            top: clamp(stuffBeforeDrag.dims.top + dy, 0, window.innerHeight - minVisibleSize),
-                            left: clamp(stuffBeforeDrag.dims.left + dx, -stuffBeforeDrag.dims.width + minVisibleSize, window.innerWidth - minVisibleSize),
-                        };
-                        const position = panelDimsToPanelPosition(newDims, {
-                            width: window.innerWidth,
-                            height: window.innerHeight,
-                        });
-                        tempTransaction?.discard();
-                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
-                            stateEditors.studio.historic.panelPositions.setPanelPosition({
-                                position,
-                                panelId: stuffBeforeDrag.panelId,
-                            });
-                        });
-                    },
-                    onDragEnd(dragHappened) {
-                        unlock();
-                        if (dragHappened) {
-                            tempTransaction?.commit();
-                        }
-                        else {
-                            tempTransaction?.discard();
-                        }
-                    },
-                };
-            },
-        };
-    }, []);
-    const [isDragging] = useDrag(node, dragOpts);
-    useCssCursorLock(isDragging, 'dragging', 'move');
-    const [onMouseEnter, onMouseLeave] = useMemo(() => {
-        let unlock;
-        return [
-            function onMouseEnter() {
-                if (unlock) {
-                    const u = unlock;
-                    unlock = undefined;
-                    u();
-                }
-                unlock = panelStuff.addBoundsHighlightLock();
-            },
-            function onMouseLeave() {
-                if (unlock) {
-                    const u = unlock;
-                    unlock = undefined;
-                    u();
-                }
-            },
-        ];
-    }, []);
-    return (React.createElement(Container, { ...props, ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
-};
-export default PanelDragZone;