react-cosmos-ui - npm Package Compare versions

Comparing version 6.0.0-canary.da91267.0 to 6.0.0-canary.db0339b.0

dist/components/BaseSvg.d.ts

@@ -8,3 +8,3 @@ import React from 'react';
 };
-export declare function BaseSvg({ children, ...attrs }: Props): JSX.Element;
+export declare function BaseSvg({ children, ...attrs }: Props): React.JSX.Element;
 export {};

dist/components/buttons/Button32.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/buttons/Button8.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/buttons/IconButton32.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 };
-export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/buttons/IconButton8.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 };
-export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/Icon.d.ts

@@ -0,7 +1,11 @@
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
-type IconProps = {
-    children: SvgChildren;
+export type IconProps = {
     size?: number | string;
+    strokeWidth?: number;
 };
-export declare function Icon({ children, size }: IconProps): JSX.Element;
+type Props = IconProps & {
+    children: SvgChildren;
+};
+export declare function Icon({ children, size, strokeWidth }: Props): React.JSX.Element;
 export {};

dist/components/Icon.js

 import React from 'react';
 import { BaseSvg } from './BaseSvg.js';
-export function Icon({ children, size = '100%' }) {
-    return (React.createElement(BaseSvg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, children));
+export function Icon({ children, size = '100%', strokeWidth = 1.5 }) {
+    return (React.createElement(BaseSvg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }, children));
 }

dist/components/icons/index.d.ts

@@ -1,33 +0,31 @@
-type Props = {
-    size?: number;
-};
-export declare const ChevronLeftIcon: () => JSX.Element;
-export declare const ChevronRightIcon: () => JSX.Element;
-export declare const ChevronDownIcon: () => JSX.Element;
-export declare const FolderIcon: () => JSX.Element;
-export declare const XIcon: () => JSX.Element;
-export declare const XCircleIcon: () => JSX.Element;
-export declare const MaximizeIcon: () => JSX.Element;
-export declare const SmartphoneIcon: () => JSX.Element;
-export declare const Minimize2Icon: () => JSX.Element;
-export declare const RefreshCwIcon: () => JSX.Element;
-export declare const RefreshCcwIcon: (props: Props) => JSX.Element;
-export declare const HomeIcon: () => JSX.Element;
-export declare const CastIcon: () => JSX.Element;
-export declare const EditIcon: () => JSX.Element;
-export declare const CheckCircleIcon: () => JSX.Element;
-export declare const AlertCircleIcon: () => JSX.Element;
-export declare const InfoIcon: () => JSX.Element;
-export declare const LoaderIcon: () => JSX.Element;
-export declare const SlidersIcon: () => JSX.Element;
-export declare const CopyIcon: () => JSX.Element;
-export declare const RotateCcwIcon: () => JSX.Element;
-export declare const FileIcon: () => JSX.Element;
-export declare const SearchIcon: () => JSX.Element;
-export declare const MenuIcon: () => JSX.Element;
-export declare const ExternalIcon: () => JSX.Element;
-export declare const HelpCircleIcon: () => JSX.Element;
-export declare const MinusSquareIcon: () => JSX.Element;
-export declare const PlusSquareIcon: () => JSX.Element;
-export declare const StarIcon: () => JSX.Element;
-export {};
+import React from 'react';
+import { IconProps } from '../Icon.js';
+export declare const ChevronLeftIcon: () => React.JSX.Element;
+export declare const ChevronRightIcon: () => React.JSX.Element;
+export declare const ChevronDownIcon: () => React.JSX.Element;
+export declare const FolderIcon: () => React.JSX.Element;
+export declare const XIcon: () => React.JSX.Element;
+export declare const XCircleIcon: () => React.JSX.Element;
+export declare const MaximizeIcon: () => React.JSX.Element;
+export declare const SmartphoneIcon: () => React.JSX.Element;
+export declare const Minimize2Icon: () => React.JSX.Element;
+export declare const RefreshCwIcon: () => React.JSX.Element;
+export declare const RefreshCcwIcon: (props: IconProps) => React.JSX.Element;
+export declare const HomeIcon: () => React.JSX.Element;
+export declare const CastIcon: () => React.JSX.Element;
+export declare const EditIcon: () => React.JSX.Element;
+export declare const CheckCircleIcon: (props: IconProps) => React.JSX.Element;
+export declare const AlertCircleIcon: () => React.JSX.Element;
+export declare const InfoIcon: () => React.JSX.Element;
+export declare const LoaderIcon: () => React.JSX.Element;
+export declare const SlidersIcon: () => React.JSX.Element;
+export declare const CopyIcon: () => React.JSX.Element;
+export declare const RotateCcwIcon: () => React.JSX.Element;
+export declare const FileIcon: () => React.JSX.Element;
+export declare const SearchIcon: () => React.JSX.Element;
+export declare const MenuIcon: () => React.JSX.Element;
+export declare const ExternalIcon: () => React.JSX.Element;
+export declare const HelpCircleIcon: () => React.JSX.Element;
+export declare const MinusSquareIcon: () => React.JSX.Element;
+export declare const PlusSquareIcon: () => React.JSX.Element;
+export declare const StarIcon: () => React.JSX.Element;

dist/components/icons/index.js

@@ -45,3 +45,3 @@ import React from 'react';
     React.createElement("polygon", { points: "18 2 22 6 12 16 8 16 8 12 18 2" })));
-export const CheckCircleIcon = () => (React.createElement(Icon, null,
+export const CheckCircleIcon = (props) => (React.createElement(Icon, { ...props },
     React.createElement("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
@@ -48,0 +48,0 @@ React.createElement("polyline", { points: "22 4 12 14.01 9 11.01" })));

dist/components/Illustration.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
@@ -7,3 +8,3 @@ type Props = {
 };
-export declare function Illustration({ children, viewBox, size }: Props): JSX.Element;
+export declare function Illustration({ children, viewBox, size }: Props): React.JSX.Element;
 export {};

dist/components/illustrations/ArtificialIntelligence.d.ts

@@ -0,3 +1,4 @@
+import React from 'react';
 export declare const ArtificialIntelligenceIllustration: ({ title, }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

dist/components/illustrations/Astronaut.d.ts

@@ -0,3 +1,4 @@
+import React from 'react';
 export declare const AstronautIllustration: ({ title }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

dist/components/illustrations/BlankCanvas.d.ts

@@ -0,3 +1,4 @@
+import React from 'react';
 export declare const BlankCanvasIllustration: ({ title }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

dist/components/inputs/NumberInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 export type NumberInputStyles = {
@@ -14,3 +15,3 @@ focusedColor: string;
 };
-export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): JSX.Element;
+export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): React.JSX.Element;
 export {};

dist/components/inputs/Select.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type BaseOption = {
@@ -15,3 +16,3 @@ value: string;
 };
-export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): JSX.Element;
+export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): React.JSX.Element;
 export {};

dist/components/KeyBox.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -8,3 +9,3 @@ value: string;
 };
-export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): JSX.Element;
+export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): React.JSX.Element;
 export {};

dist/components/SidePanel.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 export declare const SidePanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -7,5 +8,5 @@ export declare const SidePanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 };
-export declare function SidePanelTitle({ label, componentName }: TitleProps): JSX.Element;
+export declare function SidePanelTitle({ label, componentName }: TitleProps): React.JSX.Element;
 export declare const SidePanelActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SidePanelBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

dist/components/SidePanel.js

@@ -23,3 +23,3 @@ import React from 'react';
         React.createElement(TitleLabel, null, label),
-        typeof componentName === 'string' && (React.createElement(ComponentName, null, componentName ? componentName : React.createElement("em", null, "Unnamed")))));
+        typeof componentName === 'string' && (React.createElement(ComponentName, null, componentName ? componentName : `(anonymous)`))));
 }
@@ -26,0 +26,0 @@ export const SidePanelActions = styled.div `

dist/components/Space.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -6,3 +7,3 @@ width: number;
 };
-export declare function Space(props: Props): JSX.Element;
+export declare function Space(props: Props): React.JSX.Element;
 export {};

dist/components/TreeView.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TreeNode } from 'react-cosmos-core';
@@ -18,3 +18,3 @@ import { TreeExpansion } from '../shared/treeExpansion.js';
 };
-export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): JSX.Element;
+export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ExpandCollapseValues.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureStateValues } from 'react-cosmos-core';
@@ -8,3 +9,3 @@ import { TreeExpansion } from '../../shared/treeExpansion.js';
 };
-export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): JSX.Element | null;
+export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): React.JSX.Element | null;
 export {};

dist/components/ValueInputTree/index.d.ts

@@ -1,4 +0,4 @@
-export { stringifyElementId, stringifyFixtureId } from './shared.js';
+export { ValueInputTree } from './ValueInputTree.js';
+export { stringifyElementId } from './shared.js';
 export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
-export { ValueInputTree } from './ValueInputTree.js';
-export { FixtureExpansion, FixtureExpansionGroup, getFixtureExpansion, OnElementExpansionChange, updateElementExpansion, } from './valueTreeExpansion.js';
+export { FixtureExpansion, FixtureExpansionGroup, OnElementExpansionChange, getFixtureExpansion, updateElementExpansion, } from './valueTreeExpansion.js';

dist/components/ValueInputTree/index.js

@@ -1,4 +0,4 @@
-export { stringifyElementId, stringifyFixtureId } from './shared.js';
+export { ValueInputTree } from './ValueInputTree.js';
+export { stringifyElementId } from './shared.js';
 export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
-export { ValueInputTree } from './ValueInputTree.js';
 export { getFixtureExpansion, updateElementExpansion, } from './valueTreeExpansion.js';

dist/components/ValueInputTree/shared.d.ts

@@ -1,5 +0,6 @@
-import { FixtureElementId, FixtureId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
+import { FixtureElementId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
 export type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
 export type ValueNodeData = {
     type: 'collection';
+    isArray: boolean;
 } | {
@@ -15,3 +16,2 @@ type: 'item';
 export declare function stringifyElementId(elementId: FixtureElementId): string;
-export declare function stringifyFixtureId(fixtureId: FixtureId): string;
 export {};

dist/components/ValueInputTree/shared.js

@@ -9,8 +9,4 @@ import styled from 'styled-components';
 }
-export function stringifyFixtureId(fixtureId) {
-    const { path, name } = fixtureId;
-    return name ? `${path}-${name}` : path;
-}
 function getLeftPadding(depth) {
     return depth * 12;
 }

dist/components/ValueInputTree/ValueInput/BooleanValueInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -7,3 +8,3 @@ id: string;
 };
-export declare function BooleanValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function BooleanValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/NullValueInput.d.ts

@@ -0,5 +1,6 @@
+import React from 'react';
 type Props = {
     name: string;
 };
-export declare function NullValueInput({ name }: Props): JSX.Element;
+export declare function NullValueInput({ name }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/NumberValueInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -7,3 +8,3 @@ id: string;
 };
-export declare function NumberValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function NumberValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/StringValueInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -7,3 +8,3 @@ id: string;
 };
-export declare function StringValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function StringValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/UndefinedValueInput.d.ts

@@ -0,5 +1,6 @@
+import React from 'react';
 type Props = {
     name: string;
 };
-export declare function UndefinedValueInput({ name }: Props): JSX.Element;
+export declare function UndefinedValueInput({ name }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/UnserializableValueInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -5,3 +6,3 @@ name: string;
 };
-export declare function UnserializableValueInput({ name, data }: Props): JSX.Element;
+export declare function UnserializableValueInput({ name, data }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/ValueInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { PrimitiveData } from 'react-cosmos-core';
@@ -10,3 +11,3 @@ import { LeafValue } from '../shared.js';
 };
-export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): JSX.Element;
+export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/ValueInput.js

@@ -7,6 +7,6 @@ import React from 'react';
 import { NumberValueInput } from './NumberValueInput.js';
-import { ValueInputContainer } from './shared.js';
 import { StringValueInput } from './StringValueInput.js';
 import { UndefinedValueInput } from './UndefinedValueInput.js';
 import { UnserializableValueInput } from './UnserializableValueInput.js';
+import { ValueInputContainer } from './shared.js';
 export function ValueInput({ value, name, id, indentLevel, onChange }) {
@@ -13,0 +13,0 @@ return (React.createElement(ValueInputSlot, { slotProps: { id, name, value, indentLevel, onChange } },

dist/components/ValueInputTree/ValueInputDir.d.ts

@@ -0,4 +1,6 @@
+import React from 'react';
 type Props = {
     name: string;
-    childNames: string[];
+    childrenText: string;
+    disabled: boolean;
     expanded: boolean;
@@ -8,3 +10,3 @@ indentLevel: number;
 };
-export declare function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }: Props): JSX.Element;
+export declare function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInputDir.js

@@ -6,4 +6,3 @@ import React from 'react';
 import { ValueTreeItem } from './shared.js';
-export function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }) {
-    const disabled = childNames.length === 0;
+export function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }) {
     return (React.createElement(ValueTreeItem, { indentLevel: indentLevel },
@@ -16,7 +15,4 @@ React.createElement(ButtonContainer, null,
                         React.createElement(DirName, { disabled: disabled }, name),
-                        React.createElement(ChildrenInfo, null, getChildInfo(childNames))))))));
+                        React.createElement(ChildrenInfo, null, childrenText)))))));
 }
-function getChildInfo(childNames) {
-    return childNames.length > 0 ? `{ ${childNames.join(', ')} }` : `{}`;
-}
 const ButtonContainer = styled.div `
@@ -23,0 +19,0 @@ padding: 2px 0;

dist/components/ValueInputTree/ValueInputTree.js

@@ -14,5 +14,12 @@ import { clone, setWith } from 'lodash-es';
                 const { data, children } = node;
-                if (data.type === 'item')
+                if (data.type === 'item') {
                     return (React.createElement(ValueInput, { value: data.value, name: name, id: getInputId(id, parents, name), indentLevel: parents.length, onChange: newData => onValueChange(setValueAtPath(values, { type: 'primitive', data: newData }, getValuePath(name, parents))) }));
-                return (children && (React.createElement(ValueInputDir, { name: name, childNames: Object.keys(children), expanded: expanded, indentLevel: parents.length, onToggle: onToggle })));
+                }
+                if (children) {
+                    const childKeys = Object.keys(children);
+                    return (React.createElement(ValueInputDir, { name: name, childrenText: getChildrenText(childKeys, data.isArray), disabled: childKeys.length === 0, expanded: expanded, indentLevel: parents.length, onToggle: onToggle }));
+                }
+                else {
+                    return null;
+                }
             } })));
@@ -30,2 +37,10 @@ });
 }
+function getChildrenText(childKeys, isArray) {
+    if (childKeys.length > 0) {
+        return isArray ? `[ ${childKeys.length} ]` : `{ ${childKeys.join(', ')} }`;
+    }
+    else {
+        return isArray ? `[]` : `{}`;
+    }
+}
 const Container = styled.div `
@@ -32,0 +47,0 @@ background: ${grey32};

dist/components/ValueInputTree/valueTree.d.ts

 import { FixtureStateValues } from 'react-cosmos-core';
 import { ValueNode } from './shared.js';
-export declare function createValueTree(values: FixtureStateValues): ValueNode;
+export declare function createValueTree(values: FixtureStateValues, isArray?: boolean): ValueNode;

dist/components/ValueInputTree/valueTree.js

@@ -1,2 +0,2 @@
-export function createValueTree(values) {
+export function createValueTree(values, isArray = false) {
     const children = {};
@@ -6,3 +6,3 @@ Object.keys(values).forEach(key => {
         if (value.type === 'object') {
-            children[key] = createValueTree(value.values);
+            children[key] = createValueTree(value.values, false);
         }
@@ -14,9 +14,14 @@ else if (value.type === 'array') {
             });
-            children[key] = createValueTree(objValues);
+            children[key] = createValueTree(objValues, true);
         }
         else {
-            children[key] = { data: { type: 'item', value } };
+            children[key] = {
+                data: { type: 'item', value },
+            };
         }
     });
-    return { data: { type: 'collection' }, children };
+    return {
+        data: { type: 'collection', isArray },
+        children,
+    };
 }

dist/components/ValueInputTree/valueTreeExpansion.js

 import { clone, setWith } from 'lodash-es';
-import { stringifyElementId, stringifyFixtureId } from './shared.js';
+import { stringifyFixtureId, } from 'react-cosmos-core';
+import { stringifyElementId } from './shared.js';
 const DEFAULT_EXPANSION = {};
@@ -4,0 +5,0 @@ export function getFixtureExpansion(groupExpansion, fixtureId) {

dist/cosmos.decorator.d.ts

 import React from 'react';
 declare const _default: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

dist/cosmos.loadPlugins.js

 import { loadPlugins } from 'react-plugin';
 import './plugins/pluginEntry.js';
 import { DEFAULT_PLUGIN_CONFIG } from './shared/defaultPluginConfig.js';
+const rendererConfig = {
+    ...DEFAULT_PLUGIN_CONFIG,
+    core: {
+        projectId: 'testProjectId',
+        fixturesDir: '__fixtures__',
+        fixtureFileSuffix: 'fixture',
+        devServerOn: true,
+    },
+    rendererCore: {
+        fixtures: {},
+        rendererUrl: '/renderer.html',
+    },
+};
 // This file is required to run globally with side effects for the "inception"
 // fixture to work.
 loadPlugins({
-    config: {
-        ...DEFAULT_PLUGIN_CONFIG,
-        core: {
-            projectId: 'testProjectId',
-            fixturesDir: '__fixtures__',
-            fixtureFileSuffix: 'fixture',
-            devServerOn: true,
-            webRendererUrl: '/_renderer.html',
-        },
-    },
+    config: rendererConfig,
 });

dist/playgroundConfig.d.ts

 import { CosmosPluginConfig } from 'react-cosmos-core';
 import { CoreSpec } from './plugins/Core/spec.js';
+import { RendererCoreSpec } from './plugins/RendererCore/spec.js';
 export type PlaygroundConfig = {
     core: CoreSpec['config'];
+    rendererCore: RendererCoreSpec['config'];
     [pluginName: string]: {};
@@ -6,0 +8,0 @@ };

dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
@@ -9,3 +10,3 @@ import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
 };
-export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js

 import { isEqual } from 'lodash-es';
 import React, { useCallback } from 'react';
 import { updateFixtureStateClassState, } from 'react-cosmos-core';
+import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../../components/SidePanel.js';
+import { ExpandCollapseValues } from '../../../components/ValueInputTree/ExpandCollapseValues.js';
+import { ValueInputTree, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
 import { IconButton32 } from '../../../components/buttons/index.js';
 import { RotateCcwIcon } from '../../../components/icons/index.js';
-import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../../components/SidePanel.js';
-import { ExpandCollapseValues } from '../../../components/ValueInputTree/ExpandCollapseValues.js';
-import { stringifyElementId, ValueInputTree, } from '../../../components/ValueInputTree/index.js';
 import { createClassStateFsUpdater } from './shared.js';
@@ -10,0 +10,0 @@ export function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {

dist/plugins/ControlPanel/ControlPanel.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureState, StateUpdater } from 'react-cosmos-core';
@@ -7,3 +8,3 @@ type Props = {
 };
-export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): JSX.Element | null;
+export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): React.JSX.Element | null;
 export {};

dist/plugins/ControlPanel/ControlPanel.js

 import { isEqual } from 'lodash-es';
 import React from 'react';
+import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../components/SidePanel.js';
 import { IconButton32 } from '../../components/buttons/index.js';
 import { RotateCcwIcon } from '../../components/icons/index.js';
-import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../components/SidePanel.js';
 import { ControlActionSlot } from '../../slots/ControlActionSlot.js';
@@ -7,0 +7,0 @@ import { ControlSlot } from '../../slots/ControlSlot.js';

dist/plugins/ControlSelect/SelectValueInput.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureStateSelectControl } from 'react-cosmos-core';
@@ -7,3 +8,3 @@ type Props = {
 };
-export declare function SelectValueInput({ name, control, onChange }: Props): JSX.Element;
+export declare function SelectValueInput({ name, control, onChange }: Props): React.JSX.Element;
 export {};

dist/plugins/ControlSelect/SelectValueInput.js

 import React from 'react';
+import { Label, ValueDataContainer, ValueInputContainer, } from '../../components/ValueInputTree/ValueInput/shared.js';
 import { Select } from '../../components/inputs/Select.js';
-import { Label, ValueDataContainer, ValueInputContainer, } from '../../components/ValueInputTree/ValueInput/shared.js';
 import { lightBlue } from '../../style/colors.js';
@@ -5,0 +5,0 @@ export function SelectValueInput({ name, control, onChange }) {

dist/plugins/Core/index.js

@@ -14,3 +14,2 @@ import { omit } from 'lodash-es';
         devServerOn: false,
-        webRendererUrl: null,
     },
@@ -23,3 +22,2 @@ methods: {
         isDevServerOn,
-        getWebRendererUrl,
     },
@@ -68,4 +66,1 @@ });
 }
-function getWebRendererUrl({ getConfig }) {
-    return getConfig().webRendererUrl;
-}

dist/plugins/Core/spec.d.ts

@@ -9,3 +9,2 @@ export type Commands = Record<string, () => unknown>;
         devServerOn: boolean;
-        webRendererUrl: null | string;
     };
@@ -24,4 +23,3 @@ state: {
         isDevServerOn(): boolean;
-        getWebRendererUrl(): null | string;
     };
 };

dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -5,3 +6,3 @@ selected: boolean;
 };
-export declare function BookmarkFixtureButton({ selected, onClick }: Props): JSX.Element;
+export declare function BookmarkFixtureButton({ selected, onClick }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId, FlatFixtureTree, FlatFixtureTreeItem } from 'react-cosmos-core';
@@ -8,3 +9,3 @@ type Props = {
 };
-export declare function FixtureBookmarks({ bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): JSX.Element | null;
+export declare function FixtureBookmarks({ bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): React.JSX.Element | null;
 export {};

dist/plugins/FixtureBookmark/FixtureBookmarks.js

 import { isEqual, sortBy } from 'lodash-es';
 import React from 'react';
+import { stringifyFixtureId, } from 'react-cosmos-core';
 import styled from 'styled-components';
 import { XIcon } from '../../components/icons/index.js';
-import { stringifyFixtureId } from '../../components/ValueInputTree/index.js';
 import { createRelativePlaygroundUrl } from '../../shared/url.js';
@@ -7,0 +7,0 @@ import { blue, grey128, grey224, grey24, grey248, grey32, grey8, selectedColors, white10, } from '../../style/colors.js';

dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -6,3 +7,3 @@ fixtureSelected: boolean;
 };
-export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchHeader.js

 import React from 'react';
 import styled from 'styled-components';
+import { KeyBox } from '../../components/KeyBox.js';
 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';
@@ -7,0 +7,0 @@ export function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }) {

dist/plugins/FixtureSearch/FixtureSearchOverlay.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId, FixtureList } from 'react-cosmos-core';
@@ -12,3 +13,3 @@ type Props = {
 };
-export declare function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffix, fixtures, selectedFixtureId, onSetSearchText, onClose, onSelect, }: Props): JSX.Element;
+export declare function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffix, fixtures, selectedFixtureId, onSetSearchText, onClose, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchOverlay.js

 import { filter } from 'fuzzaldrin-plus';
 import { isEqual } from 'lodash-es';
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { createFixtureTree, flattenFixtureTree, KEY_DOWN, KEY_ENTER, KEY_ESC, KEY_FWD_SLASH, KEY_TAB, KEY_UP, } from 'react-cosmos-core';
+import { KEY_DOWN, KEY_ENTER, KEY_ESC, KEY_FWD_SLASH, KEY_TAB, KEY_UP, createFixtureTree, flattenFixtureTree, } from 'react-cosmos-core';
 import styled from 'styled-components';
@@ -179,3 +179,3 @@ import { HelpCircleIcon, SearchIcon } from '../../components/icons/index.js';
                 React.createElement(ResultsContainer, null,
-                    matchingFixturePaths.map(cleanFixturePath => (React.createElement(FixtureSearchResult, { key: cleanFixturePath, cleanFixturePath: cleanFixturePath, fixtureItem: fixtureItems[cleanFixturePath], active: cleanFixturePath === activeFixturePath, onSelect: onSelect }))),
+                    matchingFixturePaths.map(cleanFixturePath => fixtureItems[cleanFixturePath] && (React.createElement(FixtureSearchResult, { key: cleanFixturePath, cleanFixturePath: cleanFixturePath, fixtureItem: fixtureItems[cleanFixturePath], active: cleanFixturePath === activeFixturePath, onSelect: onSelect }))),
                     matchingFixturePaths.length === 0 && (React.createElement(NoResults, null, "No results")))))));
@@ -182,0 +182,0 @@ }

dist/plugins/FixtureSearch/FixtureSearchResult.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
@@ -8,3 +9,3 @@ type Props = {
 };
-export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): JSX.Element;
+export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchShortcuts.d.ts

@@ -1,1 +0,2 @@
-export declare function FixtureSearchShortcuts(): JSX.Element;
+import React from 'react';
+export declare function FixtureSearchShortcuts(): React.JSX.Element;

dist/plugins/FixtureTree/BlankState.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -5,5 +6,5 @@ fixturesDir: string;
 };
-export declare function BlankState({ fixturesDir, fixtureFileSuffix }: Props): JSX.Element;
+export declare function BlankState({ fixturesDir, fixtureFileSuffix }: Props): React.JSX.Element;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

dist/plugins/FixtureTree/BlankState.js

 import React from 'react';
+import { DelayRender } from 'react-cosmos-core';
 import styled from 'styled-components';
@@ -6,26 +7,24 @@ import { FileIcon } from '../../components/icons/index.js';
 export function BlankState({ fixturesDir, fixtureFileSuffix }) {
-    return (React.createElement(Container, { "data-testid": "nav-blank-state" },
-        React.createElement(IconContainer, null,
-            React.createElement(FileIcon, null)),
-        React.createElement(Title, null,
-            "No component ",
-            React.createElement(NoWrap, null, "fixtures found")),
-        React.createElement(Description, null,
-            React.createElement("ol", null,
-                React.createElement("li", null,
-                    "Place fixture files under ",
-                    React.createElement("code", null, fixturesDir),
-                    " dirs or add the",
-                    ' ',
-                    React.createElement("code", null,
-                        ".",
-                        fixtureFileSuffix),
-                    " suffix to",
-                    ' ',
-                    React.createElement(NoWrap, null, "their name")),
-                React.createElement("li", null,
-                    "Default exports from your fixtures (any React element or component)",
-                    ' ',
-                    "will ",
-                    React.createElement(NoWrap, null, "appear here"))))));
+    return (React.createElement(DelayRender, { delay: 500 },
+        React.createElement(Container, { "data-testid": "nav-blank-state" },
+            React.createElement(IconContainer, null,
+                React.createElement(FileIcon, null)),
+            React.createElement(Title, null,
+                "No component ",
+                React.createElement(NoWrap, null, "fixtures found")),
+            React.createElement(Description, null,
+                React.createElement("ol", null,
+                    React.createElement("li", null,
+                        "Place fixture files under ",
+                        React.createElement("code", null, fixturesDir),
+                        " dirs or add the ",
+                        React.createElement("code", null,
+                            ".",
+                            fixtureFileSuffix),
+                        " suffix to",
+                        ' ',
+                        React.createElement(NoWrap, null, "their name")),
+                    React.createElement("li", null,
+                        "Default exports from your fixtures (any React element or component) will ",
+                        React.createElement(NoWrap, null, "appear here")))))));
 }
@@ -32,0 +31,0 @@ const Container = styled.div `

dist/plugins/FixtureTree/FixtureTree/FixtureButton.d.ts

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -11,3 +11,3 @@ type Props = {
 };
-export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTree/FixtureDir.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -8,3 +9,3 @@ name: string;
 };
-export declare function FixtureDir({ name, expanded, indentLevel, selected, onToggle, }: Props): JSX.Element;
+export declare function FixtureDir({ name, expanded, indentLevel, selected, onToggle, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTree/FixtureLink.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -8,3 +8,3 @@ type Props = {
 };
-export declare function FixtureLink({ children, fixtureId, onSelect }: Props): JSX.Element;
+export declare function FixtureLink({ children, fixtureId, onSelect }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.d.ts

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -13,3 +13,3 @@ type Props = {
 };
-export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTree/MultiFixtureChildButton.d.ts

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -11,3 +11,3 @@ type Props = {
 };
-export declare function MultiFixtureChildButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function MultiFixtureChildButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTreeContainer.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId, FixtureList } from 'react-cosmos-core';
@@ -12,3 +13,3 @@ import { TreeExpansion } from '../../shared/treeExpansion.js';
 };
-export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
+export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTreeHeader.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureList } from 'react-cosmos-core';
@@ -10,3 +11,3 @@ import { TreeExpansion } from '../../shared/treeExpansion.js';
 };
-export declare function FixtureTreeHeader({ fixturesDir, fixtureFileSuffix, fixtures, expansion, setExpansion, }: Props): JSX.Element;
+export declare function FixtureTreeHeader({ fixturesDir, fixtureFileSuffix, fixtures, expansion, setExpansion, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/shared.d.ts

@@ -6,3 +6,3 @@ import { PluginContext } from 'react-plugin';
 export type FixtureTreeContext = PluginContext<FixtureTreeSpec>;
-export declare function getTreeExpansion({ getItem }: StorageSpec['methods']): TreeExpansion;
+export declare function getTreeExpansion({ getItem }: StorageSpec['methods']): {};
 export declare function setTreeExpansion({ setItem }: StorageSpec['methods'], treeExpansion: TreeExpansion): void;

dist/plugins/FullScreenButton/FullScreenButton.d.ts

@@ -0,5 +1,6 @@
+import React from 'react';
 type Props = {
     onClick: () => void;
 };
-export declare function FullScreenButton({ onClick }: Props): JSX.Element;
+export declare function FullScreenButton({ onClick }: Props): React.JSX.Element;
 export {};

dist/plugins/FullScreenButton/index.js

 import React from 'react';
-import { stringifyRendererUrlQuery } from 'react-cosmos-core';
+import { createRendererUrl } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
@@ -12,7 +12,13 @@ import { FullScreenButton } from './FullScreenButton.js';
     const core = getMethodsOf('core');
-    const rendererUrl = core.getWebRendererUrl();
+    const rendererCore = getMethodsOf('rendererCore');
+    const rendererUrl = rendererCore.getRendererUrl();
     const onSelect = React.useCallback(() => {
-        const query = stringifyRendererUrlQuery({ _fixtureId: fixtureId });
-        const fixtureUrl = `${rendererUrl}?${query}`;
-        window.open(fixtureUrl, '_blank');
+        if (rendererUrl) {
+            const fixtureUrl = createRendererUrl(rendererUrl, fixtureId, true);
+            // noopener is required to prevent reuse of sessionStorage from the
+            // Playground window, thus making sure the remote renderer will generate
+            // a different rendererId from the iframe renderer.
+            // https://stackoverflow.com/a/73821739
+            window.open(fixtureUrl, '_blank', 'noopener=true');
+        }
     }, [fixtureId, rendererUrl]);
@@ -19,0 +25,0 @@ React.useEffect(() => {

dist/plugins/MessageHandler/socket.js

@@ -9,3 +9,3 @@ import { rendererSocketMessage, } from 'react-cosmos-core';
     }
-    socket = new WebSocket(location.origin.replace(/^https?:/, 'ws:'));
+    socket = new WebSocket(location.origin.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:'));
     socket.addEventListener('open', () => {
@@ -12,0 +12,0 @@ if (socket && pendingMessages.length > 0) {

dist/plugins/Notifications/Notifications.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { NotificationItem } from './spec.js';
@@ -5,3 +6,3 @@ type Props = {
 };
-export declare function Notifications({ notifications }: Props): JSX.Element;
+export declare function Notifications({ notifications }: Props): React.JSX.Element;
 export {};

dist/plugins/PluginList/PluginList.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 export type SimplePlugin = {
@@ -9,3 +10,3 @@ name: string;
 };
-export declare function PluginList({ plugins, enable }: Props): JSX.Element;
+export declare function PluginList({ plugins, enable }: Props): React.JSX.Element;
 export {};

dist/plugins/PropsPanel/BlankState.d.ts

@@ -1,3 +0,4 @@
-export declare function BlankState(): JSX.Element;
+import React from 'react';
+export declare function BlankState(): React.JSX.Element;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;

dist/plugins/PropsPanel/BlankState.js

 import React from 'react';
+import { DelayRender } from 'react-cosmos-core';
 import styled from 'styled-components';
@@ -6,14 +7,15 @@ import { SlidersIcon } from '../../components/icons/index.js';
 export function BlankState() {
-    return (React.createElement(Container, null,
-        React.createElement(IconContainer, null,
-            React.createElement(SlidersIcon, null)),
-        React.createElement(Title, null,
-            "No visible props in ",
-            React.createElement(NoWrap, null, "selected fixture")),
-        React.createElement(Description, null,
-            "Props of exported JSX ",
-            React.createElement(NoWrap, null, "elements from"),
-            " your fixtures",
-            ' ',
-            React.createElement(NoWrap, null, "will appear here."))));
+    return (React.createElement(DelayRender, { delay: 500 },
+        React.createElement(Container, null,
+            React.createElement(IconContainer, null,
+                React.createElement(SlidersIcon, null)),
+            React.createElement(Title, null,
+                "No visible props in ",
+                React.createElement(NoWrap, null, "selected fixture")),
+            React.createElement(Description, null,
+                "Props of exported JSX ",
+                React.createElement(NoWrap, null, "elements from"),
+                " your fixtures",
+                ' ',
+                React.createElement(NoWrap, null, "will appear here.")))));
 }
@@ -20,0 +22,0 @@ const Container = styled.div `

dist/plugins/PropsPanel/index.js

@@ -42,6 +42,3 @@ import React from 'react';
 function shouldShowBlankState(fixtureState) {
-    // Don't show blank state until props (empty or not) have been read
-    if (!fixtureState.props)
-        return false;
-    const hasProps = fixtureState.props.some(hasFsValues);
+    const hasProps = fixtureState.props && fixtureState.props.some(hasFsValues);
     if (hasProps)
@@ -48,0 +45,0 @@ return false;

dist/plugins/PropsPanel/PropsPanel/ComponentProps.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureState, FixtureStateProps, StateUpdater } from 'react-cosmos-core';
@@ -9,3 +10,3 @@ import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
 };
-export declare function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export declare function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

dist/plugins/RemoteRenderer/index.js

@@ -27,4 +27,5 @@ import React from 'react';
     const core = getMethodsOf('core');
+    const rendererCore = getMethodsOf('rendererCore');
     const notifications = getMethodsOf('notifications');
-    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), webRendererUrl: core.getWebRendererUrl(), pushNotification: notifications.pushTimedNotification }));
+    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), rendererUrl: rendererCore.getRendererUrl(), pushNotification: notifications.pushTimedNotification }));
 });
@@ -31,0 +32,0 @@ export { register };

dist/plugins/RemoteRenderer/RemoteButton/index.d.ts

@@ -0,8 +1,9 @@
+import React from 'react';
 import { NotificationItem } from '../../Notifications/spec.js';
 type Props = {
     devServerOn: boolean;
-    webRendererUrl: null | string;
+    rendererUrl: null | string;
     pushNotification: (notification: NotificationItem) => unknown;
 };
-export declare function RemoteButton({ devServerOn, webRendererUrl, pushNotification, }: Props): JSX.Element | null;
+export declare function RemoteButton({ devServerOn, rendererUrl, pushNotification, }: Props): React.JSX.Element | null;
 export {};

dist/plugins/RemoteRenderer/RemoteButton/index.js

 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { IconButton32 } from '../../../components/buttons/index.js';
 import { CastIcon } from '../../../components/icons/index.js';
 import { copyToClipboard } from './copyToClipboard.js';
-export function RemoteButton({ devServerOn, webRendererUrl, pushNotification, }) {
-    if (!devServerOn || !webRendererUrl) {
+export function RemoteButton({ devServerOn, rendererUrl, pushNotification, }) {
+    if (!devServerOn || !rendererUrl) {
         return null;
     }
-    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(webRendererUrl) }));
+    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(createRendererUrl(rendererUrl)) }));
     async function copyRendererUrlToClipboard(url) {
@@ -36,3 +37,3 @@ const fullUrl = getFullUrl(url);
         return rendererUrl;
-    return `${location.origin}${rendererUrl}`;
+    return new URL(rendererUrl, location.origin).toString();
 }

dist/plugins/RendererCore/index.js

 import { createPlugin } from 'react-plugin';
-import { onRouterFixtureChange } from './onRouterFixtureChange.js';
+import { onRouterFixtureReselect } from './onRouterFixtureReselect.js';
+import { onRouterFixtureSelect } from './onRouterFixtureSelect.js';
+import { onRouterFixtureUnselect } from './onRouterFixtureUnselect.js';
 import { receiveResponse } from './receiveResponse/index.js';
+import { reloadRenderer } from './reloadRenderer.js';
 import { setFixtureState } from './setFixtureState.js';
@@ -9,2 +12,3 @@ const { on, register, onLoad } = createPlugin({
         fixtures: {},
+        rendererUrl: null,
     },
@@ -18,2 +22,3 @@ initialState: {
     methods: {
+        getRendererUrl,
         getConnectedRendererIds,
@@ -24,2 +29,3 @@ getPrimaryRendererId,
         isRendererConnected,
+        reloadRenderer,
         setFixtureState,
@@ -34,6 +40,13 @@ selectPrimaryRenderer,
 });
-on('router', { fixtureChange: onRouterFixtureChange });
+on('router', {
+    fixtureSelect: onRouterFixtureSelect,
+    fixtureReselect: onRouterFixtureReselect,
+    fixtureUnselect: onRouterFixtureUnselect,
+});
 export { register };
 if (process.env.NODE_ENV !== 'test')
     register();
+function getRendererUrl({ getConfig }) {
+    return getConfig().rendererUrl;
+}
 function getConnectedRendererIds({ getState }) {
@@ -40,0 +53,0 @@ return getState().connectedRendererIds;

dist/plugins/RendererCore/receiveResponse/fixtureStateChange.js

@@ -8,2 +8,6 @@ import { isEqual } from 'lodash-es';
     const { primaryRendererId, fixtureState: prevFixtureState } = context.getState();
+    // Discard updates from secondary renderers
+    if (rendererId !== primaryRendererId) {
+        return;
+    }
     if (!isEqual(fixtureId, selectedFixtureId)) {
@@ -14,6 +18,2 @@ console.warn('[Renderer] fixtureStateChange response ignored ' +
     }
-    // Discard updates from secondary renderers
-    if (rendererId !== primaryRendererId) {
-        return;
-    }
     if (isEqual(fixtureState, prevFixtureState)) {
@@ -20,0 +20,0 @@ return;

dist/plugins/RendererCore/receiveResponse/index.js

@@ -1,2 +0,1 @@
-import { receiveFixtureListItemUpdateResponse } from './fixtureListItemUpdate.js';
 import { receiveFixtureListUpdateResponse } from './fixtureListUpdate.js';
@@ -14,4 +13,2 @@ import { receiveFixtureStateChangeResponse } from './fixtureStateChange.js';
             return receiveFixtureListUpdateResponse(context, rendererResponse);
-        case 'fixtureListItemUpdate':
-            return receiveFixtureListItemUpdateResponse(context, rendererResponse);
         case 'fixtureStateChange':
@@ -18,0 +15,0 @@ return receiveFixtureStateChangeResponse(context, rendererResponse);

dist/plugins/RendererCore/receiveResponse/rendererReady.js

@@ -0,5 +1,6 @@
+import { isEqual } from 'lodash-es';
 import { postSelectFixtureRequest } from '../shared/postRequest.js';
-import { getSelectedFixtureId } from '../shared/router.js';
 export function receiveRendererReadyResponse(context, { payload }) {
-    const { rendererId, fixtures, initialFixtureId } = payload;
+    const { rendererId } = payload;
+    const { connectedRendererIds: prevRendererIds } = context.getState();
     context.setState(stateUpdater, afterStateChanged);
@@ -9,3 +10,2 @@ function stateUpdater(prevState) {
         const primaryRendererId = prevState.primaryRendererId || rendererId;
-        const isPrimaryRenderer = rendererId === primaryRendererId;
         const { connectedRendererIds, fixtureState } = prevState;
@@ -16,25 +16,19 @@ return {
             primaryRendererId,
-            fixtures,
-            fixtureState: isPrimaryRenderer ? {} : fixtureState,
+            fixtureState: rendererId === primaryRendererId ? {} : fixtureState,
         };
     }
     function afterStateChanged() {
-        if (initialFixtureId)
-            selectInitialFixture(context, initialFixtureId);
-        else
-            selectFixtureFromUrlParams(context, rendererId);
-        notifyRendererConnection(context, rendererId);
+        const router = context.getMethodsOf('router');
+        const rendererFixtureId = payload.selectedFixtureId;
+        const routerFixtureId = router.getSelectedFixtureId();
+        if (routerFixtureId && !isEqual(routerFixtureId, rendererFixtureId)) {
+            const { fixtureState } = context.getState();
+            postSelectFixtureRequest(context, rendererId, routerFixtureId, fixtureState);
+        }
+        // Notify about connected renderers that weren't connected before
+        if (!prevRendererIds.includes(rendererId)) {
+            notifyRendererConnection(context, rendererId);
+        }
     }
 }
-function selectInitialFixture({ getMethodsOf }, fixtureId) {
-    const router = getMethodsOf('router');
-    router.selectFixture(fixtureId);
-}
-function selectFixtureFromUrlParams(context, rendererId) {
-    const fixtureId = getSelectedFixtureId(context);
-    if (fixtureId) {
-        const { fixtureState } = context.getState();
-        postSelectFixtureRequest(context, rendererId, fixtureId, fixtureState);
-    }
-}
 function notifyRendererConnection({ getMethodsOf }, rendererId) {
@@ -41,0 +35,0 @@ const notifications = getMethodsOf('notifications');

dist/plugins/RendererCore/shared/postRequest.d.ts

 import { FixtureId, FixtureState, RendererId } from 'react-cosmos-core';
 import { RendererCoreContext } from '../shared/index.js';
+export declare function postReloadRendererRequest(context: RendererCoreContext, rendererId: RendererId): void;
 export declare function postSelectFixtureRequest(context: RendererCoreContext, rendererId: RendererId, fixtureId: FixtureId, fixtureState: FixtureState): void;
 export declare function postUnselectFixtureRequest(context: RendererCoreContext, rendererId: RendererId): void;
 export declare function postSetFixtureStateRequest(context: RendererCoreContext, rendererId: RendererId, fixtureId: FixtureId, fixtureState: FixtureState): void;

dist/plugins/RendererCore/shared/postRequest.js

@@ -0,1 +1,9 @@
+export function postReloadRendererRequest(context, rendererId) {
+    postRendererRequest(context, {
+        type: 'reloadRenderer',
+        payload: {
+            rendererId,
+        },
+    });
+}
 export function postSelectFixtureRequest(context, rendererId, fixtureId, fixtureState) {
@@ -2,0 +10,0 @@ postRendererRequest(context, {

dist/plugins/RendererCore/spec.d.ts

@@ -6,2 +6,3 @@ import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
         fixtures: FixtureList;
+        rendererUrl: null | string;
     };
@@ -15,2 +16,3 @@ state: {
     methods: {
+        getRendererUrl(): null | string;
         getConnectedRendererIds(): RendererId[];
@@ -21,2 +23,3 @@ getPrimaryRendererId(): null | RendererId;
         isRendererConnected(): boolean;
+        reloadRenderer(): void;
         setFixtureState(stateUpdater: StateUpdater<FixtureState>): void;
@@ -23,0 +26,0 @@ selectPrimaryRenderer(primaryRendererId: RendererId): void;

dist/plugins/RendererPreview/handleRendererRequests.js

@@ -37,3 +37,3 @@ const notificationId = 'renderer-location-change';
                                 title: 'Renderer iframe location changed',
-                                info: `Reload or select another fixture to reset your preview.`,
+                                info: `Select a fixture to reset your preview.`,
                             });
@@ -63,7 +63,8 @@ }
         const { href } = iframeWindow.location;
-        const locationWithoutHash = href.split('#')[0];
-        return (locationWithoutHash !== iframeSrc &&
-            // Some static servers strip .html extensions automatically
-            // https://github.com/zeit/serve-handler/tree/ce35fcd4e1c67356348f4735eed88fb084af9b43#cleanurls-booleanarray
-            locationWithoutHash !== iframeSrc.replace(/\.html$/, ''));
+        return (
+        // Don't register a location change when renderer searchParams change
+        !href.startsWith(
+        // Some static servers strip .html extensions automatically
+        // https://github.com/zeit/serve-handler/tree/ce35fcd4e1c67356348f4735eed88fb084af9b43#cleanurls-booleanarray
+        iframeSrc.replace(/\.html$/, '')));
     }
@@ -70,0 +71,0 @@ catch (err) {

dist/plugins/RendererPreview/handleWindowMessages.js

@@ -32,4 +32,13 @@ export function handleWindowMessages(context) {
 }
-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
@@ -36,0 +45,0 @@ // established. Errors that occur after renderer is connected are likely

dist/plugins/RendererPreview/index.js

 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();
@@ -11,7 +10,5 @@ const { onLoad, on, plug, register } = createPlugin({
     initialState: {
-        urlStatus: 'unknown',
         runtimeStatus: 'pending',
     },
     methods: {
-        getUrlStatus,
         getRuntimeStatus,
@@ -28,6 +25,3 @@ },
     }
-    return [
-        checkRendererStatus(context, rendererUrl),
-        handleWindowMessages(context),
-    ];
+    return [handleWindowMessages(context)];
 });
@@ -38,3 +32,3 @@ plug('rendererPreview', ({ pluginContext }) => {
     }
-    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), urlStatus: pluginContext.getState().urlStatus, runtimeStatus: pluginContext.getState().runtimeStatus, onIframeRef: handleIframeRef }));
+    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), rendererConnected: getRendererConnected(pluginContext), runtimeStatus: pluginContext.getState().runtimeStatus, onIframeRef: handleIframeRef }));
 });
@@ -44,5 +38,2 @@ export { register };
     register();
-function getUrlStatus({ getState }) {
-    return getState().urlStatus;
-}
 function getRuntimeStatus({ getState }) {
@@ -52,3 +43,6 @@ return getState().runtimeStatus;
 function getRendererUrl({ getMethodsOf }) {
-    return getMethodsOf('core').getWebRendererUrl();
+    return getMethodsOf('rendererCore').getRendererUrl();
 }
+function getRendererConnected({ getMethodsOf }) {
+    return getMethodsOf('rendererCore').isRendererConnected();
+}

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

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

dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.js

 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') {
+export function RendererOverlay({ runtimeStatus }) {
+    if (runtimeStatus === 'pending') {
         return React.createElement(WaitingForRenderer, null);
     }
+    // No render overlay is shown in both "connected" and "error" states. In the
+    // latter case, the renderer will communicate the error using its own
+    // framework-specific UI.
     return null;
 }

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

@@ -1,1 +0,2 @@
-export declare function WaitingForRenderer(): JSX.Element;
+import React from 'react';
+export declare function WaitingForRenderer(): React.JSX.Element;

dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.js

 import React from 'react';
+import { DelayRender } from 'react-cosmos-core';
 import styled from 'styled-components';
-import { OverlayBody, RendererOverlayContainer, TextContainer, } from '../../../components/ContentOverlay.js';
-import { DelayedLoading } from '../../../components/DelayedLoading.js';
+import { grey144 } from '../../../style/colors.js';
+import { RendererOverlayContainer, RendererOverlayIconWrapper, RendererOverlayMessage, } from './rendererOverlayShared.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 },
+    return (React.createElement(DelayRender, { delay: 500 },
         React.createElement(RendererOverlayContainer, null,
-            React.createElement(OverlayBody, null,
-                React.createElement(TextContainer, null,
-                    React.createElement(Message, null,
-                        "Waiting for renderer",
-                        dots))))));
+            React.createElement(RendererOverlayIconWrapper, null,
+                React.createElement(Loader, null)),
+            React.createElement(RendererOverlayMessage, null, "Waiting for renderer..."))));
 }
-const Message = styled.p `
-  margin: 0 auto;
-  width: 210px;
-  font-weight: 600;
-  text-transform: uppercase;
-  white-space: nowrap;
+// Copied from https://codepen.io/bernethe/pen/dorozd
+const Loader = styled.div `
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  position: relative;
+
+  :before,
+  :after {
+    content: '';
+    box-sizing: border-box;
+    border: 1px ${grey144} solid;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+  }
+
+  :before {
+    transform: scale(1, 1);
+    opacity: 1;
+    animation: waveOuter 1.5s infinite linear;
+  }
+
+  :after {
+    transform: scale(0, 0);
+    opacity: 0;
+    animation: waveInner 1.5s infinite linear;
+  }
+
+  @keyframes waveOuter {
+    from {
+      -webkit-transform: scale(1, 1);
+      opacity: 1;
+    }
+    to {
+      -webkit-transform: scale(1.5, 1.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes waveInner {
+    from {
+      transform: scale(0.5, 0.5);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
 `;

dist/plugins/RendererPreview/RendererPreview.d.ts

 import React from 'react';
-import { RuntimeStatus, UrlStatus } from './spec.js';
+import { RuntimeStatus } from './spec.js';
 export type OnIframeRef = (elRef: null | HTMLIFrameElement) => void;
 type Props = {
     rendererUrl: null | string;
-    urlStatus: UrlStatus;
+    rendererConnected: boolean;
     runtimeStatus: RuntimeStatus;
@@ -8,0 +8,0 @@ onIframeRef: OnIframeRef;

dist/plugins/RendererPreview/RendererPreview.js

 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { Slot } from 'react-plugin';
 import styled from 'styled-components';
-import { rendererBg } from '../../style/vars.js';
+import { RemoteRendererOverlay } from './RendererOverlay/RemoteRendererOverlay.js';
 import { RendererOverlay } from './RendererOverlay/RendererOverlay.js';
-import { WaitingForRenderer } from './RendererOverlay/WaitingForRenderer.js';
-export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, urlStatus, runtimeStatus, onIframeRef, }) {
+export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, rendererConnected, runtimeStatus, onIframeRef, }) {
     if (!rendererUrl) {
         // 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(Container, null,
+            React.createElement(RemoteRendererOverlay, { rendererConnected: rendererConnected })));
     }
     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(RendererOverlay, { rendererPreviewUrlStatus: urlStatus, rendererPreviewRuntimeStatus: runtimeStatus }))));
+            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: createRendererUrl(rendererUrl), frameBorder: 0, allow: "clipboard-write *; fullscreen *;" }),
+            React.createElement(RendererOverlay, { runtimeStatus: runtimeStatus }))));
 });
@@ -22,3 +23,3 @@ const Container = styled.div `
   background-color: #fff;
-  background-image: ${rendererBg};
+  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");
 `;
@@ -25,0 +26,0 @@ const Iframe = styled.iframe `

dist/plugins/RendererPreview/shared.d.ts

 import { PluginContext } from 'react-plugin';
-import { RendererPreviewSpec, RuntimeStatus, UrlStatus } from './spec.js';
-export type State = {
-    urlStatus: UrlStatus;
-    runtimeStatus: RuntimeStatus;
-};
+import { RendererPreviewSpec } from './spec.js';
 export type RendererPreviewContext = PluginContext<RendererPreviewSpec>;

dist/plugins/RendererPreview/spec.d.ts

@@ -1,2 +0,1 @@
-export type UrlStatus = 'unknown' | 'ok' | 'error';
 export type RuntimeStatus = 'pending' | 'connected' | 'error';
@@ -6,9 +5,7 @@ export type RendererPreviewSpec = {
     state: {
-        urlStatus: UrlStatus;
         runtimeStatus: RuntimeStatus;
     };
     methods: {
-        getUrlStatus(): UrlStatus;
         getRuntimeStatus(): RuntimeStatus;
     };
 };

dist/plugins/ResponsivePreview/index.js

 import React from 'react';
 import { createPlugin } from 'react-plugin';
 import { ResponsivePreview } from './ResponsivePreview/ResponsivePreview.js';
+import { ToggleButton } from './ToggleButton/index.js';
 import { DEFAULT_DEVICES, DEFAULT_VIEWPORT_STATE, VIEWPORT_STORAGE_KEY, } from './shared.js';
-import { ToggleButton } from './ToggleButton/index.js';
 const { plug, namedPlug, register } = createPlugin({
@@ -22,6 +22,6 @@ name: 'responsivePreview',
     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;
@@ -28,0 +28,0 @@ return (React.createElement(ToggleButton, { selected: enabled, onToggle: () => {

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

@@ -1,2 +0,2 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction } from 'react';
 import { ResponsiveDevice, ResponsiveViewport } from '../spec.js';
@@ -12,3 +12,3 @@ type Props = {
 };
-export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }: Props): JSX.Element;
+export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }: Props): React.JSX.Element;
 export {};

dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.js

@@ -6,3 +6,3 @@ import { isEqual } from 'lodash-es';
 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';
@@ -67,3 +67,3 @@ export function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }) {
     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 },
@@ -70,0 +70,0 @@ React.createElement("div", { style: padContainerStyle },

dist/plugins/ResponsivePreview/shared.js

 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 },
 ];
@@ -18,3 +21,3 @@ export const VIEWPORT_STORAGE_KEY = 'responsiveViewportState';
     scaled: true,
-    viewport: { width: 320, height: 568 },
+    viewport: { width: 375, height: 667 },
 };

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

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -5,3 +6,3 @@ selected: boolean;
 };
-export declare function ToggleButton({ selected, onToggle }: Props): JSX.Element;
+export declare function ToggleButton({ selected, onToggle }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/GlobalHeader.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -5,3 +6,3 @@ rendererConnected: boolean;
 };
-export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): JSX.Element;
+export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): React.JSX.Element;
 export {};

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

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -6,3 +7,3 @@ welcomeDismissed: boolean;
 };
-export declare function HomeOverlay({ welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
+export declare function HomeOverlay({ welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): React.JSX.Element;
 export {};

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

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -5,3 +6,3 @@ keys: string[];
 };
-export declare function KeyShortcut({ keys, label }: Props): JSX.Element;
+export declare function KeyShortcut({ keys, label }: Props): React.JSX.Element;
 export {};

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

@@ -0,5 +1,6 @@
+import React from 'react';
 type Props = {
     onShowWelcome: () => unknown;
 };
-export declare function NoFixtureSelected({ onShowWelcome }: Props): JSX.Element;
+export declare function NoFixtureSelected({ onShowWelcome }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/HomeOverlay/NoFixtureSelected.js

 import React from 'react';
 import styled from 'styled-components';
-import { IllustrationContainer, OverlayBody, OverlayContainer, SecondaryButton, TextContainer, } from '../../../components/ContentOverlay.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';
@@ -7,0 +7,0 @@ export function NoFixtureSelected({ onShowWelcome }) {

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

@@ -0,5 +1,6 @@
+import React from 'react';
 type Props = {
     onDismissWelcome: () => unknown;
 };
-export declare function WelcomeCosmos({ onDismissWelcome }: Props): JSX.Element;
+export declare function WelcomeCosmos({ onDismissWelcome }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/HomeOverlay/WelcomeCosmos.js

 import React from 'react';
 import styled from 'styled-components';
-import { IllustrationContainer, NoWrap, OverlayBody, OverlayContainer, SecondaryButton, TextContainer, } from '../../../components/ContentOverlay.js';
 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 }) {
@@ -7,0 +7,0 @@ return (React.createElement(OverlayContainer, { "data-testid": "welcome" },

dist/plugins/Root/index.js

@@ -5,2 +5,3 @@ import React from 'react';
 import { useWelcomeDismiss } from './HomeOverlay/welcomeDismiss.js';
+import { Root } from './Root.js';
 import { isNavOpen, openNav } from './navOpen.js';
@@ -10,3 +11,2 @@ import { getNavWidthApi } from './navWidth.js';
 import { getPanelWidthApi } from './panelWidth.js';
-import { Root } from './Root.js';
 const { onLoad, plug, register } = createPlugin({
@@ -54,3 +54,3 @@ name: 'root',
     const { sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, } = getConfig();
-    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, onFixtureSelect: router.selectFixture, onFixtureClose: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth, welcomeDismissed: welcomeDismiss.isWelcomeDismissed(), onDismissWelcome: welcomeDismiss.onDismissWelcome, onShowWelcome: welcomeDismiss.onShowWelcome }));
+    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 }));
 });
@@ -57,0 +57,0 @@ export { register };

dist/plugins/Root/navOpen.js

 export const NAV_OPEN_STORAGE_KEY = 'navOpen';
-const NAV_OPEN_DEFAULT = true;
+const NAV_OPEN_DEFAULT = window.innerWidth >= 640;
 export function isNavOpen(context) {
@@ -4,0 +4,0 @@ const storage = context.getMethodsOf('storage');

dist/plugins/Root/panelOpen.js

 export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
-const PANEL_OPEN_DEFAULT = true;
+const PANEL_OPEN_DEFAULT = window.innerWidth >= 960;
 export function isPanelOpen(context) {
@@ -4,0 +4,0 @@ const storage = context.getMethodsOf('storage');

dist/plugins/Root/RendererHeader.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
     onTogglePanel: () => unknown;
-    onFixtureSelect: (fixtureId: FixtureId) => unknown;
+    onReloadRenderer: () => unknown;
     onClose: () => unknown;
@@ -15,0 +15,0 @@ };

dist/plugins/Root/RendererHeader.js

@@ -9,6 +9,5 @@ import { isEqual } from 'lodash-es';
 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,
@@ -20,3 +19,3 @@ React.createElement(Left, 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(IconButton32, { icon: React.createElement(RotateCcwIcon, null), title: "Reload fixture", onClick: onReloadRenderer }),
             fixtureItem && (React.createElement(FixtureActionSlotContainer, { fixtureActionOrder: fixtureActionOrder, fixtureItem: fixtureItem }))),
@@ -23,0 +22,0 @@ fixtureItem && React.createElement(FixtureName, null, getFixtureName(fixtureItem)),

dist/plugins/Root/Root.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
@@ -19,4 +20,4 @@ type Props = {
     onTogglePanel: () => unknown;
-    onFixtureSelect: (fixtureId: FixtureId) => unknown;
-    onFixtureClose: () => unknown;
+    onReloadRenderer: () => unknown;
+    onCloseFixture: () => unknown;
     onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
@@ -29,3 +30,3 @@ setNavWidth: (width: number) => unknown;
 };
-export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: 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): React.JSX.Element;
 export {};

dist/plugins/Root/Root.js

@@ -11,3 +11,3 @@ import React from 'react';
 import { SidePanel } from './SidePanel.js';
-export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
+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({
@@ -34,3 +34,3 @@ value: navWidth,
             React.createElement(RendererContainer, { key: "rendererContainer" },
-                selectedFixtureId && (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" },
@@ -37,0 +37,0 @@ React.createElement(Slot, { name: "rendererPreview" }),

dist/plugins/Root/ToggleNavButton.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 type Props = {
@@ -6,3 +7,3 @@ disabled?: boolean;
 };
-export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): JSX.Element;
+export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): React.JSX.Element;
 export {};

dist/plugins/Router/index.js

@@ -6,2 +6,5 @@ import { isEqual } from 'lodash-es';
     name: 'router',
+    defaultConfig: {
+        initialFixtureId: null,
+    },
     initialState: {
@@ -17,4 +20,8 @@ urlParams: {},
 onLoad(context => {
-    const { setState } = context;
+    const { getConfig, setState } = context;
     setState({ urlParams: getUrlParams() });
+    const { initialFixtureId } = getConfig();
+    if (initialFixtureId) {
+        selectFixture(context, initialFixtureId);
+    }
     return subscribeToLocationChanges((urlParams) => {
@@ -25,3 +32,3 @@ const { fixtureId } = context.getState().urlParams;
             if (fixtureChanged) {
-                emitFixtureChangeEvent(context);
+                emitFixtureChangeEvent(context, true);
             }
@@ -47,14 +54,26 @@ });
     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);
+    }
 }

dist/plugins/Router/spec.d.ts

@@ -1,6 +0,9 @@
-import { FixtureId, PlaygroundUrlParams } from 'react-cosmos-core';
+import { FixtureId, PlaygroundParams } from 'react-cosmos-core';
 export type RouterSpec = {
     name: 'router';
+    config: {
+        initialFixtureId: null | FixtureId;
+    };
     state: {
-        urlParams: PlaygroundUrlParams;
+        urlParams: PlaygroundParams;
     };
@@ -13,4 +16,6 @@ methods: {
     events: {
-        fixtureChange(fixtureId: null | FixtureId): void;
+        fixtureSelect(fixtureId: FixtureId): void;
+        fixtureReselect(fixtureId: FixtureId): void;
+        fixtureUnselect(): void;
     };
 };

dist/plugins/StandardControl/storage.d.ts

@@ -5,4 +5,4 @@ import { PluginContext } from 'react-plugin';
 export declare function useTreeExpansionStorage(pluginContext: PluginContext<StandardControlSpec>): {
-    expansion: TreeExpansion;
+    expansion: {};
     setExpansion: (newTreeExpansion: TreeExpansion) => void;
 };

dist/shared/url.d.ts

@@ -1,5 +0,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;

dist/shared/url.js

@@ -1,7 +0,7 @@
-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
@@ -25,10 +25,10 @@ if (!history.pushState) {
 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 || './';
 }

dist/slots/ControlActionSlot.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureStateControls } from 'react-cosmos-core';
@@ -9,3 +10,3 @@ export type ControlActionSlotProps = {
 };
-export declare function ControlActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function ControlActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/ControlSlot.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureState, FixtureStateControl, StateUpdater } from 'react-cosmos-core';
@@ -10,3 +11,3 @@ export type ControlSlotProps<TControl extends FixtureStateControl> = {
 };
-export declare function ControlSlot({ slotProps }: Props): JSX.Element;
+export declare function ControlSlot({ slotProps }: Props): React.JSX.Element;
 export {};

dist/slots/FixtureActionSlot.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FlatFixtureTreeItem } from 'react-cosmos-core';
@@ -9,3 +10,3 @@ export type FixtureActionSlotProps = {
 };
-export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/NavRowSlot.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 export type NavRowSlotProps = {
@@ -8,3 +9,3 @@ onCloseNav: () => unknown;
 };
-export declare function NavRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function NavRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/RendererActionSlot.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -9,3 +10,3 @@ export type RendererActionSlotProps = {
 };
-export declare function RendererActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function RendererActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/SidePanelRowSlot.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
@@ -11,3 +12,3 @@ export type SidePanelRowSlotProps = {
 };
-export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/ValueInputSlot.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FixtureStatePrimitiveValue, FixtureStateUnserializableValue, PrimitiveData } from 'react-cosmos-core';
@@ -15,3 +15,3 @@ type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
 };
-export declare function ValueInputSlot({ children, slotProps }: Props): JSX.Element;
+export declare function ValueInputSlot({ children, slotProps }: Props): React.JSX.Element;
 export {};

dist/style/vars.d.ts

 export declare const fontFamily = "-apple-system, BlinkMacSystemFont, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif";
 export declare const quick = 0.32;
-export declare const rendererBg = "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\")";

dist/style/vars.js

 export const fontFamily = `-apple-system, BlinkMacSystemFont, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif`;
 export const quick = 0.32;
-export const rendererBg = `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")`;

dist/testHelpers/pluginMocks.d.ts

@@ -33,5 +33,5 @@ /// <reference types="jest" />
     isDevServerOn(): boolean;
-    getWebRendererUrl(): string | null;
 };
 export declare function getRendererCoreMethods(): {
+    getRendererUrl(): string | null;
     getConnectedRendererIds(): string[];
@@ -42,2 +42,3 @@ getPrimaryRendererId(): string | null;
     isRendererConnected(): boolean;
+    reloadRenderer(): void;
     setFixtureState(stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>): void;
@@ -53,3 +54,2 @@ selectPrimaryRenderer(primaryRendererId: string): void;
 export declare function getRendererPreviewMethods(): {
-    getUrlStatus(): import("../plugins/RendererPreview/spec.js").UrlStatus;
     getRuntimeStatus(): import("../plugins/RendererPreview/spec.js").RuntimeStatus;
@@ -76,3 +76,2 @@ };
     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);
 };
@@ -83,2 +82,3 @@ export declare function mockMessageHandler(methods?: MethodsOf<MessageHandlerSpec>): {
 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[]);
@@ -89,2 +89,3 @@ getPrimaryRendererId: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     isRendererConnected: 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);
@@ -95,4 +96,4 @@ selectPrimaryRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, primaryRendererId: string) => 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>;
 };
@@ -111,3 +112,5 @@ export declare function mockNotifications(methods?: MethodsOf<NotificationsSpec>): {
 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, []>;
 };
@@ -114,0 +117,0 @@ export declare function onMessageHandler(events?: EventsOf<MessageHandlerSpec>): {

dist/testHelpers/pluginMocks.js

@@ -57,3 +57,2 @@ import { getPluginContext, } from 'react-plugin';
         isDevServerOn: jest.fn(),
-        getWebRendererUrl: jest.fn(),
         ...methods,
@@ -74,2 +73,3 @@ };
     const allMethods = {
+        getRendererUrl: jest.fn(),
         getConnectedRendererIds: jest.fn(),
@@ -80,2 +80,3 @@ getPrimaryRendererId: jest.fn(),
         isRendererConnected: jest.fn(),
+        reloadRenderer: jest.fn(),
         setFixtureState: jest.fn(),
@@ -118,3 +119,5 @@ selectPrimaryRenderer: jest.fn(),
     const allEvents = {
-        fixtureChange: jest.fn(),
+        fixtureSelect: jest.fn(),
+        fixtureReselect: jest.fn(),
+        fixtureUnselect: jest.fn(),
         ...events,
@@ -121,0 +124,0 @@ };

package.json

 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-canary.da91267.0+da91267",
+  "version": "6.0.0-canary.db0339b.0+db0339b",
   "description": "React Cosmos UI",
@@ -18,3 +18,3 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "6.0.0-canary.da91267.0+da91267"
+    "react-cosmos-core": "6.0.0-canary.db0339b.0+db0339b"
   },
@@ -25,5 +25,5 @@ "devDependencies": {
     "react-plugin": "^3.0.0-alpha.4",
-    "styled-components": "^5.3.8"
+    "styled-components": "^5.3.10"
   },
-  "gitHead": "da912672c3937782c6c7b97b42cf40aafaa907c8"
+  "gitHead": "db0339bde6a8444149174b9c84fc885ddd0eb93b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

381

increased by1.06%

Number of medium supply chain risk alerts

3

decreased by-40%

Published versions last year

77

increased by4.05%

Worsened metrics

Total package byte prevSize

2892389

decreased by-1.22%

Lines of code

10355

decreased by-0.33%

Dependency changes

• [e-mail]0339b.0+db0339b