react-cosmos-ui 6.0.0-alpha.9 → 6.0.0-beta.2

package/dist/plugins/RendererPreview/handleWindowMessages.js

@@ -29,8 +29,17 @@ function isValidResponse(msg) {
         msg.data.type &&
         msg.data.payload);
 }
-function updateRuntimeStatus({ getState, setState }, response) {
+function updateRuntimeStatus({ getState, setState, getMethodsOf }, response) {
     const { runtimeStatus } = getState();
+    if (response.type === 'rendererError') {
+        const notifications = getMethodsOf('notifications');
+        notifications.pushTimedNotification({
+            id: 'renderer-error',
+            type: 'error',
+            title: 'Renderer error',
+            info: 'Check the browser console for details.',
+        });
+    }
     // Errors are not of interest anymore after renderer connectivity has been
     // established. Errors that occur after renderer is connected are likely
     // errors related to specific fixtures that the user can navigate away from.

package/dist/plugins/RendererPreview/index.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import { createPlugin } from 'react-plugin';
-import { checkRendererStatus } from './checkRendererStatus.js';
+import { RendererPreview } from './RendererPreview.js';
 import { createRendererRequestHandler } from './handleRendererRequests.js';
 import { handleWindowMessages } from './handleWindowMessages.js';
-import { RendererPreview } from './RendererPreview.js';
 const { postRendererRequest, setIframeRef } = createRendererRequestHandler();
 const { onLoad, on, plug, register } = createPlugin({
     name: 'rendererPreview',
     initialState: {
-        urlStatus: 'unknown',
         runtimeStatus: 'pending',
     },
     methods: {
-        getUrlStatus,
         getRuntimeStatus,
     },
 });
@@ -24,26 +21,23 @@ onLoad((context) => {
     if (!rendererUrl) {
         return null;
     }
-    return [
-        checkRendererStatus(context, rendererUrl),
-        handleWindowMessages(context),
-    ];
+    return [handleWindowMessages(context)];
 });
 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), rendererConnected: getRendererConnected(pluginContext), runtimeStatus: pluginContext.getState().runtimeStatus, onIframeRef: handleIframeRef }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')
     register();
-function getUrlStatus({ getState }) {
-    return getState().urlStatus;
-}
 function getRuntimeStatus({ getState }) {
     return getState().runtimeStatus;
 }
 function getRendererUrl({ getMethodsOf }) {
-    return getMethodsOf('core').getWebRendererUrl();
+    return getMethodsOf('rendererCore').getRendererUrl();
+}
+function getRendererConnected({ getMethodsOf }) {
+    return getMethodsOf('rendererCore').isRendererConnected();
 }

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

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

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

@@ -1,13 +1,10 @@
-export type UrlStatus = 'unknown' | 'ok' | 'error';
 export type RuntimeStatus = 'pending' | 'connected' | 'error';
 export type RendererPreviewSpec = {
     name: 'rendererPreview';
     state: {
-        urlStatus: UrlStatus;
         runtimeStatus: RuntimeStatus;
     };
     methods: {
-        getUrlStatus(): UrlStatus;
         getRuntimeStatus(): RuntimeStatus;
     };
 };

package/dist/plugins/ResponsivePreview/ResponsivePreview/{Header.d.ts → ResponsiveHeader.d.ts}

@@ -8,6 +8,6 @@ type Props = {
     selectViewport: (viewport: ResponsiveViewport) => unknown;
     toggleScale: () => unknown;
 };
-export declare const Header: React.NamedExoticComponent<Props>;
+export declare const ResponsiveHeader: React.NamedExoticComponent<Props>;
 export declare const RotateButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export {};

package/dist/plugins/ResponsivePreview/ResponsivePreview/{Header.js → ResponsiveHeader.js}

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Space } from '../../../components/Space.js';
 import { Button8 } from '../../../components/buttons/index.js';
 import { Minimize2Icon, RefreshCcwIcon, } from '../../../components/icons/index.js';
 import { NumberInput } from '../../../components/inputs/NumberInput.js';
 import { Select } from '../../../components/inputs/Select.js';
-import { Space } from '../../../components/Space.js';
 import { blue, grey128, grey144, grey216, grey248, grey8, } from '../../../style/colors.js';
 import { quick } from '../../../style/vars.js';
 const numberInputStypes = {
@@ -12,7 +12,7 @@ const numberInputStypes = {
     focusedBg: grey8,
     focusedBoxShadow: `0 0 0.5px 1px ${blue}`,
 };
-export const Header = React.memo(function Header({ devices, selectedViewport, scaleFactor, scaled, selectViewport, toggleScale, }) {
+export const ResponsiveHeader = React.memo(function ResponsiveHeader({ devices, selectedViewport, scaleFactor, scaled, selectViewport, toggleScale, }) {
     const options = React.useMemo(() => devices.map(({ width, height, label }) => {
         const value = stringifyViewport({ width, height });
         return { value, label, width, height };

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

@@ -3,9 +3,9 @@ import React, { useCallback, useEffect, useRef, useState, } from 'react';
 import styled, { css } from 'styled-components';
 import { useDrag } from '../../../hooks/useDrag.js';
 import { grey64, grey8 } from '../../../style/colors.js';
-import { Header } from './Header.js';
+import { ResponsiveHeader } from './ResponsiveHeader.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 },
@@ -63,7 +63,7 @@ export function ResponsivePreview({ children, devices, enabled, viewport, scaled
     const scaleFactor = getViewportScaleFactor(viewport, container);
     const { maskContainerStyle, padContainerStyle, alignContainerStyle, scaleContainerStyle, } = getStyles({ container, viewport, scaled });
     return (React.createElement(Container, null,
-        React.createElement(Header, { devices: devices, selectedViewport: viewport, scaleFactor: scaleFactor, scaled: scaled, selectViewport: setViewport, toggleScale: () => setScaled(!scaled) }),
+        React.createElement(ResponsiveHeader, { devices: devices, selectedViewport: viewport, scaleFactor: scaleFactor, scaled: scaled, selectViewport: setViewport, toggleScale: () => setScaled(!scaled) }),
         React.createElement("div", { key: "preview", ref: handleContainerRef, style: maskContainerStyle },
             React.createElement("div", { style: padContainerStyle },
                 React.createElement("div", { key: "container", style: alignContainerStyle },

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     selected: boolean;
     onToggle: () => unknown;

package/dist/plugins/ResponsivePreview/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createPlugin } from 'react-plugin';
 import { ResponsivePreview } from './ResponsivePreview/ResponsivePreview.js';
-import { DEFAULT_DEVICES, DEFAULT_VIEWPORT_STATE, VIEWPORT_STORAGE_KEY, } from './shared.js';
 import { ToggleButton } from './ToggleButton/index.js';
+import { DEFAULT_DEVICES, DEFAULT_VIEWPORT_STATE, VIEWPORT_STORAGE_KEY, } from './shared.js';
 const { plug, namedPlug, register } = createPlugin({
     name: 'responsivePreview',
     defaultConfig: {
@@ -10,20 +10,19 @@ 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;
-    const core = getMethodsOf('core');
+    const rendererCore = getMethodsOf('rendererCore');
     const viewportState = getViewportState(pluginContext);
     const { enabled, viewport } = viewportState;
-    if (!core.getWebRendererUrl())
+    if (!rendererCore.getRendererUrl())
         return null;
     return (React.createElement(ToggleButton, { selected: enabled, onToggle: () => {
             if (enabled) {

package/dist/plugins/ResponsivePreview/shared.js

@@ -1,19 +1,22 @@
 export const DEFAULT_DEVICES = [
-    { label: 'iPhone 5/SE', width: 320, height: 568 },
-    { label: 'iPhone 6/7/8', width: 375, height: 667 },
-    { label: 'iPhone 6/7/8 Plus', width: 414, height: 736 },
-    { label: 'iPhone X', width: 375, height: 812 },
-    { label: 'iPad', width: 768, height: 1024 },
-    { label: 'iPad Pro', width: 1024, height: 1366 },
+    { label: 'iPhone SE', width: 375, height: 667 },
+    { label: 'iPhone 12/13/14', width: 390, height: 844 },
+    { label: 'iPhone 14 Pro', width: 393, height: 852 },
+    { label: 'iPhone 14 Plus', width: 428, height: 926 },
+    { label: 'iPhone 14 Pro Max', width: 430, height: 932 },
+    { label: 'iPad mini', width: 744, height: 1133 },
+    { label: 'iPad', width: 820, height: 1180 },
+    { label: 'iPad Pro 11"', width: 834, height: 1194 },
+    { label: 'iPad Pro 12.9"', width: 1024, height: 1366 },
     { label: 'Small laptop', width: 1280, height: 720 },
     { label: 'Laptop', width: 1366, height: 768 },
-    { label: 'Large laptop', width: 1600, height: 900 },
-    { label: 'Full HD', width: 1920, height: 1080 },
-    { label: 'Quad HD', width: 2560, height: 1440 },
+    { label: 'Large laptop', width: 1536, height: 864 },
+    { label: '1080p', width: 1920, height: 1080 },
+    { label: '1440p', width: 2560, height: 1440 },
 ];
 export const VIEWPORT_STORAGE_KEY = 'responsiveViewportState';
 export const DEFAULT_VIEWPORT_STATE = {
     enabled: false,
     scaled: true,
-    viewport: { width: 320, height: 568 },
+    viewport: { width: 375, height: 667 },
 };

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

@@ -1,9 +1,7 @@
-import { FixtureId } from 'react-cosmos-core';
+/// <reference types="react" />
 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/{ContentOverlay/shared.d.ts → Root/HomeOverlay/ContentOverlay.d.ts}

@@ -1,8 +1,5 @@
-import { PluginContext } from 'react-plugin';
-import { ContentOverlaySpec } from './spec.js';
-export type ContentOverlayContext = PluginContext<ContentOverlaySpec>;
 export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OverlayBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IllustrationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { screenGrey1, screenGrey2, screenGrey5, screenGrey6, screenPrimary2, screenPrimary3, } from '../../style/colors.js';
+import { screenGrey1, screenGrey2, screenGrey5, screenGrey6, screenPrimary2, screenPrimary3, } from '../../../style/colors.js';
 export const OverlayContainer = styled.div `
   position: absolute;
   top: 0;
@@ -8,12 +8,12 @@ export const OverlayContainer = styled.div `
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-items: flex-start;
+  justify-content: flex-start;
   align-items: flex-start;
   background: ${screenGrey6};
   overflow: auto;
 `;
-export const ContentContainer = styled.div `
+export const OverlayBody = styled.div `
   flex-shrink: 0;
   display: flex;
   flex-direction: row;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+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.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     keys: string[];
     label: string;

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.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onShowWelcome: () => unknown;
 };

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 { BlankCanvasIllustration } from '../../../components/illustrations/BlankCanvas.js';
+import { screenGrey3 } from '../../../style/colors.js';
+import { IllustrationContainer, OverlayBody, OverlayContainer, SecondaryButton, TextContainer, } from './ContentOverlay.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"),

package/dist/plugins/{ContentOverlay → Root/HomeOverlay}/WelcomeCosmos.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onDismissWelcome: () => unknown;
 };

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

@@ -0,0 +1,159 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AstronautIllustration } from '../../../components/illustrations/Astronaut.js';
+import { screenGrey1, screenGrey3, screenGrey5, screenPrimary1, screenPrimary2, screenPrimary3, } from '../../../style/colors.js';
+import { IllustrationContainer, NoWrap, OverlayBody, OverlayContainer, SecondaryButton, TextContainer, } from './ContentOverlay.js';
+export function WelcomeCosmos({ onDismissWelcome }) {
+    return (React.createElement(OverlayContainer, { "data-testid": "welcome" },
+        React.createElement(OverlayBody, null,
+            React.createElement(TextContainer, null,
+                React.createElement(Header, null,
+                    "Welcome to ",
+                    React.createElement(NoWrap, null, "React Cosmos")),
+                React.createElement(List, null,
+                    React.createElement("li", null,
+                        React.createElement(Bullet, null),
+                        React.createElement("span", null,
+                            React.createElement(Link, { href: "https://github.com/react-cosmos/react-cosmos/tree/main/docs", rel: "noopener noreferrer", target: "_blank" },
+                                React.createElement("strong", null, "Read the docs")),
+                            ' ',
+                            "to get the most out of React Cosmos.",
+                            React.createElement("br", null),
+                            "Chat with us on",
+                            ' ',
+                            React.createElement(Link, { href: "https://discord.gg/3X95VgfnW5", rel: "noopener noreferrer", target: "_blank" }, "Discord"),
+                            ". Report detailed issues on",
+                            ' ',
+                            React.createElement(Link, { href: "https://github.com/react-cosmos/react-cosmos/issues", rel: "noopener noreferrer", target: "_blank" }, "GitHub"),
+                            ".")),
+                    React.createElement("li", null,
+                        React.createElement(Bullet, null),
+                        React.createElement("span", null,
+                            React.createElement(Link, { href: "https://github.com/users/skidding/sponsorship", rel: "noopener noreferrer", target: "_blank" },
+                                React.createElement("strong", null, "Become a Sponsor")),
+                            ' ',
+                            "to invest in the future of React Cosmos.",
+                            React.createElement("br", null),
+                            `Don't worry if you can't. `,
+                            React.createElement(Highlight, null, "React Cosmos will always be free.")))),
+                React.createElement(Paragraph, null,
+                    React.createElement(ActionLink, { href: "https://forms.gle/yvoie73Rfo6Zy7no7", rel: "noopener noreferrer", target: "_blank" }, "share your feedback"),
+                    React.createElement(SecondaryButton, { onClick: onDismissWelcome }, "hide this screen"))),
+            React.createElement(IllustrationContainer, null,
+                React.createElement(AstronautIllustration, { title: "astronaut" })))));
+}
+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: 24px;
+  }
+`;
+const Bullet = styled.span `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin: 6px 16px 0 0;
+  padding: 0 0 0 0;
+  border-radius: 100%;
+  font-size: 18px;
+  font-weight: 600;
+  background: ${screenGrey5};
+  color: ${screenGrey3};
+
+  ::after {
+    position: absolute;
+    content: '';
+    width: 6px;
+    height: 6px;
+    top: 13px;
+    left: 13px;
+    border-radius: 100%;
+    background: ${screenGrey3};
+    transform: rotate(0deg);
+  }
+`;
+const Link = styled.a `
+  color: ${screenGrey1};
+`;
+const Highlight = styled.span `
+  padding: 2px 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 200, 0.88);
+  color: black;
+`;
+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;
+  transform: translate3d(0, 0, 0);
+  animation: pulse 10s ease-out infinite;
+  outline: none;
+
+  :focus {
+    box-shadow: 0 0 0px 2px ${screenPrimary1};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+
+  @keyframes pulse {
+    21.25% {
+      background: ${screenPrimary3};
+    }
+    25% {
+      background: ${screenPrimary2};
+    }
+    30% {
+      background: ${screenPrimary3};
+    }
+  }
+`;

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

@@ -0,0 +1,7 @@
+import { RootContext } from '../shared.js';
+export declare const WELCOME_DISMISS_STORAGE_KEY = "welcomeDismissedAt";
+export declare function useWelcomeDismiss(context: RootContext): {
+    isWelcomeDismissed: () => boolean;
+    onDismissWelcome: () => void;
+    onShowWelcome: () => void;
+};

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

@@ -4,13 +4,15 @@ const SHOW_AGAIN_IN = 90 * 86400 * 1000; // ~3 months
 export function useWelcomeDismiss(context) {
     const { getMethodsOf } = context;
     const storage = getMethodsOf('storage');
-    const welcomeDismissedAt = storage.getItem(WELCOME_DISMISS_STORAGE_KEY) || 0;
-    // Show welcome screen again after a while
-    const welcomeDismissed = welcomeDismissedAt > Date.now() - SHOW_AGAIN_IN;
     const onDismissWelcome = React.useCallback(() => storage.setItem(WELCOME_DISMISS_STORAGE_KEY, Date.now()), [storage]);
     const onShowWelcome = React.useCallback(() => storage.setItem(WELCOME_DISMISS_STORAGE_KEY, 0), [storage]);
+    function isWelcomeDismissed() {
+        const welcomeDismissedAt = storage.getItem(WELCOME_DISMISS_STORAGE_KEY) || 0;
+        // Show welcome screen again after a while
+        return welcomeDismissedAt > Date.now() - SHOW_AGAIN_IN;
+    }
     return {
-        welcomeDismissed,
+        isWelcomeDismissed,
         onDismissWelcome,
         onShowWelcome,
     };

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

@@ -9,7 +9,7 @@ type Props = {
     rendererActionOrder: string[];
     onOpenNav: () => unknown;
     onTogglePanel: () => unknown;
-    onFixtureSelect: (fixtureId: FixtureId) => unknown;
+    onReloadRenderer: () => unknown;
     onClose: () => unknown;
 };
 export declare const RendererHeader: React.NamedExoticComponent<Props>;

package/dist/plugins/Root/RendererHeader.js

@@ -6,25 +6,33 @@ import { MenuIcon, RotateCcwIcon, SlidersIcon, XCircleIcon, } from '../../compon
 import { FixtureActionSlot } from '../../slots/FixtureActionSlot.js';
 import { RendererActionSlot } from '../../slots/RendererActionSlot.js';
 import { grey176, grey32, white10 } from '../../style/colors.js';
-export const RendererHeader = React.memo(function RendererHeader({ fixtureItems, fixtureId, navOpen, panelOpen, fixtureActionOrder, rendererActionOrder, onOpenNav, onTogglePanel, onFixtureSelect, onClose, }) {
+export const RendererHeader = React.memo(function RendererHeader({ fixtureItems, fixtureId, navOpen, panelOpen, fixtureActionOrder, rendererActionOrder, onOpenNav, onTogglePanel, onReloadRenderer, onClose, }) {
     const fixtureItem = findFixtureItemById(fixtureItems, fixtureId);
     const slotProps = React.useMemo(() => ({ fixtureId }), [fixtureId]);
-    const onReload = React.useCallback(() => onFixtureSelect(fixtureId), [fixtureId, onFixtureSelect]);
     return (React.createElement(Container, null,
         React.createElement(Left, null,
             !navOpen && (React.createElement(React.Fragment, null,
                 React.createElement(IconButton32, { icon: React.createElement(MenuIcon, null), title: "Show fixture list", selected: false, onClick: onOpenNav }),
                 React.createElement(ButtonSeparator, null))),
             React.createElement(IconButton32, { icon: React.createElement(XCircleIcon, null), title: "Close fixture", onClick: onClose }),
-            React.createElement(IconButton32, { icon: React.createElement(RotateCcwIcon, null), title: "Reload fixture", onClick: onReload }),
-            React.createElement(FixtureActionSlot, { slotProps: slotProps, plugOrder: fixtureActionOrder })),
+            React.createElement(IconButton32, { icon: React.createElement(RotateCcwIcon, null), title: "Reload fixture", onClick: onReloadRenderer }),
+            fixtureItem && (React.createElement(FixtureActionSlotContainer, { fixtureActionOrder: fixtureActionOrder, fixtureItem: fixtureItem }))),
         fixtureItem && React.createElement(FixtureName, null, getFixtureName(fixtureItem)),
         React.createElement(Right, null,
             React.createElement(RendererActionSlot, { slotProps: slotProps, plugOrder: rendererActionOrder }),
             React.createElement(IconButton32, { icon: React.createElement(SlidersIcon, null), title: "Toggle control panel", selected: panelOpen, onClick: onTogglePanel }))));
 });
+function FixtureActionSlotContainer({ fixtureActionOrder, fixtureItem, }) {
+    const slotProps = React.useMemo(() => ({ fixtureItem }), [fixtureItem]);
+    return (React.createElement(FixtureActionSlot, { slotProps: slotProps, plugOrder: fixtureActionOrder }));
+}
 function findFixtureItemById(fixtureItems, fixtureId) {
-    return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+    if (fixtureId.name) {
+        return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+    }
+    // When a multi fixture is selected by path only, the first of its named
+    // fixtures will be selected.
+    return fixtureItems.find(fixtureItem => fixtureItem.fixtureId.path === fixtureId.path);
 }
 function getFixtureName({ name, fileName }) {
     return name ? `${fileName} ${name}` : fileName;