diff --git a/index.html b/index.html
index 6cc04d6..3b99af4 100755
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
"content": "primary-color-dark = #4a148c\nprimary-color = #673ab7\nhighlight-color = #FFE0B2\nactive-color = #FFC107\nbg-color = #ede7f6\n\npixelated()\n -ms-interpolation-mode: nearest-neighbor\n image-rendering: crisp-edges\n image-rendering: pixelated\n\n@font-face\n font-display: auto\n font-family: 'Chicago'\n src: url('https://danielx.net/fonts/chicago.woff2') format('woff2'),\n url('https://danielx.net/fonts/chicago.woff') format('woff')\n font-weight: normal\n font-style: normal\n\n*\n box-sizing: border-box\n\nimg\n max-width: 100%\n\n.hidden\n display: none !important\n\n#modal \n > *\n border: 1px solid primary-color\n border-radius: 4px\n box-shadow: 1px 2px 0px primary-color\n color: inherit\n padding: 1rem\n\n > h1, > h2\n margin-top: 0\n\n > section.purchase\n background-color: transparent\n border: none\n border-radius: 0\n box-shadow: none\n padding: 0\n\n > .publish\n > p.status:empty\n margin: 0\n \n > pre\n user-select: all\n \n > actions\n display: flex\n > button:last-child\n margin-left: auto\n\n:focus\n color: white\n background-color: primary-color\n outline: none\n\nhtml, body\n height: 100%\n\nbody\n color: #241440\n display: flex\n font-family: Chicago, sans-serif\n font-size: 16px\n line-height: 1rem\n margin: 0\n overflow: hidden\n user-select: none\n\np\n font-family: sans-serif\n\n// Input and form things\ninput, textarea, select, button\n font-family: inherit\n\ninput\n background-color: bg-color\n border: 1px solid primary-color\n border-radius: 4px\n box-shadow: 1px 2px 0px primary-color inset\n color: primary-color\n font-size: inherit\n padding: 2px 0.25em\n\n // Firefox number spinners are a crime to my eyes ;_;\n // TODO Custom style for number spinners on all browsers\n &[type=\"number\"]\n -moz-appearance: textfield\n \n &:focus\n background-color: active-color\n color: rgba(0, 0, 0, 0.69)\n\n@keyframes note-active\n from\n background-color: rgba(0, 0, 0, 0)\n\n to\n background-color: rgba(255, 0, 255, 0)\n\n// Background has to be on ::after so it is above the ledger lines on ::before\n// Accidentals are in ::after content, vertically centered and left of the bg\nnote\n font-size: 48px\n height: 48px\n pixelated()\n position: absolute\n width: 48px\n\n &.active\n animation-name: note-active\n animation-duration: 0.25s\n\n &::after\n align-items: center\n background-repeat: no-repeat\n background-position: 100% 50%\n content: \"\"\n display: flex\n position: absolute\n left: 0\n top: 0\n width: 100%\n height: 100%\n text-indent: -12px\n\n &.♭\n &::after\n content: \"♭\"\n\n &.♯\n &::after\n content: \"♯\"\n\n // Extra ledger lines\n &.C4, &.A5, &.C6, &.C2, &.E2, &.B5, &.D2\n &::before\n content: \"\"\n width: 48px\n left: 0px\n top: 23px\n position: absolute\n height: 0\n border-bottom: 2px solid black\n\n &.B5\n &::before\n top: 40px\n\n &.D2\n &::before\n top: -8px\n\nsong-section\n height: 483px\n position: absolute\n top: -241px\n\n &::after\n content: \"\"\n border-right: 2px solid black\n height: 100%\n position: absolute\n right: 10px\n\n > span.measure-number\n background-color: rgba(255, 255, 255, 0.9375)\n border: 1px solid black\n box-shadow: 1px 1px 0 0 rgba(0,0,0,0.5)\n font-style: italic\n left: 0px\n padding: 2px 6px 2px 4px\n position: absolute\n top: -132px\n\n > div.key-signature\n &.s > ::after\n content: \"♯\"\n\n &.f > ::after\n content: \"♭\"\n\n > *\n display: none\n font-size: 96px\n height: 48px\n position: absolute\n width: 48px\n\n &::after\n align-items: center\n display: flex\n height: 100%\n width: 100%\n\n &.s1, &.s2, &.s3, &.s4, &.s5, &.s6, &.s7\n > :nth-child(1)\n display: initial\n top: -24px\n left: -96px\n &.s2, &.s3, &.s4, &.s5, &.s6, &.s7\n > :nth-child(2)\n display: initial\n top: 48px\n left: -72px\n &.s3, &.s4, &.s5, &.s6, &.s7\n > :nth-child(3)\n display: initial\n top: -48px\n left: -48px\n &.s4, &.s5, &.s6, &.s7\n > :nth-child(4)\n display: initial\n top: 24px\n left: -24px\n &.s5, &.s6, &.s7\n > :nth-child(5)\n display: initial\n top: 96px\n left: 0\n &.s6, &.s7\n > :nth-child(6)\n display: initial\n top: 0px\n left: 24px\n &.s7\n > :nth-child(7)\n display: initial\n top: 72px\n left: 48px\n \n &.f1, &.f2, &.f3, &.f4, &.f5, &.f6, &.f7\n > :nth-child(1)\n display: initial\n top: 72px\n left: -96px\n &.f2, &.f3, &.f4, &.f5, &.f6, &.f7\n > :nth-child(2)\n display: initial\n top: 0px\n left: -72px\n &.f3, &.f4, &.f5, &.f6, &.f7\n > :nth-child(3)\n display: initial\n top: 96px\n left: -48px\n &.f4, &.f5, &.f6, &.f7\n > :nth-child(4)\n display: initial\n top: 24px\n left: -24px\n &.f5, &.f6, &.f7\n > :nth-child(5)\n display: initial\n top: -48px\n left: 0\n &.f6, &.f7\n > :nth-child(6)\n display: initial\n top: 48px\n left: 24px\n &.f7\n > :nth-child(7)\n display: initial\n top: -24px\n left: 48px\n\ntd\n > select\n width: 100%\n > input\n border-radius: 0\n box-shadow: none\n > aside.fx-picker\n > label\n display: none\n\n &.sprite\n text-align: center\n vertical-align: middle\n\n > img\n margin-right: 1rem\n vertical-align: middle\n \n &.input\n > input[type=number]\n display: block\n margin: auto\n width: 60px\n\nsection.settings\n overflow: auto\n padding: 1rem\n position: relative\n\n > h2\n margin: 0 0 1rem\n > button.close\n position: absolute\n top: 1rem\n right: 1rem\n\n > table\n margin: 0 -8px\n width: calc(100% + 16px)\n\nsection.demo-picker\n overflow: auto\n padding: 1rem\n position: relative\n\n > h2\n margin: 0 0 1rem\n > button.close\n position: absolute\n top: 1rem\n right: 1rem\n\n > table\n font-size: 18px\n > tbody\n > tr\n cursor: pointer\n line-height: 2rem\n\n &:hover\n background-color: rgba(103, 58, 183, 0.19)\n\nviewport\n background-attachment: local\n background-color: bg-color\n display: flex\n height: 100%\n align-items: center\n overflow-x: scroll\n overflow-y: hidden\n\n > staff\n background-color: rgba(255, 255, 255, 0.9375)\n border: 1px solid rgba(0, 0, 0, 0.5)\n box-sizing: content-box\n box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.5)\n display: block\n flex: 0 0 auto\n padding: 96px 0\n position: relative\n margin: 0 48px\n z-index: 0\n\n // Hack for right margin inside scrollable viewport\n // Also serving as song end bar\n &::after\n border-left: 8px solid black\n content: \"\"\n position: absolute\n right: -48px\n top: 96px\n width: 48px\n height: calc(100% - 192px)\n z-index: -1\n\n > z-meter\n display: block\n position: absolute\n left: 256px\n top: 96px\n height: calc(100% - 192px)\n width: calc(100% - 256px)\n\n &::before\n content: \"\"\n border-left: 2px solid black\n position: absolute\n height: 100%\n left: -257px\n\n > div.repeat\n position: absolute\n right: 0\n height: 100%\n\n &::before, &::after\n content: \"\"\n display: block\n background-color: black\n border-radius: 100%\n position: absolute\n width: 16px\n height: 16px\n right: 16px\n top: 66px\n\n &::after\n top: 114px\n \n &.bass\n position: relative\n top: 288px\n\n > notes\n display: block\n position: absolute\n left: 256px\n top: 337px\n\n > pattern-preview\n opacity: 0.5\n position: absolute\n\n > selection\n background-color: rgba(103, 58, 183, 0.25)\n border: 2px dashed primary-color\n position: absolute\n left: -150px\n z-index: 20\n\n > button\n display: none\n position: absolute\n top: 0\n left: 0\n right: 0\n bottom: 0\n margin: auto\n width: 48px\n height: 48px\n\n &.up\n bottom: calc(100%+4px)\n top: auto\n &.down\n top: calc(100%+4px)\n bottom: auto\n &.left\n right: calc(100%+4px)\n left: auto\n &.right\n left: calc(100%+4px)\n right: auto\n\n > actions\n display: none\n position: absolute\n\n > button\n margin-left: 4px\n\n &.t > actions\n top: 0\n &.b > actions\n bottom: 0\n &.l > actions\n left: 0\n &.r > actions\n right: 0\n\n &.set \n > actions\n display: flex\n > button\n display: block\n\n > lines\n display: block\n margin-bottom: 48px\n \n &:nth-child(2)\n margin-bottom: 0\n\n > line:last-child\n height: 0\n\n > line\n border-top: 3px solid black\n display: block\n height: 48px\n\n > playhead\n border-left: 1px solid rgba(103, 58, 183, 0.5)\n border-right: 1px solid rgba(103, 58, 183, 0.5)\n position: absolute\n top: 0\n height: 674px\n width: 2px\n z-index: 10\n\n &.buffer-start\n display: none\n border-color: rgba(255, 0, 0, 0.5)\n\n &.buffer-end\n display: none\n border-color: rgba(0, 0, 255, 0.5)\n\n > img\n position: absolute\n height: 600px\n top: -94px\n left: -120px\n\n &:last-child\n left: -100px\n top: 181px\n\nform\n > label\n display: block\n\n > h3\n font-size: 1rem\n\n &.inline\n display: inline-block\n margin-right: 0.5em\n\n > input\n padding-left: 2px\n width: 100%\n\n > actions\n display: flex\n justify-content: space-between\n margin-top: 1em\n\n &.purchase\n width: 672px\n\napp\n display: flex\n flex: 1 0\n height: 100%\n flex-direction: column\n\nbutton.loop\n font-size: 32px\n line-height: 1rem\n\naside.meter-picker\n margin-left: 8px\n > button\n border-radius: 0\n\n &:first-child\n border-top-left-radius: 4px\n border-bottom-left-radius: 4px\n\n &:last-child\n border-top-right-radius: 4px\n border-bottom-right-radius: 4px\n\naside.note-control\n > section\n display: flex\n margin-left: 1rem\n \n > label\n display: flex\n align-items: center\n margin-right: 4px\n\n > button\n flex: 0 0 auto\n font-size: 20px\n line-height: 1rem\n width: 36px\n\n border-radius: 0\n\n &.triplet\n font-size: 16px\n\n &:nth-child(n + 3)\n border-left: 0\n\n &:nth-child(2)\n border-top-left-radius: 4px\n border-bottom-left-radius: 4px\n\n &.snap\n > button\n &:nth-child(5)\n border-top-right-radius: 4px\n border-bottom-right-radius: 4px\n \n > input\n margin-left: 5px\n width: 60px\n\n &.accidental\n > button:nth-child(4)\n border-top-right-radius: 4px\n border-bottom-right-radius: 4px\n\nsection.persistence\n display: flex\n flex-direction: column\n padding: 1rem\n width: 480px\n\n > button\n margin-top: 8px\n width: 100%\n\n &:first-child\n margin-top: 0\n\nabout > actions\n > button, a.button\n width: 100%\n margin-top: 8px\n\naside\n display: flex\n > label\n display: flex\n align-items: center\n margin-right: 4px\n margin-left: 1rem\n\naside.stereo-analyser\n > canvas\n border: 1px solid #673ab7\n border-radius: 4px\n\naside.fx-picker\n display: flex\n\n > button\n background-size: 100%\n border: 1px solid #673ab7\n border-radius: 4px\n height: 36px\n padding: 0\n margin-left: 2px\n width: 36px\n\naside.actions\n background-color: white\n border-top: 2px solid primary-color\n display: flex\n flex: 0 0 auto\n flex-direction: column\n padding: 4px 4px 0px 4px\n width: 100%\n\n > section:nth-child(2)\n > button, > a.button\n padding: 15px 8px\n\n > section\n display: flex\n &:last-child\n margin-top: 8px\n\n > section.buttons\n > *\n margin-bottom: 6px\n \n &:nth-child(n + 2)\n margin-left: 4px\n \n > form\n display: flex\n \n > button, > a.button\n flex: 0 0 auto\n\n > label\n align-items: center\n border: 1px solid #673ab7\n border-radius: 4px\n box-shadow: 1px 2px 0px #673ab7\n color: #673ab7\n display: flex\n flex-direction: column\n padding: 5px 8px 4px\n white-space: nowrap\n \n > input\n padding: 2px 0 0\n text-align: center\n width: 60px\n \n > h2\n display: block\n font-size: 1em\n font-weight: normal\n margin: 0 0 4px\n \n > .right\n margin-left: auto\n\nactions > label\n background-color: white\n border 1px solid primary-color\n border-radius: 4px\n box-shadow: 1px 2px 0px primary-color\n color: #673ab7\n cursor: pointer\n font: inherit\n line-height: 1em\n padding: 9px 16px\n &:nth-child(n + 2)\n margin-left: 4px\n\na.button\n align-items: center\n display: inline-flex\n justify-content: center\n text-align: center\n text-decoration: none\n\n // Hack for merch icon spacing\n > :nth-child(2)\n margin-left: 5px\n\nbutton, a.button\n background-color: white\n border 1px solid primary-color\n border-radius: 4px\n box-shadow: 1px 2px 0px primary-color\n color: #673ab7\n cursor: pointer\n font-size: inherit\n line-height: 1em\n padding: 9px 8px\n white-space: nowrap\n\n &.full\n width: 100%\n\n &:focus\n background-color: active-color\n color: rgba(0, 0, 0, 0.69)\n outline-offset: 4px\n\n &:active, &.active\n background-color: primary-color\n border 1px solid primary-color\n color: white\n box-shadow: 1px 2px 0px #241440 inset\n\n &:disabled\n background-color: #eee\n border-color: #4e4e4e\n box-shadow: 1px 2px 0px #4e4e4e\n color: #4e4e4e\n cursor: default\n\ntools, patterns\n background-color: white\n border-bottom: 2px solid primary-color\n display: flex\n width: 100%\n\n > *\n background-repeat: no-repeat\n background-position: 50% 50%\n border-right: 1px solid primary-color\n cursor: pointer\n display: block\n width: 49px\n height: 48px\n &:hover\n background-color: highlight-color\n &.active\n background-color: active-color\n\n > tool.eraser\n order: 2\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAIdJREFUeJzNUsERwCAIw15n031wDt0Hl0s/9VoF9NnmZzRBCERfI2zusdOtDABmopRGVoRCrdviADNMiADM6L873Mql2NYiw3E2WItzVi2dSuw8JBHNvQyegcU4vmjNFesWZrHFTSlYQ/RhRDgatKZFnXPy7zMIoVaYa3fH5i3PTHira4r/gQv1W1E4p9FksQAAAABJRU5ErkJggg==\")\n\n > .selection\n order: 2\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAiUlEQVRYR+1XQQrAIAyr/3/0RLAyqoUdzNJDvFnEpkkM2MzssX21Qw1SGo0igHfNgfiZ6/sI4HqDSVs6wGlaCNXZpQ7gN80jkIxyNAtLkjIA0BOn99O0d0RlJIjvFC3JZkJ0Q3kgMqAcWIwoB8oEkXKAHsV0APIAXQI6AHkA9vf78jUbZ+gAaB7opmM7IWnG3nUAAAAASUVORK5CYII=\")\n\ntools\n > *\n pixelated()\n\npatterns\n margin-top: -1px\n\n &:empty\n display: none\n\n > pattern\n display: flex\n padding: 0 8px\n align-items: center\n width: 64px\n overflow: hidden\n\n > preview\n position: relative\n transform: scale(0.0625, 0.0625)\n top: -14px\n\n > *\n transform: scale(4)\n\npre.position\n background-color: rgba(255, 255, 255, 0.9375)\n border: 1px solid black\n box-shadow: 1px 1px 0 0 rgba(0,0,0,0.5)\n padding: 2px 6px 2px 4px\n font-family: inherit\n pointer-events: none\n padding: 4px\n position: absolute\n left: 1rem\n top: calc(45px + 1rem)\n\n &:empty\n display: none\n\npre.debug\n &:empty\n display: none\n\n@media only screen and (max-width: 768px)\n aside.actions\n border-top: none\n padding-top: 0\n > section\n &:first-child\n display: none\n &:nth-child(2)\n margin-top: 0\n\n button\n > span.description\n display: none\n\n tools, patterns\n order: 2\n border: none\n width: 49px\n height: 48px\n\n > *\n border-top: 1px solid primary-color\n display: none\n\n tool.active\n display: block\n\n pattern.active\n display: flex\n\n &.open\n background-color: primary-color\n display: grid\n grid-gap: 1px\n position: absolute\n width: 100%\n height: 100%\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr\n z-index: 1\n\n > *\n background-color: white\n background-size: 100%\n border: none\n display: block\n image-rendering: pixelated\n height: 100%\n width: 100%\n\n &:hover\n background-color: #FFE0B2\n"
},
"templates/about.jadelet": {
- "content": "about\n h1 About\n\n p ProTip™ hold Shift to sharp, Ctrl to flat\n\n p\n | By\n a(href=\"https://danielx.net\") Daniel X. Moore\n | creator of\n a(href=\"https://whimsy.space\") Whimsy.Space\n\n p\n | Email me at: \n a(href=\"mailto:daniel+composer@danielx.net\" title=\"Email me!\") daniel+composer@danielx.net\n\n actions\n a.button(href=\"https://www.youtube.com/channel/UChCCc_j4Q2n1fiNjhlomkqA/videos\" target=\"_blank\") 📺 YouTube\n button(click=@discord) ☎️ Discord\n button(click=@showHelp) ⌨️ Hotkeys\n button(click=@oldVersion) 👵 Old Version\n"
+ "content": "about\n h1 About\n\n p ProTip™ hold Shift to sharp, Ctrl to flat\n\n p\n | By\n a(href=\"https://danielx.net\") Daniel X. Moore\n | creator of\n a(href=\"https://whimsy.space\") Whimsy.Space\n\n p\n"
},
"templates/export.jadelet": {
"content": "form(@submit)\n h2 @title\n label\n h3 File Name\n input(value=@name)\n\n label\n h3.inline Format\n select(value=@selectedType)\n @formatOptionElements\n actions\n button(click=@cancel) Cancel\n button Export!\n"
@@ -739,7 +739,7 @@
"content": "module.exports = \"@font-face {\\n font-display: auto;\\n font-family: 'Chicago';\\n src: url(\\\"https://danielx.net/fonts/chicago.woff2\\\") format('woff2'), url(\\\"https://danielx.net/fonts/chicago.woff\\\") format('woff');\\n font-weight: normal;\\n font-style: normal;\\n}\\n* {\\n box-sizing: border-box;\\n}\\nimg {\\n max-width: 100%;\\n}\\n.hidden {\\n display: none !important;\\n}\\n#modal > * {\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n box-shadow: 1px 2px 0px #673ab7;\\n color: inherit;\\n padding: 1rem;\\n}\\n#modal > * > h1,\\n#modal > * > h2 {\\n margin-top: 0;\\n}\\n#modal > section.purchase {\\n background-color: transparent;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n padding: 0;\\n}\\n#modal > .publish > p.status:empty {\\n margin: 0;\\n}\\n#modal > .publish > pre {\\n user-select: all;\\n}\\n#modal > .publish > actions {\\n display: flex;\\n}\\n#modal > .publish > actions > button:last-child {\\n margin-left: auto;\\n}\\n:focus {\\n color: #fff;\\n background-color: #673ab7;\\n outline: none;\\n}\\nhtml,\\nbody {\\n height: 100%;\\n}\\nbody {\\n color: #241440;\\n display: flex;\\n font-family: Chicago, sans-serif;\\n font-size: 16px;\\n line-height: 1rem;\\n margin: 0;\\n overflow: hidden;\\n user-select: none;\\n}\\np {\\n font-family: sans-serif;\\n}\\ninput,\\ntextarea,\\nselect,\\nbutton {\\n font-family: inherit;\\n}\\ninput {\\n background-color: #ede7f6;\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n box-shadow: 1px 2px 0px #673ab7 inset;\\n color: #673ab7;\\n font-size: inherit;\\n padding: 2px 0.25em;\\n}\\ninput[type=\\\"number\\\"] {\\n -moz-appearance: textfield;\\n}\\ninput:focus {\\n background-color: #ffc107;\\n color: rgba(0,0,0,0.69);\\n}\\nnote {\\n font-size: 48px;\\n height: 48px;\\n -ms-interpolation-mode: nearest-neighbor;\\n image-rendering: crisp-edges;\\n image-rendering: pixelated;\\n position: absolute;\\n width: 48px;\\n}\\nnote.active {\\n animation-name: note-active;\\n animation-duration: 0.25s;\\n}\\nnote::after {\\n align-items: center;\\n background-repeat: no-repeat;\\n background-position: 100% 50%;\\n content: \\\"\\\";\\n display: flex;\\n position: absolute;\\n left: 0;\\n top: 0;\\n width: 100%;\\n height: 100%;\\n text-indent: -12px;\\n}\\nnote.♭::after {\\n content: \\\"♭\\\";\\n}\\nnote.♯::after {\\n content: \\\"♯\\\";\\n}\\nnote.C4::before,\\nnote.A5::before,\\nnote.C6::before,\\nnote.C2::before,\\nnote.E2::before,\\nnote.B5::before,\\nnote.D2::before {\\n content: \\\"\\\";\\n width: 48px;\\n left: 0px;\\n top: 23px;\\n position: absolute;\\n height: 0;\\n border-bottom: 2px solid #000;\\n}\\nnote.B5::before {\\n top: 40px;\\n}\\nnote.D2::before {\\n top: -8px;\\n}\\nsong-section {\\n height: 483px;\\n position: absolute;\\n top: -241px;\\n}\\nsong-section::after {\\n content: \\\"\\\";\\n border-right: 2px solid #000;\\n height: 100%;\\n position: absolute;\\n right: 10px;\\n}\\nsong-section > span.measure-number {\\n background-color: rgba(255,255,255,0.938);\\n border: 1px solid #000;\\n box-shadow: 1px 1px 0 0 rgba(0,0,0,0.5);\\n font-style: italic;\\n left: 0px;\\n padding: 2px 6px 2px 4px;\\n position: absolute;\\n top: -132px;\\n}\\nsong-section > div.key-signature.s > ::after {\\n content: \\\"♯\\\";\\n}\\nsong-section > div.key-signature.f > ::after {\\n content: \\\"♭\\\";\\n}\\nsong-section > div.key-signature > * {\\n display: none;\\n font-size: 96px;\\n height: 48px;\\n position: absolute;\\n width: 48px;\\n}\\nsong-section > div.key-signature > *::after {\\n align-items: center;\\n display: flex;\\n height: 100%;\\n width: 100%;\\n}\\nsong-section > div.key-signature.s1 > :nth-child(1),\\nsong-section > div.key-signature.s2 > :nth-child(1),\\nsong-section > div.key-signature.s3 > :nth-child(1),\\nsong-section > div.key-signature.s4 > :nth-child(1),\\nsong-section > div.key-signature.s5 > :nth-child(1),\\nsong-section > div.key-signature.s6 > :nth-child(1),\\nsong-section > div.key-signature.s7 > :nth-child(1) {\\n display: initial;\\n top: -24px;\\n left: -96px;\\n}\\nsong-section > div.key-signature.s2 > :nth-child(2),\\nsong-section > div.key-signature.s3 > :nth-child(2),\\nsong-section > div.key-signature.s4 > :nth-child(2),\\nsong-section > div.key-signature.s5 > :nth-child(2),\\nsong-section > div.key-signature.s6 > :nth-child(2),\\nsong-section > div.key-signature.s7 > :nth-child(2) {\\n display: initial;\\n top: 48px;\\n left: -72px;\\n}\\nsong-section > div.key-signature.s3 > :nth-child(3),\\nsong-section > div.key-signature.s4 > :nth-child(3),\\nsong-section > div.key-signature.s5 > :nth-child(3),\\nsong-section > div.key-signature.s6 > :nth-child(3),\\nsong-section > div.key-signature.s7 > :nth-child(3) {\\n display: initial;\\n top: -48px;\\n left: -48px;\\n}\\nsong-section > div.key-signature.s4 > :nth-child(4),\\nsong-section > div.key-signature.s5 > :nth-child(4),\\nsong-section > div.key-signature.s6 > :nth-child(4),\\nsong-section > div.key-signature.s7 > :nth-child(4) {\\n display: initial;\\n top: 24px;\\n left: -24px;\\n}\\nsong-section > div.key-signature.s5 > :nth-child(5),\\nsong-section > div.key-signature.s6 > :nth-child(5),\\nsong-section > div.key-signature.s7 > :nth-child(5) {\\n display: initial;\\n top: 96px;\\n left: 0;\\n}\\nsong-section > div.key-signature.s6 > :nth-child(6),\\nsong-section > div.key-signature.s7 > :nth-child(6) {\\n display: initial;\\n top: 0px;\\n left: 24px;\\n}\\nsong-section > div.key-signature.s7 > :nth-child(7) {\\n display: initial;\\n top: 72px;\\n left: 48px;\\n}\\nsong-section > div.key-signature.f1 > :nth-child(1),\\nsong-section > div.key-signature.f2 > :nth-child(1),\\nsong-section > div.key-signature.f3 > :nth-child(1),\\nsong-section > div.key-signature.f4 > :nth-child(1),\\nsong-section > div.key-signature.f5 > :nth-child(1),\\nsong-section > div.key-signature.f6 > :nth-child(1),\\nsong-section > div.key-signature.f7 > :nth-child(1) {\\n display: initial;\\n top: 72px;\\n left: -96px;\\n}\\nsong-section > div.key-signature.f2 > :nth-child(2),\\nsong-section > div.key-signature.f3 > :nth-child(2),\\nsong-section > div.key-signature.f4 > :nth-child(2),\\nsong-section > div.key-signature.f5 > :nth-child(2),\\nsong-section > div.key-signature.f6 > :nth-child(2),\\nsong-section > div.key-signature.f7 > :nth-child(2) {\\n display: initial;\\n top: 0px;\\n left: -72px;\\n}\\nsong-section > div.key-signature.f3 > :nth-child(3),\\nsong-section > div.key-signature.f4 > :nth-child(3),\\nsong-section > div.key-signature.f5 > :nth-child(3),\\nsong-section > div.key-signature.f6 > :nth-child(3),\\nsong-section > div.key-signature.f7 > :nth-child(3) {\\n display: initial;\\n top: 96px;\\n left: -48px;\\n}\\nsong-section > div.key-signature.f4 > :nth-child(4),\\nsong-section > div.key-signature.f5 > :nth-child(4),\\nsong-section > div.key-signature.f6 > :nth-child(4),\\nsong-section > div.key-signature.f7 > :nth-child(4) {\\n display: initial;\\n top: 24px;\\n left: -24px;\\n}\\nsong-section > div.key-signature.f5 > :nth-child(5),\\nsong-section > div.key-signature.f6 > :nth-child(5),\\nsong-section > div.key-signature.f7 > :nth-child(5) {\\n display: initial;\\n top: -48px;\\n left: 0;\\n}\\nsong-section > div.key-signature.f6 > :nth-child(6),\\nsong-section > div.key-signature.f7 > :nth-child(6) {\\n display: initial;\\n top: 48px;\\n left: 24px;\\n}\\nsong-section > div.key-signature.f7 > :nth-child(7) {\\n display: initial;\\n top: -24px;\\n left: 48px;\\n}\\ntd > select {\\n width: 100%;\\n}\\ntd > input {\\n border-radius: 0;\\n box-shadow: none;\\n}\\ntd > aside.fx-picker > label {\\n display: none;\\n}\\ntd.sprite {\\n text-align: center;\\n vertical-align: middle;\\n}\\ntd.sprite > img {\\n margin-right: 1rem;\\n vertical-align: middle;\\n}\\ntd.input > input[type=number] {\\n display: block;\\n margin: auto;\\n width: 60px;\\n}\\nsection.settings {\\n overflow: auto;\\n padding: 1rem;\\n position: relative;\\n}\\nsection.settings > h2 {\\n margin: 0 0 1rem;\\n}\\nsection.settings > button.close {\\n position: absolute;\\n top: 1rem;\\n right: 1rem;\\n}\\nsection.settings > table {\\n margin: 0 -8px;\\n width: calc(100% + 16px);\\n}\\nsection.demo-picker {\\n overflow: auto;\\n padding: 1rem;\\n position: relative;\\n}\\nsection.demo-picker > h2 {\\n margin: 0 0 1rem;\\n}\\nsection.demo-picker > button.close {\\n position: absolute;\\n top: 1rem;\\n right: 1rem;\\n}\\nsection.demo-picker > table {\\n font-size: 18px;\\n}\\nsection.demo-picker > table > tbody > tr {\\n cursor: pointer;\\n line-height: 2rem;\\n}\\nsection.demo-picker > table > tbody > tr:hover {\\n background-color: rgba(103,58,183,0.19);\\n}\\nviewport {\\n background-attachment: local;\\n background-color: #ede7f6;\\n display: flex;\\n height: 100%;\\n align-items: center;\\n overflow-x: scroll;\\n overflow-y: hidden;\\n}\\nviewport > staff {\\n background-color: rgba(255,255,255,0.938);\\n border: 1px solid rgba(0,0,0,0.5);\\n box-sizing: content-box;\\n box-shadow: 1px 1px 0 0 rgba(0,0,0,0.5);\\n display: block;\\n flex: 0 0 auto;\\n padding: 96px 0;\\n position: relative;\\n margin: 0 48px;\\n z-index: 0;\\n}\\nviewport > staff::after {\\n border-left: 8px solid #000;\\n content: \\\"\\\";\\n position: absolute;\\n right: -48px;\\n top: 96px;\\n width: 48px;\\n height: calc(100% - 192px);\\n z-index: -1;\\n}\\nviewport > staff > z-meter {\\n display: block;\\n position: absolute;\\n left: 256px;\\n top: 96px;\\n height: calc(100% - 192px);\\n width: calc(100% - 256px);\\n}\\nviewport > staff > z-meter::before {\\n content: \\\"\\\";\\n border-left: 2px solid #000;\\n position: absolute;\\n height: 100%;\\n left: -257px;\\n}\\nviewport > staff > z-meter > div.repeat {\\n position: absolute;\\n right: 0;\\n height: 100%;\\n}\\nviewport > staff > z-meter > div.repeat::before,\\nviewport > staff > z-meter > div.repeat::after {\\n content: \\\"\\\";\\n display: block;\\n background-color: #000;\\n border-radius: 100%;\\n position: absolute;\\n width: 16px;\\n height: 16px;\\n right: 16px;\\n top: 66px;\\n}\\nviewport > staff > z-meter > div.repeat::after {\\n top: 114px;\\n}\\nviewport > staff > z-meter > div.repeat.bass {\\n position: relative;\\n top: 288px;\\n}\\nviewport > staff > notes {\\n display: block;\\n position: absolute;\\n left: 256px;\\n top: 337px;\\n}\\nviewport > staff > pattern-preview {\\n opacity: 0.5;\\n position: absolute;\\n}\\nviewport > staff > selection {\\n background-color: rgba(103,58,183,0.25);\\n border: 2px dashed #673ab7;\\n position: absolute;\\n left: -150px;\\n z-index: 20;\\n}\\nviewport > staff > selection > button {\\n display: none;\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n margin: auto;\\n width: 48px;\\n height: 48px;\\n}\\nviewport > staff > selection > button.up {\\n bottom: calc(100% + 4px);\\n top: auto;\\n}\\nviewport > staff > selection > button.down {\\n top: calc(100% + 4px);\\n bottom: auto;\\n}\\nviewport > staff > selection > button.left {\\n right: calc(100% + 4px);\\n left: auto;\\n}\\nviewport > staff > selection > button.right {\\n left: calc(100% + 4px);\\n right: auto;\\n}\\nviewport > staff > selection > actions {\\n display: none;\\n position: absolute;\\n}\\nviewport > staff > selection > actions > button {\\n margin-left: 4px;\\n}\\nviewport > staff > selection.t > actions {\\n top: 0;\\n}\\nviewport > staff > selection.b > actions {\\n bottom: 0;\\n}\\nviewport > staff > selection.l > actions {\\n left: 0;\\n}\\nviewport > staff > selection.r > actions {\\n right: 0;\\n}\\nviewport > staff > selection.set > actions {\\n display: flex;\\n}\\nviewport > staff > selection.set > button {\\n display: block;\\n}\\nviewport > staff > lines {\\n display: block;\\n margin-bottom: 48px;\\n}\\nviewport > staff > lines:nth-child(2) {\\n margin-bottom: 0;\\n}\\nviewport > staff > lines:nth-child(2) > line:last-child {\\n height: 0;\\n}\\nviewport > staff > lines > line {\\n border-top: 3px solid #000;\\n display: block;\\n height: 48px;\\n}\\nviewport > staff > playhead {\\n border-left: 1px solid rgba(103,58,183,0.5);\\n border-right: 1px solid rgba(103,58,183,0.5);\\n position: absolute;\\n top: 0;\\n height: 674px;\\n width: 2px;\\n z-index: 10;\\n}\\nviewport > staff > playhead.buffer-start {\\n display: none;\\n border-color: rgba(255,0,0,0.5);\\n}\\nviewport > staff > playhead.buffer-end {\\n display: none;\\n border-color: rgba(0,0,255,0.5);\\n}\\nviewport > staff > img {\\n position: absolute;\\n height: 600px;\\n top: -94px;\\n left: -120px;\\n}\\nviewport > staff > img:last-child {\\n left: -100px;\\n top: 181px;\\n}\\nform > label {\\n display: block;\\n}\\nform > label > h3 {\\n font-size: 1rem;\\n}\\nform > label > h3.inline {\\n display: inline-block;\\n margin-right: 0.5em;\\n}\\nform > label > input {\\n padding-left: 2px;\\n width: 100%;\\n}\\nform > actions {\\n display: flex;\\n justify-content: space-between;\\n margin-top: 1em;\\n}\\nform.purchase {\\n width: 672px;\\n}\\napp {\\n display: flex;\\n flex: 1 0;\\n height: 100%;\\n flex-direction: column;\\n}\\nbutton.loop {\\n font-size: 32px;\\n line-height: 1rem;\\n}\\naside.meter-picker {\\n margin-left: 8px;\\n}\\naside.meter-picker > button {\\n border-radius: 0;\\n}\\naside.meter-picker > button:first-child {\\n border-top-left-radius: 4px;\\n border-bottom-left-radius: 4px;\\n}\\naside.meter-picker > button:last-child {\\n border-top-right-radius: 4px;\\n border-bottom-right-radius: 4px;\\n}\\naside.note-control > section {\\n display: flex;\\n margin-left: 1rem;\\n}\\naside.note-control > section > label {\\n display: flex;\\n align-items: center;\\n margin-right: 4px;\\n}\\naside.note-control > section > button {\\n flex: 0 0 auto;\\n font-size: 20px;\\n line-height: 1rem;\\n width: 36px;\\n border-radius: 0;\\n}\\naside.note-control > section > button.triplet {\\n font-size: 16px;\\n}\\naside.note-control > section > button:nth-child(n + 3) {\\n border-left: 0;\\n}\\naside.note-control > section > button:nth-child(2) {\\n border-top-left-radius: 4px;\\n border-bottom-left-radius: 4px;\\n}\\naside.note-control > section.snap > button:nth-child(5) {\\n border-top-right-radius: 4px;\\n border-bottom-right-radius: 4px;\\n}\\naside.note-control > section.snap > input {\\n margin-left: 5px;\\n width: 60px;\\n}\\naside.note-control > section.accidental > button:nth-child(4) {\\n border-top-right-radius: 4px;\\n border-bottom-right-radius: 4px;\\n}\\nsection.persistence {\\n display: flex;\\n flex-direction: column;\\n padding: 1rem;\\n width: 480px;\\n}\\nsection.persistence > button {\\n margin-top: 8px;\\n width: 100%;\\n}\\nsection.persistence > button:first-child {\\n margin-top: 0;\\n}\\nabout > actions > button,\\nabout > actions a.button {\\n width: 100%;\\n margin-top: 8px;\\n}\\naside {\\n display: flex;\\n}\\naside > label {\\n display: flex;\\n align-items: center;\\n margin-right: 4px;\\n margin-left: 1rem;\\n}\\naside.stereo-analyser > canvas {\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n}\\naside.fx-picker {\\n display: flex;\\n}\\naside.fx-picker > button {\\n background-size: 100%;\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n height: 36px;\\n padding: 0;\\n margin-left: 2px;\\n width: 36px;\\n}\\naside.actions {\\n background-color: #fff;\\n border-top: 2px solid #673ab7;\\n display: flex;\\n flex: 0 0 auto;\\n flex-direction: column;\\n padding: 4px 4px 0px 4px;\\n width: 100%;\\n}\\naside.actions > section:nth-child(2) > button,\\naside.actions > section:nth-child(2) > a.button {\\n padding: 15px 8px;\\n}\\naside.actions > section {\\n display: flex;\\n}\\naside.actions > section:last-child {\\n margin-top: 8px;\\n}\\naside.actions > section.buttons > * {\\n margin-bottom: 6px;\\n}\\naside.actions > section.buttons > *:nth-child(n + 2) {\\n margin-left: 4px;\\n}\\naside.actions > section.buttons > form {\\n display: flex;\\n}\\naside.actions > section.buttons > button,\\naside.actions > section.buttons > a.button {\\n flex: 0 0 auto;\\n}\\naside.actions > section.buttons > label {\\n align-items: center;\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n box-shadow: 1px 2px 0px #673ab7;\\n color: #673ab7;\\n display: flex;\\n flex-direction: column;\\n padding: 5px 8px 4px;\\n white-space: nowrap;\\n}\\naside.actions > section.buttons > label > input {\\n padding: 2px 0 0;\\n text-align: center;\\n width: 60px;\\n}\\naside.actions > section.buttons > label > h2 {\\n display: block;\\n font-size: 1em;\\n font-weight: normal;\\n margin: 0 0 4px;\\n}\\naside.actions > section.buttons > .right {\\n margin-left: auto;\\n}\\nactions > label {\\n background-color: #fff;\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n box-shadow: 1px 2px 0px #673ab7;\\n color: #673ab7;\\n cursor: pointer;\\n font: inherit;\\n line-height: 1em;\\n padding: 9px 16px;\\n}\\nactions > label:nth-child(n + 2) {\\n margin-left: 4px;\\n}\\na.button {\\n align-items: center;\\n display: inline-flex;\\n justify-content: center;\\n text-align: center;\\n text-decoration: none;\\n}\\na.button > :nth-child(2) {\\n margin-left: 5px;\\n}\\nbutton,\\na.button {\\n background-color: #fff;\\n border: 1px solid #673ab7;\\n border-radius: 4px;\\n box-shadow: 1px 2px 0px #673ab7;\\n color: #673ab7;\\n cursor: pointer;\\n font-size: inherit;\\n line-height: 1em;\\n padding: 9px 8px;\\n white-space: nowrap;\\n}\\nbutton.full,\\na.button.full {\\n width: 100%;\\n}\\nbutton:focus,\\na.button:focus {\\n background-color: #ffc107;\\n color: rgba(0,0,0,0.69);\\n outline-offset: 4px;\\n}\\nbutton:active,\\na.button:active,\\nbutton.active,\\na.button.active {\\n background-color: #673ab7;\\n border: 1px solid #673ab7;\\n color: #fff;\\n box-shadow: 1px 2px 0px #241440 inset;\\n}\\nbutton:disabled,\\na.button:disabled {\\n background-color: #eee;\\n border-color: #4e4e4e;\\n box-shadow: 1px 2px 0px #4e4e4e;\\n color: #4e4e4e;\\n cursor: default;\\n}\\ntools,\\npatterns {\\n background-color: #fff;\\n border-bottom: 2px solid #673ab7;\\n display: flex;\\n width: 100%;\\n}\\ntools > *,\\npatterns > * {\\n background-repeat: no-repeat;\\n background-position: 50% 50%;\\n border-right: 1px solid #673ab7;\\n cursor: pointer;\\n display: block;\\n width: 49px;\\n height: 48px;\\n}\\ntools > *:hover,\\npatterns > *:hover {\\n background-color: #ffe0b2;\\n}\\ntools > *.active,\\npatterns > *.active {\\n background-color: #ffc107;\\n}\\ntools > tool.eraser,\\npatterns > tool.eraser {\\n order: 2;\\n background-image: url(\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAIdJREFUeJzNUsERwCAIw15n031wDt0Hl0s/9VoF9NnmZzRBCERfI2zusdOtDABmopRGVoRCrdviADNMiADM6L873Mql2NYiw3E2WItzVi2dSuw8JBHNvQyegcU4vmjNFesWZrHFTSlYQ/RhRDgatKZFnXPy7zMIoVaYa3fH5i3PTHira4r/gQv1W1E4p9FksQAAAABJRU5ErkJggg==\\\");\\n}\\ntools > .selection,\\npatterns > .selection {\\n order: 2;\\n background-image: url(\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAiUlEQVRYR+1XQQrAIAyr/3/0RLAyqoUdzNJDvFnEpkkM2MzssX21Qw1SGo0igHfNgfiZ6/sI4HqDSVs6wGlaCNXZpQ7gN80jkIxyNAtLkjIA0BOn99O0d0RlJIjvFC3JZkJ0Q3kgMqAcWIwoB8oEkXKAHsV0APIAXQI6AHkA9vf78jUbZ+gAaB7opmM7IWnG3nUAAAAASUVORK5CYII=\\\");\\n}\\ntools > * {\\n -ms-interpolation-mode: nearest-neighbor;\\n image-rendering: crisp-edges;\\n image-rendering: pixelated;\\n}\\npatterns {\\n margin-top: -1px;\\n}\\npatterns:empty {\\n display: none;\\n}\\npatterns > pattern {\\n display: flex;\\n padding: 0 8px;\\n align-items: center;\\n width: 64px;\\n overflow: hidden;\\n}\\npatterns > pattern > preview {\\n position: relative;\\n transform: scale(0.0625, 0.0625);\\n top: -14px;\\n}\\npatterns > pattern > preview > * {\\n transform: scale(4);\\n}\\npre.position {\\n background-color: rgba(255,255,255,0.938);\\n border: 1px solid #000;\\n box-shadow: 1px 1px 0 0 rgba(0,0,0,0.5);\\n padding: 2px 6px 2px 4px;\\n font-family: inherit;\\n pointer-events: none;\\n padding: 4px;\\n position: absolute;\\n left: 1rem;\\n top: calc(45px + 1rem);\\n}\\npre.position:empty {\\n display: none;\\n}\\npre.debug:empty {\\n display: none;\\n}\\n@media only screen and (max-width: 768px) {\\n aside.actions {\\n border-top: none;\\n padding-top: 0;\\n }\\n aside.actions > section:first-child {\\n display: none;\\n }\\n aside.actions > section:nth-child(2) {\\n margin-top: 0;\\n }\\n button > span.description {\\n display: none;\\n }\\n tools,\\n patterns {\\n order: 2;\\n border: none;\\n width: 49px;\\n height: 48px;\\n }\\n tools > *,\\n patterns > * {\\n border-top: 1px solid #673ab7;\\n display: none;\\n }\\n tools tool.active,\\n patterns tool.active {\\n display: block;\\n }\\n tools pattern.active,\\n patterns pattern.active {\\n display: flex;\\n }\\n tools.open,\\n patterns.open {\\n background-color: #673ab7;\\n display: grid;\\n grid-gap: 1px;\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\\n z-index: 1;\\n }\\n tools.open > *,\\n patterns.open > * {\\n background-color: #fff;\\n background-size: 100%;\\n border: none;\\n display: block;\\n image-rendering: pixelated;\\n height: 100%;\\n width: 100%;\\n }\\n tools.open > *:hover,\\n patterns.open > *:hover {\\n background-color: #ffe0b2;\\n }\\n}\\n@-moz-keyframes note-active {\\n from {\\n background-color: rgba(0,0,0,0);\\n }\\n to {\\n background-color: rgba(255,0,255,0);\\n }\\n}\\n@-webkit-keyframes note-active {\\n from {\\n background-color: rgba(0,0,0,0);\\n }\\n to {\\n background-color: rgba(255,0,255,0);\\n }\\n}\\n@-o-keyframes note-active {\\n from {\\n background-color: rgba(0,0,0,0);\\n }\\n to {\\n background-color: rgba(255,0,255,0);\\n }\\n}\\n@keyframes note-active {\\n from {\\n background-color: rgba(0,0,0,0);\\n }\\n to {\\n background-color: rgba(255,0,255,0);\\n }\\n}\\n\";"
},
"templates/about": {
- "content": "module.exports = system.ui.Jadelet.exec([\"about\",{},[[\"h1\",{},[\"About\"]],[\"p\",{},[\"ProTip™ hold Shift to sharp, Ctrl to flat\"]],[\"p\",{},[\"By\\n\",[\"a\",{\"href\":\"https://danielx.net\"},[\"Daniel X. Moore\"]],\" creator of\\n\",[\"a\",{\"href\":\"https://whimsy.space\"},[\"Whimsy.Space\"]]]],[\"p\",{},[\"Email me at: \\n\",[\"a\",{\"href\":\"mailto:daniel+composer@danielx.net\",\"title\":\"Email me!\"},[\"daniel+composer@danielx.net\"]]]],[\"actions\",{},[[\"a\",{\"class\":[\"button\"],\"href\":\"https://www.youtube.com/channel/UChCCc_j4Q2n1fiNjhlomkqA/videos\",\"target\":\"_blank\"},[\"📺 YouTube\"]],[\"button\",{\"click\":{\"bind\":\"discord\"}},[\"☎️ Discord\"]],[\"button\",{\"click\":{\"bind\":\"showHelp\"}},[\"⌨️ Hotkeys\"]],[\"button\",{\"click\":{\"bind\":\"oldVersion\"}},[\"👵 Old Version\"]]]]]]);"
+ "content": "module.exports = system.ui.Jadelet.exec([\"about\",{},[[\"h1\",{},[\"About\"]],[\"p\",{},[\"ProTip™ hold Shift to sharp, Ctrl to flat\"]],[\"p\",{},[\"By\\n\",[\"a\",{\"href\":\"https://danielx.net\"},[\"Daniel X. Moore\"]],\" creator of\\n\",[\"a\",{\"href\":\"https://whimsy.space\"},[\"Whimsy.Space\"]]]]]]);"
},
"templates/actions": {
"content": "module.exports = system.ui.Jadelet.exec([\"aside\",{\"class\":[\"actions\"]},[[\"section\",{},[[\"button\",{\"class\":[\"loop\",{\"bind\":\"loopButtonClass\"}],\"click\":{\"bind\":\"toggleLoop\"}},[\"𝄇\"]],{\"bind\":\"meterPickerElement\"},{\"bind\":\"noteControlElement\"},{\"bind\":\"fxPickerElement\"},{\"bind\":\"stereoAnalyserElement\"}]],[\"section\",{\"class\":[\"buttons\"]},[[\"button\",{\"class\":[\"play\",{\"bind\":\"playButtonClass\"}],\"click\":{\"bind\":\"play\"},\"title\":\"Play\"},[[\"span\",{\"class\":[\"icon\"]},[\"▶️\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Play\"]]]],[\"button\",{\"click\":{\"bind\":\"rewind\"},\"title\":\"Rewind\"},[[\"span\",{\"class\":[\"icon\"]},[\"⏪\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Go to Start\"]]]],[\"label\",{},[[\"h2\",{},[\"Tempo\"]],[\"input\",{\"value\":{\"bind\":\"tempo\"},\"keydown\":{\"bind\":\"inputHotkeys\"},\"type\":\"number\",\"min\":\"1\",\"step\":\"1\"},[]]]],[\"label\",{},[[\"h2\",{},[\"Length\"]],[\"input\",{\"value\":{\"bind\":\"length\"},\"keydown\":{\"bind\":\"inputHotkeys\"},\"type\":\"number\",\"min\":\"4\",\"step\":\"4\"},[]]]],[\"button\",{\"class\":[{\"bind\":\"hiddenUnlessPurchased\"}],\"click\":{\"bind\":\"showArranger\"}},[[\"span\",{\"class\":[\"icon\"]},[\"📑\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Sections\"]]]],[\"button\",{\"click\":{\"bind\":\"undo\"},\"disabled\":{\"bind\":\"undoDisabled\"}},[[\"span\",{\"class\":[\"icon\"]},[\"↩️\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Undo\"]]]],[\"button\",{\"click\":{\"bind\":\"redo\"},\"disabled\":{\"bind\":\"redoDisabled\"}},[[\"span\",{\"class\":[\"icon\"]},[\"↪️\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Redo\"]]]],[\"button\",{\"click\":{\"bind\":\"clear\"},\"disabled\":{\"bind\":\"clearDisabled\"}},[[\"span\",{\"class\":[\"icon\"]},[\"💣\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Clear\"]]]],[\"button\",{\"click\":{\"bind\":\"showSpriteConfig\"}},[[\"span\",{\"class\":[\"icon\"]},[\"⚙️\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Settings\"]]]],[\"button\",{\"click\":{\"bind\":\"showPersistenceModal\"}},[[\"span\",{\"class\":[\"icon\"]},[\"💾\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"Save/Load\"]]]],[\"button\",{\"class\":[\"right\",{\"bind\":\"hiddenIfPurchased\"}],\"click\":{\"bind\":\"purchase\"}},[\"💸 Buy Now! 💸\"]],[\"button\",{\"click\":{\"bind\":\"about\"}},[[\"span\",{\"class\":[\"icon\"]},[\"📚\"]],\"\\n\",[\"span\",{\"class\":[\"description\"]},[\"About\"]]]]]]]]);"