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

package/dist/plugins/PropsPanel/PropsPanel/index.js

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

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

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

package/dist/plugins/PropsPanel/PropsPanel/shared.js

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

package/dist/plugins/PropsPanel/index.js

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { createPlugin } from 'react-plugin';
 import { getFixtureExpansion, hasFsValues, updateElementExpansion, } from '../../components/ValueInputTree/index.js';
 import { BlankState } from './BlankState.js';
 import { PropsPanel } from './PropsPanel/index.js';
-import { PROPS_TREE_EXPANSION_STORAGE_KEY } from './shared.js';
+import { PROPS_TREE_EXPANSION_STORAGE_KEY, } from './shared.js';
 const { namedPlug, register } = createPlugin({
     name: 'propsPanel',
 });
 namedPlug('sidePanelRow', 'props', ({ pluginContext, slotProps }) => {
-    const { fixtureId, fixtureState, onFixtureStateChange } = slotProps;
+    const { fixtureId, getFixtureState, setFixtureState } = slotProps;
     const { fixtureExpansion, onElementExpansionChange } = useFixtureExpansion(pluginContext, fixtureId);
+    const fixtureState = getFixtureState('props');
+    const onFixtureStateChange = useCallback(change => setFixtureState('props', change), [setFixtureState]);
     return (React.createElement(PropsPanel, { fixtureState: fixtureState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
 });
 // WARNING: This plug has to be aware of all control types and only show up
@@ -17,8 +19,8 @@ namedPlug('sidePanelRow', 'props', ({ pluginContext, slotProps }) => {
 // TODO: Replace this with a more generic blank state (controls in general not
 // just props)
 namedPlug('sidePanelRow', 'blankState', ({ slotProps }) => {
-    const { fixtureState } = slotProps;
-    return shouldShowBlankState(fixtureState) ? React.createElement(BlankState, null) : null;
+    const { getFixtureState } = slotProps;
+    return shouldShowBlankState(getFixtureState) ? React.createElement(BlankState, null) : null;
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')
@@ -38,14 +40,17 @@ function useFixtureExpansion(context, fixtureId) {
         onElementExpansionChange,
     };
 }
-function shouldShowBlankState(fixtureState) {
-    const hasProps = fixtureState.props && fixtureState.props.some(hasFsValues);
+function shouldShowBlankState(getFixtureState) {
+    const props = getFixtureState('props');
+    const hasProps = props && props.some(hasFsValues);
     if (hasProps)
         return false;
-    const hasClassState = fixtureState.classState && fixtureState.classState.some(hasFsValues);
+    const classState = getFixtureState('classState');
+    const hasClassState = classState && classState.some(hasFsValues);
     if (hasClassState)
         return false;
-    const hasControls = fixtureState.controls && Object.keys(fixtureState.controls).length > 0;
+    const controls = getFixtureState('controls');
+    const hasControls = controls && Object.keys(controls).length > 0;
     if (hasControls)
         return false;
     return true;

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

@@ -1 +1,3 @@
+import { FixtureStateUpdater, PropsFixtureState } from 'react-cosmos-core';
+export type SetPropsFixtureState = (updater: FixtureStateUpdater<PropsFixtureState>) => void;
 export declare const PROPS_TREE_EXPANSION_STORAGE_KEY = "propsTreeExpansion";

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

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

package/dist/plugins/RendererCore/index.js

@@ -1,3 +1,4 @@
+import { fixtureStateByName } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
 import { onRouterFixtureReselect } from './onRouterFixtureReselect.js';
 import { onRouterFixtureSelect } from './onRouterFixtureSelect.js';
@@ -5,6 +6,7 @@ import { onRouterFixtureUnselect } from './onRouterFixtureUnselect.js';
 import { receiveResponse } from './receiveResponse/index.js';
 import { reloadRenderer } from './reloadRenderer.js';
 import { setFixtureState } from './setFixtureState.js';
+import { setGlobalFixtureState } from './setGlobalFixtureState.js';
 const { on, register, onLoad } = createPlugin({
     name: 'rendererCore',
     defaultConfig: {
@@ -16,18 +18,21 @@ const { on, register, onLoad } = createPlugin({
         primaryRendererId: null,
         fixtures: {},
         fixtureState: {},
+        globalFixtureState: {},
     },
     methods: {
         getRendererUrl,
         getConnectedRendererIds,
         getPrimaryRendererId,
         getFixtures,
-        getFixtureState,
         isRendererConnected,
         reloadRenderer,
-        setFixtureState,
         selectPrimaryRenderer,
         receiveResponse,
+        getAllFixtureState,
+        getFixtureState,
+        setFixtureState,
+        setGlobalFixtureState,
     },
 });
 onLoad(({ getConfig, setState }) => {
@@ -54,9 +59,12 @@ function getPrimaryRendererId({ getState }) {
 function getFixtures({ getState }) {
     return getState().fixtures;
 }
-function getFixtureState({ getState }) {
+function getAllFixtureState({ getState }) {
     return getState().fixtureState;
 }
+function getFixtureState({ getState }, name) {
+    return fixtureStateByName(getState().fixtureState, name);
+}
 function isRendererConnected({ getState }) {
     return getState().connectedRendererIds.length > 0;
 }

package/dist/plugins/RendererCore/onRouterFixtureReselect.js

@@ -1,7 +1,7 @@
 import { postSelectFixtureRequest } from './shared/postRequest.js';
 export function onRouterFixtureReselect(context, fixtureId) {
-    const { connectedRendererIds } = context.getState();
+    const { connectedRendererIds, globalFixtureState } = context.getState();
     connectedRendererIds.forEach(rendererId => {
-        postSelectFixtureRequest(context, rendererId, fixtureId, {});
+        postSelectFixtureRequest(context, rendererId, fixtureId, globalFixtureState);
     });
 }

package/dist/plugins/RendererCore/onRouterFixtureSelect.js

@@ -1,9 +1,9 @@
 import { postSelectFixtureRequest } from './shared/postRequest.js';
 export function onRouterFixtureSelect(context, fixtureId) {
     context.setState(prevState => ({ ...prevState, fixtureState: {} }), () => {
-        const { connectedRendererIds } = context.getState();
+        const { connectedRendererIds, globalFixtureState } = context.getState();
         connectedRendererIds.forEach(rendererId => {
-            postSelectFixtureRequest(context, rendererId, fixtureId, {});
+            postSelectFixtureRequest(context, rendererId, fixtureId, globalFixtureState);
         });
     });
 }

package/dist/plugins/RendererCore/receiveResponse/rendererReady.js

@@ -1,8 +1,8 @@
 import { isEqual } from 'lodash-es';
-import { postSelectFixtureRequest } from '../shared/postRequest.js';
+import { postSelectFixtureRequest, postSetFixtureStateRequest, } from '../shared/postRequest.js';
 export function receiveRendererReadyResponse(context, { payload }) {
     const { rendererId } = payload;
-    const { connectedRendererIds: prevRendererIds } = context.getState();
+    const { connectedRendererIds: prevRendererIds, globalFixtureState } = context.getState();
     context.setState(stateUpdater, afterStateChanged);
     function stateUpdater(prevState) {
         // The first announced renderer becomes the primary one
@@ -12,7 +12,7 @@ export function receiveRendererReadyResponse(context, { payload }) {
             ...prevState,
             connectedRendererIds: addToSet(connectedRendererIds, rendererId),
             primaryRendererId,
-            fixtureState: rendererId === primaryRendererId ? {} : fixtureState,
+            fixtureState: rendererId === primaryRendererId ? globalFixtureState : fixtureState,
         };
     }
     function afterStateChanged() {
@@ -23,6 +23,11 @@ export function receiveRendererReadyResponse(context, { payload }) {
             const { fixtureState } = context.getState();
             postSelectFixtureRequest(context, rendererId, routerFixtureId, fixtureState);
         }
+        else if (rendererFixtureId) {
+            if (Object.keys(globalFixtureState).length > 0) {
+                postSetFixtureStateRequest(context, rendererId, rendererFixtureId, globalFixtureState);
+            }
+        }
         // Notify about connected renderers that weren't connected before
         if (!prevRendererIds.includes(rendererId)) {
             notifyRendererConnection(context, rendererId);

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

@@ -1,3 +1,3 @@
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { FixtureStateChange } from 'react-cosmos-core';
 import { RendererCoreContext } from './shared/index.js';
-export declare function setFixtureState(context: RendererCoreContext, stateUpdater: StateUpdater<FixtureState>): void;
+export declare function setFixtureState(context: RendererCoreContext, name: string, change: FixtureStateChange<unknown>): void;

package/dist/plugins/RendererCore/setFixtureState.js

@@ -1,18 +1,19 @@
+import { updateFixtureState, } from 'react-cosmos-core';
 import { postSetFixtureStateRequest } from './shared/postRequest.js';
 import { getSelectedFixtureId } from './shared/router.js';
-export function setFixtureState(context, stateUpdater) {
+export function setFixtureState(context, name, change) {
     const fixtureId = getSelectedFixtureId(context);
     if (!fixtureId) {
         console.warn('[Renderer] Trying to set fixture state with no fixture selected');
         return;
     }
-    context.setState(change, () => {
+    context.setState(stateUpdater, () => {
         postRendererRequest(fixtureId);
     });
-    function change(prevState) {
+    function stateUpdater(prevState) {
         return {
             ...prevState,
-            fixtureState: stateUpdater(prevState.fixtureState),
+            fixtureState: updateFixtureState(prevState.fixtureState, name, change),
         };
     }
     function postRendererRequest(selectedFixtureId) {

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

@@ -0,0 +1,2 @@
+import { RendererCoreContext } from './shared/index.js';
+export declare function setGlobalFixtureState(context: RendererCoreContext, name: string, state: unknown): void;

package/dist/plugins/RendererCore/setGlobalFixtureState.js

@@ -0,0 +1,15 @@
+import { setFixtureState } from './setFixtureState.js';
+import { getSelectedFixtureId } from './shared/router.js';
+export function setGlobalFixtureState(context, name, state) {
+    context.setState(prevState => ({
+        ...prevState,
+        globalFixtureState: {
+            ...prevState.globalFixtureState,
+            [name]: state,
+        },
+    }));
+    const fixtureId = getSelectedFixtureId(context);
+    if (fixtureId) {
+        setFixtureState(context, name, state);
+    }
+}

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

@@ -1,5 +1,5 @@
 import { FixtureId, FixtureState, RendererId } from 'react-cosmos-core';
-import { RendererCoreContext } from '../shared/index.js';
+import { RendererCoreContext } from './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;

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

@@ -1,4 +1,6 @@
-import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
+import { FixtureList, FixtureState, FixtureStateChange, MessageType, RendererId } from 'react-cosmos-core';
+export type GetFixtureState = <T>(name: string) => T | undefined;
+export type SetFixtureStateByName = <T>(name: string, change: FixtureStateChange<T>) => void;
 export type RendererCoreSpec = {
     name: 'rendererCore';
     config: {
@@ -10,18 +12,21 @@ export type RendererCoreSpec = {
         primaryRendererId: null | RendererId;
         fixtures: FixtureList;
         fixtureState: FixtureState;
+        globalFixtureState: FixtureState;
     };
     methods: {
         getRendererUrl(): null | string;
         getConnectedRendererIds(): RendererId[];
         getPrimaryRendererId(): null | RendererId;
         getFixtures(): FixtureList;
-        getFixtureState(): FixtureState;
         isRendererConnected(): boolean;
         reloadRenderer(): void;
-        setFixtureState(stateUpdater: StateUpdater<FixtureState>): void;
         selectPrimaryRenderer(primaryRendererId: RendererId): void;
         receiveResponse(msg: MessageType): void;
+        getAllFixtureState(): FixtureState;
+        getFixtureState: GetFixtureState;
+        setFixtureState: SetFixtureStateByName;
+        setGlobalFixtureState<T>(name: string, state: T): void;
     };
     events: {
         request(msg: MessageType): void;

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

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

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

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

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { RuntimeStatus } from '../spec.js';
 type Props = {
     runtimeStatus: RuntimeStatus;
 };
-export declare function RendererOverlay({ runtimeStatus }: Props): JSX.Element | null;
+export declare function RendererOverlay({ runtimeStatus }: Props): React.JSX.Element | null;
 export {};

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

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

package/dist/plugins/RendererPreview/RendererPreview.js

@@ -12,7 +12,7 @@ export const RendererPreview = React.memo(function RendererPreview({ rendererUrl
     }
     return (React.createElement(Slot, { name: "rendererPreviewOuter" },
         React.createElement(Container, null,
-            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: createRendererUrl(rendererUrl), frameBorder: 0, allow: "clipboard-write *" }),
+            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: createRendererUrl(rendererUrl), frameBorder: 0, allow: "clipboard-write *; fullscreen *;" }),
             React.createElement(RendererOverlay, { runtimeStatus: runtimeStatus }))));
 });
 const Container = styled.div `

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { ResponsiveDevice, ResponsiveViewport } from '../spec.js';
+import { Viewport } from 'react-cosmos-core';
+import { ResponsiveDevice } from '../spec.js';
 type Props = {
     devices: ResponsiveDevice[];
-    selectedViewport: ResponsiveViewport;
+    selectedViewport: Viewport;
     scaleFactor: number;
     scaled: boolean;
-    selectViewport: (viewport: ResponsiveViewport) => unknown;
+    selectViewport: (viewport: Viewport) => unknown;
     toggleScale: () => unknown;
 };
 export declare const ResponsiveHeader: React.NamedExoticComponent<Props>;

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

@@ -1,13 +1,14 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { ResponsiveDevice, ResponsiveViewport } from '../spec.js';
+import React, { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Viewport } from 'react-cosmos-core';
+import { ResponsiveDevice } from '../spec.js';
 type Props = {
     children?: ReactNode;
     devices: ResponsiveDevice[];
     enabled: boolean;
-    viewport: ResponsiveViewport;
+    viewport: Viewport;
     scaled: boolean;
-    setViewport: Dispatch<SetStateAction<ResponsiveViewport>>;
+    setViewport: Dispatch<SetStateAction<Viewport>>;
     setScaled: (scaled: boolean) => unknown;
 };
-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 {};

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

@@ -1,4 +1,4 @@
-import { ResponsiveViewport } from '../spec.js';
+import { Viewport } from 'react-cosmos-core';
 export declare const responsivePreviewPadding: {
     top: number;
     bottom: number;
@@ -11,8 +11,8 @@ export declare const stretchStyle: {
     flex: number;
 };
 export declare function getStyles({ container, viewport, scaled, }: {
-    container: ResponsiveViewport;
-    viewport: ResponsiveViewport;
+    container: Viewport;
+    viewport: Viewport;
     scaled: boolean;
 }): {
     maskContainerStyle: {
@@ -42,4 +42,4 @@ export declare function getStyles({ container, viewport, scaled, }: {
         transform: string;
     };
 };
-export declare function getViewportScaleFactor(viewport: ResponsiveViewport, container: ResponsiveViewport): number;
+export declare function getViewportScaleFactor(viewport: Viewport, container: Viewport): number;

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

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

package/dist/plugins/ResponsivePreview/index.js

@@ -27,11 +27,11 @@ namedPlug('rendererAction', 'responsivePreview', ({ pluginContext }) => {
     return (React.createElement(ToggleButton, { selected: enabled, onToggle: () => {
             if (enabled) {
                 setViewportState(pluginContext, { ...viewportState, enabled: false });
-                setFixtureStateViewport(pluginContext, null);
+                setViewportFixtureState(pluginContext, null);
             }
             else {
                 setViewportState(pluginContext, { ...viewportState, enabled: true });
-                setFixtureStateViewport(pluginContext, viewport);
+                setViewportFixtureState(pluginContext, viewport);
             }
         } }));
 });
@@ -40,12 +40,10 @@ if (process.env.NODE_ENV !== 'test')
     register();
 function useViewportChange(context) {
     const viewportState = getViewportState(context);
-    return React.useCallback((viewportChange) => {
-        const viewport = typeof viewportChange === 'function'
-            ? viewportChange(viewportState.viewport)
-            : viewportChange;
+    return React.useCallback((change) => {
+        const viewport = typeof change === 'function' ? change(viewportState.viewport) : change;
         setViewportState(context, { ...viewportState, enabled: true, viewport });
-        setFixtureStateViewport(context, viewport);
+        setViewportFixtureState(context, viewport);
     }, [context, viewportState]);
 }
 function useScaledChange(context) {
@@ -58,9 +56,9 @@ function getViewportState(context) {
     const viewportState = storage.getItem(VIEWPORT_STORAGE_KEY) ||
         DEFAULT_VIEWPORT_STATE;
     const rendererCore = getMethodsOf('rendererCore');
-    const fixtureState = rendererCore.getFixtureState();
-    return fixtureState.viewport
-        ? { ...viewportState, enabled: true, viewport: fixtureState.viewport }
+    const viewport = rendererCore.getFixtureState('viewport');
+    return viewport
+        ? { ...viewportState, enabled: true, viewport }
         : viewportState;
 }
 function setViewportState(context, viewportState) {
@@ -68,11 +66,8 @@ function setViewportState(context, viewportState) {
     const storage = getMethodsOf('storage');
     storage.setItem(VIEWPORT_STORAGE_KEY, viewportState);
 }
-function setFixtureStateViewport(context, viewport) {
+function setViewportFixtureState(context, viewport) {
     const { getMethodsOf } = context;
     const rendererCore = getMethodsOf('rendererCore');
-    rendererCore.setFixtureState(fixtureState => ({
-        ...fixtureState,
-        viewport,
-    }));
+    rendererCore.setFixtureState('viewport', viewport);
 }

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

@@ -1,16 +1,13 @@
-import { FixtureState } from 'react-cosmos-core';
+import { Viewport } from 'react-cosmos-core';
 import { PluginContext } from 'react-plugin';
 import { StorageSpec } from '../Storage/spec.js';
-import { ResponsivePreviewSpec, ResponsiveViewport } from './spec.js';
+import { ResponsivePreviewSpec } from './spec.js';
 export type ResponsivePreviewContext = PluginContext<ResponsivePreviewSpec>;
 export type StorageMethods = StorageSpec['methods'];
-export type FixtureStateWithViewport = FixtureState & {
-    viewport?: ResponsiveViewport;
-};
 export type ViewportState = {
     enabled: boolean;
     scaled: boolean;
-    viewport: ResponsiveViewport;
+    viewport: Viewport;
 };
 export declare const DEFAULT_DEVICES: {
     label: string;

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

@@ -1,8 +1,5 @@
-export type ResponsiveViewport = {
-    width: number;
-    height: number;
-};
-export type ResponsiveDevice = ResponsiveViewport & {
+import { Viewport } from 'react-cosmos-core';
+export type ResponsiveDevice = Viewport & {
     label: string;
 };
 export type ResponsivePreviewSpec = {

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     rendererConnected: boolean;
     globalActionOrder: string[];
 };
-export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): JSX.Element;
+export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): React.JSX.Element;
 export {};

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

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

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     keys: string[];
     label: string;
 };
-export declare function KeyShortcut({ keys, label }: Props): JSX.Element;
+export declare function KeyShortcut({ keys, label }: Props): React.JSX.Element;
 export {};

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

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

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

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

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

@@ -1,10 +1,12 @@
-/// <reference types="react" />
-import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
+import React from 'react';
+import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
+import { GetFixtureState, SetFixtureStateByName } from '../RendererCore/spec.js';
 type Props = {
     fixtureItems: FlatFixtureTreeItem[];
     selectedFixtureId: FixtureId | null;
     rendererConnected: boolean;
-    fixtureState: FixtureState;
+    getFixtureState: GetFixtureState;
+    setFixtureState: SetFixtureStateByName;
     navOpen: boolean;
     panelOpen: boolean;
     navWidth: number;
@@ -19,12 +21,11 @@ type Props = {
     onTogglePanel: () => unknown;
     onReloadRenderer: () => unknown;
     onCloseFixture: () => unknown;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
     setNavWidth: (width: number) => unknown;
     setPanelWidth: (width: number) => unknown;
     welcomeDismissed: boolean;
     onDismissWelcome: () => unknown;
     onShowWelcome: () => unknown;
 };
-export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
+export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, getFixtureState, setFixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): React.JSX.Element;
 export {};