REFACTOR preview in prep for Addon type wrapper

I think we even need need an addon type Context... hmm

addons/a11y/src/components/ColorBlindness.js

@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';
 
@@ -17,10 +17,6 @@ const ColorIcon = styled.span(
   })
 );
 
-const Hidden = styled.div(() => ({
-  display: 'none',
-}));
-
 class ColorBlindness extends Component {
   state = {
     filter: false,
@@ -44,118 +40,54 @@ class ColorBlindness extends Component {
     const { filter } = this.state;
 
     return (
-      <Fragment>
-        <Hidden>
-          <svg key="svg">
-            <defs>
-              <filter id="protanopia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="protanomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="deuteranopia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="deuteranomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="tritanopia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="tritanomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="achromatopsia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="achromatomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-            </defs>
-          </svg>
-        </Hidden>
-        <Popout key="filters">
-          <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
-            <Icons icon="mirror" />
-          </IconButton>
-          {({ hide }) => (
-            <List>
-              {[
-                'protanopia',
-                'protanomaly',
-                'deuteranopia',
-                'deuteranomaly',
-                'tritanopia',
-                'tritanomaly',
-                'achromatopsia',
-                'achromatomaly',
-              ].map(i => (
-                <Item
-                  key={i}
-                  onClick={() => {
-                    this.setFilter(filter === i ? null : i);
-                    hide();
-                  }}
-                >
-                  <Icon type={<ColorIcon filter={i} />} />
-                  <Title>{i}</Title>
-                </Item>
-              ))}
+      <Popout key="filters">
+        <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
+          <Icons icon="mirror" />
+        </IconButton>
+        {({ hide }) => (
+          <List>
+            {[
+              'protanopia',
+              'protanomaly',
+              'deuteranopia',
+              'deuteranomaly',
+              'tritanopia',
+              'tritanomaly',
+              'achromatopsia',
+              'achromatomaly',
+            ].map(i => (
               <Item
+                key={i}
                 onClick={() => {
-                  this.setFilter(filter === 'mono' ? null : 'mono');
+                  this.setFilter(filter === i ? null : i);
                   hide();
                 }}
               >
-                <Icon type={<ColorIcon filter="mono" />} />
-                <Title>mono</Title>
+                <Icon type={<ColorIcon filter={i} />} />
+                <Title>{i}</Title>
               </Item>
-              <Item
-                onClick={() => {
-                  this.setFilter(null);
-                  hide();
-                }}
-              >
-                <Icon type={<ColorIcon />} />
-                <Title>Off</Title>
-              </Item>
-            </List>
-          )}
-        </Popout>
-      </Fragment>
+            ))}
+            <Item
+              onClick={() => {
+                this.setFilter(filter === 'mono' ? null : 'mono');
+                hide();
+              }}
+            >
+              <Icon type={<ColorIcon filter="mono" />} />
+              <Title>mono</Title>
+            </Item>
+            <Item
+              onClick={() => {
+                this.setFilter(null);
+                hide();
+              }}
+            >
+              <Icon type={<ColorIcon />} />
+              <Title>Off</Title>
+            </Item>
+          </List>
+        )}
+      </Popout>
     );
   }
 }

addons/a11y/src/register.js

@@ -1,14 +1,20 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import addons, { types } from '@storybook/addons';
+import { styled } from '@storybook/theming';
 
 import Panel from './components/Panel';
 import ColorBlindness from './components/ColorBlindness';
 
 import { ADDON_ID, PANEL_ID } from './constants';
 
+const Hidden = styled.div(() => ({
+  display: 'none',
+}));
+
 addons.register(ADDON_ID, api => {
   addons.add(PANEL_ID, {
     type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
     render: () => <ColorBlindness />,
   });
 
@@ -18,4 +24,75 @@ addons.register(ADDON_ID, api => {
     // eslint-disable-next-line react/prop-types
     render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
   });
+
+  addons.add(PANEL_ID, {
+    type: types.PREVIEW,
+    render: ({ children }) => (
+      <Fragment>
+        {children}
+        <Hidden>
+          <svg key="svg">
+            <defs>
+              <filter id="protanopia">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="protanomaly">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="deuteranopia">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="deuteranomaly">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="tritanopia">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="tritanomaly">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="achromatopsia">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+              <filter id="achromatomaly">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  type="matrix"
+                  values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
+                />
+              </filter>
+            </defs>
+          </svg>
+        </Hidden>
+      </Fragment>
+    ),
+  });
 });

addons/backgrounds/src/Tool.js

@@ -92,46 +92,44 @@ export default class BackgroundTool extends Component {
     }
 
     return (
-      <Fragment>
-        <Popout key="backgrounds">
-          <IconButton key="background" title="Backgrounds">
-            <Icons icon="photo" />
-          </IconButton>
-          {({ hide }) => (
-            <List>
-              {selected !== undefined ? (
-                <Fragment>
-                  <Item
-                    key="reset"
-                    onClick={() => {
-                      hide();
-                      this.change(undefined);
-                    }}
-                  >
-                    <Icon type="undo" />
-                    <Title>Reset</Title>
-                    <Detail>transparent</Detail>
-                  </Item>
-                </Fragment>
-              ) : null}
-
-              {list.map(([key, value]) => (
+      <Popout key="backgrounds">
+        <IconButton key="background" title="Backgrounds">
+          <Icons icon="photo" />
+        </IconButton>
+        {({ hide }) => (
+          <List>
+            {selected !== undefined ? (
+              <Fragment>
                 <Item
-                  key={key}
+                  key="reset"
                   onClick={() => {
                     hide();
-                    this.change(key);
+                    this.change(undefined);
                   }}
                 >
-                  <Icon type={<S.ColorIcon background={value} />} />
-                  <Title>{key}</Title>
-                  <Detail>{value}</Detail>
+                  <Icon type="undo" />
+                  <Title>Reset</Title>
+                  <Detail>transparent</Detail>
                 </Item>
-              ))}
-            </List>
-          )}
-        </Popout>
-      </Fragment>
+              </Fragment>
+            ) : null}
+
+            {list.map(([key, value]) => (
+              <Item
+                key={key}
+                onClick={() => {
+                  hide();
+                  this.change(key);
+                }}
+              >
+                <Icon type={<S.ColorIcon background={value} />} />
+                <Title>{key}</Title>
+                <Detail>{value}</Detail>
+              </Item>
+            ))}
+          </List>
+        )}
+      </Popout>
     );
   }
 }

addons/backgrounds/src/register.js

@@ -7,6 +7,7 @@ import Tool from './Tool';
 addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
     type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
     render: () => <Tool api={api} />,
   });
 });

addons/viewport/src/register.js

@@ -10,6 +10,7 @@ addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
     type: types.TOOL,
     title: 'viewport / media-queries',
+    match: ({ viewMode }) => viewMode === 'story',
     render: () => <Tool channel={channel} api={api} />,
   });
 });

lib/addons/src/types.ts

@@ -2,6 +2,7 @@ export enum types {
   TAB = 'tab',
   PANEL = 'panel',
   TOOL = 'tool',
+  PREVIEW = 'preview',
 }
 
 export type Types = types | string;

lib/components/src/preview/background.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+
+const Context = React.createContext();
+
+class Provider extends Component {
+  state = {
+    value: 'transparent',
+    grid: false,
+  };
+
+  setValue = value => this.setState({ value });
+
+  setGrid = grid => this.setState({ grid });
+
+  render() {
+    const { children } = this.props;
+    const { setValue, setGrid } = this;
+    const { value, grid } = this.state;
+
+    return (
+      <Context.Provider value={{ value, setValue, grid, setGrid }}>{children}</Context.Provider>
+    );
+  }
+}
+
+const { Consumer } = Context;
+
+export { Consumer as BackgroundConsumer, Provider as BackgroundProvider };

lib/components/src/preview/iframe.js

@@ -0,0 +1,33 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { Global, css } from '@storybook/theming';
+
+export class IFrame extends Component {
+  // this component renders an iframe, which gets updates via post-messages
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const { id, title, src, allowFullScreen, ...rest } = this.props;
+    return (
+      <Fragment>
+        <Global
+          styles={css({
+            iframe: {
+              border: '0 none',
+            },
+          })}
+        />
+        <iframe id={id} title={title} src={src} allowFullScreen={allowFullScreen} {...rest} />
+      </Fragment>
+    );
+  }
+}
+IFrame.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  allowFullScreen: PropTypes.bool.isRequired,
+};

lib/components/src/preview/preview.js

@@ -1,11 +1,10 @@
 import { window } from 'global';
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import memoize from 'memoizerific';
 
-import Events from '@storybook/core-events';
+import { SET_CURRENT_STORY } from '@storybook/core-events';
 import { types } from '@storybook/addons';
-import { Global, css } from '@storybook/theming';
-import { Route } from '@storybook/router';
 
 import Helmet from 'react-helmet-async';
 
@@ -17,60 +16,82 @@ import Zoom from './tools/zoom';
 import { Grid, Background } from './tools/background';
 import * as S from './components';
 
-class IFrame extends Component {
-  shouldComponentUpdate() {
-    // this component renders an iframe, which gets updates via post-messages
-    return false;
-  }
+import { ZoomProvider, ZoomConsumer } from './zoom';
+import { BackgroundProvider, BackgroundConsumer } from './background';
 
-  render() {
-    const { id, title, src, allowFullScreen, ...rest } = this.props;
-    return (
-      <Fragment>
-        <Global
-          styles={css({
-            iframe: {
-              border: '0 none',
-            },
-          })}
-        />
-        <iframe id={id} title={title} src={src} allowFullScreen={allowFullScreen} {...rest} />
-      </Fragment>
-    );
-  }
-}
-IFrame.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  allowFullScreen: PropTypes.bool.isRequired,
-};
+import { IFrame } from './iframe';
+
+const renderIframe = ({ storyId, id }) => (
+  <IFrame
+    key="iframe"
+    id="storybook-preview-iframe"
+    title={id || 'preview'}
+    src={`iframe.html?id=${storyId}`}
+    allowFullScreen
+  />
+);
+
+const getElementList = memoize(10)((getFn, type, base) => base.concat(Object.values(getFn(type))));
+
+const ActualPreview = ({ wrappers, id, storyId, active }) =>
+  wrappers.reduceRight(
+    (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }),
+    renderIframe({ id, storyId })
+  );
+
+const defaultWrappers = [
+  { render: ({ children, active }) => <div hidden={!active}>{children}</div> },
+  {
+    render: ({ children }) => (
+      <BackgroundConsumer>
+        {({ value, grid }) => (
+          <Background id="storybook-preview-background" value={value}>
+            {grid ? <Grid /> : null}
+            {children}
+          </Background>
+        )}
+      </BackgroundConsumer>
+    ),
+  },
+  {
+    render: ({ children }) => (
+      <ZoomConsumer>
+        {({ value }) => (
+          <S.Frame
+            style={{
+              width: `${100 * value}%`,
+              height: `${100 * value}%`,
+              transform: `scale(${1 / value})`,
+            }}
+          >
+            {children}
+          </S.Frame>
+        )}
+      </ZoomConsumer>
+    ),
+  },
+];
+
+const RightTools = () => <Fragment />;
 
 // eslint-disable-next-line react/no-multi-comp
 class Preview extends Component {
-  state = {
-    zoom: 1,
-    grid: false,
-  };
-
-  shouldComponentUpdate({ storyId, viewMode, options }, { zoom, grid }) {
-    const { props, state } = this;
+  shouldComponentUpdate({ storyId, viewMode, options }) {
+    const { props } = this;
 
     return (
       options.isFullscreen !== props.options.isFullscreen ||
       options.isToolshown !== props.options.isToolshown ||
       viewMode !== props.viewMode ||
-      storyId !== props.storyId ||
-      zoom !== state.zoom ||
-      grid !== state.grid
+      storyId !== props.storyId
     );
   }
 
   componentDidUpdate(prevProps) {
     const { api, storyId } = this.props;
-    const { path: prevStoryId } = prevProps;
+    const { storyId: prevStoryId } = prevProps;
     if (storyId && storyId !== prevStoryId) {
-      api.emit(Events.SET_CURRENT_STORY, { storyId });
+      api.emit(SET_CURRENT_STORY, { storyId });
     }
   }
 
@@ -87,102 +108,130 @@ class Preview extends Component {
       description,
     } = this.props;
 
-    const { zoom, grid } = this.state;
-    const tools = getElements(types.TOOL);
-    const toolList = Object.values(tools);
-    const toolbarHeight = options.isToolshown ? 40 : 0;
+    const toolbarHeight = options.isToolshown ? 41 : 0;
 
-    const panels = getElements(types.TAB);
-    const panelList = Object.values(panels);
-    const tabsList = [
+    const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
+    const panels = getElementList(getElements, types.TAB, [
       {
-        route: () => `/story/${storyId}`,
-        match: () => viewMode === 'story',
+        route: ({ storyId }) => `/story/${storyId}`,
+        match: ({ viewMode }) => viewMode === 'story',
+        render: ({ active, id, storyId }) => (
+          <ActualPreview active={active} wrappers={wrappers} id={id} storyId={storyId} />
+        ),
         title: 'Canvas',
         key: 'canvas',
       },
-    ].concat(panelList);
+    ]);
+    const tools = getElementList(getElements, types.TOOL, [
+      {
+        render: () => (
+          <TabBar key="tabs" scroll={false}>
+            {panels.map((t, index) => {
+              const to = t.route({ storyId, viewMode, path, location });
+              const isActive = t.match({ storyId, viewMode, path, location });
+              return (
+                <S.UnstyledLink key={t.id || `l${index}`} to={to}>
+                  <TabButton active={isActive}>{t.title}</TabButton>
+                </S.UnstyledLink>
+              );
+            })}
+          </TabBar>
+        ),
+      },
+      {
+        match: ({ viewmode }) => viewMode === 'story',
+        render: () => (
+          <ZoomConsumer>
+            {({ set, value }) => (
+              <Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
+            )}
+          </ZoomConsumer>
+        ),
+      },
+      {
+        match: ({ viewmode }) => viewMode === 'story',
+        render: () => (
+          <BackgroundConsumer>
+            {({ setGrid, grid }) => (
+              <IconButton active={!!grid} key="grid" onClick={() => setGrid(!grid)}>
+                <Icons icon="grid" />
+              </IconButton>
+            )}
+          </BackgroundConsumer>
+        ),
+      },
+    ]);
+    const extraTools = [
+      {
+        match: ({ viewmode }) => viewMode === 'story',
+        render: () => (
+          <IconButton key="full" onClick={actions.toggleFullscreen}>
+            <Icons icon={options.isFullscreen ? 'cross' : 'expand'} />
+          </IconButton>
+        ),
+      },
+      {
+        match: ({ viewmode }) => viewMode === 'story',
+        render: () => (
+          <IconButton key="opener" onClick={() => window.open(`iframe.html?id=${storyId}`)}>
+            <Icons icon="share" />
+          </IconButton>
+        ),
+      },
+    ];
+
+    const left = tools
+      .filter(item => !item.match || item.match({ storyId, viewMode, location, path }))
+      .reduce((acc, item, index) => {
+        const content = item.render();
+
+        return content ? (
+          <Fragment key={item.id || item.key || `tool-${index}`}>
+            {acc}
+            {index > 0 ? <Separator title={index} key={`separator-${index}`} /> : null}
+            {content}
+          </Fragment>
+        ) : (
+          acc
+        );
+      }, '');
+
+    const right = extraTools
+      .filter(item => !item.match || item.match({ storyId, viewMode, location, path }))
+      .reduce((acc, item, index) => {
+        const content = item.render();
+
+        return content ? (
+          <Fragment key={item.id || item.key || `tool-${index}`}>
+            {acc}
+            {index > 0 ? <Separator title={index} key={`separator-${index}`} /> : null}
+            {content}
+          </Fragment>
+        ) : (
+          acc
+        );
+      }, '');
 
     return (
-      <Fragment>
-        {id === 'main' && (
-          <Helmet>
-            <title>{description ? `${description} ⋅ ` : ''}Storybook</title>
-          </Helmet>
-        )}
-        <Toolbar
-          key="toolbar"
-          shown={options.isToolshown}
-          left={[]
-            .concat(
-              tabsList.length > 1
-                ? [
-                    <TabBar key="tabs" scroll={false}>
-                      {tabsList.map((t, index) => {
-                        const to = t.route({ storyId, viewMode, path, location });
-                        const isActive = t.match({ storyId, viewMode, path, location });
-                        return (
-                          <S.UnstyledLink key={t.id || `l${index}`} to={to}>
-                            <TabButton active={isActive}>{t.title}</TabButton>
-                          </S.UnstyledLink>
-                        );
-                      })}
-                    </TabBar>,
-                    <Separator key="1" />,
-                  ]
-                : [<Spacer key="1" />]
-            )
-            .concat([
-              <Zoom
-                key="zoom"
-                current={zoom}
-                set={v => this.setState({ zoom: zoom * v })}
-                reset={() => this.setState({ zoom: 1 })}
-              />,
-              <Separator key="2" />,
-              <IconButton active={!!grid} key="grid" onClick={() => this.setState({ grid: !grid })}>
-                <Icons icon="grid" />
-              </IconButton>,
-              ...toolList.map((t, index) => (
-                <Fragment key={t.id || `t${index}`}>{t.render()}</Fragment>
-              )),
-            ])}
-          right={[
-            <Separator key="1" />,
-            <IconButton key="full" onClick={actions.toggleFullscreen}>
-              <Icons icon={options.isFullscreen ? 'cross' : 'expand'} />
-            </IconButton>,
-            <Separator key="2" />,
-            <IconButton key="opener" onClick={() => window.open(`iframe.html?id=${storyId}`)}>
-              <Icons icon="share" />
-            </IconButton>,
-          ]}
-        />
-        <S.FrameWrap key="frame" offset={toolbarHeight}>
-          <div hidden={viewMode !== 'story'}>
-            <S.Frame
-              style={{
-                width: `${100 * zoom}%`,
-                height: `${100 * zoom}%`,
-                transform: `scale(${1 / zoom})`,
-              }}
-            >
-              <Background id="storybook-preview-background">{grid ? <Grid /> : null}</Background>
-              <IFrame
-                id="storybook-preview-iframe"
-                title={id || 'preview'}
-                src={`iframe.html?id=${storyId}`}
-                allowFullScreen
-              />
-            </S.Frame>
-            {panelList.map(panel => (
-              <Fragment key={panel.id}>
-                {panel.render({ active: panel.match({ storyId, viewMode, location, path }) })}
-              </Fragment>
-            ))}
-          </div>
-        </S.FrameWrap>
-      </Fragment>
+      <BackgroundProvider>
+        <ZoomProvider>
+          <Fragment>
+            {id === 'main' && (
+              <Helmet key="description">
+                <title>{description ? `${description} ⋅ ` : ''}Storybook</title>
+              </Helmet>
+            )}
+            <Toolbar key="toolbar" shown={options.isToolshown} left={left} right={right} />
+            <S.FrameWrap key="frame" offset={toolbarHeight}>
+              {panels.map(({ id, key, render, match }) => (
+                <Fragment key={id || key}>
+                  {render({ active: match({ storyId, viewMode, location, path }) })}
+                </Fragment>
+              ))}
+            </S.FrameWrap>
+          </Fragment>
+        </ZoomProvider>
+      </BackgroundProvider>
     );
   }
 }

lib/components/src/preview/toolbar.js

@@ -63,7 +63,6 @@ const Wrapper = styled.div(({ theme, shown }) => ({
   left: 0,
   height: 40,
   width: '100%',
-  boxSizing: 'border-box',
   borderBottom: theme.mainBorder,
   background: theme.barFill,
   color: '#999999',

lib/components/src/preview/zoom.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+const Context = React.createContext();
+
+class Provider extends Component {
+  state = {
+    value: 1,
+  };
+
+  set = value => this.setState({ value });
+
+  render() {
+    const { children } = this.props;
+    const { set } = this;
+    const { value } = this.state;
+
+    return <Context.Provider value={{ value, set }}>{children}</Context.Provider>;
+  }
+}
+
+const { Consumer } = Context;
+
+export { Consumer as ZoomConsumer, Provider as ZoomProvider };

lib/core/src/server/dev-server.js

@@ -55,7 +55,7 @@ export default function(options) {
               logger.line();
               try {
                 previewReject(error);
-                previewProcess.close();
+                // previewProcess.close();
                 logger.warn('force closed preview build');
               } catch (e) {
                 logger.warn('Unable to close preview build!');

lib/ui/src/components/preview/preview.stories.js

@@ -15,15 +15,18 @@ export const previewProps = {
   path: 'string',
   viewMode: 'story',
   location: {},
-  getElements: () => [
-    {
-      type: types.TAB,
-      title: 'Notes',
-      route: ({ storyId }) => `/info/${storyId}`, // todo add type
-      match: ({ viewMode }) => viewMode === 'info', // todo add type
-      render: () => null,
-    },
-  ],
+  getElements: type =>
+    type === types.TAB
+      ? [
+          {
+            type: types.TAB,
+            title: 'Notes',
+            route: ({ storyId }) => `/info/${storyId}`, // todo add type
+            match: ({ viewMode }) => viewMode === 'info', // todo add type
+            render: () => null,
+          },
+        ]
+      : [],
   options: {
     isFullscreen: false,
     isToolshown: true,