@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/UI/UINonSSRBits.js

@@ -1,60 +0,0 @@
-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.js

@@ -1,19 +0,0 @@
-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.js

@@ -1,96 +0,0 @@
-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.js

@@ -1,9 +0,0 @@
-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.js

@@ -1,79 +0,0 @@
-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.js

@@ -1,158 +0,0 @@
-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.js

@@ -1,86 +0,0 @@
-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.js

@@ -1,116 +0,0 @@
-import { lighten } from 'polished';
-import { css } from 'styled-components';
-import styled, { createGlobalStyle, StyleSheetManager } from 'styled-components';
-import React, { useLayoutEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { PortalContext } from 'reakit';
-import useRefAndState from './utils/useRefAndState';
-/**
- * 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 const pointerEventsAutoInNormalMode = css `
-  #pointer-root & {
-    pointer-events: none;
-  }
-  #pointer-root.normal & {
-    pointer-events: auto;
-  }
-`;
-export const theme = {
-    panel: {
-        bg: `#282b2f`,
-        head: {
-            title: {
-                color: `#bbb`,
-            },
-            punctuation: {
-                color: `#808080`,
-            },
-        },
-        body: {
-            compoudThing: {
-                label: {
-                    get color() {
-                        return lighten(0.6, theme.panel.bg);
-                    },
-                },
-            },
-        },
-    },
-};
-export const panelUtils = {
-    panelBorder: `2px solid #1f1f1f`,
-};
-const GlobalStyle = typeof window !== 'undefined'
-    ? createGlobalStyle `
-  :host {
-    all: initial;
-    color: white;
-    font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
-      HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
-  }
-
-  * {
-    padding: 0;
-    margin: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-    list-style: none;
-  }
-`
-    : {};
-export const PortalLayer = styled.div `
-  z-index: 51;
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  pointer-events: none;
-`;
-export const ProvideStyles = (props) => {
-    return (React.createElement(StyleSheetManager, { disableVendorPrefixes: true, target: props.target },
-        React.createElement(React.Fragment, null,
-            React.createElement(GlobalStyle, null),
-            props.children)));
-};
-export function withStyledShadow(Comp) {
-    return (props) => (React.createElement(ProvideStyledShadow, null,
-        React.createElement(Comp, { ...props })));
-}
-const ProvideStyledShadow = (props) => {
-    const [template, ref] = useState(null);
-    const [shadowRoot, setShadowRoot] = useState(null);
-    useLayoutEffect(() => {
-        if (!template)
-            return;
-        const { parentNode } = template;
-        if (!parentNode)
-            return;
-        const hadShadowRoot = 
-        // @ts-ignore
-        !!parentNode.shadowRoot;
-        const shadowRoot = hadShadowRoot
-            ? // @ts-ignore
-                parent.shadowRoot
-            : parentNode.attachShadow({
-                mode: 'open',
-            });
-        setShadowRoot(shadowRoot);
-        // no need to cleanup. The parent will be removed anyway if cleanup
-        // is needed.
-    }, [template]);
-    const [portalLayerRef, portalLayer] = useRefAndState(undefined);
-    if (!shadowRoot) {
-        return (React.createElement("template", { ref: ref, "shadow-root": 'open' }, props.children));
-    }
-    return ReactDOM.createPortal(React.createElement(ProvideStyles, { target: shadowRoot },
-        React.createElement(React.Fragment, null,
-            React.createElement(PortalLayer, { ref: portalLayerRef }),
-            React.createElement(PortalContext.Provider, { value: portalLayer }, props.children))), shadowRoot);
-};

package/dist/getStudio.js

@@ -1,10 +0,0 @@
-let studio;
-export function setStudio(s) {
-    studio = s;
-}
-/**
- * This may only be called from modules inside the studio bundle.
- */
-export default function getStudio() {
-    return studio;
-}