0.2.1

bump pxt-core to 3.13.30,
Move to v0.2 and add copyright text
2018-06-13 14:56:58 -07:00 · 2018-06-13 14:56:53 -07:00 · 2018-06-13 14:45:03 -07:00 · 2018-05-18 14:26:13 -07:00 · 2018-05-18 13:53:59 -07:00 · 2018-05-18 16:32:14 -04:00
81 changed files with 1816 additions and 1432 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+Add screenshots to help explain your problem. You can copy paste the screenshot in the github report. The .gif screen recording is very useful as well. 
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
--- a/cmds/pxtrequire.ts
+++ b/cmds/pxtrequire.ts
@ -1,6 +0,0 @@
-/// <reference path="../node_modules/pxt-core/built/pxtlib.d.ts" />
-
-import * as path from "path";
-export let pxtCore = require("pxt-core");
-// require.resolve() gives path to [pxt dir]/built/pxt.js, so move up twice to get pxt root dir
-export let pxtCoreDir = path.resolve(require.resolve("pxt-core"), "..", "..");
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@ -3,8 +3,8 @@
 ## Support #support

 * [Troubleshoot](/troubleshoot)
-* [LEGO Support](http://service.lego.com/)
 * [EV3 Manager](https://ev3manager.education.lego.com/)
+* [LEGO Support](https://www.lego.com/service/)

 ## Projects #projects

--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -4,6 +4,14 @@

 ```codecard
 [
+{
+    "name": "Prepare",
+    "imageUrl": "/static/lessons/firmware.png",
+    "description": "To use Microsoft MakeCode with your EV3 brick, you will need to install the latest LEGO MINDSTORMS Education EV3 firmware - version 1.10 or higher. Follow these steps to install the latest firmware from LEGO.",
+    "label": "New? Start Here!",
+    "labelClass": "red ribbon large",
+    "url": "https://makecode.mindstorms.com/troubleshoot"
+},
 {
    "name": "Try",
    "imageUrl": "/static/lessons/try.png",
--- a/docs/index-ref.json
+++ b/docs/index-ref.json
@ -1,3 +1,3 @@
 {
-    "appref": "v0.1.27"
+    "appref": "v0.1.57"
 }
--- a/docs/maker.md
+++ b/docs/maker.md
@ -1,9 +1,5 @@
 # Maker Activites

-These six activities require the [@boardname@ Core Set (45544)](https://education.lego.com/en-us/products/lego-mindstorms-education-ev3-core-set-/5003400). Supporting materials for teachers and middle school students are provided, offering everything teachers and students need to explore their inner makers as they follow the design process to solve open-ended, themed challenges...
-
-* [Download Curriculum Materials](https://education.lego.com/en-us/downloads/mindstorms-ev3/curriculum)
-
 ## Activites

 ```codecard
--- a/docs/static/download/firmware.png
+++ b/docs/static/download/firmware.png
--- a/docs/static/download/firmware.svg
+++ b/docs/static/download/firmware.svg
@ -1,252 +1,279 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="261.3" height="109.3" viewBox="0 0 69.1 28.9" id="svg9461">
-  <defs id="defs9455">
-    <clipPath id="clipPath8689">
-      <path d="M0 1145.9h1366V0H0z" id="path8687"/>
-    </clipPath>
-    <clipPath id="clipPath8663">
-      <path d="M309.8 89.4h3.7v3.7h-3.7z" id="path8661"/>
-    </clipPath>
-    <clipPath id="clipPath8647">
-      <path d="M0 1145.9h1366V0H0z" id="path8645"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .6661 -.32488 0 300.7 115)" id="linearGradient8637">
-      <stop offset="0" id="stop8633" stop-color="#757575"/>
-      <stop offset="1" id="stop8635" stop-color="#393939"/>
-    </linearGradient>
-    <clipPath id="clipPath8595">
-      <path d="M0 1145.9h1366V0H0z" id="path8593"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.8096 -17.18704 0 300.7 98.4)" id="linearGradient8585">
-      <stop offset="0" id="stop8579" stop-color="#6a6a6a"/>
-      <stop offset=".5" id="stop8581" stop-color="#48e400"/>
-      <stop offset="1" id="stop8583" stop-color="#6a6a6a"/>
-    </linearGradient>
-    <clipPath id="clipPath8561">
-      <path d="M0 1145.9h1366V0H0z" id="path8559"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33016 5.597 0 300.7 88.4)" id="linearGradient8551">
-      <stop offset="0" id="stop8547" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8549" stop-color="#535453"/>
-    </linearGradient>
-    <clipPath id="clipPath8525">
-      <path d="M0 1145.9h1366V0H0z" id="path8523"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56074 .70884 0 300.7 115.6)" id="linearGradient8515">
-      <stop offset="0" id="stop8511" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8513" stop-color="#818181"/>
-    </linearGradient>
-    <clipPath id="clipPath8493">
-      <path d="M0 1145.9h1366V0H0z" id="path8491"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.39765 2.48247 0 300.7 98.1)" id="linearGradient8483">
-      <stop offset="0" id="stop8479" stop-color="#f2f2f2"/>
-      <stop offset="1" id="stop8481" stop-color="#7a7a7a"/>
-    </linearGradient>
-    <clipPath id="clipPath8449">
-      <path d="M0 1145.9h1366V0H0z" id="path8447"/>
-    </clipPath>
-    <clipPath id="clipPath8977">
-      <path d="M0 1145.9h1366V0H0z" id="path8975"/>
-    </clipPath>
-    <clipPath id="clipPath8951">
-      <path d="M593 101h3.6v3.7H593z" id="path8949"/>
-    </clipPath>
-    <clipPath id="clipPath8935">
-      <path d="M0 1145.9h1366V0H0z" id="path8933"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .67046 -.32706 0 583.8 126.8)" id="linearGradient8925">
-      <stop offset="0" id="stop8921" stop-color="#757575"/>
-      <stop offset="1" id="stop8923" stop-color="#393939"/>
-    </linearGradient>
-    <clipPath id="clipPath8883">
-      <path d="M0 1145.9h1366V0H0z" id="path8881"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.89405 -17.29507 0 583.7 110)" id="linearGradient8873">
-      <stop offset="0" id="stop8867" stop-color="#6a6a6a"/>
-      <stop offset=".5" id="stop8869" stop-color="#48e400"/>
-      <stop offset="1" id="stop8871" stop-color="#6a6a6a"/>
-    </linearGradient>
-    <clipPath id="clipPath8849">
-      <path d="M0 1145.9h1366V0H0z" id="path8847"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33884 5.6329 0 583.7 100)" id="linearGradient8839">
-      <stop offset="0" id="stop8835" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8837" stop-color="#535453"/>
-    </linearGradient>
-    <clipPath id="clipPath8813">
-      <path d="M0 1145.9h1366V0H0z" id="path8811"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56429 .71345 0 583.7 127.4)" id="linearGradient8803">
-      <stop offset="0" id="stop8799" stop-color="#a9aba9"/>
-      <stop offset="1" id="stop8801" stop-color="#818181"/>
-    </linearGradient>
-    <clipPath id="clipPath8781">
-      <path d="M0 1145.9h1366V0H0z" id="path8779"/>
-    </clipPath>
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.41323 2.4988 0 583.7 109.8)" id="linearGradient8771">
-      <stop offset="0" id="stop8767" stop-color="#f2f2f2"/>
-      <stop offset="1" id="stop8769" stop-color="#7a7a7a"/>
-    </linearGradient>
-    <clipPath id="clipPath8737">
-      <path d="M0 1145.9h1366V0H0z" id="path8735"/>
-    </clipPath>
-  </defs>
-  <g id="layer1" transform="translate(0 -268)">
-    <g id="g10860" transform="translate(-20.8 -2)">
-      <g transform="matrix(.35278 0 0 -.35278 62.8 291.4)" id="g8727">
-        <path id="path8729" d="M0 0h24" fill="none" stroke="#000" stroke-width="2"/>
-      </g>
-      <g id="g8731" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8737)" id="g8733">
-          <g transform="translate(458 159.9)" id="g8739">
-            <path id="path8741" d="M0 0h83a4 4 0 0 0 4-4v-52.5H-4V-4a4 4 0 0 0 4 4" fill="#e6e6e6"/>
-          </g>
-          <g transform="translate(458 158.4)" id="g8743">
-            <path id="path8745" d="M0 0h83c1.3 0 2.4-1.1 2.4-2.5V-52c0-.9-.6-1.5-1.5-1.5H-1c-.8 0-1.5.6-1.5 1.5v49.5C-2.5-1.1-1.4 0 0 0z" fill="none" stroke="#282828" stroke-width="3"/>
-          </g>
-          <g transform="translate(445 102.9)" id="g8747">
-            <path id="path8749" d="M0 0h108.8v-1.2a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3z" fill="#626262"/>
-          </g>
-          <g transform="translate(489.8 102.9)" id="g8751">
-            <path id="path8753" d="M0 0h19.3c0-.8-.6-1.4-1.4-1.4H1.4C.6-1.4 0-.8 0 0" fill="#818181"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8757">
-          <g id="g8763">
-            <g id="g8765">
-              <path id="path8773" d="M567.9 139.7a.6.6 0 0 1-.6-.6v-30.6c0-.3.2-.6.6-.6h31.7c.3 0 .5.3.5.6v30.6c0 .3-.2.6-.5.6z" fill="url(#linearGradient8771)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8781)" id="g8777">
-          <g transform="translate(569.7 111.2)" id="g8783">
-            <path id="path8785" d="M0 0h28c.3 0 .6-.3.6-.6V-12c0-.4-.3-.6-.6-.6H0c-.3 0-.6.2-.6.6V-.6c0 .3.3.6.6.6" fill="#f2f2f2"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8787" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8789">
-          <g id="g8795">
-            <g id="g8797">
-              <path id="path8805" d="M569.4 149.1a.6.6 0 0 1-.6-.6v-22.3c0-.3.3-.6.6-.6H598c.3 0 .6.3.6.6v22.3c0 .3-.3.6-.6.6z" fill="url(#linearGradient8803)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8813)" id="g8809">
-          <g transform="translate(572.7 146)" id="g8815">
-            <path id="path8817" d="M0 0h22.1c.6 0 1.1-.5 1.1-1.1v-12.5c0-.6-.5-1-1-1H0c-.6 0-1.1.4-1.1 1V-1c0 .5.5 1 1.1 1" fill="#393939"/>
-          </g>
-          <g transform="translate(574.4 145.4)" id="g8819">
-            <path id="path8821" d="M0 0h18.8c.4 0 .8-.4.8-.8v-12c0-.4-.4-.8-.8-.8H0c-.4 0-.8.4-.8.8v12c0 .4.4.8.8.8" fill="#98b6a7"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8823" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8825">
-          <g id="g8831">
-            <g id="g8833">
-              <path id="path8841" d="M569.1 105.6v-6.4c0-.3.3-.6.6-.6h28c.3 0 .6.3.6.6v6.4z" fill="url(#linearGradient8839)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8849)" id="g8845">
-          <g transform="translate(581.7 109.3)" id="g8851">
-            <path id="path8853" d="M0 0l-4.2 4.2v.6h-1a2.5 2.5 0 0 0 0 4.9h1v.5L0 14.5h4l4.2-4.2v-.6h1a2.5 2.5 0 0 0 0-5h-1v-.5L4.2 0z" fill="#6a6a6a"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8855" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8857">
-          <g id="g8863">
-            <g id="g8865">
-              <path id="path8875" d="M581.7 123.8l-4.2-4.2v-.6h-1a2.5 2.5 0 1 1 0-5v.1h1v-.5l4.2-4.3h4.2l4.2 4.3v.5h1a2.5 2.5 0 0 1-.1 4.9h-1v.7l-4.1 4.1z" fill="url(#linearGradient8873)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8883)" id="g8879">
-          <g transform="translate(576.4 118.4)" id="g8885">
-            <path id="path8887" d="M0 0h3v-3.6H0A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
-          </g>
-          <g transform="translate(591 114.8)" id="g8889">
-            <path id="path8891" d="M0 0h-3v3.6h3A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
-          </g>
-          <g transform="translate(582 118.4)" id="g8893">
-            <path id="path8895" d="M0 0h3.6v-3.6H-.1V0H0" fill="#393939"/>
-          </g>
-          <g transform="translate(581.9 123.2)" id="g8897">
-            <path id="path8899" d="M0 0h3.8l2.8-2.9L5.5-4v-2H4.3v1c0 .5-.4 1-1 1h-3a.7.7 0 0 1-.8-.8v-1.4h-1V-4l-1.2 1.2z" fill="#a9aba9"/>
-          </g>
-          <g transform="translate(585.6 110)" id="g8901">
-            <path id="path8903" d="M0 0h-3.8l-2.8 2.9 1.2 1.2v2h1V5c0-.5.5-1 1-1h3.2c.5 0 .8.4.8.8v1.4h1.1V4l1.2-1.2z" fill="#a9aba9"/>
-          </g>
-          <path id="path8905" d="M583.3 131.4h.9v-4.1h-.9z" fill="#393939"/>
-          <path id="path8907" d="M583.3 127.4h.9v-1.8h-.9z" fill="#9b9b9b"/>
-        </g>
-      </g>
-      <g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g id="g8911">
-          <g id="g8917">
-            <g id="g8919">
-              <path id="path8927" d="M583.3 125.6h.9v1.8h-.9z" fill="url(#linearGradient8925)"/>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8935)" id="g8931">
-          <path id="path8937" d="M583.3 125.6h.9v-1.8h-.9z" fill="#818181"/>
-          <g transform="translate(571.2 125.6)" id="g8939">
-            <path id="path8941" d="M0 0h7v-1.7L5.3-3.5H.6c-.3 0-.6.3-.6.6z" fill="#a9aba9"/>
-          </g>
-          <path id="path8943" d="M593 104.7h3.6V101H593z" fill="#fff"/>
-        </g>
-      </g>
-      <g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8951)" id="g8947">
-          <g transform="translate(596.4 103.2)" id="g8953">
-            <path id="path8955" d="M0 0v-.3C-.3-.8-.4-1-.8-1l-.3.2a.6.6 0 0 0-.5-.2c-.1 0-.2 0-.3.2C-2-1-2.1-1-2.2-1h-.6a.3.3 0 0 0-.3.2l.3 1h.5l.5.2.2-.1h.4c.1.1.3 0 .4 0V.1l.4.2.3-.1L0 0m-3.4-2.1H.2v3.6h-3.6z" fill="#fe0"/>
-          </g>
-          <g transform="translate(596.5 103)" id="g8957">
-            <path id="path8959" d="M0 0c0-.2 0-.3-.2-.5 0-.2-.3-.4-.6-.4l-.4.1a.7.7 0 0 0-.4-.1H-2a.7.7 0 0 0-.4 0H-3c-.2 0-.3.1-.4.3 0 .4.2.7.4 1 0 .2.2.2.4.2h2.1L0 .5V0m-3.5-2H.1v3.6h-3.6z" fill="#d52715"/>
-          </g>
-          <path id="path8961" d="M596.6 101H593v3.6h3.6zm-3.7 0h3.7v3.7H593z" fill="#171714"/>
-          <g transform="translate(596.5 103.7)" id="g8963">
-            <path id="path8965" d="M0 0v-.2.2m0 0v-.2.1m0 0zm0 0z" fill="#171714"/>
-          </g>
-          <g transform="translate(596 103.2)" id="g8967">
-            <path id="path8969" d="M0 0a3 3 0 0 0-.2-.6h-.1c0 .2 0 .4.2.6H0m.3-.2L0-.6C0-.8-.2-1-.3-1c-.2 0-.3 0-.3.3l.1.4c.1.3.2.5.5.5s.3-.3.3-.5M-1 .1V0l-.3-.5.1-.1.2.2c0 .2 0 .2.2.2s.2-.1.1-.2c0-.3-.2-.5-.5-.5a.3.3 0 0 0-.3.3l.2.5c0 .2.2.4.5.4.2 0 .3 0 .3-.2 0-.1 0-.2-.2-.2h-.1v.2m-1-.5v-.2h.3c0-.2-.2-.3-.3-.3-.2 0-.3.1-.3.2 0 .3 0 .5.2.7 0 .2.2.3.4.3l.2-.1c0-.2 0-.2-.2-.2h-.1v-.1c.1 0 .2 0 .1-.2l-.3-.1m-.6-.2h.2c0-.2-.1-.3-.3-.3 0 0-.2 0-.2.2l.3.9s.1.1.2 0h.1c0-.3-.2-.5-.3-.8M0 .4C-.2.4-.3.4-.4.2l-.4.2-.4-.1-.3.1c-.2 0-.3 0-.4-.2v.1l-.3.1c-.1 0-.2 0-.3-.2-.1-.3-.3-.6-.3-1 0 0 .1-.2.3-.2l.3.1c.1 0 .2-.1.4 0h.6l.5.1.4-.2c.3 0 .5.3.6.6V0a.4.4 0 0 1-.3.4" fill="#171714"/>
-          </g>
-        </g>
-      </g>
-      <g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8977)" id="g8973">
-          <g transform="translate(578 103)" id="g8979">
-            <path id="path8981" d="M0 0v-.3h-.6l-.1-.1v-.4H0v-.4h-1l-.2.2h-.3l-.1-.1v-.6H.7V.5h-2.3v-.6h.5V0H0z" fill="#f2f2f2"/>
-          </g>
-          <g transform="translate(576 103.6)" id="g8983">
-            <path id="path8985" d="M0 0h-.5l-.1-.1-.6-1.3L-2-.1V0h-.5s-.1 0 0-.1l.9-2 .2-.1h.5l1 2L0 0" fill="#f2f2f2"/>
-          </g>
-          <g transform="translate(573 102.8)" id="g8987">
-            <path id="path8989" d="M0 0h.1v-.4L0-.5h-1.5v-.3H0L.1-1v-.4h-2.2v2l.1.2H.1V.4h-1.6V0z" fill="#f2f2f2"/>
-          </g>
-          <g transform="translate(583.5 136.6)" id="g8991">
-            <path id="path8993" d="M0 0l-.8 1.3-1.4-2.9 4-1c-.5.5-.5.7-.9 1.3.5.1 1 .4 1.4.7.8.4 1.5 1 2 1.9a4 4 0 0 1-.6 3.6c-.4 0-.8 0-1.3-.2C3.5 3 3.5 1 0 0" fill="#303030"/>
-          </g>
-          <g transform="translate(583.1 141.4)" id="g8995">
-            <path id="path8997" d="M0 0l.8-1.2 1.4 2.8-3.8 1 .7-1.3-1.3-.7a4.5 4.5 0 0 1-2-2c-.4-1-.2-2.4.5-3.4.4 0 .8 0 1.2.2C-3.3-3-3.3-1 0 0" fill="#303030"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="svg9461" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 85.6 95.6" style="enable-background:new 0 0 85.6 95.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#path8773_1_);}
+	.st1{clip-path:url(#SVGID_2_);}
+	.st2{fill:#F2F2F2;}
+	.st3{fill:url(#path8805_1_);}
+	.st4{clip-path:url(#SVGID_4_);}
+	.st5{fill:#393939;}
+	.st6{fill:#98B6A7;}
+	.st7{fill:url(#path8841_1_);}
+	.st8{clip-path:url(#SVGID_6_);}
+	.st9{fill:#6A6A6A;}
+	.st10{fill:url(#path8875_1_);}
+	.st11{clip-path:url(#SVGID_8_);}
+	.st12{fill:#A9ABA9;}
+	.st13{fill:#9B9B9B;}
+	.st14{fill:url(#path8927_1_);}
+	.st15{clip-path:url(#SVGID_10_);}
+	.st16{fill:#818181;}
+	.st17{fill:#FFFFFF;}
+	.st18{clip-path:url(#SVGID_12_);}
+	.st19{fill:#FFEE00;}
+	.st20{fill:#D52715;}
+	.st21{fill:#171714;}
+	.st22{clip-path:url(#SVGID_14_);}
+	.st23{fill:#303030;}
+</style>
+<g id="layer1" transform="translate(0 -268)">
+	<g id="g10860" transform="translate(-20.8 -2)">
+		<g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8757">
+				<g id="g8763">
+					<g id="g8765">
+						
+							<linearGradient id="path8773_1_" gradientUnits="userSpaceOnUse" x1="-839.9431" y1="-715.001" x2="-838.9431" y2="-715.001" gradientTransform="matrix(0 -3.2193 3.3335 0 2933.3757 -2723.9758)">
+							<stop  offset="0" style="stop-color:#F2F2F2"/>
+							<stop  offset="1" style="stop-color:#7A7A7A"/>
+						</linearGradient>
+						<path id="path8773" class="st0" d="M490.2,93.1c-1.3,0-2.3-1-2.3-2.3V-24.8c0-1.1,0.8-2.3,2.3-2.3h119.9
+							c1.1,0,1.9,1.1,1.9,2.3V90.9c0,1.1-0.8,2.3-1.9,2.3H490.2z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_1_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_2_">
+					<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8777" class="st1">
+					<g id="g8783" transform="translate(569.7 111.2)">
+						<path id="path8785" class="st2" d="M-72.7-125.8H33.2c1.1,0,2.3-1.1,2.3-2.3v-43.1c0-1.5-1.1-2.3-2.3-2.3H-72.7
+							c-1.1,0-2.3,0.8-2.3,2.3v43.1C-75-127-73.8-125.8-72.7-125.8"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8787" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8789">
+				<g id="g8795">
+					<g id="g8797">
+						
+							<linearGradient id="path8805_1_" gradientUnits="userSpaceOnUse" x1="106.3515" y1="93.6155" x2="107.3515" y2="93.6155" gradientTransform="matrix(0 -0.7528 0.9518 0 460.8399 126.682)">
+							<stop  offset="0" style="stop-color:#A9ABA9"/>
+							<stop  offset="1" style="stop-color:#818181"/>
+						</linearGradient>
+						<path id="path8805" class="st3" d="M495.9,128.7c-1.3,0-2.3-1-2.3-2.3V42.1c0-1.1,1.1-2.3,2.3-2.3H604c1.1,0,2.3,1.1,2.3,2.3
+							v84.3c0,1.1-1.1,2.3-2.3,2.3H495.9z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_3_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_4_">
+					<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8809" class="st4">
+					<g id="g8815" transform="translate(572.7 146)">
+						<path id="path8817" class="st5" d="M-64.4-29h83.6c2.3,0,4.2-1.9,4.2-4.2v-47.3c0-2.3-1.9-3.8-3.8-3.8h-83.9
+							c-2.3,0-4.2,1.5-4.2,3.8v47.6C-68.5-30.9-66.6-29-64.4-29"/>
+					</g>
+					<g id="g8819" transform="translate(574.4 145.4)">
+						<path id="path8821" class="st6" d="M-59.6-30.7h71.1c1.5,0,3-1.5,3-3v-45.4c0-1.5-1.5-3-3-3h-71.1c-1.5,0-3,1.5-3,3v45.4
+							C-62.7-32.2-61.1-30.7-59.6-30.7"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8823" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8825">
+				<g id="g8831">
+					<g id="g8833">
+						
+							<linearGradient id="path8841_1_" gradientUnits="userSpaceOnUse" x1="-608.1827" y1="-894.7903" x2="-607.1827" y2="-894.7903" gradientTransform="matrix(0 -1.7861 7.5145 0 7273.7993 -1143.2354)">
+							<stop  offset="0" style="stop-color:#A9ABA9"/>
+							<stop  offset="1" style="stop-color:#535453"/>
+						</linearGradient>
+						<path id="path8841" class="st7" d="M494.7-35.8V-60c0-1.1,1.1-2.3,2.3-2.3h105.9c1.1,0,2.3,1.1,2.3,2.3v24.2H494.7z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_5_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_6_">
+					<use xlink:href="#SVGID_5_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8845" class="st8">
+					<g id="g8851" transform="translate(581.7 109.3)">
+						<path id="path8853" class="st9" d="M-39.3-131.1l-15.9,15.9v2.3H-59c-5.1,1-8.4,6-7.4,11.1c0.8,3.7,3.7,6.6,7.4,7.4h3.8v1.9
+							l15.9,16.3h15.1l15.9-15.9v-2.3h3.8c5.2,0,9.5-4.2,9.5-9.5c0-5.2-4.2-9.5-9.5-9.5h-3.8v-1.9l-15.1-15.9H-39.3z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8855" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8857">
+				<g id="g8863">
+					<g id="g8865">
+						
+							<linearGradient id="path8875_1_" gradientUnits="userSpaceOnUse" x1="-1182.8013" y1="-1084.7936" x2="-1181.8013" y2="-1084.7936" gradientTransform="matrix(0 17.201 -23.0721 0 -24479.207 20326.2344)">
+							<stop  offset="0" style="stop-color:#6A6A6A"/>
+							<stop  offset="0.5" style="stop-color:#48E400"/>
+							<stop  offset="1" style="stop-color:#6A6A6A"/>
+						</linearGradient>
+						<path id="path8875" class="st10" d="M542.4,33l-15.9-15.9v-2.3h-3.8c-5.2,0-9.5-4.2-9.5-9.5s4.2-9.5,9.5-9.5v0.4h3.8v-1.9
+							l15.9-16.3h15.9l15.9,16.3v1.9h3.8c5.1,1.1,8.3,6.2,7.2,11.3c-0.8,3.7-3.8,6.6-7.5,7.2h-3.8v2.6L558.3,33H542.4z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_7_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_8_">
+					<use xlink:href="#SVGID_7_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8879" class="st11">
+					<g id="g8885" transform="translate(576.4 118.4)">
+						<path id="path8887" class="st12" d="M-54.1-105.8h11.3v-13.6h-11.3c-3.8,0-6.8,3-6.8,6.8C-60.9-108.9-57.8-105.8-54.1-105.8"
+							/>
+					</g>
+					<g id="g8889" transform="translate(591 114.8)">
+						<path id="path8891" class="st12" d="M-13.5-115.8h-11.3v13.6h11.3c3.8,0,6.8-3,6.8-6.8C-6.6-112.8-9.7-115.8-13.5-115.8"/>
+					</g>
+					<g id="g8893" transform="translate(582 118.4)">
+						<path id="path8895" class="st5" d="M-38.5-105.8h13.6v-13.6h-14v13.6H-38.5"/>
+					</g>
+					<g id="g8897" transform="translate(581.9 123.2)">
+						<path id="path8899" class="st12" d="M-38.8-92.5h14.4l10.6-11l-4.2-4.2v-7.6h-4.5v3.8c0,1.9-1.5,3.8-3.8,3.8h-11.3
+							c-1.4,0.2-2.8-0.8-3-2.2c0-0.3,0-0.5,0-0.8v-5.3h-3.8v8.3L-49-103L-38.8-92.5z"/>
+					</g>
+					<g id="g8901" transform="translate(585.6 110)">
+						<path id="path8903" class="st12" d="M-28.5-129.2h-14.4l-10.6,11l4.5,4.5v7.6h3.8v-4.2c0-1.9,1.9-3.8,3.8-3.8h12.1
+							c1.9,0,3,1.5,3,3v5.3h4.2v-8.3l4.5-4.5L-28.5-129.2z"/>
+					</g>
+					<path id="path8905" class="st5" d="M548.4,61.7h3.4V46.2h-3.4V61.7z"/>
+					<path id="path8907" class="st13" d="M548.4,46.6h3.4v-6.8h-3.4V46.6z"/>
+				</g>
+			</g>
+		</g>
+		<g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g id="g8911">
+				<g id="g8917">
+					<g id="g8919">
+						
+							<linearGradient id="path8927_1_" gradientUnits="userSpaceOnUse" x1="-2168.2661" y1="-3506.5073" x2="-2167.2661" y2="-3506.5073" gradientTransform="matrix(0 0.8944 -0.4363 0 -979.787 1983.6796)">
+							<stop  offset="0" style="stop-color:#757575"/>
+							<stop  offset="1" style="stop-color:#393939"/>
+						</linearGradient>
+						<path id="path8927" class="st14" d="M548.4,39.8h3.4v6.8h-3.4V39.8z"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_9_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_10_">
+					<use xlink:href="#SVGID_9_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8931" class="st15">
+					<path id="path8937" class="st16" d="M548.4,39.8h3.4V33h-3.4V39.8z"/>
+					<g id="g8939" transform="translate(571.2 125.6)">
+						<path id="path8941" class="st12" d="M-68.5-85.8h26.5v-6.4l-6.4-6.8h-17.8c-1.1,0-2.3,1.1-2.3,2.3V-85.8z"/>
+					</g>
+					<path id="path8943" class="st17" d="M585.1-39.2h13.6v-14h-13.6V-39.2z"/>
+				</g>
+			</g>
+		</g>
+		<g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_11_" x="589.5" y="-48.7" width="4.8" height="4.9"/>
+				</defs>
+				<clipPath id="SVGID_12_">
+					<use xlink:href="#SVGID_11_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8947" class="st18">
+					<g id="g8953" transform="translate(596.4 103.2)">
+						<path id="path8955" class="st19" d="M1.6-148.1v-1.1c-1.1-1.9-1.5-2.6-3-2.6l-1.1,0.8c-0.5-0.5-1.2-0.8-1.9-0.8
+							c-0.4,0-0.8,0-1.1,0.8c-0.4-0.8-0.8-0.8-1.1-0.8H-9c-0.5,0-1,0.3-1.1,0.8l1.1,3.8h1.9l1.9,0.8l0.8-0.4H-3c0.4,0.4,1.1,0,1.5,0
+							v-0.8l1.5,0.8l1.1-0.4L1.6-148.1 M-11.3-156H2.3v13.6h-13.6L-11.3-156z"/>
+					</g>
+					<g id="g8957" transform="translate(596.5 103)">
+						<path id="path8959" class="st20" d="M1.8-148.6c0-0.8,0-1.1-0.8-1.9c0-0.8-1.1-1.5-2.3-1.5l-1.5,0.4c-0.5-0.3-1-0.4-1.5-0.4
+							h-1.5c-0.5-0.1-1-0.1-1.5,0h-2.3c-0.8,0-1.1,0.4-1.5,1.1c0,1.5,0.8,2.6,1.5,3.8c0,0.8,0.8,0.8,1.5,0.8H0l1.9-0.4V-148.6
+							 M-11.4-156.2H2.2v13.6h-13.6V-156.2z"/>
+					</g>
+					<path id="path8961" class="st21" d="M598.7-53.2h-13.6v13.6h13.6V-53.2z M584.7-53.2h14v14h-13.6L584.7-53.2z"/>
+					<g id="g8963" transform="translate(596.5 103.7)">
+						<path id="path8965" class="st21" d="M1.8-146.7v-0.8V-146.7 M1.8-146.7v-0.8v0.4V-146.7z"/>
+					</g>
+					<g id="g8967" transform="translate(596 103.2)">
+						<path id="path8969" class="st21" d="M0.5-148.1c-0.2-0.8-0.4-1.5-0.8-2.3h-0.4c0,0.8,0,1.5,0.8,2.3H0.5 M1.6-148.8l-1.1-1.5
+							c0-0.8-0.8-1.5-1.1-1.5c-0.8,0-1.1,0-1.1,1.1l0.4,1.5c0.4,1.1,0.8,1.9,1.9,1.9s1.1-1.1,1.1-1.9 M-3.3-147.7v-0.4l-1.1-1.9
+							l0.4-0.4l0.8,0.8c0,0.8,0,0.8,0.8,0.8s0.8-0.4,0.4-0.8c0-1.1-0.8-1.9-1.9-1.9c-0.6,0-1.1,0.5-1.1,1.1l0,0l0.8,1.9
+							c0,0.8,0.8,1.5,1.9,1.5c0.8,0,1.1,0,1.1-0.8c0-0.4,0-0.8-0.8-0.8h-0.4v0.8 M-6.4-149.6v-0.8h1.1c0-0.8-0.8-1.1-1.1-1.1
+							c-0.8,0-1.1,0.4-1.1,0.8c0,1.1,0,1.9,0.8,2.6c0,0.8,0.8,1.1,1.5,1.1l0.8-0.4c0-0.8,0-0.8-0.8-0.8h-0.4v-0.4
+							c0.4,0,0.8,0,0.4-0.8L-6.4-149.6 M-8.6-150.4h0.8c0-0.8-0.4-1.1-1.1-1.1c0,0-0.8,0-0.8,0.8l1.1,3.4c0,0,0.4,0.4,0.8,0h0.4
+							C-7.5-148.5-8.2-149.2-8.6-150.4 M0.5-146.6c-0.8,0-1.1,0-1.5-0.8l-1.5,0.8l-1.5-0.4l-1.1,0.4c-0.8,0-1.1,0-1.5-0.8v0.4
+							l-1.1,0.4c-0.4,0-0.8,0-1.1-0.8c-0.4-1.1-1.1-2.3-1.1-3.8c0,0,0.4-0.8,1.1-0.8l1.1,0.4c0.4,0,0.8-0.4,1.5,0h2.3l1.9,0.4
+							l1.5-0.8c1.1,0,1.9,1.1,2.3,2.3v1.5C1.6-147.4,1.1-146.8,0.5-146.6"/>
+					</g>
+				</g>
+			</g>
+		</g>
+		<g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
+			<g>
+				<defs>
+					<rect id="SVGID_13_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
+				</defs>
+				<clipPath id="SVGID_14_">
+					<use xlink:href="#SVGID_13_"  style="overflow:visible;"/>
+				</clipPath>
+				<g id="g8973" class="st22">
+					<g id="g8979" transform="translate(578 103)">
+						<path id="path8981" class="st2" d="M-49.6-148.6v-1.1h-2.3l-0.4-0.4v-1.5h2.6v-1.5h-3.8l-0.8,0.8h-1.1l-0.4-0.4v-2.3h8.7v8.3
+							h-8.7v-2.3h1.9v0.4H-49.6z"/>
+					</g>
+					<g id="g8983" transform="translate(576 103.6)">
+						<path id="path8985" class="st2" d="M-55.2-147h-1.9l-0.4-0.4l-2.3-4.9l-3,4.9v0.4h-1.9c0,0-0.4,0,0-0.4l3.4-7.6l0.8-0.4h1.9
+							l3.8,7.6L-55.2-147"/>
+					</g>
+					<g id="g8987" transform="translate(573 102.8)">
+						<path id="path8989" class="st2" d="M-63.5-149.2h0.4v-1.5l-0.4-0.4h-5.7v-1.1h5.7l0.4-0.8v-1.5h-8.3v7.6l0.4,0.8h7.9v-1.5
+							h-6.1v-1.5H-63.5z"/>
+					</g>
+					<g id="g8991" transform="translate(583.5 136.6)">
+						<path id="path8993" class="st23" d="M-34.3-55.2l-3,4.9l-5.3-11l15.1-3.8c-1.9,1.9-1.9,2.6-3.4,4.9c1.9,0.4,3.8,1.5,5.3,2.6
+							c3,1.5,5.7,3.8,7.6,7.2c1.5,4.6,0.6,9.7-2.3,13.6c-1.5,0-3,0-4.9-0.8C-21.1-43.8-21.1-51.4-34.3-55.2"/>
+					</g>
+					<g id="g8995" transform="translate(583.1 141.4)">
+						<path id="path8997" class="st23" d="M-35.4-41.8l3-4.5l5.3,10.6L-41.5-32l2.6-4.9l-4.9-2.6c-3.3-1.6-5.9-4.3-7.6-7.6
+							c-1.5-3.8-0.8-9.1,1.9-12.9c1.5,0,3,0,4.5,0.8C-47.9-53.2-47.9-45.6-35.4-41.8"/>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
 </svg>
--- a/docs/static/favicon.ico
+++ b/docs/static/favicon.ico
--- a/docs/static/icons/android-chrome-192x192.png
+++ b/docs/static/icons/android-chrome-192x192.png
--- a/docs/static/icons/android-chrome-256x256.png
+++ b/docs/static/icons/android-chrome-256x256.png
--- a/docs/static/icons/android-chrome-512x512.png
+++ b/docs/static/icons/android-chrome-512x512.png
--- a/docs/static/icons/apple-touch-icon.png
+++ b/docs/static/icons/apple-touch-icon.png
--- a/docs/static/icons/browserconfig.xml
+++ b/docs/static/icons/browserconfig.xml
@ -3,7 +3,7 @@
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#33adcb</TileColor>
        </tile>
    </msapplication>
 </browserconfig>
--- a/docs/static/icons/favicon-16x16.png
+++ b/docs/static/icons/favicon-16x16.png
--- a/docs/static/icons/favicon-32x32.png
+++ b/docs/static/icons/favicon-32x32.png
--- a/docs/static/icons/favicon.ico
+++ b/docs/static/icons/favicon.ico
--- a/docs/static/icons/mstile-150x150.png
+++ b/docs/static/icons/mstile-150x150.png
--- a/docs/static/icons/safari-pinned-tab.svg
+++ b/docs/static/icons/safari-pinned-tab.svg
@ -2,14 +2,60 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="904.000000pt" height="904.000000pt" viewBox="0 0 904.000000 904.000000"
+ width="326.000000pt" height="326.000000pt" viewBox="0 0 326.000000 326.000000"
 preserveAspectRatio="xMidYMid meet">
 <metadata>
 Created by potrace 1.11, written by Peter Selinger 2001-2013
 </metadata>
-<g transform="translate(0.000000,904.000000) scale(0.100000,-0.100000)"
+<g transform="translate(0.000000,326.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
-<path d="M0 4520 l0 -4510 4520 0 4520 0 0 4510 0 4510 -4520 0 -4520 0 0
-4510z"/>
+<path d="M1535 3046 c-5 -2 -35 -9 -65 -16 -30 -7 -69 -23 -85 -36 -38 -30
+-29 -49 37 -81 131 -64 395 -46 468 32 l22 23 -39 26 c-53 35 -134 53 -239 54
+-49 1 -93 -1 -99 -2z"/>
+<path d="M1122 2799 l-64 -30 56 -41 c74 -54 87 -92 93 -269 5 -129 4 -139
+-20 -190 -97 -213 -600 -265 -788 -82 -38 37 -49 55 -58 101 -6 30 -11 75 -11
+98 0 24 -4 45 -9 48 -8 5 -228 -88 -243 -102 -3 -4 78 -58 180 -121 295 -181
+588 -360 987 -606 204 -125 375 -228 381 -228 6 0 154 87 330 193 175 107 330
+200 344 208 14 7 165 98 335 202 171 103 365 221 432 262 67 40 119 76 115 79
+-18 18 -236 109 -242 102 -4 -4 -10 -37 -13 -73 -10 -105 -22 -134 -79 -184
+-29 -25 -57 -46 -64 -46 -7 0 -33 -9 -58 -20 -39 -16 -128 -31 -201 -34 -62
+-2 -186 18 -248 41 -106 38 -171 87 -204 152 -24 48 -27 63 -24 145 6 224 14
+253 93 316 l57 45 -71 33 c-39 17 -74 32 -78 32 -5 0 -8 -19 -7 -43 2 -78 -21
+-134 -72 -177 -153 -132 -500 -137 -674 -9 -39 28 -50 44 -65 93 -11 33 -19
+77 -18 98 2 47 -6 47 -92 7z m729 -454 c163 -53 253 -149 252 -270 -1 -268
+-14 -325 -95 -396 -38 -33 -77 -55 -138 -78 -74 -26 -203 -49 -250 -44 -8 1
+-46 5 -85 8 -105 10 -220 56 -288 117 -74 66 -87 106 -92 293 -4 128 -2 145
+18 195 29 69 110 135 212 170 92 31 138 37 271 35 90 -2 127 -8 195 -30z"/>
+<path d="M1619 2246 c-2 -2 -33 -7 -69 -10 -91 -10 -176 -43 -222 -87 -46 -43
+-45 -64 3 -115 27 -28 112 -66 179 -79 36 -8 188 -8 230 -1 120 20 220 82 220
+137 0 65 -118 130 -260 145 -36 3 -68 8 -71 10 -3 2 -8 2 -10 0z"/>
+<path d="M1297 1873 c-3 -2 -1 -18 5 -35 68 -194 612 -185 653 11 7 31 5 33
+-11 26 -193 -80 -377 -88 -561 -25 -45 16 -84 26 -86 23z"/>
+<path d="M1350 2775 c0 -68 96 -119 240 -128 144 -9 288 34 309 94 13 39 -1
+45 -59 24 -112 -40 -311 -38 -432 4 -47 16 -58 17 -58 6z"/>
+<path d="M680 2674 c-99 -19 -210 -72 -223 -108 -10 -25 31 -64 91 -87 75 -28
+256 -35 335 -13 107 32 177 77 177 115 0 22 -42 53 -101 74 -44 16 -229 28
+-279 19z"/>
+<path d="M2448 2675 c-2 -2 -30 -5 -63 -8 -99 -8 -184 -54 -185 -99 0 -26 74
+-75 149 -99 96 -30 262 -31 352 0 66 21 90 39 102 73 16 46 -149 121 -285 131
+-37 2 -69 3 -70 2z"/>
+<path d="M1050 2380 c-34 -19 -149 -52 -200 -58 -121 -14 -268 -4 -332 23 -48
+19 -48 19 -48 -9 0 -35 37 -71 101 -97 45 -18 74 -22 174 -22 101 -1 130 3
+185 23 78 28 125 61 138 99 12 33 3 53 -18 41z"/>
+<path d="M2184 2363 c2 -16 7 -36 11 -45 13 -32 112 -84 200 -104 11 -3 65 -5
+120 -6 154 -1 253 41 271 116 6 26 5 28 -12 22 -87 -34 -252 -48 -364 -32 -51
+8 -161 42 -202 63 -27 13 -28 13 -24 -14z"/>
+<path d="M11 2146 c4 -31 10 -88 14 -128 4 -40 9 -80 10 -89 2 -9 6 -40 10
+-70 6 -55 32 -266 40 -329 5 -36 11 -93 20 -177 3 -27 8 -65 11 -85 5 -35 28
+-53 716 -553 391 -284 712 -514 715 -512 2 3 6 237 7 521 2 369 0 520 -8 530
+-9 11 -465 295 -576 358 -19 11 -47 29 -62 39 -14 11 -31 19 -37 19 -6 0 -11
+4 -11 8 0 5 -12 14 -27 21 -14 7 -49 27 -77 45 -52 34 -467 288 -515 316 -14
+8 -68 41 -120 73 -126 79 -119 78 -110 13z"/>
+<path d="M2816 1930 c-236 -143 -431 -260 -433 -260 -3 0 -17 -8 -31 -19 -15
+-10 -166 -103 -337 -206 -170 -103 -313 -191 -316 -196 -7 -13 -12 -1049 -4
+-1049 4 0 382 267 500 354 11 8 135 96 275 196 140 100 262 186 270 193 8 7
+94 68 190 136 96 68 180 128 187 135 10 9 28 108 38 214 2 18 6 45 9 60 3 15
+8 52 11 82 4 30 11 87 16 125 5 39 12 88 15 110 2 22 7 56 9 76 3 20 8 56 10
+80 3 24 7 60 10 79 10 67 17 150 14 150 -2 0 -197 -117 -433 -260z"/>
 </g>
 </svg>
--- a/docs/static/icons/site.webmanifest
+++ b/docs/static/icons/site.webmanifest
@ -1,6 +1,6 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "MakeCode for EV3",
+    "short_name": "MakeCode for EV3",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
@ -8,12 +8,14 @@
            "type": "image/png"
        },
        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
            "type": "image/png"
        }
    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+    "theme_color": "#ff0000",
+    "background_color": "#ff0000",
+    "start_url": "makecode.mindstorms.com",
+    "display": "standalone",
+    "orientation": "portrait"
 }
--- a/docs/static/lessons/firmware.png
+++ b/docs/static/lessons/firmware.png
--- a/docs/static/tutorials/line-following/line-following.gif
+++ b/docs/static/tutorials/line-following/line-following.gif
--- a/docs/static/tutorials/object-near/play-sound-effect-dropdown.png
+++ b/docs/static/tutorials/object-near/play-sound-effect-dropdown.png
--- a/docs/static/tutorials/object-near/ultrasonic-near.gif
+++ b/docs/static/tutorials/object-near/ultrasonic-near.gif
--- a/docs/static/tutorials/redlight-greenlight/redlight-greenlight.gif
+++ b/docs/static/tutorials/redlight-greenlight/redlight-greenlight.gif
--- a/docs/static/tutorials/run-motors/motor-port-dropdown.png
+++ b/docs/static/tutorials/run-motors/motor-port-dropdown.png
--- a/docs/static/tutorials/run-motors/run-motor-dropdown.png
+++ b/docs/static/tutorials/run-motors/run-motor-dropdown.png
--- a/docs/static/tutorials/run-motors/run-motors.gif
+++ b/docs/static/tutorials/run-motors/run-motors.gif
--- a/docs/static/tutorials/security-alert/play-sound-effect-dropdown.png
+++ b/docs/static/tutorials/security-alert/play-sound-effect-dropdown.png
--- a/docs/static/tutorials/security-alert/security-alert.gif
+++ b/docs/static/tutorials/security-alert/security-alert.gif
--- a/docs/static/tutorials/touch-sensor-values/touch-to-stop.gif
+++ b/docs/static/tutorials/touch-sensor-values/touch-to-stop.gif
--- a/docs/static/tutorials/touch-to-run/touch-to-run.gif
+++ b/docs/static/tutorials/touch-to-run/touch-to-run.gif
--- a/docs/static/tutorials/wake-up/show-mood.gif
+++ b/docs/static/tutorials/wake-up/show-mood.gif
--- a/docs/static/tutorials/what-animal-am-i/guess-animal.gif
+++ b/docs/static/tutorials/what-animal-am-i/guess-animal.gif
--- a/docs/static/tutorials/what-animal-am-i/play-sound-effect-dropdown.png
+++ b/docs/static/tutorials/what-animal-am-i/play-sound-effect-dropdown.png
--- a/docs/static/tutorials/what-color/color-detector.gif
+++ b/docs/static/tutorials/what-color/color-detector.gif
--- a/docs/tutorials/line-following.md
+++ b/docs/tutorials/line-following.md
@ -1,6 +1,6 @@
 # Line Following

-## Introduction @fullscreen
+## Introduction @unplugged

 Make a program to follow a line using the Color sensor and reflected light. Let's test reflected light to see if it's white or black (on the line), and drive our robot accordingly. 

@ -90,7 +90,7 @@ forever(function () {
 })
 ```

-# Step 7
+## Step 7

 In the second ``||motors:tank large motors||`` block in the ``||logic:else||`` clause, change the speed values of the motors from ``50%``, ``50%`` to ``15%``, ``5%``.  This slows down the robot, and steers it to the right (because the **B** motor is driving faster than the **C** motor).

--- a/docs/tutorials/make-an-animation.md
+++ b/docs/tutorials/make-an-animation.md
@ -1,6 +1,6 @@
 # Make a custom animation

-## Introduction @fullscreen
+## Introduction @unplugged

 Create a custom animation for your @boardname@.
 
@ -10,7 +10,7 @@ Create a custom animation for your @boardname@.

 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show string||`` block onto the Workspace, and drop it into the ``||loops:on Start||`` block. You should hear and see the block click into place.

-```block
+```blocks
 brick.showString("Hello world", 1) 
 ```

--- a/docs/tutorials/music-brick.md
+++ b/docs/tutorials/music-brick.md
@ -1,6 +1,6 @@
 # Music Brick

-## Introduction @fullscreen
+## Introduction @unplugged

 Transform your @boardname@ into a musical instrument!

--- a/docs/tutorials/object-near.md
+++ b/docs/tutorials/object-near.md
@ -1,10 +1,10 @@
 # Object Near?

-## Introduction @fullscreen
+## Introduction @unplugged

 The digital Ultrasonic Sensor generates sound waves and reads their echoes to detect and measure distance from objects in centimeters. Build a program that will detect when an object is nearby.

-![Simualtor with brick and ultrasonic sensor](/static/tutorials/object-near/ultrasonic-near.gif)
+![Simulator with brick and ultrasonic sensor](/static/tutorials/object-near/ultrasonic-near.gif)

 ## Step 1

--- a/docs/tutorials/redlight-greenlight.md
+++ b/docs/tutorials/redlight-greenlight.md
@ -1,6 +1,6 @@
 # Red Light, Green Light

-## Introduction @fullscreen
+## Introduction @unplugged

 Use the ``||sensors:pause color sensor||`` block to play Red Light, Green Light with your @boardname@ robot! 

--- a/docs/tutorials/run-motors.md
+++ b/docs/tutorials/run-motors.md
@ -1,6 +1,6 @@
 # Run motors

-## Introduction @fullscreen
+## Introduction @unplugged

 Use the buttons to start and stop the large and medium motors.
 
@ -66,8 +66,7 @@ brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {

 ## Step 5

-Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. 
-Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
+Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.

 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@ -105,9 +104,11 @@ brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {

 ## Step 7

-For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select ``medium motor D``. 
- 
-![Select motor on a port dropdown](/static/tutorials/run-motors/run-motor-dropdown.png)
+For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select a ``medium motor`` on port ``D``. 
+
+| | | |
+|-|-|-|
+| ![Select a motor type dropdown](/static/tutorials/run-motors/run-motor-dropdown.png) | | | ![Select a motor port dropdown](/static/tutorials/run-motors/motor-port-dropdown.png) |

 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@ -203,7 +204,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```

-# Step 12
+## Step 12

 Open the ``||motors:Motors||`` Toolbox drawer. Drag out a ``||motors:stop all motors||`` block onto the Workspace, and drop into the ``||brick:on button||`` enter block.

--- a/docs/tutorials/security-alert.md
+++ b/docs/tutorials/security-alert.md
@ -1,6 +1,6 @@
 # Security Alert

-## Introduction @fullscreen
+## Introduction @unplugged

 The Infrared Sensor uses infrared light waves to detect proximity to the robot. Build an security alert using the infrared sensor. 
 
--- a/docs/tutorials/touch-sensor-values.md
+++ b/docs/tutorials/touch-sensor-values.md
@ -1,6 +1,6 @@
 # Using Touch Sensor Values

-## Introduction @fullscreen
+## Introduction @unplugged

 Use the Touch sensor value to stop a running motor.

--- a/docs/tutorials/touch-to-run.md
+++ b/docs/tutorials/touch-to-run.md
@ -1,6 +1,6 @@
 # Touch to Run

-## Introduction @fullscreen
+## Introduction @unplugged

 Use the Touch sensor to run a motor.

--- a/docs/tutorials/wake-up.md
+++ b/docs/tutorials/wake-up.md
@ -1,6 +1,6 @@
 # Wake Up!

-## Introduction @fullscreen
+## Introduction @unplugged

 Show different moods on your @boardname@.

--- a/docs/tutorials/what-animal-am-i.md
+++ b/docs/tutorials/what-animal-am-i.md
@ -1,6 +1,6 @@
 # What Animal Am I?

-## Introduction @fullscreen
+## Introduction @unplugged

 Create different animal effects with your @boardname@.

@ -10,7 +10,7 @@ Create different animal effects with your @boardname@.

 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show string||`` block from the **Screen** section onto the Workspace, and drop it into the ``||loops:on start||`` block. You should hear and see the block click into place.

-```block
+```blocks
 brick.showString("Hello world", 1)
 ```

--- a/docs/tutorials/what-color.md
+++ b/docs/tutorials/what-color.md
@ -1,6 +1,6 @@
 # What Color is it?

-## Introduction @fullscreen
+## Introduction @unplugged

 Use the Color sensor to detect different colors.

@ -111,7 +111,7 @@ brick.showString("What color?", 1)

 ## Step 8

-In the ``||music::play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
+In the ``||music:play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 

 ```blocks
 sensors.color3.onColorDetected(ColorSensorColor.Red, function () {
--- a/editor/extension.ts
+++ b/editor/extension.ts
@ -25,43 +25,55 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
            const saveAs = pxt.BrowserUtils.hasSaveAs();

            const htmlBody = `
-            <div class="ui two column grid stackable">
-                <div class="column">
-                    <div class="ui">
-                        <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;">
-                        </div>
-                        <div class="content">
-                            <div class="description">
-                                <span class="ui yellow circular label">1</span>
-                                <strong>${lf("Connect EV3 to computer with USB cable")}</strong>
-                                <br/>
-                                ${lf("Use the miniUSB port on top of EV3 brick")}
+            <div class="ui grid stackable">
+                <div class="column five wide" style="background-color: #E2E2E2;">
+                    <div class="ui header">${lf("First time here?")}</div>
+                    <strong style="font-size:small">${lf("You must have version 1.10 or above of the firmware")}</strong>
+                    <div style="justify-content: center;display: flex;padding: 1rem;">
+                        <img class="ui image" src="./static/download/firmware.png" style="height:100px;" />
+                    </div>
+                    <a href="/troubleshoot" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
+                </div>
+                <div class="column eleven wide">
+                    <div class="ui grid">
+                        <div class="row">
+                            <div class="column">
+                                <div class="ui two column grid padded">
+                                    <div class="column">
+                                        <div class="ui">
+                                            <div class="image">
+                                                <img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
+                                            </div>
+                                            <div class="content">
+                                                <div class="description">
+                                                    <span class="ui yellow circular label">1</span>
+                                                    <strong>${lf("Connect the EV3 to your computer with a USB cable")}</strong>
+                                                    <br />
+                                                    <span style="font-size:small">${lf("Use the miniUSB port on the top of the EV3 brick")}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="column">
+                                        <div class="ui">
+                                            <div class="image">
+                                                <img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
+                                            </div>
+                                            <div class="content">
+                                                <div class="description">
+                                                    <span class="ui yellow circular label">2</span>
+                                                    <strong>${lf("Move the .uf2 file to the EV3 brick")}</strong>
+                                                    <br />
+                                                    <span style="font-size:small">${lf("Locate the downloaded .uf2 file and drag it to the EV3 USB drive")}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                            </div>
                        </div>
                    </div>
                </div>
-                <div class="column">
-                    <div class="ui">
-                        <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;">
-                        </div>
-                        <div class="content">
-                            <div class="description">
-                                <span class="ui blue circular label">2</span>
-                                ${lf("Locate the downloaded .uf2 file and drag it to the EV3 drive")}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="ui one column grid">
-                <div class="column">
-                    <a href="/troubleshoot" target="_blank" class="ui segment container yellow">
-                        <i class="icon exclamation circle large" aria-hidden="true"></i>
-                        ${lf("Something wrong? Click here to troubleshoot..")}
-                    </a>
-                </div>
            </div>`;

            return confirmAsync({
@ -71,6 +83,7 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                hideCancel: true,
                hideAgree: false,
                agreeLbl: lf("I got it"),
+                className: 'downloaddialog',
                buttons: [downloadAgain ? {
                    label: fn,
                    icon: "download",
--- a/jenkins.groovy
+++ b/jenkins.groovy
@ -24,6 +24,7 @@ def projectName = "pxt-ev3"
                credentialsBinding {
                    string("PXT_ACCESS_TOKEN", "pxt_access_token")
                    string("PXT_RELEASE_REPO", "pxt_release_repo_ev3")
+                    string("CROWDIN_KEY", "pxt_crowdin_key")
                }
            }
        }
--- a/legoresources/musicicons/numbers.svg
+++ b/legoresources/musicicons/numbers.svg
@ -45,6 +45,14 @@
         id="path140"
         inkscape:connector-curvature="0" />
    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath138-5">
+      <path
+         d="m 0,2662.542 4880.569,0 L 4880.569,0 0,0 0,2662.542 Z"
+         id="path140-3"
+         inkscape:connector-curvature="0" />
+    </clipPath>
  </defs>
  <sodipodi:namedview
     id="base"
@ -53,8 +61,8 @@
     borderopacity="1.0"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="33.67086"
+     inkscape:zoom="0.7"
+     inkscape:cx="-89.900569"
     inkscape:cy="152.39534"
     inkscape:document-units="px"
     inkscape:current-layer="g4178"
@ -102,35 +110,49 @@
        <g
           id="g4178"
           transform="translate(0.33476913,-24.377094)">
-          <path
-             id="path4172"
-             style="font-style:normal;font-weight:normal;font-size:93.26059723px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-             d="m -129.49327,130.11985 32.103871,0 0,7.74136 -43.169461,0 0,-7.74136 q 5.23681,-5.41895 14.25321,-14.52643 9.06194,-9.15302 11.38435,-11.79419 4.41713,-4.963577 6.14755,-8.378882 1.77596,-3.460842 1.77596,-6.785072 0,-5.418951 -3.82514,-8.834256 -3.77961,-3.415305 -9.88162,-3.415305 -4.32605,0 -9.15302,1.502734 -4.78142,1.502734 -10.24591,4.55374 l 0,-9.28963 q 5.55556,-2.231332 10.38253,-3.369767 4.82696,-1.138435 8.83425,-1.138435 10.56468,0 16.84884,5.282338 6.284162,5.282339 6.284162,14.116594 0,4.189441 -1.593809,7.969046 -1.548273,3.734066 -5.692173,8.834255 -1.13844,1.32058 -7.24045,7.65028 -6.10201,6.28417 -17.21314,17.62298 z"
-             transform="matrix(0.9566764,0,0,-0.9566764,3511.7806,1622.5188)"
-             inkscape:connector-curvature="0" />
-          <path
-             id="path4174"
-             style="font-style:normal;font-weight:normal;font-size:93.26059723px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-             d="m -50.167113,101.2036 q 6.602923,1.41166 10.291452,5.87432 3.734067,4.46267 3.734067,11.02005 0,10.06377 -6.921685,15.5738 -6.921685,5.51002 -19.672157,5.51002 -4.280516,0 -8.834256,-0.86521 -4.508203,-0.81967 -9.335167,-2.50456 l 0,-8.87979 q 3.825142,2.23133 8.378882,3.36977 4.55374,1.13843 9.517316,1.13843 8.652107,0 13.160309,-3.4153 4.55374,-3.41531 4.55374,-9.92716 0,-6.01093 -4.234978,-9.3807 -4.189441,-3.41531 -11.703112,-3.41531 l -7.923508,0 0,-7.559204 8.287807,0 q 6.785073,0 10.382528,-2.686707 3.597454,-2.732244 3.597454,-7.832433 0,-5.236801 -3.734066,-8.014582 -3.68853,-2.823319 -10.610215,-2.823319 -3.779604,0 -8.105657,0.819673 -4.326053,0.819673 -9.517317,2.550094 l 0,-8.196732 q 5.236801,-1.457197 9.790541,-2.185795 4.599278,-0.728598 8.652106,-0.728598 10.473603,0 16.575614,4.781427 6.102012,4.735889 6.102012,12.841547 0,5.646637 -3.233155,9.562854 -3.233156,3.870679 -9.198555,5.373415 z"
-             transform="matrix(0.9566764,0,0,-0.9566764,3511.7806,1622.5188)"
-             inkscape:connector-curvature="0" />
          <g
-             transform="matrix(0.7891314,0,0,0.7891314,3352.046,1573.2574)"
-             id="g146">
-            <path
-               inkscape:connector-curvature="0"
-               id="path148"
-               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-               d="m 0,0 -18.637,-14.649 c -0.84,-6.455 -3.384,-12.372 -7.173,-17.286 l 2.958,-3.734 c 9.327,7.568 14.807,12.06 16.444,13.477 1.635,1.416 3.013,2.71 4.137,3.881 -0.391,-4.834 -0.585,-11.377 -0.585,-19.628 l 0,-69.141 17.211,0 L 14.355,0 0,0 Z" />
-          </g>
-          <g
-             transform="matrix(0.7891314,0,0,0.7891314,3322.4112,1563.8678)"
-             id="g150">
-            <path
-               inkscape:connector-curvature="0"
-               id="path152"
-               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-               d="m 0,0 c -0.348,-6.542 -5.815,-7.142 -5.815,-7.142 -1.215,-2.91 -3.873,-4.962 -6.997,-5.402 -0.033,7.214 -0.004,13.178 -0.004,13.178 2.809,-0.426 5.331,-1.963 6.996,-4.268 0.734,0.041 1.61,0 1.61,0 0,0 2.493,7.109 -2.864,12.154 -5.359,5.044 -15.686,5.047 -19.551,0 -2.815,-3.38 -3.687,-7.977 -2.304,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.178 c -3.048,0.623 -5.637,2.616 -7.019,5.402 -3.417,0.68 -5.892,3.66 -5.931,7.142 0.036,10.442 7.894,16.418 16.86,16.418 C -7.798,16.418 0.656,9.564 0,0 m -16.795,29.088 c -14.994,0 -27.15,-12.156 -27.15,-27.151 0,-14.995 12.156,-27.15 27.15,-27.15 14.995,0 27.15,12.155 27.15,27.15 0,14.995 -12.155,27.151 -27.15,27.151" />
+             transform="translate(1967.0046,-457.69592)"
+             id="g134-7">
+            <g
+               id="g136-0"
+               clip-path="url(#clipPath138-5)">
+              <g
+                 id="g142-0"
+                 transform="translate(1451.6599,1974.7396)">
+                <path
+                   d="m 0,0 -59.338,0 0,12.483 21.308,21.541 c 6.309,6.463 10.431,10.945 12.367,13.441 1.934,2.497 3.328,4.809 4.181,6.938 0.851,2.129 1.277,4.335 1.277,6.619 0,3.406 -0.94,5.941 -2.816,7.606 -1.878,1.664 -4.384,2.497 -7.519,2.497 -3.291,0 -6.484,-0.755 -9.58,-2.264 -3.097,-1.51 -6.329,-3.658 -9.696,-6.445 l -9.755,11.554 c 4.181,3.56 7.645,6.077 10.393,7.548 2.748,1.47 5.748,2.603 9,3.397 3.251,0.793 6.889,1.19 10.915,1.19 5.303,0 9.987,-0.968 14.051,-2.903 4.065,-1.936 7.218,-4.645 9.464,-8.129 2.245,-3.483 3.368,-7.471 3.368,-11.96 0,-3.91 -0.688,-7.577 -2.061,-11.003 -1.375,-3.425 -3.504,-6.938 -6.387,-10.538 -2.885,-3.6 -7.965,-8.729 -15.241,-15.386 l -10.916,-10.277 0,-0.813 L 0,15.096 0,0 Z"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path144"
+                   inkscape:connector-curvature="0" />
+              </g>
+              <g
+                 id="g146"
+                 transform="translate(1376.5061,2014.3344)">
+                <path
+                   d="m 0,0 c -5.642,-7.604 -14.242,-12.871 -24.098,-14.121 l -9.612,-7.652 8.651,-10.799 9.755,7.838 c 1.161,0.929 3.231,2.883 6.212,5.864 l -0.29,-8.825 -0.174,-8.071 0,-49.12 17.941,0 L 8.385,0 0,0 Z"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path148"
+                   inkscape:connector-curvature="0" />
+              </g>
+              <g
+                 id="g150"
+                 transform="translate(1507.6936,1995.3485)">
+                <path
+                   d="m 0,0 c 0,-5.303 -1.606,-9.813 -4.819,-13.528 -3.213,-3.716 -7.722,-6.271 -13.528,-7.664 l 0,-0.349 c 6.851,-0.852 12.037,-2.932 15.56,-6.241 3.522,-3.31 5.284,-7.771 5.284,-13.384 0,-8.167 -2.961,-14.525 -8.884,-19.073 -5.922,-4.548 -14.38,-6.822 -25.373,-6.822 -9.212,0 -17.38,1.528 -24.501,4.587 l 0,15.27 c 3.289,-1.665 6.909,-3.019 10.857,-4.064 3.948,-1.045 7.858,-1.568 11.728,-1.568 5.923,0 10.297,1.006 13.122,3.019 2.825,2.013 4.239,5.244 4.239,9.696 0,3.987 -1.626,6.812 -4.877,8.477 -3.252,1.665 -8.439,2.497 -15.561,2.497 l -6.445,0 0,13.761 6.561,0 c 6.58,0 11.389,0.86 14.429,2.583 3.038,1.722 4.558,4.674 4.558,8.855 0,6.425 -4.027,9.638 -12.078,9.638 -2.786,0 -5.622,-0.464 -8.505,-1.394 -2.884,-0.928 -6.087,-2.536 -9.609,-4.818 l -8.304,12.366 c 7.742,5.574 16.974,8.361 27.696,8.361 8.786,0 15.725,-1.781 20.815,-5.341 C -2.545,11.302 0,6.347 0,0"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path152"
+                   inkscape:connector-curvature="0" />
+              </g>
+              <g
+                 id="g154"
+                 transform="translate(1364.6829,2033.5956)">
+                <path
+                   d="m 0,0 c -0.348,-6.542 -5.816,-7.142 -5.816,-7.142 -1.214,-2.91 -3.873,-4.962 -6.996,-5.401 -0.032,7.213 -0.004,13.177 -0.004,13.177 2.81,-0.426 5.331,-1.963 6.996,-4.268 0.734,0.041 1.611,0 1.611,0 0,0 2.493,7.109 -2.865,12.154 -5.358,5.045 -15.685,5.048 -19.551,0 -2.815,-3.38 -3.687,-7.977 -2.304,-12.154 0.408,-0.075 0.827,-0.075 1.235,0 0,0 2.794,4.043 7.019,4.268 l 0,-13.177 c -3.047,0.623 -5.637,2.615 -7.019,5.401 -3.417,0.68 -5.891,3.66 -5.931,7.142 0.037,10.442 7.894,16.419 16.86,16.419 C -7.798,16.419 0.656,9.564 0,0 m -16.794,29.088 c -14.995,0 -27.151,-12.156 -27.151,-27.151 0,-14.994 12.156,-27.15 27.151,-27.15 14.994,0 27.15,12.156 27.15,27.15 0,14.995 -12.156,27.151 -27.15,27.151"
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   id="path156"
+                   inkscape:connector-curvature="0" />
+              </g>
+            </g>
          </g>
        </g>
      </g>
--- a/legoresources/musicicons/sounds_icons_2.ai
+++ b/legoresources/musicicons/sounds_icons_2.ai
--- a/libs/color-sensor/color.ts
+++ b/libs/color-sensor/color.ts
@ -185,7 +185,7 @@ namespace sensors {
         * @param handler the code to run when detected
         */
        //% help=sensors/color-sensor/on-light-detected
-        //% block="on **color sensor** %this|detected %mode|%condition"
+        //% block="on **color sensor** %this|%mode|%condition"
        //% blockId=colorOnLightDetected
        //% parts="colorsensor"
        //% blockNamespace=sensors
@ -202,7 +202,7 @@ namespace sensors {
         * @param color the color to detect
         */
        //% help=sensors/color-sensor/pause-until-light-detected
-        //% block="pause until **color sensor** %this|detected %mode|%condition"
+        //% block="pause until **color sensor** %this|%mode|%condition"
        //% blockId=colorPauseUntilLightDetected
        //% parts="colorsensor"
        //% blockNamespace=sensors
--- a/libs/music/icons.jres
+++ b/libs/music/icons.jres
@ -25,7 +25,7 @@
    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFWwAABVsBgZCHQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAcQSURBVHic7ZxnzBRFHId/Q7ECdgy2D4KixoINNSrGbjSGaCIa0aAfMGpiBGOLJbElGnuJir3EqIkFC8QEFYkRCxaMxl5QwisiVqyvwvv4Yfbiuezt7czO7btH5knI8t7tzjPl7nb3P/8dKRKJRCKRSCQSiUQikUgkEolEIpHIqo4JVRAwQtLhkraWNELSMElLJC2W9Iak2caY3lC+SAIwHngVWEE+y4D7gS37u86rBMBo4JU2nZ5FL3AtsFp/t6FrAQ4BfvLo/GbmAhtXXO8BVfo6AnAEsLxk5zf4CFi3w/XdDngC+DVxfglcBKzRSW9HALYBfg7U+Q1mAYM6VN/9gN9beF8G1u6E14XCV0HYr+9bknbO2W2BpNmSvpL0q6ThknaTNE5S3iduqjHmxqJ1KQKwlqTPJG2Ss9uzko4yxqwI6e4IwPE5n+J3gcOAzAEF1geuAP5qcfxSYJ3A9T2u4DfwlpDejgF82KIBD5H8ngIjgTOA64EbgKnAmKYydgUWtSjnvMD1vazgAACcFdIdHGDbFhWfBQwCBgPTaH0v8GpjIIAdsPcEad4IXOfzHQZgBXB0SH9QgHMzKt0LjEren1agkX8CByb7n5Pxfh/2bjpUnXd3GACAP4A9Q/mDAtyXUeEnk/f2SjqvCEuBYcCawG8Z7++f8o4HtipR7+mOg7CEiu/Ui96YZF1JzEy2J6r41dSGkiYaY/6UNCfj/U1Tfw+Q9BywUcHy00yS9J7D/sMlzSrhc6boAKyX8dqCZLuro3Nssu0p4PlN0khJjwOrO3pkjFkmGyBc5HDYSElP+Ph8KDoA32W89keyXSvZzpW0v6Q7UvsdL2lKUxmDk21fAU/jLnmcpAdpcZmbhzGmR9J42cEsyr6+PleKDsDijNd2T7YfS7pX0jhjzBz9NzANeowxN0kak+zb+OTvklHmN6m/12/6/wRJVxSs7/8wxrwj6VhJyx0O8/YFBzg944TVA4wANgAGNu17fWq/cU3vDUv+HZ5R3t+k4kLYe4k0p5VoxymOJ+VSvmAAm5F9pfN10qjBTfvmDcAI4BLsJV+a5zO8r2fs9zdwaIm2XOc4AP+U8QWD/Nj/pU37pQdgv+T1gdgQdCsmp3zr0Dp08Quwo2c7BmCjoy4sA3Yq14MlAQ7IqWAfcDH2jnilAQDWBR7NOf5zUhM0tP+56AE292zLmuR/GIL6ggHMbFPJhdgYfzMvAz+2Oe6YDNdrBTplPjDUsy0bAp8WcDTzPoGDhq6V3gD4wrHS7bgnw5N1km7Fc3jOJ2CDh9851tfbFwRgJ8pPRzZ4nqYTeJNjnmM500q0Z19an2tacXe5XiwJMIrW4emi3EWLiXlgAsXjSw28w9mJr11WR5rz/XswAMB6wO3YyzQXFgGTCpR/oWO5fcDEEu25wMN3gq8vGNj0lDuxkcQ83gbOxk4VFi37NsdO6SUVUXVsS6U+KWxm3ADZ8MRo2ejpUNnMuG8kzTPGLPQoc5CkGZJcboR+kLS3MeYTD99ASdMlHVmFrysAhmLnnF34Ahhewjff0felr68rADbB3mO4MA+Hn7v+9HUFwPa45yQ9hmc2XNW+rgCb+uJ61XV1xb5rQra5duAXUj61hG+yh6//Q9idBLjKsUP+ArYt4bvS0ddbxld7AEN+dDUL7wy4xPdIVb6uAFgDeMuhQ+bW0dfNZ+xdJLl8zf8J4NvGYf9C889dOQDY2amZ+i8jowivBPC5pLN7+2oNsBXwrcNPAdgJIa+0x6p9tQabHPCVY2f0Aod0g6/WYKcQXecglgMTSvg+8PAdG7rt/Q42l8jlCgRsvH5y+9Jb+t6syldrsBkMcxw7A+CcbvDVGmyaywyPzri8hO9ZD189UhhDgk2getijM27tBl+twd76F3nqJs1D+Iefb6zSV2twD7YBPIN/fpBrsK3hWymlpusBzvTojNl4Pvnu6XvJ11drgJNwzweah3964iQP33w6vLxCvwAcjfsaFJ/gP/l+lKev0gVGKgE4GPf0wIXAFp6+g6r01RrsY65Zj6zmsQQY7enbs0pfrQF2pH3qepqfaVr+oCJf3gIl3Qk2zLvYsTN+B/bx9I2q0ldr8A/zHlbCt6AqX60BNmLlp2jasZyMp2gcfD5hbC9frQGGAO84dkYfcJKnb21sVrar7+TATa8H2OcJXJlSwueabg4wNWSbawM267jXsTMuKeEbgvu1/qXtS+5SgLGOnXFTSZ/rekE3h2prLQHGOHTGA5RcKAP7MGFRKlmYo1/BzjZ9X6AzphPgMdDEt7SA76kQvq4Au4hfHi8QcJ0eYEob34usimHlVmBnurJWQAE7FzukA7700gkNZoT2+dAvv3vAHpImStpCdpGmp40xM/OPKuUbK+mEqnyRSCQSiUQikUgkEolEIpFIJBKJRCLN/Au31WZBBGj8AQAAAABJRU5ErkJggg=="
  },
  "numbers": {
-    "icon": "data:image/png;base64,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"
+    "icon": "data:image/png;base64,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"
  },
  "system": {
    "icon": "data:image/png;base64,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"
--- a/libs/music/jres/icons/numbers-icon.png
+++ b/libs/music/jres/icons/numbers-icon.png
--- a/libs/music/music.cpp
+++ b/libs/music/music.cpp
@ -164,7 +164,7 @@ void playTone(int frequency, int ms) {
 }

 /**
-* Play a tone through the speaker for some amount of time.
+* Stop all sounds.
 */
 //% help=music/stop-all-sounds
 //% blockId=music_stop_all_sounds block="stop all sounds"
--- a/libs/music/shims.d.ts
+++ b/libs/music/shims.d.ts
@ -26,7 +26,7 @@ declare namespace music {
    function playTone(frequency: int32, ms: int32): void;

    /**
-     * Play a tone through the speaker for some amount of time.
+     * Stop all sounds.
     */
    //% help=music/stop-all-sounds
    //% blockId=music_stop_all_sounds block="stop all sounds"
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "pxt-ev3",
-  "version": "0.1.33",
+  "version": "0.2.1",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -413,7 +413,6 @@
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true,
      "optional": true
    },
    "asn1": {
@ -475,7 +474,7 @@
      "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
      "requires": {
        "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000784",
+        "caniuse-db": "1.0.30000833",
        "normalize-range": "0.1.2",
        "num2fraction": "1.2.2",
        "postcss": "5.2.18",
@ -593,6 +592,82 @@
        }
      }
    },
+    "browserify": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/browserify/-/browserify-16.2.0.tgz",
+      "integrity": "sha512-yotdAkp/ZbgDesHQBYU37zjc29JDH4iXT8hjzM1fdUVWogjARX0S1cKeX24Ci6zZ+jG+ADmCTRt6xvtmJnI+BQ==",
+      "requires": {
+        "JSONStream": "1.3.2",
+        "assert": "1.4.1",
+        "browser-pack": "6.0.2",
+        "browser-resolve": "1.11.2",
+        "browserify-zlib": "0.2.0",
+        "buffer": "5.1.0",
+        "cached-path-relative": "1.0.1",
+        "concat-stream": "1.6.2",
+        "console-browserify": "1.1.0",
+        "constants-browserify": "1.0.0",
+        "crypto-browserify": "3.12.0",
+        "defined": "1.0.0",
+        "deps-sort": "2.0.0",
+        "domain-browser": "1.2.0",
+        "duplexer2": "0.1.4",
+        "events": "2.0.0",
+        "glob": "7.1.2",
+        "has": "1.0.1",
+        "htmlescape": "1.1.1",
+        "https-browserify": "1.0.0",
+        "inherits": "2.0.3",
+        "insert-module-globals": "7.0.1",
+        "labeled-stream-splicer": "2.0.0",
+        "mkdirp": "0.5.1",
+        "module-deps": "6.0.2",
+        "os-browserify": "0.3.0",
+        "parents": "1.0.1",
+        "path-browserify": "0.0.0",
+        "process": "0.11.10",
+        "punycode": "1.4.1",
+        "querystring-es3": "0.2.1",
+        "read-only-stream": "2.0.0",
+        "readable-stream": "2.3.3",
+        "resolve": "1.5.0",
+        "shasum": "1.0.2",
+        "shell-quote": "1.6.1",
+        "stream-browserify": "2.0.1",
+        "stream-http": "2.7.2",
+        "string_decoder": "1.1.1",
+        "subarg": "1.0.0",
+        "syntax-error": "1.3.0",
+        "through2": "2.0.3",
+        "timers-browserify": "1.4.2",
+        "tty-browserify": "0.0.1",
+        "url": "0.11.0",
+        "util": "0.10.3",
+        "vm-browserify": "1.0.1",
+        "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "1.6.2",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+          "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+          "requires": {
+            "buffer-from": "1.0.0",
+            "inherits": "2.0.3",
+            "readable-stream": "2.3.3",
+            "typedarray": "0.0.6"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
    "browserify-aes": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.1.1.tgz",
@ -649,13 +724,30 @@
        "parse-asn1": "5.1.0"
      }
    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "requires": {
+        "pako": "1.0.6"
+      }
+    },
    "browserslist": {
      "version": "1.7.7",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
      "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
      "requires": {
-        "caniuse-db": "1.0.30000784",
-        "electron-to-chromium": "1.3.30"
+        "caniuse-db": "1.0.30000833",
+        "electron-to-chromium": "1.3.45"
+      }
+    },
+    "buffer": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.1.0.tgz",
+      "integrity": "sha512-YkIRgwsZwJWTnyQrsBTWefizHh+8GYj3kbL1BTiAQ/9pwpino0G7B2gp5tx/FUBqUlvtxV85KNR3mwfAtv15Yw==",
+      "requires": {
+        "base64-js": "1.2.1",
+        "ieee754": "1.1.8"
      }
    },
    "buffer-from": {
@ -700,7 +792,7 @@
      "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
      "requires": {
        "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000784",
+        "caniuse-db": "1.0.30000833",
        "lodash.memoize": "4.1.2",
        "lodash.uniq": "4.5.0"
      },
@ -713,9 +805,9 @@
      }
    },
    "caniuse-db": {
-      "version": "1.0.30000784",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000784.tgz",
-      "integrity": "sha1-G+lQEtlInHcZB0+BruV9vf/mNhs="
+      "version": "1.0.30000833",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000833.tgz",
+      "integrity": "sha1-K9e+cqQBZY0svLj012AN7r6xxnY="
    },
    "caseless": {
      "version": "0.12.0",
@ -1200,6 +1292,16 @@
        "minimalistic-assert": "1.0.0"
      }
    },
+    "detective": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.1.0.tgz",
+      "integrity": "sha512-TFHMqfOvxlgrfVzTEkNBSh9SvSNX/HfF4OFI2QFGCyPm02EsyILqnUeb5P6q7JZ3SFNTBL5t2sePRgrN4epUWQ==",
+      "requires": {
+        "acorn-node": "1.3.0",
+        "defined": "1.0.0",
+        "minimist": "1.2.0"
+      }
+    },
    "diffie-hellman": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz",
@ -1210,6 +1312,11 @@
        "randombytes": "2.0.6"
      }
    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
+    },
    "duplexer2": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@ -1227,18 +1334,10 @@
        "jsbn": "0.1.1"
      }
    },
-    "electron-releases": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/electron-releases/-/electron-releases-2.1.0.tgz",
-      "integrity": "sha512-cyKFD1bTE/UgULXfaueIN1k5EPFzs+FRc/rvCY5tIynefAPqopQEgjr0EzY+U3Dqrk/G4m9tXSPuZ77v6dL/Rw=="
-    },
    "electron-to-chromium": {
-      "version": "1.3.30",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz",
-      "integrity": "sha512-zx1Prv7kYLfc4OA60FhxGbSo4qrEjgSzpo1/37i7l9ltXPYOoQBtjQxY9KmsgfHnBxHlBGXwLlsbt/gub1w5lw==",
-      "requires": {
-        "electron-releases": "2.1.0"
-      }
+      "version": "1.3.45",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.45.tgz",
+      "integrity": "sha1-RYrBscXHYM6IEaFtK/vZfsMLr7g="
    },
    "elliptic": {
      "version": "6.4.0",
@ -1266,7 +1365,6 @@
      "version": "0.1.6",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.6.tgz",
      "integrity": "sha512-IsORQDpaaSwcDP4ZZnHxgE85werpo34VYn1Ud3mq+eUsF593faR8oCZNXrROVkpFu2TsbrNhHin0aUrTsQ9vNw==",
-      "dev": true,
      "optional": true,
      "requires": {
        "prr": "1.0.1"
@ -1287,6 +1385,11 @@
      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
      "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
    },
+    "events": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-2.0.0.tgz",
+      "integrity": "sha512-r/M5YkNg9zwI8QbSf7tsDWWJvO3PGwZXyG7GpFAxtMASnHL2eblFd7iHiGPtyGKKFPZ59S63NeX10Ws6WqGDcg=="
+    },
    "evp_bytestokey": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@ -1454,8 +1557,7 @@
    "graceful-fs": {
      "version": "4.1.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-      "dev": true
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
    },
    "handlebars": {
      "version": "4.0.11",
@ -1569,11 +1671,6 @@
        "sntp": "2.1.0"
      }
    },
-    "highlight.js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
-    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -1614,6 +1711,11 @@
        "sshpk": "1.13.1"
      }
    },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+    },
    "ieee754": {
      "version": "1.1.8",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
@ -1623,7 +1725,6 @@
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
-      "dev": true,
      "optional": true
    },
    "indexes-of": {
@ -1812,13 +1913,12 @@
    "jquery": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
-      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=",
-      "dev": true
+      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
    },
    "js-base64": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
-      "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA=="
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
+      "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw=="
    },
    "js-yaml": {
      "version": "3.7.0",
@ -1938,7 +2038,6 @@
      "version": "2.7.3",
      "resolved": "https://registry.npmjs.org/less/-/less-2.7.3.tgz",
      "integrity": "sha512-KPdIJKWcEAb02TuJtaLrhue0krtRLoRoo7x6BNJIBelO00t/CCdJQUnHW5V34OnHMWzIktSalJxRO+FvytQlCQ==",
-      "dev": true,
      "requires": {
        "errno": "0.1.6",
        "graceful-fs": "4.1.11",
@ -1954,7 +2053,6 @@
          "version": "4.11.8",
          "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
          "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
-          "dev": true,
          "optional": true,
          "requires": {
            "co": "4.6.0",
@ -1965,21 +2063,18 @@
          "version": "0.2.0",
          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
          "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
-          "dev": true,
          "optional": true
        },
        "aws-sign2": {
          "version": "0.6.0",
          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
          "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
-          "dev": true,
          "optional": true
        },
        "boom": {
          "version": "2.10.1",
          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-          "dev": true,
          "requires": {
            "hoek": "2.16.3"
          }
@ -1988,7 +2083,6 @@
          "version": "2.0.5",
          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-          "dev": true,
          "optional": true,
          "requires": {
            "boom": "2.10.1"
@ -1998,7 +2092,6 @@
          "version": "2.1.4",
          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
          "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-          "dev": true,
          "optional": true,
          "requires": {
            "asynckit": "0.4.0",
@ -2010,14 +2103,12 @@
          "version": "1.0.5",
          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
          "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
-          "dev": true,
          "optional": true
        },
        "har-validator": {
          "version": "4.2.1",
          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
          "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
-          "dev": true,
          "optional": true,
          "requires": {
            "ajv": "4.11.8",
@ -2028,7 +2119,6 @@
          "version": "3.1.3",
          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-          "dev": true,
          "optional": true,
          "requires": {
            "boom": "2.10.1",
@ -2040,14 +2130,12 @@
        "hoek": {
          "version": "2.16.3",
          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-          "dev": true
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
        },
        "http-signature": {
          "version": "1.1.1",
          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-          "dev": true,
          "optional": true,
          "requires": {
            "assert-plus": "0.2.0",
@ -2059,7 +2147,6 @@
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
          "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-          "dev": true,
          "optional": true,
          "requires": {
            "jsonify": "0.0.0"
@ -2069,21 +2156,18 @@
          "version": "0.2.0",
          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
-          "dev": true,
          "optional": true
        },
        "qs": {
          "version": "6.4.0",
          "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
          "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
-          "dev": true,
          "optional": true
        },
        "request": {
          "version": "2.81.0",
          "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
          "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
-          "dev": true,
          "optional": true,
          "requires": {
            "aws-sign2": "0.6.0",
@ -2114,7 +2198,6 @@
          "version": "1.0.9",
          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-          "dev": true,
          "optional": true,
          "requires": {
            "hoek": "2.16.3"
@ -2194,6 +2277,11 @@
        "object-visit": "1.0.1"
      }
    },
+    "marked": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
+      "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg=="
+    },
    "math-expression-evaluator": {
      "version": "1.2.17",
      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@ -2238,7 +2326,6 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
      "optional": true
    },
    "mime-db": {
@ -2308,6 +2395,41 @@
        }
      }
    },
+    "module-deps": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-6.0.2.tgz",
+      "integrity": "sha512-KWBI3009iRnHjRlxRhe8nJ6kdeBTg4sMi5N6AZgg5f1/v5S7EBCRBOY854I4P5Anl4kx6AJH+4bBBC2Gi3nkvg==",
+      "requires": {
+        "JSONStream": "1.3.2",
+        "browser-resolve": "1.11.2",
+        "cached-path-relative": "1.0.1",
+        "concat-stream": "1.6.2",
+        "defined": "1.0.0",
+        "detective": "5.1.0",
+        "duplexer2": "0.1.4",
+        "inherits": "2.0.3",
+        "parents": "1.0.1",
+        "readable-stream": "2.3.3",
+        "resolve": "1.5.0",
+        "stream-combiner2": "1.1.1",
+        "subarg": "1.0.0",
+        "through2": "2.0.3",
+        "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "1.6.2",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+          "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+          "requires": {
+            "buffer-from": "1.0.0",
+            "inherits": "2.0.3",
+            "readable-stream": "2.3.3",
+            "typedarray": "0.0.6"
+          }
+        }
+      }
+    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@ -2545,6 +2667,11 @@
        }
      }
    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+    },
    "os-homedir": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@ -2566,6 +2693,11 @@
        "os-tmpdir": "1.0.2"
      }
    },
+    "pako": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
+      "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
+    },
    "parents": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parents/-/parents-1.0.1.tgz",
@ -2640,7 +2772,7 @@
      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
      "requires": {
        "chalk": "1.1.3",
-        "js-base64": "2.4.0",
+        "js-base64": "2.4.3",
        "source-map": "0.5.7",
        "supports-color": "3.2.3"
      }
@ -2948,7 +3080,6 @@
      "version": "7.3.1",
      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
      "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
-      "dev": true,
      "optional": true,
      "requires": {
        "asap": "2.0.6"
@ -3124,7 +3255,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true,
      "optional": true
    },
    "public-encrypt": {
@ -3154,27 +3284,24 @@
      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
    },
    "pxt-common-packages": {
-      "version": "0.21.13",
-      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.21.13.tgz",
-      "integrity": "sha512-dzCGJhBc28mlGW6LidgZKUE5FLREDkbID/1zvona6jmBG6s3XTPyu6SuxWQdrPeWroJ9AAzHWm9Ylf4nnxIYsA==",
+      "version": "0.22.2",
+      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.22.2.tgz",
+      "integrity": "sha512-bndrU1Aqig0O504QuaQYICrSQfQF7QFBoOArl0hdY7NWfq2yNJu8CHoW2oKJm+r+LTz150D4XuHjCIGLEv2MBQ==",
      "requires": {
-        "autoprefixer": "6.7.7",
-        "pxt-core": "3.12.9",
-        "rtlcss": "2.2.1"
+        "pxt-core": "3.12.18"
      }
    },
    "pxt-core": {
-      "version": "3.12.9",
-      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.9.tgz",
-      "integrity": "sha512-My7Fmcuv2ZIGmoTMncCq1KlQAD0Hwg/L7vNlD+9HIhLJm5367kglXA1Q+hy/wLjTq2m3Axybk47hnkOlWg54NA==",
+      "version": "3.12.18",
+      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.18.tgz",
+      "integrity": "sha512-Dd1XHjMjSR6gqf8B2LB7mtppD+VI49wckd/jCK8dHZcjb7RbngqTnfjOuHcDbXfSrvDrGFNzBhYvYaLf70AV7g==",
      "requires": {
        "bluebird": "3.5.1",
        "browserify": "16.2.0",
        "cssnano": "3.10.0",
        "faye-websocket": "0.11.1",
-        "fuse.js": "3.2.0",
-        "highlight.js": "9.12.0",
        "keytar": "4.2.1",
+        "less": "2.7.3",
        "lzma": "2.3.2",
        "marked": "0.3.19",
        "node-hid": "0.5.7",
@ -3183,6 +3310,7 @@
        "request": "2.85.0",
        "rimraf": "2.5.4",
        "rtlcss": "2.2.1",
+        "semantic-ui-less": "2.2.14",
        "serialport": "6.0.5",
        "uglify-js": "3.3.21"
      },
@ -3195,78 +3323,6 @@
            "color-convert": "1.9.1"
          }
        },
-        "browserify": {
-          "version": "16.2.0",
-          "resolved": "https://registry.npmjs.org/browserify/-/browserify-16.2.0.tgz",
-          "integrity": "sha512-yotdAkp/ZbgDesHQBYU37zjc29JDH4iXT8hjzM1fdUVWogjARX0S1cKeX24Ci6zZ+jG+ADmCTRt6xvtmJnI+BQ==",
-          "requires": {
-            "JSONStream": "1.3.2",
-            "assert": "1.4.1",
-            "browser-pack": "6.0.2",
-            "browser-resolve": "1.11.2",
-            "browserify-zlib": "0.2.0",
-            "buffer": "5.1.0",
-            "cached-path-relative": "1.0.1",
-            "concat-stream": "1.6.2",
-            "console-browserify": "1.1.0",
-            "constants-browserify": "1.0.0",
-            "crypto-browserify": "3.12.0",
-            "defined": "1.0.0",
-            "deps-sort": "2.0.0",
-            "domain-browser": "1.2.0",
-            "duplexer2": "0.1.4",
-            "events": "2.0.0",
-            "glob": "7.1.2",
-            "has": "1.0.1",
-            "htmlescape": "1.1.1",
-            "https-browserify": "1.0.0",
-            "inherits": "2.0.3",
-            "insert-module-globals": "7.0.1",
-            "labeled-stream-splicer": "2.0.0",
-            "mkdirp": "0.5.1",
-            "module-deps": "6.0.2",
-            "os-browserify": "0.3.0",
-            "parents": "1.0.1",
-            "path-browserify": "0.0.0",
-            "process": "0.11.10",
-            "punycode": "1.4.1",
-            "querystring-es3": "0.2.1",
-            "read-only-stream": "2.0.0",
-            "readable-stream": "2.3.3",
-            "resolve": "1.5.0",
-            "shasum": "1.0.2",
-            "shell-quote": "1.6.1",
-            "stream-browserify": "2.0.1",
-            "stream-http": "2.7.2",
-            "string_decoder": "1.1.1",
-            "subarg": "1.0.0",
-            "syntax-error": "1.3.0",
-            "through2": "2.0.3",
-            "timers-browserify": "1.4.2",
-            "tty-browserify": "0.0.1",
-            "url": "0.11.0",
-            "util": "0.10.3",
-            "vm-browserify": "1.0.1",
-            "xtend": "4.0.1"
-          }
-        },
-        "browserify-zlib": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-          "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
-          "requires": {
-            "pako": "1.0.6"
-          }
-        },
-        "buffer": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.1.0.tgz",
-          "integrity": "sha512-YkIRgwsZwJWTnyQrsBTWefizHh+8GYj3kbL1BTiAQ/9pwpino0G7B2gp5tx/FUBqUlvtxV85KNR3mwfAtv15Yw==",
-          "requires": {
-            "base64-js": "1.2.1",
-            "ieee754": "1.1.8"
-          }
-        },
        "chalk": {
          "version": "2.4.1",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
@ -3277,94 +3333,11 @@
            "supports-color": "5.4.0"
          }
        },
-        "commander": {
-          "version": "2.15.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
-          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
-        },
-        "concat-stream": {
-          "version": "1.6.2",
-          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-          "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-          "requires": {
-            "buffer-from": "1.0.0",
-            "inherits": "2.0.3",
-            "readable-stream": "2.3.3",
-            "typedarray": "0.0.6"
-          }
-        },
-        "detective": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/detective/-/detective-5.1.0.tgz",
-          "integrity": "sha512-TFHMqfOvxlgrfVzTEkNBSh9SvSNX/HfF4OFI2QFGCyPm02EsyILqnUeb5P6q7JZ3SFNTBL5t2sePRgrN4epUWQ==",
-          "requires": {
-            "acorn-node": "1.3.0",
-            "defined": "1.0.0",
-            "minimist": "1.2.0"
-          }
-        },
-        "domain-browser": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-          "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
-        },
-        "events": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/events/-/events-2.0.0.tgz",
-          "integrity": "sha512-r/M5YkNg9zwI8QbSf7tsDWWJvO3PGwZXyG7GpFAxtMASnHL2eblFd7iHiGPtyGKKFPZ59S63NeX10Ws6WqGDcg=="
-        },
-        "fuse.js": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.2.0.tgz",
-          "integrity": "sha1-8ESOgGmFW/Kj5oPNwdMg5+KgfvQ="
-        },
        "has-flag": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
        },
-        "https-browserify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-          "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
-        },
-        "marked": {
-          "version": "0.3.19",
-          "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
-          "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg=="
-        },
-        "module-deps": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-6.0.2.tgz",
-          "integrity": "sha512-KWBI3009iRnHjRlxRhe8nJ6kdeBTg4sMi5N6AZgg5f1/v5S7EBCRBOY854I4P5Anl4kx6AJH+4bBBC2Gi3nkvg==",
-          "requires": {
-            "JSONStream": "1.3.2",
-            "browser-resolve": "1.11.2",
-            "cached-path-relative": "1.0.1",
-            "concat-stream": "1.6.2",
-            "defined": "1.0.0",
-            "detective": "5.1.0",
-            "duplexer2": "0.1.4",
-            "inherits": "2.0.3",
-            "parents": "1.0.1",
-            "readable-stream": "2.3.3",
-            "resolve": "1.5.0",
-            "stream-combiner2": "1.1.1",
-            "subarg": "1.0.0",
-            "through2": "2.0.3",
-            "xtend": "4.0.1"
-          }
-        },
-        "os-browserify": {
-          "version": "0.3.0",
-          "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-          "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
-        },
-        "pako": {
-          "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
-          "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
-        },
        "postcss": {
          "version": "6.0.21",
          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz",
@ -3409,14 +3382,6 @@
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        },
        "supports-color": {
          "version": "5.4.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
@ -3424,25 +3389,6 @@
          "requires": {
            "has-flag": "3.0.0"
          }
-        },
-        "tty-browserify": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
-          "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw=="
-        },
-        "uglify-js": {
-          "version": "3.3.21",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.21.tgz",
-          "integrity": "sha512-uy82472lH8tshK3jS3c5IFb5MmNKd/5qyBd0ih8sM42L3jWvxnE339U9gZU1zufnLVs98Stib9twq8dLm2XYCA==",
-          "requires": {
-            "commander": "2.15.1",
-            "source-map": "0.6.1"
-          }
-        },
-        "vm-browserify": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.0.1.tgz",
-          "integrity": "sha512-EqzLchIMYLBjRPoqVsEkZOa/4Vr2RfOWbd58F+I/Gj79AYTrsseMunxbbSkbYfrqZaXSuPBBXNSOhtJgg0PpmA=="
        }
      }
    },
@ -3727,54 +3673,44 @@
      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.2.1.tgz",
      "integrity": "sha512-JjQ5DlrmwiItAjlmhoxrJq5ihgZcE0wMFxt7S17bIrt4Lw0WwKKFk+viRhvodB/0falyG/5fiO043ZDh6/aqTw==",
      "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.4.1",
        "findup": "0.1.5",
        "mkdirp": "0.5.1",
-        "postcss": "6.0.15",
+        "postcss": "6.0.22",
        "strip-json-comments": "2.0.1"
      },
      "dependencies": {
        "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha1-wVm41b4PnlpvNG2rlPFs4CIWG4g=",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
          "requires": {
            "color-convert": "1.9.1"
          }
        },
        "chalk": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
-          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
          "requires": {
-            "ansi-styles": "3.2.0",
+            "ansi-styles": "3.2.1",
            "escape-string-regexp": "1.0.5",
-            "supports-color": "4.5.0"
+            "supports-color": "5.4.0"
          }
        },
        "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
        },
        "postcss": {
-          "version": "6.0.15",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.15.tgz",
-          "integrity": "sha512-v/SpyMzLbtkmh45zUdaqLAaqXqzPdSrw8p4cQVO0/w6YiYfpj4k+Wkzhn68qk9br+H+0qfddhdPEVnbmBPfXVQ==",
+          "version": "6.0.22",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.22.tgz",
+          "integrity": "sha512-Toc9lLoUASwGqxBSJGTVcOQiDqjK+Z2XlWBg+IgYwQMY9vA2f7iMpXVc1GpPcfTSyM5lkxNo0oDwDRO+wm7XHA==",
          "requires": {
-            "chalk": "2.3.0",
+            "chalk": "2.4.1",
            "source-map": "0.6.1",
-            "supports-color": "5.1.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
-              "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
-              "requires": {
-                "has-flag": "2.0.0"
-              }
-            }
+            "supports-color": "5.4.0"
          }
        },
        "source-map": {
@ -3783,11 +3719,11 @@
          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
        },
        "supports-color": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
          "requires": {
-            "has-flag": "2.0.0"
+            "has-flag": "3.0.0"
          }
        }
      }
@ -3806,7 +3742,6 @@
      "version": "2.2.14",
      "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.2.14.tgz",
      "integrity": "sha512-JLkTqjOtct+OwM/JRv0SH76gCC0eE98xp5G4D29e9VbJ66QjWD3nB3waB7drpaMUFXo/YbKcyNOJBgMamcJI0Q==",
-      "dev": true,
      "requires": {
        "jquery": "3.2.1"
      }
@ -4441,6 +4376,11 @@
        "node-gyp": "3.6.2"
      }
    },
+    "tty-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
+      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw=="
+    },
    "tunnel-agent": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@ -4466,6 +4406,27 @@
      "integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=",
      "dev": true
    },
+    "uglify-js": {
+      "version": "3.3.21",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.21.tgz",
+      "integrity": "sha512-uy82472lH8tshK3jS3c5IFb5MmNKd/5qyBd0ih8sM42L3jWvxnE339U9gZU1zufnLVs98Stib9twq8dLm2XYCA==",
+      "requires": {
+        "commander": "2.15.1",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.15.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
    "uglify-to-browserify": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
@ -4599,6 +4560,11 @@
        "extsprintf": "1.3.0"
      }
    },
+    "vm-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.0.1.tgz",
+      "integrity": "sha512-EqzLchIMYLBjRPoqVsEkZOa/4Vr2RfOWbd58F+I/Gj79AYTrsseMunxbbSkbYfrqZaXSuPBBXNSOhtJgg0PpmA=="
+    },
    "warning-symbol": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/warning-symbol/-/warning-symbol-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pxt-ev3",
-  "version": "0.1.33",
+  "version": "0.2.1",
  "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
  "private": true,
  "keywords": [
@ -30,13 +30,8 @@
    "docs/*/*.md",
    "docs/*/*/*.md"
  ],
-  "main": "built/pxtrequire.js",
-  "typings": "built/pxtrequire.d.ts",
  "devDependencies": {
    "typescript": "2.6.1",
-    "rtlcss": "^2.1.2",
-    "autoprefixer": "^6.7.6",
-    "less": "2.7.3",
    "semantic-ui-less": "2.2.14",
    "@types/bluebird": "2.0.33",
    "@types/marked": "0.3.0",
@ -44,8 +39,8 @@
    "webfonts-generator": "^0.4.0"
  },
  "dependencies": {
-    "pxt-common-packages": "0.22.1",
-    "pxt-core": "3.12.11"
+    "pxt-common-packages": "0.22.7",
+    "pxt-core": "3.13.30"
  },
  "scripts": {
    "test": "node node_modules/pxt-core/built/pxt.js travis"
--- a/pxtarget.json
+++ b/pxtarget.json
@ -81,7 +81,6 @@
        "accentColor": "#0089BF",
        "logoUrl": "https://education.lego.com/",
        "logo": "./static/lego_education_logo.png",
-        "highContrastLogo": "./static/lego_education_logo_white.png",
        "docsLogo": "./static/lego-logo.svg",
        "portraitLogo": "./static/lego-logo.svg",
        "footerLogo": "./static/lego-logo.svg",
@ -99,6 +98,8 @@
        "betaUrl": "https://makecode.legoeducation.com/about",
        "driveDisplayName": "EV3",
        "boardName": "LEGO® MINDSTORMS® Education EV3",
+        "copyrightText": "LEGO, the LEGO logo, MINDSTORMS and the MINDSTORMS EV3 logo are trademarks and/ or copyrights of the LEGO Group. ©2018 The LEGO Group. All rights reserved.",
+        "crowdinProject": "kindscript",
        "selectLanguage": true,
        "availableLocales": [
            "en"
@ -107,11 +108,11 @@
        "docMenu": [
            {
                "name": "Support",
-                "path": "http://service.lego.com"
+                "path": "https://www.lego.com/service/"
            },
            {
-                "name": "Upgrade Firmware",
-                "path": "https://ev3manager.education.lego.com/"
+                "name": "Troubleshoot",
+                "path": "/troubleshoot"
            },
            {
                "name": "Blocks",
@ -170,7 +171,8 @@
        },
        "monacoColors": {
            "editor.background": "#f9f9f9"
-        }
+        },
+        "fileNameExclusiveFilter": "[^a-zA-Z]"
    },
    "ignoreDocsErrors": true
 }
--- a/sim/state/motornode.ts
+++ b/sim/state/motornode.ts
@ -17,7 +17,8 @@ namespace pxsim {
        private speedCmdTime: number;
        private _synchedMotor: MotorNode; // non-null if synchronized

-        private manualSpeed: number = undefined;
+        private manualReferenceAngle: number = undefined;
+        private manualAngle: number = undefined;

        constructor(port: number, large: boolean) {
            super(port);
@ -103,14 +104,18 @@ namespace pxsim {
        }

        manualMotorDown() {
+            this.manualReferenceAngle = this.angle;
+            this.manualAngle = 0;
        }

-        manualMotorMove(speed: number) {
-            this.manualSpeed = speed;
+        // position: 0, 360
+        manualMotorAngle(angle: number) {
+            this.manualAngle = angle;
        }

        manualMotorUp() {
-            this.manualSpeed = undefined;
+            delete this.manualReferenceAngle;
+            delete this.manualAngle;
        }

        updateState(elapsed: number) {
@ -126,7 +131,7 @@ namespace pxsim {
        }

        private updateStateStep(elapsed: number) {
-            if (!this.manualSpeed) {
+            if (this.manualAngle === undefined) {
                // compute new speed
                switch (this.speedCmd) {
                    case DAL.opOutputSpeed:
@ -202,7 +207,11 @@ namespace pxsim {
                }
            }
            else {
-                this.speed = this.manualSpeed;
+                // the user is holding the handle - so position is the angle
+                this.speed = 0;
+                // rotate by the desired angle change
+                this.angle = this.manualReferenceAngle + this.manualAngle;
+                this.setChangedState();
            }
            this.speed = Math.round(this.speed); // integer only

@ -217,7 +226,8 @@ namespace pxsim {

            // if the motor was stopped or there are no speed commands,
            // let it coast to speed 0
-            if (this.speed && !(this.started || this.speedCmd)) {
+            if ((this.manualReferenceAngle === undefined)
+                && this.speed && !(this.started || this.speedCmd)) {
                // decay speed 5% per tick
                this.speed = Math.round(Math.max(0, Math.abs(this.speed) - 10) * sign(this.speed));
            }
--- a/sim/visuals/board.ts
+++ b/sim/visuals/board.ts
@ -49,14 +49,14 @@ namespace pxsim.visuals {
            font-size:16px;
        }
        .sim-text.large {
-            font-size:30px;
+            font-size:20px;
        }
        .sim-text.number {
            font-family: Courier, Lato, Work Sans, PT Serif, Source Serif Pro;
            /*font-weight: bold;*/
        }
        .sim-text.inverted {
-            fill:#5A5A5A;
+            fill: #5A5A5A; /*#F12B21;*/
        }

        .no-drag, .sim-text, .sim-text-pin {
@ -74,6 +74,10 @@ namespace pxsim.visuals {
            stroke: #000;
            cursor: pointer;
        }
+        .sim-color-selected {
+            stroke-width: 1px !important;
+            stroke: #A8AAA8 !important;
+        }
        .sim-color-wheel-half:hover {
            stroke-width: 1;
            stroke: #000;
@ -97,10 +101,13 @@ namespace pxsim.visuals {
    export const SCREEN_HEIGHT = 128;
    export interface IBoardTheme {
        accent?: string;
+        highContrast?: boolean;
        display?: string;
        buttonOuter?: string;
        buttonUps: string[];
        buttonDown?: string;
+        wireColor?: string;
+        backgroundViewColor?: string;
    }

    export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => {
@ -108,12 +115,21 @@ namespace pxsim.visuals {
            accent: accent,
            buttonOuter: "#979797",
            buttonUps: ["#a8aaa8", "#393939", "#a8aaa8", "#a8aaa8", "#a8aaa8", '#a8aaa8'],
-            buttonDown: "#000"
+            buttonDown: "#000",
+            wireColor: '#5A5A5A',
+            backgroundViewColor: '#d6edff'
        }
    });

    export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
-        return themes[Math.floor(Math.random() * themes.length)];
+        let theme = themes[Math.floor(Math.random() * themes.length)];
+        if (highContrast) {
+            theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme;
+            theme.highContrast = true;
+            theme.wireColor = '#ffffff';
+            theme.backgroundViewColor = '#ffffff';
+        }
+        return theme;
    }

    export interface IBoardProps {
@ -136,6 +152,8 @@ namespace pxsim.visuals {

        private cachedControlNodes: { [index: string]: View[] } = {};
        private cachedDisplayViews: { [index: string]: LayoutElement[] } = {};
+        private cachedCloseIcons: { [index: string]: View } = {};
+        private cachedBackgroundViews: { [index: string]: View } = {};

        private screenCanvas: HTMLCanvasElement;
        private screenCanvasCtx: CanvasRenderingContext2D;
@ -298,8 +316,22 @@ namespace pxsim.visuals {
            return undefined;
        }

-        private getCloseIconView() {
-            return new CloseIconControl(this.element, this.defs, new PortNode(-1), -1);
+        private getCloseIconView(port: number) {
+            if (this.cachedCloseIcons[port]) {
+                return this.cachedCloseIcons[port];
+            }
+            const closeIcon = new CloseIconControl(this.element, this.defs, new PortNode(-1), -1);
+            this.cachedCloseIcons[port] = closeIcon;
+            return closeIcon;
+        }
+
+        private getBackgroundView(port: number) {
+            if (this.cachedBackgroundViews[port]) {
+                return this.cachedBackgroundViews[port];
+            }
+            const backgroundView = new BackgroundViewControl(this.element, this.defs, new PortNode(-1), -1);
+            this.cachedBackgroundViews[port] = backgroundView;
+            return backgroundView;
        }

        private buildDom() {
@ -314,12 +346,12 @@ namespace pxsim.visuals {
            this.style.textContent = EV3_STYLE;

            this.layoutView = new LayoutView();
-            this.layoutView.inject(this.element);
+            this.layoutView.inject(this.element, this.props.theme);

            const brick = new BrickViewPortrait(-1);
            this.layoutView.setBrick(brick);
            EV3View.isPreviousBrickLandscape() ? this.layoutView.setlectBrick() : this.layoutView.unselectBrick();
-            
+
            this.resize();

            // Add Screen canvas to board
@ -392,29 +424,29 @@ namespace pxsim.visuals {
            this.layoutView.getLandscapeBrick().kill();

            // Save previous inputs for the next cycle
-            EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
-            EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1);
+            EV3View.previousSelectedInputs = {};
+            ev3board().getInputNodes().forEach((node, index) =>
+                EV3View.previousSelectedInputs[index] = (this.getDisplayViewForNode(node.id, index).getSelected()));
+            EV3View.previousSeletedOutputs = {};
+            ev3board().getMotors().forEach((node, index) =>
+                EV3View.previousSeletedOutputs[index] = (this.getDisplayViewForNode(node.id, index).getSelected()));
            EV3View.previousBrickLandscape = this.layoutView.isBrickLandscape();
        }

-        private static previousSelectedInputs: number[];
-        private static previousSeletedOutputs: number[];
+        private static previousSelectedInputs: pxt.Map<boolean> = {};
+        private static previousSeletedOutputs: pxt.Map<boolean> = {};
        private static previousBrickLandscape: boolean;

-        private static isPreviousInputSelected(index: number, id: number) {
-            if (EV3View.previousSelectedInputs && EV3View.previousSelectedInputs[index] == id) {
-                EV3View.previousSelectedInputs[index] = undefined;
-                return true;
-            }
-            return false;
+        private static isPreviousInputSelected(index: number) {
+            const previousInput = EV3View.previousSelectedInputs[index];
+            delete EV3View.previousSelectedInputs[index];
+            return previousInput;
        }

-        private static isPreviousOutputSelected(index: number, id: number) {
-            if (EV3View.previousSeletedOutputs && EV3View.previousSeletedOutputs[index] == id) {
-                EV3View.previousSeletedOutputs[index] = undefined;
-                return true;
-            }
-            return false;
+        private static isPreviousOutputSelected(index: number) {
+            const previousOutput = EV3View.previousSeletedOutputs[index];
+            delete EV3View.previousSeletedOutputs[index];
+            return previousOutput;
        }

        private static isPreviousBrickLandscape() {
@ -463,11 +495,13 @@ namespace pxsim.visuals {
                const view = this.getDisplayViewForNode(node.id, index);
                if (!node.didChange() && !view.didChange()) return;
                if (view) {
-                    const isSelected = EV3View.isPreviousInputSelected(index, node.id) || view.getSelected();
-                    if (isSelected && !view.getSelected()) view.setSelected(true);
+                    const previousSelected = EV3View.isPreviousInputSelected(index);
+                    const isSelected = previousSelected != undefined ? previousSelected : view.getSelected();
+                    view.setSelected(isSelected);
                    const control = isSelected ? this.getControlForNode(node.id, index, !node.modeChange()) : undefined;
-                    const closeIcon = control && view.hasClose() ? this.getCloseIconView() : undefined;
-                    this.layoutView.setInput(index, view, control, closeIcon);
+                    const closeIcon = control ? this.getCloseIconView(index + 10) : undefined;
+                    const backgroundView = control && view.hasBackground() ? this.getBackgroundView(index + 10) : undefined;
+                    this.layoutView.setInput(index, view, control, closeIcon, backgroundView);
                    view.updateState();
                    if (control) control.updateState();
                }
@ -485,11 +519,13 @@ namespace pxsim.visuals {
                const view = this.getDisplayViewForNode(node.id, index);
                if (!node.didChange() && !view.didChange()) return;
                if (view) {
-                    const isSelected = EV3View.isPreviousOutputSelected(index, node.id) || view.getSelected();
-                    if (isSelected && !view.getSelected()) view.setSelected(true);
+                    const previousSelected = EV3View.isPreviousOutputSelected(index);
+                    const isSelected = previousSelected != undefined ? previousSelected : view.getSelected();
+                    view.setSelected(isSelected);
                    const control = isSelected ? this.getControlForNode(node.id, index) : undefined;
-                    const closeIcon = control ? this.getCloseIconView() : undefined;
-                    this.layoutView.setOutput(index, view, control, closeIcon);
+                    const closeIcon = control ? this.getCloseIconView(index) : undefined;
+                    const backgroundView = control && view.hasBackground() ? this.getBackgroundView(index) : undefined;
+                    this.layoutView.setOutput(index, view, control, closeIcon, backgroundView);
                    view.updateState();
                    if (control) control.updateState();
                }
--- a/sim/visuals/controlView.ts
+++ b/sim/visuals/controlView.ts
@ -2,8 +2,8 @@

 namespace pxsim.visuals {

-    export const CONTROL_WIDTH = 87.5;
-    export const CONTROL_HEIGHT = 175;
+    export const CONTROL_WIDTH = 76.84;
+    export const CONTROL_HEIGHT = 112.72;

    export const CONTROL_TEXT_COLOR = '#000';

@ -43,28 +43,29 @@ namespace pxsim.visuals {
            return this.content;
        }

-        public resize(width: number, height: number) {
+        public resize(width: number, height: number, strict?: boolean) {
            super.resize(width, height);
-            this.updateDimensions(width, height);
+            this.updateDimensions(width, height, strict);
        }

-        private updateDimensions(width: number, height: number) {
+        private updateDimensions(width: number, height: number, strict?: boolean) {
            if (this.content) {
                const currentWidth = this.getInnerWidth();
                const currentHeight = this.getInnerHeight();
                const newHeight = currentHeight / currentWidth * width;
                const newWidth = currentWidth / currentHeight * height;
-                if (newHeight > height) {
+                if (strict) {
+                    this.content.setAttribute('width', `${width}`);
+                    this.content.setAttribute('height', `${height}`);
+                } else if (newHeight > height) {
                    // scale width instead
                    this.content.setAttribute('width', `${newWidth}`);
                    this.content.setAttribute('height', `${height}`);
-                    // translate to the middle (width)
-                    this.translate(width / 2 - newWidth / 2, 0);
+                    this.width = newWidth;
                } else {
                    this.content.setAttribute('width', `${width}`);
                    this.content.setAttribute('height', `${newHeight}`);
-                    // translate to the middle (height)
-                    this.translate(0, height / 2 - newHeight / 2);
+                    this.height = newHeight;
                }
            }
        }
--- a/sim/visuals/controls/backgroundView.ts
+++ b/sim/visuals/controls/backgroundView.ts
@ -0,0 +1,42 @@
+
+
+namespace pxsim.visuals {
+
+    export class BackgroundViewControl extends ControlView<PortNode> {
+        private backgroundGroup: SVGGElement;
+        private backgroundRect: SVGRectElement;
+
+        getInnerView() {
+            this.backgroundGroup = svg.elt("g") as SVGGElement;
+            this.backgroundRect = pxsim.svg.child(this.backgroundGroup,
+                "rect", {
+                    'x': 0, 'y': 0,
+                    'width': '100%',
+                    'height': '100%',
+                    'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
+                }) as SVGRectElement;
+            return this.backgroundGroup;
+        }
+
+        buildDom(): SVGElement {
+            this.content = svg.elt("svg", { width: "100%", height: "100%"}) as SVGSVGElement;
+            this.content.appendChild(this.getInnerView());
+            return this.content;
+        }
+
+        public resize(width: number, height: number, strict?: boolean) {
+            super.resize(width, height, strict);
+            this.backgroundRect.setAttribute('stroke-dasharray', `${height + width + height} 1000`);
+            this.backgroundRect.setAttribute('stroke-dashoffset', `-${width}`);
+        }
+
+        getInnerWidth(): number {
+            return 76.84;
+        }
+
+        getInnerHeight(): number {
+            return 173.86;
+        }
+    }
+
+}
--- a/sim/visuals/controls/closeIcon.ts
+++ b/sim/visuals/controls/closeIcon.ts
@ -9,7 +9,7 @@ namespace pxsim.visuals {
            this.closeGroup = svg.elt("g") as SVGGElement;
            this.closeGroup.style.cursor = 'pointer';
            const circleCloseWrapper = pxsim.svg.child(this.closeGroup, "g");
-            pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "16", 'style': "fill: #fff" });
+            pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "16", 'style': "fill: transparent;" });
            pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "15", 'style': "fill: none;stroke: #a8aaa8;stroke-width: 2px" });
            pxsim.svg.child(this.closeGroup, "rect", { 'x': "10", 'y': "16", 'width': "18", 'height': "2", 'transform': "translate(-9.46 17.41) rotate(-45)", 'style': "fill: #a8aaa8" });
            pxsim.svg.child(this.closeGroup, "rect", { 'x': "18", 'y': "8", 'width': "2", 'height': "18", 'transform': "translate(-9.46 17.41) rotate(-45)", 'style': "fill: #a8aaa8" });
@ -18,15 +18,11 @@ namespace pxsim.visuals {
        }

        buildDom(): SVGElement {
-            this.content = svg.elt("svg", { width: "100%", height: "100%"}) as SVGSVGElement;
+            this.content = svg.elt("svg", { width: "100%", height: "100%", viewBox:"0 0 32 32"}) as SVGSVGElement;
            this.content.appendChild(this.getInnerView());
            return this.content;
        }

-        public resize(width: number, height: number) {
-            super.resize(width, height);
-        }
-
        public getInnerHeight() {
            return 32;
        }
--- a/sim/visuals/controls/colorGrid.ts
+++ b/sim/visuals/controls/colorGrid.ts
@ -5,28 +5,36 @@ namespace pxsim.visuals {
    export class ColorGridControl extends ControlView<ColorSensorNode> {
        private group: SVGGElement;

+        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
+        private static colorValue = [5, 4, 2, 3, 1, 7, 6];
+
+        private colorDivs: Element[] = [];
+
        getInnerView() {
            this.group = svg.elt("g") as SVGGElement;
            this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)

-            const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];
            const colors = ['#f12a21', '#ffd01b', '#006db3', '#00934b', '#000', '#6c2d00'];
-            const colorValue = [5, 4, 2, 3, 1, 7];
+            const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];

            let cy = -4;
            for (let c = 0; c < colorIds.length; c++) {
                const cx = c % 2 == 0 ? 2.2 : 7.5;
                if (c % 2 == 0) cy += 5;
                if (colorIds[c]) {
-                    const circle = pxsim.svg.child(this.group, "circle", { 'class': 'sim-color-grid-circle', 'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
+                    const circle = pxsim.svg.child(this.group, "circle", { 
+                        'class': `sim-color-grid-circle sim-color-grid-${colorIds[c]}`,
+                        'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
+                    this.colorDivs.push(circle);
                    pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => {
-                        this.setColor(colorValue[c]);
+                        this.setColor(ColorGridControl.colorValue[c]);
                    }));
                }
            }

            const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
-            pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            const circle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            this.colorDivs.push(circle);
            pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
            pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
                this.setColor(6);
@ -42,9 +50,34 @@ namespace pxsim.visuals {
            return 15;
        }

+        public updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const color = node.getValue();
+
+            for (let c = 0; c < ColorGridControl.colorValue.length; c++) {
+                const colorId = ColorGridControl.colorIds[c];
+                const colorValue = ColorGridControl.colorValue[c];
+                const colorDiv = this.colorDivs[c] as HTMLElement;
+
+                if (colorValue == color) {
+                    pxsim.U.addClass(colorDiv, 'sim-color-selected');
+                } else {
+                    pxsim.U.removeClass(colorDiv, 'sim-color-selected');
+                }
+            }
+        }
+
        private setColor(color: number) {
            const state = this.state;
-            state.setColor(color);
+            const currentColor = state.getValue();
+            if (currentColor == color) {
+                state.setColor(0);
+            } else {
+                state.setColor(color);
+            }
        }
    }
 }
--- a/sim/visuals/controls/colorWheel.ts
+++ b/sim/visuals/controls/colorWheel.ts
@ -15,7 +15,7 @@ namespace pxsim.visuals {
        }

        private getReporterHeight() {
-            return 58;
+            return 38;
        }

        private getSliderWidth() {
@ -23,10 +23,10 @@ namespace pxsim.visuals {
        }

        private getSliderHeight() {
-            return 111;
+            return 131;
        }

-        private getMax() {
+        private getMaxValue() {
            return 100;
        }

@ -36,9 +36,9 @@ namespace pxsim.visuals {
            }
            const node = this.state;
            const percentage = node.getValue();
-            const inversePercentage = this.getMax() - percentage;
+            const inversePercentage = this.getMaxValue() - percentage;
            svg.setGradientValue(this.colorGradient, inversePercentage + "%");
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
+            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}%`;
        }

        updateColorLevel(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
@ -47,7 +47,7 @@ namespace pxsim.visuals {
            const height = bBox.height;
            let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
            const state = this.state;
-            state.setColor(t * this.getMax());
+            state.setColor(t * this.getMaxValue());
        }

        getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
@ -60,7 +60,7 @@ namespace pxsim.visuals {
            svg.setGradientColors(this.colorGradient, "black", "yellow");

            const reporterGroup = pxsim.svg.child(this.group, "g");
-            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 50)`);
+            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
            this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;

            const sliderGroup = pxsim.svg.child(this.group, "g");
@ -93,9 +93,6 @@ namespace pxsim.visuals {
            }, () => {
                captured = false;
                rect.setAttribute('cursor', '-webkit-grab');
-            }, () => {
-                captured = false;
-                rect.setAttribute('cursor', '-webkit-grab');
            })

            return this.group;
--- a/sim/visuals/controls/distanceSlider.ts
+++ b/sim/visuals/controls/distanceSlider.ts
@ -7,11 +7,59 @@ namespace pxsim.visuals {
        private gradient: SVGLinearGradientElement;
        private slider: SVGGElement;

+        private rect: SVGRectElement;
+
        private reporter: SVGTextElement;

        private static SLIDER_HANDLE_HEIGHT = 26;
        private static SLIDER_SIDE_PADDING = 6;

+        getInnerWidth() {
+            return 111;
+        }
+
+        getInnerHeight() {
+            return 192;
+        }
+
+        private getReporterHeight() {
+            return 38;
+        }
+
+        private getSliderWidth() {
+            return 62;
+        }
+
+        private getSliderHeight() {
+            return 131;
+        }
+
+        private getMaxValue() {
+            return 250; // cm
+        }
+
+        updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const percentage = node.getValue() / 10; /* convert back to cm */
+            const y = this.getSliderHeight() * percentage / this.getMaxValue();
+            this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
+            // Update reporter text
+            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}cm`;
+        }
+
+        updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
+            let cur = svg.cursorPoint(pt, parent, ev);
+            const bBox = this.rect.getBoundingClientRect();
+            const height = bBox.height;
+            let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
+
+            const state = this.state;
+            state.setDistance((1 - t) * (this.getMaxValue()));
+        }
+
        getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
            let gid = "gradient-slider-" + this.getPort();
            this.group = svg.elt("g") as SVGGElement;
@ -28,13 +76,14 @@ namespace pxsim.visuals {
            this.group = svg.elt("g") as SVGGElement;

            const reporterGroup = pxsim.svg.child(this.group, "g");
-            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
+            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
            this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;

            const sliderGroup = pxsim.svg.child(this.group, "g");
-            sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
+            sliderGroup.setAttribute("transform", `translate(${this.getInnerWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)

            const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': DistanceSliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - DistanceSliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
+            this.rect = rect as SVGRectElement;

            this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
            const sliderInner = pxsim.svg.child(this.slider, "g");
@ -48,7 +97,7 @@ namespace pxsim.visuals {
                height: this.getInnerHeight(),
                opacity: 0,
                cursor: '-webkit-grab'
-            })
+            }) as SVGRectElement;

            let pt = parent.createSVGPoint();
            let captured = false;
@ -67,64 +116,11 @@ namespace pxsim.visuals {
            }, () => {
                captured = false;
                dragSurface.setAttribute('cursor', '-webkit-grab');
-            }, () => {
-                captured = false;
-                dragSurface.setAttribute('cursor', '-webkit-grab');
            })

            return this.group;
        }

-        getInnerHeight() {
-            return 192;
-        }
-
-        getInnerWidth() {
-            return 111;
-        }
-
-        private getReporterHeight() {
-            return 50;
-        }
-
-        private getSliderHeight() {
-            return 110;
-        }
-
-        private getSliderWidth() {
-            return 62;
-        }
-
-        updateState() {
-            if (!this.visible) {
-                return;
-            }
-            const node = this.state;
-            const percentage = node.getValue() / 10; /* convert back to cm */
-            const y = this.getSliderHeight() * percentage / this.getMax();
-            this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
-            // Update reporter text
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
-        }
-
-        private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
-            let cur = svg.cursorPoint(pt, parent, ev);
-            const height = this.getSliderHeight();
-            const bBox = this.content.getBoundingClientRect();
-            let t = Math.max(0, Math.min(1, (DistanceSliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
-
-            const state = this.state;
-            state.setDistance((1 - t) * (this.getMax()));
-        }
-
-        private getMin() {
-            return 0;
-        }
-
-        private getMax() {
-            return 250; //cm
-        }
-
        private getGradientDefinition(): LinearGradientDefinition {
            return {
                stops: [
--- a/sim/visuals/controls/motorSlider.ts
+++ b/sim/visuals/controls/motorSlider.ts
@ -13,7 +13,7 @@ namespace pxsim.visuals {

        private static SLIDER_RADIUS = 100;

-        private internalSpeed: number = 0;
+        private internalAngle: number = 0;

        getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
            this.group = svg.elt("g") as SVGGElement;
@ -66,9 +66,6 @@ namespace pxsim.visuals {
            }, () => {
                captured = false;
                this.handleSliderUp();
-            }, () => {
-                captured = false;
-                this.handleSliderUp();
            })

            return this.group;
@ -105,9 +102,9 @@ namespace pxsim.visuals {
            } else if (dx >= 0 && dy <= 0) {
                deg = 90 - deg;
            }
-            const value = Math.abs(Math.ceil((deg % 360) / 360 * this.getMax()));
+            const value = Math.abs(Math.ceil((deg % 360)));

-            this.internalSpeed = value;
+            this.internalAngle = value;
            this.updateDial();

            this.prevVal = deg;
@ -122,7 +119,7 @@ namespace pxsim.visuals {
        private handleSliderMove() {
            this.dial.setAttribute('cursor', '-webkit-grabbing');
            const state = this.state;
-            state.manualMotorMove(this.internalSpeed);
+            state.manualMotorAngle(this.internalAngle);
        }

        private handleSliderUp() {
@ -130,19 +127,18 @@ namespace pxsim.visuals {
            const state = this.state;
            state.manualMotorUp();

-            this.internalSpeed = 0;
+            this.internalAngle = 0;
            this.updateDial();
        }

        private updateDial() {
-            let speed = this.internalSpeed;
+            let angle = this.internalAngle;

            // Update dial position
-            const deg = speed / this.getMax() * 360; // degrees
            const radius = MotorSliderControl.SLIDER_RADIUS;
            const dialRadius = 5;
-            const x = Math.ceil((radius - dialRadius) * Math.sin(deg * Math.PI / 180)) + radius;
-            const y = Math.ceil((radius - dialRadius) * -Math.cos(deg * Math.PI / 180)) + radius;
+            const x = Math.ceil((radius - dialRadius) * Math.sin(angle * Math.PI / 180)) + radius;
+            const y = Math.ceil((radius - dialRadius) * -Math.cos(angle * Math.PI / 180)) + radius;
            this.dial.setAttribute('transform', `translate(${x}, ${y})`);
        }

@ -151,18 +147,10 @@ namespace pxsim.visuals {
                return;
            }
            const node = this.state;
-            const speed = node.getSpeed();
+            const angle = node.getAngle() % 360;

            // Update reporter
-            this.reporter.textContent = `${speed}`;
-        }
-
-        private getMin() {
-            return 0;
-        }
-
-        private getMax() {
-            return 100;
+            this.reporter.textContent = `${angle}°`;
        }
    }

--- a/sim/visuals/controls/proximitySlider.ts
+++ b/sim/visuals/controls/proximitySlider.ts
@ -7,11 +7,60 @@ namespace pxsim.visuals {
        private gradient: SVGLinearGradientElement;
        private slider: SVGGElement;

+        private rect: SVGRectElement;
+
        private reporter: SVGTextElement;

        private static SLIDER_HANDLE_HEIGHT = 26;
        private static SLIDER_SIDE_PADDING = 6;

+        getInnerWidth() {
+            return 111;
+        }
+
+        getInnerHeight() {
+            return 192;
+        }
+
+        private getReporterHeight() {
+            return 38;
+        }
+
+        private getSliderWidth() {
+            return 62;
+        }
+
+        private getSliderHeight() {
+            return 131;
+        }
+
+        private getMaxValue() {
+            return 100;
+        }
+
+        updateState() {
+            if (!this.visible) {
+                return;
+            }
+            const node = this.state;
+            const percentage = node.getValue(); 
+            const y = this.getSliderHeight() * percentage / this.getMaxValue();
+            this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
+            // Update reporter text
+            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
+        }
+
+        private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
+            let cur = svg.cursorPoint(pt, parent, ev);
+            const bBox = this.rect.getBoundingClientRect();
+            const height = bBox.height;
+            let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
+
+            const state = this.state;
+            const v = Math.floor((1 - t) * (this.getMaxValue()));
+            state.setPromixity(v);
+        }
+
        getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
            let gid = "gradient-slider-" + this.getId();
            this.group = svg.elt("g") as SVGGElement;
@ -27,13 +76,14 @@ namespace pxsim.visuals {
            this.group = svg.elt("g") as SVGGElement;

            const reporterGroup = pxsim.svg.child(this.group, "g");
-            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
+            reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
            this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;

            const sliderGroup = pxsim.svg.child(this.group, "g");
-            sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
+            sliderGroup.setAttribute("transform", `translate(${this.getInnerWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)

            const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': ProximitySliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - ProximitySliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
+            this.rect = rect as SVGRectElement;

            this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
            const sliderInner = pxsim.svg.child(this.slider, "g");
@ -66,65 +116,11 @@ namespace pxsim.visuals {
            }, () => {
                captured = false;
                dragSurface.setAttribute('cursor', '-webkit-grab');
-            }, () => {
-                captured = false;
-                dragSurface.setAttribute('cursor', '-webkit-grab');
            })

            return this.group;
        }

-        getInnerHeight() {
-            return 192;
-        }
-
-        getInnerWidth() {
-            return 111;
-        }
-
-        private getReporterHeight() {
-            return 50;
-        }
-
-        private getSliderHeight() {
-            return 110;
-        }
-
-        private getSliderWidth() {
-            return 62;
-        }
-
-        updateState() {
-            if (!this.visible) {
-                return;
-            }
-            const node = this.state;
-            const percentage = node.getValue(); 
-            const y = this.getSliderHeight() * percentage / this.getMax();
-            this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
-            // Update reporter text
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
-        }
-
-        private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
-            let cur = svg.cursorPoint(pt, parent, ev);
-            const height = this.getSliderHeight();
-            const bBox = this.content.getBoundingClientRect();
-            let t = Math.max(0, Math.min(1, (ProximitySliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
-
-            const state = this.state;
-            const v = Math.floor((1 - t) * (this.getMax()));
-            state.setPromixity(v);
-        }
-
-        private getMin() {
-            return 0;
-        }
-
-        private getMax() {
-            return 100;
-        }
-
        private getGradientDefinition(): LinearGradientDefinition {
            return {
                stops: [
--- a/sim/visuals/controls/rotationSlider.ts
+++ b/sim/visuals/controls/rotationSlider.ts
@ -13,10 +13,10 @@ namespace pxsim.visuals {
            this.group = svg.elt("g") as SVGGElement;

            const sliderGroup = pxsim.svg.child(this.group, "g");
-            sliderGroup.setAttribute("transform", `translate(5, ${10 + this.getTopPadding()})`)
+            sliderGroup.setAttribute("transform", `translate(10,0)`);

            const rotationLine = pxsim.svg.child(sliderGroup, "g");
-            pxsim.svg.child(rotationLine, "path", { 'transform': 'translate(5.11 -31.1)', 'd': 'M68.71,99.5l6.1-8S61.3,79.91,42.69,78.35,12,83.14,6.49,85.63a48.69,48.69,0,0,0-9.6,5.89L3.16,99.3S19.27,87.7,37.51,87.94,68.71,99.5,68.71,99.5Z', 'style': 'fill: #626262' });
+            pxsim.svg.child(rotationLine, "path", { 'transform': 'translate(7.11 -31.1)', 'd': 'M68.71,99.5l6.1-8S61.3,79.91,42.69,78.35,12,83.14,6.49,85.63a48.69,48.69,0,0,0-9.6,5.89L3.16,99.3S19.27,87.7,37.51,87.94,68.71,99.5,68.71,99.5Z', 'style': 'fill: #626262' });

            this.slider = pxsim.svg.child(sliderGroup, "g") as SVGGElement;
            const handleInner = pxsim.svg.child(sliderGroup, "g");
@ -47,15 +47,13 @@ namespace pxsim.visuals {
                }
            }, () => {
                captured = false;
-            }, () => {
-                captured = false;
            })

            return this.group;
        }

-        private getTopPadding() {
-            return this.getInnerHeight() / 4;
+        getInnerWidth() {
+            return RotationSliderControl.SLIDER_WIDTH * 1.5;
        }

        updateState() {
--- a/sim/visuals/layoutView.ts
+++ b/sim/visuals/layoutView.ts
@ -12,6 +12,9 @@ namespace pxsim.visuals {
    export const MODULE_INNER_PADDING_RATIO = 1 / 35;

    export const MAX_MODULE_WIDTH = 100;
+    export const MIN_MODULE_HEIGHT = 40;
+
+    export const CLOSE_ICON_GAP_MULTIPLIER = 0.3;

    export interface LayoutElement extends View {
        getId(): number;
@ -33,6 +36,9 @@ namespace pxsim.visuals {
        private inputCloseIcons: View[] = [];
        private outputCloseIcons: View[] = [];

+        private inputBackgroundViews: View[] = [];
+        private outputBackgroundViews: View[] = [];
+
        private inputWires: WireView[] = [];
        private outputWires: WireView[] = [];

@ -73,8 +79,8 @@ namespace pxsim.visuals {

        public setBrick(brick: BrickView) {
            this.brick = brick;
-            this.brick.inject(this.scrollGroup);
-            this.brickLandscape.inject(this.scrollGroup);
+            this.brick.inject(this.scrollGroup, this.theme);
+            this.brickLandscape.inject(this.scrollGroup, this.theme);
            this.brick.setSelected(false);
            this.brickLandscape.setSelected(true);
            this.brickLandscape.setVisible(false);
@ -119,7 +125,7 @@ namespace pxsim.visuals {
            else this.setlectBrick();
        }

-        public setInput(port: number, view: LayoutElement, control?: View, closeIcon?: View) {
+        public setInput(port: number, view: LayoutElement, control?: View, closeIcon?: View, backgroundView?: View) {
            if (this.inputs[port] != view || this.inputControls[port] != control) {
                if (this.inputs[port]) {
                    // Remove current input
@ -131,10 +137,12 @@ namespace pxsim.visuals {
                }
                this.inputControls[port] = control;
                this.inputCloseIcons[port] = closeIcon;
+                this.inputBackgroundViews[port] = backgroundView;

                this.inputContainers[port].clear();
-                this.inputContainers[port].addView(view);

+                if (control && backgroundView) this.inputContainers[port].addView(backgroundView);
+                this.inputContainers[port].addView(view);
                if (control) this.inputContainers[port].addView(control);

                if (view.hasClick()) view.registerClick((ev: any) => {
@ -155,7 +163,7 @@ namespace pxsim.visuals {
            this.position();
        }

-        public setOutput(port: number, view: LayoutElement, control?: View, closeIcon?: View) {
+        public setOutput(port: number, view: LayoutElement, control?: View, closeIcon?: View, backgroundView?: View) {
            if (this.outputs[port] != view || this.outputControls[port] != control) {
                if (this.outputs[port]) {
                    // Remove current output
@ -167,10 +175,12 @@ namespace pxsim.visuals {
                }
                this.outputControls[port] = control;
                this.outputCloseIcons[port] = closeIcon;
+                this.outputBackgroundViews[port] = backgroundView;

                this.outputContainers[port].clear();
-                this.outputContainers[port].addView(view);

+                if (control && backgroundView) this.outputContainers[port].addView(backgroundView);
+                this.outputContainers[port].addView(view);
                if (control) this.outputContainers[port].addView(control);

                if (view.hasClick()) view.registerClick((ev: any) => {
@ -202,16 +212,16 @@ namespace pxsim.visuals {

            // Inject all wires
            for (let port = 0; port < DAL.NUM_OUTPUTS; port++) {
-                this.outputWires[port].inject(this.scrollGroup);
+                this.outputWires[port].inject(this.scrollGroup, this.theme);
            }
            for (let port = 0; port < DAL.NUM_INPUTS; port++) {
-                this.inputWires[port].inject(this.scrollGroup);
+                this.inputWires[port].inject(this.scrollGroup, this.theme);
            }

            // Inject all view containers
            for (let i = 0; i < 4; i++) {
-                this.inputContainers[i].inject(this.scrollGroup);
-                this.outputContainers[i].inject(this.scrollGroup);
+                this.inputContainers[i].inject(this.scrollGroup, this.theme);
+                this.outputContainers[i].inject(this.scrollGroup, this.theme);
            }

            // Inject all ports
@ -243,6 +253,12 @@ namespace pxsim.visuals {
        }

        public updateTheme(theme: IBoardTheme) {
+            this.inputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
+            this.outputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
            this.inputs.forEach(n => {
                n.updateTheme(theme);
            })
@ -277,35 +293,48 @@ namespace pxsim.visuals {

            const modulePadding = this.getModulePadding();
            const moduleSpacing = contentWidth / 4;
-            const moduleWidth = this.getInnerModuleWidth();
            let currentX = this.getModulePadding();
            let currentY = 0;
            this.outputs.forEach((n, i) => {
-                this.outputContainers[i].translate(currentX, currentY);
+                this.outputContainers[i].translate(currentX + (this.getAbosluteModuleWidth() - this.getInnerModuleWidth()) / 2, currentY);
                if (this.outputs[i]) {
                    const view = this.outputs[i];
                    const outputPadding = this.getInnerModuleWidth() * view.getPaddingRatio();
-                    const desiredOutputWidth = this.getInnerModuleWidth() - outputPadding * 2;
-                    const outputWidth = Math.min(desiredOutputWidth, MAX_MODULE_WIDTH);
                    const outputHeight = this.getModuleHeight();
+                    const outputWidth = this.getInnerModuleWidth();

                    // Translate and resize view
-                    view.resize(outputWidth, outputHeight);
-                    const viewHeight = view.getInnerHeight() / view.getInnerWidth() * outputWidth;
-                    view.translate(outputPadding + ((desiredOutputWidth - outputWidth) / 2), outputHeight - viewHeight, true);
+                    view.resize(outputWidth - outputPadding * 2, outputHeight);
+                    // const viewHeight = view.getInnerHeight() / view.getInnerWidth() * outputWidth;
+                    // view.translate(outputPadding + ((desiredOutputWidth - outputWidth) / 2), outputHeight - viewHeight, true);
+                    const viewHeight = view.getActualHeight();
+                    view.translate(outputPadding, outputHeight - viewHeight, true);

                    // Resize control
                    const control = this.outputControls[i];
                    if (control) {
-                        control.resize(this.getInnerModuleWidth(), outputHeight);
+                        const controlWidth = outputWidth;
+                        const closeIconOffset = (this.getCloseIconSize() * (1 + CLOSE_ICON_GAP_MULTIPLIER));
+                        const controlHeight = outputHeight - closeIconOffset;
+                        control.resize(controlWidth, controlHeight);
+                        control.translate((controlWidth - control.getActualWidth()) / 2,
+                            closeIconOffset + ((controlHeight - control.getActualHeight()) / 2), true)

-                        // Translate close icon
+                        // Translate and resize close icon
                        const closeIcon = this.outputCloseIcons[i];
                        if (closeIcon) {
-                            const closeIconWidth = closeIcon.getWidth();
-                            closeIcon.translate(this.getInnerModuleWidth() / 2 - closeIconWidth / 2, 0);
+                            const closeIconSize = this.getCloseIconSize();
+                            closeIcon.resize(closeIconSize, closeIconSize);
+                            closeIcon.translate((outputWidth - closeIcon.getActualWidth()) / 2, (CLOSE_ICON_GAP_MULTIPLIER * closeIcon.getActualHeight()), true);
                        }
                    }
+
+                    // Resize background
+                    const backgroundView = this.inputBackgroundViews[i];
+                    if (backgroundView) {
+                        backgroundView.resize(this.getInnerModuleWidth(), outputHeight);
+                        backgroundView.translate(0, 0, true)
+                }
                }
                currentX += moduleSpacing;
            })
@ -341,30 +370,41 @@ namespace pxsim.visuals {
            currentY += brickHeight + this.getWiringHeight();

            this.inputs.forEach((n, i) => {
-                this.inputContainers[i].translate(currentX, currentY);
+                this.inputContainers[i].translate(currentX + (this.getAbosluteModuleWidth() - this.getInnerModuleWidth()) / 2, currentY);
                if (this.inputs[i]) {
                    const view = this.inputs[i];
                    const inputPadding = this.getInnerModuleWidth() * view.getPaddingRatio();
-                    const desiredInputWidth = this.getInnerModuleWidth() - inputPadding * 2;
-                    const inputWidth = Math.min(desiredInputWidth, MAX_MODULE_WIDTH);
                    const inputHeight = this.getModuleHeight();
+                    const inputWidth = this.getInnerModuleWidth();

                    // Translate and resize view
-                    view.resize(inputWidth, inputHeight);
-                    view.translate(inputPadding + ((desiredInputWidth - inputWidth) / 2), 0, true);
+                    view.resize(inputWidth - inputPadding * 2, inputHeight);
+                    const viewHeight = Math.max(view.getActualHeight(), MIN_MODULE_HEIGHT);
+                    view.translate(inputPadding, 0, true);

                    // Resize control
                    const control = this.inputControls[i];
                    if (control) {
-                        control.resize(this.getInnerModuleWidth(), inputHeight);
+                        const controlWidth = inputWidth;
+                        const controlHeight = inputHeight - viewHeight - (this.getCloseIconSize() * (1 + CLOSE_ICON_GAP_MULTIPLIER));
+                        control.resize(controlWidth, controlHeight);
+                        control.translate((controlWidth - control.getActualWidth()) / 2,
+                            viewHeight + ((controlHeight - control.getActualHeight()) / 2), true)

                        // Translate and resize close icon
                        const closeIcon = this.inputCloseIcons[i];
                        if (closeIcon) {
-                            const closeIconWidth = closeIcon.getWidth();
-                            const closeIconHeight = closeIcon.getHeight();
-                            closeIcon.translate(this.getInnerModuleWidth() / 2 - closeIconWidth / 2, this.getModuleHeight() - closeIconHeight);
+                            const closeIconSize = this.getCloseIconSize();
+                            closeIcon.resize(closeIconSize, closeIconSize);
+                            closeIcon.translate((inputWidth - closeIcon.getActualWidth()) / 2, inputHeight - ((1 + CLOSE_ICON_GAP_MULTIPLIER) * closeIcon.getActualHeight()), true);
                        }
+                        }
+
+                    // Resize background
+                    const backgroundView = this.inputBackgroundViews[i];
+                    if (backgroundView) {
+                        backgroundView.resize(this.getInnerModuleWidth(), inputHeight, true);
+                        backgroundView.translate(0, 0, true)
                    }
                }
                currentX += moduleSpacing;
@ -394,7 +434,7 @@ namespace pxsim.visuals {

        public getModuleBounds() {
            return {
-                width: this.width / 4,
+                width: Math.min(this.getAbosluteModuleWidth(), MAX_MODULE_WIDTH),
                height: this.getModuleHeight()
            }
        }
@ -407,8 +447,16 @@ namespace pxsim.visuals {
            return this.getModuleBounds().width - (this.getModulePadding() * 2);
        }

+        public getAbosluteModuleWidth() {
+            return this.width / 4;
+        }
+
        public getModuleHeight() {
            return this.height * MODULE_HEIGHT_RATIO;
        }
+
+        public getCloseIconSize() {
+            return this.getInnerModuleWidth() / 4;
+        }
    }
 }
--- a/sim/visuals/nodes/colorSensorView.ts
+++ b/sim/visuals/nodes/colorSensorView.ts
@ -5,6 +5,8 @@ namespace pxsim.visuals {

        private control: ColorGridControl;

+        private static sensor_hole_id = 'color_sensor_white_big';
+
        constructor(port: number) {
            super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
        }
@ -19,7 +21,25 @@ namespace pxsim.visuals {

        public updateState() {
            super.updateState();
-            // TODO: show different color modes
+
+            const colorState = ev3board().getInputNodes()[this.port];
+            if (!colorState) return;
+            const mode = colorState.getMode();
+
+            switch (mode) {
+                case ColorSensorMode.Colors: this.updateSensorLightVisual('#0062DD'); return; // blue
+                case ColorSensorMode.Reflected: this.updateSensorLightVisual('#F86262'); return; // red
+                case ColorSensorMode.Ambient: this.updateSensorLightVisual('#67C3E2'); return; // light blue
+            }
+            this.updateSensorLightVisual('#ffffff');
+        }
+
+        private updateSensorLightVisual(color: string) {
+            const sensorHole = this.content.getElementById(this.normalizeId(ColorSensorView.sensor_hole_id)) as SVGCircleElement;
+            sensorHole.style.stroke = color;
+            if (color != '#ffffff') {
+                sensorHole.style.strokeWidth = '2px';
+            }
        }
    }
 }
--- a/sim/visuals/nodes/moduleView.ts
+++ b/sim/visuals/nodes/moduleView.ts
@ -107,7 +107,7 @@ namespace pxsim.visuals {
        public attachEvents() {
        }

-        public resize(width: number, height: number) {
+        public resize(width: number, height: number, strict?: boolean) {
            super.resize(width, height);
            this.updateDimensions(width, height);
        }
@ -120,6 +120,7 @@ namespace pxsim.visuals {
                const newWidth = currentWidth / currentHeight * height;
                this.content.setAttribute('width', `${width}`);
                this.content.setAttribute('height', `${newHeight}`);
+                this.height = newHeight;
            }
        }

@ -138,16 +139,22 @@ namespace pxsim.visuals {

        protected updateOpacity() {
            if (this.rendered) {
-                const opacity = this.selected ? 0.2 : 1;
+                const opacity = this.selected && this.fadeWhenSelected() ? 0.2 : 1;
                if (this.hasClick() && this.opacity != opacity) {
                    this.opacity = opacity;
                    this.setOpacity(this.opacity);
+                }
+                if (this.hasClick()) {
                    if (this.selected) this.content.style.cursor = "";
                    else this.content.style.cursor = "pointer";
                }
            }
        }

+        protected fadeWhenSelected() {
+            return true;
+        }
+
        protected setOpacity(opacity: number) {
            this.element.setAttribute("opacity", `${opacity}`);
        }
--- a/sim/visuals/nodes/sensorView.ts
+++ b/sim/visuals/nodes/sensorView.ts
@ -6,14 +6,16 @@ namespace pxsim.visuals {

        constructor(xml: string, prefix: string, id: NodeType, port: NodeType) {
            super(xml, prefix, id, port);
+            // Shown by default
+            this.selected = true;
        }

-        public getSelected() {
-            return true;
-        }
-
-        public hasClose() {
+        protected fadeWhenSelected() {
            return false;
        }
+
+        public hasBackground() {
+            return true;
+        }
    }
 }
--- a/sim/visuals/util.ts
+++ b/sim/visuals/util.ts
@ -10,33 +10,85 @@ namespace pxsim.visuals {

    export type TouchCallback = (event: MouseEvent | TouchEvent | PointerEvent) => void;

-    export function touchEvents(e: SVGElement | SVGElement[], move?: TouchCallback, down?: TouchCallback, up?: TouchCallback, leave?: TouchCallback) {
+    export function touchEvents(e: SVGElement | SVGElement[], move?: TouchCallback, down?: TouchCallback, up?: TouchCallback) {
        if (Array.isArray(e)) {
-            e.forEach(el => bindEvents(el, move, down, up, leave));
+            e.forEach(el => bindEvents(el, move, down, up));
        }
        else {
-            bindEvents(e, move, down, up, leave);
+            bindEvents(e, move, down, up);
        }
    }

-    function bindEvents(e: SVGElement, move?: TouchCallback, down?: TouchCallback, up?: TouchCallback, leave?: TouchCallback) {
+    function bindEvents(e: SVGElement, move?: TouchCallback, down?: TouchCallback, up?: TouchCallback) {
+
+        const moveEvent = move ? (ev: MouseEvent) => {
+            move.call(this, ev);
+            ev.preventDefault();
+            ev.stopPropagation();
+        } : undefined;
+
+        const enterEvent = move ? (ev: MouseEvent) => {
+            if (ev.buttons != 1) {
+                // cancel all events when we re-enter without a button down
+                upEvent(ev);
+            }
+        } : undefined;
+
+        const upEvent = up ? (ev: MouseEvent) => {
+            up.call(this, ev);
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            // Unregister document up and move events
+            if ((window as any).PointerEvent) {
+                if (moveEvent) document.removeEventListener("pointermove", moveEvent);
+                if (upEvent) document.removeEventListener("pointerup", upEvent);
+                if (upEvent) document.removeEventListener("pointercancel", upEvent);
+                if (moveEvent) document.removeEventListener("pointerenter", enterEvent);
+            } else {
+                if (moveEvent) document.removeEventListener("mousemove", moveEvent);
+                if (upEvent) document.removeEventListener("mouseup", upEvent);
+                if (moveEvent) document.removeEventListener("mouseenter", enterEvent);
+                if (pxsim.svg.isTouchEnabled()) {
+                    if (moveEvent) document.removeEventListener("touchmove", moveEvent);
+                    if (upEvent) document.removeEventListener("touchend", upEvent);
+                    if (upEvent) document.removeEventListener("touchcancel", upEvent);
+                }
+            }
+        } : undefined;
+
+        const downEvent = down ? (ev: MouseEvent) => {
+            down.call(this, ev);
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            // Register document up and move events
+            if ((window as any).PointerEvent) {
+                if (moveEvent) document.addEventListener("pointermove", moveEvent);
+                if (upEvent) document.addEventListener("pointerup", upEvent);
+                if (upEvent) document.addEventListener("pointercancel", upEvent);
+                if (moveEvent) document.addEventListener("pointerenter", enterEvent);
+            } else {
+                if (moveEvent) document.addEventListener("mousemove", moveEvent);
+                if (upEvent) document.addEventListener("mouseup", upEvent);
+                if (moveEvent) document.addEventListener("mouseenter", enterEvent);
+
+                if (pxsim.svg.isTouchEnabled()) {
+                    if (moveEvent) document.addEventListener("touchmove", moveEvent);
+                    if (upEvent) document.addEventListener("touchend", upEvent);
+                    if (upEvent) document.addEventListener("touchcancel", upEvent);
+                }
+            }
+        } : undefined;
+
        if ((window as any).PointerEvent) {
-            if (down) e.addEventListener("pointerdown", down);
-            if (up) e.addEventListener("pointerup", up);
-            if (leave) e.addEventListener("pointerleave", leave);
-            if (move) e.addEventListener("pointermove", move);
+            if (downEvent) e.addEventListener("pointerdown", downEvent);
        }
        else {
-            if (down) e.addEventListener("mousedown", down);
-            if (up) e.addEventListener("mouseup", up);
-            if (leave) e.addEventListener("mouseleave", leave);
-            if (move) e.addEventListener("mousemove", move);
+            if (downEvent) e.addEventListener("mousedown", downEvent);

            if (pxsim.svg.isTouchEnabled()) {
-                if (down) e.addEventListener("touchstart", down);
-                if (up) e.addEventListener("touchend", up);
-                if (leave) e.addEventListener("touchcancel", leave);
-                if (move) e.addEventListener("touchmove", move);
+                if (downEvent) e.addEventListener("touchstart", downEvent);
            }
        }
    }
--- a/sim/visuals/view.ts
+++ b/sim/visuals/view.ts
@ -19,8 +19,9 @@ namespace pxsim.visuals {
        public abstract getInnerWidth(): number;
        public abstract getInnerHeight(): number;

-        public inject(parent: SVGElement, width?: number, visible = true) {
+        public inject(parent: SVGElement, theme: IBoardTheme, width?: number, visible = true) {
            this.width = width;
+            this.theme = theme;
            parent.appendChild(this.getView());

            if (visible) {
@ -130,11 +131,19 @@ namespace pxsim.visuals {
            return this.element;
        }

-        public resize(width: number, height: number) {
+        public resize(width: number, height: number, strict?: boolean) {
            this.width = width;
            this.height = height;
        }

+        public getActualHeight() {
+            return this.height;
+        }
+
+        public getActualWidth() {
+            return this.width;
+        }
+
        private updateTransform() {
            if (this.rendered) {
                let left = this.left;
@ -212,10 +221,6 @@ namespace pxsim.visuals {
            }
        }

-        public hasClose() {
-            return true;
-        }
-
        protected setChangedState() {
            this.changed = true;
        }
@ -225,6 +230,10 @@ namespace pxsim.visuals {
            this.changed = false;
            return res;
        }
+
+        public hasBackground() {
+            return false;
+        }
    }

    export abstract class SimView<T extends BaseNode> extends View implements LayoutElement {
@ -268,13 +277,17 @@ namespace pxsim.visuals {
        }

        public addView(view: View) {
-            view.inject(this.element);
+            view.inject(this.element, this.theme);
        }

        public clear() {
+            const markForRemoval: Element[] = [];
            forEachElement(this.element.childNodes, e => {
-                this.element.removeChild(e);
+                markForRemoval.push(e);
            });
+            markForRemoval.forEach(e => {
+                this.element.removeChild(e);
+            })
        }

        public onComponentInjected() {
--- a/sim/visuals/wireView.ts
+++ b/sim/visuals/wireView.ts
@ -41,6 +41,11 @@ namespace pxsim.visuals {
            return this.wire;
        }

+        public updateThemeCore() {
+            let theme = this.theme;
+            this.path.setAttribute('stroke', theme.wireColor);
+        }
+
        updatePath() {
            if (!this.hasDimensions) return;
            const height = this.endY - this.startY;
--- a/targetconfig.json
+++ b/targetconfig.json
@ -15,6 +15,6 @@
        "Maker": "maker"
    },
    "electronManifest": {
-        "latest": "v0.1.19"
+        "latest": "v0.1.56"
    }
 }
--- a/theme/style.less
+++ b/theme/style.less
@ -111,9 +111,11 @@
 }

 /* Editor download dialog */
-.ui.button.troubleshoot {
-    background: none !important;
-    color: @blue;
+.ui.downloaddialog.modal>.content {
+    padding: 1rem;
+}
+.ui.downloaddialog.modal>.actions {
+    background-color: #FAFAFA;
 }

 /* Tutorial */
@ -155,22 +157,6 @@
    }
 }

-/** high contrast **/
-.hc {
-    .ui.menu, #downloadArea,
-    .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
-        background-color: black !important;
-        color: white !important;
-    }
-    .ui.red.corner.label {
-        border-color: #d4000d!important;
-    }
-    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
-        border-color: white !important;
-    }
-}
-
-
 /*******************************
     Custom icons
 *******************************/
Author	SHA1	Message	Date
Sam El-Husseini	8689632511	0.2.1	2018-06-13 14:56:58 -07:00
Sam El-Husseini	fd8702f9df	bump pxt-core to 3.13.30,	2018-06-13 14:56:53 -07:00
Sam El-Husseini	93a1717a12	Move to v0.2 and add copyright text	2018-06-13 14:45:03 -07:00
Sam El-Husseini	1e4edc5109	Patch release (0.1.57) (#655 ) Release 0.1.57 with tutorial fix patch	2018-05-18 14:26:13 -07:00
Peli de Halleux	caf273be84	fix line following paragraph	2018-05-18 13:53:59 -07:00
Guillaume Jenkins	ccba83cfab	0.1.57	2018-05-18 16:32:14 -04:00
Guillaume Jenkins	8417c6ce57	Bumping pxt-core to 3.13.29	2018-05-18 16:31:36 -04:00
Guillaume Jenkins	39236fe8b2	Release app 0.1.56	2018-05-18 10:51:16 -04:00
Abhijith Chatra	f50aabeec5	Update issue templates	2018-05-17 16:25:35 -07:00
Peli de Halleux	c2167b6405	0.1.56	2018-05-16 06:37:29 -07:00
Peli de Halleux	59dcd1ee72	fix another support link	2018-05-16 06:37:17 -07:00
Sam El-Husseini	bf8f73f885	Update favicon as per Lego spec (#650 )	2018-05-15 13:40:55 -07:00
Sam El-Husseini	a81e3b9f11	Better description for stop all sounds. (#649 )	2018-05-15 11:21:24 -07:00
Peli de Halleux	e90b6a7946	0.1.55	2018-05-15 07:41:06 -07:00
Peli de Halleux	7ce6c8b773	updated support with https link	2018-05-15 07:40:54 -07:00
Peli de Halleux	022651b338	removing blurb	2018-05-15 07:38:18 -07:00
Sam El-Husseini	8d0bc280a0	Adding prepare card. (#594 )	2018-05-14 11:49:06 -07:00
Abhijith Chatra	7b61a8fbc3	Releasing patch 0.1.54 (#628 )	2018-05-11 18:04:53 -07:00
Abhijith	1d45652ab2	0.1.54	2018-05-11 15:58:11 -07:00
Abhijith	4db9c8bc0a	Bump pxt-core to 3.13.28	2018-05-11 15:57:54 -07:00
Peli de Halleux	df99fa1699	adding filename filter	2018-05-10 11:05:16 -07:00
Guillaume Jenkins	ef218bcc24	0.1.53	2018-05-09 15:02:27 -04:00
Guillaume Jenkins	99ccbfc348	0.1.52	2018-05-09 13:00:30 -04:00
Guillaume Jenkins	101306b8f8	Add crowdin project	2018-05-09 12:59:52 -04:00
Guillaume Jenkins	e167f109b0	0.1.51	2018-05-09 12:39:56 -04:00
Guillaume Jenkins	e5d78d65cb	Add crowdin to build (#591 )	2018-05-09 12:39:25 -04:00
Sam El-Husseini	b79881ade0	Release 0.1.50	2018-05-07 16:52:57 -07:00
Sam El-Husseini	a05d12abdf	0.1.50	2018-05-07 15:13:07 -07:00
Sam El-Husseini	6c2cd1a658	Revert beta fix	2018-05-07 15:12:53 -07:00
Sam El-Husseini	90204ce58f	0.1.49	2018-05-07 15:07:28 -07:00
Sam El-Husseini	d8c4eeeb13	bump pxt-core to 3.12.26,	2018-05-07 15:07:22 -07:00
Sam El-Husseini	df6249931d	Update download dialog (#589 )	2018-05-07 14:59:29 -07:00
Sam El-Husseini	de61919fc1	Don't use ```block in tutorials. (#588 )	2018-05-07 13:20:10 -07:00
Peli de Halleux	105da90f3f	Merge branch 'master' of https://github.com/microsoft/pxt-ev3	2018-05-07 13:03:26 -07:00
Peli de Halleux	023fc8fe96	typo	2018-05-07 13:03:20 -07:00
Sam El-Husseini	442b014233	Release beta (#587 )	2018-05-07 12:57:46 -07:00
Peli de Halleux	54681668ad	0.1.48	2018-05-07 12:35:51 -07:00
Peli de Halleux	db1724b9fa	moving to .24	2018-05-07 12:29:30 -07:00
Sam El-Husseini	7ed5a9bca6	0.1.47	2018-05-07 11:25:04 -07:00
Sam El-Husseini	7de61c7254	Remove beta (#586 )	2018-05-07 11:24:45 -07:00
Sam El-Husseini	df99f18c8d	0.1.46	2018-05-07 11:07:12 -07:00
Sam El-Husseini	6d7bd63c3a	bump pxt-core to 3.12.23,	2018-05-07 11:07:06 -07:00
Guillaume Jenkins	9d1f39981d	Release electron 0.1.43	2018-05-07 10:01:47 -04:00
Peli de Halleux	e4e87c427d	0.1.45	2018-05-05 07:45:59 -07:00
Peli de Halleux	1fece05e5e	bump pxt	2018-05-05 07:37:24 -07:00
Galen Nickel	186c7e2e3f	Small tutorial fixes and FE image updates (#585 )	2018-05-04 18:43:29 -07:00
Galen Nickel	3322119f35	Unplug tutorial intros from step path (#584 )	2018-05-04 16:23:53 -07:00
Sam El-Husseini	515be621a0	0.1.44	2018-05-04 15:54:10 -07:00
Sam El-Husseini	b337f4cf1c	bump pxt-core to 3.12.21,	2018-05-04 15:54:04 -07:00
Sam El-Husseini	e6e6016bc0	0.1.43	2018-05-04 10:37:55 -07:00
Sam El-Husseini	3f23f5afa8	bump pxt-core to 3.12.19, bump pxt-common-packages to 0.22.7,	2018-05-04 10:37:48 -07:00
Sam El-Husseini	f0df0222c0	Fixes for High contrast mode as per lego design. Most changes are in PXT. Adding high contrast theme in the simulator (#564 )	2018-05-04 10:36:48 -07:00
Guillaume Jenkins	2a371b9cc6	Release electron v0.1.40	2018-05-04 10:04:39 -04:00
Peli de Halleux	3211999583	0.1.42	2018-05-03 17:07:09 -07:00
Peli de Halleux	b29862d566	update packaglock	2018-05-03 17:04:22 -07:00
Peli de Halleux	b262d944b7	bump pxt-core to 3.12.18, bump pxt-common-packages to 0.22.2,	2018-05-03 17:03:16 -07:00
Galen Nickel	1b89d08337	Reduce size of tutorial gifs (#562 )	2018-05-03 17:02:22 -07:00
Sam El-Husseini	6bdae6547a	0.1.41	2018-05-03 15:03:24 -07:00
Sam El-Husseini	30a67b729d	Align all modules to a minimum height. (#563 )	2018-05-03 15:02:13 -07:00
Peli de Halleux	3e2c61e212	0.1.40	2018-05-03 11:59:50 -07:00
Peli de Halleux	7a37dec196	Merge branch 'master' of https://github.com/microsoft/pxt-ev3	2018-05-03 11:48:19 -07:00
Peli de Halleux	bac792f188	upgrade firmware -> troubleshoot	2018-05-03 11:48:10 -07:00
Sam El-Husseini	e4c3fa0e57	Make the light around the color sensor appear bright and not a reflection of the current color detected. (#561 )	2018-05-03 08:39:06 -07:00
Sam El-Husseini	76f7df7579	Update favicon	2018-05-03 08:06:39 -07:00
Peli de Halleux	d7e671175c	0.1.39	2018-05-03 06:57:18 -07:00
Peli de Halleux	f4b7230a67	remove "pxtrequire"	2018-05-03 06:55:50 -07:00
Peli de Halleux	afe0f9b0f7	updated pxt	2018-05-03 06:54:30 -07:00
Guillaume Jenkins	23b6edc4bf	Release app 0.1.36	2018-05-03 09:22:18 -04:00
Sam El-Husseini	13b3c1a194	Attempt to shorten color sensor ambient and reflected blocks by removing detected keyword (#560 )	2018-05-02 22:09:04 -07:00
Peli de Halleux	7e58b9b699	Motor angle (#559 ) * control angle with slider * called changed state * remove logging	2018-05-02 22:04:29 -07:00
Galen Nickel	08a860bd80	Update tutorial gifs to match new sim inputs (#558 )	2018-05-02 17:15:29 -07:00
Sam El-Husseini	4a966a73f1	0.1.38	2018-05-02 16:24:41 -07:00
Sam El-Husseini	542216000c	0.1.37	2018-05-02 16:24:35 -07:00
Sam El-Husseini	b323929f03	Fix color grid on IE. (#556 )	2018-05-02 16:23:53 -07:00
Sam El-Husseini	1e3647738d	Update download dialog. (#555 )	2018-05-02 15:15:25 -07:00
Sam El-Husseini	838b3f7f9a	0.1.36	2018-05-02 15:07:55 -07:00
Sam El-Husseini	0ff2d7866d	bump pxt-core to 3.12.16,	2018-05-02 15:07:45 -07:00
Sam El-Husseini	4c978d793a	0.1.35	2018-05-02 14:00:27 -07:00
Sam El-Husseini	06ca53ae89	Remove unused dependencies	2018-05-02 14:00:08 -07:00
Sam El-Husseini	84990d66a9	Update simulator as per latest lego UI design for sensors. Fix full screen layout issues. (#554 )	2018-05-02 13:58:59 -07:00
Sam El-Husseini	4825172423	Update numbers music icon (from lego) (#553 )	2018-05-02 13:55:44 -07:00
Sam El-Husseini	b69af383a6	Better mouse event handling (#552 ) * Use learnings from touch events in Blockly and apply to the Ev3 sim. Register move and up events on the document rather than the individual element allowing users greater flexibility where they move their mouse once it's down. * Add mouse leave events	2018-05-02 13:54:06 -07:00
Sam El-Husseini	6e1a613798	0.1.34	2018-05-02 12:58:27 -07:00
Sam El-Husseini	b5005f3b10	bump pxt-core to 3.12.12,	2018-05-02 12:57:46 -07:00
Guillaume Jenkins	044b585f24	Release Electron app v0.1.30	2018-05-02 10:13:07 -04:00