react-cosmos-ui 6.0.0-beta.1 → 6.0.0-beta.10

package/dist/playground.js

@@ -13,14 +13,14 @@ window.ReactDom = ReactDom;
 window.StyledComponents = styled;
 export default async function mount({ playgroundConfig, pluginConfigs, }) {
     const { loadPlugins, Slot } = ReactPlugin;
-    const config = { ...DEFAULT_PLUGIN_CONFIG, ...playgroundConfig };
-    loadPlugins({ config });
     // We can make plugin loading unblocking if react-plugin exports the
     // reloadPlugins method.
     await Promise.all(pluginConfigs.map(async (pluginConfig) => {
         if (pluginConfig.ui)
             await loadPluginScript(pluginConfig.ui);
     }));
+    const config = { ...DEFAULT_PLUGIN_CONFIG, ...playgroundConfig };
+    loadPlugins({ config });
     const root = ReactDom.createRoot(document.getElementById('root'));
     root.render(React.createElement(React.Fragment, null,
         React.createElement(GlobalStyle, null),

package/dist/pluginMocks.d.ts

@@ -0,0 +1 @@
+export * from './testHelpers/pluginMocks.js';

package/dist/pluginMocks.js

@@ -0,0 +1 @@
+export * from './testHelpers/pluginMocks.js';

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

@@ -1,11 +1,12 @@
-/// <reference types="react" />
-import { FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
+import React from 'react';
+import { ClassStateFixtureStateItem } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetClassStateFixtureState } from '../shared.js';
 type Props = {
-    fsClassState: FixtureStateClassState;
+    classStateFsItem: ClassStateFixtureStateItem;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetClassStateFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
-export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export declare function ComponentClassState({ classStateFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js

@@ -1,23 +1,23 @@
 import { isEqual } from 'lodash-es';
 import React, { useCallback } from 'react';
-import { updateFixtureStateClassState, } from 'react-cosmos-core';
+import { updateClassStateFixtureStateItem, } 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 { createClassStateFsUpdater } from './shared.js';
-export function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    const { componentName, elementId, values } = fsClassState;
+import { classStateFsItemUpdater } from './shared.js';
+export function ComponentClassState({ classStateFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
+    const { componentName, elementId, values } = classStateFsItem;
     const [initialValues] = React.useState(() => values);
-    const handleValuesReset = React.useCallback(() => onFixtureStateChange(createClassStateFsUpdater(elementId, prevFs => updateFixtureStateClassState({
-        fixtureState: prevFs,
+    const handleValuesReset = React.useCallback(() => onFixtureStateChange(classStateFsItemUpdater(elementId, prevFs => updateClassStateFixtureStateItem({
+        classStateFs: prevFs,
         elementId,
         values: initialValues,
     }))), [elementId, initialValues, onFixtureStateChange]);
     const handleValueChange = React.useCallback((newValues) => {
-        onFixtureStateChange(createClassStateFsUpdater(elementId, prevFs => updateFixtureStateClassState({
-            fixtureState: prevFs,
+        onFixtureStateChange(classStateFsItemUpdater(elementId, prevFs => updateClassStateFixtureStateItem({
+            classStateFs: prevFs,
             elementId,
             values: newValues,
         })));

package/dist/plugins/ClassStatePanel/ClassStatePanel/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { ClassStateFixtureState } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetClassStateFixtureState } from '../shared.js';
 type Props = {
-    fixtureState: FixtureState;
+    fixtureState: ClassStateFixtureState | undefined;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetClassStateFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
 export declare const ClassStatePanel: React.NamedExoticComponent<Props>;

package/dist/plugins/ClassStatePanel/ClassStatePanel/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { hasFsValues, sortFsValueGroups, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
 import { ComponentClassState } from './ComponentClassState.js';
 export const ClassStatePanel = React.memo(function ClassStatePanel({ fixtureState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    if (!fixtureState.classState) {
+    if (!fixtureState) {
         return null;
     }
-    const classStateWithValues = fixtureState.classState.filter(hasFsValues);
-    return (React.createElement(React.Fragment, null, sortFsValueGroups(classStateWithValues).map(fsClassState => {
-        const strElementId = stringifyElementId(fsClassState.elementId);
-        return (React.createElement(ComponentClassState, { key: strElementId, fsClassState: fsClassState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
+    const classStateWithValues = fixtureState.filter(hasFsValues);
+    return (React.createElement(React.Fragment, null, sortFsValueGroups(classStateWithValues).map(fsItem => {
+        const strElementId = stringifyElementId(fsItem.elementId);
+        return (React.createElement(ComponentClassState, { key: strElementId, classStateFsItem: fsItem, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
     })));
 });

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

@@ -1,2 +1,2 @@
-import { FixtureElementId, FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
-export declare function createClassStateFsUpdater(elementId: FixtureElementId, cb: (prevFs: FixtureState) => FixtureStateClassState[]): StateUpdater<FixtureState>;
+import { ClassStateFixtureState, FixtureElementId, FixtureStateUpdater } from 'react-cosmos-core';
+export declare function classStateFsItemUpdater(elementId: FixtureElementId, cb: FixtureStateUpdater<ClassStateFixtureState>): FixtureStateUpdater<ClassStateFixtureState>;

package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.js

@@ -1,16 +1,13 @@
-import { findFixtureStateClassState, } from 'react-cosmos-core';
+import { findClassStateFixtureStateItem, } from 'react-cosmos-core';
 import { stringifyElementId } from '../../../components/ValueInputTree/index.js';
-export function createClassStateFsUpdater(elementId, cb) {
+export function classStateFsItemUpdater(elementId, cb) {
     return prevFs => {
-        const fsClassState = findFixtureStateClassState(prevFs, elementId);
-        if (!fsClassState) {
+        const fsItem = findClassStateFixtureStateItem(prevFs, elementId);
+        if (!fsItem) {
             const elId = stringifyElementId(elementId);
             console.warn(`Trying to update missing element with ID: ${elId}`);
-            return prevFs;
+            return prevFs ?? [];
         }
-        return {
-            ...prevFs,
-            classState: cb(prevFs),
-        };
+        return cb(prevFs);
     };
 }

package/dist/plugins/ClassStatePanel/index.js

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { createPlugin } from 'react-plugin';
 import { getFixtureExpansion, updateElementExpansion, } from '../../components/ValueInputTree/index.js';
 import { ClassStatePanel } from './ClassStatePanel/index.js';
-import { CLASS_STATE_TREE_EXPANSION_STORAGE_KEY } from './shared.js';
+import { CLASS_STATE_TREE_EXPANSION_STORAGE_KEY, } from './shared.js';
 const { namedPlug, register } = createPlugin({
     name: 'classStatePanel',
 });
 namedPlug('sidePanelRow', 'classState', ({ pluginContext, slotProps }) => {
-    const { fixtureId, fixtureState, onFixtureStateChange } = slotProps;
+    const { fixtureId, getFixtureState, setFixtureState } = slotProps;
     const { fixtureExpansion, onElementExpansionChange } = useFixtureExpansion(pluginContext, fixtureId);
+    const fixtureState = getFixtureState('classState');
+    const onFixtureStateChange = useCallback(update => setFixtureState('classState', update), [setFixtureState]);
     return (React.createElement(ClassStatePanel, { fixtureState: fixtureState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
 });
 export { register };

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

@@ -1 +1,3 @@
+import { ClassStateFixtureState, FixtureStateUpdater } from 'react-cosmos-core';
+export type SetClassStateFixtureState = (updater: FixtureStateUpdater<ClassStateFixtureState>) => void;
 export declare const CLASS_STATE_TREE_EXPANSION_STORAGE_KEY = "classStateTreeExpansion";

package/dist/plugins/ControlPanel/ControlPanel.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import React from 'react';
+import { ControlsFixtureState } from 'react-cosmos-core';
+import { SetControlsFixtureState } from './shared.js';
 type Props = {
-    fixtureState: FixtureState;
+    fixtureState: ControlsFixtureState | undefined;
     controlActionOrder: string[];
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetControlsFixtureState;
 };
-export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): JSX.Element | null;
+export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): React.JSX.Element | null;
 export {};

package/dist/plugins/ControlPanel/ControlPanel.js

@@ -7,7 +7,7 @@ import { ControlActionSlot } from '../../slots/ControlActionSlot.js';
 import { ControlSlot } from '../../slots/ControlSlot.js';
 export function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }) {
     const handleControlsReset = React.useCallback(() => onFixtureStateChange(resetControls), [onFixtureStateChange]);
-    const controls = fixtureState.controls || {};
+    const controls = fixtureState ?? {};
     if (Object.keys(controls).length === 0)
         return null;
     return (React.createElement(SidePanelContainer, null,
@@ -26,11 +26,11 @@ function areControlsUnchanged(controls) {
     return Object.keys(controls).every(controlName => isEqual(controls[controlName].currentValue, controls[controlName].defaultValue));
 }
 function resetControls(fixtureState) {
-    const controls = fixtureState.controls ? { ...fixtureState.controls } : {};
+    const controls = fixtureState ? { ...fixtureState } : {};
     Object.keys(controls).forEach(controlName => {
         controls[controlName] = resetControl(controls[controlName]);
     });
-    return { ...fixtureState, controls };
+    return controls;
 }
 function resetControl(control) {
     return { ...control, currentValue: control.defaultValue };

package/dist/plugins/ControlPanel/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { createPlugin } from 'react-plugin';
 import { ControlPanel } from './ControlPanel.js';
 const { namedPlug, register } = createPlugin({
@@ -9,7 +9,9 @@ const { namedPlug, register } = createPlugin({
 });
 namedPlug('sidePanelRow', 'values', ({ pluginContext, slotProps }) => {
     const { controlActionOrder } = pluginContext.getConfig();
-    const { fixtureState, onFixtureStateChange } = slotProps;
+    const { getFixtureState, setFixtureState } = slotProps;
+    const fixtureState = getFixtureState('controls');
+    const onFixtureStateChange = useCallback(update => setFixtureState('controls', update), [setFixtureState]);
     return (React.createElement(ControlPanel, { fixtureState: fixtureState, controlActionOrder: controlActionOrder, onFixtureStateChange: onFixtureStateChange }));
 });
 export { register };

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

@@ -0,0 +1,2 @@
+import { ControlsFixtureState, FixtureStateUpdater } from 'react-cosmos-core';
+export type SetControlsFixtureState = (updater: FixtureStateUpdater<ControlsFixtureState>) => void;

package/dist/plugins/ControlPanel/shared.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/ControlSelect/SelectValueInput.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { FixtureStateSelectControl } from 'react-cosmos-core';
+import React from 'react';
+import { SelectControlFixtureState } from 'react-cosmos-core';
 type Props = {
     name: string;
-    control: FixtureStateSelectControl;
-    onChange: (name: string, select: FixtureStateSelectControl) => unknown;
+    control: SelectControlFixtureState;
+    onChange: (name: string, select: SelectControlFixtureState) => unknown;
 };
-export declare function SelectValueInput({ name, control, onChange }: Props): JSX.Element;
+export declare function SelectValueInput({ name, control, onChange }: Props): React.JSX.Element;
 export {};

package/dist/plugins/ControlSelect/index.js

@@ -7,12 +7,9 @@ const { plug, register } = createPlugin({
 plug('control-select', ({ slotProps }) => {
     const { controlName, control, onFixtureStateChange } = slotProps;
     const handleChange = useCallback((selectName, updatedControl) => {
-        onFixtureStateChange(fixtureState => ({
-            ...fixtureState,
-            controls: {
-                ...fixtureState.controls,
-                [selectName]: updatedControl,
-            },
+        onFixtureStateChange(prevFs => ({
+            ...prevFs,
+            [selectName]: updatedControl,
         }));
     }, [onFixtureStateChange]);
     return (React.createElement(SelectValueInput, { key: controlName, name: controlName, control: control, onChange: handleChange }));

package/dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     selected: boolean;
     onClick: () => unknown;
 };
-export declare function BookmarkFixtureButton({ selected, onClick }: Props): JSX.Element;
+export declare function BookmarkFixtureButton({ selected, onClick }: Props): React.JSX.Element;
 export {};

package/dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FlatFixtureTree, FlatFixtureTreeItem } from 'react-cosmos-core';
 type Props = {
     bookmarks: FlatFixtureTree;
@@ -6,5 +6,5 @@ type Props = {
     onFixtureSelect: (fixtureId: FixtureId) => void;
     onBookmarkDelete: (fixtureItem: FlatFixtureTreeItem) => void;
 };
-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 {};

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     fixtureSelected: boolean;
     onOpen: () => unknown;
     onCloseNav: () => unknown;
 };
-export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FixtureList } from 'react-cosmos-core';
 type Props = {
     searchText: string;
@@ -10,5 +10,5 @@ type Props = {
     onClose: () => unknown;
     onSelect: (fixtureId: FixtureId, revealFixture: boolean) => unknown;
 };
-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 {};

package/dist/plugins/FixtureSearch/FixtureSearchOverlay.js

@@ -230,8 +230,10 @@ const Content = styled.div `
   max-width: 640px;
   border-radius: 3px;
   background: ${grey248};
-  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
-    rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
+  box-shadow:
+    rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.1) 0px 5px 10px,
+    rgba(15, 15, 15, 0.2) 0px 15px 40px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -277,7 +279,9 @@ const HelpButton = styled.div `
   background: ${props => (props.selected ? grey224 : 'transparent')};
   color: ${props => (props.selected ? grey128 : grey176)};
   cursor: pointer;
-  transition: background ${quick}s, color ${quick}s;
+  transition:
+    background ${quick}s,
+    color ${quick}s;
 
   :hover {
     color: ${grey128};
@@ -287,7 +291,9 @@ const ShortcutsContainer = styled.div `
   height: ${props => (props.visible ? 72 : 0)}px;
   overflow: hidden;
   opacity: ${props => (props.visible ? 1 : 0)};
-  transition: height ${quick}s, opacity ${quick}s;
+  transition:
+    height ${quick}s,
+    opacity ${quick}s;
   user-select: none;
 `;
 const ResultsViewport = styled.div `

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
 type Props = {
     active: boolean;
@@ -6,5 +6,5 @@ type Props = {
     fixtureItem: FlatFixtureTreeItem;
     onSelect: (fixtureId: FixtureId, revealFixture: boolean) => unknown;
 };
-export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): JSX.Element;
+export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): React.JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function FixtureSearchShortcuts(): JSX.Element;
+import React from 'react';
+export declare function FixtureSearchShortcuts(): React.JSX.Element;

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     fixturesDir: string;
     fixtureFileSuffix: 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 {};

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
@@ -8,5 +8,5 @@ type Props = {
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-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 {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     name: string;
     expanded: boolean;
@@ -6,5 +6,5 @@ type Props = {
     selected: boolean;
     onToggle: () => unknown;
 };
-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 {};

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

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

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
@@ -10,5 +10,5 @@ type Props = {
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-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 {};

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
@@ -8,5 +8,5 @@ type Props = {
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-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 {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FixtureList } from 'react-cosmos-core';
 import { TreeExpansion } from '../../shared/treeExpansion.js';
 type Props = {
@@ -10,5 +10,5 @@ type Props = {
     selectFixture: (fixtureId: FixtureId) => void;
     setExpansion: (expansion: TreeExpansion) => unknown;
 };
-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 {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureList } from 'react-cosmos-core';
 import { TreeExpansion } from '../../shared/treeExpansion.js';
 type Props = {
@@ -8,5 +8,5 @@ type Props = {
     expansion: TreeExpansion;
     setExpansion: (treeExpansion: TreeExpansion) => unknown;
 };
-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 {};

package/dist/plugins/FullScreenButton/FullScreenButton.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+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 {};

package/dist/plugins/MessageHandler/socket.js

@@ -6,7 +6,7 @@ export function initSocket(context) {
     if (!core.isDevServerOn()) {
         return;
     }
-    socket = new WebSocket(location.origin.replace(/^https?:/, 'ws:'));
+    socket = new WebSocket(location.origin.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:'));
     socket.addEventListener('open', () => {
         if (socket && pendingMessages.length > 0) {
             for (const msg of pendingMessages)

package/dist/plugins/Notifications/Notifications.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { NotificationItem } from './spec.js';
 type Props = {
     notifications: NotificationItem[];
 };
-export declare function Notifications({ notifications }: Props): JSX.Element;
+export declare function Notifications({ notifications }: Props): React.JSX.Element;
 export {};

package/dist/plugins/PluginList/PluginList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export type SimplePlugin = {
     name: string;
     enabled: boolean;
@@ -7,5 +7,5 @@ type Props = {
     plugins: SimplePlugin[];
     enable: (pluginName: string, enabled: boolean) => void;
 };
-export declare function PluginList({ plugins, enable }: Props): JSX.Element;
+export declare function PluginList({ plugins, enable }: Props): React.JSX.Element;
 export {};

package/dist/plugins/PropsPanel/BlankState.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-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>;

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

@@ -1,11 +1,12 @@
-/// <reference types="react" />
-import { FixtureState, FixtureStateProps, StateUpdater } from 'react-cosmos-core';
+import React from 'react';
+import { PropsFixtureStateItem } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetPropsFixtureState } from '../shared.js';
 type Props = {
-    fsProps: FixtureStateProps;
+    propsFsItem: PropsFixtureStateItem;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetPropsFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
-export declare function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export declare function ComponentProps({ propsFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.js

@@ -1,26 +1,28 @@
 import { isEqual } from 'lodash-es';
 import React, { useCallback } from 'react';
-import { resetFixtureStateProps, updateFixtureStateProps, } from 'react-cosmos-core';
-import { IconButton32 } from '../../../components/buttons/index.js';
-import { CopyIcon, RotateCcwIcon } from '../../../components/icons/index.js';
+import { resetPropsFixtureStateItem, updatePropsFixtureStateItem, } from 'react-cosmos-core';
 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 { createPropsFsUpdater } from './shared.js';
-export function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    const { componentName, elementId, values } = fsProps;
+import { ValueInputTree, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
+import { IconButton32 } from '../../../components/buttons/index.js';
+import { CopyIcon, RotateCcwIcon } from '../../../components/icons/index.js';
+import { propsFsItemUpdater } from './shared.js';
+export function ComponentProps({ propsFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
+    const { componentName, elementId, values } = propsFsItem;
     const [reset, setReset] = React.useState(true);
     const handleResetToggle = React.useCallback(() => setReset(!reset), [reset]);
     const [initialValues] = React.useState(() => values);
-    const handleValuesReset = React.useCallback(() => onFixtureStateChange(createPropsFsUpdater(elementId, prevFs => resetFixtureStateProps({
-        fixtureState: prevFs,
+    const handleValuesReset = React.useCallback(() => onFixtureStateChange(propsFsItemUpdater(elementId, prevFs => resetPropsFixtureStateItem({
+        propsFs: prevFs,
         elementId,
         values: initialValues,
     }))), [elementId, initialValues, onFixtureStateChange]);
     const handleValueChange = React.useCallback((newValues) => {
-        const changeFn = reset ? resetFixtureStateProps : updateFixtureStateProps;
-        onFixtureStateChange(createPropsFsUpdater(elementId, prevFs => changeFn({
-            fixtureState: prevFs,
+        const changeFn = reset
+            ? resetPropsFixtureStateItem
+            : updatePropsFixtureStateItem;
+        onFixtureStateChange(propsFsItemUpdater(elementId, prevFs => changeFn({
+            propsFs: prevFs,
             elementId,
             values: newValues,
         })));

package/dist/plugins/PropsPanel/PropsPanel/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { PropsFixtureState } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetPropsFixtureState } from '../shared.js';
 type Props = {
-    fixtureState: FixtureState;
+    fixtureState: PropsFixtureState | undefined;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetPropsFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
 export declare const PropsPanel: React.NamedExoticComponent<Props>;