@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/notify.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Notifiers } from '@tomorrowevening/theatre-shared/notify';
+export declare const notify: Notifiers;
+export declare const useEmptyNotificationsTooltip: () => [node: React.ReactNode, targetRef: React.MutableRefObject<HTMLElement | null>, isOpen: boolean];
+/**
+ * The component responsible for rendering the notifications.
+ */
+export declare const Notifier: () => React.JSX.Element;
+export declare const useNotifications: () => {
+    hasNotifications: boolean;
+};
+//# sourceMappingURL=notify.d.ts.map

package/dist/notify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify.d.ts","sourceRoot":"","sources":["../../../../studio/src/notify.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAA;AAIrC,OAAO,KAAK,EAIV,SAAS,EACV,MAAM,wCAAwC,CAAA;AAyP/C,eAAO,MAAM,MAAM,EAAE,SAKpB,CAAA;AAmFD,eAAO,MAAM,4BAA4B,uGAWxC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,yBA6CpB,CAAA;AAED,eAAO,MAAM,gBAAgB;;CAM5B,CAAA"}

package/dist/notify.js

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

@@ -0,0 +1,35 @@
+import type { UIPanelId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { VoidFn } from '@tomorrowevening/theatre-shared/utils/types';
+import type { PanelPosition } from '@tomorrowevening/theatre-studio/store/types';
+import React from 'react';
+type PanelStuff = {
+    panelId: UIPanelId;
+    dims: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    minDims: {
+        width: number;
+        height: number;
+    };
+    boundsHighlighted: boolean;
+    addBoundsHighlightLock: () => VoidFn;
+};
+export declare const panelDimsToPanelPosition: (dims: PanelStuff['dims'], windowDims: {
+    height: number;
+    width: number;
+}) => PanelPosition;
+export declare const usePanel: () => PanelStuff;
+declare const BasePanel: React.FC<{
+    panelId: UIPanelId;
+    defaultPosition: PanelPosition;
+    minDims: {
+        width: number;
+        height: number;
+    };
+    children: React.ReactNode;
+}>;
+export default BasePanel;
+//# sourceMappingURL=BasePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BasePanel.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/BasePanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,2CAA2C,CAAA;AACxE,OAAO,KAAK,EAAkB,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAExF,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,6CAA6C,CAAA;AAE9E,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;QACd,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,iBAAiB,EAAE,OAAO,CAAA;IAC1B,sBAAsB,EAAE,MAAM,MAAM,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,wBAAwB,SAC7B,UAAU,CAAC,MAAM,CAAC,cACZ;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,KAC1C,aA+BF,CAAA;AAID,eAAO,MAAM,QAAQ,kBAAiC,CAAA;AAEtD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IACxB,OAAO,EAAE,SAAS,CAAA;IAClB,eAAe,EAAE,aAAa,CAAA;IAC9B,OAAO,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA+DA,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/panels/BasePanel/BasePanel.js

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

@@ -0,0 +1,8 @@
+import type { $FixMe } from '@tomorrowevening/theatre-shared/utils/types';
+import type { PaneInstance } from '@tomorrowevening/theatre-studio/TheatreStudio';
+import React from 'react';
+declare const ExtensionPaneWrapper: React.FC<{
+    paneInstance: PaneInstance<$FixMe>;
+}>;
+export default ExtensionPaneWrapper;
+//# sourceMappingURL=ExtensionPaneWrapper.d.ts.map

package/dist/panels/BasePanel/ExtensionPaneWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionPaneWrapper.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAEvE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+CAA+C,CAAA;AAC/E,OAAO,KAA+C,MAAM,OAAO,CAAA;AAwBnE,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CACnC,CAUA,CAAA;AAiKD,eAAe,oBAAoB,CAAA"}

package/dist/panels/BasePanel/ExtensionPaneWrapper.js

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

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

package/dist/panels/BasePanel/PanelDragZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDragZone.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/BasePanel/PanelDragZone.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAW5C,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAC3B,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAoG9E,CAAA;AAED,eAAe,aAAa,CAAA"}