react-cosmos-ui 6.0.0-alpha.0

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

@@ -0,0 +1,45 @@
+import { ResponsiveViewport } from '../spec.js';
+export declare const responsivePreviewPadding: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export declare const responsivePreviewBorderWidth = 1;
+export declare const stretchStyle: {
+    display: string;
+    flex: number;
+};
+export declare function getStyles({ container, viewport, scaled, }: {
+    container: ResponsiveViewport;
+    viewport: ResponsiveViewport;
+    scaled: boolean;
+}): {
+    maskContainerStyle: {
+        flex: number;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        overflow: string;
+    };
+    padContainerStyle: {
+        readonly position: "relative";
+        readonly paddingTop: number;
+        readonly paddingBottom: number;
+        readonly paddingLeft: number;
+        readonly paddingRight: number;
+    };
+    alignContainerStyle: {
+        width: number;
+        height: number;
+        border: string;
+        overflow: string;
+    };
+    scaleContainerStyle: {
+        width: number;
+        height: number;
+        transformOrigin: string;
+        transform: string;
+    };
+};
+export declare function getViewportScaleFactor(viewport: ResponsiveViewport, container: ResponsiveViewport): number;

package/dist/plugins/ResponsivePreview/ResponsivePreview/style.js

@@ -0,0 +1,79 @@
+import { white20 } from '../../../style/colors.js';
+export const responsivePreviewPadding = {
+    top: 8,
+    bottom: 24,
+    left: 24,
+    right: 24,
+};
+export const responsivePreviewBorderWidth = 1;
+export const stretchStyle = { display: 'flex', flex: 1 };
+export function getStyles({ container, viewport, scaled, }) {
+    const width = Math.max(16, viewport.width);
+    const height = Math.max(16, viewport.height);
+    const availableViewport = getAvailableViewport(container);
+    const widthScale = Math.min(1, availableViewport.width / width);
+    const heightScale = Math.min(1, availableViewport.height / height);
+    const scaleFactor = scaled ? Math.min(widthScale, heightScale) : 1;
+    const scaledWidth = width * scaleFactor;
+    const scaledHeight = height * scaleFactor;
+    return {
+        maskContainerStyle: getMaskContainerStyle(scaled, widthScale, heightScale),
+        padContainerStyle: getPadContainerStyle(),
+        alignContainerStyle: getAlignContainerStyle(scaledWidth, scaledHeight),
+        scaleContainerStyle: getScaleContainerStyle(width, height, scaleFactor),
+    };
+}
+export function getViewportScaleFactor(viewport, container) {
+    const containerViewport = getAvailableViewport(container);
+    return Math.min(Math.min(1, containerViewport.width / viewport.width), Math.min(1, containerViewport.height / viewport.height));
+}
+function getAvailableViewport(container) {
+    return {
+        width: container.width - getHorPadding(),
+        height: container.height - getVerPadding(),
+    };
+}
+function getMaskContainerStyle(scale, widthScale, heightScale) {
+    return {
+        flex: 1,
+        display: 'flex',
+        justifyContent: scale || widthScale === 1 ? 'space-around' : 'flex-start',
+        alignItems: scale || heightScale === 1 ? 'center' : 'flex-start',
+        overflow: scale ? 'hidden' : 'scroll',
+    };
+}
+function getPadContainerStyle() {
+    return {
+        position: 'relative',
+        paddingTop: responsivePreviewPadding.top,
+        paddingBottom: responsivePreviewPadding.bottom,
+        paddingLeft: responsivePreviewPadding.left,
+        paddingRight: responsivePreviewPadding.right,
+    };
+}
+function getAlignContainerStyle(scaledWidth, scaledHeight) {
+    return {
+        width: scaledWidth,
+        height: scaledHeight,
+        border: `${responsivePreviewBorderWidth}px solid ${white20}`,
+        overflow: 'hidden',
+    };
+}
+function getScaleContainerStyle(width, height, scaleFactor) {
+    return {
+        width,
+        height,
+        transformOrigin: '0% 0%',
+        transform: `scale(${scaleFactor})`,
+    };
+}
+function getHorPadding() {
+    return (responsivePreviewPadding.left +
+        responsivePreviewPadding.right +
+        2 * responsivePreviewBorderWidth);
+}
+function getVerPadding() {
+    return (responsivePreviewPadding.top +
+        responsivePreviewPadding.bottom +
+        2 * responsivePreviewBorderWidth);
+}

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

@@ -0,0 +1,6 @@
+type Props = {
+    selected: boolean;
+    onToggle: () => unknown;
+};
+export declare function ToggleButton({ selected, onToggle }: Props): JSX.Element;
+export {};

package/dist/plugins/ResponsivePreview/ToggleButton/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconButton32 } from '../../../components/buttons/index.js';
+import { SmartphoneIcon } from '../../../components/icons/index.js';
+export function ToggleButton({ selected, onToggle }) {
+    return (React.createElement(IconButton32, { icon: React.createElement(SmartphoneIcon, null), title: "Toggle responsive mode", selected: selected, onClick: onToggle }));
+}

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/ResponsivePreview/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { ResponsivePreview } from './ResponsivePreview/ResponsivePreview.js';
+import { DEFAULT_DEVICES, DEFAULT_VIEWPORT_STATE, VIEWPORT_STORAGE_KEY, } from './shared.js';
+import { ToggleButton } from './ToggleButton/index.js';
+const { plug, namedPlug, register } = createPlugin({
+    name: 'responsivePreview',
+    defaultConfig: {
+        devices: DEFAULT_DEVICES,
+    },
+});
+plug('rendererPreviewOuter', ({ children, pluginContext }) => {
+    const { getConfig, getMethodsOf } = pluginContext;
+    const { devices } = getConfig();
+    const rendererCore = getMethodsOf('rendererCore');
+    const { enabled, viewport, scaled } = getViewportState(pluginContext);
+    const onViewportChange = useViewportChange(pluginContext);
+    const onScaledChange = useScaledChange(pluginContext);
+    return (React.createElement(ResponsivePreview, { devices: devices, enabled: enabled, viewport: viewport, scaled: scaled, validFixtureSelected: rendererCore.isValidFixtureSelected(), setViewport: onViewportChange, setScaled: onScaledChange }, children));
+});
+namedPlug('rendererAction', 'responsivePreview', ({ pluginContext }) => {
+    const { getMethodsOf } = pluginContext;
+    const core = getMethodsOf('core');
+    const viewportState = getViewportState(pluginContext);
+    const { enabled, viewport } = viewportState;
+    if (!core.getWebRendererUrl())
+        return null;
+    return (React.createElement(ToggleButton, { selected: enabled, onToggle: () => {
+            if (enabled) {
+                setViewportState(pluginContext, { ...viewportState, enabled: false });
+                setFixtureStateViewport(pluginContext, null);
+            }
+            else {
+                setViewportState(pluginContext, { ...viewportState, enabled: true });
+                setFixtureStateViewport(pluginContext, viewport);
+            }
+        } }));
+});
+export { register };
+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;
+        setViewportState(context, { ...viewportState, enabled: true, viewport });
+        setFixtureStateViewport(context, viewport);
+    }, [context, viewportState]);
+}
+function useScaledChange(context) {
+    const viewportState = getViewportState(context);
+    return React.useCallback((scaled) => setViewportState(context, { ...viewportState, scaled }), [context, viewportState]);
+}
+function getViewportState(context) {
+    const { getMethodsOf } = context;
+    const storage = getMethodsOf('storage');
+    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 }
+        : viewportState;
+}
+function setViewportState(context, viewportState) {
+    const { getMethodsOf } = context;
+    const storage = getMethodsOf('storage');
+    storage.setItem(VIEWPORT_STORAGE_KEY, viewportState);
+}
+function setFixtureStateViewport(context, viewport) {
+    const { getMethodsOf } = context;
+    const rendererCore = getMethodsOf('rendererCore');
+    rendererCore.setFixtureState(fixtureState => ({
+        ...fixtureState,
+        viewport,
+    }));
+}

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

@@ -0,0 +1,21 @@
+import { FixtureState } from 'react-cosmos-core';
+import { PluginContext } from 'react-plugin';
+import { StorageSpec } from '../Storage/spec.js';
+import { ResponsivePreviewSpec, ResponsiveViewport } 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;
+};
+export declare const DEFAULT_DEVICES: {
+    label: string;
+    width: number;
+    height: number;
+}[];
+export declare const VIEWPORT_STORAGE_KEY = "responsiveViewportState";
+export declare const DEFAULT_VIEWPORT_STATE: ViewportState;

package/dist/plugins/ResponsivePreview/shared.js

@@ -0,0 +1,19 @@
+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: '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 },
+];
+export const VIEWPORT_STORAGE_KEY = 'responsiveViewportState';
+export const DEFAULT_VIEWPORT_STATE = {
+    enabled: false,
+    scaled: true,
+    viewport: { width: 320, height: 568 },
+};

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

@@ -0,0 +1,13 @@
+export type ResponsiveViewport = {
+    width: number;
+    height: number;
+};
+export type ResponsiveDevice = ResponsiveViewport & {
+    label: string;
+};
+export type ResponsivePreviewSpec = {
+    name: 'responsivePreview';
+    config: {
+        devices: ResponsiveDevice[];
+    };
+};

package/dist/plugins/ResponsivePreview/spec.js

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

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

@@ -0,0 +1,9 @@
+import { FixtureId } from 'react-cosmos-core';
+type Props = {
+    selectedFixtureId: FixtureId | null;
+    rendererConnected: boolean;
+    validFixtureSelected: boolean;
+    globalActionOrder: string[];
+};
+export declare function GlobalHeader({ selectedFixtureId, rendererConnected, validFixtureSelected, globalActionOrder, }: Props): JSX.Element;
+export {};

package/dist/plugins/Root/GlobalHeader.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ArraySlot } from 'react-plugin';
+import styled from 'styled-components';
+import { grey176, grey32, white10 } from '../../style/colors.js';
+export function GlobalHeader({ selectedFixtureId, rendererConnected, validFixtureSelected, globalActionOrder, }) {
+    function getMessage() {
+        if (!rendererConnected) {
+            return React.createElement(Message, null, "Waiting for renderer...");
+        }
+        if (!selectedFixtureId) {
+            return React.createElement(Message, null, "No fixture selected");
+        }
+        if (!validFixtureSelected) {
+            return React.createElement(Message, null, "Fixture not found");
+        }
+        return null;
+    }
+    return (React.createElement(Container, null,
+        React.createElement(Left, null),
+        getMessage(),
+        React.createElement(Right, null, rendererConnected && (React.createElement(ArraySlot, { name: "globalAction", plugOrder: globalActionOrder })))));
+}
+const Container = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 32px;
+  padding: 4px;
+  border-bottom: 1px solid ${white10};
+  background: ${grey32};
+`;
+const Actions = styled.div `
+  > button {
+    margin-left: 4px;
+
+    :first-child {
+      margin-left: 0;
+    }
+  }
+`;
+const Left = styled(Actions) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const Right = styled(Actions) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const Message = styled.div `
+  padding: 4px;
+  color: ${grey176};
+  line-height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
+type Props = {
+    fixtureItems: FlatFixtureTreeItem[];
+    fixtureId: FixtureId;
+    navOpen: boolean;
+    panelOpen: boolean;
+    fixtureActionOrder: string[];
+    rendererActionOrder: string[];
+    onOpenNav: () => unknown;
+    onTogglePanel: () => unknown;
+    onFixtureSelect: (fixtureId: FixtureId) => unknown;
+    onClose: () => unknown;
+};
+export declare const RendererHeader: React.NamedExoticComponent<Props>;
+export {};

package/dist/plugins/Root/RendererHeader.js

@@ -0,0 +1,79 @@
+import { isEqual } from 'lodash-es';
+import React from 'react';
+import styled from 'styled-components';
+import { IconButton32 } from '../../components/buttons/index.js';
+import { MenuIcon, RotateCcwIcon, SlidersIcon, XCircleIcon, } from '../../components/icons/index.js';
+import { FixtureActionSlot } from '../../slots/FixtureActionSlot.js';
+import { RendererActionSlot } from '../../slots/RendererActionSlot.js';
+import { grey176, grey32, white10 } from '../../style/colors.js';
+export const RendererHeader = React.memo(function RendererHeader({ fixtureItems, fixtureId, navOpen, panelOpen, fixtureActionOrder, rendererActionOrder, onOpenNav, onTogglePanel, onFixtureSelect, onClose, }) {
+    const fixtureItem = findFixtureItemById(fixtureItems, fixtureId);
+    const slotProps = React.useMemo(() => ({ fixtureId }), [fixtureId]);
+    const onReload = React.useCallback(() => onFixtureSelect(fixtureId), [fixtureId, onFixtureSelect]);
+    return (React.createElement(Container, null,
+        React.createElement(Left, null,
+            !navOpen && (React.createElement(React.Fragment, null,
+                React.createElement(IconButton32, { icon: React.createElement(MenuIcon, null), title: "Show fixture list", selected: false, onClick: onOpenNav }),
+                React.createElement(ButtonSeparator, null))),
+            React.createElement(IconButton32, { icon: React.createElement(XCircleIcon, null), title: "Close fixture", onClick: onClose }),
+            React.createElement(IconButton32, { icon: React.createElement(RotateCcwIcon, null), title: "Reload fixture", onClick: onReload }),
+            React.createElement(FixtureActionSlot, { slotProps: slotProps, plugOrder: fixtureActionOrder })),
+        fixtureItem && React.createElement(FixtureName, null, getFixtureName(fixtureItem)),
+        React.createElement(Right, null,
+            React.createElement(RendererActionSlot, { slotProps: slotProps, plugOrder: rendererActionOrder }),
+            React.createElement(IconButton32, { icon: React.createElement(SlidersIcon, null), title: "Toggle control panel", selected: panelOpen, onClick: onTogglePanel }))));
+});
+function findFixtureItemById(fixtureItems, fixtureId) {
+    return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+}
+function getFixtureName({ name, fileName }) {
+    return name ? `${fileName} ${name}` : fileName;
+}
+const Container = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 0 4px;
+  border-bottom: 1px solid ${white10};
+  background: ${grey32};
+  white-space: nowrap;
+  overflow-x: auto;
+`;
+const Actions = styled.div `
+  > button {
+    margin-left: 4px;
+
+    :first-child {
+      margin-left: 0;
+    }
+  }
+`;
+const Left = styled(Actions) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const Right = styled(Actions) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const ButtonSeparator = styled.div `
+  flex-shrink: 0;
+  background: ${white10};
+  width: 1px;
+  height: 40px;
+  margin-left: 4px;
+`;
+const FixtureName = styled.div `
+  margin: 0 32px;
+  padding: 4px 0;
+  color: ${grey176};
+  line-height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;

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

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

package/dist/plugins/Root/Root.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { ArraySlot, Slot } from 'react-plugin';
+import styled from 'styled-components';
+import { useDrag } from '../../hooks/useDrag.js';
+import { NavRowSlot } from '../../slots/NavRowSlot.js';
+import { grey32, grey8, white10 } from '../../style/colors.js';
+import { GlobalHeader } from './GlobalHeader.js';
+import { RendererHeader } from './RendererHeader.js';
+import { SidePanel } from './SidePanel.js';
+export function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }) {
+    const navDrag = useDrag({
+        value: navWidth,
+        onChange: setNavWidth,
+    });
+    const panelDrag = useDrag({
+        value: panelWidth,
+        reverse: true,
+        onChange: setPanelWidth,
+    });
+    if (!storageCacheReady) {
+        return React.createElement(Container, null);
+    }
+    const showNav = rendererConnected && (navOpen || !validFixtureSelected);
+    const dragging = navDrag.dragging || panelDrag.dragging;
+    // z-indexes are set here on purpose to show the layer hierarchy at a glance
+    return (React.createElement(Container, { dragging: dragging },
+        showNav && (React.createElement(Draggable, { style: { width: navWidth, zIndex: 2 } },
+            React.createElement(Nav, null, rendererConnected && (React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder }))),
+            navDrag.dragging && React.createElement(DragOverlay, null),
+            React.createElement(NavDragHandle, { ref: navDrag.dragElRef }))),
+        React.createElement(MainContainer, { key: "main", style: { zIndex: 1 } },
+            !validFixtureSelected && (React.createElement(GlobalHeader, { selectedFixtureId: selectedFixtureId, rendererConnected: rendererConnected, validFixtureSelected: validFixtureSelected, globalActionOrder: globalActionOrder })),
+            React.createElement(RendererContainer, { key: "rendererContainer" },
+                selectedFixtureId && validFixtureSelected && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: onFixtureSelect, onClose: onFixtureClose })),
+                React.createElement(RendererBody, { key: "rendererBody" },
+                    React.createElement(Slot, { name: "rendererPreview" }),
+                    dragging && React.createElement(DragOverlay, null),
+                    panelOpen && selectedFixtureId && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
+                        React.createElement(SidePanel, { fixtureId: selectedFixtureId, fixtureState: fixtureState, sidePanelRowOrder: sidePanelRowOrder, onFixtureStateChange: onFixtureStateChange }),
+                        panelDrag.dragging && React.createElement(DragOverlay, null),
+                        React.createElement(PanelDragHandle, { ref: panelDrag.dragElRef })))),
+                React.createElement(Slot, { name: "contentOverlay" }))),
+        React.createElement("div", { style: { zIndex: 4 } },
+            React.createElement(ArraySlot, { name: "global", plugOrder: globalOrder }))));
+}
+const Container = styled.div.attrs({ 'data-testid': 'root' }) `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: ${grey32};
+  cursor: ${props => (props.dragging ? 'col-resize' : 'default')};
+`;
+const Draggable = styled.div `
+  flex-shrink: 0;
+  position: relative;
+`;
+const Nav = styled.div `
+  width: 100%;
+  height: 100%;
+  background: ${grey32};
+  display: flex;
+  flex-direction: column;
+`;
+const MainContainer = styled.div `
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const RendererContainer = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+`;
+const RendererBody = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  background: ${grey8};
+  overflow: hidden;
+`;
+const ControlPanelContainer = styled(Draggable) `
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+const DragHandle = styled.div `
+  position: absolute;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: ${white10};
+  background-clip: content-box;
+  cursor: col-resize;
+  user-select: none;
+`;
+const NavDragHandle = styled(DragHandle) `
+  right: -2px;
+  padding: 0 2px;
+`;
+const PanelDragHandle = styled(DragHandle) `
+  left: -2px;
+  padding: 0 1px 0 2px;
+`;
+// The purpose of DragOverlay is to cover the renderer iframe while dragging,
+// because otherwise the iframe steaps the mousemove events and stops the drag.
+const DragOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
+type Props = {
+    fixtureId: FixtureId;
+    fixtureState: FixtureState;
+    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    sidePanelRowOrder: string[];
+};
+export declare const SidePanel: React.NamedExoticComponent<Props>;
+export {};

package/dist/plugins/Root/SidePanel.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SidePanelRowSlot } from '../../slots/SidePanelRowSlot.js';
+import { grey32 } from '../../style/colors.js';
+export const SidePanel = React.memo(function SidePanel({ fixtureId, fixtureState, onFixtureStateChange, sidePanelRowOrder, }) {
+    const slotProps = React.useMemo(() => ({ fixtureId, fixtureState, onFixtureStateChange }), [fixtureId, fixtureState, onFixtureStateChange]);
+    return (React.createElement(Container, null,
+        React.createElement(Content, null,
+            React.createElement(SidePanelRowSlot, { slotProps: slotProps, plugOrder: sidePanelRowOrder }))));
+});
+const Container = styled.div `
+  height: 100%;
+  padding: 0 0 0 1px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: ${grey32};
+`;
+// The background color is required for the proper scroll bar color theme
+const Content = styled.div `
+  width: 100%;
+  max-height: 100%;
+  background: ${grey32};
+  overflow-x: hidden;
+  overflow-y: auto;
+`;

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

@@ -0,0 +1,7 @@
+type Props = {
+    disabled?: boolean;
+    selected: boolean;
+    onToggle: () => unknown;
+};
+export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): JSX.Element;
+export {};

package/dist/plugins/Root/ToggleNavButton.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconButton8 } from '../../components/buttons/index.js';
+import { MenuIcon } from '../../components/icons/index.js';
+export function ToggleNavButton({ disabled, selected, onToggle }) {
+    return (React.createElement(IconButton8, { title: "Show fixture list", icon: React.createElement(MenuIcon, null), disabled: disabled, selected: selected, onClick: onToggle }));
+}

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };