6.279fbdbc.chunk.js.download

(this["webpackJsonp@builder.io/app"]=this["webpackJsonp@builder.io/app"]||[]).push([[6],{4740:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"FILE_NAME",function(){return FILE_NAME}),__webpack_require__.d(__webpack_exports__,"getProgramForText",function(){return getProgramForText}),__webpack_require__.d(__webpack_exports__,"SetStateExtension",function(){return SetStateExtension}),__webpack_require__.d(__webpack_exports__,"LiquidBubble",function(){return LiquidBubble}),__webpack_require__.d(__webpack_exports__,"EventListener",function(){return EventListener}),__webpack_require__.d(__webpack_exports__,"VariableStatement",function(){return VariableStatement}),__webpack_require__.d(__webpack_exports__,"CallExpression",function(){return CallExpression}),__webpack_require__.d(__webpack_exports__,"Identifier",function(){return Identifier}),__webpack_require__.d(__webpack_exports__,"Bubble",function(){return Bubble}),__webpack_require__.d(__webpack_exports__,"VariableDeclaration",function(){return VariableDeclaration}),__webpack_require__.d(__webpack_exports__,"Block",function(){return Block}),__webpack_require__.d(__webpack_exports__,"ExpressionStatement",function(){return ExpressionStatement}),__webpack_require__.d(__webpack_exports__,"ReturnStatement",function(){return ReturnStatement}),__webpack_require__.d(__webpack_exports__,"FunctionDeclaration",function(){return FunctionDeclaration}),__webpack_require__.d(__webpack_exports__,"ArrowFunction",function(){return ArrowFunction}),__webpack_require__.d(__webpack_exports__,"IfStatement",function(){return IfStatement}),__webpack_require__.d(__webpack_exports__,"SourceFile",function(){return SourceFile}),__webpack_require__.d(__webpack_exports__,"BinaryExpression",function(){return BinaryExpression}),__webpack_require__.d(__webpack_exports__,"TrueKeyword",function(){return TrueKeyword}),__webpack_require__.d(__webpack_exports__,"FalseKeyword",function(){return FalseKeyword}),__webpack_require__.d(__webpack_exports__,"PrefixUnaryExpression",function(){return PrefixUnaryExpression}),__webpack_require__.d(__webpack_exports__,"PropertyAccessExpression",function(){return PropertyAccessExpression}),__webpack_require__.d(__webpack_exports__,"Hoverable",function(){return Hoverable}),__webpack_require__.d(__webpack_exports__,"Node",function(){return Node}),__webpack_require__.d(__webpack_exports__,"createSourceFile",function(){return createSourceFile}),__webpack_require__.d(__webpack_exports__,"DraggingNodeOverlay",function(){return DraggingNodeOverlay}),__webpack_require__.d(__webpack_exports__,"Toolbox",function(){return Toolbox}),__webpack_require__.d(__webpack_exports__,"VisualProgramming",function(){return VisualProgramming});var _emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),react__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__),typescript__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(3554),typescript__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(typescript__WEBPACK_IMPORTED_MODULE_2__),mobx_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(90),react_monaco_editor__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2625),react_monaco_editor__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react_monaco_editor__WEBPACK_IMPORTED_MODULE_4__),dedent__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(277),dedent__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(dedent__WEBPACK_IMPORTED_MODULE_5__),_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(132),_hooks_use_event_listener__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(2121),_models_ls_sync__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(38),react_portal__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(2746),react_transition_group__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(399),react_transition_group__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react_transition_group__WEBPACK_IMPORTED_MODULE_10__),_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(7),react_contenteditable__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(5849),react_contenteditable__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(react_contenteditable__WEBPACK_IMPORTED_MODULE_12__),lodash__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(6),lodash__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_13__),traverse__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(195),traverse__WEBPACK_IMPORTED_MODULE_14___default=__webpack_require__.n(traverse__WEBPACK_IMPORTED_MODULE_14__),_emotion_styled__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__(1939),_material_ui_core__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__(131),_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_16__),_material_ui_core__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__(113),_material_ui_core__WEBPACK_IMPORTED_MODULE_17___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_17__),_material_ui_core__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__(47),_material_ui_core__WEBPACK_IMPORTED_MODULE_18___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_18__),_material_ui_core__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__(35),_material_ui_core__WEBPACK_IMPORTED_MODULE_19___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_19__),_material_ui_core__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__(652),_material_ui_core__WEBPACK_IMPORTED_MODULE_20___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_20__),_material_ui_core__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__(1960),_material_ui_core__WEBPACK_IMPORTED_MODULE_21___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_21__),_material_ui_core__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__(1961),_material_ui_core__WEBPACK_IMPORTED_MODULE_22___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_22__),_functions_human_case_function__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__(73),_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__(1),_material_ui_icons__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__(3529),_material_ui_icons__WEBPACK_IMPORTED_MODULE_25___default=__webpack_require__.n(_material_ui_icons__WEBPACK_IMPORTED_MODULE_25__),_material_ui_icons__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__(2659),_material_ui_icons__WEBPACK_IMPORTED_MODULE_26___default=__webpack_require__.n(_material_ui_icons__WEBPACK_IMPORTED_MODULE_26__),_material_ui_icons__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__(665),_material_ui_icons__WEBPACK_IMPORTED_MODULE_27___default=__webpack_require__.n(_material_ui_icons__WEBPACK_IMPORTED_MODULE_27__);monaco.languages.typescript.typescriptDefaults.addExtraLib(`
  declare var state = any;
  declare var context = any;
`);const stateProperties=["active","text"],FILE_NAME="code.tsx";function getProgramForText(text){const dummyFilePath=FILE_NAME,textAst=typescript__WEBPACK_IMPORTED_MODULE_2__.createSourceFile(dummyFilePath,text,typescript__WEBPACK_IMPORTED_MODULE_2__.ScriptTarget.Latest),options={},host={fileExists:filePath=>filePath===dummyFilePath,directoryExists:dirPath=>dirPath==="/",getCurrentDirectory:()=>"/",getDirectories:()=>[],getCanonicalFileName:fileName=>fileName,getNewLine:()=>`
`,getDefaultLibFileName:()=>"",getSourceFile:filePath=>filePath===dummyFilePath?textAst:void 0,readFile:filePath=>filePath===dummyFilePath?text:void 0,useCaseSensitiveFileNames:()=>!0,writeFile:()=>{}},languageHost={getScriptFileNames:()=>[FILE_NAME],getScriptVersion:fileName=>"3",getCurrentDirectory:()=>"/",getCompilationSettings:()=>options,getDefaultLibFileName:options2=>typescript__WEBPACK_IMPORTED_MODULE_2__.getDefaultLibFilePath(options2),fileExists:filePath=>filePath===dummyFilePath,readFile:filePath=>filePath===dummyFilePath?text:void 0,getScriptSnapshot:filePath=>filePath===dummyFilePath?typescript__WEBPACK_IMPORTED_MODULE_2__.ScriptSnapshot.fromString(text):void 0},program=typescript__WEBPACK_IMPORTED_MODULE_2__.createProgram({host,options,rootNames:[dummyFilePath]}),checker=program.getTypeChecker(),languageService=typescript__WEBPACK_IMPORTED_MODULE_2__.createLanguageService(languageHost);return{checker,languageService,program}}function SetStateExtension(props){const{node,options}=props,propertyName=node.left.name,value=node.right,fadedBlue="rgb(112, 141, 154)",state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.f)(()=>({getPropertyNames(){return options.programState.program.getTypeChecker().getTypeAtLocation(node.left.expression).getApparentProperties().map(item=>item.name)},getCompletionItems(){return options.programState.languageService.getCompletionsAtPosition(FILE_NAME,node.left.name.getStart(),{})}}));return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default.a,Object.assign({title:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:["Set a state property."," ",Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("a",Object.assign({css:{color:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primaryLight}},{children:"Learn about state"}))]})},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("span",{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Bubble,Object.assign({color:fadedBlue,open:"right",options},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_icons__WEBPACK_IMPORTED_MODULE_25___default.a,{css:{fontSize:16,marginRight:7,marginLeft:2,opacity:.6}}),"Set state"]}))})})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default.a,Object.assign({title:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:["Choose or create a name for your state property."," ",Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("a",Object.assign({css:{color:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primaryLight}},{children:"Learn more"}))]})},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("span",{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Identifier,{node:propertyName,options})})})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({color:fadedBlue,open:"both",options},{children:"To"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:value,options})]}))}const SPACER_TOKEN="__SPACER__",createSpacer=()=>typescript__WEBPACK_IMPORTED_MODULE_2__.createIdentifier(SPACER_TOKEN),normalizeExpression=expression=>expression.replace(/\s+/g,"");function LiquidBubble(props){const{node,options}=props,state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.f)(()=>({hovering:!1,showCode:!1})),liquidEditorRef=Object(react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);return Object(react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{state.showCode&&liquidEditorRef.current&&setTimeout(()=>{var _a;(_a=liquidEditorRef.current)===null||_a===void 0||_a.focus()},500)},[state.showCode]),Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>{const liquidExpression=node.arguments[0],simpleExpression=Object(_functions_human_case_function__WEBPACK_IMPORTED_MODULE_23__.a)(liquidExpression.text.split("|")[0]);return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("span",Object.assign({onMouseEnter:()=>state.hovering=!0,onMouseLeave:()=>state.hovering=!1},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Bubble,Object.assign({color:"rgb(158,189,89)",htmlMode:!1,options},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_icons__WEBPACK_IMPORTED_MODULE_26___default.a,{css:{fontSize:14,marginLeft:2,marginRight:7,opacity:.7}}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,Object.assign({css:{marginRight:5}},{children:[simpleExpression,Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Row,Object.assign({css:{maxWidth:state.showCode?500:0,overflow:"hidden",transition:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.transitions.for("max-width")}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(react_contenteditable__WEBPACK_IMPORTED_MODULE_12___default.a,{innerRef:liquidEditorRef,tagName:"pre",style:{height:bubbleHeight,lineHeight:bubbleHeight-1+"px"},css:{outline:"none",cursor:"text",marginLeft:10,padding:"0 10px",borderLeft:"1px solid rgba(0, 0, 0, 0.1)",borderRight:"1px solid rgba(0, 0, 0, 0.1)",backgroundColor:"rgba(0, 0, 0, 0.2)"},html:liquidExpression.text,onChange:e=>{node.arguments[0]=typescript__WEBPACK_IMPORTED_MODULE_2__.createStringLiteral(stripHtml(e.target.value)),options.programState.updateCode()}})}))]})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{width:state.hovering||state.showCode?20:0,opacity:state.hovering||state.showCode?1:0,transition:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.transitions.for("width","opacity")}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default.a,Object.assign({title:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:["Toggle liquid code. ",Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("a",Object.assign({css:{color:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primary}},{children:"Learn more"}))," "]})},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_17___default.a,Object.assign({onMouseDown:e=>{e.stopPropagation(),state.showCode=!state.showCode},css:{padding:2}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_icons__WEBPACK_IMPORTED_MODULE_27___default.a,{css:{fontSize:16}})}))}))}))]}))}))})}function EventListener(props){const state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.f)(()=>({})),{options,node}=props,eventNode=node.arguments[0],callback=node.arguments[1];return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Stack,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Row,{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Bubble,Object.assign({color:"rgb(121, 165, 245)",options},{children:["On page",Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_18___default.a,Object.assign({SelectProps:{style:{paddingTop:0,paddingBottom:0,paddingLeft:5}},InputProps:{disableUnderline:!0,style:{fontSize:"inherit"}},css:{marginLeft:5,fontSize:"inherit"},select:!0,value:eventNode.text,onChange:e=>{node.arguments[0]=typescript__WEBPACK_IMPORTED_MODULE_2__.createStringLiteral(stripHtml(e.target.value)),options.programState.updateCode()}},{children:["scroll","click","mousedown","keypress"].map(item=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_19___default.a,Object.assign({value:item},{children:Object(_functions_human_case_function__WEBPACK_IMPORTED_MODULE_23__.a)(item).toLowerCase()}),item))}))]}))}),callback.body&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:callback.body,options})]}))}const languageExtensions=[(node,options)=>{if(typescript__WEBPACK_IMPORTED_MODULE_2__.isCallExpression(node)&&normalizeExpression(node.getText().split("(")[0])==="context.shopify.liquid.get"&&node.arguments.length&&typescript__WEBPACK_IMPORTED_MODULE_2__.isStringLiteral(node.arguments[0]))return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(LiquidBubble,{node,options})},(node,options)=>{if(typescript__WEBPACK_IMPORTED_MODULE_2__.isPropertyAccessExpression(node)&&normalizeExpression(node.getText())==="document.body.scrollTop")return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({color:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primary,options},{children:"Page scroll position"}))},(node,options)=>{if(typescript__WEBPACK_IMPORTED_MODULE_2__.isCallExpression(node)&&normalizeExpression(node.getText().split("(")[0])==="document.addEventListener")return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(EventListener,{node,options})},(node,options)=>{if(typescript__WEBPACK_IMPORTED_MODULE_2__.isIdentifier(node)&&node.text===SPACER_TOKEN)return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{className:"spacer",css:{flexGrow:1,alignSelf:"stretch",minWidth:50,minHeight:50,borderRadius:6,backgroundColor:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primaryWithOpacity(.5),boreder:`1px solid ${_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primaryWithOpacity(.9)}`}})},(node,options)=>{if(typescript__WEBPACK_IMPORTED_MODULE_2__.isBinaryExpression(node)&&node.operatorToken.getText()==="="&&typescript__WEBPACK_IMPORTED_MODULE_2__.isPropertyAccessExpression(node.left)&&typescript__WEBPACK_IMPORTED_MODULE_2__.isIdentifier(node.left.expression)&&node.left.expression.text==="state"&&typescript__WEBPACK_IMPORTED_MODULE_2__.isIdentifier(node.left.name))return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(SetStateExtension,{node,options})}],replace=(arr,newArr)=>{arr.length=0,arr.push(...newArr)},Row=_emotion_styled__WEBPACK_IMPORTED_MODULE_15__.default.div({display:"flex",alignItems:"center",flexWrap:"wrap"}),Stack=_emotion_styled__WEBPACK_IMPORTED_MODULE_15__.default.div({display:"flex",flexDirection:"column",alignItems:"flex-start"}),printer=typescript__WEBPACK_IMPORTED_MODULE_2__.createPrinter({newLine:typescript__WEBPACK_IMPORTED_MODULE_2__.NewLineKind.LineFeed}),findKey=(obj,value)=>{for(const key in obj)if(obj[key]===value)return key},replaceNode=(oldNode,newNode)=>{const key=findKey(oldNode.parent,oldNode);key?oldNode.parent[key]=newNode:console.error("Could not find key to replace node",{oldNode,newNode})},stripHtml=html=>{const div=document.createElement("div");return div.innerHTML=html,div.innerText},localStorageCodeKey="builder.experiments.visualProgramming.code";function VariableStatement(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:node.declarationList.declarations.map((item,index)=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:item,options},index))}))}function CallExpression(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({color:"rgb(144, 87, 218)",options,open:"right"},{children:"Do action"})),node.expression&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.expression,options}),node.arguments&&node.arguments.map((arg,index)=>{const isFirst=index===0;return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(react__WEBPACK_IMPORTED_MODULE_1___default.a.Fragment,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({humanCase:!1,options,open:"both",css:{zIndex:0}},{children:isFirst?"With":","})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:arg,options})]},index)})]}))}function Identifier(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>{const isActive=!!options.programState.selection.find(item=>typescript__WEBPACK_IMPORTED_MODULE_2__.isIdentifier(item)&&item.text===node.text);return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,onFocus:()=>replace(options.programState.selection,[node]),onBlur:()=>{options.programState.selection.includes(node)&&Object(lodash__WEBPACK_IMPORTED_MODULE_13__.pull)(options.programState.selection,node)},open:props.open,active:isActive,color:props.color||_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primary,onChange:text=>{const file=node.getSourceFile(),newNode=typescript__WEBPACK_IMPORTED_MODULE_2__.createIdentifier(text);traverse__WEBPACK_IMPORTED_MODULE_14___default()(file).forEach(child=>{child&&typescript__WEBPACK_IMPORTED_MODULE_2__.isIdentifier(child)&&!(typescript__WEBPACK_IMPORTED_MODULE_2__.isPropertyAssignment(child.parent)||typescript__WEBPACK_IMPORTED_MODULE_2__.isPropertyAccessExpression(child.parent))&&child.text===node.text&&replaceNode(child,newNode)}),options.programState.updateCode()}},{children:node.text}))})}const bubbleHeight=30;function Bubble(props){const size=bubbleHeight,spacerStyles={backgroundColor:"#222",width:size+3,height:size+4,borderRadius:100},openLeft=props.open==="left"||props.open==="both",openRight=props.open==="right"||props.open==="both",gap=3,htmlMode=props.htmlMode===!0||props.onChange;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:Object.assign(Object.assign({opacity:props.active?1:.8,borderRadius:50,height:size,paddingLeft:10+(openLeft?size/2:0),paddingRight:10+(openRight?size/2:0),display:"flex",alignItems:"center",cursor:"pointer",position:"relative",zIndex:openLeft?1:2,backgroundColor:props.color||"#555",marginTop:5,marginBottom:5,marginLeft:gap,marginRight:gap},openRight&&{marginRight:-size+gap}),openLeft&&{marginLeft:-size+gap}),className:props.className},{children:[openLeft&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{css:Object.assign(Object.assign({},spacerStyles),{marginRight:5,marginLeft:-size})}),htmlMode?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(react_contenteditable__WEBPACK_IMPORTED_MODULE_12___default.a,{css:{outline:"none",cursor:props.onChange?"text":"pointer"},onFocus:props.onFocus,onBlur:props.onBlur,disabled:!props.onChange,html:props.humanCase===!1?props.children:Object(_functions_human_case_function__WEBPACK_IMPORTED_MODULE_23__.a)(props.children),onChange:e=>{var _a;(_a=props.onChange)===null||_a===void 0||_a.call(props,Object(lodash__WEBPACK_IMPORTED_MODULE_13__.camelCase)(stripHtml(e.target.value))),props.options.programState.updateCode()}}):props.children,openRight&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{css:Object.assign(Object.assign({},spacerStyles),{marginLeft:5,marginRight:-size})})]})))}function VariableDeclaration(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,open:"right"},{children:"Set"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.name,options}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,open:"both"},{children:"To"})),node.initializer&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.initializer,options})]}))}function Block(props){const{node,options}=props,tabSpace=40;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Stack,Object.assign({css:{paddingLeft:tabSpace,position:"relative",width:"100%",paddingBottom:10}},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{css:{backgroundColor:"#333",top:0,bottom:10,width:2,borderRadius:4,position:"absolute",left:tabSpace/1.5}}),node.statements.map((item,index)=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:item,options},index))]})))}function ExpressionStatement(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:node.expression&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.expression,options})}))}function ReturnStatement(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({color:"rgb(134, 107, 218)",options,open:"right"},{children:"Respond"})),node.expression&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.expression,options})]}))}function FunctionDeclaration(props){const{node,options}=props,color="rgb(226, 158, 56)";return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Stack,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({color,options,open:"right"},{children:"Create action named"})),node.name&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.name,options}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({humanCase:!1,color,options,open:"left"},{children:"that does"}))]}),node.body&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.body,options})]}))}function ArrowFunction(props){const{node,options}=props,color="rgb(226, 158, 56)";return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("span",{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Row,{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({color,options},{children:"Do"}))}),node.body&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.body,options})]}))}function IfStatement(props){const{node,options}=props,thenHasIf=node.elseStatement&&typescript__WEBPACK_IMPORTED_MODULE_2__.isIfStatement(node.elseStatement);return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,open:"right"},{children:"If"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.expression,options})]}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.thenStatement,options}),thenHasIf?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,open:"right"},{children:"Otherwise"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.elseStatement,options})]}):node.elseStatement&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options},{children:"Otherwise"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.elseStatement,options})]})]}))}function SourceFile(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Stack,{children:node.statements.map((item,index)=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:item,options},index))}))}function BinaryExpression(props){const{node,options}=props,tokenText=node.operatorToken.getText(),isEquals=tokenText==="=",useText={"===":"is","==":"is","&&":"and","||":"or","!==":"is not","!=":"is not"}[tokenText]||tokenText;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[isEquals&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,open:"right"},{children:"Set"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.left,options}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({css:{zIndex:0},options,open:"both"},{children:useText})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:node.right,options})]}))}const booleanBubbleStyles={height:bubbleHeight,display:"flex",alignItems:"center",borderRadius:bubbleHeight,backgroundColor:"#555",position:"relative",marginLeft:3,zIndex:2};function TrueKeyword(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:booleanBubbleStyles},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default.a,Object.assign({title:"True"},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_20___default.a,{color:"primary",checked:!0,onChange:()=>{replaceNode(node,typescript__WEBPACK_IMPORTED_MODULE_2__.createFalse()),options.programState.updateCode()}})}))})))}function FalseKeyword(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:booleanBubbleStyles},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default.a,Object.assign({title:"False"},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_20___default.a,{color:"primary",onChange:()=>{replaceNode(node,typescript__WEBPACK_IMPORTED_MODULE_2__.createTrue()),options.programState.updateCode()}})}))})))}function PrefixUnaryExpression(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({open:"right",options},{children:"Not"})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{options,node:node.operand})]}))}function PropertyAccessExpression(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Row,{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{options,node:node.expression}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Identifier,{color:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primaryLight,options,node:node.name,open:"left"})]}))}function Hoverable(props){const{options,node}=props,state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.f)(()=>({onMouseEnter(){options.programState.hoveringNode=node,options.programState.draggingNode},onMouseLeave(){options.programState.hoveringNode===node&&(options.programState.hoveringNode=null)}})),renderComments=!1,comments=renderComments&&typescript__WEBPACK_IMPORTED_MODULE_2__.getLeadingCommentRanges(options.programState.ast.getFullText(),node.getFullStart());return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:[renderComments&&comments&&comments.map((item,index)=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Stack,Object.assign({css:{whiteSpace:"pre",margin:10,color:"var(--off-background-7)"},className:"comment"},{children:options.programState.ast.getFullText().slice(item.pos,item.end)}),index)),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("span",Object.assign({onMouseEnter:state.onMouseEnter,onMouseLeave:state.onMouseLeave},{children:props.children}))]})}const hoverable=(node,options,children)=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Hoverable,Object.assign({node,options},{children:typeof children=="function"?children():children}));function Node(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>hoverable(node,options,()=>{for(const extension of languageExtensions){const result=extension(node,options);if(result)return result}return typescript__WEBPACK_IMPORTED_MODULE_2__.isVariableStatement(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(VariableStatement,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isVariableDeclaration(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(VariableDeclaration,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isSourceFile(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(SourceFile,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isIdentifier(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Identifier,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isPropertyAccessExpression(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(PropertyAccessExpression,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isBinaryExpression(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(BinaryExpression,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isFunctionDeclaration(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(FunctionDeclaration,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isArrowFunction(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(ArrowFunction,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isPrefixUnaryExpression(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(PrefixUnaryExpression,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isBlock(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Block,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isExpressionStatement(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(ExpressionStatement,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isCallExpression(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(CallExpression,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isReturnStatement(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(ReturnStatement,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isIfStatement(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(IfStatement,{node,options}):node.kind===106?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(TrueKeyword,{node,options}):node.kind===91?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(FalseKeyword,{node,options}):typescript__WEBPACK_IMPORTED_MODULE_2__.isStringLiteral(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,color:"rgb(189, 63, 241)",onChange:text=>{node.text=text}},{children:node.text})):typescript__WEBPACK_IMPORTED_MODULE_2__.isNumericLiteral(node)?Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options,color:"rgb(189, 63, 241)",onChange:text=>{node.text=text}},{children:node.text})):Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Bubble,Object.assign({options},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_16___default.a,Object.assign({title:"Custom code - click to view"},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_17___default.a,Object.assign({css:{padding:5},onClick:()=>_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_24__.appState.globalState.openDialog(Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{padding:20,backgroundColor:"#333",minWidth:300,width:"90vw",maxWidth:1e3,height:"90vh",maxHeight:800,position:"relative"}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(react_monaco_editor__WEBPACK_IMPORTED_MODULE_4___default.a,{language:"typescript",theme:"vs-dark",defaultValue:printer.printNode(typescript__WEBPACK_IMPORTED_MODULE_2__.EmitHint.Unspecified,node,node.getSourceFile()),options:{fontSize:11,renderLineHighlight:"none",minimap:{enabled:!1},scrollbar:{horizontal:"hidden",vertical:"hidden"},automaticLayout:!0,scrollBeyondLastLine:!1},onChange:val=>{replaceNode(node,parseCode(val)),options.programState.updateCode()}})})))},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_icons__WEBPACK_IMPORTED_MODULE_27___default.a,{css:{fontSize:20,color:"var(--text-regular)",margin:"0 -10px"}})}))}))}))}))}const createSourceFile=code=>typescript__WEBPACK_IMPORTED_MODULE_2__.createSourceFile(FILE_NAME,code,typescript__WEBPACK_IMPORTED_MODULE_2__.ScriptTarget.Latest,!0,typescript__WEBPACK_IMPORTED_MODULE_2__.ScriptKind.TSX),parseCode=code=>createSourceFile(code).statements[0],defaultTemplates=[["state.active = true","state"],["state.text = 'Hello!'","state"],["context.shopify.liquid.get('product.price | currency')","shopify"],["context.shopify.liquid.get('product.name')","shopify"],["context.shopify.liquid.get('product.description')","shopify"],[dedent__WEBPACK_IMPORTED_MODULE_5__`document.addEventListener('scroll', event => {
      if (document.body.scrollTop > 10) {
        state.scrolledDown = true
      }
    })`,"logic"],[dedent__WEBPACK_IMPORTED_MODULE_5__`if (state.active) {
      state.active = false;
    }`,"logic"],[dedent__WEBPACK_IMPORTED_MODULE_5__`function toggleState() {
      state.active = !state.active;
    }`,"logic"]].map(item=>{const[code,...tags]=item;return{tags,ast:parseCode(code)}});function Draggable(props){const{node,options}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Stack,Object.assign({onMouseDown:e=>{e.preventDefault(),options.programState.draggingNode=node},css:{opacity:.85,marginBottom:5,cursor:"pointer","&:hover":{opacity:1},"& *":{pointerEvents:"none"}}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{options,node})})))}function DraggingNodeOverlay(props){const{options}=props;return Object(_hooks_use_event_listener__WEBPACK_IMPORTED_MODULE_7__.a)(document,"keydown",e=>{e.which===27&&options.programState.draggingNode&&(options.programState.draggingNode=null)}),Object(_hooks_use_event_listener__WEBPACK_IMPORTED_MODULE_7__.a)(document,"mouseup",()=>{if(options.programState.draggingNode){if(options.programState.hoveringCodeEditor){const node=options.programState.draggingNode;traverse__WEBPACK_IMPORTED_MODULE_14___default()(node).forEach(function(child){child&&typescript__WEBPACK_IMPORTED_MODULE_2__.isStringLiteral(child)&&this.update(typescript__WEBPACK_IMPORTED_MODULE_2__.createStringLiteral(child.text)),child&&typescript__WEBPACK_IMPORTED_MODULE_2__.isNumericLiteral(child)&&this.update(typescript__WEBPACK_IMPORTED_MODULE_2__.createNumericLiteral(child.text))}),options.programState.code+=`
`+printer.printNode(typescript__WEBPACK_IMPORTED_MODULE_2__.EmitHint.Unspecified,node,options.programState.ast)}options.programState.draggingNode=null}}),Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>{const node=options.programState.draggingNode;return node&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{position:"fixed",top:_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_24__.appState.document.mouseY+5,left:_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_24__.appState.document.mouseX+5,zIndex:10,pointerEvents:"none",paddingRight:5,paddingLeft:2,backdropFilter:"blur(20px)",borderRadius:50,background:"rgba(0, 0, 0, 0.1)"}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node,options})}))})}function Toolbox(props){const{options}=props,templates=defaultTemplates,TAB_KEY="builder.experiments.visualCodingTab",state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.f)(()=>{var _a;return{tab:(_a=Object(_models_ls_sync__WEBPACK_IMPORTED_MODULE_8__.b)(TAB_KEY))!==null&&_a!==void 0?_a:0}});Object(_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_6__.a)(()=>state.tab,tab=>Object(_models_ls_sync__WEBPACK_IMPORTED_MODULE_8__.c)(TAB_KEY,tab));const tabStyle={minWidth:0,minHeight:0,maxWidth:"none",height:39,color:"var(--text-caption)"};return Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(Stack,Object.assign({css:{padding:20},className:props.className},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)(_material_ui_core__WEBPACK_IMPORTED_MODULE_21___default.a,Object.assign({css:{marginBottom:20,marginTop:-10},value:state.tab,onChange:(e,value)=>state.tab=value,indicatorColor:"primary",textColor:"primary",variant:"fullWidth"},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_22___default.a,{css:tabStyle,label:"All"}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_22___default.a,{css:tabStyle,label:"State"}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_22___default.a,{css:tabStyle,label:"Shopify"}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_22___default.a,{css:tabStyle,label:"Logic"}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_22___default.a,{css:tabStyle,label:"Learn"})]})),templates.filter(item=>{switch(state.tab){case 0:return!0;case 1:return item.tags.includes("state");case 2:return item.tags.includes("shopify");case 3:return item.tags.includes("logic");case 4:return!1}}).map((item,index)=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Draggable,{options,node:item.ast},index))]})))}function VisualProgramming(props){const state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.f)(()=>{const initialCode=Object(_models_ls_sync__WEBPACK_IMPORTED_MODULE_8__.b)(localStorageCodeKey)||"";return{programState:{hoveringCodeEditor:!1,draggingNode:null,program:null,hoveringNode:null,get code(){return state.code},set code(code){state.code=code},updateCode(){state.updateCode()},get ast(){return state.ast},get selection(){return state.selection},set selection(arr){replace(state.selection,arr)}},selection:[],code:initialCode,ast:createSourceFile(initialCode),codeToAst(code=this.code){return createSourceFile(code)},astToCode(ast=this.ast){return ast?printer.printFile(ast):""},updateAst(){this.ast=this.codeToAst(this.code)},updateCode(){this.code=this.astToCode(this.ast)}}});return Object(_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_6__.a)(()=>state.code,code=>Object(_models_ls_sync__WEBPACK_IMPORTED_MODULE_8__.c)(localStorageCodeKey,code)),Object(_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_6__.a)(()=>state.code,()=>{state.updateAst();const tsInfo=getProgramForText(state.code);state.programState.program=tsInfo.program,state.programState.languageService=tsInfo.languageService}),Object(mobx_react__WEBPACK_IMPORTED_MODULE_3__.g)(()=>{const options={programState:state.programState};return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{height:"100vh",overflow:"hidden",display:"flex",backgroundColor:"#222"},className:props.className},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(react_portal__WEBPACK_IMPORTED_MODULE_9__.a,{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(react_transition_group__WEBPACK_IMPORTED_MODULE_10__.Transition,Object.assign({timeout:200,unmountOnExit:!0,appear:!0,in:!0,mountOnEnter:!0},{children:transitionState=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{className:"sidebar-darkening-overlay",css:{backgroundBlendMode:"multiply",position:"fixed",backgroundColor:"rgba(0, 0, 0, 0.45)",pointerEvents:"none",opacity:transitionState==="entered"?1:0,transition:"opacity 0.3s var(--smooth)",top:0,width:300,left:0,bottom:0}})}))}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{width:"50%",height:"100%"}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{height:"100%",overflow:"auto",fontSize:14}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Toolbox,{options})}))})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{width:"50%",display:"flex",flexDirection:"column",alignItems:"stretch"}},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{height:"50%",fontSize:14,padding:20,overflow:"auto"},onMouseEnter:()=>{state.programState.hoveringCodeEditor=!0},onMouseLeave:()=>{state.programState.hoveringCodeEditor=!1}},{children:[state.ast&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(Node,{node:state.ast,options}),state.programState.draggingNode&&!state.programState.hoveringNode&&state.programState.hoveringCodeEditor&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{css:{backgroundColor:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_11__.a.colors.primary,height:2,borderRadius:10,width:"100%"}}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(DraggingNodeOverlay,{options})]})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{height:"50%",".monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input, .monaco-editor .margin":{backgroundColor:"transparent !important"}}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(react_monaco_editor__WEBPACK_IMPORTED_MODULE_4___default.a,{language:"typescript",theme:"vs-dark",value:state.code,options:{fontSize:11,renderLineHighlight:"none",minimap:{enabled:!1},scrollbar:{horizontal:"hidden",vertical:"hidden"},automaticLayout:!0,scrollBeyondLastLine:!1},onChange:val=>{state.code=val}})}))]}))]}))})}},4741:function(module,exports){function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=function(){return[]},webpackEmptyContext.resolve=webpackEmptyContext,module.exports=webpackEmptyContext,webpackEmptyContext.id=4741},4742:function(module,exports){},5843:function(module,exports){},5844:function(module,exports){},5845:function(module,exports){},5846:function(module,exports){},5847:function(module,exports){},5848:function(module,exports){}}]);