@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/toolbars/GlobalToolbar.js

@@ -0,0 +1,142 @@
+import { usePrism, useVal } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import React, { useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import useTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/useTooltip';
+import ErrorTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/ErrorTooltip';
+import BasicTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicTooltip';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import ExtensionToolbar from './ExtensionToolbar/ExtensionToolbar';
+import PinButton from './PinButton';
+import { Details, Ellipsis, Outline, Bell, } from '@tomorrowevening/theatre-studio/uiComponents/icons';
+import DoubleChevronLeft from '@tomorrowevening/theatre-studio/uiComponents/icons/DoubleChevronLeft';
+import DoubleChevronRight from '@tomorrowevening/theatre-studio/uiComponents/icons/DoubleChevronRight';
+import ToolbarIconButton from '@tomorrowevening/theatre-studio/uiComponents/toolbar/ToolbarIconButton';
+import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
+import MoreMenu from './MoreMenu/MoreMenu';
+import { useNotifications, useEmptyNotificationsTooltip, } from '@tomorrowevening/theatre-studio/notify';
+const Container = styled.div `
+  height: 36px;
+  pointer-events: none;
+
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+`;
+const NumberOfConflictsIndicator = styled.div `
+  color: white;
+  width: 14px;
+  height: 14px;
+  background: #d00;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 14px;
+  font-weight: 600;
+  font-size: 8px;
+  position: relative;
+  left: -6px;
+  top: -11px;
+  margin-right: -14px;
+  box-shadow: 0 4px 6px -4px #00000059;
+`;
+const SubContainer = styled.div `
+  display: flex;
+  gap: 8px;
+`;
+const HasUpdatesBadge = styled.div `
+  position: absolute;
+  background: ${({ type }) => (type === 'info' ? '#40aaa4' : '#f59e0b')};
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  right: -2px;
+  top: -2px;
+`;
+const GroupDivider = styled.div `
+  position: absolute;
+  height: 32px;
+  width: 1px;
+  background: #373b40;
+  opacity: 0.4;
+`;
+let showedVisualTestingWarning = false;
+const GlobalToolbar = () => {
+    const conflicts = usePrism(() => {
+        const ephemeralStateOfAllProjects = val(getStudio().atomP.ephemeral.coreByProject);
+        return Object.entries(ephemeralStateOfAllProjects)
+            .map(([projectId, state]) => ({ projectId, state }))
+            .filter(({ state }) => state.loadingState.type === 'browserStateIsNotBasedOnDiskState');
+    }, []);
+    const [triggerTooltip, triggerButtonRef] = useTooltip({ enabled: conflicts.length > 0, enterDelay: conflicts.length > 0 ? 0 : 200 }, () => conflicts.length > 0 ? (React.createElement(ErrorTooltip, null, conflicts.length === 1
+        ? `There is a state conflict in project "${conflicts[0].projectId}". Select the project in the outline below in order to fix it.`
+        : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `)) : (React.createElement(BasicTooltip, null,
+        React.createElement(React.Fragment, null, "Outline"))));
+    const outlinePinned = useVal(getStudio().atomP.ahistoric.pinOutline) ?? true;
+    const detailsPinned = useVal(getStudio().atomP.ahistoric.pinDetails) ?? true;
+    const hasUpdates = useVal(getStudio().atomP.ahistoric.updateChecker.result.hasUpdates) === true;
+    const moreMenu = usePopover(() => {
+        const triggerBounds = moreMenuTriggerRef.current.getBoundingClientRect();
+        return {
+            debugName: 'More Menu',
+            constraints: {
+                maxX: triggerBounds.right,
+                maxY: 8,
+                // MVP: Don't render the more menu all the way to the left
+                // when it doesn't fit on the screen height
+                // See https://linear.app/theatre/issue/P-178/bug-broken-updater-ui-in-simple-html-page
+                // 1/10 There's a better way to solve this.
+                // 1/10 Perhaps consider separate constraint like "rightSideMinX" & for future: "bottomSideMinY"
+                // 2/10 Or, consider constraints being a function of the dimensions of the box => constraints.
+                minX: triggerBounds.left - 140,
+                minY: 8,
+            },
+            verticalGap: 2,
+        };
+    }, () => {
+        return React.createElement(MoreMenu, null);
+    });
+    const moreMenuTriggerRef = useRef(null);
+    const showUpdatesBadge = useMemo(() => {
+        if (window.__IS_VISUAL_REGRESSION_TESTING) {
+            if (!showedVisualTestingWarning) {
+                showedVisualTestingWarning = true;
+                console.warn("Visual regression testing enabled, so we're showing the updates badge unconditionally");
+            }
+        }
+        if (hasUpdates || window.__IS_VISUAL_REGRESSION_TESTING) {
+            return true;
+        }
+        return hasUpdates;
+    }, [hasUpdates]);
+    const { hasNotifications } = useNotifications();
+    const [notificationsTooltip, notificationsTriggerRef] = useEmptyNotificationsTooltip();
+    return (React.createElement(Container, null,
+        React.createElement(SubContainer, null,
+            triggerTooltip,
+            React.createElement(PinButton, { ref: triggerButtonRef, "data-testid": "OutlinePanel-TriggerButton", onClick: () => {
+                    getStudio().transaction(({ stateEditors, drafts }) => {
+                        stateEditors.studio.ahistoric.setPinOutline(!(drafts.ahistoric.pinOutline ?? true));
+                    });
+                }, icon: React.createElement(Outline, null), pinHintIcon: React.createElement(DoubleChevronRight, null), unpinHintIcon: React.createElement(DoubleChevronLeft, null), pinned: outlinePinned }),
+            conflicts.length > 0 ? (React.createElement(NumberOfConflictsIndicator, null, conflicts.length)) : null,
+            React.createElement(ExtensionToolbar, { showLeftDivider: true, toolbarId: "global" })),
+        React.createElement(SubContainer, null,
+            notificationsTooltip,
+            React.createElement(PinButton, { ref: notificationsTriggerRef, onClick: () => {
+                    getStudio().transaction(({ stateEditors, drafts }) => {
+                        stateEditors.studio.ahistoric.setPinNotifications(!(drafts.ahistoric.pinNotifications ?? false));
+                    });
+                }, icon: React.createElement(Bell, null), pinHintIcon: React.createElement(Bell, null), unpinHintIcon: React.createElement(Bell, null), pinned: useVal(getStudio().atomP.ahistoric.pinNotifications) ?? false }, hasNotifications && React.createElement(HasUpdatesBadge, { type: "warning" })),
+            moreMenu.node,
+            React.createElement(ToolbarIconButton, { ref: moreMenuTriggerRef, onClick: (e) => {
+                    moreMenu.toggle(e, moreMenuTriggerRef.current);
+                } },
+                React.createElement(Ellipsis, null),
+                showUpdatesBadge && React.createElement(HasUpdatesBadge, { type: "info" })),
+            React.createElement(PinButton, { ref: triggerButtonRef, onClick: () => {
+                    getStudio().transaction(({ stateEditors, drafts }) => {
+                        stateEditors.studio.ahistoric.setPinDetails(!(drafts.ahistoric.pinDetails ?? true));
+                    });
+                }, icon: React.createElement(Details, null), pinHintIcon: React.createElement(DoubleChevronLeft, null), unpinHintIcon: React.createElement(DoubleChevronRight, null), pinned: detailsPinned }))));
+};
+export default GlobalToolbar;

package/dist/toolbars/MoreMenu/MoreMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const MoreMenu: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default MoreMenu;
+//# sourceMappingURL=MoreMenu.d.ts.map

package/dist/toolbars/MoreMenu/MoreMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/toolbars/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAkHzB,QAAA,MAAM,QAAQ,+DA4FZ,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/toolbars/MoreMenu/MoreMenu.js

@@ -0,0 +1,133 @@
+import { useVal } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import React from 'react';
+import styled from 'styled-components';
+const Container = styled.div `
+  width: 138px;
+  border-radius: 2px;
+  background-color: rgba(42, 45, 50, 0.9);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 2px 6px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(14px);
+  pointer-events: auto;
+  // makes the edges of the item highlights match the rounded corners
+  overflow: hidden;
+
+  @supports not (backdrop-filter: blur()) {
+    background-color: rgba(42, 45, 50, 0.98);
+  }
+
+  color: rgba(255, 255, 255, 0.9);
+
+  & a {
+    // Fix colors of links to not be default
+    color: inherit;
+  }
+`;
+const Item = styled.div `
+  position: relative;
+  padding: 0px 12px;
+  font-weight: 400;
+  font-size: 11px;
+  height: 32px;
+  text-decoration: none;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: default;
+`;
+const Link = styled(Item) `
+  &:before {
+    position: absolute;
+    display: block;
+    content: ' ';
+    inset: 3px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    opacity: 0;
+  }
+
+  &.secondary {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  &:hover {
+    /* background-color: #398995; */
+    color: white !important;
+    &:before {
+      opacity: 1;
+    }
+  }
+`;
+const VersionContainer = styled(Item) `
+  height: auto;
+  min-height: 32px;
+  padding-top: 12px;
+  padding-bottom: 10px;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.5);
+`;
+const VersionLabel = styled.div `
+  font-weight: 600;
+`;
+const VersionValueRow = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const VersionValue = styled.div `
+  margin-left: 2px;
+`;
+const Divider = styled.div `
+  height: 1px;
+  margin: 0 2px;
+  background: rgba(255, 255, 255, 0.02);
+`;
+const UpdateDot = styled.div `
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #40aaa4;
+  right: 14px;
+  top: 12px;
+  border-radius: 50%;
+`;
+const version = process.env.THEATRE_VERSION ?? '0.4.0';
+const untaggedVersion = version.match(/^[^\-]+/)[0];
+const MoreMenu = React.forwardRef((props, ref) => {
+    const hasUpdates = useVal(getStudio().atomP.ahistoric.updateChecker.result.hasUpdates);
+    return (React.createElement(Container, { ref: ref },
+        React.createElement(Link, { as: "a", href: "https://www.theatrejs.com/docs/latest", className: "", target: "_blank" }, "Docs"),
+        React.createElement(Link, { as: "a", href: `https://www.theatrejs.com/docs/latest/releases`, className: "", target: "_blank" }, "Changelog"),
+        React.createElement(Divider, null),
+        React.createElement(Link, { as: "a", href: "https://github.com/theatre-js/theatre", className: "", target: "_blank" }, "Github"),
+        React.createElement(Link, { as: "a", href: "https://twitter.com/theatre_js", className: "", target: "_blank" }, "Twitter"),
+        React.createElement(Link, { className: "", as: "a", href: "https://discord.gg/bm9f8F9Y9N", target: "_blank" }, "Discord"),
+        React.createElement(Divider, null),
+        React.createElement(VersionContainer, null,
+            React.createElement(VersionLabel, null, "Version"),
+            React.createElement(VersionValueRow, null,
+                React.createElement(VersionValue, null,
+                    version,
+                    ' ',
+                    hasUpdates === true
+                        ? '(outdated)'
+                        : hasUpdates === false
+                            ? '(latest)'
+                            : ''))),
+        hasUpdates === true && (React.createElement(React.Fragment, null,
+            React.createElement(Divider, null),
+            React.createElement(Link, { as: "a", href: `https://www.theatrejs.com/docs/latest/releases${encodeURIComponent(untaggedVersion)}`, className: "", target: "_blank" },
+                "Update",
+                React.createElement(UpdateDot, null)),
+            React.createElement(Link, { as: "a", href: `https://www.theatrejs.com/docs/latest/releases#${encodeURIComponent(untaggedVersion)}`, className: "", target: "_blank" }, "What's new?")))));
+});
+export default MoreMenu;

package/dist/toolbars/PinButton.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import React from 'react';
+interface PinButtonProps extends ComponentPropsWithRef<'button'> {
+    icon: ReactNode;
+    pinHintIcon: ReactNode;
+    unpinHintIcon: ReactNode;
+    hint?: boolean;
+    pinned?: boolean;
+}
+declare const PinButton: React.ForwardRefExoticComponent<Omit<PinButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default PinButton;
+//# sourceMappingURL=PinButton.d.ts.map

package/dist/toolbars/PinButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinButton.d.ts","sourceRoot":"","sources":["../../../../../studio/src/toolbars/PinButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,qBAAqB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAA;AAC3D,OAAO,KAA6B,MAAM,OAAO,CAAA;AAWjD,UAAU,cAAe,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC9D,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,SAAS,CAAA;IACtB,aAAa,EAAE,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,SAAS,uGAoCd,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/toolbars/PinButton.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import React, { forwardRef, useState } from 'react';
+import ToolbarIconButton from '@tomorrowevening/theatre-studio/uiComponents/toolbar/ToolbarIconButton';
+const Container = styled(ToolbarIconButton) `
+  color: ${({ pinned }) => (pinned ? 'rgba(255, 255, 255, 0.8)' : '#A8A8A9')};
+
+  border-bottom: 1px solid
+    ${({ pinned }) => pinned ? 'rgba(255, 255, 255, 0.7)' : 'rgba(255, 255, 255, 0.08)'};
+`;
+const PinButton = forwardRef(({ children, hint, pinned, icon, pinHintIcon, unpinHintIcon, ...props }, ref) => {
+    const [hovered, setHovered] = useState(false);
+    const showHint = hovered || hint;
+    return (React.createElement(Container, { ...props, pinned: pinned, ref: ref, onMouseOver: () => setHovered(true), onMouseOut: () => setHovered(false) },
+        React.createElement("div", { style: {
+                pointerEvents: 'none',
+                width: 'fit-content',
+                height: 'fit-content',
+                inset: 0,
+            } }, showHint && !pinned
+            ? pinHintIcon
+            : showHint && pinned
+                ? unpinHintIcon
+                : icon),
+        children));
+});
+export default PinButton;

package/dist/uiComponents/DetailPanelButton.d.ts

@@ -0,0 +1,5 @@
+declare const DetailPanelButton: import("styled-components").StyledComponent<"button", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export default DetailPanelButton;
+//# sourceMappingURL=DetailPanelButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPanelButton.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/DetailPanelButton.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB;;SAkBtB,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/uiComponents/DetailPanelButton.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const DetailPanelButton = styled.button `
+  text-align: center;
+  padding: 8px;
+  border-radius: 2px;
+  border: 1px solid #627b7b87;
+  background-color: #4b787d3d;
+  color: #eaeaea;
+  font-weight: 400;
+  display: block;
+  appearance: none;
+  flex-grow: 1;
+  cursor: ${(props) => (props.disabled ? 'none' : 'pointer')};
+  opacity: ${(props) => (props.disabled ? 0.4 : 1)};
+
+  &:hover {
+    background-color: #7dc1c878;
+    border-color: #9ebcbf;
+  }
+`;
+export default DetailPanelButton;

package/dist/uiComponents/PointerEventsHandler.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * When the cursor is locked, this css var is added to #pointer-root
+ * whose value will be the locked cursor (e.g. ew-resize).
+ *
+ * Look up references of this constant for examples of how it is used.
+ *
+ * See {@link useCssCursorLock} - code that locks the cursor
+ */
+export declare const lockedCursorCssVarName = "--lockedCursor";
+declare const PointerEventsHandler: React.FC<{
+    className?: string;
+    children?: React.ReactNode;
+}>;
+/**
+ * A "locking" mechanism for managing style.cursor values.
+ *
+ * Putting this behind a lock is important so we can properly manage
+ * multiple features all coordinating to style the cursor.
+ *
+ * This will also track a stack of different cursor styles so that
+ * adding a style to be the "foremost" cursor can override a previous style,
+ * but then "unlocking" that style will again reveal the existing styles.
+ *
+ * It behaves a bit like a stack.
+ *
+ * See {@link lockedCursorCssVarName}
+ */
+export declare const useCssCursorLock: (enabled: boolean, className: string, cursor?: string) => void;
+export default PointerEventsHandler;
+//# sourceMappingURL=PointerEventsHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PointerEventsHandler.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/PointerEventsHandler.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAA;AAMd;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,mBAAmB,CAAA;AA2BtD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAmCA,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB,YAElB,OAAO,aACL,MAAM,WAER,MAAM,SAOhB,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/uiComponents/PointerEventsHandler.js

@@ -0,0 +1,80 @@
+import React, { createContext, useContext, useLayoutEffect, useMemo, useState, } from 'react';
+import styled from 'styled-components';
+// using an ID to make CSS selectors faster
+const elementId = 'pointer-root';
+/**
+ * When the cursor is locked, this css var is added to #pointer-root
+ * whose value will be the locked cursor (e.g. ew-resize).
+ *
+ * Look up references of this constant for examples of how it is used.
+ *
+ * See {@link useCssCursorLock} - code that locks the cursor
+ */
+export const lockedCursorCssVarName = '--lockedCursor';
+const Container = styled.div `
+  pointer-events: auto;
+  &.normal {
+    pointer-events: none;
+  }
+`;
+const CursorOverride = styled.div `
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  #pointer-root:not(.normal) > & {
+    pointer-events: auto;
+  }
+`;
+const context = createContext({});
+const PointerEventsHandler = (props) => {
+    const [locks, setLocks] = useState([]);
+    const contextValue = useMemo(() => {
+        const getLock = (className, cursor) => {
+            const lock = { className, cursor };
+            setLocks((s) => [...s, lock]);
+            const unlock = () => {
+                setLocks((s) => s.filter((l) => l !== lock));
+            };
+            return unlock;
+        };
+        return {
+            getLock,
+        };
+    }, []);
+    const lockedCursor = locks[0]?.cursor ?? '';
+    return (React.createElement(context.Provider, { value: contextValue },
+        React.createElement(Container, { id: elementId, className: (locks[0]?.className ?? 'normal') + ' ' + props.className },
+            React.createElement(CursorOverride, { style: {
+                    cursor: lockedCursor,
+                    // @ts-ignore
+                    [lockedCursorCssVarName]: lockedCursor,
+                } }, props.children))));
+};
+/**
+ * A "locking" mechanism for managing style.cursor values.
+ *
+ * Putting this behind a lock is important so we can properly manage
+ * multiple features all coordinating to style the cursor.
+ *
+ * This will also track a stack of different cursor styles so that
+ * adding a style to be the "foremost" cursor can override a previous style,
+ * but then "unlocking" that style will again reveal the existing styles.
+ *
+ * It behaves a bit like a stack.
+ *
+ * See {@link lockedCursorCssVarName}
+ */
+export const useCssCursorLock = (
+/** Whether to enable the provided cursor style */
+enabled, className, 
+/** e.g. `"ew"`, `"help"`, `"pointer"`, `"text"`, etc */
+cursor) => {
+    const ctx = useContext(context);
+    useLayoutEffect(() => {
+        if (!enabled)
+            return;
+        return ctx.getLock(className, cursor);
+    }, [enabled, className, cursor]);
+};
+export default PointerEventsHandler;

package/dist/uiComponents/Popover/ArrowContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const ArrowContext: import("react").Context<Record<string, string>>;
+export default ArrowContext;
+//# sourceMappingURL=ArrowContext.d.ts.map

package/dist/uiComponents/Popover/ArrowContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowContext.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/ArrowContext.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,YAAY,iDAA4C,CAAA;AAC9D,eAAe,YAAY,CAAA"}

package/dist/uiComponents/Popover/ArrowContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const ArrowContext = createContext({});
+export default ArrowContext;

package/dist/uiComponents/Popover/BasicPopover.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const popoverBackgroundColor: string;
+declare const BasicPopover: React.FC<{
+    className?: string;
+    showPopoverEdgeTriangle?: boolean;
+    children: React.ReactNode;
+}>;
+export default BasicPopover;
+//# sourceMappingURL=BasicPopover.d.ts.map

package/dist/uiComponents/Popover/BasicPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicPopover.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/BasicPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,sBAAsB,QAAkC,CAAA;AA0BrE,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAgBA,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/uiComponents/Popover/BasicPopover.js

@@ -0,0 +1,35 @@
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { transparentize } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+import PopoverArrow from './PopoverArrow';
+export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`);
+const Container = styled.div `
+  position: absolute;
+  --popover-bg: ${popoverBackgroundColor};
+  --popover-inner-stroke: #505159;
+  --popover-outer-stroke: #111;
+
+  background: var(--popover-bg);
+
+  color: white;
+  padding: 0;
+  margin: 0;
+  cursor: default;
+  ${pointerEventsAutoInNormalMode};
+  border-radius: 3px;
+  z-index: 10000;
+  border: 1px solid var(--popover-inner-stroke);
+  box-shadow: 0 0 0 1px var(--popover-outer-stroke), 0 6px 8px -4px black;
+  backdrop-filter: blur(8px);
+
+  & a {
+    color: inherit;
+  }
+`;
+const BasicPopover = React.forwardRef(({ children, className, showPopoverEdgeTriangle: showPopoverEdgeTriangle = true, }, ref) => {
+    return (React.createElement(Container, { className: className, ref: ref },
+        showPopoverEdgeTriangle ? React.createElement(PopoverArrow, null) : undefined,
+        children));
+});
+export default BasicPopover;

package/dist/uiComponents/Popover/BasicTooltip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const BasicTooltip: import("styled-components").StyledComponent<import("react").FC<{
+    className?: string | undefined;
+    showPopoverEdgeTriangle?: boolean | undefined;
+    children: import("react").ReactNode;
+}>, any, {}, never>;
+export default BasicTooltip;
+//# sourceMappingURL=BasicTooltip.d.ts.map

package/dist/uiComponents/Popover/BasicTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicTooltip.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/BasicTooltip.tsx"],"names":[],"mappings":";AAGA,QAAA,MAAM,YAAY;;;;mBAMjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/uiComponents/Popover/BasicTooltip.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import BasicPopover from './BasicPopover';
+const BasicTooltip = styled(BasicPopover) `
+  padding: 1em;
+  max-width: 240px;
+  pointer-events: none !important;
+  --popover-outer-stroke: transparent;
+  --popover-inner-stroke: #45464d;
+`;
+export default BasicTooltip;

package/dist/uiComponents/Popover/ErrorTooltip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const ErrorTooltip: import("styled-components").StyledComponent<import("react").FC<{
+    className?: string | undefined;
+    showPopoverEdgeTriangle?: boolean | undefined;
+    children: import("react").ReactNode;
+}>, any, {}, never>;
+export default ErrorTooltip;
+//# sourceMappingURL=ErrorTooltip.d.ts.map

package/dist/uiComponents/Popover/ErrorTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTooltip.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/ErrorTooltip.tsx"],"names":[],"mappings":";AAGA,QAAA,MAAM,YAAY;;;;mBAKjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/uiComponents/Popover/ErrorTooltip.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import BasicTooltip from './BasicTooltip';
+const ErrorTooltip = styled(BasicTooltip) `
+  --popover-outer-stroke: #e11c1c;
+  --popover-inner-stroke: #2c1c1c;
+  --popover-bg: #2c1c1c;
+  pointer-events: none !important;
+`;
+export default ErrorTooltip;

package/dist/uiComponents/Popover/MinimalTooltip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const MinimalTooltip: import("styled-components").StyledComponent<import("react").FC<{
+    className?: string | undefined;
+    showPopoverEdgeTriangle?: boolean | undefined;
+    children: import("react").ReactNode;
+}>, any, {}, never>;
+export default MinimalTooltip;
+//# sourceMappingURL=MinimalTooltip.d.ts.map

package/dist/uiComponents/Popover/MinimalTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalTooltip.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/MinimalTooltip.tsx"],"names":[],"mappings":";AAGA,QAAA,MAAM,cAAc;;;;mBAEnB,CAAA;AACD,eAAe,cAAc,CAAA"}

package/dist/uiComponents/Popover/MinimalTooltip.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import BasicTooltip from './BasicTooltip';
+const MinimalTooltip = styled(BasicTooltip) `
+  padding: 6px;
+`;
+export default MinimalTooltip;

package/dist/uiComponents/Popover/PopoverArrow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    color?: string;
+};
+declare const PopoverArrow: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default PopoverArrow;
+//# sourceMappingURL=PopoverArrow.d.ts.map

package/dist/uiComponents/Popover/PopoverArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverArrow.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/PopoverArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAsBnD,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAcD,QAAA,MAAM,YAAY,8EAmBhB,CAAA;AAEF,eAAe,YAAY,CAAA"}