motion/node_modules/motion-tools/build/_/motiontools.js

motion - moving development forward

exports["motiontools"] = function(Motion,opts){(function(Motion){(function(){
Motion.file('close.js',function(require){
Motion.staticStyles('Close',{
'$':'#_motiondevtools .ViewClose'},
{
'$':{
position:'absolute',
right:0,
top:0,

display:'flex',
justifyContent:'center',
alignItems:'center',
lineHeight:1,
opacity:0.15,
cursor:'pointer',
transition:'all ease-in 200ms'}});



Motion.viewRoots["Close"] = 'close';
Motion.view('Close',function(view,on,$){
;view.render(function(){
return view.el(
['close',1],
{onClick:view.props.onClick},
'x');});



$["$"] = function(_,_index){
return {fontSize:view.props.fontSize || 13,
width:view.props.size || 50,
height:view.props.size || 50,':hover':{
opacity:0.4}};};});});})();






//# sourceMappingURL=close.js.map

(function(){
Motion.file("debounce.js",function(require){
// fancy debounce
// detects if we are in autosave mode

var sum=function sum(a,b){
return a + b;};

var Delay=300;
var AutoDelay=800;
var Avg=5000;
var Clear=1000 * 10;
var AutoDetectAvgDiff=1000;

Motion.view("Debounce",function(view,on,$){
var showKey=undefined,
timeout=undefined,
lastTime=undefined,
delay=undefined,
curDelay=undefined,
avgDiff=undefined;
var isAutoSaving=false;
var lastFew=[];

// dont update unless we want to
view.pause();

on.props(function(){
// override
if(view.props.force){
view.set("showKey",showKey = Math.random());
view.updateSoft();
return show();}


if(view.props.showKey && view.props.showKey == showKey)return;

view.set("showKey",showKey = view.props.showKey);
view.set("delay",delay = view.props.delay || Delay);
view.set("curDelay",curDelay = curDelay || delay);

// find diff
var now=Date.now();
var diff=lastTime?now - lastTime:Avg; // or init to 5s
view.set("lastTime",lastTime = now);

// update queue
view.set("lastFew",lastFew.unshift(diff),lastFew,true);
if(lastFew.length > 3)view.set("lastFew",lastFew.pop(),lastFew,true);

// if its been a while, clear running avg
if(diff > Clear){
view.set("lastFew",lastFew = []);}

// otherwise update avg
else {
if(lastFew.length == 3){
// find avg of last few
view.set("avgDiff",avgDiff = lastFew.reduce(sum,0) / lastFew.length);
// set autosaving
view.set("isAutoSaving",isAutoSaving = avgDiff < AutoDetectAvgDiff);
view.set("curDelay",curDelay = isAutoSaving?AutoDelay:delay);}}



function show(){
if(view.props.onUpdate)view.props.onUpdate();

view.update();}


// debounce
clearTimeout(timeout);
view.set("timeout",timeout = setTimeout(show,curDelay));
view.updateSoft();});});});})();




//# sourceMappingURL=debounce.js.map

(function(){
Motion.file('devbar.js',function(require){
var avg=function avg(xs){
var sum=0;
if(xs.length === 0)return 0;
for(var i=0;i < xs.length;i++) {
sum += parseInt(xs[i],10);}

return sum / xs.length;};


Motion.staticStyles('DevBar',{
'$bar':'#_motiondevtools bar.DevBar, #_motiondevtools .DevBar.bar, #_motiondevtools .ViewDevBar.bar',
'$pin':'#_motiondevtools pin.DevBar, #_motiondevtools .DevBar.pin, #_motiondevtools .ViewDevBar.pin',
'$label':'#_motiondevtools label.DevBar, #_motiondevtools .DevBar.label, #_motiondevtools .ViewDevBar.label',
'$fps':'#_motiondevtools fps.DevBar, #_motiondevtools .DevBar.fps, #_motiondevtools .ViewDevBar.fps',
'$button':'#_motiondevtools button.DevBar, #_motiondevtools .DevBar.button, #_motiondevtools .ViewDevBar.button'},
{
'$bar':{
flexFlow:'row',
position:'fixed',
bottom:0,
left:0,
right:0,
background:'white',
height:50,
border:[1,'solid','#ccc'],
padding:[10,15],
pointerEvents:'all'},

'$pin':{
position:'absolute',
right:10,
top:3},

'$label':{
flexFlow:'row',
fontSize:15,
marginTop:1,
fontWeight:'bold'},

'$fps':{
flexFlow:'row'},

'$button':{
marginLeft:20}});


Motion.view('DevBar',function(view,on,$){
var fps=0;
var hud=false;
var times=[];
var avgTime=0;

var pinned=localStorage.getItem('devbar') === 'true';

var setAvg=function setAvg(){
console.log('times are',times,'avg is',avg(times));
view.set('avgTime',avgTime = avg(times));
view.set('fps',fps = avgTime === 0?0:1000 / avgTime);
view.updateSoft();};


on.event('hot:finished',function(_ref){
var time=_ref.time;

if(pinned){
view.set('times',times.push(time),times,true);
setAvg();}

view.updateSoft();});


var togglePin=function togglePin(){}
// localStorage.setItem('devbar', pinned)

//on.event('hud:show', () => hud = true)
//on.event('hud:hide', () => hud = false)
;
view.render(function(){
return Motion.iff(hud || pinned) && view.el(
['bar',1],
{if:hud || pinned},
view.el(
['fps',1],
null,
view.el(
['label',1],
null,
'Live: ',
('' + fps).substr(0,6),
' FPS'),

view.el(
['button',1],
{onClick:function(){
view.set('times',times = []);setAvg();view.updateSoft();}},

'reset')));});});});})();








/*<pin onClick={togglePin }>Pin</pin>*/
//# sourceMappingURL=devbar.js.map

(function(){
Motion.file('errors/errors.js',function(require){
var _helpers=require('./helpers');

Motion.view('Errors',function(view,on,$){
var error=null; //{ message: "hello", file: 'where' }
var compileError=null;
var runtimeError=null;
var npmError=null;

// only set error if there is an error, giving compile priority
function setError(){
if(compileError)view.set('error',error = (0,_helpers.niceCompilerError)(compileError));else if(runtimeError)view.set('error',error = (0,_helpers.niceRuntimeError)(runtimeError));else {
view.set('error',error = null);}


_helpers.browser.curError = error;
view.updateSoft();}


function close(){
view.set('error',error = null);
view.set('compileError',compileError = null);
view.set('runtimeError',runtimeError = null);
view.set('npmError',npmError = null);
view.updateSoft();}


_helpers.browser.on('compile:error',function(){
(0,_helpers.log)('compile:error');
view.set('compileError',compileError = _helpers.browser.data.error);
setError();
view.updateSoft();});


_helpers.browser.on('runtime:error',function(){
// if (runtimeError) return // prefer first error
view.set('runtimeError',runtimeError = _helpers.browser.data);
(0,_helpers.log)('runtime:error',runtimeError);
setError();
view.updateSoft();});


_helpers.browser.on('npm:error',function(){
view.set('npmError',npmError = (0,_helpers.niceNpmError)(_helpers.browser.data.error));
(0,_helpers.log)('npm:error',npmError);
view.updateSoft();});


_helpers.browser.on('runtime:success',function(){
(0,_helpers.log)('runtime:success');
view.set('runtimeError',runtimeError = null);
view.set('npmError',npmError = null);
setError();
view.updateSoft();});


_helpers.browser.on('compile:success',function(){
(0,_helpers.log)('compile:success');
view.set('compileError',compileError = null);
view.set('npmError',npmError = null);
setError();
view.updateSoft();});
view.render(function(){
return view.el(['Errors.Message',1],{
error:error,
npmError:npmError,
close:close});});});});})();





//# sourceMappingURL=errors.js.map

(function(){
Motion.file('errors/message.js',function(require){
var _helpers=require('./helpers');

var last=function last(arr){
return arr[arr.length - 1];};

var fileName=function fileName(url){
return url && url.replace(/[\?\)].*/,'');};

var getLine=function getLine(err){
return err && (err.line || err.loc && err.loc.line);};


Motion.staticStyles('Errors.Message',{
'$bar':'#_motiondevtools bar.Errors-Message, #_motiondevtools .Errors-Message.bar, #_motiondevtools .ViewErrors-Message.bar',
'$inner':'#_motiondevtools inner.Errors-Message, #_motiondevtools .Errors-Message.inner, #_motiondevtools .ViewErrors-Message.inner',
'$top':'#_motiondevtools top.Errors-Message, #_motiondevtools .Errors-Message.top, #_motiondevtools .ViewErrors-Message.top',
'$where':'#_motiondevtools where.Errors-Message, #_motiondevtools .Errors-Message.where, #_motiondevtools .ViewErrors-Message.where',
'$line':'#_motiondevtools line.Errors-Message, #_motiondevtools .Errors-Message.line, #_motiondevtools .ViewErrors-Message.line',
'$motion':'#_motiondevtools motion.Errors-Message, #_motiondevtools .Errors-Message.motion, #_motiondevtools .ViewErrors-Message.motion',
'$shortError':'#_motiondevtools shortError.Errors-Message, #_motiondevtools .Errors-Message.shortError, #_motiondevtools .ViewErrors-Message.shortError',
'$cur':'#_motiondevtools cur.Errors-Message, #_motiondevtools .Errors-Message.cur, #_motiondevtools .ViewErrors-Message.cur',
'$errCol':'#_motiondevtools errCol.Errors-Message, #_motiondevtools .Errors-Message.errCol, #_motiondevtools .ViewErrors-Message.errCol',
'$ln':'#_motiondevtools ln.Errors-Message, #_motiondevtools .Errors-Message.ln, #_motiondevtools .ViewErrors-Message.ln',
'$motionline':'#_motiondevtools motionline.Errors-Message, #_motiondevtools .Errors-Message.motionline, #_motiondevtools .ViewErrors-Message.motionline'},
{
'$bar':{
display:'block',

position:'fixed',
left:0,

transition:'all 200ms ease-in',
right:0,
fontFamily:'-apple-system, "San Francisco", Roboto, "Segou UI", "Helvetica Neue", Helvetica, Arial, sans-serif',
fontWeight:300,
color:'#fff',
fontSize:'14px',
padding:2,
pointerEvents:'all',
overflow:'hidden',
zIndex:2147483647,
boxShadow:'0 -6px 12px rgba(0,0,0,0.06)'},

'$inner':{
display:'block',
maxHeight:200,
overflowY:'scroll'},

'$top':{
padding:8,
display:'block'},

'$where':{
display:'inline-block',
pointerEvents:'all',
fontWeight:300,
color:'rgba(255,255,255,0.8)'},

'$line':{
display:'inline-block',
whiteSpace:'pre',
pointerEvents:'all'},

'$motion':{
display:'inline',
fontWeight:700,
color:'#fff'},

'$shortError':{
display:'inline',
color:'rgba(255,255,255,0.7)'},

'$cur':{
background:'#fff'},

'$errCol':{
display:'inline',
borderBottom:'2px solid #f5d64c',
margin:-3,
padding:3,
color:'#fff'},

'$ln':{
padding:[0,20]},

'$motionline':{
whiteSpace:'pre',
pointerEvents:'all',
fontWeight:'motion'}});


Motion.view('Errors.Message',function(view,on,$){
var hasError=false;
var error={};
var npmError=undefined,
fullStack=undefined;
var line=getLine(view.props.error);
var clearDelay=undefined;

on.props(function(){
clearDelay && clearDelay();

view.set('npmError',npmError = view.props.npmError);
view.set('hasError',hasError = !!(view.props.error || view.props.npmError));
view.set('error',error = view.props.error || error); // keep old
view.set('line',line = getLine(error));
view.set('fullStack',fullStack = null);

// show full stack after a delay
if(error){
view.set('clearDelay',clearDelay = on.delay(2500,function(){
if(hasError && error.fullStack){
view.set('fullStack',fullStack = error.fullStack);}

view.updateSoft();}));}


view.updateSoft();});


// update on editor state
_helpers.browser.on('editor:state',function(){
return setTimeout(view.update);});
view.render(function(){
return view.el(
['Debounce',1],
{
// delay more during live typing
delay:(0,_helpers.isLive)()?2000:1000,
force:hasError === false,
showKey:error && error.timestamp || fullStack,
onUpdate:_helpers.showMotionErrorDiv},

view.el(
['bar',1],
null,
view.el(['Close',1],{onClick:view.props.close,size:35}),
Motion.iff(npmError) && view.el(
['inner',1],
{if:npmError},
view.el(
['where',1],
null,
view.el(
['motion',1],
null,
npmError.name)),


' ',
npmError.msg),

view.el(
['inner',2],
null,
view.el(
['top',1],
null,
view.el(
['where',2],
null,
view.el(
['span',1],
null,
'In ',
view.el(
['motion',2],
null,
fileName(error.file))),


view.el(
['line',1],
null,
line?' line':'',
' ',
Motion.iff(line) && view.el(
['motion',3],
{if:line},
line))),



' ',
view.el(
['shortError',1],
null,
(error.niceMessage || error.message || '').trim(),
Motion.iff(error.niceStack) && view.el(
['niceStack',1],
{if:error.niceStack},
error.niceStack[0],
view.el(
['errCol',1],
null,
error.niceStack[1]),

error.niceStack[2])),


Motion.iff(error.help) && view.el(
['help',1],
{if:error.help},
error.help)),


Motion.iff(fullStack) && view.el(
['fullStack',1],
{if:fullStack},
view.el(
['ln',1],
null,
'' + fullStack[0]),

view.el(
['ln',2],
{className:'cur'},
'' + fullStack[1]),

view.el(
['ln',3],
null,
'' + fullStack[2])))));});







var red='#cd423e';

$["bar"] = function(_,_index){
return {background:red,bottom:hasError?0:-100};};


var stack={
color:'rgba(255,255,255,0.85)',
display:'inline',
fontFamily:'Meslo, Menlo, Monaco, monospace',
padding:[0,5]};


$["niceStack"] = function(_,_index){
return stack;};


$["fullStack"] = function(_,_index){
return [stack,{
maxHeight:fullStack?600:0,
padding:fullStack?[10,0]:0,
transition:'maxHeight ease-in 300ms',
color:'rgba(0,0,0,0.85)',
background:'rgba(255,255,255,0.9)',
display:'block',
whiteSpace:'pre',
fontSize:14,
borderRadius:3,
margin:2}];};});});})();





//# sourceMappingURL=message.js.map

var _extends=require('babel-runtime/helpers/extends').default;

var _toArray=require('babel-runtime/helpers/to-array').default;

var _interopRequireDefault=require('babel-runtime/helpers/interop-require-default').default;

(function(){
Motion.file('inspector.js',function(require){
var _libInspecting=require('./lib/inspecting');

var _libInspecting2=_interopRequireDefault(_libInspecting);

var _keys=require('./keys');

var _lodash=require('lodash');

var removeHead=function removeHead(_ref){
var _ref2=_toArray(_ref);

var l=_ref2[0];

var ls=_ref2.slice(1);

return ls;};

var isAlt=function isAlt(cb){
return function(e){
return e.keyIdentifier === 'Alt' && cb();};};


var isEsc=function isEsc(cb){
return function(e){
return e.keyCode === 27 && cb();};};



var setLocal=function setLocal(k,v){
return localStorage.setItem('__motion.state.' + k,JSON.stringify(v));};

var getLocal=function getLocal(k,d){
return JSON.parse(localStorage.getItem('__motion.state.' + k)) || d;};


var round=Math.round;

var highlighter=undefined;

function positionHighlight(node){
var bounds=node.getBoundingClientRect();
var winW=window.innerWidth;
var winH=window.innerHeight;
var width=round(bounds.right - bounds.left);
var height=round(bounds.bottom - bounds.top);
var opacity=1;

if(width >= winW && height >= winH)opacity = 0.2;

highlighter.setAttribute('style','\n    top: ' + round(bounds.top) + 'px;\n    left: ' + round(bounds.left) + 'px;\n    width: ' + width + 'px;\n    height: ' + height + 'px;\n    opacity: ' + opacity + ';\n  ');}


function hideHighlight(){
highlighter.setAttribute('style','');}


function findPath(node){
if(!node || !node.getAttribute)return null;
var motionid=node.__motionID;
if(!motionid)return findPath(node.parentNode);
positionHighlight(node);
return motionid;}


function tempActive(views){
return views.filter(function(v){
return !v.temp;}).
length > 0;}


function pathActive(views,path){
return views.filter(function(v){
return v.path == path;}).
length > 0;}


function removeTemp(views){
return views.filter(function(v){
return !v.temp;}).
map(function(v){
return _extends({},v,{highlight:false});});}



function addTemp(views,path){
return [{path:path,highlight:false,temp:true}].concat(views);}


function setClosing(views,path){
return views.map(function(v){
if(v.path == path)v.closing = true;
return v;});}



function highlightPath(views,path){
return views.map(function(v){
if(v.path == path)v.highlight = true;
return v;});}



function toggleView(views,path){
if(pathActive(views,path)){
return views.map(function(v){
if(v.path == path)v.temp = true;
return v;});}else 

{
var added={temp:false,highlight:false,closing:false,path:path};
return [].concat([added],views);}}



function internal(){
return window._Motion;}


Motion.staticStyles('Inspector',{
'$':'#_motiondevtools .ViewInspector'},
{
'$':{
position:'fixed',
top:0,right:0,
padding:2}});


Motion.view('Inspector',function(view,on,$){
var clickOff=undefined,
hoverOff=undefined,
lastTarget=undefined;
var hudActive=false;
var views=[];

on.mount(function(){
view.set('hoverOff',hoverOff = on.mousemove(window,(0,_lodash.throttle)(mouseMove,40)));
if(highlighter)return;
highlighter = document.createElement('div');
highlighter.className = "_motionHighlighter";
document.body.appendChild(highlighter);
view.updateSoft();});


on.event('hud:show',showInspect);
on.event('hud:hide',hideInspect);

// key events
(0,_keys.onKeyDown)('esc',closeLast);

function inspect(target){
internal().isInspecting = true;
var path=findPath(target);
if(path === null)return;
view.set('views',views = removeTemp(views));
view.set('views',views = pathActive(views,path)?highlightPath(views,path):addTemp(views,path));
view.updateSoft();}


function mouseMove(_ref3){
var target=_ref3.target;

var inspector=ReactDOM.findDOMNode(view);

if(lastTarget != target){
if(inspector.contains(target))return;

view.set('lastTarget',lastTarget = target);
_libInspecting2.default.set(target);
if(hudActive)inspect(lastTarget);}

view.updateSoft();}


function closeLast(){
if(!views.length)return;
view.set('views',views = removeHead(views));
view.updateSoft();}


function close(path,e){
if(e)e.stopPropagation();
view.set('views',views = setClosing(views,path));

on.delay(200,function(){
view.set('views',views = views.filter(function(v){
return path != v.path;}));

view.updateSoft();});

view.updateSoft();}


function glue(_ref4){
var target=_ref4.target;

var inspector=ReactDOM.findDOMNode(view);
if(inspector.contains(target))return;

view.set('views',views = toggleView(removeTemp(views),findPath(target)));
return false;
view.updateSoft();}


function showInspect(){
inspect(lastTarget);
view.set('hudActive',hudActive = true);
view.set('clickOff',clickOff = on.click(window,glue));
view.updateSoft();}


function hideInspect(){
internal().isInspecting = false;
view.set('hudActive',hudActive = false);
hideHighlight();
clickOff && clickOff();
view.set('views',views = removeTemp(views));
view.updateSoft();}


;view.render(function(){
return Motion.range(views).map(function(_,_index){
return view.el(['Inspector.View',1,_,_index],_extends({
repeat:views,
key:_.path},
_,{
onClose:function(e){
return close(_.path,e);}}));});});});});})();







//# sourceMappingURL=inspector.js.map

var _extends=require('babel-runtime/helpers/extends').default;

(function(){
Motion.file('inspector/label.js',function(require){
var _lodash=require('lodash');

Motion.staticStyles('Label',{
'$input':'#_motiondevtools input.Label, #_motiondevtools .Label.input, #_motiondevtools .ViewLabel.input',
'$editing':'#_motiondevtools editing.Label, #_motiondevtools .Label.editing, #_motiondevtools .ViewLabel.editing'},
{
'$input':{
color:'#333',
padding:1,
width:140,
outline:'none',
border:'none'},

'$editing':{
opacity:'1 !important'}});


Motion.view('Label',function(view,on,$){
var val=view.prop('val',undefined),
editable=view.prop('editable',undefined),
onSet=view.prop('onSet',undefined);
on.props(function(){
val = view.getProp('val');
editable = view.getProp('editable');
onSet = view.getProp('onSet');});

var valueStyle=view.prop('valueStyle',{});
on.props(function(){
valueStyle = view.getProp('valueStyle');});

var editingStyle=view.prop('editingStyle',{});
on.props(function(){
editingStyle = view.getProp('editingStyle');});

var nonEditingStyle=view.prop('nonEditingStyle',{});

on.props(function(){
nonEditingStyle = view.getProp('nonEditingStyle');});

var input=null;
var newVal=undefined;
var editing=false;

on.props(function(){
console.log('val',val,'newval',newVal);
if(!editing && newVal !== val){
view.set('newVal',newVal = val);
view.update({immediate:true});}

view.updateSoft();});


var onFocus=function onFocus(e){
if(!editable)return;
if((0,_lodash.isBoolean)(val))return onSet(!val);
view.set('editing',editing = true);
e.stopPropagation();
view.updateSoft();};


var onBlur=function onBlur(e){
view.set('editing',editing = false);
view.updateSoft();};


var onChange=function onChange(e){
view.set('newVal',newVal = e.target.value);
view.update({immediate:true});

if((0,_lodash.isNumber)(val)){
// dont let them change from num to str
if(newVal === '' || isNaN(newVal)){
view.updateSoft();
return;}}



// todo: debate
if(newVal === 'false')view.set('newVal',newVal = false);
if(newVal === 'true')view.set('newVal',newVal = true);
onSet(newVal);
view.updateSoft();};


var tabIndex=function tabIndex(editable){
return editable?{}:{tabIndex:5000,disabled:true};};
view.render(function(){
return view.el(['input',1],_extends({
value:(0,_lodash.isString)(newVal)?newVal:newVal.toString(),
className:{editing:editing},
size:Math.max(4,val && val.length || 0),
spellCheck:false,
onMouseDown:onFocus,
onFocus:onFocus,
onEnter:onBlur},
tabIndex(editable),{onFocus:onFocus,onBlur:onBlur,onChange:onChange}));});


$["input"] = function(_,_index){
return [{color:'#333',padding:1,width:140,outline:'none',border:'none', // nice cursor on boolean toggle
cursor:(0,_lodash.isBoolean)(val)?'pointer':'auto',
boxShadow:editing?'1px 1px 2px rgba(0,0,0,0.4)':undefined},
valueStyle,editing?editingStyle:nonEditingStyle];};});});})();




//# sourceMappingURL=label.js.map

var _Object$keys=require('babel-runtime/core-js/object/keys').default;

var _interopRequireDefault=require('babel-runtime/helpers/interop-require-default').default;

(function(){
Motion.file('inspector/leaf.js',function(require){
var _md5OMatic=require('md5-o-matic');

var _md5OMatic2=_interopRequireDefault(_md5OMatic);

var _libGetType=require('../lib/getType');

var _libGetType2=_interopRequireDefault(_libGetType);

var _ellipsize=require('ellipsize');

var _ellipsize2=_interopRequireDefault(_ellipsize);

var _lodash=require('lodash');

var PATH_PREFIX='.root.';
var noop=function noop(){};
var contains=function contains(string,substring){
return string.indexOf(substring) !== -1;};

var isPrimitive=function isPrimitive(v){
return (0,_libGetType2.default)(v) !== 'Object' && (0,_libGetType2.default)(v) !== 'Array';};

var getLeafKey=function getLeafKey(key,val){
return isPrimitive(val)?key + ':' + (0,_md5OMatic2.default)(String(key)):key + '[' + (0,_libGetType2.default)(val) + ']';};


var fnParams=function fnParams(fn){
return fn.toString().replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s))/mg,'').match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].split(/,/);};


var valueStyles={
boolean:{color:'#32a3cd',fontWeight:700},
number:{color:'#b92222',marginTop:2,fontWeight:500},
string:{color:'#698c17'},
'function':{marginLeft:10,marginTop:2,color:'#962eba'}};


Motion.staticStyles('Leaf',{
'$leaf':'#_motiondevtools .ViewLeaf',
'$colon':'#_motiondevtools colon.Leaf, #_motiondevtools .Leaf.colon, #_motiondevtools .ViewLeaf.colon',
'$name':'#_motiondevtools name.Leaf, #_motiondevtools .Leaf.name, #_motiondevtools .ViewLeaf.name',
'$children':'#_motiondevtools children.Leaf, #_motiondevtools .Leaf.children, #_motiondevtools .ViewLeaf.children',
'$type':'#_motiondevtools type.Leaf, #_motiondevtools .Leaf.type, #_motiondevtools .ViewLeaf.type'},
{
'$leaf':{
padding:[1,0],
fontSize:13},

'$colon':{
color:'rgba(0,0,0,0.2)'},

'$name':{
color:"#ff2f2f",
fontWeight:400,
margin:['auto',0]},

'$children':{
paddingLeft:10},

'$type':{
margin:[1,0,0,8],
opacity:0.7,
flexFlow:'row'}});


Motion.viewRoots["Leaf"] = 'leaf';
Motion.view('Leaf',function(view,on,$){
view.pause();

var root=view.prop('root',undefined),
isExpanded=view.prop('isExpanded',undefined),
data=view.prop('data',undefined),
prefix=view.prop('prefix',undefined),
query=view.prop('query',undefined),
label=view.prop('label',undefined),
id=view.prop('id',undefined),
editable=view.prop('editable',undefined);
on.props(function(){
root = view.getProp('root');
isExpanded = view.getProp('isExpanded');
data = view.getProp('data');
prefix = view.getProp('prefix');
query = view.getProp('query');
label = view.getProp('label');
id = view.getProp('id');
editable = view.getProp('editable');});

var getOriginal=view.prop('getOriginal',noop);
on.props(function(){
getOriginal = view.getProp('getOriginal');});

var onSet=view.prop('onSet',noop);
on.props(function(){
onSet = view.getProp('onSet');});

var onClick=view.prop('onClick',noop);

// state
on.props(function(){
onClick = view.getProp('onClick');});

var rootPath=undefined,
path=undefined,
value=undefined,
key=undefined,
original=undefined,
expanded=undefined;
var dataKeys=[];
var _query='';

// helpers
var isInitiallyExpanded=function isInitiallyExpanded(){
return root || !_query && isExpanded(path,data) || !contains(path,_query);};


// lifecycle
on.props(function(){
view.set('rootPath',rootPath = prefix + '.' + label);
view.set('key',key = label.toString());
view.set('path',path = rootPath.substr(PATH_PREFIX.length));
view.set('value',value = data); // originally was stream of ||s, but 0 was turning into false

// multiline strings
if(typeof value === 'string' && value.indexOf('\n') > -1){
view.set('value',value = value.split('\n'));}


if(value)view.set('dataKeys',dataKeys = _Object$keys(value).sort());

if(value === undefined)view.set('value',value = data);
if(value === undefined)view.set('value',value = {});
view.set('_query',_query = query || '');

if(view.props.root)view.set('expanded',expanded = true);else if(_query)view.set('expanded',expanded = !contains(label,_query));

if(query && !_query)view.set('expanded',expanded = isInitiallyExpanded());

view.update();
view.updateSoft();});


var toggle=function toggle(e){
if(!root)view.set('expanded',expanded = !expanded);
view.update();
onClick(value);
e.stopPropagation();
view.updateSoft();};


var getLabel=function getLabel(type,val,sets,editable){
return view.el(['Label',1],{val:val,editable:editable,onSet:onSet});};


var is={},
type=undefined;

on.change(function(){
/* don't need to analyze types for root */
if(view.props.root)return;
view.set('is',is['function'] = (0,_lodash.isFunction)(value),is,true);
view.set('is',is.array = (0,_lodash.isArray)(value),is,true);
view.set('is',is.object = (0,_lodash.isObject)(value),is,true);
view.set('is',is.boolean = (0,_lodash.isBoolean)(value),is,true);
view.set('is',is.string = (0,_lodash.isString)(value),is,true);
view.set('is',is.number = (0,_lodash.isNumber)(value),is,true);
view.set('is',is.nested = is['function'] || is.object || is.array,is,true);
view.set('is',is.literal = !is.nested,is,true);
view.set('type',type = typeof value);
view.updateSoft();});
view.render(function(){
return view.el(
['leaf',1],
{className:rootPath},
Motion.iff(!view.props.root) && view.el(
['label',1],
{if:!view.props.root,htmlFor:id,onClick:toggle},
view.el(
['key',1],
null,
view.el(
['name',1],
null,
key)),


view.el(
['colon',1],
null,
':'),

view.el(
['value',1],
null,
Motion.iff(is['function']) && view.el(
['fn',1],
{style:valueStyles['function'],if:is['function']},
view.el(
['i',1],
null,
'fn (',
fnParams(value).join(', '),
')')),


Motion.iff(is.array) && view.el(
['array',1],
{if:is.array},
view.el(
['type',1],
null,
'Array[',
value.length,
']')),


Motion.iff(is.object) && view.el(
['obj',1],
{if:is.object},
view.el(
['type',2],
null,
'{}   ' + dataKeys.length + ' keys')),


Motion.iff(is.string) && view.el(
['str',1],
{if:is.string},
view.el(['Label',2],{val:value,
valueStyle:valueStyles.string,
editable:true,
onSet:function(value){
return onSet(key,value);}})),


Motion.iff(is.number || is.boolean) && view.el(
['simple',1],
{if:is.number || is.boolean},
view.el(['Label',3],{val:value.toString(),
valueStyle:valueStyles.number,
editable:true,
onSet:function(value){
return onSet(key,value);}})),


Motion.iff(is.nested) && view.el(
['nested',1],
{if:is.nested,className:type.toLowerCase()},
getLabel('val',value,key,editable)))),



view.el(
['children',1],
null,
Motion.iff(expanded && !isPrimitive(value)) && Motion.range(dataKeys).map(function(_,_index){
return view.el(
['child',1,_,_index],
{
if:expanded && !isPrimitive(value),
repeat:dataKeys},
Motion.iff(_.indexOf('__') == -1) && view.el(['Leaf',1,_,_index],{
if:_.indexOf('__') == -1,
key:getLeafKey(_,value[_]),
onSet:onSet,
data:value[_],
editable:editable,
label:_,
prefix:rootPath,
onClick:onClick,
id:id,
query:_query,
getOriginal:original?null:getOriginal,
isExpanded:isExpanded}));})));});







var row={
flexFlow:'row'};


$["label"] = function(_,_index){
return [row,{
position:'relative',
color:'rgba(0,0,0,0.8)',
opacity:1,
alignItems:'baseline'}];};



$["key"] = function(_,_index){
return [row,{
color:'rgba(0,0,0,0.9)',
margin:[0],
fontWeight:'bold'}];};



$["expand"] = function(_,_index){
return [row];};


$["value"] = function(_,_index){
return [row,{
position:'relative',
margin:[0,4,0]}];};});});})();





//# sourceMappingURL=leaf.js.map

(function(){
Motion.file('inspector/section.js',function(require){
Motion.staticStyles('Inspector.Section',{
'$':'#_motiondevtools .ViewInspector-Section',
'$body':'#_motiondevtools body.Inspector-Section, #_motiondevtools .Inspector-Section.body, #_motiondevtools .ViewInspector-Section.body',
'$inactive':'#_motiondevtools inactive.Inspector-Section, #_motiondevtools .Inspector-Section.inactive, #_motiondevtools .ViewInspector-Section.inactive'},
{
'$':{
padding:[0,0,5]},

'$body':{
padding:[0,12]},

'$inactive':{
display:'none'}});


Motion.view('Inspector.Section',function(view,on,$){
var open=true;view.render(function(){
return view.el(
['Inspector.Title',1],
{onToggle:function(val){
view.set('open',open = val);
view.updateSoft();}},

view.props.title);});

view.render(function(){
return view.el(
['body',1],
null,
view.props.children);});});});})();





//# sourceMappingURL=section.js.map

var _extends=require('babel-runtime/helpers/extends').default;

var _interopRequireDefault=require('babel-runtime/helpers/interop-require-default').default;

(function(){
Motion.file('inspector/statetests.js',function(require){
var _mouseEventOffset=require('mouse-event-offset');

var _mouseEventOffset2=_interopRequireDefault(_mouseEventOffset);

Motion.view('StateTests',function(view,on,$){
;view.render(function(){
return view.el(['Tests.Name',1],null);});
view.render(function(){
return view.el(['Tests.Boolean',1],null);});
view.render(function(){
return view.el(['Tests.Counter',1],null);});
view.render(function(){
return view.el(['Tests.Props',1],null);});
view.render(function(){
return view.el(['Tests.Circles',1],null);});});


Motion.view('Tests.Boolean',function(view,on,$){
var dead=false;view.render(function(){
return view.el(
['h1',1],
null,
'is tupac dead? ',
dead.toString());});

view.render(function(){
return view.el(
['button',1],
{onClick:function(){
view.set('dead',dead = !dead);
view.updateSoft();}},

'toggle');});});



Motion.staticStyles('Tests.Props',{
'$':'#_motiondevtools .ViewTests-Props'},
{
'$':{marginTop:20}});

Motion.view('Tests.Props',function(view,on,$){
var name='a string';view.render(function(){
return view.el(['input',1],{
'__motionValue':name,
'__motionOnChange':function(__motionval__){
view.set('name',name = __motionval__);
view.updateSoft();}});});


view.render(function(){
return view.el(['Test.PropsChild',1],{name:name});});});


Motion.view('Test.PropsChild',function(view,on,$){
var name=view.prop('name',undefined);
on.props(function(){
name = view.getProp('name');});

var count=0;view.render(function(){
return view.el(
['h1',1],
null,
'my name is ',
name);});

view.render(function(){
return view.el(
['h4',1],
null,
'counter to test state ',
count);});

view.render(function(){
return view.el(
['button',1],
{onClick:function(){
view.set('count',count++,count,true);
view.updateSoft();}},

'up');});});



Motion.view('Tests.Counter',function(view,on,$){
var count=5;view.render(function(){
return view.el(
['h1',1],
null,
'count is ',
count);});

view.render(function(){
return view.el(
['button',1],
{onClick:function(){
view.set('count',count++,count,true);
view.updateSoft();}},

'up');});

view.render(function(){
return view.el(
['button',2],
{onClick:function(){
view.set('count',count--,count,true);
view.updateSoft();}},

'down');});});



Motion.view('Tests.Deep',function(view,on,$){
var person={name:'nick',tools:['js','juggling balls','coffee']};view.render(function(){
return view.el(
['h1',1],
null,
'deep');});

view.render(function(){
return view.el(
['h2',1],
null,
JSON.stringify(person));});});



Motion.view('Tests.Name',function(view,on,$){
var first='nick';
var last='cammarata';view.render(function(){
return view.el(
['h2',1],
null,
'name is ',
first,
' ',
last);});

view.render(function(){
return view.el(['input',1],{
'__motionValue':first,
'__motionOnChange':function(__motionval__){
view.set('first',first = __motionval__);
view.updateSoft();}});});


view.render(function(){
return view.el(['input',2],{
'__motionValue':last,
'__motionOnChange':function(__motionval__){
view.set('last',last = __motionval__);
view.updateSoft();}});});


view.render(function(){
return view.el(
['button',1],
{onClick:function(){
view.set('first',first = 'nate');
view.set('last',last = 'wienert');
view.updateSoft();}},

'nateify');});});



Motion.staticStyles('Tests.Circles',{
'$circles':'#_motiondevtools circles.Tests-Circles, #_motiondevtools .Tests-Circles.circles, #_motiondevtools .ViewTests-Circles.circles'},
{
'$circles':{position:'relative',background:'#eee',height:400,width:400}});

Motion.view('Tests.Circles',function(view,on,$){
var coords=[[200,200]];

function addCircle(click){
view.set('coords',coords.push((0,_mouseEventOffset2.default)(click)),coords,true);
view.updateSoft();}


;view.render(function(){
return view.el(
['circles',1],
{onClick:addCircle},
Motion.range(coords).map(function(_,_index){
return view.el(['Tests.Circle',1,_,_index],{
repeat:coords,
key:'' + _[0] + _[1],
left:_[0],
top:_[1]});}));});});





Motion.view('Tests.Circle',function(view,on,$){
var c=function c(){
return Math.round(Math.random() * 255);};

var base={
background:[c(),c(),c()],
position:'absolute',
top:view.props.top,
left:view.props.left,
width:118,height:29,
borderRadius:27};

var style=function style(scale){
return _extends({},base,{transform:{scale:scale}});};
view.render(function(){
return view.el(['circle',1],{style:style(1)});});});});})();




//# sourceMappingURL=statetests.js.map

(function(){
Motion.file('inspector/title.js',function(require){
Motion.staticStyles('Inspector.Title',{
'$title':'#_motiondevtools title.Inspector-Title, #_motiondevtools .Inspector-Title.title, #_motiondevtools .ViewInspector-Title.title',
'$closed':'#_motiondevtools closed.Inspector-Title, #_motiondevtools .Inspector-Title.closed, #_motiondevtools .ViewInspector-Title.closed',
'$inner':'#_motiondevtools inner.Inspector-Title, #_motiondevtools .Inspector-Title.inner, #_motiondevtools .ViewInspector-Title.inner'},
{
'$title':{
fontWeight:300,
fontSize:11,
borderBottom:'1px solid #f4f4f4',
height:10,
margin:[0,5,4],
color:'rgba(0,0,0,0.4)',
flexFlow:'row'},

'$closed':{
marginTop:1},

'$inner':{
padding:[4,10],
background:'#fff'}});


Motion.view('Inspector.Title',function(view,on,$){
var open=true;

function toggle(){
if(!view.props.onToggle)return;
view.set('open',open = !open);
view.props.onToggle(open);
view.updateSoft();}


;view.render(function(){
return view.el(
['title',1],
{onClick:toggle},
view.el(
['inner',1],
null,
view.props.children));});




$["closed"] = function(_,_index){
return {
transform:{scale:0.8}};};


$["inner"] = function(_,_index){
return {margin:[-2,'auto']};};});});})();





//# sourceMappingURL=title.js.map

var _extends=require('babel-runtime/helpers/extends').default;

var _interopRequireDefault=require('babel-runtime/helpers/interop-require-default').default;

(function(){
Motion.file('inspector/tree.js',function(require){
var _libLens=require('../lib/lens');

var _libLens2=_interopRequireDefault(_libLens);

Motion.staticStyles('Tree',{
'$':'#_motiondevtools .ViewTree'},
{
'$':{
pointerEvents:'auto',
marginLeft:-10}});


Motion.viewRoots["Tree"] = 'Leaf';
Motion.view('Tree',function(view,on,$){
var data=view.prop('data',undefined),
id=view.prop('id',undefined),
editable=view.prop('editable',undefined),
isExpanded=view.prop('isExpanded',undefined),
interactiveLabel=view.prop('interactiveLabel',undefined);
on.props(function(){
data = view.getProp('data');
id = view.getProp('id');
editable = view.getProp('editable');
isExpanded = view.getProp('isExpanded');
interactiveLabel = view.getProp('interactiveLabel');});

var onEdit=view.prop('onEdit',function(){
view.updateSoft();}),

onSet=view.prop('onSet',function(){
view.updateSoft();}),

validateQuery=view.prop('validateQuery',function(){
view.updateSoft();});

on.props(function(){
onEdit = view.getProp('onEdit');
onSet = view.getProp('onSet');
validateQuery = view.getProp('validateQuery');});

var query='';

var search=function search(q){
return query === '' || validateQuery(query)?view.set('query',query = q):false;};

var getOriginal=function getOriginal(path){
return (0,_libLens2.default)(data,path);};
view.render(function(){
return view.el(['Leaf',1],_extends({data:data,onEdit:onEdit,id:id,getOriginal:getOriginal,
query:query,editable:editable,isExpanded:isExpanded},{
onSet:onSet,
label:'root',
root:true,
validateQuery:function(query){
return query.length >= 2;}}));});});});})();






//# sourceMappingURL=tree.js.map

var _Object$keys=require('babel-runtime/core-js/object/keys').default;

(function(){
Motion.file('inspector/view.js',function(require){
var _lodash=require('lodash');

function pathToName(path){
var p=path.split(',');
return p[p.length - 1].split('-')[0];}


function filterProps(props){
var leaveOut=['if','repeat','style','yield','__motion'];
return _lodash.omit.apply(null,[props].concat(leaveOut));}


Motion.staticStyles('Inspector.View',{
'$view':'#_motiondevtools view.Inspector-View, #_motiondevtools .Inspector-View.view, #_motiondevtools .ViewInspector-View.view',
'$top':'#_motiondevtools top.Inspector-View, #_motiondevtools .Inspector-View.top, #_motiondevtools .ViewInspector-View.top',
'$active':'#_motiondevtools active.Inspector-View, #_motiondevtools .Inspector-View.active, #_motiondevtools .ViewInspector-View.active',
'$highlight':'#_motiondevtools highlight.Inspector-View, #_motiondevtools .Inspector-View.highlight, #_motiondevtools .ViewInspector-View.highlight',
'$Close':'#_motiondevtools .ViewInspector-View .ViewClose',
'$name':'#_motiondevtools name.Inspector-View, #_motiondevtools .Inspector-View.name, #_motiondevtools .ViewInspector-View.name',
'$edit':'#_motiondevtools edit.Inspector-View, #_motiondevtools .Inspector-View.edit, #_motiondevtools .ViewInspector-View.edit',
'$expanded':'#_motiondevtools expanded.Inspector-View, #_motiondevtools .Inspector-View.expanded, #_motiondevtools .ViewInspector-View.expanded',
'$input':'#_motiondevtools input.Inspector-View, #_motiondevtools .Inspector-View.input, #_motiondevtools .ViewInspector-View.input',
'$title':'#_motiondevtools title.Inspector-View, #_motiondevtools .Inspector-View.title, #_motiondevtools .ViewInspector-View.title',
'$section':'#_motiondevtools section.Inspector-View, #_motiondevtools .Inspector-View.section, #_motiondevtools .ViewInspector-View.section'},
{
'$view':{
position:'relative',
pointerEvents:'auto',
margin:6,
marginBottom:0,
padding:[0,0,1],
minWidth:220,
minHeight:34,
fontSize:12,
userSelect:'none',
cursor:'default',
background:'#fff',
boxShadow:'0px 2px 10px rgba(0,0,0,0.15)',
border:'1px solid #ccc',
borderRadius:4,
color:'#333',
transition:'all ease-in 60ms',
opacity:0},

'$top':{
flexFlow:'row',
paddingBottom:10},

'$active':{
opacity:1},

'$highlight':{
border:'2px solid #afb4e2'},

'$Close':{
top:-5,
right:-5,
fontSize:13},

'$name':{
fontWeight:400,
color:'rgba(0,0,0,0.8)',
padding:[8,8,0],

fontSize:14},

'$edit':{
padding:[8,8,0],
fontSize:14,

marginLeft:4,
fontWeight:400,
color:'rgba(24, 101, 227, 0.8)'},

'$expanded':{},
'$input':{
borderRadius:100,
border:'1px solid #ccc',
width:'100%',
padding:[2,12],
color:'#333',
fontSize:14},

'$title':{
display:'none',
color:'#333',
fontWeight:200,
fontSize:12,
margin:[3,0]},

'$section':{
background:[0,0,0,0.05]}});


Motion.view('Inspector.View',function(view,on,$){
var highlight=view.prop('highlight',undefined),
closing=view.prop('closing',undefined),
path=view.prop('path',undefined),
onClose=view.prop('onClose',undefined);

on.props(function(){
highlight = view.getProp('highlight');
closing = view.getProp('closing');
path = view.getProp('path');
onClose = view.getProp('onClose');});

var inspect=window.Motion.inspect;
var name=undefined;
var active=false;
var state={};
var props=null;
var writeBack=null;

on.delay(60,function(){
view.set('active',active = true);
view.updateSoft();});


on.unmount(function(){
delete window._Motion.inspector[path];});


on.props(function(){
if(closing === true)view.set('active',active = false);
if(!path)return;

view.set('name',name = pathToName(path));

// if not inspecting, inspect
if(!_Motion.inspector[path]){
inspect(path,function(_props,_state,_wb){
view.set('props',props = filterProps(_props || {}));
view.set('state',state = _state || {});
view.set('writeBack',writeBack = _wb);
view.update();
view.updateSoft();});}


view.updateSoft();});


var hasKeys=function hasKeys(o){
return o && _Object$keys(o).length > 0;};

var edit=function edit(){
return _DT.messageEditor({type:'focus:element',view:name});};
view.render(function(){
return view.el(
['view',1],
{className:{active:active,highlight:highlight}},
view.el(['Close',1],{onClick:onClose,fontSize:20,size:35}),
view.el(
['top',1],
null,
view.el(
['name',1],
null,
name),

Motion.iff(false) && view.el(
['edit',1],
{if:false,onClick:edit},
'edit')),


Motion.iff(hasKeys(props)) && view.el(
['Inspector.Section',1],
{title:'Props',if:hasKeys(props),className:'props'},
view.el(['Tree',1],{editable:false,data:props})),

Motion.iff(hasKeys(state)) && view.el(
['Inspector.Section',2],
{title:'State',if:hasKeys(state)},
view.el(['Tree',2],{
editable:true,
onSet:function(key,value){
console.log('got onSet key',key,'value',value);
writeBack && writeBack(key,value);},

data:state})));});





'788fafa9';

$["view"] = function(_,_index){
return {transform:{
x:20}};};




'd38b4a40';
'45bafd14';

$["active"] = function(_,_index){
return {transform:{
x:0}};};




'2b6eec62';
'73bd5771';
'70140dec';

$["name"] = function(_,_index){
return {margin:[0,0,-6]};};


'8fc3ee24';

$["edit"] = function(_,_index){
return {margin:[0,0,-6]};};


$["expanded"] = function(_,_index){
return {
transform:{y:0}};};



'7e27a56e';
'20639b6a';
'72d32211';});});})();



//# sourceMappingURL=view.js.map

var _interopRequireDefault=require('babel-runtime/helpers/interop-require-default').default;

(function(){
Motion.file('main.js',function(require){
var _keycode=require('keycode');

var _keycode2=_interopRequireDefault(_keycode);

window.___keycode = _keycode2.default;

var keysCorrect=function keysCorrect(_ref){
var altKey=_ref.altKey;
var metaKey=_ref.metaKey;
return altKey && !metaKey;};


var offAlt=null;
function checkInspect(e){
if(keysCorrect(e)){
// wait a little so were not toooo eager
offAlt = on.delay(180,function(){
if(keysCorrect(e)){
on.event('hud:show');}});}else 


{
offAlt && offAlt();
on.event('hud:hide');}}



on.keydown(window,checkInspect);
on.keyup(window,checkInspect);

Motion.staticStyles('Main',{
'$':'#_motiondevtools .ViewMain'},
{
'$':{
position:'fixed',

top:0,left:0,
right:0,bottom:0,
zIndex:2147483647}});


Motion.view('Main',function(view,on,$){
var internal=window.__isDevingDevTools;
var showInspector=true;view.render(function(){
return view.el(['link',1],{rel:'stylesheet',property:'stylesheet',href:'/__/tools/static/tools.css'});});
view.render(function(){
return Motion.iff(!internal) && view.el(['link',2],{if:!internal,rel:'stylesheet',property:'stylesheet',href:'/__/tools/styles.css'});});
view.render(function(){
return view.el(['Errors',1],null);});
view.render(function(){
return view.el(['Installer',1],null);});
view.render(function(){
return view.el(['DevBar',1],null);});
view.render(function(){
return Motion.iff(showInspector) && view.el(['Menu',1],{if:showInspector});});
view.render(function(){
return Motion.iff(showInspector) && view.el(['Inspector',1],{if:showInspector});});
view.render(function(){
return Motion.iff(internal) && view.el(['StateTests',1],{if:internal});});


$["$"] = function(_,_index){
return {pointerEvents:internal?'auto':'none'};};});});})();




//# sourceMappingURL=main.js.map

var _interopRequireDefault=require('babel-runtime/helpers/interop-require-default').default;

(function(){
Motion.file('menu.js',function(require){
var _keys=require('./keys');

var _libInspecting=require('./lib/inspecting');

var _libInspecting2=_interopRequireDefault(_libInspecting);

var Tools=_DT;
var toEditor=Tools.messageEditor;

Motion.staticStyles('Menu',{
'$menu':'#_motiondevtools .ViewMenu',
'$active':'#_motiondevtools active.Menu, #_motiondevtools .Menu.active, #_motiondevtools .ViewMenu.active',
'$item':'#_motiondevtools item.Menu, #_motiondevtools .Menu.item, #_motiondevtools .ViewMenu.item',
'$first':'#_motiondevtools first.Menu, #_motiondevtools .Menu.first, #_motiondevtools .ViewMenu.first',
'$last':'#_motiondevtools last.Menu, #_motiondevtools .Menu.last, #_motiondevtools .ViewMenu.last',
'$hl':'#_motiondevtools hl.Menu, #_motiondevtools .Menu.hl, #_motiondevtools .ViewMenu.hl',
'$main':'#_motiondevtools main.Menu, #_motiondevtools .Menu.main, #_motiondevtools .ViewMenu.main'},
{
'$menu':{
border:'1px solid #ddd',
boxShadow:'0 0 10px rgba(0,0,0,0.2)',
position:'absolute',

background:'#fff',
zIndex:2147483647,
transition:'opacity ease-in 30ms, transform ease-in 30ms',
opacity:0,

pointerEvents:'none',
padding:0},

'$active':{
pointerEvents:'auto',
opacity:1},

'$item':{
minWidth:120,
cursor:'pointer',
flexFlow:'row'},

'$first':{
overflow:'hidden'},

'$last':{
overflow:'hidden'},

'$hl':{
padding:[4,8]},


'$main':{
flexGrow:1}});


Motion.viewRoots["Menu"] = 'menu';
Motion.view('Menu',function(view,on,$){
var active=false;
var top=undefined,
left=undefined;
var elements=[];

// prevent select and show custom cursor when ready for context
var focused=undefined;
on.keydown(function(){
if(_keys.keys.alt && _keys.keys.command){
document.body.classList.add('__motionfocus');
view.set('focused',focused = true);}

view.updateSoft();});

on.keyup(function(){
if(focused){
document.body.classList.remove('__motionfocus');
view.set('focused',focused = false);}

view.updateSoft();});


on.click(window,function(e){
if(active){
e.stopPropagation();
e.preventDefault();
view.set('active',active = false);
view.updateSoft();
return;}


var mode=_keys.keys.alt && _keys.keys.command;
if(!mode)return;

e.preventDefault();

var clientX=e.clientX;
var clientY=e.clientY;

view.set('left',left = clientX);
view.set('top',top = clientY);
view.set('active',active = true);
view.set('elements',elements = _libInspecting2.default.all());
view.updateSoft();});


function focusElement(el){
return function(){
toEditor({type:'focus:element',key:el.key,view:el.view});};}



function focusStyle(el){
return function(){
toEditor({type:'focus:style',el:el.el,view:el.view});};}



;view.render(function(){
return view.el(
['menu',1],
{className:{internal:true,active:active}},
Motion.range(elements.filter(function(i){
return !!i.view;})).
map(function(_,_index){
return view.el(
['item',1,_,_index],
{
repeat:elements.filter(function(i){
return !!i.view;}),

className:{
first:_index == 0,
last:_index == elements.length - 1}},


view.el(
['main',1,_,_index],
{className:'hl',onClick:focusElement(_)},
_.view),

view.el(
['sub',1,_,_index],
{className:'hl',onClick:focusStyle(_)},
'$'));}));});






var rad=5;

$["menu"] = function(_,_index){
return {
borderRadius:rad,top:top,
left:left,transform:{y:-10}};};


$["active"] = function(_,_index){
return {transform:{y:0}};};



$["first"] = function(_,_index){
return {
borderTopLeftRadius:rad,
borderTopRightRadius:rad};};


$["last"] = function(_,_index){
return {
borderBottomLeftRadius:rad,
borderBottomRightRadius:rad};};


$["hl"] = function(_,_index){
return {hover:{
background:[0,0,0,0.1]}};};});});})();






//# sourceMappingURL=menu.js.map

(function(){
Motion.file('modal.js',function(require){
Motion.staticStyles('MotionModal',{
'$':'#_motiondevtools .ViewMotionModal',
'$title':'#_motiondevtools title.MotionModal, #_motiondevtools .MotionModal.title, #_motiondevtools .ViewMotionModal.title',
'$message':'#_motiondevtools message.MotionModal, #_motiondevtools .MotionModal.message, #_motiondevtools .ViewMotionModal.message'},
{
'$':{
position:'fixed',

right:0,
minWidth:80,
padding:[7,5],
margin:20,
background:'#fff',
boxShadow:'0 5px 26px rgba(0,0,0,0.13)',
border:'1px solid #dadada',
fontSize:14,
transition:'all ease-in 200ms',
textAlign:'center',
borderRadius:6,
pointerEvents:'auto'},

'$title':{
fontWeight:500,
fontSize:15,
margin:[0,20]},

'$message':{
fontFamily:"-apple-system, 'Helvetica Nueue', Helvetica, Arial, sans-serif"}});


Motion.view('MotionModal',function(view,on,$){
var open=view.prop('open',undefined),
title=view.prop('title',undefined),
children=view.prop('children',undefined);

on.props(function(){
open = view.getProp('open');
title = view.getProp('title');
children = view.getProp('children');});

var lastTitle=undefined;

on.props(function(){
view.set('lastTitle',lastTitle = title || lastTitle);
view.updateSoft();});
view.render(function(){
return view.el(['Close',1],{size:25});});
view.render(function(){
return Motion.iff(lastTitle) && view.el(
['title',1],
{if:lastTitle},
lastTitle);});

view.render(function(){
return Motion.iff(children) && view.el(
['message',1],
{if:children},
children);});



$["$"] = function(_,_index){
return {top:open?0:-140};};


$["title"] = function(_,_index){
return {
color:view.props.titleColor || '#222'};};});});})();




//# sourceMappingURL=modal.js.map

(function(){
Motion.file('npm/installer.js',function(require){
var tools=window._DT;

Motion.view('Installer',function(view,on,$){
var version='';
var versions=[];
var name='';
var error='';
var state=0;

tools.on('package:install',function(){
view.set('state',state = 1);
view.set('name',name = tools.data.name);
view.updateSoft();});


tools.on('package:installed',function(){
view.set('state',state = 2);
setTimeout(function(){
view.set('state',state = 0);
view.updateSoft();},
2000);
view.updateSoft();});


tools.on('package:error',function(){
view.set('state',state = 3);
view.set('name',name = tools.data.name);
view.set('error',error = tools.data.error)