Display relevant PreviewImages on ResponsiveModes changed.

layouts/scripts/dist/index.min.js

@@ -11265,14 +11265,11 @@ function Responsive(props = {}) {
     mode: 'default',
     breakpoint: '100%'
   };
-  const [state, setState] = react.exports.useState(initialState);
+  const [mode, setMode] = react.exports.useState(initialState.mode);
-
+  const [breakpoint, setBreakpoint] = react.exports.useState(initialState.breakpoint);
-  const updateState = update => setState(Object.assign({}, state, update));
-
   react.exports.useEffect(() => {
-    // Update the document title using the browser API
     updateController();
-  });
+  }, [mode, breakpoint]);
   const previewFrame = props.rootAttributes.previewFrame;
   return render(); //
   // Functions
@@ -11290,24 +11287,28 @@ function Responsive(props = {}) {
 
   function selectMode(mode, breakpoint) {
     if (mode === 'reset') {
-      updateState(initialState);
+      setMode(initialState.mode);
+      setBreakpoint(initialState.breakpoint);
       return;
     }
 
-    updateState({
+    setMode(mode);
-      mode,
+    setBreakpoint(breakpoint);
-      breakpoint
-    });
   }
 
-  function isActive(mode) {
+  function isActive(requestedMode) {
-    return mode === state.mode;
+    return mode === requestedMode;
   }
 
   function updateController() {
-    const unit = typeof state.breakpoint === 'string' ? '' : 'px';
+    const unit = typeof breakpoint === 'string' ? '' : 'px';
-    previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
+    previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
     previewFrame.classList.add('has-breakpoint');
+    window.postMessage('responsiveUpdate');
+    window.responsiveState = {
+      mode,
+      breakpoint
+    };
   }
 }
 
@@ -11552,7 +11553,7 @@ function DesignPreview({
     x: getInitialXPosition(previewOption),
     y: 0
   });
-  const [opacity, setOpacity] = react.exports.useState(100);
+  const [opacity, setOpacity] = react.exports.useState(85);
   const keyDownHandler = react.exports.useCallback(function (e) {
     if (!active) {
       return;
@@ -11589,10 +11590,9 @@ function DesignPreview({
       x: getInitialXPosition(previewOption),
       y: 0
     });
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
   }, [previewOption.widthDimension]);
-  react.exports.useEffect(() => {
-    setActive(false);
-  }, [previewOption.dataSource]);
 
   if (!previewOption) {
     return;
@@ -11601,7 +11601,7 @@ function DesignPreview({
   const disabled = !previewOption.url;
   const classNames = [];
 
-  if (active) {
+  if (!disabled && active) {
     classNames.push('active');
   }
 
@@ -11617,7 +11617,7 @@ function DesignPreview({
     onClick: () => toggle(),
     className: classNames.join(' '),
     disabled: disabled
-  }), active && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+  }), active && !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: opacity,
     min: "0",
@@ -11638,7 +11638,9 @@ function DesignPreview({
       top: position.y + 'px',
       left: position.x + 'px'
     }
-  }))));
+  })))); //
+  // Functions
+  //
 
   function start(e) {
     startDragPosition.x = e.clientX;
@@ -11693,6 +11695,19 @@ function DesignPreview({
 
     return window.innerWidth / 2 - previewOption.widthDimension / 2;
   }
+
+  function responsiveModeChangesHandler(e) {
+    if (e.data !== 'responsiveUpdate') {
+      return;
+    }
+
+    if (window.responsiveState.breakpoint === '100%') {
+      updatePosition({
+        x: getInitialXPosition(previewOption),
+        y: 0
+      });
+    }
+  }
 }
 
 function DataOptions(props = {}) {
@@ -11704,6 +11719,7 @@ function DataOptions(props = {}) {
     designPreview: []
   };
   const [state, setState] = react.exports.useState(initialState);
+  const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
 
   const updateState = update => setState(Object.assign({}, state, update));
 
@@ -11726,10 +11742,16 @@ function DataOptions(props = {}) {
       document.removeEventListener("keydown", handleCloseSidebarEscEvent);
     };
   }, [handleCloseSidebarEscEvent]);
+  react.exports.useEffect(() => {
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
+  }, [state]);
+  react.exports.useEffect(() => {
+    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
+  }, [state.designPreview]);
 
   const handleBlur = async e => (await isClickOutside(e)) ? closeSidebar() : null;
 
-  const previewOption = getDesignPreviewImage(state.dataName, state.designPreview);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -11760,7 +11782,9 @@ function DataOptions(props = {}) {
       value: item,
       selected: isSelected
     }, item);
-  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2))));
+  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)))); //
+  // Functions
+  //
 
   function openSidebar() {
     setSidebarOpen(true);
@@ -11793,10 +11817,24 @@ function DataOptions(props = {}) {
       return item.dataSource === currentDataName;
     });
     dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
+    let size = window.responsiveState.breakpoint;
+
+    if (size === '100%') {
+      size = window.innerWidth;
+    }
+
     return dataOptions.find(item => {
-      return item.widthDimension; // first
+      return size >= item.widthDimension;
     });
   }
+
+  function responsiveModeChangesHandler(e) {
+    if (e.data !== 'responsiveUpdate') {
+      return;
+    }
+
+    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
+  }
 }
 
 function setupDataOptions(rootAttributes) {

layouts/scripts/dist/index.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction S(a,b,e){if(null==a)rLine truncated
+{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction S(a,b,e){if(null==a)rLine truncated

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -14,6 +14,7 @@ function DataOptions(props = {}) {
 
   const initialState = {dataName: 'default', data: {}, dataOptions: [], designPreview: []};
   const [state, setState] = useState(initialState);
+  const [previewOption, setPreviewOption] = useState(getDesignPreviewImage(state.dataName, state.designPreview));
   const updateState = (update) => setState(Object.assign({}, state, update));
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -40,8 +41,16 @@ function DataOptions(props = {}) {
     }
   }, [handleCloseSidebarEscEvent]);
 
+  useEffect(() => {
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
+  }, [state]);
+
+  useEffect(() => {
+    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
+  }, [state.designPreview]);
+
   const handleBlur = async (e) => await isClickOutside(e) ? closeSidebar() : null;
-  const previewOption = getDesignPreviewImage(state.dataName, state.designPreview);
 
   return <div style={{display: 'flex', gap: '1rem', alignItems: 'center'}}>
     <SidebarButtonToggleStyle onClick={() => openSidebar()} title="Open a Sidebar with Data Options"/>
@@ -72,6 +81,10 @@ function DataOptions(props = {}) {
     </SidebarStyle>
   </div>;
 
+  //
+  // Functions
+  //
+
   function openSidebar() {
     setSidebarOpen(true);
     setTimeout(() => document.querySelector('.sidebar-active').focus());
@@ -101,11 +114,23 @@ function DataOptions(props = {}) {
     });
 
     dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
+    let size = window.responsiveState.breakpoint;
+    if (size === '100%') {
+      size = window.innerWidth;
+    }
 
     return dataOptions.find((item) => {
-      return item.widthDimension // first
+      return size >= item.widthDimension;
     });
   }
+
+  function responsiveModeChangesHandler(e) {
+    if (e.data !== 'responsiveUpdate') {
+      return;
+    }
+
+    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
+  }
 }
 
 export function setupDataOptions(rootAttributes) {

layouts/scripts/toolbar/data-options/DesignPreview.jsx

@@ -7,7 +7,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   const reference = createRef();
   const [active, setActive] = useState(false);
   const [position, setPosition] = useState({x: getInitialXPosition(previewOption), y: 0});
-  const [opacity, setOpacity] = useState(100);
+  const [opacity, setOpacity] = useState(85);
 
   const keyDownHandler = useCallback(
     function (e) {
@@ -38,12 +38,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
 
   useEffect(() => {
     updatePosition({x: getInitialXPosition(previewOption), y: 0});
-  }, [previewOption.widthDimension])
-
-  useEffect(() => {
-    setActive(false);
-  }, [previewOption.dataSource])
 
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
+  }, [previewOption.widthDimension]);
 
   if (!previewOption) {
     return;
@@ -52,7 +50,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   const disabled = !previewOption.url;
 
   const classNames = [];
-  if (active) {
+  if (!disabled && active) {
     classNames.push('active');
   }
 
@@ -67,7 +65,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   return <>
     <PreviewButtonStyle onClick={() => toggle()} className={classNames.join(' ')} disabled={disabled}/>
 
-    {active &&
+    {active && !disabled &&
       <>
         <input type="range" value={opacity} min="0" max="100" onChange={handleOpacityChange}/>
         <PreviewStyle onMouseUp={e => stop(e)} style={{opacity: opacity / 100}}>
@@ -81,6 +79,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
     }
   </>
 
+  //
+  // Functions
+  //
+
   function start(e) {
     startDragPosition.x = e.clientX;
     startDragPosition.y = e.clientY;
@@ -130,4 +132,14 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
 
     return window.innerWidth / 2 - previewOption.widthDimension / 2;
   }
+
+  function responsiveModeChangesHandler(e) {
+    if (e.data !== 'responsiveUpdate') {
+      return;
+    }
+
+    if (window.responsiveState.breakpoint === '100%') {
+      updatePosition({x: getInitialXPosition(previewOption), y: 0});
+    }
+  }
 }

layouts/scripts/toolbar/responsive.jsx

@@ -22,14 +22,12 @@ function Responsive(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
 
   const initialState = {mode: 'default', breakpoint: '100%'}
-
+  const [mode, setMode] = useState(initialState.mode);
-  const [state, setState] = useState(initialState);
+  const [breakpoint, setBreakpoint] = useState(initialState.breakpoint);
-  const updateState = (update) => setState(Object.assign({}, state, update));
 
   useEffect(() => {
-    // Update the document title using the browser API
+    updateController();
-    updateController(state);
+  }, [mode, breakpoint]);
-  });
 
   const previewFrame = props.rootAttributes.previewFrame;
   return render();
@@ -50,22 +48,26 @@ function Responsive(props = {}) {
 
   function selectMode(mode, breakpoint) {
     if (mode === 'reset') {
-      updateState(initialState);
+      setMode(initialState.mode);
+      setBreakpoint(initialState.breakpoint);
       return;
     }
 
-    updateState({mode, breakpoint})
+    setMode(mode);
+    setBreakpoint(breakpoint);
   }
 
 
-  function isActive(mode) {
+  function isActive(requestedMode) {
-    return mode === state.mode;
+    return mode === requestedMode;
   }
 
   function updateController() {
-    const unit = typeof state.breakpoint === 'string' ? '' : 'px';
+    const unit = typeof breakpoint === 'string' ? '' : 'px';
-    previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
+    previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
     previewFrame.classList.add('has-breakpoint');
+    window.postMessage('responsiveUpdate');
+    window.responsiveState = {mode, breakpoint};
   }
 
 }