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

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

@@ -1,10 +1,9 @@
+/// <reference types="react" />
 import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
 type Props = {
-    storageCacheReady: boolean;
     fixtureItems: FlatFixtureTreeItem[];
     selectedFixtureId: FixtureId | null;
     rendererConnected: boolean;
-    validFixtureSelected: boolean;
     fixtureState: FixtureState;
     navOpen: boolean;
     panelOpen: boolean;
@@ -18,11 +17,14 @@ type Props = {
     rendererActionOrder: string[];
     onToggleNav: () => unknown;
     onTogglePanel: () => unknown;
-    onFixtureSelect: (fixtureId: FixtureId) => unknown;
-    onFixtureClose: () => unknown;
+    onReloadRenderer: () => unknown;
+    onCloseFixture: () => unknown;
     onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
     setNavWidth: (width: number) => unknown;
     setPanelWidth: (width: number) => unknown;
+    welcomeDismissed: boolean;
+    onDismissWelcome: () => unknown;
+    onShowWelcome: () => unknown;
 };
-export declare function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }: Props): JSX.Element;
+export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
 export {};

package/dist/plugins/Root/Root.js

@@ -5,9 +5,10 @@ import { useDrag } from '../../hooks/useDrag.js';
 import { NavRowSlot } from '../../slots/NavRowSlot.js';
 import { grey32, grey8, white10 } from '../../style/colors.js';
 import { GlobalHeader } from './GlobalHeader.js';
+import { HomeOverlay } from './HomeOverlay/HomeOverlay.js';
 import { RendererHeader } from './RendererHeader.js';
 import { SidePanel } from './SidePanel.js';
-export function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }) {
+export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
     const navDrag = useDrag({
         value: navWidth,
         onChange: setNavWidth,
@@ -17,29 +18,27 @@ export function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rende
         reverse: true,
         onChange: setPanelWidth,
     });
-    if (!storageCacheReady) {
-        return React.createElement(Container, null);
-    }
-    const showNav = rendererConnected && (navOpen || !validFixtureSelected);
+    const showNav = navOpen || !selectedFixtureId;
     const dragging = navDrag.dragging || panelDrag.dragging;
     // z-indexes are set here on purpose to show the layer hierarchy at a glance
     return (React.createElement(Container, { dragging: dragging },
         showNav && (React.createElement(Draggable, { style: { width: navWidth, zIndex: 2 } },
-            React.createElement(Nav, null, rendererConnected && (React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder }))),
+            React.createElement(Nav, null,
+                React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder })),
             navDrag.dragging && React.createElement(DragOverlay, null),
             React.createElement(NavDragHandle, { ref: navDrag.dragElRef }))),
         React.createElement(MainContainer, { key: "main", style: { zIndex: 1 } },
-            !validFixtureSelected && (React.createElement(GlobalHeader, { selectedFixtureId: selectedFixtureId, rendererConnected: rendererConnected, validFixtureSelected: validFixtureSelected, globalActionOrder: globalActionOrder })),
+            !selectedFixtureId && (React.createElement(GlobalHeader, { rendererConnected: rendererConnected, globalActionOrder: globalActionOrder })),
             React.createElement(RendererContainer, { key: "rendererContainer" },
-                selectedFixtureId && validFixtureSelected && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: onFixtureSelect, onClose: onFixtureClose })),
+                selectedFixtureId && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onReloadRenderer: onReloadRenderer, onClose: onCloseFixture })),
                 React.createElement(RendererBody, { key: "rendererBody" },
                     React.createElement(Slot, { name: "rendererPreview" }),
                     dragging && React.createElement(DragOverlay, null),
-                    panelOpen && selectedFixtureId && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
+                    selectedFixtureId && panelOpen && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
                         React.createElement(SidePanel, { fixtureId: selectedFixtureId, fixtureState: fixtureState, sidePanelRowOrder: sidePanelRowOrder, onFixtureStateChange: onFixtureStateChange }),
                         panelDrag.dragging && React.createElement(DragOverlay, null),
                         React.createElement(PanelDragHandle, { ref: panelDrag.dragElRef })))),
-                React.createElement(Slot, { name: "contentOverlay" }))),
+                !selectedFixtureId && (React.createElement(HomeOverlay, { welcomeDismissed: welcomeDismissed, onDismissWelcome: onDismissWelcome, onShowWelcome: onShowWelcome })))),
         React.createElement("div", { style: { zIndex: 4 } },
             React.createElement(ArraySlot, { name: "global", plugOrder: globalOrder }))));
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     disabled?: boolean;
     selected: boolean;

package/dist/plugins/Root/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { createFixtureTree, flattenFixtureTree } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
+import { useWelcomeDismiss } from './HomeOverlay/welcomeDismiss.js';
+import { Root } from './Root.js';
 import { isNavOpen, openNav } from './navOpen.js';
 import { getNavWidthApi } from './navWidth.js';
 import { isPanelOpen, openPanel } from './panelOpen.js';
 import { getPanelWidthApi } from './panelWidth.js';
-import { Root } from './Root.js';
 const { onLoad, plug, register } = createPlugin({
     name: 'root',
     defaultConfig: {
@@ -41,14 +42,14 @@ plug('root', ({ pluginContext }) => {
     const fixtureItems = useFixtureItems(pluginContext);
     const onToggleNav = useOpenNav(pluginContext);
     const onTogglePanel = useOpenPanel(pluginContext);
+    const welcomeDismiss = useWelcomeDismiss(pluginContext);
     const { storageCacheReady } = getState();
-    if (!storageCacheReady) {
-        return (React.createElement(Root, { storageCacheReady: false, fixtureItems: [], selectedFixtureId: null, rendererConnected: false, validFixtureSelected: false, fixtureState: {}, navOpen: false, panelOpen: false, navWidth: 0, panelWidth: 0, sidePanelRowOrder: [], globalActionOrder: [], globalOrder: [], navRowOrder: [], fixtureActionOrder: [], rendererActionOrder: [], onToggleNav: () => { }, onTogglePanel: () => { }, onFixtureSelect: () => { }, onFixtureClose: () => { }, onFixtureStateChange: () => { }, setNavWidth: () => { }, setPanelWidth: () => { } }));
-    }
+    if (!storageCacheReady)
+        return null;
     const { navWidth, setNavWidth } = getNavWidthApi(pluginContext);
     const { panelWidth, setPanelWidth } = getPanelWidthApi(pluginContext);
     const { sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, } = getConfig();
-    return (React.createElement(Root, { storageCacheReady: true, fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), validFixtureSelected: rendererCore.isValidFixtureSelected(), fixtureState: rendererCore.getFixtureState(), navOpen: isNavOpen(pluginContext), panelOpen: isPanelOpen(pluginContext), navWidth: navWidth, panelWidth: panelWidth, sidePanelRowOrder: sidePanelRowOrder, globalActionOrder: globalActionOrder, globalOrder: globalOrder, navRowOrder: navRowOrder, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onToggleNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: router.selectFixture, onFixtureClose: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth }));
+    return (React.createElement(Root, { fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), fixtureState: rendererCore.getFixtureState(), navOpen: isNavOpen(pluginContext), panelOpen: isPanelOpen(pluginContext), navWidth: navWidth, panelWidth: panelWidth, sidePanelRowOrder: sidePanelRowOrder, globalActionOrder: globalActionOrder, globalOrder: globalOrder, navRowOrder: navRowOrder, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onToggleNav: onToggleNav, onTogglePanel: onTogglePanel, onReloadRenderer: rendererCore.reloadRenderer, onCloseFixture: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth, welcomeDismissed: welcomeDismiss.isWelcomeDismissed(), onDismissWelcome: welcomeDismiss.onDismissWelcome, onShowWelcome: welcomeDismiss.onShowWelcome }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/Root/panelOpen.js

@@ -1,11 +1,6 @@
 export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
 const PANEL_OPEN_DEFAULT = true;
 export function isPanelOpen(context) {
-    const { getMethodsOf } = context;
-    const rendererCore = getMethodsOf('rendererCore');
-    if (!rendererCore.isValidFixtureSelected()) {
-        return false;
-    }
     const storage = context.getMethodsOf('storage');
     const open = storage.getItem(PANEL_OPEN_STORAGE_KEY);
     return typeof open === 'boolean' ? open : PANEL_OPEN_DEFAULT;

package/dist/plugins/Router/index.js

@@ -20,7 +20,7 @@ onLoad(context => {
         const fixtureChanged = !isEqual(urlParams.fixtureId, fixtureId);
         setState({ urlParams }, () => {
             if (fixtureChanged) {
-                emitFixtureChangeEvent(context);
+                emitFixtureChangeEvent(context, true);
             }
         });
     });
@@ -41,16 +41,28 @@ function setUrlParams(context, nextUrlParams) {
     const { urlParams } = context.getState();
     const fixtureChanged = !isEqual(nextUrlParams.fixtureId, urlParams.fixtureId);
     const urlParamsEqual = isEqual(nextUrlParams, urlParams);
-    context.setState({ urlParams: nextUrlParams }, () => {
-        // Setting identical url params is considered a "reset" request
-        if (fixtureChanged || urlParamsEqual) {
-            emitFixtureChangeEvent(context);
-        }
-        if (!urlParamsEqual) {
+    if (urlParamsEqual) {
+        // Setting identical URL params can be considered a "reset" request, but
+        // this will only re-render the fixture if the renderer implements an
+        // auto-incrementing render key in its state
+        emitFixtureChangeEvent(context, false);
+    }
+    else {
+        context.setState({ urlParams: nextUrlParams }, () => {
             pushUrlParams(context.getState().urlParams);
-        }
-    });
+            emitFixtureChangeEvent(context, fixtureChanged);
+        });
+    }
 }
-function emitFixtureChangeEvent(context) {
-    context.emit('fixtureChange', getSelectedFixtureId(context));
+function emitFixtureChangeEvent(context, fixtureChanged) {
+    const fixtureId = getSelectedFixtureId(context);
+    if (!fixtureId) {
+        context.emit('fixtureUnselect');
+    }
+    else if (fixtureChanged) {
+        context.emit('fixtureSelect', fixtureId);
+    }
+    else {
+        context.emit('fixtureReselect', fixtureId);
+    }
 }

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

@@ -1,8 +1,8 @@
-import { FixtureId, PlaygroundUrlParams } from 'react-cosmos-core';
+import { FixtureId, PlaygroundParams } from 'react-cosmos-core';
 export type RouterSpec = {
     name: 'router';
     state: {
-        urlParams: PlaygroundUrlParams;
+        urlParams: PlaygroundParams;
     };
     methods: {
         getSelectedFixtureId(): null | FixtureId;
@@ -10,6 +10,8 @@ export type RouterSpec = {
         unselectFixture(): void;
     };
     events: {
-        fixtureChange(fixtureId: null | FixtureId): void;
+        fixtureSelect(fixtureId: FixtureId): void;
+        fixtureReselect(fixtureId: FixtureId): void;
+        fixtureUnselect(): void;
     };
 };

package/dist/plugins/StandardControl/storage.d.ts

@@ -2,6 +2,6 @@ import { PluginContext } from 'react-plugin';
 import { TreeExpansion } from '../../shared/treeExpansion.js';
 import { StandardControlSpec } from './spec.js';
 export declare function useTreeExpansionStorage(pluginContext: PluginContext<StandardControlSpec>): {
-    expansion: TreeExpansion;
+    expansion: {};
     setExpansion: (newTreeExpansion: TreeExpansion) => void;
 };

package/dist/plugins/pluginEntry.d.ts

@@ -1,6 +1,5 @@
 import './BuildNotifications/index.js';
 import './ClassStatePanel/index.js';
-import './ContentOverlay/index.js';
 import './ControlPanel/index.js';
 import './ControlSelect/index.js';
 import './Core/index.js';

package/dist/plugins/pluginEntry.js

@@ -1,7 +1,6 @@
 import { enablePlugin } from 'react-plugin';
 import './BuildNotifications/index.js';
 import './ClassStatePanel/index.js';
-import './ContentOverlay/index.js';
 import './ControlPanel/index.js';
 import './ControlSelect/index.js';
 import './Core/index.js';

package/dist/shared/fixtureTree.d.ts

@@ -1,3 +1,2 @@
 import { FixtureId, FixtureTreeNode } from 'react-cosmos-core';
-export declare function recordContainsFixtureId(fixtureIds: Record<string, FixtureId>, fixtureId: FixtureId): boolean;
-export declare function nodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;
+export declare function fixtureTreeNodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;

package/dist/shared/fixtureTree.js

@@ -1,12 +1,7 @@
-import { isEqual } from 'lodash-es';
-export function recordContainsFixtureId(fixtureIds, fixtureId) {
-    return Object.keys(fixtureIds).some(fixtureName => isEqual(fixtureIds[fixtureName], fixtureId));
-}
-export function nodeContainsFixtureId({ data, children }, fixtureId) {
-    if (data.type === 'fixture')
-        return isEqual(data.fixtureId, fixtureId);
-    if (data.type === 'multiFixture')
-        return recordContainsFixtureId(data.fixtureIds, fixtureId);
+export function fixtureTreeNodeContainsFixtureId({ data, children }, fixtureId) {
+    if (data.type === 'fixture' || data.type === 'multiFixture') {
+        return data.path === fixtureId.path;
+    }
     return (children !== undefined &&
-        Object.keys(children).some(childName => nodeContainsFixtureId(children[childName], fixtureId)));
+        Object.keys(children).some(childName => fixtureTreeNodeContainsFixtureId(children[childName], fixtureId)));
 }

package/dist/shared/url.d.ts

@@ -1,5 +1,6 @@
-import { PlaygroundUrlParams } from 'react-cosmos-core';
-export declare function getUrlParams(): PlaygroundUrlParams;
-export declare function pushUrlParams(urlParams: PlaygroundUrlParams): void;
-export declare function subscribeToLocationChanges(userHandler: (urlParams: PlaygroundUrlParams) => unknown): () => void;
-export declare function createRelativePlaygroundUrl(urlParams: PlaygroundUrlParams): string;
+import { PlaygroundParams } from 'react-cosmos-core';
+export declare function getUrlParams(): PlaygroundParams;
+export declare function pushUrlParams(urlParams: PlaygroundParams): void;
+export declare function subscribeToLocationChanges(userHandler: (urlParams: PlaygroundParams) => unknown): () => void;
+export declare function createRelativePlaygroundUrl(urlParams: PlaygroundParams): string;
+export declare function createRelativeUrlWithQuery(query: string): string;

package/dist/shared/url.js

@@ -1,9 +1,9 @@
-import { parsePlaygroundUrlQuery, stringifyPlaygroundUrlQuery, } from 'react-cosmos-core';
+import { buildPlaygroundQueryString, parsePlaygroundQueryString, } from 'react-cosmos-core';
 export function getUrlParams() {
-    return parsePlaygroundUrlQuery(location.search);
+    return parsePlaygroundQueryString(location.search);
 }
 export function pushUrlParams(urlParams) {
-    const query = stringifyPlaygroundUrlQuery(urlParams);
+    const query = buildPlaygroundQueryString(urlParams);
     // Refresh page completely when pushState isn't supported
     if (!history.pushState) {
         location.search = query;
@@ -22,12 +22,12 @@ export function subscribeToLocationChanges(userHandler) {
     };
 }
 export function createRelativePlaygroundUrl(urlParams) {
-    const query = stringifyPlaygroundUrlQuery(urlParams);
+    const query = buildPlaygroundQueryString(urlParams);
     return createRelativeUrlWithQuery(query);
 }
-function createRelativeUrlWithQuery(query) {
+export function createRelativeUrlWithQuery(query) {
     // NOTE: "./" is used to return to the home URL. Passing an empty string
     // doesn't do anything. And passing "/" doesn't work if Cosmos is not hosted
     // at root (sub)domain level.
-    return query.length > 0 ? `?${query}` : './';
+    return query || './';
 }

package/dist/slots/ControlActionSlot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureStateControls } from 'react-cosmos-core';
 export type ControlActionSlotProps = {
     controls: FixtureStateControls;

package/dist/slots/ControlSlot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureState, FixtureStateControl, StateUpdater } from 'react-cosmos-core';
 export type ControlSlotProps<TControl extends FixtureStateControl> = {
     controlName: string;

package/dist/slots/FixtureActionSlot.d.ts

@@ -1,6 +1,7 @@
-import { FixtureId } from 'react-cosmos-core';
+/// <reference types="react" />
+import { FlatFixtureTreeItem } from 'react-cosmos-core';
 export type FixtureActionSlotProps = {
-    fixtureId: FixtureId;
+    fixtureItem: FlatFixtureTreeItem;
 };
 type Props = {
     slotProps: FixtureActionSlotProps;

package/dist/slots/NavRowSlot.d.ts

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

package/dist/slots/RendererActionSlot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureId } from 'react-cosmos-core';
 export type RendererActionSlotProps = {
     fixtureId: FixtureId;

package/dist/slots/SidePanelRowSlot.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
 export type SidePanelRowSlotProps = {
     fixtureId: FixtureId;

package/dist/testHelpers/pluginMocks.d.ts

@@ -30,15 +30,15 @@ export declare function getCoreMethods(): {
         fixtureFileSuffix: string;
     };
     isDevServerOn(): boolean;
-    getWebRendererUrl(): string | null;
 };
 export declare function getRendererCoreMethods(): {
+    getRendererUrl(): string | null;
     getConnectedRendererIds(): string[];
     getPrimaryRendererId(): string | null;
     getFixtures(): import("react-cosmos-core").FixtureList;
     getFixtureState(): import("react-cosmos-core").FixtureState;
     isRendererConnected(): boolean;
-    isValidFixtureSelected(): boolean;
+    reloadRenderer(): void;
     setFixtureState(stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>): void;
     selectPrimaryRenderer(primaryRendererId: string): void;
     receiveResponse(msg: import("react-cosmos-core").MessageType): void;
@@ -49,7 +49,6 @@ export declare function getNotificationsMethods(): {
     pushTimedNotification(notification: import("../plugins/Notifications/spec.js").NotificationItem): void;
 };
 export declare function getRendererPreviewMethods(): {
-    getUrlStatus(): import("../plugins/RendererPreview/spec.js").UrlStatus;
     getRuntimeStatus(): import("../plugins/RendererPreview/spec.js").RuntimeStatus;
 };
 export declare function mockStorage(methods?: MethodsOf<StorageSpec>): {
@@ -71,25 +70,25 @@ export declare function mockCore(methods?: MethodsOf<CoreSpec>): {
         fixtureFileSuffix: string;
     });
     isDevServerOn: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<CoreSpec>) => boolean);
-    getWebRendererUrl: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<CoreSpec>) => string | null);
 };
 export declare function mockMessageHandler(methods?: MethodsOf<MessageHandlerSpec>): {
     postRendererRequest: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<MessageHandlerSpec>, msg: import("react-cosmos-core").MessageType) => unknown);
 };
 export declare function mockRendererCore(methods?: MethodsOf<RendererCoreSpec>): {
+    getRendererUrl: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     getConnectedRendererIds: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string[]);
     getPrimaryRendererId: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     getFixtures: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureList);
     getFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureState);
     isRendererConnected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
-    isValidFixtureSelected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
+    reloadRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => void);
     setFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>) => void);
     selectPrimaryRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, primaryRendererId: string) => void);
     receiveResponse: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, msg: import("react-cosmos-core").MessageType) => void);
 };
 export declare function mockRendererPreview(methods?: MethodsOf<RendererPreviewSpec>): {
-    getUrlStatus: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererPreviewSpec>) => import("../plugins/RendererPreview/spec.js").UrlStatus);
     getRuntimeStatus: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererPreviewSpec>) => import("../plugins/RendererPreview/spec.js").RuntimeStatus);
+    getUrlStatus: jest.Mock<any, any, any>;
 };
 export declare function mockNotifications(methods?: MethodsOf<NotificationsSpec>): {
     pushStickyNotification: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<NotificationsSpec>, notification: import("../plugins/Notifications/spec.js").NotificationItem) => void);
@@ -103,7 +102,9 @@ export declare function mockFixtureTree(methods?: MethodsOf<FixtureTreeSpec>): {
     }, fixtureId: import("react-cosmos-core").FixtureId) => unknown);
 };
 export declare function onRouter(events?: EventsOf<RouterSpec>): {
-    fixtureChange: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId | null]>;
+    fixtureSelect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId]>;
+    fixtureReselect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId]>;
+    fixtureUnselect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, []>;
 };
 export declare function onMessageHandler(events?: EventsOf<MessageHandlerSpec>): {
     serverMessage: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [msg: import("react-cosmos-core").MessageType]>;

package/dist/testHelpers/pluginMocks.js

@@ -54,7 +54,6 @@ export function mockCore(methods = {}) {
         getProjectId: jest.fn(),
         getFixtureFileVars: jest.fn(),
         isDevServerOn: jest.fn(),
-        getWebRendererUrl: jest.fn(),
         ...methods,
     };
     mockMethodsOf('core', allMethods);
@@ -70,12 +69,13 @@ export function mockMessageHandler(methods = {}) {
 }
 export function mockRendererCore(methods = {}) {
     const allMethods = {
+        getRendererUrl: jest.fn(),
         getConnectedRendererIds: jest.fn(),
         getPrimaryRendererId: jest.fn(),
         getFixtures: jest.fn(),
         getFixtureState: jest.fn(),
         isRendererConnected: jest.fn(),
-        isValidFixtureSelected: jest.fn(),
+        reloadRenderer: jest.fn(),
         setFixtureState: jest.fn(),
         selectPrimaryRenderer: jest.fn(),
         receiveResponse: jest.fn(),
@@ -113,7 +113,9 @@ export function mockFixtureTree(methods = {}) {
 }
 export function onRouter(events = {}) {
     const allEvents = {
-        fixtureChange: jest.fn(),
+        fixtureSelect: jest.fn(),
+        fixtureReselect: jest.fn(),
+        fixtureUnselect: jest.fn(),
         ...events,
     };
     on('router', allEvents);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-beta.2",
   "description": "React Cosmos UI",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
   "license": "MIT",
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "^6.0.0-alpha.9"
+    "react-cosmos-core": "6.0.0-beta.2"
   },
   "devDependencies": {
     "fuzzaldrin-plus": "^0.6.0",
     "localforage": "^1.10.0",
     "react-plugin": "^3.0.0-alpha.4",
-    "styled-components": "^5.3.8"
+    "styled-components": "^5.3.10"
   },
-  "gitHead": "b155b223f904f5cc29e2f13ac79ab7c4b302ed2b"
+  "gitHead": "f3e3893b0439132e083228f312c62e4379f39762"
 }

package/dist/plugins/ContentOverlay/ContentOverlay.d.ts

@@ -1,13 +0,0 @@
-import { RuntimeStatus, UrlStatus } from '../RendererPreview/shared.js';
-type Props = {
-    fixtureSelected: boolean;
-    validFixtureSelected: boolean;
-    rendererConnected: boolean;
-    rendererPreviewUrlStatus: UrlStatus;
-    rendererPreviewRuntimeStatus: RuntimeStatus;
-    welcomeDismissed: boolean;
-    onDismissWelcome: () => unknown;
-    onShowWelcome: () => unknown;
-};
-export declare function ContentOverlay({ fixtureSelected, validFixtureSelected, rendererConnected, rendererPreviewUrlStatus, rendererPreviewRuntimeStatus, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element | null;
-export {};

package/dist/plugins/ContentOverlay/ContentOverlay.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { NoFixtureSelected } from './NoFixtureSelected.js';
-import { RendererNotResponding } from './RendererNotResponding.js';
-import { ContentContainer, OverlayContainer } from './shared.js';
-import { WelcomeCosmos } from './WelcomeCosmos.js';
-export function ContentOverlay({ fixtureSelected, validFixtureSelected, rendererConnected, rendererPreviewUrlStatus, rendererPreviewRuntimeStatus, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
-    if (rendererPreviewUrlStatus === 'error') {
-        return (React.createElement(OverlayContainer, { "data-testid": "rendererNotResponding" },
-            React.createElement(RendererNotResponding, null)));
-    }
-    if (validFixtureSelected || rendererPreviewRuntimeStatus === 'error') {
-        // Usually the content overlay is only hidden when a valid fixture is
-        // selected. However, when the renderer is in error state, we also hide the
-        // content overlay to avoid showing a blank screen and to uncover the error
-        // message.
-        return null;
-    }
-    if (!rendererConnected) {
-        // Delay "waiting for renderer" state to avoid rapidly changing visual
-        // states when renderer is already compiled and will respond immediately
-        return (React.createElement(OverlayContainer, { "data-testid": "waiting" },
-            React.createElement(ContentContainer, null)));
-    }
-    if (fixtureSelected) {
-        return (React.createElement(OverlayContainer, { "data-testid": "notFound" },
-            React.createElement(ContentContainer, null)));
-    }
-    if (welcomeDismissed) {
-        return (React.createElement(OverlayContainer, { "data-testid": "blank" },
-            React.createElement(NoFixtureSelected, { onShowWelcome: onShowWelcome })));
-    }
-    return (React.createElement(OverlayContainer, { "data-testid": "welcome" },
-        React.createElement(WelcomeCosmos, { onDismissWelcome: onDismissWelcome })));
-}

package/dist/plugins/ContentOverlay/RendererNotResponding.d.ts

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

package/dist/plugins/ContentOverlay/RendererNotResponding.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { Slot } from 'react-plugin';
-import styled from 'styled-components';
-import { ArtificialIntelligenceIllustration } from '../../components/illustrations/ArtificialIntelligence.js';
-import { screenGrey3, screenGrey5, screenPrimary2, screenPrimary3, } from '../../style/colors.js';
-import { ContentContainer, IllustrationContainer, NoWrap, TextContainer, } from './shared.js';
-export function RendererNotResponding() {
-    return (React.createElement(ContentContainer, 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://react-cosmos.slack.com/join/shared_invite/zt-g9rsalqq-clCoV7DWttVvzO5FAAmVAw", 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;
-`;