react-cosmos-ui 6.0.0-alpha.13 → 6.0.0-alpha.14

package/dist/playground.js

@@ -37,5 +37,11 @@ async function loadPluginScript(scriptPath) {
     const normalizedPath = scriptPath.startsWith('/')
         ? scriptPath
         : `/${scriptPath}`;
-    await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+    try {
+        await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+    }
+    catch (err) {
+        console.log(`[Cosmos] Failed to load plugin script ${scriptPath}`);
+        console.log(err);
+    }
 }

package/dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts

@@ -1,7 +1,7 @@
 type Props = {
-    validFixtureSelected: boolean;
+    fixtureSelected: boolean;
     onOpen: () => unknown;
     onCloseNav: () => unknown;
 };
-export declare function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureSearch/FixtureSearchHeader.js

@@ -4,7 +4,7 @@ import { IconButton32 } from '../../components/buttons/index.js';
 import { ChevronLeftIcon, SearchIcon } from '../../components/icons/index.js';
 import { KeyBox } from '../../components/KeyBox.js';
 import { blue, grey160, grey32, white10 } from '../../style/colors.js';
-export function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }) {
+export function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }) {
     return (React.createElement(Container, null,
         React.createElement(SearchButton, { onClick: onOpen },
             React.createElement(SearchIconContainer, null,
@@ -13,7 +13,7 @@ export function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav,
             React.createElement(KeyBox, { value: '⌘', bgColor: white10, textColor: grey160, size: 20 }),
             React.createElement(KeyBox, { value: 'P', bgColor: white10, textColor: grey160, size: 20 })),
         React.createElement(NavButtonContainer, null,
-            React.createElement(IconButton32, { icon: React.createElement(ChevronLeftIcon, null), title: "Hide fixture list", disabled: !validFixtureSelected, selected: false, onClick: onCloseNav }))));
+            React.createElement(IconButton32, { icon: React.createElement(ChevronLeftIcon, null), title: "Hide fixture list", disabled: !fixtureSelected, selected: false, onClick: onCloseNav }))));
 }
 const Container = styled.div `
   display: flex;

package/dist/plugins/FixtureSearch/index.js

@@ -18,6 +18,7 @@ onLoad(pluginContext => {
 });
 namedPlug('navRow', 'fixtureSearch', ({ pluginContext, slotProps }) => {
     const { getMethodsOf } = pluginContext;
+    const router = getMethodsOf('router');
     const rendererCore = getMethodsOf('rendererCore');
     const fixtures = rendererCore.getFixtures();
     const onOpen = useOnOpen(pluginContext);
@@ -26,7 +27,7 @@ namedPlug('navRow', 'fixtureSearch', ({ pluginContext, slotProps }) => {
     if (Object.keys(fixtures).length === 0) {
         return null;
     }
-    return (React.createElement(FixtureSearchHeader, { validFixtureSelected: rendererCore.isValidFixtureSelected(), onOpen: onOpen, onCloseNav: onCloseNav }));
+    return (React.createElement(FixtureSearchHeader, { fixtureSelected: router.getSelectedFixtureId() !== null, onOpen: onOpen, onCloseNav: onCloseNav }));
 });
 namedPlug('global', 'fixtureSearch', ({ pluginContext }) => {
     const { getState, getMethodsOf } = pluginContext;

package/dist/plugins/FixtureTree/FixtureTreeContainer.d.ts

@@ -4,11 +4,10 @@ type Props = {
     fixturesDir: string;
     fixtureFileSuffix: string;
     selectedFixtureId: null | FixtureId;
-    rendererConnected: boolean;
     fixtures: FixtureList;
     expansion: TreeExpansion;
     selectFixture: (fixtureId: FixtureId) => void;
     setExpansion: (expansion: TreeExpansion) => unknown;
 };
-export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, rendererConnected, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
+export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureTree/FixtureTreeContainer.js

@@ -6,11 +6,9 @@ import { BlankState } from './BlankState.js';
 import { FixtureTree } from './FixtureTree/FixtureTree.js';
 import { FixtureTreeHeader } from './FixtureTreeHeader.js';
 import { useScrollToSelected } from './useScrollToSelected.js';
-export function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, rendererConnected, fixtures, expansion, selectFixture, setExpansion, }) {
+export function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }) {
     const rootNode = useMemo(() => createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix }), [fixtures, fixturesDir, fixtureFileSuffix]);
     const { containerRef, selectedRef } = useScrollToSelected(selectedFixtureId);
-    if (!rendererConnected)
-        return React.createElement(TreeContainer, null);
     if (Object.keys(fixtures).length === 0) {
         return (React.createElement(TreeContainer, null,
             React.createElement(BlankState, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix })));

package/dist/plugins/FixtureTree/index.js

@@ -18,7 +18,7 @@ namedPlug('navRow', 'fixtureTree', ({ pluginContext }) => {
     const rendererCore = getMethodsOf('rendererCore');
     const expansion = getTreeExpansion(storage);
     const setExpansionMemo = useCallback((newExpansion) => setTreeExpansion(storage, newExpansion), [storage]);
-    return (React.createElement(FixtureTreeContainer, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), fixtures: rendererCore.getFixtures(), expansion: expansion, selectFixture: router.selectFixture, setExpansion: setExpansionMemo }));
+    return (React.createElement(FixtureTreeContainer, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, selectedFixtureId: router.getSelectedFixtureId(), fixtures: rendererCore.getFixtures(), expansion: expansion, selectFixture: router.selectFixture, setExpansion: setExpansionMemo }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/RendererCore/index.js

@@ -1,10 +1,12 @@
 import { createPlugin } from 'react-plugin';
-import { isValidFixtureSelected } from './isValidFixtureSelected.js';
 import { onRouterFixtureChange } from './onRouterFixtureChange.js';
 import { receiveResponse } from './receiveResponse/index.js';
 import { setFixtureState } from './setFixtureState.js';
-const { on, register } = createPlugin({
+const { on, register, onLoad } = createPlugin({
     name: 'rendererCore',
+    defaultConfig: {
+        fixtures: {},
+    },
     initialState: {
         connectedRendererIds: [],
         primaryRendererId: null,
@@ -17,12 +19,15 @@ const { on, register } = createPlugin({
         getFixtures,
         getFixtureState,
         isRendererConnected,
-        isValidFixtureSelected,
         setFixtureState,
         selectPrimaryRenderer,
         receiveResponse,
     },
 });
+onLoad(({ getConfig, setState }) => {
+    const { fixtures } = getConfig();
+    setState(prevState => ({ ...prevState, fixtures }));
+});
 on('router', { fixtureChange: onRouterFixtureChange });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/RendererCore/spec.d.ts

@@ -1,6 +1,9 @@
 import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
 export type RendererCoreSpec = {
     name: 'rendererCore';
+    config: {
+        fixtures: FixtureList;
+    };
     state: {
         connectedRendererIds: RendererId[];
         primaryRendererId: null | RendererId;
@@ -13,7 +16,6 @@ export type RendererCoreSpec = {
         getFixtures(): FixtureList;
         getFixtureState(): FixtureState;
         isRendererConnected(): boolean;
-        isValidFixtureSelected(): boolean;
         setFixtureState(stateUpdater: StateUpdater<FixtureState>): void;
         selectPrimaryRenderer(primaryRendererId: RendererId): void;
         receiveResponse(msg: MessageType): void;

package/dist/plugins/RendererPreview/RendererOverlay/RendererNotResponding.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Slot } from 'react-plugin';
+import styled from 'styled-components';
+import { IllustrationContainer, NoWrap, OverlayBody, RendererOverlayContainer, TextContainer, } from '../../../components/ContentOverlay.js';
+import { ArtificialIntelligenceIllustration } from '../../../components/illustrations/ArtificialIntelligence.js';
+import { screenGrey3, screenGrey5, screenPrimary2, screenPrimary3, } from '../../../style/colors.js';
+export function RendererNotResponding() {
+    return (React.createElement(RendererOverlayContainer, null,
+        React.createElement(OverlayBody, null,
+            React.createElement(TextContainer, null,
+                React.createElement(Header, null,
+                    "Renderer ",
+                    React.createElement(NoWrap, null, "not responding")),
+                React.createElement(Paragraph, null, `It's usually one of the following...`),
+                React.createElement(List, null,
+                    React.createElement("li", null,
+                        React.createElement(No, null, "1"),
+                        React.createElement("span", null,
+                            React.createElement("strong", null, "Please check your terminal for errors."),
+                            React.createElement("br", null),
+                            "Your build might be broken.")),
+                    React.createElement("li", null,
+                        React.createElement(No, null, "2"),
+                        React.createElement("span", null,
+                            React.createElement(Slot, { name: "rendererError" },
+                                "If you use a bundler plugin,",
+                                ' ',
+                                React.createElement("strong", null,
+                                    "make sure",
+                                    React.createElement("br", null),
+                                    "your build is generating an index.html page."))))),
+                React.createElement(Paragraph, null,
+                    React.createElement(ActionLink, { href: "https://discord.gg/3X95VgfnW5", rel: "noopener noreferrer", target: "_blank" }, "ask for help"))),
+            React.createElement(IllustrationContainer, null,
+                React.createElement(ArtificialIntelligenceIllustration, { title: "robot" })))));
+}
+const Header = styled.h1 `
+  position: relative;
+  margin: 0 0 64px 0;
+  color: ${screenPrimary2};
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.2em;
+  text-transform: uppercase;
+  letter-spacing: 0.015em;
+
+  ::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 0;
+    width: 64px;
+    height: 3px;
+    background: ${screenPrimary2};
+  }
+`;
+const Paragraph = styled.p `
+  margin: 16px 0;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+`;
+const List = styled.ul `
+  margin: 0 0 48px 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 12px;
+  }
+`;
+const No = styled.span `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  margin: 6px 16px 0 0;
+  padding: 0 6px 0 0;
+  border-radius: 100%;
+  font-size: 18px;
+  font-weight: 600;
+  background: ${screenGrey5};
+  color: ${screenGrey3};
+
+  ::after {
+    content: '.';
+  }
+`;
+const actionLinkHeight = 36;
+const ActionLink = styled.a `
+  display: inline-block;
+  height: ${actionLinkHeight}px;
+  padding: 0 16px;
+  background: ${screenPrimary3};
+  color: #fff;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: ${actionLinkHeight}px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+`;

package/dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.d.ts

@@ -0,0 +1,7 @@
+import { RuntimeStatus, UrlStatus } from '../spec.js';
+type Props = {
+    rendererPreviewUrlStatus: UrlStatus;
+    rendererPreviewRuntimeStatus: RuntimeStatus;
+};
+export declare function RendererOverlay({ rendererPreviewUrlStatus, rendererPreviewRuntimeStatus, }: Props): JSX.Element | null;
+export {};

package/dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RendererNotResponding } from './RendererNotResponding.js';
+import { WaitingForRenderer } from './WaitingForRenderer.js';
+export function RendererOverlay({ rendererPreviewUrlStatus, rendererPreviewRuntimeStatus, }) {
+    if (rendererPreviewUrlStatus === 'error') {
+        return React.createElement(RendererNotResponding, null);
+    }
+    if (rendererPreviewRuntimeStatus === 'pending') {
+        return React.createElement(WaitingForRenderer, null);
+    }
+    return null;
+}

package/dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.d.ts

@@ -0,0 +1 @@
+export declare function WaitingForRenderer(): JSX.Element;

package/dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { OverlayBody, RendererOverlayContainer, TextContainer, } from '../../../components/ContentOverlay.js';
+import { DelayedLoading } from '../../../components/DelayedLoading.js';
+export function WaitingForRenderer() {
+    const [count, setCount] = React.useState(0);
+    React.useEffect(() => {
+        const interval = setInterval(() => setCount(prev => prev + 1), 600);
+        return () => clearInterval(interval);
+    });
+    const dots = Array((count % 3) + 1)
+        .fill('.')
+        .join('');
+    return (React.createElement(DelayedLoading, { delay: 500 },
+        React.createElement(RendererOverlayContainer, null,
+            React.createElement(OverlayBody, null,
+                React.createElement(TextContainer, null,
+                    React.createElement(Message, null,
+                        "Waiting for renderer",
+                        dots))))));
+}
+const Message = styled.p `
+  margin: 0 auto;
+  width: 210px;
+  font-weight: 600;
+  text-transform: uppercase;
+  white-space: nowrap;
+`;

package/dist/plugins/RendererPreview/RendererPreview.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import { RuntimeStatus, UrlStatus } from './spec.js';
 export type OnIframeRef = (elRef: null | HTMLIFrameElement) => void;
 type Props = {
     rendererUrl: null | string;
+    urlStatus: UrlStatus;
+    runtimeStatus: RuntimeStatus;
     onIframeRef: OnIframeRef;
 };
 export declare const RendererPreview: React.NamedExoticComponent<Props>;

package/dist/plugins/RendererPreview/RendererPreview.js

@@ -1,19 +1,25 @@
 import React from 'react';
 import { Slot } from 'react-plugin';
 import styled from 'styled-components';
-export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, onIframeRef, }) {
+import { rendererBg } from '../../style/vars.js';
+import { RendererOverlay } from './RendererOverlay/RendererOverlay.js';
+import { WaitingForRenderer } from './RendererOverlay/WaitingForRenderer.js';
+export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, urlStatus, runtimeStatus, onIframeRef, }) {
     if (!rendererUrl) {
-        return null;
+        // This code path is used when Cosmos is in React Native mode
+        return (React.createElement(Container, null, runtimeStatus === 'pending' && React.createElement(WaitingForRenderer, null)));
     }
     return (React.createElement(Slot, { name: "rendererPreviewOuter" },
         React.createElement(Container, null,
-            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: rendererUrl, frameBorder: 0, allow: "clipboard-write *" }))));
+            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: rendererUrl, frameBorder: 0, allow: "clipboard-write *" }),
+            React.createElement(RendererOverlay, { rendererPreviewUrlStatus: urlStatus, rendererPreviewRuntimeStatus: runtimeStatus }))));
 });
 const Container = styled.div `
+  position: relative;
   width: 100%;
   height: 100%;
   background-color: #fff;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: ${rendererBg};
 `;
 const Iframe = styled.iframe `
   display: block;

package/dist/plugins/RendererPreview/index.js

@@ -33,7 +33,7 @@ plug('rendererPreview', ({ pluginContext }) => {
     function handleIframeRef(ref) {
         setIframeRef(pluginContext, ref);
     }
-    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), onIframeRef: handleIframeRef }));
+    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), urlStatus: pluginContext.getState().urlStatus, runtimeStatus: pluginContext.getState().runtimeStatus, onIframeRef: handleIframeRef }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/RendererPreview/shared.d.ts

@@ -1,7 +1,5 @@
 import { PluginContext } from 'react-plugin';
-import { RendererPreviewSpec } from './spec.js';
-export type UrlStatus = 'unknown' | 'ok' | 'error';
-export type RuntimeStatus = 'pending' | 'connected' | 'error';
+import { RendererPreviewSpec, RuntimeStatus, UrlStatus } from './spec.js';
 export type State = {
     urlStatus: UrlStatus;
     runtimeStatus: RuntimeStatus;

package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.d.ts

@@ -6,9 +6,8 @@ type Props = {
     enabled: boolean;
     viewport: ResponsiveViewport;
     scaled: boolean;
-    validFixtureSelected: boolean;
     setViewport: Dispatch<SetStateAction<ResponsiveViewport>>;
     setScaled: (scaled: boolean) => unknown;
 };
-export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, validFixtureSelected, setViewport, setScaled, }: Props): JSX.Element;
+export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }: Props): JSX.Element;
 export {};

package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.js

@@ -5,7 +5,7 @@ import { useDrag } from '../../../hooks/useDrag.js';
 import { grey64, grey8 } from '../../../style/colors.js';
 import { Header } from './Header.js';
 import { getStyles, getViewportScaleFactor, responsivePreviewBorderWidth, responsivePreviewPadding, stretchStyle, } from './style.js';
-export function ResponsivePreview({ children, devices, enabled, viewport, scaled, validFixtureSelected, setViewport, setScaled, }) {
+export function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }) {
     const [container, setContainer] = useState(null);
     const onWidthChange = useCallback((width) => setViewport(prevViewport => ({ ...prevViewport, width })), [setViewport]);
     const onHeightChange = useCallback((height) => setViewport(prevViewport => ({ ...prevViewport, height })), [setViewport]);
@@ -53,7 +53,7 @@ export function ResponsivePreview({ children, devices, enabled, viewport, scaled
     // whenever switching between responsive and non responsive mode. By
     // returning the same element nesting between states for Preview the
     // component instances are preserved and the transition is seamless.
-    if (!validFixtureSelected || !enabled || !container) {
+    if (!enabled || !container) {
         return (React.createElement(Container, null,
             React.createElement("div", { key: "preview", ref: handleContainerRef, style: stretchStyle },
                 React.createElement("div", { style: stretchStyle },

package/dist/plugins/ResponsivePreview/index.js

@@ -10,13 +10,12 @@ const { plug, namedPlug, register } = createPlugin({
     },
 });
 plug('rendererPreviewOuter', ({ children, pluginContext }) => {
-    const { getConfig, getMethodsOf } = pluginContext;
+    const { getConfig } = pluginContext;
     const { devices } = getConfig();
-    const rendererCore = getMethodsOf('rendererCore');
     const { enabled, viewport, scaled } = getViewportState(pluginContext);
     const onViewportChange = useViewportChange(pluginContext);
     const onScaledChange = useScaledChange(pluginContext);
-    return (React.createElement(ResponsivePreview, { devices: devices, enabled: enabled, viewport: viewport, scaled: scaled, validFixtureSelected: rendererCore.isValidFixtureSelected(), setViewport: onViewportChange, setScaled: onScaledChange }, children));
+    return (React.createElement(ResponsivePreview, { devices: devices, enabled: enabled, viewport: viewport, scaled: scaled, setViewport: onViewportChange, setScaled: onScaledChange }, children));
 });
 namedPlug('rendererAction', 'responsivePreview', ({ pluginContext }) => {
     const { getMethodsOf } = pluginContext;

package/dist/plugins/Root/GlobalHeader.d.ts

@@ -1,9 +1,6 @@
-import { FixtureId } from 'react-cosmos-core';
 type Props = {
-    selectedFixtureId: FixtureId | null;
     rendererConnected: boolean;
-    validFixtureSelected: boolean;
     globalActionOrder: string[];
 };
-export declare function GlobalHeader({ selectedFixtureId, rendererConnected, validFixtureSelected, globalActionOrder, }: Props): JSX.Element;
+export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): JSX.Element;
 export {};

package/dist/plugins/Root/GlobalHeader.js

@@ -1,23 +1,10 @@
 import React from 'react';
 import { ArraySlot } from 'react-plugin';
 import styled from 'styled-components';
-import { grey176, grey32, white10 } from '../../style/colors.js';
-export function GlobalHeader({ selectedFixtureId, rendererConnected, validFixtureSelected, globalActionOrder, }) {
-    function getMessage() {
-        if (!rendererConnected) {
-            return React.createElement(Message, null, "Waiting for renderer...");
-        }
-        if (!selectedFixtureId) {
-            return React.createElement(Message, null, "No fixture selected");
-        }
-        if (!validFixtureSelected) {
-            return React.createElement(Message, null, "Fixture not found");
-        }
-        return null;
-    }
+import { grey32, white10 } from '../../style/colors.js';
+export function GlobalHeader({ rendererConnected, globalActionOrder }) {
     return (React.createElement(Container, null,
         React.createElement(Left, null),
-        getMessage(),
         React.createElement(Right, null, rendererConnected && (React.createElement(ArraySlot, { name: "globalAction", plugOrder: globalActionOrder })))));
 }
 const Container = styled.div `
@@ -49,11 +36,3 @@ const Right = styled(Actions) `
   flex-direction: row;
   align-items: center;
 `;
-const Message = styled.div `
-  padding: 4px;
-  color: ${grey176};
-  line-height: 24px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;

package/dist/plugins/Root/HomeOverlay/HomeOverlay.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    welcomeDismissed: boolean;
+    onDismissWelcome: () => unknown;
+    onShowWelcome: () => unknown;
+};
+export declare function HomeOverlay({ welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
+export {};

package/dist/plugins/Root/HomeOverlay/HomeOverlay.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NoFixtureSelected } from './NoFixtureSelected.js';
+import { WelcomeCosmos } from './WelcomeCosmos.js';
+export function HomeOverlay({ welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
+    return welcomeDismissed ? (React.createElement(NoFixtureSelected, { onShowWelcome: onShowWelcome })) : (React.createElement(WelcomeCosmos, { onDismissWelcome: onDismissWelcome }));
+}

package/dist/plugins/{ContentOverlay → Root/HomeOverlay}/KeyShortcut.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { KeyBox } from '../../components/KeyBox.js';
-import { screenGrey1, screenGrey5 } from '../../style/colors.js';
+import { KeyBox } from '../../../components/KeyBox.js';
+import { screenGrey1, screenGrey5 } from '../../../style/colors.js';
 export function KeyShortcut({ keys, label }) {
     return (React.createElement(Container, null,
         React.createElement(Keys, null, keys.map(key => (React.createElement(KeyBox, { key: key, value: key, bgColor: screenGrey5, textColor: screenGrey1, size: 26, fontSize: 16 })))),

package/dist/plugins/{ContentOverlay → Root/HomeOverlay}/NoFixtureSelected.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { BlankCanvasIllustration } from '../../components/illustrations/BlankCanvas.js';
-import { screenGrey3 } from '../../style/colors.js';
+import { IllustrationContainer, OverlayBody, OverlayContainer, SecondaryButton, TextContainer, } from '../../../components/ContentOverlay.js';
+import { BlankCanvasIllustration } from '../../../components/illustrations/BlankCanvas.js';
+import { screenGrey3 } from '../../../style/colors.js';
 import { KeyShortcut } from './KeyShortcut.js';
-import { ContentContainer, IllustrationContainer, SecondaryButton, TextContainer, } from './shared.js';
 export function NoFixtureSelected({ onShowWelcome }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ContentContainer, null,
+    return (React.createElement(OverlayContainer, { "data-testid": "blank" },
+        React.createElement(OverlayBody, null,
             React.createElement(TextContainer, null,
                 React.createElement(KeyShortcut, { keys: ['⌘', 'P'], label: "Search fixtures" }),
                 React.createElement(Subtitle, null, "FIXTURE SELECTED"),