diff --git a/dependencies.svg b/dependencies.svg
deleted file mode 100644
index 2d2fc61d..00000000
--- a/dependencies.svg
+++ /dev/null
@@ -1,1806 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Generated by graphviz version 2.43.0 (0)
- -->
-<!-- Title: dependency&#45;cruiser output Pages: 1 -->
-<svg width="1638pt" height="1568pt"
- viewBox="0.00 0.00 1637.50 1568.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1564)">
-<title>dependency&#45;cruiser output</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-1564 1633.5,-1564 1633.5,4 -4,4"/>
-<g id="clust1" class="cluster">
-<title>cluster_packages</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M20,-8C20,-8 1609.5,-8 1609.5,-8 1615.5,-8 1621.5,-14 1621.5,-20 1621.5,-20 1621.5,-1540 1621.5,-1540 1621.5,-1546 1615.5,-1552 1609.5,-1552 1609.5,-1552 20,-1552 20,-1552 14,-1552 8,-1546 8,-1540 8,-1540 8,-20 8,-20 8,-14 14,-8 20,-8"/>
-<text text-anchor="middle" x="814.75" y="-1540.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">packages</text>
-</g>
-<g id="clust2" class="cluster">
-<title>cluster_packages/core</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M941.5,-296C941.5,-296 1601.5,-296 1601.5,-296 1607.5,-296 1613.5,-302 1613.5,-308 1613.5,-308 1613.5,-624 1613.5,-624 1613.5,-630 1607.5,-636 1601.5,-636 1601.5,-636 941.5,-636 941.5,-636 935.5,-636 929.5,-630 929.5,-624 929.5,-624 929.5,-308 929.5,-308 929.5,-302 935.5,-296 941.5,-296"/>
-<text text-anchor="middle" x="1271.5" y="-624.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">core</text>
-</g>
-<g id="clust3" class="cluster">
-<title>cluster_packages/core/test</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M949.5,-304C949.5,-304 1038.5,-304 1038.5,-304 1044.5,-304 1050.5,-310 1050.5,-316 1050.5,-316 1050.5,-464 1050.5,-464 1050.5,-470 1044.5,-476 1038.5,-476 1038.5,-476 949.5,-476 949.5,-476 943.5,-476 937.5,-470 937.5,-464 937.5,-464 937.5,-316 937.5,-316 937.5,-310 943.5,-304 949.5,-304"/>
-<text text-anchor="middle" x="994" y="-464.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">test</text>
-</g>
-<g id="clust4" class="cluster">
-<title>cluster_packages/embed</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M45,-1340C45,-1340 95,-1340 95,-1340 101,-1340 107,-1346 107,-1352 107,-1352 107,-1380 107,-1380 107,-1386 101,-1392 95,-1392 95,-1392 45,-1392 45,-1392 39,-1392 33,-1386 33,-1380 33,-1380 33,-1352 33,-1352 33,-1346 39,-1340 45,-1340"/>
-<text text-anchor="middle" x="70" y="-1380.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">embed</text>
-</g>
-<g id="clust5" class="cluster">
-<title>cluster_packages/eval</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M689.5,-146C689.5,-146 1161.5,-146 1161.5,-146 1167.5,-146 1173.5,-152 1173.5,-158 1173.5,-158 1173.5,-276 1173.5,-276 1173.5,-282 1167.5,-288 1161.5,-288 1161.5,-288 689.5,-288 689.5,-288 683.5,-288 677.5,-282 677.5,-276 677.5,-276 677.5,-158 677.5,-158 677.5,-152 683.5,-146 689.5,-146"/>
-<text text-anchor="middle" x="925.5" y="-276.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">eval</text>
-</g>
-<g id="clust6" class="cluster">
-<title>cluster_packages/eval/shift&#45;traverser</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M1086.5,-182C1086.5,-182 1153.5,-182 1153.5,-182 1159.5,-182 1165.5,-188 1165.5,-194 1165.5,-194 1165.5,-222 1165.5,-222 1165.5,-228 1159.5,-234 1153.5,-234 1153.5,-234 1086.5,-234 1086.5,-234 1080.5,-234 1074.5,-228 1074.5,-222 1074.5,-222 1074.5,-194 1074.5,-194 1074.5,-188 1080.5,-182 1086.5,-182"/>
-<text text-anchor="middle" x="1120" y="-222.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">shift&#45;traverser</text>
-</g>
-<g id="clust7" class="cluster">
-<title>cluster_packages/eval/test</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M697.5,-154C697.5,-154 799.5,-154 799.5,-154 805.5,-154 811.5,-160 811.5,-166 811.5,-166 811.5,-224 811.5,-224 811.5,-230 805.5,-236 799.5,-236 799.5,-236 697.5,-236 697.5,-236 691.5,-236 685.5,-230 685.5,-224 685.5,-224 685.5,-166 685.5,-166 685.5,-160 691.5,-154 697.5,-154"/>
-<text text-anchor="middle" x="748.5" y="-224.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">test</text>
-</g>
-<g id="clust8" class="cluster">
-<title>cluster_packages/midi</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M594.5,-86C594.5,-86 772,-86 772,-86 778,-86 784,-92 784,-98 784,-98 784,-126 784,-126 784,-132 778,-138 772,-138 772,-138 594.5,-138 594.5,-138 588.5,-138 582.5,-132 582.5,-126 582.5,-126 582.5,-98 582.5,-98 582.5,-92 588.5,-86 594.5,-86"/>
-<text text-anchor="middle" x="683.25" y="-126.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">midi</text>
-</g>
-<g id="clust9" class="cluster">
-<title>cluster_packages/mini</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M833,-16C833,-16 1151.5,-16 1151.5,-16 1157.5,-16 1163.5,-22 1163.5,-28 1163.5,-28 1163.5,-116 1163.5,-116 1163.5,-122 1157.5,-128 1151.5,-128 1151.5,-128 833,-128 833,-128 827,-128 821,-122 821,-116 821,-116 821,-28 821,-28 821,-22 827,-16 833,-16"/>
-<text text-anchor="middle" x="992.25" y="-116.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">mini</text>
-</g>
-<g id="clust10" class="cluster">
-<title>cluster_packages/mini/test</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M841,-50C841,-50 908,-50 908,-50 914,-50 920,-56 920,-62 920,-62 920,-90 920,-90 920,-96 914,-102 908,-102 908,-102 841,-102 841,-102 835,-102 829,-96 829,-90 829,-90 829,-62 829,-62 829,-56 835,-50 841,-50"/>
-<text text-anchor="middle" x="874.5" y="-90.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">test</text>
-</g>
-<g id="clust11" class="cluster">
-<title>cluster_packages/osc</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M960.5,-770C960.5,-770 1027.5,-770 1027.5,-770 1033.5,-770 1039.5,-776 1039.5,-782 1039.5,-782 1039.5,-870 1039.5,-870 1039.5,-876 1033.5,-882 1027.5,-882 1027.5,-882 960.5,-882 960.5,-882 954.5,-882 948.5,-876 948.5,-870 948.5,-870 948.5,-782 948.5,-782 948.5,-776 954.5,-770 960.5,-770"/>
-<text text-anchor="middle" x="994" y="-870.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">osc</text>
-</g>
-<g id="clust12" class="cluster">
-<title>cluster_packages/react</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M28,-780C28,-780 657.5,-780 657.5,-780 663.5,-780 669.5,-786 669.5,-792 669.5,-792 669.5,-1186 669.5,-1186 669.5,-1192 663.5,-1198 657.5,-1198 657.5,-1198 28,-1198 28,-1198 22,-1198 16,-1192 16,-1186 16,-1186 16,-792 16,-792 16,-786 22,-780 28,-780"/>
-<text text-anchor="middle" x="342.75" y="-1186.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">react</text>
-</g>
-<g id="clust13" class="cluster">
-<title>cluster_packages/react/dist</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M476,-814C476,-814 649.5,-814 649.5,-814 655.5,-814 661.5,-820 661.5,-826 661.5,-826 661.5,-854 661.5,-854 661.5,-860 655.5,-866 649.5,-866 649.5,-866 476,-866 476,-866 470,-866 464,-860 464,-854 464,-854 464,-826 464,-826 464,-820 470,-814 476,-814"/>
-<text text-anchor="middle" x="562.75" y="-854.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">dist</text>
-</g>
-<g id="clust14" class="cluster">
-<title>cluster_packages/react/src</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M47,-874C47,-874 562.5,-874 562.5,-874 568.5,-874 574.5,-880 574.5,-886 574.5,-886 574.5,-1160 574.5,-1160 574.5,-1166 568.5,-1172 562.5,-1172 562.5,-1172 47,-1172 47,-1172 41,-1172 35,-1166 35,-1160 35,-1160 35,-886 35,-886 35,-880 41,-874 47,-874"/>
-<text text-anchor="middle" x="304.75" y="-1160.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
-</g>
-<g id="clust15" class="cluster">
-<title>cluster_packages/react/src/components</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M237,-1034C237,-1034 421.5,-1034 421.5,-1034 427.5,-1034 433.5,-1040 433.5,-1046 433.5,-1046 433.5,-1134 433.5,-1134 433.5,-1140 427.5,-1146 421.5,-1146 421.5,-1146 237,-1146 237,-1146 231,-1146 225,-1140 225,-1134 225,-1134 225,-1046 225,-1046 225,-1040 231,-1034 237,-1034"/>
-<text text-anchor="middle" x="329.25" y="-1134.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">components</text>
-</g>
-<g id="clust16" class="cluster">
-<title>cluster_packages/react/src/hooks</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M322,-888C322,-888 554,-888 554,-888 560,-888 566,-894 566,-900 566,-900 566,-988 566,-988 566,-994 560,-1000 554,-1000 554,-1000 322,-1000 322,-1000 316,-1000 310,-994 310,-988 310,-988 310,-900 310,-900 310,-894 316,-888 322,-888"/>
-<text text-anchor="middle" x="438" y="-988.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
-</g>
-<g id="clust17" class="cluster">
-<title>cluster_packages/react/src/themes</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M453.5,-1008C453.5,-1008 554.5,-1008 554.5,-1008 560.5,-1008 566.5,-1014 566.5,-1020 566.5,-1020 566.5,-1048 566.5,-1048 566.5,-1054 560.5,-1060 554.5,-1060 554.5,-1060 453.5,-1060 453.5,-1060 447.5,-1060 441.5,-1054 441.5,-1048 441.5,-1048 441.5,-1020 441.5,-1020 441.5,-1014 447.5,-1008 453.5,-1008"/>
-<text text-anchor="middle" x="504" y="-1048.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">themes</text>
-</g>
-<g id="clust18" class="cluster">
-<title>cluster_packages/serial</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M968.5,-644C968.5,-644 1019.5,-644 1019.5,-644 1025.5,-644 1031.5,-650 1031.5,-656 1031.5,-656 1031.5,-684 1031.5,-684 1031.5,-690 1025.5,-696 1019.5,-696 1019.5,-696 968.5,-696 968.5,-696 962.5,-696 956.5,-690 956.5,-684 956.5,-684 956.5,-656 956.5,-656 956.5,-650 962.5,-644 968.5,-644"/>
-<text text-anchor="middle" x="994" y="-684.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">serial</text>
-</g>
-<g id="clust19" class="cluster">
-<title>cluster_packages/soundfonts</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M43.5,-353C43.5,-353 205,-353 205,-353 211,-353 217,-359 217,-365 217,-365 217,-423 217,-423 217,-429 211,-435 205,-435 205,-435 43.5,-435 43.5,-435 37.5,-435 31.5,-429 31.5,-423 31.5,-423 31.5,-365 31.5,-365 31.5,-359 37.5,-353 43.5,-353"/>
-<text text-anchor="middle" x="124.25" y="-423.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">soundfonts</text>
-</g>
-<g id="clust20" class="cluster">
-<title>cluster_packages/tonal</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M831.5,-1132C831.5,-1132 1026,-1132 1026,-1132 1032,-1132 1038,-1138 1038,-1144 1038,-1144 1038,-1232 1038,-1232 1038,-1238 1032,-1244 1026,-1244 1026,-1244 831.5,-1244 831.5,-1244 825.5,-1244 819.5,-1238 819.5,-1232 819.5,-1232 819.5,-1144 819.5,-1144 819.5,-1138 825.5,-1132 831.5,-1132"/>
-<text text-anchor="middle" x="928.75" y="-1232.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">tonal</text>
-</g>
-<g id="clust21" class="cluster">
-<title>cluster_packages/tonal/test</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M839.5,-1166C839.5,-1166 909.5,-1166 909.5,-1166 915.5,-1166 921.5,-1172 921.5,-1178 921.5,-1178 921.5,-1206 921.5,-1206 921.5,-1212 915.5,-1218 909.5,-1218 909.5,-1218 839.5,-1218 839.5,-1218 833.5,-1218 827.5,-1212 827.5,-1206 827.5,-1206 827.5,-1178 827.5,-1178 827.5,-1172 833.5,-1166 839.5,-1166"/>
-<text text-anchor="middle" x="874.5" y="-1206.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">test</text>
-</g>
-<g id="clust22" class="cluster">
-<title>cluster_packages/tone</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M722.5,-890C722.5,-890 1018,-890 1018,-890 1024,-890 1030,-896 1030,-902 1030,-902 1030,-1060 1030,-1060 1030,-1066 1024,-1072 1018,-1072 1018,-1072 722.5,-1072 722.5,-1072 716.5,-1072 710.5,-1066 710.5,-1060 710.5,-1060 710.5,-902 710.5,-902 710.5,-896 716.5,-890 722.5,-890"/>
-<text text-anchor="middle" x="870.25" y="-1060.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">tone</text>
-</g>
-<g id="clust23" class="cluster">
-<title>cluster_packages/tone/test</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M840.5,-954C840.5,-954 908.5,-954 908.5,-954 914.5,-954 920.5,-960 920.5,-966 920.5,-966 920.5,-994 920.5,-994 920.5,-1000 914.5,-1006 908.5,-1006 908.5,-1006 840.5,-1006 840.5,-1006 834.5,-1006 828.5,-1000 828.5,-994 828.5,-994 828.5,-966 828.5,-966 828.5,-960 834.5,-954 840.5,-954"/>
-<text text-anchor="middle" x="874.5" y="-994.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">test</text>
-</g>
-<g id="clust24" class="cluster">
-<title>cluster_packages/webaudio</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M848.5,-1276C848.5,-1276 1159.5,-1276 1159.5,-1276 1165.5,-1276 1171.5,-1282 1171.5,-1288 1171.5,-1288 1171.5,-1374 1171.5,-1374 1171.5,-1380 1165.5,-1386 1159.5,-1386 1159.5,-1386 848.5,-1386 848.5,-1386 842.5,-1386 836.5,-1380 836.5,-1374 836.5,-1374 836.5,-1288 836.5,-1288 836.5,-1282 842.5,-1276 848.5,-1276"/>
-<text text-anchor="middle" x="1004" y="-1374.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">webaudio</text>
-</g>
-<g id="clust25" class="cluster">
-<title>cluster_packages/webdirt</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M594.5,-1206C594.5,-1206 779.5,-1206 779.5,-1206 785.5,-1206 791.5,-1212 791.5,-1218 791.5,-1218 791.5,-1246 791.5,-1246 791.5,-1252 785.5,-1258 779.5,-1258 779.5,-1258 594.5,-1258 594.5,-1258 588.5,-1258 582.5,-1252 582.5,-1246 582.5,-1246 582.5,-1218 582.5,-1218 582.5,-1212 588.5,-1206 594.5,-1206"/>
-<text text-anchor="middle" x="687" y="-1246.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">webdirt</text>
-</g>
-<g id="clust26" class="cluster">
-<title>cluster_packages/xen</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M834.5,-1404C834.5,-1404 1142.5,-1404 1142.5,-1404 1148.5,-1404 1154.5,-1410 1154.5,-1416 1154.5,-1416 1154.5,-1504 1154.5,-1504 1154.5,-1510 1148.5,-1516 1142.5,-1516 1142.5,-1516 834.5,-1516 834.5,-1516 828.5,-1516 822.5,-1510 822.5,-1504 822.5,-1504 822.5,-1416 822.5,-1416 822.5,-1410 828.5,-1404 834.5,-1404"/>
-<text text-anchor="middle" x="988.5" y="-1504.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">xen</text>
-</g>
-<g id="clust27" class="cluster">
-<title>cluster_packages/xen/test</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M842.5,-1438C842.5,-1438 906.5,-1438 906.5,-1438 912.5,-1438 918.5,-1444 918.5,-1450 918.5,-1450 918.5,-1478 918.5,-1478 918.5,-1484 912.5,-1490 906.5,-1490 906.5,-1490 842.5,-1490 842.5,-1490 836.5,-1490 830.5,-1484 830.5,-1478 830.5,-1478 830.5,-1450 830.5,-1450 830.5,-1444 836.5,-1438 842.5,-1438"/>
-<text text-anchor="middle" x="874.5" y="-1478.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">test</text>
-</g>
-<!-- packages/core/controls.mjs -->
-<g id="node1" class="node">
-<title>packages/core/controls.mjs</title>
-<g id="a_node1"><a xlink:href="packages/core/controls.mjs" xlink:title="controls.mjs">
-<path fill="#ffffcc" stroke="black" d="M1254.5,-526C1254.5,-526 1195.5,-526 1195.5,-526 1192.5,-526 1189.5,-523 1189.5,-520 1189.5,-520 1189.5,-514 1189.5,-514 1189.5,-511 1192.5,-508 1195.5,-508 1195.5,-508 1254.5,-508 1254.5,-508 1257.5,-508 1260.5,-511 1260.5,-514 1260.5,-514 1260.5,-520 1260.5,-520 1260.5,-523 1257.5,-526 1254.5,-526"/>
-<text text-anchor="start" x="1197.5" y="-514.8" font-family="Helvetica,sans-Serif" font-size="9.00">controls.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs -->
-<g id="node2" class="node">
-<title>packages/core/pattern.mjs</title>
-<g id="a_node2"><a xlink:href="packages/core/pattern.mjs" xlink:title="pattern.mjs">
-<path fill="#ffffcc" stroke="black" d="M1336.5,-428C1336.5,-428 1279.5,-428 1279.5,-428 1276.5,-428 1273.5,-425 1273.5,-422 1273.5,-422 1273.5,-416 1273.5,-416 1273.5,-413 1276.5,-410 1279.5,-410 1279.5,-410 1336.5,-410 1336.5,-410 1339.5,-410 1342.5,-413 1342.5,-416 1342.5,-416 1342.5,-422 1342.5,-422 1342.5,-425 1339.5,-428 1336.5,-428"/>
-<text text-anchor="start" x="1281.5" y="-416.8" font-family="Helvetica,sans-Serif" font-size="9.00">pattern.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/controls.mjs&#45;&gt;packages/core/pattern.mjs -->
-<g id="edge1" class="edge">
-<title>packages/core/controls.mjs&#45;&gt;packages/core/pattern.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1252.01,-507.94C1255.06,-506.25 1257.98,-504.28 1260.5,-502 1281.52,-482.99 1295.26,-452.17 1302.03,-433.92"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1304.01,-434.6 1304.05,-428.24 1300.06,-433.19 1304.01,-434.6"/>
-</g>
-<!-- packages/core/drawLine.mjs -->
-<g id="node3" class="node">
-<title>packages/core/drawLine.mjs</title>
-<g id="a_node3"><a xlink:href="packages/core/drawLine.mjs" xlink:title="drawLine.mjs">
-<path fill="#ffffcc" stroke="black" d="M1426.5,-350C1426.5,-350 1361.5,-350 1361.5,-350 1358.5,-350 1355.5,-347 1355.5,-344 1355.5,-344 1355.5,-338 1355.5,-338 1355.5,-335 1358.5,-332 1361.5,-332 1361.5,-332 1426.5,-332 1426.5,-332 1429.5,-332 1432.5,-335 1432.5,-338 1432.5,-338 1432.5,-344 1432.5,-344 1432.5,-347 1429.5,-350 1426.5,-350"/>
-<text text-anchor="start" x="1363.5" y="-338.8" font-family="Helvetica,sans-Serif" font-size="9.00">drawLine.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/drawLine.mjs -->
-<g id="edge18" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/drawLine.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1317.73,-409.98C1326.93,-400.56 1341.95,-385.45 1355.5,-373 1362.43,-366.63 1370.33,-359.83 1377.08,-354.14"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1378.73,-355.5 1381.99,-350.03 1376.04,-352.28 1378.73,-355.5"/>
-</g>
-<!-- packages/core/fraction.mjs -->
-<g id="node4" class="node">
-<title>packages/core/fraction.mjs</title>
-<g id="a_node4"><a xlink:href="packages/core/fraction.mjs" xlink:title="fraction.mjs">
-<path fill="#ffffcc" stroke="black" d="M1509.5,-378C1509.5,-378 1451.5,-378 1451.5,-378 1448.5,-378 1445.5,-375 1445.5,-372 1445.5,-372 1445.5,-366 1445.5,-366 1445.5,-363 1448.5,-360 1451.5,-360 1451.5,-360 1509.5,-360 1509.5,-360 1512.5,-360 1515.5,-363 1515.5,-366 1515.5,-366 1515.5,-372 1515.5,-372 1515.5,-375 1512.5,-378 1509.5,-378"/>
-<text text-anchor="start" x="1453.5" y="-366.8" font-family="Helvetica,sans-Serif" font-size="9.00">fraction.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge19" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1319.28,-409.84C1328.2,-402.43 1341.81,-392.36 1355.5,-387 1382.2,-376.54 1414.28,-372.08 1439.13,-370.21"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1439.44,-372.3 1445.28,-369.79 1439.15,-368.11 1439.44,-372.3"/>
-</g>
-<!-- packages/core/util.mjs -->
-<g id="node6" class="node">
-<title>packages/core/util.mjs</title>
-<g id="a_node6"><a xlink:href="packages/core/util.mjs" xlink:title="util.mjs">
-<path fill="#ffffcc" stroke="black" d="M1501.5,-534C1501.5,-534 1459.5,-534 1459.5,-534 1456.5,-534 1453.5,-531 1453.5,-528 1453.5,-528 1453.5,-522 1453.5,-522 1453.5,-519 1456.5,-516 1459.5,-516 1459.5,-516 1501.5,-516 1501.5,-516 1504.5,-516 1507.5,-519 1507.5,-522 1507.5,-522 1507.5,-528 1507.5,-528 1507.5,-531 1504.5,-534 1501.5,-534"/>
-<text text-anchor="start" x="1463.5" y="-522.8" font-family="Helvetica,sans-Serif" font-size="9.00">util.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge23" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1342.58,-412.18C1369.22,-408.69 1406.22,-408.32 1432.5,-426 1461.24,-445.33 1472.87,-487.22 1477.19,-509.82"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1475.16,-510.37 1478.27,-515.91 1479.29,-509.64 1475.16,-510.37"/>
-</g>
-<!-- packages/core/timespan.mjs -->
-<g id="node7" class="node">
-<title>packages/core/timespan.mjs</title>
-<g id="a_node7"><a xlink:href="packages/core/timespan.mjs" xlink:title="timespan.mjs">
-<path fill="#ffffcc" stroke="black" d="M1599.5,-389C1599.5,-389 1534.5,-389 1534.5,-389 1531.5,-389 1528.5,-386 1528.5,-383 1528.5,-383 1528.5,-377 1528.5,-377 1528.5,-374 1531.5,-371 1534.5,-371 1534.5,-371 1599.5,-371 1599.5,-371 1602.5,-371 1605.5,-374 1605.5,-377 1605.5,-377 1605.5,-383 1605.5,-383 1605.5,-386 1602.5,-389 1599.5,-389"/>
-<text text-anchor="start" x="1536.5" y="-377.8" font-family="Helvetica,sans-Serif" font-size="9.00">timespan.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/timespan.mjs -->
-<g id="edge22" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/timespan.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1342.69,-410.61C1346.99,-409.66 1351.34,-408.77 1355.5,-408 1412.69,-397.46 1479.32,-389.28 1522.05,-384.55"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1522.44,-386.62 1528.18,-383.88 1521.98,-382.44 1522.44,-386.62"/>
-</g>
-<!-- packages/core/hap.mjs -->
-<g id="node9" class="node">
-<title>packages/core/hap.mjs</title>
-<g id="a_node9"><a xlink:href="packages/core/hap.mjs" xlink:title="hap.mjs">
-<path fill="#ffffcc" stroke="black" d="M1415,-494C1415,-494 1373,-494 1373,-494 1370,-494 1367,-491 1367,-488 1367,-488 1367,-482 1367,-482 1367,-479 1370,-476 1373,-476 1373,-476 1415,-476 1415,-476 1418,-476 1421,-479 1421,-482 1421,-482 1421,-488 1421,-488 1421,-491 1418,-494 1415,-494"/>
-<text text-anchor="start" x="1375.5" y="-482.8" font-family="Helvetica,sans-Serif" font-size="9.00">hap.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/hap.mjs -->
-<g id="edge20" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/hap.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1320.43,-428.17C1329.82,-435.68 1343.49,-446.58 1355.5,-456 1362.31,-461.34 1369.86,-467.19 1376.38,-472.23"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1375.11,-473.9 1381.14,-475.9 1377.67,-470.57 1375.11,-473.9"/>
-</g>
-<!-- packages/core/state.mjs -->
-<g id="node13" class="node">
-<title>packages/core/state.mjs</title>
-<g id="a_node13"><a xlink:href="packages/core/state.mjs" xlink:title="state.mjs">
-<path fill="#ffffcc" stroke="black" d="M1417,-568C1417,-568 1371,-568 1371,-568 1368,-568 1365,-565 1365,-562 1365,-562 1365,-556 1365,-556 1365,-553 1368,-550 1371,-550 1371,-550 1417,-550 1417,-550 1420,-550 1423,-553 1423,-556 1423,-556 1423,-562 1423,-562 1423,-565 1420,-568 1417,-568"/>
-<text text-anchor="start" x="1373" y="-556.8" font-family="Helvetica,sans-Serif" font-size="9.00">state.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/state.mjs -->
-<g id="edge21" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/state.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1314.03,-428.07C1322.42,-443.13 1339.9,-474.19 1355.5,-500 1364.86,-515.49 1376.05,-532.96 1383.75,-544.84"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1381.99,-546 1387.03,-549.88 1385.52,-543.71 1381.99,-546"/>
-</g>
-<!-- packages/core/value.mjs -->
-<g id="node14" class="node">
-<title>packages/core/value.mjs</title>
-<g id="a_node14"><a xlink:href="packages/core/value.mjs" xlink:title="value.mjs">
-<path fill="#ffffcc" stroke="black" d="M1417.5,-450C1417.5,-450 1370.5,-450 1370.5,-450 1367.5,-450 1364.5,-447 1364.5,-444 1364.5,-444 1364.5,-438 1364.5,-438 1364.5,-435 1367.5,-432 1370.5,-432 1370.5,-432 1417.5,-432 1417.5,-432 1420.5,-432 1423.5,-435 1423.5,-438 1423.5,-438 1423.5,-444 1423.5,-444 1423.5,-447 1420.5,-450 1417.5,-450"/>
-<text text-anchor="start" x="1372.5" y="-438.8" font-family="Helvetica,sans-Serif" font-size="9.00">value.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/pattern.mjs&#45;&gt;packages/core/value.mjs -->
-<g id="edge24" class="edge">
-<title>packages/core/pattern.mjs&#45;&gt;packages/core/value.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1342.68,-427.82C1347.87,-429.18 1353.22,-430.58 1358.43,-431.95"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1358.11,-434.03 1364.44,-433.52 1359.17,-429.97 1358.11,-434.03"/>
-</g>
-<!-- packages/core/drawLine.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge2" class="edge">
-<title>packages/core/drawLine.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1422.2,-350.01C1429.81,-352.54 1438.18,-355.31 1446.1,-357.93"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1445.7,-360.01 1452.06,-359.91 1447.02,-356.03 1445.7,-360.01"/>
-</g>
-<!-- packages/core/fraction.mjs&#45;&gt;packages/core/timespan.mjs -->
-<g id="edge6" class="edge">
-<title>packages/core/fraction.mjs&#45;&gt;packages/core/timespan.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1515.87,-369.04C1516.18,-369.08 1516.49,-369.11 1516.8,-369.15"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1524.62,-372.29 1530.84,-370.98 1525.16,-368.12 1524.62,-372.29"/>
-<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1524.89,-370.2 1521.91,-369.82 "/>
-<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="1519.53" cy="-369.51" rx="2.4" ry="2.4"/>
-</g>
-<!-- packages/core/euclid.mjs -->
-<g id="node5" class="node">
-<title>packages/core/euclid.mjs</title>
-<g id="a_node5"><a xlink:href="packages/core/euclid.mjs" xlink:title="euclid.mjs">
-<path fill="#ffffcc" stroke="black" d="M1250,-364C1250,-364 1200,-364 1200,-364 1197,-364 1194,-361 1194,-358 1194,-358 1194,-352 1194,-352 1194,-349 1197,-346 1200,-346 1200,-346 1250,-346 1250,-346 1253,-346 1256,-349 1256,-352 1256,-352 1256,-358 1256,-358 1256,-361 1253,-364 1250,-364"/>
-<text text-anchor="start" x="1202" y="-352.8" font-family="Helvetica,sans-Serif" font-size="9.00">euclid.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/euclid.mjs&#45;&gt;packages/core/pattern.mjs -->
-<g id="edge4" class="edge">
-<title>packages/core/euclid.mjs&#45;&gt;packages/core/pattern.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1248.64,-364.08C1252.94,-366.52 1257.14,-369.48 1260.5,-373 1269.97,-382.92 1264.09,-391.02 1273.5,-401 1275.33,-402.95 1277.43,-404.73 1279.65,-406.34"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1278.84,-408.32 1285.01,-409.83 1281.13,-404.8 1278.84,-408.32"/>
-</g>
-<!-- packages/core/euclid.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge3" class="edge">
-<title>packages/core/euclid.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1245.53,-346C1283.07,-330.03 1367.37,-300.7 1432.5,-326 1447.38,-331.78 1460.43,-344.72 1468.97,-354.9"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1467.39,-356.29 1472.8,-359.63 1470.66,-353.65 1467.39,-356.29"/>
-</g>
-<!-- packages/core/euclid.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge5" class="edge">
-<title>packages/core/euclid.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1256.02,-359.64C1306.7,-368 1406.25,-386.9 1432.5,-410 1462.68,-436.55 1473.82,-485.38 1477.66,-509.99"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1475.58,-510.33 1478.52,-515.97 1479.74,-509.73 1475.58,-510.33"/>
-</g>
-<!-- packages/core/timespan.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge38" class="edge">
-<title>packages/core/timespan.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1528.35,-379.58C1528.22,-379.56 1528.09,-379.54 1527.96,-379.53"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1522.1,-376.62 1515.87,-377.9 1521.54,-380.78 1522.1,-376.62"/>
-<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1521.82,-378.7 1524.79,-379.1 "/>
-<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="1527.17" cy="-379.42" rx="2.4" ry="2.4"/>
-</g>
-<!-- packages/core/gist.js -->
-<g id="node8" class="node">
-<title>packages/core/gist.js</title>
-<g id="a_node8"><a xlink:href="packages/core/gist.js" xlink:title="gist.js">
-<path fill="#ffffcc" stroke="black" d="M1246,-466C1246,-466 1204,-466 1204,-466 1201,-466 1198,-463 1198,-460 1198,-460 1198,-454 1198,-454 1198,-451 1201,-448 1204,-448 1204,-448 1246,-448 1246,-448 1249,-448 1252,-451 1252,-454 1252,-454 1252,-460 1252,-460 1252,-463 1249,-466 1246,-466"/>
-<text text-anchor="start" x="1211.5" y="-454.8" font-family="Helvetica,sans-Serif" font-size="9.00">gist.js</text>
-</a>
-</g>
-</g>
-<!-- packages/core/index.mjs -->
-<g id="node10" class="node">
-<title>packages/core/index.mjs</title>
-<g id="a_node10"><a xlink:href="packages/core/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M1143.5,-610C1143.5,-610 1095.5,-610 1095.5,-610 1092.5,-610 1089.5,-607 1089.5,-604 1089.5,-604 1089.5,-598 1089.5,-598 1089.5,-595 1092.5,-592 1095.5,-592 1095.5,-592 1143.5,-592 1143.5,-592 1146.5,-592 1149.5,-595 1149.5,-598 1149.5,-598 1149.5,-604 1149.5,-604 1149.5,-607 1146.5,-610 1143.5,-610"/>
-<text text-anchor="start" x="1097.5" y="-598.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/controls.mjs -->
-<g id="edge7" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/controls.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1128.72,-591.6C1140.99,-577.95 1165.25,-552.39 1189.5,-535 1192.31,-532.98 1195.38,-531.05 1198.49,-529.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1199.85,-530.9 1204.09,-526.17 1197.82,-527.23 1199.85,-530.9"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/pattern.mjs -->
-<g id="edge12" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/pattern.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1129.94,-591.84C1142.5,-580.15 1165.89,-560.13 1189.5,-549 1218.85,-535.17 1235.84,-553.09 1260.5,-532 1290.39,-506.43 1301.38,-458.61 1305.16,-434.2"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1307.24,-434.48 1306.01,-428.24 1303.08,-433.89 1307.24,-434.48"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge9" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1149.54,-599.43C1224.96,-595.21 1422.01,-583.35 1432.5,-574 1454.16,-554.68 1439.21,-538.34 1445.5,-510 1455.72,-464 1469.16,-409.9 1475.66,-384.13"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1477.72,-384.54 1477.16,-378.21 1473.65,-383.51 1477.72,-384.54"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/euclid.mjs -->
-<g id="edge8" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/euclid.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1123.19,-591.69C1131.42,-563.76 1157.63,-478.46 1189.5,-412 1196.72,-396.94 1206.77,-380.74 1214.16,-369.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1215.98,-370.52 1217.55,-364.36 1212.48,-368.2 1215.98,-370.52"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge17" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1149.8,-602.53C1217.73,-605.61 1383.88,-610.24 1432.5,-585 1451.2,-575.29 1464.82,-554.44 1472.45,-540.07"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1474.5,-540.66 1475.35,-534.36 1470.76,-538.76 1474.5,-540.66"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/timespan.mjs -->
-<g id="edge16" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/timespan.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1149.56,-603.02C1186.23,-605.39 1251.26,-609 1307,-609 1307,-609 1307,-609 1395,-609 1456.71,-609 1478.77,-589.6 1515.5,-540 1549.18,-494.51 1560.83,-425.9 1564.48,-395.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1566.6,-395.45 1565.18,-389.25 1562.43,-394.98 1566.6,-395.45"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/gist.js -->
-<g id="edge10" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/gist.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1123.07,-591.88C1130,-568.78 1151.22,-507.3 1189.5,-472 1190.51,-471.06 1191.6,-470.18 1192.73,-469.35"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1194.03,-471.01 1197.95,-466.01 1191.76,-467.47 1194.03,-471.01"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/hap.mjs -->
-<g id="edge11" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/hap.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1135.1,-591.89C1148.75,-583.68 1169.91,-571.75 1189.5,-564 1219.87,-551.98 1229.74,-556 1260.5,-545 1299.85,-530.93 1343.69,-509.98 1369.78,-496.92"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1370.97,-498.68 1375.38,-494.1 1369.08,-494.92 1370.97,-498.68"/>
-</g>
-<!-- packages/core/signal.mjs -->
-<g id="node11" class="node">
-<title>packages/core/signal.mjs</title>
-<g id="a_node11"><a xlink:href="packages/core/signal.mjs" xlink:title="signal.mjs">
-<path fill="#ffffcc" stroke="black" d="M1250,-436C1250,-436 1200,-436 1200,-436 1197,-436 1194,-433 1194,-430 1194,-430 1194,-424 1194,-424 1194,-421 1197,-418 1200,-418 1200,-418 1250,-418 1250,-418 1253,-418 1256,-421 1256,-424 1256,-424 1256,-430 1256,-430 1256,-433 1253,-436 1250,-436"/>
-<text text-anchor="start" x="1202" y="-424.8" font-family="Helvetica,sans-Serif" font-size="9.00">signal.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/signal.mjs -->
-<g id="edge13" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/signal.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1122.06,-591.77C1127.02,-565.06 1144.83,-486.7 1189.5,-442 1190.37,-441.13 1191.29,-440.31 1192.26,-439.54"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1193.64,-441.14 1197.42,-436.02 1191.28,-437.67 1193.64,-441.14"/>
-</g>
-<!-- packages/core/speak.mjs -->
-<g id="node12" class="node">
-<title>packages/core/speak.mjs</title>
-<g id="a_node12"><a xlink:href="packages/core/speak.mjs" xlink:title="speak.mjs">
-<path fill="#ffffcc" stroke="black" d="M1250,-496C1250,-496 1200,-496 1200,-496 1197,-496 1194,-493 1194,-490 1194,-490 1194,-484 1194,-484 1194,-481 1197,-478 1200,-478 1200,-478 1250,-478 1250,-478 1253,-478 1256,-481 1256,-484 1256,-484 1256,-490 1256,-490 1256,-493 1253,-496 1250,-496"/>
-<text text-anchor="start" x="1202" y="-484.8" font-family="Helvetica,sans-Serif" font-size="9.00">speak.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/speak.mjs -->
-<g id="edge14" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/speak.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1123.31,-591.99C1130.53,-573.69 1151.16,-532.74 1182.96,-502.4"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1190.56,-498.51 1193.68,-492.97 1187.79,-495.36 1190.56,-498.51"/>
-<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1189.17,-496.93 1186.92,-498.92 "/>
-<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="1185.12" cy="-500.5" rx="2.4" ry="2.4"/>
-</g>
-<!-- packages/core/index.mjs&#45;&gt;packages/core/state.mjs -->
-<g id="edge15" class="edge">
-<title>packages/core/index.mjs&#45;&gt;packages/core/state.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1142.17,-591.92C1155.57,-586.69 1173.26,-580.49 1189.5,-577 1248.05,-564.43 1317.88,-560.61 1358.65,-559.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1358.75,-561.57 1364.69,-559.31 1358.64,-557.37 1358.75,-561.57"/>
-</g>
-<!-- packages/core/signal.mjs&#45;&gt;packages/core/pattern.mjs -->
-<g id="edge27" class="edge">
-<title>packages/core/signal.mjs&#45;&gt;packages/core/pattern.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1256.16,-424.02C1259.73,-423.67 1263.42,-423.3 1267.1,-422.94"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1267.51,-425.01 1273.27,-422.33 1267.09,-420.83 1267.51,-425.01"/>
-</g>
-<!-- packages/core/signal.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge25" class="edge">
-<title>packages/core/signal.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1253.14,-436.02C1255.86,-437.7 1258.39,-439.68 1260.5,-442 1273.07,-455.84 1259.65,-469.45 1273.5,-482 1326.19,-529.76 1374.34,-540.93 1432.5,-500 1470.55,-473.23 1477.95,-412.61 1479.28,-384.21"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1481.39,-384.11 1479.5,-378.04 1477.19,-383.96 1481.39,-384.11"/>
-</g>
-<!-- packages/core/signal.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge28" class="edge">
-<title>packages/core/signal.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1246.98,-436.02C1255.13,-439.24 1264.63,-442.65 1273.5,-445 1290.79,-449.58 1416.89,-461.27 1432.5,-470 1449.57,-479.55 1463.27,-497.84 1471.38,-510.69"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1469.59,-511.8 1474.5,-515.83 1473.18,-509.62 1469.59,-511.8"/>
-</g>
-<!-- packages/core/signal.mjs&#45;&gt;packages/core/hap.mjs -->
-<g id="edge26" class="edge">
-<title>packages/core/signal.mjs&#45;&gt;packages/core/hap.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1252.43,-436.18C1255.34,-437.84 1258.11,-439.77 1260.5,-442 1269.66,-450.54 1263.31,-459.72 1273.5,-467 1298.79,-485.07 1334.82,-488.25 1360.7,-487.73"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1360.78,-489.83 1366.71,-487.54 1360.65,-485.63 1360.78,-489.83"/>
-</g>
-<!-- packages/core/speak.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge29" class="edge">
-<title>packages/core/speak.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1210.94,-496.08C1204.06,-499.19 1195.77,-502.87 1189.5,-508 1165.02,-528.05 1145.41,-558.9 1133.44,-579.6"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1127.68,-585.52 1126.56,-591.78 1131.34,-587.59 1127.68,-585.52"/>
-<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1129.51,-586.56 1130.98,-583.94 "/>
-<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="1132.16" cy="-581.85" rx="2.4" ry="2.4"/>
-</g>
-<!-- packages/core/value.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge39" class="edge">
-<title>packages/core/value.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1418.71,-450.14C1423.55,-452.6 1428.41,-455.56 1432.5,-459 1449.79,-473.56 1463.89,-495.84 1471.99,-510.42"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1470.19,-511.5 1474.9,-515.78 1473.89,-509.5 1470.19,-511.5"/>
-</g>
-<!-- packages/core/test/drawLine.test.mjs -->
-<g id="node15" class="node">
-<title>packages/core/test/drawLine.test.mjs</title>
-<g id="a_node15"><a xlink:href="packages/core/test/drawLine.test.mjs" xlink:title="drawLine.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M1036.5,-360C1036.5,-360 951.5,-360 951.5,-360 948.5,-360 945.5,-357 945.5,-354 945.5,-354 945.5,-348 945.5,-348 945.5,-345 948.5,-342 951.5,-342 951.5,-342 1036.5,-342 1036.5,-342 1039.5,-342 1042.5,-345 1042.5,-348 1042.5,-348 1042.5,-354 1042.5,-354 1042.5,-357 1039.5,-360 1036.5,-360"/>
-<text text-anchor="start" x="953.5" y="-348.8" font-family="Helvetica,sans-Serif" font-size="9.00">drawLine.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/test/drawLine.test.mjs&#45;&gt;packages/core/pattern.mjs -->
-<g id="edge31" class="edge">
-<title>packages/core/test/drawLine.test.mjs&#45;&gt;packages/core/pattern.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1042.57,-354.83C1108.15,-360.65 1222.55,-372.87 1260.5,-390 1267.4,-393.11 1267.24,-396.74 1273.5,-401 1276.43,-403 1279.61,-404.95 1282.8,-406.79"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1282.25,-408.88 1288.51,-409.96 1284.29,-405.21 1282.25,-408.88"/>
-</g>
-<!-- packages/core/test/drawLine.test.mjs&#45;&gt;packages/core/drawLine.mjs -->
-<g id="edge30" class="edge">
-<title>packages/core/test/drawLine.test.mjs&#45;&gt;packages/core/drawLine.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1028.78,-341.98C1035.96,-340.04 1043.49,-337.97 1050.5,-336 1061.2,-332.99 1063.5,-330.57 1074.5,-329 1171.68,-315.12 1287.13,-326.24 1348.85,-334.38"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1348.79,-336.49 1355.02,-335.2 1349.35,-332.32 1348.79,-336.49"/>
-</g>
-<!-- packages/core/test/fraction.test.mjs -->
-<g id="node16" class="node">
-<title>packages/core/test/fraction.test.mjs</title>
-<g id="a_node16"><a xlink:href="packages/core/test/fraction.test.mjs" xlink:title="fraction.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M1033,-330C1033,-330 955,-330 955,-330 952,-330 949,-327 949,-324 949,-324 949,-318 949,-318 949,-315 952,-312 955,-312 955,-312 1033,-312 1033,-312 1036,-312 1039,-315 1039,-318 1039,-318 1039,-324 1039,-324 1039,-327 1036,-330 1033,-330"/>
-<text text-anchor="start" x="957" y="-318.8" font-family="Helvetica,sans-Serif" font-size="9.00">fraction.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/test/fraction.test.mjs&#45;&gt;packages/core/fraction.mjs -->
-<g id="edge32" class="edge">
-<title>packages/core/test/fraction.test.mjs&#45;&gt;packages/core/fraction.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1039.26,-316.07C1085.34,-311.37 1159.64,-305 1224,-305 1224,-305 1224,-305 1309,-305 1364.03,-305 1383.39,-289.16 1432.5,-314 1449.96,-322.83 1463.57,-341.27 1471.55,-354.36"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1469.78,-355.49 1474.63,-359.6 1473.4,-353.37 1469.78,-355.49"/>
-</g>
-<!-- packages/core/test/pattern.test.mjs -->
-<g id="node17" class="node">
-<title>packages/core/test/pattern.test.mjs</title>
-<g id="a_node17"><a xlink:href="packages/core/test/pattern.test.mjs" xlink:title="pattern.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M1032.5,-450C1032.5,-450 955.5,-450 955.5,-450 952.5,-450 949.5,-447 949.5,-444 949.5,-444 949.5,-438 949.5,-438 949.5,-435 952.5,-432 955.5,-432 955.5,-432 1032.5,-432 1032.5,-432 1035.5,-432 1038.5,-435 1038.5,-438 1038.5,-438 1038.5,-444 1038.5,-444 1038.5,-447 1035.5,-450 1032.5,-450"/>
-<text text-anchor="start" x="957.5" y="-438.8" font-family="Helvetica,sans-Serif" font-size="9.00">pattern.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/test/pattern.test.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge33" class="edge">
-<title>packages/core/test/pattern.test.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1001.99,-450.06C1022.53,-476.67 1082.77,-554.71 1107.61,-586.89"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1105.95,-588.17 1111.28,-591.64 1109.27,-585.61 1105.95,-588.17"/>
-</g>
-<!-- packages/core/test/pattern.test.mjs&#45;&gt;packages/core/signal.mjs -->
-<g id="edge34" class="edge">
-<title>packages/core/test/pattern.test.mjs&#45;&gt;packages/core/signal.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1038.61,-438.33C1081.81,-435.69 1147.21,-431.69 1187.68,-429.22"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1187.85,-431.31 1193.71,-428.85 1187.59,-427.12 1187.85,-431.31"/>
-</g>
-<!-- packages/core/test/util.test.mjs -->
-<g id="node18" class="node">
-<title>packages/core/test/util.test.mjs</title>
-<g id="a_node18"><a xlink:href="packages/core/test/util.test.mjs" xlink:title="util.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M1023,-390C1023,-390 965,-390 965,-390 962,-390 959,-387 959,-384 959,-384 959,-378 959,-378 959,-375 962,-372 965,-372 965,-372 1023,-372 1023,-372 1026,-372 1029,-375 1029,-378 1029,-378 1029,-384 1029,-384 1029,-387 1026,-390 1023,-390"/>
-<text text-anchor="start" x="967" y="-378.8" font-family="Helvetica,sans-Serif" font-size="9.00">util.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/test/util.test.mjs&#45;&gt;packages/core/pattern.mjs -->
-<g id="edge35" class="edge">
-<title>packages/core/test/util.test.mjs&#45;&gt;packages/core/pattern.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1029.33,-382.33C1090.84,-384.93 1217.44,-391.27 1260.5,-401 1267.48,-402.58 1274.8,-405.01 1281.52,-407.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1281.14,-409.7 1287.49,-409.97 1282.7,-405.8 1281.14,-409.7"/>
-</g>
-<!-- packages/core/test/util.test.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge36" class="edge">
-<title>packages/core/test/util.test.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1027.71,-371.93C1066.09,-361.79 1131.84,-346.01 1189.5,-340 1220.89,-336.73 1229.13,-336.58 1260.5,-340 1279.96,-342.12 1418.04,-364.81 1432.5,-378 1470.97,-413.08 1478.12,-479.59 1479.33,-509.61"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1477.23,-509.84 1479.51,-515.77 1481.43,-509.71 1477.23,-509.84"/>
-</g>
-<!-- packages/core/test/value.test.mjs -->
-<g id="node19" class="node">
-<title>packages/core/test/value.test.mjs</title>
-<g id="a_node19"><a xlink:href="packages/core/test/value.test.mjs" xlink:title="value.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M1028,-420C1028,-420 960,-420 960,-420 957,-420 954,-417 954,-414 954,-414 954,-408 954,-408 954,-405 957,-402 960,-402 960,-402 1028,-402 1028,-402 1031,-402 1034,-405 1034,-408 1034,-408 1034,-414 1034,-414 1034,-417 1031,-420 1028,-420"/>
-<text text-anchor="start" x="962" y="-408.8" font-family="Helvetica,sans-Serif" font-size="9.00">value.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/core/test/value.test.mjs&#45;&gt;packages/core/value.mjs -->
-<g id="edge37" class="edge">
-<title>packages/core/test/value.test.mjs&#45;&gt;packages/core/value.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1034.24,-409.03C1103.37,-405.87 1241.43,-401.07 1260.5,-412 1270.35,-417.65 1263.8,-428.09 1273.5,-434 1287.21,-442.36 1327.9,-443.18 1358.01,-442.51"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1358.32,-444.61 1364.26,-442.35 1358.21,-440.41 1358.32,-444.61"/>
-</g>
-<!-- packages/embed/embed.js -->
-<g id="node20" class="node">
-<title>packages/embed/embed.js</title>
-<g id="a_node20"><a xlink:href="packages/embed/embed.js" xlink:title="embed.js">
-<path fill="#ccffcc" stroke="black" d="M93,-1366C93,-1366 47,-1366 47,-1366 44,-1366 41,-1363 41,-1360 41,-1360 41,-1354 41,-1354 41,-1351 44,-1348 47,-1348 47,-1348 93,-1348 93,-1348 96,-1348 99,-1351 99,-1354 99,-1354 99,-1360 99,-1360 99,-1363 96,-1366 93,-1366"/>
-<text text-anchor="start" x="49" y="-1354.8" font-family="Helvetica,sans-Serif" font-size="9.00">embed.js</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/evaluate.mjs -->
-<g id="node21" class="node">
-<title>packages/eval/evaluate.mjs</title>
-<g id="a_node21"><a xlink:href="packages/eval/evaluate.mjs" xlink:title="evaluate.mjs">
-<path fill="#ffffcc" stroke="black" d="M905.5,-228C905.5,-228 843.5,-228 843.5,-228 840.5,-228 837.5,-225 837.5,-222 837.5,-222 837.5,-216 837.5,-216 837.5,-213 840.5,-210 843.5,-210 843.5,-210 905.5,-210 905.5,-210 908.5,-210 911.5,-213 911.5,-216 911.5,-216 911.5,-222 911.5,-222 911.5,-225 908.5,-228 905.5,-228"/>
-<text text-anchor="start" x="845.5" y="-216.8" font-family="Helvetica,sans-Serif" font-size="9.00">evaluate.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/evaluate.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge41" class="edge">
-<title>packages/eval/evaluate.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M911.65,-219.82C951.57,-222.77 1014.88,-233.83 1050.5,-273 1093.45,-320.23 1112.74,-527.68 1117.37,-585.81"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1115.28,-586.03 1117.84,-591.85 1119.47,-585.7 1115.28,-586.03"/>
-</g>
-<!-- packages/eval/shapeshifter.mjs -->
-<g id="node22" class="node">
-<title>packages/eval/shapeshifter.mjs</title>
-<g id="a_node22"><a xlink:href="packages/eval/shapeshifter.mjs" xlink:title="shapeshifter.mjs">
-<path fill="#ffffcc" stroke="black" d="M1032.5,-208C1032.5,-208 955.5,-208 955.5,-208 952.5,-208 949.5,-205 949.5,-202 949.5,-202 949.5,-196 949.5,-196 949.5,-193 952.5,-190 955.5,-190 955.5,-190 1032.5,-190 1032.5,-190 1035.5,-190 1038.5,-193 1038.5,-196 1038.5,-196 1038.5,-202 1038.5,-202 1038.5,-205 1035.5,-208 1032.5,-208"/>
-<text text-anchor="start" x="957.5" y="-196.8" font-family="Helvetica,sans-Serif" font-size="9.00">shapeshifter.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/evaluate.mjs&#45;&gt;packages/eval/shapeshifter.mjs -->
-<g id="edge40" class="edge">
-<title>packages/eval/evaluate.mjs&#45;&gt;packages/eval/shapeshifter.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M911.71,-212.84C921.63,-211.15 932.56,-209.29 943.11,-207.49"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="943.7,-209.52 949.26,-206.45 942.99,-205.38 943.7,-209.52"/>
-</g>
-<!-- packages/eval/shapeshifter.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge44" class="edge">
-<title>packages/eval/shapeshifter.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1013.1,-208.04C1025.6,-215.25 1041.52,-226.52 1050.5,-241 1087.44,-300.61 1111.19,-524.61 1117.07,-585.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1115.01,-586.12 1117.67,-591.9 1119.19,-585.73 1115.01,-586.12"/>
-</g>
-<!-- packages/eval/shift&#45;traverser/index.js -->
-<g id="node24" class="node">
-<title>packages/eval/shift&#45;traverser/index.js</title>
-<g id="a_node24"><a xlink:href="packages/eval/shift-traverser/index.js" xlink:title="index.js">
-<path fill="#ffffcc" stroke="black" d="M1140.5,-208C1140.5,-208 1098.5,-208 1098.5,-208 1095.5,-208 1092.5,-205 1092.5,-202 1092.5,-202 1092.5,-196 1092.5,-196 1092.5,-193 1095.5,-190 1098.5,-190 1098.5,-190 1140.5,-190 1140.5,-190 1143.5,-190 1146.5,-193 1146.5,-196 1146.5,-196 1146.5,-202 1146.5,-202 1146.5,-205 1143.5,-208 1140.5,-208"/>
-<text text-anchor="start" x="1102" y="-196.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.js</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/shapeshifter.mjs&#45;&gt;packages/eval/shift&#45;traverser/index.js -->
-<g id="edge43" class="edge">
-<title>packages/eval/shapeshifter.mjs&#45;&gt;packages/eval/shift&#45;traverser/index.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1038.54,-199C1054.22,-199 1071.62,-199 1086.17,-199"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1086.22,-201.1 1092.22,-199 1086.22,-196.9 1086.22,-201.1"/>
-</g>
-<!-- packages/eval/index.mjs -->
-<g id="node23" class="node">
-<title>packages/eval/index.mjs</title>
-<g id="a_node23"><a xlink:href="packages/eval/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M772.5,-262C772.5,-262 724.5,-262 724.5,-262 721.5,-262 718.5,-259 718.5,-256 718.5,-256 718.5,-250 718.5,-250 718.5,-247 721.5,-244 724.5,-244 724.5,-244 772.5,-244 772.5,-244 775.5,-244 778.5,-247 778.5,-250 778.5,-250 778.5,-256 778.5,-256 778.5,-259 775.5,-262 772.5,-262"/>
-<text text-anchor="start" x="726.5" y="-250.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/index.mjs&#45;&gt;packages/eval/evaluate.mjs -->
-<g id="edge42" class="edge">
-<title>packages/eval/index.mjs&#45;&gt;packages/eval/evaluate.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M778.65,-246.98C789.07,-244.69 800.86,-241.91 811.5,-239 821.26,-236.33 831.76,-233.09 841.31,-229.99"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="842.06,-231.96 847.11,-228.09 840.75,-227.96 842.06,-231.96"/>
-</g>
-<!-- packages/eval/test/evaluate.test.mjs -->
-<g id="node25" class="node">
-<title>packages/eval/test/evaluate.test.mjs</title>
-<g id="a_node25"><a xlink:href="packages/eval/test/evaluate.test.mjs" xlink:title="evaluate.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M789.5,-210C789.5,-210 707.5,-210 707.5,-210 704.5,-210 701.5,-207 701.5,-204 701.5,-204 701.5,-198 701.5,-198 701.5,-195 704.5,-192 707.5,-192 707.5,-192 789.5,-192 789.5,-192 792.5,-192 795.5,-195 795.5,-198 795.5,-198 795.5,-204 795.5,-204 795.5,-207 792.5,-210 789.5,-210"/>
-<text text-anchor="start" x="709.5" y="-198.8" font-family="Helvetica,sans-Serif" font-size="9.00">evaluate.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/test/evaluate.test.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge46" class="edge">
-<title>packages/eval/test/evaluate.test.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M795.59,-203.93C801.59,-206.12 807.15,-209.34 811.5,-214 829.25,-233.03 800.99,-253.71 819.5,-272 893.11,-344.72 973.84,-231.51 1050.5,-301 1093.65,-340.12 1112.64,-530.39 1117.31,-585.82"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1115.22,-586.08 1117.81,-591.89 1119.41,-585.74 1115.22,-586.08"/>
-</g>
-<!-- packages/eval/test/evaluate.test.mjs&#45;&gt;packages/eval/evaluate.mjs -->
-<g id="edge45" class="edge">
-<title>packages/eval/test/evaluate.test.mjs&#45;&gt;packages/eval/evaluate.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M795.67,-207.7C807.29,-209.39 819.71,-211.19 831.13,-212.85"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="831.12,-214.97 837.36,-213.75 831.73,-210.81 831.12,-214.97"/>
-</g>
-<!-- packages/mini/index.mjs -->
-<g id="node26" class="node">
-<title>packages/mini/index.mjs</title>
-<g id="a_node26"><a xlink:href="packages/mini/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M898.5,-42C898.5,-42 850.5,-42 850.5,-42 847.5,-42 844.5,-39 844.5,-36 844.5,-36 844.5,-30 844.5,-30 844.5,-27 847.5,-24 850.5,-24 850.5,-24 898.5,-24 898.5,-24 901.5,-24 904.5,-27 904.5,-30 904.5,-30 904.5,-36 904.5,-36 904.5,-39 901.5,-42 898.5,-42"/>
-<text text-anchor="start" x="852.5" y="-30.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/test/evaluate.test.mjs&#45;&gt;packages/mini/index.mjs -->
-<g id="edge47" class="edge">
-<title>packages/eval/test/evaluate.test.mjs&#45;&gt;packages/mini/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M795.7,-196.93C801.76,-194.52 807.31,-191.02 811.5,-186 831.32,-162.25 799.87,-70.92 819.5,-47 824.25,-41.21 831.06,-37.64 838.25,-35.48"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="839.02,-37.45 844.35,-33.98 838.02,-33.37 839.02,-37.45"/>
-</g>
-<!-- packages/mini/krill&#45;parser.js -->
-<g id="node31" class="node">
-<title>packages/mini/krill&#45;parser.js</title>
-<g id="a_node31"><a xlink:href="packages/mini/krill-parser.js" xlink:title="krill&#45;parser.js">
-<path fill="#ffffcc" stroke="black" d="M1149.5,-59C1149.5,-59 1089.5,-59 1089.5,-59 1086.5,-59 1083.5,-56 1083.5,-53 1083.5,-53 1083.5,-47 1083.5,-47 1083.5,-44 1086.5,-41 1089.5,-41 1089.5,-41 1149.5,-41 1149.5,-41 1152.5,-41 1155.5,-44 1155.5,-47 1155.5,-47 1155.5,-53 1155.5,-53 1155.5,-56 1152.5,-59 1149.5,-59"/>
-<text text-anchor="start" x="1091.5" y="-47.8" font-family="Helvetica,sans-Serif" font-size="9.00">krill&#45;parser.js</text>
-</a>
-</g>
-</g>
-<!-- packages/mini/index.mjs&#45;&gt;packages/mini/krill&#45;parser.js -->
-<g id="edge52" class="edge">
-<title>packages/mini/index.mjs&#45;&gt;packages/mini/krill&#45;parser.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.81,-35.05C947.79,-38.06 1028.09,-43.67 1077.08,-47.1"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1077.05,-49.21 1083.18,-47.53 1077.35,-45.02 1077.05,-49.21"/>
-</g>
-<!-- packages/mini/mini.mjs -->
-<g id="node32" class="node">
-<title>packages/mini/mini.mjs</title>
-<g id="a_node32"><a xlink:href="packages/mini/mini.mjs" xlink:title="mini.mjs">
-<path fill="#ffffcc" stroke="black" d="M1015.5,-76C1015.5,-76 972.5,-76 972.5,-76 969.5,-76 966.5,-73 966.5,-70 966.5,-70 966.5,-64 966.5,-64 966.5,-61 969.5,-58 972.5,-58 972.5,-58 1015.5,-58 1015.5,-58 1018.5,-58 1021.5,-61 1021.5,-64 1021.5,-64 1021.5,-70 1021.5,-70 1021.5,-73 1018.5,-76 1015.5,-76"/>
-<text text-anchor="start" x="974.5" y="-64.8" font-family="Helvetica,sans-Serif" font-size="9.00">mini.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/mini/index.mjs&#45;&gt;packages/mini/mini.mjs -->
-<g id="edge53" class="edge">
-<title>packages/mini/index.mjs&#45;&gt;packages/mini/mini.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.54,-41.4C921.52,-46.32 942.98,-52.53 960.52,-57.6"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="959.95,-59.62 966.3,-59.27 961.12,-55.59 959.95,-59.62"/>
-</g>
-<!-- packages/eval/test/shapeshifter.test.mjs -->
-<g id="node27" class="node">
-<title>packages/eval/test/shapeshifter.test.mjs</title>
-<g id="a_node27"><a xlink:href="packages/eval/test/shapeshifter.test.mjs" xlink:title="shapeshifter.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M797.5,-180C797.5,-180 699.5,-180 699.5,-180 696.5,-180 693.5,-177 693.5,-174 693.5,-174 693.5,-168 693.5,-168 693.5,-165 696.5,-162 699.5,-162 699.5,-162 797.5,-162 797.5,-162 800.5,-162 803.5,-165 803.5,-168 803.5,-168 803.5,-174 803.5,-174 803.5,-177 800.5,-180 797.5,-180"/>
-<text text-anchor="start" x="701.5" y="-168.8" font-family="Helvetica,sans-Serif" font-size="9.00">shapeshifter.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/eval/test/shapeshifter.test.mjs&#45;&gt;packages/eval/shapeshifter.mjs -->
-<g id="edge48" class="edge">
-<title>packages/eval/test/shapeshifter.test.mjs&#45;&gt;packages/eval/shapeshifter.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M803.54,-177.21C845.25,-182.01 902.52,-188.6 943.14,-193.27"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="943.06,-195.37 949.26,-193.97 943.54,-191.2 943.06,-195.37"/>
-</g>
-<!-- packages/midi/index.mjs -->
-<g id="node28" class="node">
-<title>packages/midi/index.mjs</title>
-<g id="a_node28"><a xlink:href="packages/midi/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M644.5,-112C644.5,-112 596.5,-112 596.5,-112 593.5,-112 590.5,-109 590.5,-106 590.5,-106 590.5,-100 590.5,-100 590.5,-97 593.5,-94 596.5,-94 596.5,-94 644.5,-94 644.5,-94 647.5,-94 650.5,-97 650.5,-100 650.5,-100 650.5,-106 650.5,-106 650.5,-109 647.5,-112 644.5,-112"/>
-<text text-anchor="start" x="598.5" y="-100.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/midi/midi.mjs -->
-<g id="node29" class="node">
-<title>packages/midi/midi.mjs</title>
-<g id="a_node29"><a xlink:href="packages/midi/midi.mjs" xlink:title="midi.mjs">
-<path fill="#ffffcc" stroke="black" d="M770,-112C770,-112 727,-112 727,-112 724,-112 721,-109 721,-106 721,-106 721,-100 721,-100 721,-97 724,-94 727,-94 727,-94 770,-94 770,-94 773,-94 776,-97 776,-100 776,-100 776,-106 776,-106 776,-109 773,-112 770,-112"/>
-<text text-anchor="start" x="729" y="-100.8" font-family="Helvetica,sans-Serif" font-size="9.00">midi.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/midi/index.mjs&#45;&gt;packages/midi/midi.mjs -->
-<g id="edge49" class="edge">
-<title>packages/midi/index.mjs&#45;&gt;packages/midi/midi.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M650.72,-103C669.75,-103 694.6,-103 714.36,-103"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="714.59,-105.1 720.59,-103 714.59,-100.9 714.59,-105.1"/>
-</g>
-<!-- packages/midi/midi.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge50" class="edge">
-<title>packages/midi/midi.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M776.22,-104.73C846.26,-109.52 1031.06,-123.86 1050.5,-143 1066.76,-159.02 1107.7,-507.18 1116.72,-585.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1114.68,-586.08 1117.45,-591.8 1118.85,-585.6 1114.68,-586.08"/>
-</g>
-<!-- packages/tone/index.mjs -->
-<g id="node30" class="node">
-<title>packages/tone/index.mjs</title>
-<g id="a_node30"><a xlink:href="packages/tone/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M772.5,-916C772.5,-916 724.5,-916 724.5,-916 721.5,-916 718.5,-913 718.5,-910 718.5,-910 718.5,-904 718.5,-904 718.5,-901 721.5,-898 724.5,-898 724.5,-898 772.5,-898 772.5,-898 775.5,-898 778.5,-901 778.5,-904 778.5,-904 778.5,-910 778.5,-910 778.5,-913 775.5,-916 772.5,-916"/>
-<text text-anchor="start" x="726.5" y="-904.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/midi/midi.mjs&#45;&gt;packages/tone/index.mjs -->
-<g id="edge51" class="edge">
-<title>packages/midi/midi.mjs&#45;&gt;packages/tone/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M722.23,-112.09C703.41,-120.37 680.24,-134.73 673.5,-157 669.38,-170.61 672.65,-270.8 673.5,-285 688.13,-528.49 734.68,-822.72 746,-891.92"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="743.94,-892.33 746.99,-897.91 748.09,-891.64 743.94,-892.33"/>
-</g>
-<!-- packages/tone/draw.mjs -->
-<g id="node68" class="node">
-<title>packages/tone/draw.mjs</title>
-<g id="a_node68"><a xlink:href="packages/tone/draw.mjs" xlink:title="draw.mjs">
-<path fill="#ffffcc" stroke="black" d="M896.5,-946C896.5,-946 852.5,-946 852.5,-946 849.5,-946 846.5,-943 846.5,-940 846.5,-940 846.5,-934 846.5,-934 846.5,-931 849.5,-928 852.5,-928 852.5,-928 896.5,-928 896.5,-928 899.5,-928 902.5,-931 902.5,-934 902.5,-934 902.5,-940 902.5,-940 902.5,-943 899.5,-946 896.5,-946"/>
-<text text-anchor="start" x="854.5" y="-934.8" font-family="Helvetica,sans-Serif" font-size="9.00">draw.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tone/index.mjs&#45;&gt;packages/tone/draw.mjs -->
-<g id="edge126" class="edge">
-<title>packages/tone/index.mjs&#45;&gt;packages/tone/draw.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M778.57,-914.03C797.05,-918.5 821.01,-924.3 840.24,-928.95"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="839.98,-931.05 846.31,-930.42 840.97,-926.97 839.98,-931.05"/>
-</g>
-<!-- packages/tone/tone.mjs -->
-<g id="node69" class="node">
-<title>packages/tone/tone.mjs</title>
-<g id="a_node69"><a xlink:href="packages/tone/tone.mjs" xlink:title="tone.mjs">
-<path fill="#ffffcc" stroke="black" d="M1016,-963C1016,-963 972,-963 972,-963 969,-963 966,-960 966,-957 966,-957 966,-951 966,-951 966,-948 969,-945 972,-945 972,-945 1016,-945 1016,-945 1019,-945 1022,-948 1022,-951 1022,-951 1022,-957 1022,-957 1022,-960 1019,-963 1016,-963"/>
-<text text-anchor="start" x="974" y="-951.8" font-family="Helvetica,sans-Serif" font-size="9.00">tone.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tone/index.mjs&#45;&gt;packages/tone/tone.mjs -->
-<g id="edge128" class="edge">
-<title>packages/tone/index.mjs&#45;&gt;packages/tone/tone.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M751.11,-916.18C756.04,-941.18 773.5,-1010.42 819.5,-1038 858.38,-1061.31 880.35,-1057.01 921.5,-1038 952.51,-1023.67 975.02,-988.52 985.82,-968.53"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="987.75,-969.37 988.67,-963.09 984.03,-967.43 987.75,-969.37"/>
-</g>
-<!-- packages/tone/pianoroll.mjs -->
-<g id="node70" class="node">
-<title>packages/tone/pianoroll.mjs</title>
-<g id="a_node70"><a xlink:href="packages/tone/pianoroll.mjs" xlink:title="pianoroll.mjs">
-<path fill="#ffffcc" stroke="black" d="M905.5,-916C905.5,-916 843.5,-916 843.5,-916 840.5,-916 837.5,-913 837.5,-910 837.5,-910 837.5,-904 837.5,-904 837.5,-901 840.5,-898 843.5,-898 843.5,-898 905.5,-898 905.5,-898 908.5,-898 911.5,-901 911.5,-904 911.5,-904 911.5,-910 911.5,-910 911.5,-913 908.5,-916 905.5,-916"/>
-<text text-anchor="start" x="845.5" y="-904.8" font-family="Helvetica,sans-Serif" font-size="9.00">pianoroll.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tone/index.mjs&#45;&gt;packages/tone/pianoroll.mjs -->
-<g id="edge127" class="edge">
-<title>packages/tone/index.mjs&#45;&gt;packages/tone/pianoroll.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M778.57,-907C794.13,-907 813.58,-907 830.82,-907"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="831.06,-909.1 837.06,-907 831.06,-904.9 831.06,-909.1"/>
-</g>
-<!-- packages/tone/ui.mjs -->
-<g id="node71" class="node">
-<title>packages/tone/ui.mjs</title>
-<g id="a_node71"><a xlink:href="packages/tone/ui.mjs" xlink:title="ui.mjs">
-<path fill="#ffffcc" stroke="black" d="M895.5,-1032C895.5,-1032 853.5,-1032 853.5,-1032 850.5,-1032 847.5,-1029 847.5,-1026 847.5,-1026 847.5,-1020 847.5,-1020 847.5,-1017 850.5,-1014 853.5,-1014 853.5,-1014 895.5,-1014 895.5,-1014 898.5,-1014 901.5,-1017 901.5,-1020 901.5,-1020 901.5,-1026 901.5,-1026 901.5,-1029 898.5,-1032 895.5,-1032"/>
-<text text-anchor="start" x="860.5" y="-1020.8" font-family="Helvetica,sans-Serif" font-size="9.00">ui.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tone/index.mjs&#45;&gt;packages/tone/ui.mjs -->
-<g id="edge129" class="edge">
-<title>packages/tone/index.mjs&#45;&gt;packages/tone/ui.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M753.16,-916.27C761.62,-936.44 784.51,-984.46 819.5,-1009 826.01,-1013.56 833.89,-1016.64 841.61,-1018.71"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="841.12,-1020.76 847.44,-1020.11 842.1,-1016.67 841.12,-1020.76"/>
-</g>
-<!-- packages/mini/mini.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge55" class="edge">
-<title>packages/mini/mini.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1005.6,-76.07C1018.53,-87.79 1039.96,-109.51 1050.5,-133 1069.54,-175.45 1108.17,-509.6 1116.78,-585.64"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1114.71,-586.08 1117.47,-591.8 1118.88,-585.61 1114.71,-586.08"/>
-</g>
-<!-- packages/mini/mini.mjs&#45;&gt;packages/eval/shapeshifter.mjs -->
-<g id="edge56" class="edge">
-<title>packages/mini/mini.mjs&#45;&gt;packages/eval/shapeshifter.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M994,-76.02C994,-111.9 994,-147.77 994,-183.65"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="991.9,-183.87 994,-189.87 996.1,-183.87 991.9,-183.87"/>
-</g>
-<!-- packages/mini/mini.mjs&#45;&gt;packages/mini/krill&#45;parser.js -->
-<g id="edge54" class="edge">
-<title>packages/mini/mini.mjs&#45;&gt;packages/mini/krill&#45;parser.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1021.8,-63.31C1037.99,-61.08 1058.96,-58.2 1077.23,-55.68"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1077.65,-57.74 1083.31,-54.84 1077.08,-53.58 1077.65,-57.74"/>
-</g>
-<!-- packages/mini/test/mini.test.mjs -->
-<g id="node33" class="node">
-<title>packages/mini/test/mini.test.mjs</title>
-<g id="a_node33"><a xlink:href="packages/mini/test/mini.test.mjs" xlink:title="mini.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M906,-76C906,-76 843,-76 843,-76 840,-76 837,-73 837,-70 837,-70 837,-64 837,-64 837,-61 840,-58 843,-58 843,-58 906,-58 906,-58 909,-58 912,-61 912,-64 912,-64 912,-70 912,-70 912,-73 909,-76 906,-76"/>
-<text text-anchor="start" x="845" y="-64.8" font-family="Helvetica,sans-Serif" font-size="9.00">mini.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/mini/test/mini.test.mjs&#45;&gt;packages/core/euclid.mjs -->
-<g id="edge58" class="edge">
-<title>packages/mini/test/mini.test.mjs&#45;&gt;packages/core/euclid.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M903.72,-76C974.31,-98.74 1154.27,-158.16 1173.5,-179 1216.55,-225.65 1223.17,-306.61 1223.99,-339.97"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1221.89,-340.02 1224.09,-345.98 1226.09,-339.95 1221.89,-340.02"/>
-</g>
-<!-- packages/mini/test/mini.test.mjs&#45;&gt;packages/mini/mini.mjs -->
-<g id="edge57" class="edge">
-<title>packages/mini/test/mini.test.mjs&#45;&gt;packages/mini/mini.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M912.03,-67C927.36,-67 945.05,-67 959.98,-67"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="960.2,-69.1 966.2,-67 960.19,-64.9 960.2,-69.1"/>
-</g>
-<!-- packages/osc/osc.mjs -->
-<g id="node34" class="node">
-<title>packages/osc/osc.mjs</title>
-<g id="a_node34"><a xlink:href="packages/osc/osc.mjs" xlink:title="osc.mjs">
-<path fill="#ffffcc" stroke="black" d="M1015,-856C1015,-856 973,-856 973,-856 970,-856 967,-853 967,-850 967,-850 967,-844 967,-844 967,-841 970,-838 973,-838 973,-838 1015,-838 1015,-838 1018,-838 1021,-841 1021,-844 1021,-844 1021,-850 1021,-850 1021,-853 1018,-856 1015,-856"/>
-<text text-anchor="start" x="977" y="-844.8" font-family="Helvetica,sans-Serif" font-size="9.00">osc.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/osc/osc.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge59" class="edge">
-<title>packages/osc/osc.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1021.19,-845.37C1031.51,-843.46 1042.72,-839.61 1050.5,-832 1066.52,-816.33 1103.39,-664.92 1114.96,-616.09"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1117.03,-616.48 1116.36,-610.16 1112.94,-615.52 1117.03,-616.48"/>
-</g>
-<!-- packages/osc/server.js -->
-<g id="node35" class="node">
-<title>packages/osc/server.js</title>
-<g id="a_node35"><a xlink:href="packages/osc/server.js" xlink:title="server.js">
-<path fill="#ccffcc" stroke="black" d="M1015,-826C1015,-826 973,-826 973,-826 970,-826 967,-823 967,-820 967,-820 967,-814 967,-814 967,-811 970,-808 973,-808 973,-808 1015,-808 1015,-808 1018,-808 1021,-811 1021,-814 1021,-814 1021,-820 1021,-820 1021,-823 1018,-826 1015,-826"/>
-<text text-anchor="start" x="975.5" y="-814.8" font-family="Helvetica,sans-Serif" font-size="9.00">server.js</text>
-</a>
-</g>
-</g>
-<!-- packages/osc/tidal&#45;sniffer.js -->
-<g id="node36" class="node">
-<title>packages/osc/tidal&#45;sniffer.js</title>
-<g id="a_node36"><a xlink:href="packages/osc/tidal-sniffer.js" xlink:title="tidal&#45;sniffer.js">
-<path fill="#ccffcc" stroke="black" d="M1025.5,-796C1025.5,-796 962.5,-796 962.5,-796 959.5,-796 956.5,-793 956.5,-790 956.5,-790 956.5,-784 956.5,-784 956.5,-781 959.5,-778 962.5,-778 962.5,-778 1025.5,-778 1025.5,-778 1028.5,-778 1031.5,-781 1031.5,-784 1031.5,-784 1031.5,-790 1031.5,-790 1031.5,-793 1028.5,-796 1025.5,-796"/>
-<text text-anchor="start" x="964.5" y="-784.8" font-family="Helvetica,sans-Serif" font-size="9.00">tidal&#45;sniffer.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/dist/index.cjs.js -->
-<g id="node37" class="node">
-<title>packages/react/dist/index.cjs.js</title>
-<g id="a_node37"><a xlink:href="packages/react/dist/index.cjs.js" xlink:title="index.cjs.js">
-<path fill="#ffffcc" stroke="black" d="M647.5,-840C647.5,-840 593.5,-840 593.5,-840 590.5,-840 587.5,-837 587.5,-834 587.5,-834 587.5,-828 587.5,-828 587.5,-825 590.5,-822 593.5,-822 593.5,-822 647.5,-822 647.5,-822 650.5,-822 653.5,-825 653.5,-828 653.5,-828 653.5,-834 653.5,-834 653.5,-837 650.5,-840 647.5,-840"/>
-<text text-anchor="start" x="595.5" y="-828.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.cjs.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/dist/index.cjs.js&#45;&gt;packages/core/util.mjs -->
-<g id="edge61" class="edge">
-<title>packages/react/dist/index.cjs.js&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M621.52,-840.05C621.99,-874.49 627.26,-999.82 677.5,-1085 717.82,-1153.35 777.28,-1131.4 811.5,-1203 820.42,-1221.66 804.81,-1374.43 819.5,-1389 833.2,-1402.58 973.71,-1395 993,-1395 993,-1395 993,-1395 1309,-1395 1386.78,-1395 1400.56,-1341.92 1432.5,-1271 1463.49,-1202.18 1476.97,-642.31 1479.17,-540.76"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1481.28,-540.55 1479.31,-534.5 1477.08,-540.46 1481.28,-540.55"/>
-</g>
-<!-- packages/react/dist/index.cjs.js&#45;&gt;packages/core/index.mjs -->
-<g id="edge60" class="edge">
-<title>packages/react/dist/index.cjs.js&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M622.12,-840.06C625.11,-880.61 639.42,-1044.67 677.5,-1075 698.71,-1091.89 902.09,-1093.93 921.5,-1075 934.15,-1062.66 917.9,-770.33 929.5,-757 965.28,-715.88 1006.63,-769.35 1050.5,-737 1091.58,-706.7 1109.4,-644.58 1115.66,-615.99"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1117.72,-616.42 1116.89,-610.11 1113.6,-615.56 1117.72,-616.42"/>
-</g>
-<!-- packages/react/dist/index.cjs.js&#45;&gt;packages/eval/index.mjs -->
-<g id="edge62" class="edge">
-<title>packages/react/dist/index.cjs.js&#45;&gt;packages/eval/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M628.32,-821.6C638.93,-806.47 659.23,-775.44 669.5,-746 732.41,-565.58 744.81,-330.21 747.05,-268.4"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="749.16,-268.11 747.26,-262.04 744.96,-267.97 749.16,-268.11"/>
-</g>
-<!-- packages/react/dist/index.cjs.js&#45;&gt;packages/midi/index.mjs -->
-<g id="edge63" class="edge">
-<title>packages/react/dist/index.cjs.js&#45;&gt;packages/midi/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M620.5,-821.88C620.5,-587.41 620.5,-352.94 620.5,-118.48"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="622.6,-118.24 620.5,-112.24 618.4,-118.24 622.6,-118.24"/>
-</g>
-<!-- packages/react/dist/index.cjs.js&#45;&gt;packages/tone/index.mjs -->
-<g id="edge64" class="edge">
-<title>packages/react/dist/index.cjs.js&#45;&gt;packages/tone/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M636.45,-840.02C658.99,-853.62 701.75,-879.41 727.13,-894.71"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="726.35,-896.69 732.57,-898 728.52,-893.1 726.35,-896.69"/>
-</g>
-<!-- packages/react/dist/index.es.js -->
-<g id="node38" class="node">
-<title>packages/react/dist/index.es.js</title>
-<g id="a_node38"><a xlink:href="packages/react/dist/index.es.js" xlink:title="index.es.js">
-<path fill="#ffffcc" stroke="black" d="M530,-840C530,-840 478,-840 478,-840 475,-840 472,-837 472,-834 472,-834 472,-828 472,-828 472,-825 475,-822 478,-822 478,-822 530,-822 530,-822 533,-822 536,-825 536,-828 536,-828 536,-834 536,-834 536,-837 533,-840 530,-840"/>
-<text text-anchor="start" x="480" y="-828.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.es.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/dist/index.es.js&#45;&gt;packages/core/util.mjs -->
-<g id="edge66" class="edge">
-<title>packages/react/dist/index.es.js&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M524.6,-840.05C541.23,-848.9 564,-864.11 574.5,-885 583.88,-903.67 567.84,-1246.12 582.5,-1261 608.25,-1287.14 710.81,-1267 747.5,-1267 747.5,-1267 747.5,-1267 1309,-1267 1463.72,-1267 1478.05,-646.47 1479.37,-540.35"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1481.47,-540.14 1479.44,-534.11 1477.27,-540.09 1481.47,-540.14"/>
-</g>
-<!-- packages/react/dist/index.es.js&#45;&gt;packages/core/index.mjs -->
-<g id="edge65" class="edge">
-<title>packages/react/dist/index.es.js&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M520.4,-840.15C535.64,-849.8 558.88,-866.19 574.5,-885 638.37,-961.93 592.14,-1032.94 677.5,-1085 700.65,-1099.12 902.09,-1103.93 921.5,-1085 934.15,-1072.66 917.69,-780.14 929.5,-767 965.77,-726.66 1006.94,-783.32 1050.5,-751 1095.52,-717.6 1111.47,-647.38 1116.47,-616.33"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1118.55,-616.57 1117.37,-610.32 1114.4,-615.94 1118.55,-616.57"/>
-</g>
-<!-- packages/react/dist/index.es.js&#45;&gt;packages/eval/index.mjs -->
-<g id="edge67" class="edge">
-<title>packages/react/dist/index.es.js&#45;&gt;packages/eval/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M527.52,-821.88C541.76,-815.52 560.13,-806.18 574.5,-795 578.72,-791.71 578.41,-789.45 582.5,-786 617.31,-756.69 644.24,-769.86 669.5,-732 722.16,-653.07 742.54,-342.24 746.67,-268.67"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="748.79,-268.41 747.02,-262.31 744.6,-268.18 748.79,-268.41"/>
-</g>
-<!-- packages/react/dist/index.es.js&#45;&gt;packages/midi/index.mjs -->
-<g id="edge68" class="edge">
-<title>packages/react/dist/index.es.js&#45;&gt;packages/midi/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M520.36,-821.93C537,-811.17 562.73,-791.55 574.5,-767 603.41,-706.72 616.83,-212.7 619.14,-118.49"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="621.24,-118.46 619.28,-112.41 617.04,-118.36 621.24,-118.46"/>
-</g>
-<!-- packages/react/dist/index.es.js&#45;&gt;packages/tone/index.mjs -->
-<g id="edge69" class="edge">
-<title>packages/react/dist/index.es.js&#45;&gt;packages/tone/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M520.43,-821.76C550.69,-804.93 619.25,-773.3 669.5,-799 708.04,-818.7 731.91,-867.31 741.97,-892.04"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="740.08,-892.96 744.23,-897.78 743.99,-891.43 740.08,-892.96"/>
-</g>
-<!-- packages/react/dist/index.es.js&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge70" class="edge">
-<title>packages/react/dist/index.es.js&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M536.29,-831C550.19,-831 566.69,-831 581.31,-831"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="581.45,-833.1 587.45,-831 581.45,-828.9 581.45,-833.1"/>
-</g>
-<!-- packages/react/package.json -->
-<g id="node39" class="node">
-<title>packages/react/package.json</title>
-<g id="a_node39"><a xlink:href="packages/react/package.json" xlink:title="package.json">
-<path fill="#ffee44" stroke="black" d="M201,-806C201,-806 137,-806 137,-806 134,-806 131,-803 131,-800 131,-800 131,-794 131,-794 131,-791 134,-788 137,-788 137,-788 201,-788 201,-788 204,-788 207,-791 207,-794 207,-794 207,-800 207,-800 207,-803 204,-806 201,-806"/>
-<text text-anchor="start" x="139" y="-794.8" font-family="Helvetica,sans-Serif" font-size="9.00">package.json</text>
-</a>
-</g>
-</g>
-<!-- packages/react/postcss.config.js -->
-<g id="node40" class="node">
-<title>packages/react/postcss.config.js</title>
-<g id="a_node40"><a xlink:href="packages/react/postcss.config.js" xlink:title="postcss.config.js">
-<path fill="#ccffcc" stroke="black" d="M109.5,-866C109.5,-866 30.5,-866 30.5,-866 27.5,-866 24.5,-863 24.5,-860 24.5,-860 24.5,-854 24.5,-854 24.5,-851 27.5,-848 30.5,-848 30.5,-848 109.5,-848 109.5,-848 112.5,-848 115.5,-851 115.5,-854 115.5,-854 115.5,-860 115.5,-860 115.5,-863 112.5,-866 109.5,-866"/>
-<text text-anchor="start" x="32.5" y="-854.8" font-family="Helvetica,sans-Serif" font-size="9.00">postcss.config.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/App.jsx -->
-<g id="node41" class="node">
-<title>packages/react/src/App.jsx</title>
-<g id="a_node41"><a xlink:href="packages/react/src/App.jsx" xlink:title="App.jsx">
-<path fill="#ffff77" stroke="black" d="M190,-1146C190,-1146 148,-1146 148,-1146 145,-1146 142,-1143 142,-1140 142,-1140 142,-1134 142,-1134 142,-1131 145,-1128 148,-1128 148,-1128 190,-1128 190,-1128 193,-1128 196,-1131 196,-1134 196,-1134 196,-1140 196,-1140 196,-1143 193,-1146 190,-1146"/>
-<text text-anchor="start" x="152" y="-1134.8" font-family="Helvetica,sans-Serif" font-size="9.00">App.jsx</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/core/index.mjs -->
-<g id="edge72" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M177.07,-1146.35C186.59,-1158.24 204.7,-1178.48 225,-1189 368.91,-1263.56 421.22,-1244.92 582.5,-1261 686.6,-1271.38 980.28,-1287.55 1050.5,-1210 1091.69,-1164.51 1113.87,-706.33 1117.85,-616.31"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1119.95,-616.34 1118.11,-610.25 1115.75,-616.15 1119.95,-616.34"/>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/eval/index.mjs -->
-<g id="edge73" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/eval/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M173.94,-1127.79C183.37,-1105.27 207.16,-1045.47 217,-993 228.89,-929.56 208.01,-910.26 225,-848 262.03,-712.32 229.86,-567 370.5,-567 370.5,-567 370.5,-567 505,-567 657.85,-567 727.93,-331.05 743.88,-268.22"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="746,-268.39 745.41,-262.06 741.92,-267.38 746,-268.39"/>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/mini/index.mjs -->
-<g id="edge75" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/mini/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M174.08,-1127.81C183.82,-1105.35 208.24,-1045.66 217,-993 227.37,-930.63 212.76,-486.03 225,-424 259.13,-251.05 194.21,-55 370.5,-55 370.5,-55 370.5,-55 621.5,-55 699.2,-55 789.87,-44.49 838.47,-38"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="838.8,-40.07 844.47,-37.19 838.24,-35.91 838.8,-40.07"/>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/midi/index.mjs -->
-<g id="edge74" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/midi/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M174.07,-1127.81C183.77,-1105.34 208.12,-1045.64 217,-993 224.95,-945.88 208,-607.66 225,-563 306.73,-348.3 536.06,-165.19 601.72,-115.98"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="603.31,-117.42 606.87,-112.15 600.8,-114.05 603.31,-117.42"/>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/tone/index.mjs -->
-<g id="edge77" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/tone/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M173.33,-1127.93C189.91,-1083.2 264.45,-886.5 310,-841 355.72,-795.34 378.76,-794.46 441.5,-779 539.93,-754.75 581.62,-722.47 669.5,-773 714.84,-799.07 736.29,-862.76 743.99,-891.95"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="742,-892.64 745.51,-897.94 746.07,-891.61 742,-892.64"/>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge80" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M196.11,-1143.9C205.19,-1145.97 215.48,-1147.97 225,-1149 317.13,-1158.93 342.18,-1164.71 433.5,-1149 499.03,-1137.73 531.76,-1149.93 574.5,-1099 607.15,-1060.09 616.71,-897.02 618.93,-846.2"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="621.03,-846.13 619.18,-840.05 616.83,-845.96 621.03,-846.13"/>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx -->
-<g id="node42" class="node">
-<title>packages/react/src/components/MiniRepl.jsx</title>
-<g id="a_node42"><a xlink:href="packages/react/src/components/MiniRepl.jsx" xlink:title="MiniRepl.jsx">
-<path fill="#ffff77" stroke="black" d="M296,-1060C296,-1060 239,-1060 239,-1060 236,-1060 233,-1057 233,-1054 233,-1054 233,-1048 233,-1048 233,-1045 236,-1042 239,-1042 239,-1042 296,-1042 296,-1042 299,-1042 302,-1045 302,-1048 302,-1048 302,-1054 302,-1054 302,-1057 299,-1060 296,-1060"/>
-<text text-anchor="start" x="241" y="-1048.8" font-family="Helvetica,sans-Serif" font-size="9.00">MiniRepl.jsx</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/react/src/components/MiniRepl.jsx -->
-<g id="edge71" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/react/src/components/MiniRepl.jsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M174.42,-1127.92C182.39,-1112.5 200.62,-1081.2 225,-1064 225.77,-1063.46 226.57,-1062.93 227.38,-1062.43"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="228.69,-1064.11 232.99,-1059.43 226.71,-1060.41 228.69,-1064.11"/>
-</g>
-<!-- packages/tonal/index.mjs -->
-<g id="node43" class="node">
-<title>packages/tonal/index.mjs</title>
-<g id="a_node43"><a xlink:href="packages/tonal/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M898.5,-1158C898.5,-1158 850.5,-1158 850.5,-1158 847.5,-1158 844.5,-1155 844.5,-1152 844.5,-1152 844.5,-1146 844.5,-1146 844.5,-1143 847.5,-1140 850.5,-1140 850.5,-1140 898.5,-1140 898.5,-1140 901.5,-1140 904.5,-1143 904.5,-1146 904.5,-1146 904.5,-1152 904.5,-1152 904.5,-1155 901.5,-1158 898.5,-1158"/>
-<text text-anchor="start" x="852.5" y="-1146.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/tonal/index.mjs -->
-<g id="edge76" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/tonal/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M192.2,-1146.06C202.11,-1149.85 214.01,-1154.04 225,-1157 288.44,-1174.07 304.81,-1183 370.5,-1183 370.5,-1183 370.5,-1183 621.5,-1183 699.4,-1183 789.63,-1166.85 838.19,-1156.81"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="838.74,-1158.84 844.19,-1155.56 837.89,-1154.73 838.74,-1158.84"/>
-</g>
-<!-- packages/webaudio/index.mjs -->
-<g id="node44" class="node">
-<title>packages/webaudio/index.mjs</title>
-<g id="a_node44"><a xlink:href="packages/webaudio/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M898.5,-1321C898.5,-1321 850.5,-1321 850.5,-1321 847.5,-1321 844.5,-1318 844.5,-1315 844.5,-1315 844.5,-1309 844.5,-1309 844.5,-1306 847.5,-1303 850.5,-1303 850.5,-1303 898.5,-1303 898.5,-1303 901.5,-1303 904.5,-1306 904.5,-1309 904.5,-1309 904.5,-1315 904.5,-1315 904.5,-1318 901.5,-1321 898.5,-1321"/>
-<text text-anchor="start" x="852.5" y="-1309.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/webaudio/index.mjs -->
-<g id="edge78" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/webaudio/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M182.55,-1146.18C193.35,-1153.73 209.58,-1164.24 225,-1171 445.66,-1267.75 738.56,-1300.52 838.43,-1309.28"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="838.28,-1311.38 844.44,-1309.8 838.64,-1307.19 838.28,-1311.38"/>
-</g>
-<!-- packages/xen/index.mjs -->
-<g id="node45" class="node">
-<title>packages/xen/index.mjs</title>
-<g id="a_node45"><a xlink:href="packages/xen/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M898.5,-1430C898.5,-1430 850.5,-1430 850.5,-1430 847.5,-1430 844.5,-1427 844.5,-1424 844.5,-1424 844.5,-1418 844.5,-1418 844.5,-1415 847.5,-1412 850.5,-1412 850.5,-1412 898.5,-1412 898.5,-1412 901.5,-1412 904.5,-1415 904.5,-1418 904.5,-1418 904.5,-1424 904.5,-1424 904.5,-1427 901.5,-1430 898.5,-1430"/>
-<text text-anchor="start" x="852.5" y="-1418.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/App.jsx&#45;&gt;packages/xen/index.mjs -->
-<g id="edge79" class="edge">
-<title>packages/react/src/App.jsx&#45;&gt;packages/xen/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M170.59,-1146.09C172.84,-1173.98 182.99,-1259.69 225,-1313 271.63,-1372.18 295.15,-1400 370.5,-1400 370.5,-1400 370.5,-1400 621.5,-1400 699.18,-1400 789.86,-1410.03 838.46,-1416.23"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="838.24,-1418.32 844.46,-1417 838.78,-1414.15 838.24,-1418.32"/>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge89" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M269.48,-1041.69C273.03,-1009.91 286.22,-906.54 310,-885 398.06,-805.22 458.91,-873.56 574.5,-846 579.23,-844.87 584.17,-843.47 588.98,-841.97"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="589.9,-843.88 594.97,-840.04 588.61,-839.88 589.9,-843.88"/>
-</g>
-<!-- packages/react/src/components/CodeMirror6.jsx -->
-<g id="node46" class="node">
-<title>packages/react/src/components/CodeMirror6.jsx</title>
-<g id="a_node46"><a xlink:href="packages/react/src/components/CodeMirror6.jsx" xlink:title="CodeMirror6.jsx">
-<path fill="#ffff77" stroke="black" d="M408.5,-1120C408.5,-1120 334.5,-1120 334.5,-1120 331.5,-1120 328.5,-1117 328.5,-1114 328.5,-1114 328.5,-1108 328.5,-1108 328.5,-1105 331.5,-1102 334.5,-1102 334.5,-1102 408.5,-1102 408.5,-1102 411.5,-1102 414.5,-1105 414.5,-1108 414.5,-1108 414.5,-1114 414.5,-1114 414.5,-1117 411.5,-1120 408.5,-1120"/>
-<text text-anchor="start" x="336.5" y="-1108.8" font-family="Helvetica,sans-Serif" font-size="9.00">CodeMirror6.jsx</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/components/CodeMirror6.jsx -->
-<g id="edge86" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/components/CodeMirror6.jsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M297.53,-1060C299.17,-1061.18 300.68,-1062.5 302,-1064 311.7,-1074.99 299.62,-1085.64 310,-1096 313.63,-1099.63 318,-1102.42 322.7,-1104.58"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="321.99,-1106.55 328.34,-1106.81 323.54,-1102.65 321.99,-1106.55"/>
-</g>
-<!-- packages/react/src/cx.js -->
-<g id="node48" class="node">
-<title>packages/react/src/cx.js</title>
-<g id="a_node48"><a xlink:href="packages/react/src/cx.js" xlink:title="cx.js">
-<path fill="#ffffcc" stroke="black" d="M392.5,-1026C392.5,-1026 350.5,-1026 350.5,-1026 347.5,-1026 344.5,-1023 344.5,-1020 344.5,-1020 344.5,-1014 344.5,-1014 344.5,-1011 347.5,-1008 350.5,-1008 350.5,-1008 392.5,-1008 392.5,-1008 395.5,-1008 398.5,-1011 398.5,-1014 398.5,-1014 398.5,-1020 398.5,-1020 398.5,-1023 395.5,-1026 392.5,-1026"/>
-<text text-anchor="start" x="361" y="-1014.8" font-family="Helvetica,sans-Serif" font-size="9.00">cx.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/cx.js -->
-<g id="edge83" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/cx.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M294.54,-1041.95C297.12,-1040.74 299.65,-1039.42 302,-1038 306.04,-1035.55 305.79,-1033.15 310,-1031 318.66,-1026.57 328.73,-1023.52 338.14,-1021.43"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="338.75,-1023.45 344.21,-1020.19 337.91,-1019.34 338.75,-1023.45"/>
-</g>
-<!-- packages/react/src/hooks/useHighlighting.mjs -->
-<g id="node49" class="node">
-<title>packages/react/src/hooks/useHighlighting.mjs</title>
-<g id="a_node49"><a xlink:href="packages/react/src/hooks/useHighlighting.mjs" xlink:title="useHighlighting.mjs">
-<path fill="#ffffcc" stroke="black" d="M419,-944C419,-944 324,-944 324,-944 321,-944 318,-941 318,-938 318,-938 318,-932 318,-932 318,-929 321,-926 324,-926 324,-926 419,-926 419,-926 422,-926 425,-929 425,-932 425,-932 425,-938 425,-938 425,-941 422,-944 419,-944"/>
-<text text-anchor="start" x="326" y="-932.8" font-family="Helvetica,sans-Serif" font-size="9.00">useHighlighting.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/hooks/useHighlighting.mjs -->
-<g id="edge84" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/hooks/useHighlighting.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M298.09,-1041.99C299.55,-1040.82 300.87,-1039.49 302,-1038 313.82,-1022.32 297.21,-964.9 310,-950 310.85,-949.01 311.75,-948.09 312.69,-947.22"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="314.29,-948.64 317.78,-943.32 311.74,-945.3 314.29,-948.64"/>
-</g>
-<!-- packages/react/src/hooks/useRepl.mjs -->
-<g id="node50" class="node">
-<title>packages/react/src/hooks/useRepl.mjs</title>
-<g id="a_node50"><a xlink:href="packages/react/src/hooks/useRepl.mjs" xlink:title="useRepl.mjs">
-<path fill="#ffffcc" stroke="black" d="M401,-974C401,-974 342,-974 342,-974 339,-974 336,-971 336,-968 336,-968 336,-962 336,-962 336,-959 339,-956 342,-956 342,-956 401,-956 401,-956 404,-956 407,-959 407,-962 407,-962 407,-968 407,-968 407,-971 404,-974 401,-974"/>
-<text text-anchor="start" x="344" y="-962.8" font-family="Helvetica,sans-Serif" font-size="9.00">useRepl.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/hooks/useRepl.mjs -->
-<g id="edge85" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/hooks/useRepl.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M298.02,-1041.93C299.5,-1040.78 300.84,-1039.47 302,-1038 318.63,-1016.86 291.74,-997.76 310,-978 315.18,-972.39 322.15,-968.89 329.52,-966.77"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="330.41,-968.72 335.77,-965.29 329.44,-964.63 330.41,-968.72"/>
-</g>
-<!-- packages/react/src/components/MiniRepl.module.css -->
-<g id="node51" class="node">
-<title>packages/react/src/components/MiniRepl.module.css</title>
-<g id="a_node51"><a xlink:href="packages/react/src/components/MiniRepl.module.css" xlink:title="MiniRepl.module.css">
-<path fill="#ffffcc" stroke="black" d="M419.5,-1090C419.5,-1090 323.5,-1090 323.5,-1090 320.5,-1090 317.5,-1087 317.5,-1084 317.5,-1084 317.5,-1078 317.5,-1078 317.5,-1075 320.5,-1072 323.5,-1072 323.5,-1072 419.5,-1072 419.5,-1072 422.5,-1072 425.5,-1075 425.5,-1078 425.5,-1078 425.5,-1084 425.5,-1084 425.5,-1087 422.5,-1090 419.5,-1090"/>
-<text text-anchor="start" x="325.5" y="-1078.8" font-family="Helvetica,sans-Serif" font-size="9.00">MiniRepl.module.css</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/components/MiniRepl.module.css -->
-<g id="edge87" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/components/MiniRepl.module.css</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M292.5,-1060.15C298.2,-1062.19 304.28,-1064.26 310,-1066 314.99,-1067.51 320.24,-1068.99 325.48,-1070.39"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="325.27,-1072.5 331.61,-1071.99 326.33,-1068.44 325.27,-1072.5"/>
-</g>
-<!-- packages/react/src/components/style.css -->
-<g id="node52" class="node">
-<title>packages/react/src/components/style.css</title>
-<g id="a_node52"><a xlink:href="packages/react/src/components/style.css" xlink:title="style.css">
-<path fill="#ffffcc" stroke="black" d="M393,-1060C393,-1060 350,-1060 350,-1060 347,-1060 344,-1057 344,-1054 344,-1054 344,-1048 344,-1048 344,-1045 347,-1042 350,-1042 350,-1042 393,-1042 393,-1042 396,-1042 399,-1045 399,-1048 399,-1048 399,-1054 399,-1054 399,-1057 396,-1060 393,-1060"/>
-<text text-anchor="start" x="352" y="-1048.8" font-family="Helvetica,sans-Serif" font-size="9.00">style.css</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/components/style.css -->
-<g id="edge88" class="edge">
-<title>packages/react/src/components/MiniRepl.jsx&#45;&gt;packages/react/src/components/style.css</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M302.18,-1051C313.64,-1051 326.42,-1051 337.8,-1051"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="337.96,-1053.1 343.96,-1051 337.96,-1048.9 337.96,-1053.1"/>
-</g>
-<!-- packages/tonal/tonal.mjs -->
-<g id="node65" class="node">
-<title>packages/tonal/tonal.mjs</title>
-<g id="a_node65"><a xlink:href="packages/tonal/tonal.mjs" xlink:title="tonal.mjs">
-<path fill="#ffffcc" stroke="black" d="M1017,-1188C1017,-1188 971,-1188 971,-1188 968,-1188 965,-1185 965,-1182 965,-1182 965,-1176 965,-1176 965,-1173 968,-1170 971,-1170 971,-1170 1017,-1170 1017,-1170 1020,-1170 1023,-1173 1023,-1176 1023,-1176 1023,-1182 1023,-1182 1023,-1185 1020,-1188 1017,-1188"/>
-<text text-anchor="start" x="973" y="-1176.8" font-family="Helvetica,sans-Serif" font-size="9.00">tonal.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tonal/index.mjs&#45;&gt;packages/tonal/tonal.mjs -->
-<g id="edge118" class="edge">
-<title>packages/tonal/index.mjs&#45;&gt;packages/tonal/tonal.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.59,-1157.3C912.64,-1159.54 921.4,-1161.92 929.5,-1164 938.95,-1166.43 949.23,-1168.92 958.71,-1171.16"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="958.49,-1173.26 964.81,-1172.59 959.45,-1169.17 958.49,-1173.26"/>
-</g>
-<!-- packages/tonal/voicings.mjs -->
-<g id="node66" class="node">
-<title>packages/tonal/voicings.mjs</title>
-<g id="a_node66"><a xlink:href="packages/tonal/voicings.mjs" xlink:title="voicings.mjs">
-<path fill="#ffffcc" stroke="black" d="M1024,-1158C1024,-1158 964,-1158 964,-1158 961,-1158 958,-1155 958,-1152 958,-1152 958,-1146 958,-1146 958,-1143 961,-1140 964,-1140 964,-1140 1024,-1140 1024,-1140 1027,-1140 1030,-1143 1030,-1146 1030,-1146 1030,-1152 1030,-1152 1030,-1155 1027,-1158 1024,-1158"/>
-<text text-anchor="start" x="966" y="-1146.8" font-family="Helvetica,sans-Serif" font-size="9.00">voicings.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tonal/index.mjs&#45;&gt;packages/tonal/voicings.mjs -->
-<g id="edge119" class="edge">
-<title>packages/tonal/index.mjs&#45;&gt;packages/tonal/voicings.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.54,-1149C918.7,-1149 935.99,-1149 951.51,-1149"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="951.58,-1151.1 957.58,-1149 951.58,-1146.9 951.58,-1151.1"/>
-</g>
-<!-- packages/webaudio/clockworker.mjs -->
-<g id="node73" class="node">
-<title>packages/webaudio/clockworker.mjs</title>
-<g id="a_node73"><a xlink:href="packages/webaudio/clockworker.mjs" xlink:title="clockworker.mjs">
-<path fill="#ffffcc" stroke="black" d="M1157.5,-1316C1157.5,-1316 1081.5,-1316 1081.5,-1316 1078.5,-1316 1075.5,-1313 1075.5,-1310 1075.5,-1310 1075.5,-1304 1075.5,-1304 1075.5,-1301 1078.5,-1298 1081.5,-1298 1081.5,-1298 1157.5,-1298 1157.5,-1298 1160.5,-1298 1163.5,-1301 1163.5,-1304 1163.5,-1304 1163.5,-1310 1163.5,-1310 1163.5,-1313 1160.5,-1316 1157.5,-1316"/>
-<text text-anchor="start" x="1083.5" y="-1304.8" font-family="Helvetica,sans-Serif" font-size="9.00">clockworker.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/webaudio/index.mjs&#45;&gt;packages/webaudio/clockworker.mjs -->
-<g id="edge136" class="edge">
-<title>packages/webaudio/index.mjs&#45;&gt;packages/webaudio/clockworker.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.81,-1311.4C945.49,-1310.56 1019.6,-1309.04 1068.95,-1308.02"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1069.19,-1310.12 1075.14,-1307.89 1069.1,-1305.92 1069.19,-1310.12"/>
-</g>
-<!-- packages/webaudio/sampler.mjs -->
-<g id="node74" class="node">
-<title>packages/webaudio/sampler.mjs</title>
-<g id="a_node74"><a xlink:href="packages/webaudio/sampler.mjs" xlink:title="sampler.mjs">
-<path fill="#ffffcc" stroke="black" d="M1148.5,-1353C1148.5,-1353 1090.5,-1353 1090.5,-1353 1087.5,-1353 1084.5,-1350 1084.5,-1347 1084.5,-1347 1084.5,-1341 1084.5,-1341 1084.5,-1338 1087.5,-1335 1090.5,-1335 1090.5,-1335 1148.5,-1335 1148.5,-1335 1151.5,-1335 1154.5,-1338 1154.5,-1341 1154.5,-1341 1154.5,-1347 1154.5,-1347 1154.5,-1350 1151.5,-1353 1148.5,-1353"/>
-<text text-anchor="start" x="1092.5" y="-1341.8" font-family="Helvetica,sans-Serif" font-size="9.00">sampler.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/webaudio/index.mjs&#45;&gt;packages/webaudio/sampler.mjs -->
-<g id="edge137" class="edge">
-<title>packages/webaudio/index.mjs&#45;&gt;packages/webaudio/sampler.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M884.01,-1321.1C893.86,-1330.91 911.11,-1345.93 929.5,-1352 978.79,-1368.27 1039.26,-1361.4 1078.31,-1353.76"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1078.93,-1355.78 1084.39,-1352.53 1078.09,-1351.66 1078.93,-1355.78"/>
-</g>
-<!-- packages/webaudio/scheduler.mjs -->
-<g id="node75" class="node">
-<title>packages/webaudio/scheduler.mjs</title>
-<g id="a_node75"><a xlink:href="packages/webaudio/scheduler.mjs" xlink:title="scheduler.mjs">
-<path fill="#ffffcc" stroke="black" d="M1027,-1302C1027,-1302 961,-1302 961,-1302 958,-1302 955,-1299 955,-1296 955,-1296 955,-1290 955,-1290 955,-1287 958,-1284 961,-1284 961,-1284 1027,-1284 1027,-1284 1030,-1284 1033,-1287 1033,-1290 1033,-1290 1033,-1296 1033,-1296 1033,-1299 1030,-1302 1027,-1302"/>
-<text text-anchor="start" x="963" y="-1290.8" font-family="Helvetica,sans-Serif" font-size="9.00">scheduler.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/webaudio/index.mjs&#45;&gt;packages/webaudio/scheduler.mjs -->
-<g id="edge138" class="edge">
-<title>packages/webaudio/index.mjs&#45;&gt;packages/webaudio/scheduler.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.54,-1307.3C917.86,-1305.15 933.95,-1302.55 948.73,-1300.16"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="949.39,-1302.18 954.97,-1299.15 948.71,-1298.03 949.39,-1302.18"/>
-</g>
-<!-- packages/webaudio/webaudio.mjs -->
-<g id="node76" class="node">
-<title>packages/webaudio/webaudio.mjs</title>
-<g id="a_node76"><a xlink:href="packages/webaudio/webaudio.mjs" xlink:title="webaudio.mjs">
-<path fill="#ffffcc" stroke="black" d="M1027.5,-1346C1027.5,-1346 960.5,-1346 960.5,-1346 957.5,-1346 954.5,-1343 954.5,-1340 954.5,-1340 954.5,-1334 954.5,-1334 954.5,-1331 957.5,-1328 960.5,-1328 960.5,-1328 1027.5,-1328 1027.5,-1328 1030.5,-1328 1033.5,-1331 1033.5,-1334 1033.5,-1334 1033.5,-1340 1033.5,-1340 1033.5,-1343 1030.5,-1346 1027.5,-1346"/>
-<text text-anchor="start" x="962.5" y="-1334.8" font-family="Helvetica,sans-Serif" font-size="9.00">webaudio.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/webaudio/index.mjs&#45;&gt;packages/webaudio/webaudio.mjs -->
-<g id="edge139" class="edge">
-<title>packages/webaudio/index.mjs&#45;&gt;packages/webaudio/webaudio.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.54,-1318.18C917.63,-1320.96 933.38,-1324.31 947.94,-1327.41"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="947.79,-1329.53 954.09,-1328.72 948.66,-1325.42 947.79,-1329.53"/>
-</g>
-<!-- packages/xen/tune.mjs -->
-<g id="node79" class="node">
-<title>packages/xen/tune.mjs</title>
-<g id="a_node79"><a xlink:href="packages/xen/tune.mjs" xlink:title="tune.mjs">
-<path fill="#ffffcc" stroke="black" d="M1016,-1430C1016,-1430 972,-1430 972,-1430 969,-1430 966,-1427 966,-1424 966,-1424 966,-1418 966,-1418 966,-1415 969,-1412 972,-1412 972,-1412 1016,-1412 1016,-1412 1019,-1412 1022,-1415 1022,-1418 1022,-1418 1022,-1424 1022,-1424 1022,-1427 1019,-1430 1016,-1430"/>
-<text text-anchor="start" x="974" y="-1418.8" font-family="Helvetica,sans-Serif" font-size="9.00">tune.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/xen/index.mjs&#45;&gt;packages/xen/tune.mjs -->
-<g id="edge147" class="edge">
-<title>packages/xen/index.mjs&#45;&gt;packages/xen/tune.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.54,-1421C921.25,-1421 942.3,-1421 959.68,-1421"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="959.9,-1423.1 965.9,-1421 959.9,-1418.9 959.9,-1423.1"/>
-</g>
-<!-- packages/xen/xen.mjs -->
-<g id="node80" class="node">
-<title>packages/xen/xen.mjs</title>
-<g id="a_node80"><a xlink:href="packages/xen/xen.mjs" xlink:title="xen.mjs">
-<path fill="#ffffcc" stroke="black" d="M1015,-1460C1015,-1460 973,-1460 973,-1460 970,-1460 967,-1457 967,-1454 967,-1454 967,-1448 967,-1448 967,-1445 970,-1442 973,-1442 973,-1442 1015,-1442 1015,-1442 1018,-1442 1021,-1445 1021,-1448 1021,-1448 1021,-1454 1021,-1454 1021,-1457 1018,-1460 1015,-1460"/>
-<text text-anchor="start" x="976" y="-1448.8" font-family="Helvetica,sans-Serif" font-size="9.00">xen.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/xen/index.mjs&#45;&gt;packages/xen/xen.mjs -->
-<g id="edge148" class="edge">
-<title>packages/xen/index.mjs&#45;&gt;packages/xen/xen.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M904.59,-1429.3C912.64,-1431.54 921.4,-1433.92 929.5,-1436 939.68,-1438.61 950.81,-1441.3 960.88,-1443.67"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="960.67,-1445.78 966.99,-1445.1 961.63,-1441.69 960.67,-1445.78"/>
-</g>
-<!-- packages/react/src/components/CodeMirror6.jsx&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge82" class="edge">
-<title>packages/react/src/components/CodeMirror6.jsx&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M414.63,-1108.22C470.43,-1104.14 563.15,-1095.83 574.5,-1085 609.24,-1051.86 617.36,-896.05 619.07,-846.31"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="621.18,-846.08 619.28,-840.01 616.98,-845.94 621.18,-846.08"/>
-</g>
-<!-- packages/react/src/themes/material&#45;palenight.js -->
-<g id="node47" class="node">
-<title>packages/react/src/themes/material&#45;palenight.js</title>
-<g id="a_node47"><a xlink:href="packages/react/src/themes/material-palenight.js" xlink:title="material&#45;palenight.js">
-<path fill="#ffffcc" stroke="black" d="M552.5,-1034C552.5,-1034 455.5,-1034 455.5,-1034 452.5,-1034 449.5,-1031 449.5,-1028 449.5,-1028 449.5,-1022 449.5,-1022 449.5,-1019 452.5,-1016 455.5,-1016 455.5,-1016 552.5,-1016 552.5,-1016 555.5,-1016 558.5,-1019 558.5,-1022 558.5,-1022 558.5,-1028 558.5,-1028 558.5,-1031 555.5,-1034 552.5,-1034"/>
-<text text-anchor="start" x="457.5" y="-1022.8" font-family="Helvetica,sans-Serif" font-size="9.00">material&#45;palenight.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/components/CodeMirror6.jsx&#45;&gt;packages/react/src/themes/material&#45;palenight.js -->
-<g id="edge81" class="edge">
-<title>packages/react/src/components/CodeMirror6.jsx&#45;&gt;packages/react/src/themes/material&#45;palenight.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M414.7,-1103.89C421.23,-1101.88 427.72,-1099.3 433.5,-1096 458.53,-1081.71 480.5,-1055.82 492.74,-1039.57"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="494.63,-1040.53 496.5,-1034.46 491.25,-1038.04 494.63,-1040.53"/>
-</g>
-<!-- packages/react/src/hooks/useHighlighting.mjs&#45;&gt;packages/tone/index.mjs -->
-<g id="edge94" class="edge">
-<title>packages/react/src/hooks/useHighlighting.mjs&#45;&gt;packages/tone/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M425.16,-927.11C428.27,-925.18 431.11,-922.83 433.5,-920 449.17,-901.45 425.23,-829.03 441.5,-811 484.15,-763.76 519.1,-791.58 582.5,-786 621.02,-782.61 635.55,-767.49 669.5,-786 711.35,-808.81 734.13,-864.79 743.03,-891.86"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="741.1,-892.69 744.91,-897.78 745.1,-891.42 741.1,-892.69"/>
-</g>
-<!-- packages/react/src/hooks/useHighlighting.mjs&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge95" class="edge">
-<title>packages/react/src/hooks/useHighlighting.mjs&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M425.16,-926.26C428.19,-924.51 431.01,-922.44 433.5,-920 443.35,-910.34 431.38,-899.39 441.5,-890 485.59,-849.09 519.49,-889.33 574.5,-865 585.77,-860.01 596.84,-851.71 605.18,-844.56"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="606.89,-845.84 609.99,-840.29 604.11,-842.7 606.89,-845.84"/>
-</g>
-<!-- packages/react/src/hooks/useHighlighting.mjs&#45;&gt;packages/react/src/components/CodeMirror6.jsx -->
-<g id="edge93" class="edge">
-<title>packages/react/src/hooks/useHighlighting.mjs&#45;&gt;packages/react/src/components/CodeMirror6.jsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M317.87,-941.53C312.31,-944.83 307.97,-949.49 306,-956 301.69,-970.25 301.69,-1075.75 306,-1090 308.45,-1098.11 314.58,-1103.33 322.14,-1106.65"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="321.82,-1108.77 328.18,-1108.84 323.25,-1104.82 321.82,-1108.77"/>
-</g>
-<!-- packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge99" class="edge">
-<title>packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M407.14,-964.87C417.02,-966.62 426.88,-970.41 433.5,-978 449.18,-995.96 433.06,-1062.7 441.5,-1085 528.96,-1316.21 601.67,-1376.14 819.5,-1493 888.6,-1530.07 914.59,-1525 993,-1525 993,-1525 993,-1525 1309,-1525 1411.21,-1525 1401.07,-1428.26 1432.5,-1331 1482.59,-1176 1480.47,-638.08 1479.65,-540.31"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1481.75,-540.02 1479.6,-534.04 1477.55,-540.06 1481.75,-540.02"/>
-</g>
-<!-- packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/eval/index.mjs -->
-<g id="edge100" class="edge">
-<title>packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/eval/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M407.31,-963.99C417.19,-961.91 427.02,-957.8 433.5,-950 443.39,-938.1 435.35,-825.2 441.5,-811 499.96,-675.99 598.94,-700.11 669.5,-571 727.43,-465 742.93,-315.86 746.53,-268.24"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="748.62,-268.34 746.96,-262.21 744.44,-268.04 748.62,-268.34"/>
-</g>
-<!-- packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge101" class="edge">
-<title>packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M407.1,-964.91C416.97,-966.66 426.84,-970.44 433.5,-978 447.65,-994.07 425.75,-1059.5 441.5,-1074 463.25,-1094.01 551.78,-1092.9 574.5,-1074 609.78,-1044.65 617.52,-894.65 619.11,-846.15"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="621.22,-846.06 619.3,-840 617.02,-845.93 621.22,-846.06"/>
-</g>
-<!-- packages/react/src/hooks/useCycle.mjs -->
-<g id="node53" class="node">
-<title>packages/react/src/hooks/useCycle.mjs</title>
-<g id="a_node53"><a xlink:href="packages/react/src/hooks/useCycle.mjs" xlink:title="useCycle.mjs">
-<path fill="#ffffcc" stroke="black" d="M535.5,-974C535.5,-974 472.5,-974 472.5,-974 469.5,-974 466.5,-971 466.5,-968 466.5,-968 466.5,-962 466.5,-962 466.5,-959 469.5,-956 472.5,-956 472.5,-956 535.5,-956 535.5,-956 538.5,-956 541.5,-959 541.5,-962 541.5,-962 541.5,-968 541.5,-968 541.5,-971 538.5,-974 535.5,-974"/>
-<text text-anchor="start" x="474.5" y="-962.8" font-family="Helvetica,sans-Serif" font-size="9.00">useCycle.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/react/src/hooks/useCycle.mjs -->
-<g id="edge97" class="edge">
-<title>packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/react/src/hooks/useCycle.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M407.13,-965C423.4,-965 442.97,-965 460.16,-965"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="460.38,-967.1 466.38,-965 460.38,-962.9 460.38,-967.1"/>
-</g>
-<!-- packages/react/src/hooks/usePostMessage.mjs -->
-<g id="node54" class="node">
-<title>packages/react/src/hooks/usePostMessage.mjs</title>
-<g id="a_node54"><a xlink:href="packages/react/src/hooks/usePostMessage.mjs" xlink:title="usePostMessage.mjs">
-<path fill="#ffffcc" stroke="black" d="M552,-914C552,-914 456,-914 456,-914 453,-914 450,-911 450,-908 450,-908 450,-902 450,-902 450,-899 453,-896 456,-896 456,-896 552,-896 552,-896 555,-896 558,-899 558,-902 558,-902 558,-908 558,-908 558,-911 555,-914 552,-914"/>
-<text text-anchor="start" x="458" y="-902.8" font-family="Helvetica,sans-Serif" font-size="9.00">usePostMessage.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/react/src/hooks/usePostMessage.mjs -->
-<g id="edge98" class="edge">
-<title>packages/react/src/hooks/useRepl.mjs&#45;&gt;packages/react/src/hooks/usePostMessage.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M407.04,-958.63C415.86,-956.43 425.19,-953.59 433.5,-950 452.84,-941.64 472.81,-928.11 486.35,-918.06"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="487.86,-919.55 491.39,-914.27 485.34,-916.2 487.86,-919.55"/>
-</g>
-<!-- packages/react/src/hooks/useCycle.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge90" class="edge">
-<title>packages/react/src/hooks/useCycle.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M523.01,-974.11C537.4,-981.68 557.85,-993.11 574.5,-1005 623.97,-1040.33 620.59,-1073.64 677.5,-1095 716.36,-1109.58 1021.32,-1104.51 1050.5,-1075 1116.47,-1008.28 1118.97,-690.72 1118.64,-616.53"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1120.74,-616.11 1118.6,-610.12 1116.54,-616.14 1120.74,-616.11"/>
-</g>
-<!-- packages/react/src/hooks/useCycle.mjs&#45;&gt;packages/tone/index.mjs -->
-<g id="edge91" class="edge">
-<title>packages/react/src/hooks/useCycle.mjs&#45;&gt;packages/tone/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M529.59,-955.85C545.27,-948.64 564.46,-936.94 574.5,-920 586.88,-899.1 564.71,-827.53 582.5,-811 596.66,-797.84 652.04,-802.69 669.5,-811 705.1,-827.94 729.75,-869.96 740.85,-892.37"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="739.01,-893.38 743.5,-897.88 742.79,-891.56 739.01,-893.38"/>
-</g>
-<!-- packages/react/src/hooks/useCycle.mjs&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge92" class="edge">
-<title>packages/react/src/hooks/useCycle.mjs&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M524.7,-955.86C539.84,-948.05 560.47,-935.61 574.5,-920 594.57,-897.67 608.1,-864.76 614.74,-845.84"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="616.78,-846.36 616.72,-840 612.8,-845.01 616.78,-846.36"/>
-</g>
-<!-- packages/react/src/hooks/usePostMessage.mjs&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge96" class="edge">
-<title>packages/react/src/hooks/usePostMessage.mjs&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M546.39,-895.99C556.08,-892.8 566.04,-888.57 574.5,-883 589.55,-873.1 602.49,-856.8 610.58,-845.09"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="612.35,-846.23 613.95,-840.07 608.86,-843.89 612.35,-846.23"/>
-</g>
-<!-- packages/react/src/hooks/useWebMidi.mjs -->
-<g id="node55" class="node">
-<title>packages/react/src/hooks/useWebMidi.mjs</title>
-<g id="a_node55"><a xlink:href="packages/react/src/hooks/useWebMidi.mjs" xlink:title="useWebMidi.mjs">
-<path fill="#ffffcc" stroke="black" d="M410,-914C410,-914 333,-914 333,-914 330,-914 327,-911 327,-908 327,-908 327,-902 327,-902 327,-899 330,-896 333,-896 333,-896 410,-896 410,-896 413,-896 416,-899 416,-902 416,-902 416,-908 416,-908 416,-911 413,-914 410,-914"/>
-<text text-anchor="start" x="335" y="-902.8" font-family="Helvetica,sans-Serif" font-size="9.00">useWebMidi.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/hooks/useWebMidi.mjs&#45;&gt;packages/midi/index.mjs -->
-<g id="edge102" class="edge">
-<title>packages/react/src/hooks/useWebMidi.mjs&#45;&gt;packages/midi/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M375.39,-895.85C393.68,-838.03 494.9,-517.35 574.5,-255 589.66,-205.02 607.08,-145.61 615.07,-118.21"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="617.14,-118.61 616.8,-112.27 613.11,-117.44 617.14,-118.61"/>
-</g>
-<!-- packages/react/src/hooks/useWebMidi.mjs&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge103" class="edge">
-<title>packages/react/src/hooks/useWebMidi.mjs&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M416.14,-908.48C422.81,-910.89 428.97,-914.55 433.5,-920 443.66,-932.25 429.94,-1052.07 441.5,-1063 462.97,-1083.31 551.7,-1081.8 574.5,-1063 608.14,-1035.26 616.94,-893.66 618.96,-846.39"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="621.07,-846.2 619.21,-840.12 616.87,-846.03 621.07,-846.2"/>
-</g>
-<!-- packages/react/src/index.js -->
-<g id="node56" class="node">
-<title>packages/react/src/index.js</title>
-<g id="a_node56"><a xlink:href="packages/react/src/index.js" xlink:title="index.js">
-<path fill="#ffffcc" stroke="black" d="M190,-987C190,-987 148,-987 148,-987 145,-987 142,-984 142,-981 142,-981 142,-975 142,-975 142,-972 145,-969 148,-969 148,-969 190,-969 190,-969 193,-969 196,-972 196,-975 196,-975 196,-981 196,-981 196,-984 193,-987 190,-987"/>
-<text text-anchor="start" x="151.5" y="-975.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/components/MiniRepl.jsx -->
-<g id="edge105" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/components/MiniRepl.jsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M175.99,-987.12C185.06,-1000.24 203.53,-1024.36 225,-1038 225.76,-1038.48 226.53,-1038.95 227.32,-1039.39"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="226.44,-1041.3 232.74,-1042.12 228.33,-1037.55 226.44,-1041.3"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/components/CodeMirror6.jsx -->
-<g id="edge104" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/components/CodeMirror6.jsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M173.32,-987.14C180.21,-1004.87 197.73,-1044.14 225,-1066 252.85,-1088.33 291.79,-1099.62 322.38,-1105.31"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="322.1,-1107.39 328.38,-1106.37 322.84,-1103.26 322.1,-1107.39"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/cx.js -->
-<g id="edge106" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/cx.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M196.23,-984.51C205.32,-986.68 215.58,-989.05 225,-991 263.82,-999.05 308.78,-1006.85 338.33,-1011.78"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="338.13,-1013.87 344.4,-1012.78 338.82,-1009.73 338.13,-1013.87"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useHighlighting.mjs -->
-<g id="edge108" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useHighlighting.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M196.01,-972.3C205.17,-970.3 215.54,-968.04 225,-966 257.29,-959.04 293.64,-951.29 321.92,-945.29"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="322.4,-947.33 327.83,-944.03 321.53,-943.23 322.4,-947.33"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useRepl.mjs -->
-<g id="edge110" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useRepl.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M196.21,-976.3C230.17,-974.1 289.73,-970.24 329.64,-967.65"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="330.02,-969.73 335.87,-967.25 329.75,-965.54 330.02,-969.73"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useCycle.mjs -->
-<g id="edge107" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useCycle.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M196.28,-980.17C243.79,-983.65 347.07,-989.22 433.5,-980 442.86,-979 452.82,-977.27 462.18,-975.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="462.81,-977.33 468.24,-974.02 461.93,-973.23 462.81,-977.33"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/hooks/usePostMessage.mjs -->
-<g id="edge109" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/hooks/usePostMessage.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M196.22,-976.05C203.9,-974.21 211.65,-970.9 217,-965 230.94,-949.63 211.52,-934.78 225,-919 250.93,-888.65 270.62,-896.53 310,-890 364.15,-881.02 378.92,-884.18 433.5,-890 442.86,-891 452.82,-892.73 462.18,-894.68"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="461.93,-896.77 468.24,-895.98 462.81,-892.67 461.93,-896.77"/>
-</g>
-<!-- packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useWebMidi.mjs -->
-<g id="edge111" class="edge">
-<title>packages/react/src/index.js&#45;&gt;packages/react/src/hooks/useWebMidi.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M196.44,-975.04C203.77,-973.13 211.28,-970.03 217,-965 223.88,-958.95 218.2,-952.14 225,-946 254.32,-919.52 271.93,-930.54 310,-920 315.36,-918.52 321.01,-917.02 326.61,-915.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="327.36,-917.56 332.66,-914.05 326.33,-913.49 327.36,-917.56"/>
-</g>
-<!-- packages/react/src/main.jsx -->
-<g id="node57" class="node">
-<title>packages/react/src/main.jsx</title>
-<g id="a_node57"><a xlink:href="packages/react/src/main.jsx" xlink:title="main.jsx">
-<path fill="#ffff77" stroke="black" d="M91,-1146C91,-1146 49,-1146 49,-1146 46,-1146 43,-1143 43,-1140 43,-1140 43,-1134 43,-1134 43,-1131 46,-1128 49,-1128 49,-1128 91,-1128 91,-1128 94,-1128 97,-1131 97,-1134 97,-1134 97,-1140 97,-1140 97,-1143 94,-1146 91,-1146"/>
-<text text-anchor="start" x="51" y="-1134.8" font-family="Helvetica,sans-Serif" font-size="9.00">main.jsx</text>
-</a>
-</g>
-</g>
-<!-- packages/react/src/main.jsx&#45;&gt;packages/react/dist/index.cjs.js -->
-<g id="edge113" class="edge">
-<title>packages/react/src/main.jsx&#45;&gt;packages/react/dist/index.cjs.js</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M97.11,-1144.52C107.03,-1147.18 118.48,-1150 129,-1152 189.49,-1163.51 204.92,-1169 266.5,-1169 266.5,-1169 266.5,-1169 372.5,-1169 415.82,-1169 555.62,-1147.03 574.5,-1127 613.23,-1085.93 618.63,-901.46 619.38,-846.5"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="621.48,-846.2 619.45,-840.18 617.28,-846.16 621.48,-846.2"/>
-</g>
-<!-- packages/react/src/main.jsx&#45;&gt;packages/react/src/App.jsx -->
-<g id="edge112" class="edge">
-<title>packages/react/src/main.jsx&#45;&gt;packages/react/src/App.jsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M97.25,-1137C109,-1137 122.98,-1137 135.4,-1137"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="135.73,-1139.1 141.73,-1137 135.73,-1134.9 135.73,-1139.1"/>
-</g>
-<!-- packages/react/tailwind.config.js -->
-<g id="node58" class="node">
-<title>packages/react/tailwind.config.js</title>
-<g id="a_node58"><a xlink:href="packages/react/tailwind.config.js" xlink:title="tailwind.config.js">
-<path fill="#ccffcc" stroke="black" d="M110,-836C110,-836 30,-836 30,-836 27,-836 24,-833 24,-830 24,-830 24,-824 24,-824 24,-821 27,-818 30,-818 30,-818 110,-818 110,-818 113,-818 116,-821 116,-824 116,-824 116,-830 116,-830 116,-833 113,-836 110,-836"/>
-<text text-anchor="start" x="32" y="-824.8" font-family="Helvetica,sans-Serif" font-size="9.00">tailwind.config.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/vite.config.js -->
-<g id="node59" class="node">
-<title>packages/react/vite.config.js</title>
-<g id="a_node59"><a xlink:href="packages/react/vite.config.js" xlink:title="vite.config.js">
-<path fill="#ffffcc" stroke="black" d="M101,-806C101,-806 39,-806 39,-806 36,-806 33,-803 33,-800 33,-800 33,-794 33,-794 33,-791 36,-788 39,-788 39,-788 101,-788 101,-788 104,-788 107,-791 107,-794 107,-794 107,-800 107,-800 107,-803 104,-806 101,-806"/>
-<text text-anchor="start" x="41" y="-794.8" font-family="Helvetica,sans-Serif" font-size="9.00">vite.config.js</text>
-</a>
-</g>
-</g>
-<!-- packages/react/vite.config.js&#45;&gt;packages/react/package.json -->
-<g id="edge114" class="edge">
-<title>packages/react/vite.config.js&#45;&gt;packages/react/package.json</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M107.12,-797C112.82,-797 118.76,-797 124.6,-797"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="124.88,-799.1 130.88,-797 124.88,-794.9 124.88,-799.1"/>
-</g>
-<!-- packages/serial/serial.mjs -->
-<g id="node60" class="node">
-<title>packages/serial/serial.mjs</title>
-<g id="a_node60"><a xlink:href="packages/serial/serial.mjs" xlink:title="serial.mjs">
-<path fill="#ffffcc" stroke="black" d="M1017.5,-670C1017.5,-670 970.5,-670 970.5,-670 967.5,-670 964.5,-667 964.5,-664 964.5,-664 964.5,-658 964.5,-658 964.5,-655 967.5,-652 970.5,-652 970.5,-652 1017.5,-652 1017.5,-652 1020.5,-652 1023.5,-655 1023.5,-658 1023.5,-658 1023.5,-664 1023.5,-664 1023.5,-667 1020.5,-670 1017.5,-670"/>
-<text text-anchor="start" x="972.5" y="-658.8" font-family="Helvetica,sans-Serif" font-size="9.00">serial.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/serial/serial.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge115" class="edge">
-<title>packages/serial/serial.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1013.76,-651.89C1035.37,-641.39 1070.94,-624.11 1094.54,-612.64"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1095.49,-614.51 1099.97,-610 1093.66,-610.73 1095.49,-614.51"/>
-</g>
-<!-- packages/soundfonts/convert.js -->
-<g id="node61" class="node">
-<title>packages/soundfonts/convert.js</title>
-<g id="a_node61"><a xlink:href="packages/soundfonts/convert.js" xlink:title="convert.js">
-<path fill="#ccffcc" stroke="black" d="M94.5,-409C94.5,-409 45.5,-409 45.5,-409 42.5,-409 39.5,-406 39.5,-403 39.5,-403 39.5,-397 39.5,-397 39.5,-394 42.5,-391 45.5,-391 45.5,-391 94.5,-391 94.5,-391 97.5,-391 100.5,-394 100.5,-397 100.5,-397 100.5,-403 100.5,-403 100.5,-406 97.5,-409 94.5,-409"/>
-<text text-anchor="start" x="47.5" y="-397.8" font-family="Helvetica,sans-Serif" font-size="9.00">convert.js</text>
-</a>
-</g>
-</g>
-<!-- packages/soundfonts/fontloader.mjs -->
-<g id="node62" class="node">
-<title>packages/soundfonts/fontloader.mjs</title>
-<g id="a_node62"><a xlink:href="packages/soundfonts/fontloader.mjs" xlink:title="fontloader.mjs">
-<path fill="#ffffcc" stroke="black" d="M203,-379C203,-379 135,-379 135,-379 132,-379 129,-376 129,-373 129,-373 129,-367 129,-367 129,-364 132,-361 135,-361 135,-361 203,-361 203,-361 206,-361 209,-364 209,-367 209,-367 209,-373 209,-373 209,-376 206,-379 203,-379"/>
-<text text-anchor="start" x="137" y="-367.8" font-family="Helvetica,sans-Serif" font-size="9.00">fontloader.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/soundfonts/index.mjs -->
-<g id="node63" class="node">
-<title>packages/soundfonts/index.mjs</title>
-<g id="a_node63"><a xlink:href="packages/soundfonts/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M94,-379C94,-379 46,-379 46,-379 43,-379 40,-376 40,-373 40,-373 40,-367 40,-367 40,-364 43,-361 46,-361 46,-361 94,-361 94,-361 97,-361 100,-364 100,-367 100,-367 100,-373 100,-373 100,-376 97,-379 94,-379"/>
-<text text-anchor="start" x="48" y="-367.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/soundfonts/index.mjs&#45;&gt;packages/soundfonts/fontloader.mjs -->
-<g id="edge116" class="edge">
-<title>packages/soundfonts/index.mjs&#45;&gt;packages/soundfonts/fontloader.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M100.1,-370C107.17,-370 114.89,-370 122.51,-370"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="122.87,-372.1 128.87,-370 122.87,-367.9 122.87,-372.1"/>
-</g>
-<!-- packages/soundfonts/list.mjs -->
-<g id="node64" class="node">
-<title>packages/soundfonts/list.mjs</title>
-<g id="a_node64"><a xlink:href="packages/soundfonts/list.mjs" xlink:title="list.mjs">
-<path fill="#ffffcc" stroke="black" d="M190,-409C190,-409 148,-409 148,-409 145,-409 142,-406 142,-403 142,-403 142,-397 142,-397 142,-394 145,-391 148,-391 148,-391 190,-391 190,-391 193,-391 196,-394 196,-397 196,-397 196,-403 196,-403 196,-406 193,-409 190,-409"/>
-<text text-anchor="start" x="153" y="-397.8" font-family="Helvetica,sans-Serif" font-size="9.00">list.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/soundfonts/index.mjs&#45;&gt;packages/soundfonts/list.mjs -->
-<g id="edge117" class="edge">
-<title>packages/soundfonts/index.mjs&#45;&gt;packages/soundfonts/list.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M100.1,-379C111.41,-382.5 124.41,-386.52 135.98,-390.1"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="135.54,-392.16 141.89,-391.92 136.78,-388.15 135.54,-392.16"/>
-</g>
-<!-- packages/tonal/tonal.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge122" class="edge">
-<title>packages/tonal/tonal.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1023.28,-1177.72C1033.27,-1175.8 1043.71,-1171.85 1050.5,-1164 1123.99,-1079.11 1120.5,-698.57 1118.87,-616.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1120.97,-616.35 1118.74,-610.4 1116.77,-616.44 1120.97,-616.35"/>
-</g>
-<!-- packages/tonal/voicings.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge123" class="edge">
-<title>packages/tonal/voicings.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1030.12,-1141.5C1037.9,-1138.26 1045.35,-1133.63 1050.5,-1127 1114.7,-1044.45 1118.51,-694.29 1118.55,-616.4"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1120.65,-616.1 1118.55,-610.1 1116.45,-616.1 1120.65,-616.1"/>
-</g>
-<!-- packages/tonal/test/tonal.test.mjs -->
-<g id="node67" class="node">
-<title>packages/tonal/test/tonal.test.mjs</title>
-<g id="a_node67"><a xlink:href="packages/tonal/test/tonal.test.mjs" xlink:title="tonal.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M907.5,-1192C907.5,-1192 841.5,-1192 841.5,-1192 838.5,-1192 835.5,-1189 835.5,-1186 835.5,-1186 835.5,-1180 835.5,-1180 835.5,-1177 838.5,-1174 841.5,-1174 841.5,-1174 907.5,-1174 907.5,-1174 910.5,-1174 913.5,-1177 913.5,-1180 913.5,-1180 913.5,-1186 913.5,-1186 913.5,-1189 910.5,-1192 907.5,-1192"/>
-<text text-anchor="start" x="843.5" y="-1180.8" font-family="Helvetica,sans-Serif" font-size="9.00">tonal.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tonal/test/tonal.test.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge121" class="edge">
-<title>packages/tonal/test/tonal.test.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M894.11,-1192.09C929.44,-1207.88 1006.63,-1235.15 1050.5,-1196 1095.2,-1156.11 1114.53,-705.7 1117.94,-616.35"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1120.05,-616.19 1118.17,-610.12 1115.85,-616.04 1120.05,-616.19"/>
-</g>
-<!-- packages/tonal/test/tonal.test.mjs&#45;&gt;packages/tonal/tonal.mjs -->
-<g id="edge120" class="edge">
-<title>packages/tonal/test/tonal.test.mjs&#45;&gt;packages/tonal/tonal.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M913.65,-1181.7C928.06,-1181.21 944.37,-1180.66 958.43,-1180.18"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="958.8,-1182.27 964.72,-1179.96 958.65,-1178.07 958.8,-1182.27"/>
-</g>
-<!-- packages/tone/draw.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge125" class="edge">
-<title>packages/tone/draw.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M902.68,-933.86C909.89,-931.67 916.93,-928.03 921.5,-922 934.46,-904.89 915.15,-744.96 929.5,-729 965.85,-688.57 1005.09,-740.9 1050.5,-711 1085.27,-688.1 1105.35,-640.66 1113.77,-616.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1115.85,-616.64 1115.76,-610.29 1111.87,-615.32 1115.85,-616.64"/>
-</g>
-<!-- packages/tone/draw.mjs&#45;&gt;packages/tone/tone.mjs -->
-<g id="edge124" class="edge">
-<title>packages/tone/draw.mjs&#45;&gt;packages/tone/tone.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M902.75,-940.94C919.81,-943.41 941.89,-946.61 959.94,-949.22"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="959.66,-951.3 965.9,-950.08 960.26,-947.14 959.66,-951.3"/>
-</g>
-<!-- packages/tone/tone.mjs&#45;&gt;packages/core/util.mjs -->
-<g id="edge134" class="edge">
-<title>packages/tone/tone.mjs&#45;&gt;packages/core/util.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1004.35,-944.84C1040.28,-910.04 1170.11,-788 1224,-788 1224,-788 1224,-788 1309,-788 1427.96,-788 1468.08,-596.21 1477.26,-540.19"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1479.37,-540.31 1478.23,-534.05 1475.22,-539.65 1479.37,-540.31"/>
-</g>
-<!-- packages/tone/tone.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge133" class="edge">
-<title>packages/tone/tone.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1004.81,-944.69C1017.32,-932.27 1038.74,-909.02 1050.5,-885 1070.79,-843.56 1063.77,-828.87 1074.5,-784 1089.39,-721.69 1107.28,-647.49 1114.84,-616.15"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1116.93,-616.46 1116.29,-610.14 1112.84,-615.48 1116.93,-616.46"/>
-</g>
-<!-- packages/tone/pianoroll.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge130" class="edge">
-<title>packages/tone/pianoroll.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M876.76,-897.68C881.7,-862.69 900.85,-739.83 929.5,-715 970.49,-679.47 1004.19,-727.25 1050.5,-699 1082.66,-679.38 1103.45,-638.17 1112.79,-615.95"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1114.8,-616.57 1115.12,-610.22 1110.91,-614.99 1114.8,-616.57"/>
-</g>
-<!-- packages/tone/ui.mjs&#45;&gt;packages/tone/tone.mjs -->
-<g id="edge135" class="edge">
-<title>packages/tone/ui.mjs&#45;&gt;packages/tone/tone.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M901.93,-1016.73C908.51,-1014.7 915.41,-1012.13 921.5,-1009 943.32,-997.76 965.23,-979.66 978.93,-967.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="980.58,-968.66 983.6,-963.06 977.75,-965.56 980.58,-968.66"/>
-</g>
-<!-- packages/tone/test/tone.test.mjs -->
-<g id="node72" class="node">
-<title>packages/tone/test/tone.test.mjs</title>
-<g id="a_node72"><a xlink:href="packages/tone/test/tone.test.mjs" xlink:title="tone.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M906.5,-980C906.5,-980 842.5,-980 842.5,-980 839.5,-980 836.5,-977 836.5,-974 836.5,-974 836.5,-968 836.5,-968 836.5,-965 839.5,-962 842.5,-962 842.5,-962 906.5,-962 906.5,-962 909.5,-962 912.5,-965 912.5,-968 912.5,-968 912.5,-974 912.5,-974 912.5,-977 909.5,-980 906.5,-980"/>
-<text text-anchor="start" x="844.5" y="-968.8" font-family="Helvetica,sans-Serif" font-size="9.00">tone.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/tone/test/tone.test.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge132" class="edge">
-<title>packages/tone/test/tone.test.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M912.81,-965.17C916.14,-963.34 919.14,-961 921.5,-958 936.28,-939.21 913.63,-760.88 929.5,-743 965.64,-702.29 1005.9,-755.22 1050.5,-724 1088.44,-697.44 1107.5,-642.66 1114.82,-616.1"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1116.85,-616.62 1116.36,-610.28 1112.79,-615.55 1116.85,-616.62"/>
-</g>
-<!-- packages/tone/test/tone.test.mjs&#45;&gt;packages/tone/tone.mjs -->
-<g id="edge131" class="edge">
-<title>packages/tone/test/tone.test.mjs&#45;&gt;packages/tone/tone.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M912.68,-965.62C927.74,-963.44 944.99,-960.95 959.64,-958.83"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="960.11,-960.88 965.75,-957.94 959.51,-956.72 960.11,-960.88"/>
-</g>
-<!-- packages/webaudio/scheduler.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge141" class="edge">
-<title>packages/webaudio/scheduler.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1017.84,-1283.99C1029.6,-1278.11 1043,-1269.24 1050.5,-1257 1119.25,-1144.69 1119.35,-704.64 1118.67,-616.44"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1120.76,-616.26 1118.61,-610.28 1116.56,-616.29 1120.76,-616.26"/>
-</g>
-<!-- packages/webaudio/scheduler.mjs&#45;&gt;packages/webaudio/clockworker.mjs -->
-<g id="edge140" class="edge">
-<title>packages/webaudio/scheduler.mjs&#45;&gt;packages/webaudio/clockworker.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1033.06,-1297.31C1044.41,-1298.6 1057.01,-1300.03 1068.98,-1301.39"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1068.97,-1303.5 1075.17,-1302.09 1069.44,-1299.33 1068.97,-1303.5"/>
-</g>
-<!-- packages/webaudio/webaudio.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge143" class="edge">
-<title>packages/webaudio/webaudio.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1024.66,-1328C1034.43,-1323.54 1044.37,-1317.11 1050.5,-1308 1090.52,-1248.57 1113.92,-714.29 1117.89,-616.37"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1120,-616.17 1118.15,-610.09 1115.81,-616 1120,-616.17"/>
-</g>
-<!-- packages/webaudio/webaudio.mjs&#45;&gt;packages/webaudio/sampler.mjs -->
-<g id="edge142" class="edge">
-<title>packages/webaudio/webaudio.mjs&#45;&gt;packages/webaudio/sampler.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1033.74,-1339.2C1047.97,-1340 1064.11,-1340.92 1078.46,-1341.73"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1078.38,-1343.83 1084.49,-1342.07 1078.62,-1339.64 1078.38,-1343.83"/>
-</g>
-<!-- packages/webdirt/index.mjs -->
-<g id="node77" class="node">
-<title>packages/webdirt/index.mjs</title>
-<g id="a_node77"><a xlink:href="packages/webdirt/index.mjs" xlink:title="index.mjs">
-<path fill="#ffffcc" stroke="black" d="M644.5,-1232C644.5,-1232 596.5,-1232 596.5,-1232 593.5,-1232 590.5,-1229 590.5,-1226 590.5,-1226 590.5,-1220 590.5,-1220 590.5,-1217 593.5,-1214 596.5,-1214 596.5,-1214 644.5,-1214 644.5,-1214 647.5,-1214 650.5,-1217 650.5,-1220 650.5,-1220 650.5,-1226 650.5,-1226 650.5,-1229 647.5,-1232 644.5,-1232"/>
-<text text-anchor="start" x="598.5" y="-1220.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/webdirt/webdirt.mjs -->
-<g id="node78" class="node">
-<title>packages/webdirt/webdirt.mjs</title>
-<g id="a_node78"><a xlink:href="packages/webdirt/webdirt.mjs" xlink:title="webdirt.mjs">
-<path fill="#ffffcc" stroke="black" d="M777.5,-1232C777.5,-1232 719.5,-1232 719.5,-1232 716.5,-1232 713.5,-1229 713.5,-1226 713.5,-1226 713.5,-1220 713.5,-1220 713.5,-1217 716.5,-1214 719.5,-1214 719.5,-1214 777.5,-1214 777.5,-1214 780.5,-1214 783.5,-1217 783.5,-1220 783.5,-1220 783.5,-1226 783.5,-1226 783.5,-1229 780.5,-1232 777.5,-1232"/>
-<text text-anchor="start" x="721.5" y="-1220.8" font-family="Helvetica,sans-Serif" font-size="9.00">webdirt.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/webdirt/index.mjs&#45;&gt;packages/webdirt/webdirt.mjs -->
-<g id="edge144" class="edge">
-<title>packages/webdirt/index.mjs&#45;&gt;packages/webdirt/webdirt.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M650.72,-1223C667.44,-1223 688.67,-1223 706.98,-1223"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="707.07,-1225.1 713.07,-1223 707.07,-1220.9 707.07,-1225.1"/>
-</g>
-<!-- packages/webdirt/webdirt.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge145" class="edge">
-<title>packages/webdirt/webdirt.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M753.08,-1213.98C761.38,-1194.44 783.96,-1148.41 819.5,-1129 864.66,-1104.33 1012.99,-1148.22 1050.5,-1113 1087.85,-1077.92 1112.71,-697.31 1117.61,-616.16"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1119.72,-616.16 1117.98,-610.04 1115.52,-615.91 1119.72,-616.16"/>
-</g>
-<!-- packages/webdirt/webdirt.mjs&#45;&gt;packages/webaudio/index.mjs -->
-<g id="edge146" class="edge">
-<title>packages/webdirt/webdirt.mjs&#45;&gt;packages/webaudio/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M762.3,-1232.19C784.6,-1248.19 830.6,-1281.21 855.89,-1299.36"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="854.85,-1301.2 860.95,-1302.99 857.3,-1297.79 854.85,-1301.2"/>
-</g>
-<!-- packages/xen/tune.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge151" class="edge">
-<title>packages/xen/tune.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1021.58,-1411.99C1032.35,-1406.95 1043.81,-1399.51 1050.5,-1389 1072.1,-1355.07 1111.14,-722.94 1117.59,-616.24"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1119.68,-616.35 1117.95,-610.23 1115.49,-616.1 1119.68,-616.35"/>
-</g>
-<!-- packages/xen/tunejs.js -->
-<g id="node82" class="node">
-<title>packages/xen/tunejs.js</title>
-<g id="a_node82"><a xlink:href="packages/xen/tunejs.js" xlink:title="tunejs.js">
-<path fill="#ffffcc" stroke="black" d="M1140.5,-1430C1140.5,-1430 1098.5,-1430 1098.5,-1430 1095.5,-1430 1092.5,-1427 1092.5,-1424 1092.5,-1424 1092.5,-1418 1092.5,-1418 1092.5,-1415 1095.5,-1412 1098.5,-1412 1098.5,-1412 1140.5,-1412 1140.5,-1412 1143.5,-1412 1146.5,-1415 1146.5,-1418 1146.5,-1418 1146.5,-1424 1146.5,-1424 1146.5,-1427 1143.5,-1430 1140.5,-1430"/>
-<text text-anchor="start" x="1100.5" y="-1418.8" font-family="Helvetica,sans-Serif" font-size="9.00">tunejs.js</text>
-</a>
-</g>
-</g>
-<!-- packages/xen/tune.mjs&#45;&gt;packages/xen/tunejs.js -->
-<g id="edge150" class="edge">
-<title>packages/xen/tune.mjs&#45;&gt;packages/xen/tunejs.js</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M1022.1,-1421C1041.02,-1421 1066.35,-1421 1086.3,-1421"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1086.31,-1423.1 1092.31,-1421 1086.31,-1418.9 1086.31,-1423.1"/>
-</g>
-<!-- packages/xen/xen.mjs&#45;&gt;packages/core/index.mjs -->
-<g id="edge152" class="edge">
-<title>packages/xen/xen.mjs&#45;&gt;packages/core/index.mjs</title>
-<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M1021.14,-1450.26C1031.83,-1448.54 1043.35,-1444.59 1050.5,-1436 1064.17,-1419.57 1110.07,-729.22 1117.49,-616.49"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="1119.6,-616.31 1117.9,-610.18 1115.41,-616.03 1119.6,-616.31"/>
-</g>
-<!-- packages/xen/test/xen.test.mjs -->
-<g id="node81" class="node">
-<title>packages/xen/test/xen.test.mjs</title>
-<g id="a_node81"><a xlink:href="packages/xen/test/xen.test.mjs" xlink:title="xen.test.mjs">
-<path fill="#ffffcc" stroke="black" d="M904.5,-1464C904.5,-1464 844.5,-1464 844.5,-1464 841.5,-1464 838.5,-1461 838.5,-1458 838.5,-1458 838.5,-1452 838.5,-1452 838.5,-1449 841.5,-1446 844.5,-1446 844.5,-1446 904.5,-1446 904.5,-1446 907.5,-1446 910.5,-1449 910.5,-1452 910.5,-1452 910.5,-1458 910.5,-1458 910.5,-1461 907.5,-1464 904.5,-1464"/>
-<text text-anchor="start" x="846.5" y="-1452.8" font-family="Helvetica,sans-Serif" font-size="9.00">xen.test.mjs</text>
-</a>
-</g>
-</g>
-<!-- packages/xen/test/xen.test.mjs&#45;&gt;packages/xen/xen.mjs -->
-<g id="edge149" class="edge">
-<title>packages/xen/test/xen.test.mjs&#45;&gt;packages/xen/xen.mjs</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M910.75,-1453.8C926.49,-1453.26 944.91,-1452.64 960.33,-1452.11"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="960.81,-1454.2 966.74,-1451.89 960.67,-1450 960.81,-1454.2"/>
-</g>
-</g>
-</svg>
diff --git a/packages/README.md b/packages/README.md
index 5eaa07c6..71aba9d5 100644
--- a/packages/README.md
+++ b/packages/README.md
@@ -3,13 +3,3 @@
 Each folder represents one of the @strudel.cycles/* packages [published to npm](https://www.npmjs.com/org/strudel.cycles).
 
 To understand how those pieces connect, refer to the [Technical Manual](https://github.com/tidalcycles/strudel/wiki/Technical-Manual) or the individual READMEs.
-
-This is a graphical view of all the packages: [full screen](https://raw.githubusercontent.com/tidalcycles/strudel/main/dependencies.svg)
-
-![dependencies](https://raw.githubusercontent.com/tidalcycles/strudel/main/dependencies.svg)
-
-Generated with
-
-```sh
-npx depcruise --include-only "^packages" -X "node_modules" --output-type dot packages | dot -T svg > dependencygraph.svg
-```
diff --git a/packages/codemirror/autocomplete.mjs b/packages/codemirror/autocomplete.mjs
index c065c365..c9ec3d7a 100644
--- a/packages/codemirror/autocomplete.mjs
+++ b/packages/codemirror/autocomplete.mjs
@@ -11,7 +11,7 @@ const getInnerText = (html) => {
 };
 
 export function Autocomplete({ doc, label }) {
-  return h`<div class="prose dark:prose-invert max-h-[400px] overflow-auto">
+  return h`<div class="prose dark:prose-invert max-h-[400px] overflow-auto p-2">
 <h1 class="pt-0 mt-0">${label || getDocLabel(doc)}</h1>
 ${doc.description}
 <ul>
diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 29dca867..8a887036 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -126,6 +126,7 @@ export class StrudelMirror {
     this.miniLocations = [];
     this.widgets = [];
     this.painters = [];
+    this.drawTime = drawTime;
     this.onDraw = onDraw;
     const self = this;
     this.id = id || s4();
@@ -151,6 +152,7 @@ export class StrudelMirror {
       onToggle: (started) => {
         replOptions?.onToggle?.(started);
         if (started) {
+          this.adjustDrawTime();
           this.drawer.start(this.repl.scheduler);
           // stop other repls when this one is started
           document.dispatchEvent(
@@ -177,6 +179,7 @@ export class StrudelMirror {
         updateWidgets(this.editor, this.widgets);
         updateMiniLocations(this.editor, this.miniLocations);
         replOptions?.afterEval?.(options);
+        this.adjustDrawTime();
         this.drawer.invalidate();
       },
     });
@@ -212,6 +215,11 @@ export class StrudelMirror {
     };
     document.addEventListener('start-repl', this.onStartRepl);
   }
+  // adjusts draw time depending on if there are painters
+  adjustDrawTime() {
+    // when no painters are set, [0,0] is enough (just highlighting)
+    this.drawer.setDrawTime(this.painters.length ? this.drawTime : [0, 0]);
+  }
   async drawFirstFrame() {
     if (!this.onDraw) {
       return;
diff --git a/packages/core/draw.mjs b/packages/core/draw.mjs
index ff5359e1..941401da 100644
--- a/packages/core/draw.mjs
+++ b/packages/core/draw.mjs
@@ -111,8 +111,6 @@ export class Framer {
 // see vite-vanilla-repl-cm6 for an example
 export class Drawer {
   constructor(onDraw, drawTime) {
-    let [lookbehind, lookahead] = drawTime; // e.g. [-2, 2]
-    lookbehind = Math.abs(lookbehind);
     this.visibleHaps = [];
     this.lastFrame = null;
     this.drawTime = drawTime;
@@ -122,6 +120,8 @@ export class Drawer {
           console.warn('Drawer: no scheduler');
           return;
         }
+        const lookbehind = Math.abs(this.drawTime[0]);
+        const lookahead = this.drawTime[1];
         // calculate current frame time (think right side of screen for pianoroll)
         const phase = this.scheduler.now() + lookahead;
         // first frame just captures the phase
@@ -145,6 +145,9 @@ export class Drawer {
       },
     );
   }
+  setDrawTime(drawTime) {
+    this.drawTime = drawTime;
+  }
   invalidate(scheduler = this.scheduler, t) {
     if (!scheduler) {
       return;
diff --git a/packages/core/gist.js b/packages/core/gist.js
deleted file mode 100644
index 9df2dda2..00000000
--- a/packages/core/gist.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-gist.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/gist.js>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-// this is a shortcut to eval code from a gist
-// why? to be able to shorten strudel code + e.g. be able to change instruments after links have been generated
-export default (route, cache = true) =>
-  fetch(`https://gist.githubusercontent.com/${route}?cachebust=${cache ? '' : Date.now()}`)
-    .then((res) => res.text())
-    .then((code) => eval(code));
diff --git a/packages/core/index.mjs b/packages/core/index.mjs
index bed63f9a..f4598f11 100644
--- a/packages/core/index.mjs
+++ b/packages/core/index.mjs
@@ -27,7 +27,6 @@ export * from './pianoroll.mjs';
 export * from './spiral.mjs';
 export * from './ui.mjs';
 export { default as drawLine } from './drawLine.mjs';
-export { default as gist } from './gist.js';
 // below won't work with runtime.mjs (json import fails)
 /* import * as p from './package.json';
 export const version = p.version; */
diff --git a/packages/core/repl.mjs b/packages/core/repl.mjs
index b3c7a543..9fb6b4b9 100644
--- a/packages/core/repl.mjs
+++ b/packages/core/repl.mjs
@@ -26,7 +26,7 @@ export function repl({
     pattern: undefined,
     miniLocations: [],
     widgets: [],
-    pending: true,
+    pending: false,
     started: false,
   };
 
diff --git a/packages/react/.gitignore b/packages/react/.gitignore
deleted file mode 100644
index 251ce6d2..00000000
--- a/packages/react/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/packages/react/.npmignore b/packages/react/.npmignore
deleted file mode 100644
index b7265688..00000000
--- a/packages/react/.npmignore
+++ /dev/null
@@ -1 +0,0 @@
-examples
\ No newline at end of file
diff --git a/packages/react/README.md b/packages/react/README.md
deleted file mode 100644
index 4b55adbb..00000000
--- a/packages/react/README.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# @strudel.cycles/react
-
-This package contains react hooks and components for strudel. It is used internally by the Strudel REPL.
-
-## Install
-
-```js
-npm i @strudel.cycles/react
-```
-
-## Usage
-
-Here is a minimal example of how to set up a MiniRepl:
-
-```jsx
-import * as React from 'react';
-import '@strudel.cycles/react/dist/style.css';
-import { MiniRepl } from '@strudel.cycles/react';
-import { evalScope, controls } from '@strudel.cycles/core';
-import { samples, initAudioOnFirstClick } from '@strudel.cycles/webaudio';
-
-async function prebake() {
-  await samples(
-    'https://strudel.cc/tidal-drum-machines.json',
-    'github:ritchse/tidal-drum-machines/main/machines/'
-  );
-  await samples(
-    'https://strudel.cc/EmuSP12.json',
-    'https://strudel.cc/EmuSP12/'
-  );
-}
-
-async function init() {
-  await evalScope(
-    controls,
-    import('@strudel.cycles/core'),
-    import('@strudel.cycles/mini'),
-    import('@strudel.cycles/webaudio'),
-    import('@strudel.cycles/tonal')
-  );
-  await prebake();
-  initAudioOnFirstClick();
-}
-
-if (typeof window !== 'undefined') {
-  init();
-}
-
-export default function App() {
-  return <MiniRepl tune={`s("bd sd,hh*4")`} />;
-}
-```
-
-- Open [example on stackblitz](https://stackblitz.com/edit/react-ts-saaair?file=tune.tsx,App.tsx)
-- Also check out the [nano-repl](./examples/nano-repl/) for a more sophisticated example
diff --git a/packages/react/examples/nano-repl/.gitignore b/packages/react/examples/nano-repl/.gitignore
deleted file mode 100644
index a547bf36..00000000
--- a/packages/react/examples/nano-repl/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/packages/react/examples/nano-repl/README.md b/packages/react/examples/nano-repl/README.md
deleted file mode 100644
index 5a8de496..00000000
--- a/packages/react/examples/nano-repl/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# nano-repl
-
-this is an example of how to create a repl with strudel and react.
-
-## Usage
-
-after cloning the strudel repo:
-
-```sh
-pnpm i
-cd packages/react/examples/nano-repl
-pnpm dev
-```
-
-you should now have a repl running at `http://localhost:5173/`
diff --git a/packages/react/examples/nano-repl/index.html b/packages/react/examples/nano-repl/index.html
deleted file mode 100644
index 4d5e8670..00000000
--- a/packages/react/examples/nano-repl/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Strudel Nano REPL</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
diff --git a/packages/react/examples/nano-repl/package.json b/packages/react/examples/nano-repl/package.json
deleted file mode 100644
index c837e4b7..00000000
--- a/packages/react/examples/nano-repl/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "@strudel.cycles/nano-repl",
-  "private": true,
-  "version": "0.6.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/osc": "workspace:*",
-    "@strudel.cycles/mini": "workspace:*",
-    "@strudel.cycles/transpiler": "workspace:*",
-    "@strudel.cycles/soundfonts": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*",
-    "@strudel.cycles/tonal": "workspace:*",
-    "@strudel.cycles/react": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.2",
-    "vite": "^4.3.3"
-  }
-}
diff --git a/packages/react/examples/nano-repl/src/App.jsx b/packages/react/examples/nano-repl/src/App.jsx
deleted file mode 100644
index 086923ac..00000000
--- a/packages/react/examples/nano-repl/src/App.jsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { controls, evalScope } from '@strudel.cycles/core';
-import { CodeMirror, useHighlighting, useKeydown, useStrudel, flash } from '@strudel.cycles/react';
-import {
-  getAudioContext,
-  initAudioOnFirstClick,
-  panic,
-  webaudioOutput,
-  registerSynthSounds,
-} from '@strudel.cycles/webaudio';
-import { registerSoundfonts } from '@strudel.cycles/soundfonts';
-import { useCallback, useState } from 'react';
-import './style.css';
-// import { prebake } from '../../../../../repl/src/prebake.mjs';
-
-initAudioOnFirstClick();
-
-async function init() {
-  // TODO: only import stuff when play is pressed?
-  const loadModules = evalScope(
-    controls,
-    import('@strudel.cycles/core'),
-    import('@strudel.cycles/tonal'),
-    import('@strudel.cycles/mini'),
-    import('@strudel.cycles/xen'),
-    import('@strudel.cycles/webaudio'),
-    import('@strudel.cycles/osc'),
-  );
-
-  await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
-}
-init();
-
-const defaultTune = `samples({
-  bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
-  sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
-  hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
-}, 'github:tidalcycles/Dirt-Samples/master/');
-stack(
-  s("bd,[~ <sd!3 sd(3,4,2)>],hh*8") // drums
-  .speed(perlin.range(.7,.9)) // random sample speed variation
-  //.hush()
-  ,"<a1 b1*2 a1(3,8) e2>" // bassline
-  .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
-  .add(perlin.range(0,.5)) // random pitch variation
-  .superimpose(add(.05)) // add second, slightly detuned voice
-  .note() // wrap in "note"
-  .decay(.15).sustain(0) // make each note of equal length
-  .s('sawtooth') // waveform
-  .gain(.4) // turn down
-  .cutoff(sine.slow(7).range(300,5000)) // automate cutoff
-  //.hush()
-  ,"<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand') // chords
-  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
-  .add(perlin.range(0,.5)) // random pitch variation
-  .note() // wrap in "n"
-  .s('square') // waveform
-  .gain(.16) // turn down
-  .cutoff(500) // fixed cutoff
-  .attack(1) // slowly fade in
-  //.hush()
-  ,"a4 c5 <e6 a6>".struct("x(5,8)")
-  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
-  .add(perlin.range(0,.5)) // random pitch variation
-  .note() // wrap in "note"
-  .decay(.1).sustain(0) // make notes short
-  .s('triangle') // waveform
-  .degradeBy(perlin.range(0,.5)) // randomly controlled random removal :)
-  .echoWith(4,.125,(x,n)=>x.gain(.15*1/(n+1))) // echo notes
-  //.hush()
-)
-.fast(2/3)`;
-
-// await prebake();
-
-const ctx = getAudioContext();
-const getTime = () => ctx.currentTime;
-function App() {
-  const [code, setCode] = useState(defaultTune);
-  const [view, setView] = useState();
-  // const [code, setCode] = useState(`"c3".note().slow(2)`);
-  const { scheduler, evaluate, schedulerError, evalError, isDirty, activeCode, pattern, started } = useStrudel({
-    code,
-    defaultOutput: webaudioOutput,
-    getTime,
-    afterEval: ({ meta }) => setMiniLocations(meta.miniLocations),
-  });
-
-  const { setMiniLocations } = useHighlighting({
-    view,
-    pattern,
-    active: started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.now(),
-  });
-
-  const error = evalError || schedulerError;
-  useKeydown(
-    useCallback(
-      async (e) => {
-        if (e.ctrlKey || e.altKey) {
-          if (e.code === 'Enter') {
-            e.preventDefault();
-            flash(view);
-            await evaluate(code);
-            if (e.shiftKey) {
-              panic();
-              scheduler.stop();
-              scheduler.start();
-            }
-            if (!scheduler.started) {
-              scheduler.start();
-            }
-          } else if (e.code === 'Period') {
-            scheduler.stop();
-            panic();
-            e.preventDefault();
-          }
-        }
-      },
-      [scheduler, evaluate, view, code],
-    ),
-  );
-  return (
-    <div>
-      <nav className="z-[12] w-full flex justify-center fixed bottom-0">
-        <div className="bg-slate-500 space-x-2 px-2 rounded-t-md">
-          <button
-            onClick={async () => {
-              await evaluate(code);
-              scheduler.start();
-            }}
-          >
-            start
-          </button>
-          <button onClick={() => scheduler.stop()}>stop</button>
-          {isDirty && <button onClick={() => evaluate(code)}>eval</button>}
-        </div>
-        {error && <p>error {error.message}</p>}
-      </nav>
-      <CodeMirror value={code} onChange={setCode} onViewChanged={setView} />
-    </div>
-  );
-}
-
-export default App;
diff --git a/packages/react/examples/nano-repl/src/main.jsx b/packages/react/examples/nano-repl/src/main.jsx
deleted file mode 100644
index 1b794581..00000000
--- a/packages/react/examples/nano-repl/src/main.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/packages/react/examples/nano-repl/src/style.css b/packages/react/examples/nano-repl/src/style.css
deleted file mode 100644
index e01c06ef..00000000
--- a/packages/react/examples/nano-repl/src/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --background: #222;
-  --lineBackground: #22222250;
-  --foreground: #fff;
-  --caret: #ffcc00;
-  --selection: rgba(128, 203, 196, 0.5);
-  --selectionMatch: #036dd626;
-  --lineHighlight: #00000050;
-  --gutterBackground: transparent;
-  --gutterForeground: #8a919966;
-}
-
-body {
-  background: #123;
-}
diff --git a/packages/react/examples/nano-repl/tailwind.config.cjs b/packages/react/examples/nano-repl/tailwind.config.cjs
deleted file mode 100644
index b2a25c69..00000000
--- a/packages/react/examples/nano-repl/tailwind.config.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-tailwind.config.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/tailwind.config.js>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-module.exports = {
-  // TODO: find out if leaving out tutorial path works now
-  content: ['./src/**/*.{js,jsx,ts,tsx}', '../../src/**/*.{html,js,jsx,md,mdx,ts,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        // codemirror-theme settings
-        background: 'var(--background)',
-        lineBackground: 'var(--lineBackground)',
-        foreground: 'var(--foreground)',
-        caret: 'var(--caret)',
-        selection: 'var(--selection)',
-        selectionMatch: 'var(--selectionMatch)',
-        gutterBackground: 'var(--gutterBackground)',
-        gutterForeground: 'var(--gutterForeground)',
-        gutterBorder: 'var(--gutterBorder)',
-        lineHighlight: 'var(--lineHighlight)',
-      },
-    },
-  },
-  plugins: [],
-};
diff --git a/packages/react/examples/nano-repl/vite.config.js b/packages/react/examples/nano-repl/vite.config.js
deleted file mode 100644
index 627a3196..00000000
--- a/packages/react/examples/nano-repl/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-});
diff --git a/packages/react/index.html b/packages/react/index.html
deleted file mode 100644
index 83d2bd57..00000000
--- a/packages/react/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <!--     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Strudel React Components</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
diff --git a/packages/react/package.json b/packages/react/package.json
deleted file mode 100644
index df017d91..00000000
--- a/packages/react/package.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "name": "@strudel.cycles/react",
-  "version": "0.9.0",
-  "description": "React components for strudel",
-  "main": "src/index.js",
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "watch": "vite build --watch",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tidalcycles/strudel.git"
-  },
-  "keywords": [
-    "tidalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/tidalcycles/strudel/issues"
-  },
-  "homepage": "https://github.com/tidalcycles/strudel#readme",
-  "dependencies": {
-    "@codemirror/autocomplete": "^6.6.0",
-    "@codemirror/commands": "^6.0.0",
-    "@codemirror/lang-javascript": "^6.1.7",
-    "@codemirror/language": "^6.0.0",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.0.0",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.10.0",
-    "@lezer/highlight": "^1.1.4",
-    "@replit/codemirror-emacs": "^6.0.1",
-    "@replit/codemirror-vim": "^6.0.14",
-    "@replit/codemirror-vscode-keymap": "^6.0.2",
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/transpiler": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*",
-    "@strudel/codemirror": "workspace:*",
-    "@uiw/codemirror-themes": "^4.19.16",
-    "@uiw/react-codemirror": "^4.19.16",
-    "react-hook-inview": "^4.5.0"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.2",
-    "vite": "^4.3.3"
-  }
-}
diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js
deleted file mode 100644
index b77b9fe4..00000000
--- a/packages/react/postcss.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-postcss.config.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/postcss.config.js>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/packages/react/src/App.jsx b/packages/react/src/App.jsx
deleted file mode 100644
index ba7b1da4..00000000
--- a/packages/react/src/App.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { MiniRepl } from './components/MiniRepl';
-import 'tailwindcss/tailwind.css';
-import { controls, evalScope } from '@strudel.cycles/core';
-
-evalScope(
-  controls,
-  import('@strudel.cycles/core'),
-  import('@strudel.cycles/tonal'),
-  import('@strudel.cycles/mini'),
-  import('@strudel.cycles/webaudio'),
-);
-
-function App() {
-  return (
-    <div>
-      <MiniRepl tune={`note("c3")`} />
-    </div>
-  );
-}
-
-export default App;
diff --git a/packages/react/src/components/Autocomplete.jsx b/packages/react/src/components/Autocomplete.jsx
deleted file mode 100644
index 9a0b9de4..00000000
--- a/packages/react/src/components/Autocomplete.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import jsdoc from '../../../../doc.json';
-
-const getDocLabel = (doc) => doc.name || doc.longname;
-const getDocSynonyms = (doc) => [getDocLabel(doc), ...(doc.synonyms || [])];
-const getInnerText = (html) => {
-  var div = document.createElement('div');
-  div.innerHTML = html;
-  return div.textContent || div.innerText || '';
-};
-
-export function Autocomplete({ doc, label = getDocLabel(doc) }) {
-  const synonyms = getDocSynonyms(doc).filter((a) => a !== label);
-  return (
-    <div className="prose dark:prose-invert  max-h-[400px] overflow-auto">
-      <h3 className="pt-0 mt-0">{label}</h3>{' '}
-      {!!synonyms.length && (
-        <span>
-          Synonyms: <code>{synonyms.join(', ')}</code>
-        </span>
-      )}
-      <div dangerouslySetInnerHTML={{ __html: doc.description }} />
-      <ul>
-        {doc.params?.map(({ name, type, description }, i) => (
-          <li key={i}>
-            {name} : {type.names?.join(' | ')} {description ? <> - {getInnerText(description)}</> : ''}
-          </li>
-        ))}
-      </ul>
-      <div>
-        {doc.examples?.map((example, i) => (
-          <div key={i}>
-            <pre
-              className="cursor-pointer"
-              onMouseDown={(e) => {
-                navigator.clipboard.writeText(example);
-                e.stopPropagation();
-              }}
-            >
-              {example}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const jsdocCompletions = jsdoc.docs
-  .filter(
-    (doc) =>
-      getDocLabel(doc) &&
-      !getDocLabel(doc).startsWith('_') &&
-      !['package'].includes(doc.kind) &&
-      !['superdirtOnly', 'noAutocomplete'].some((tag) => doc.tags?.find((t) => t.originalTitle === tag)),
-  )
-  // https://codemirror.net/docs/ref/#autocomplete.Completion
-  .reduce(
-    (acc, doc) /*: Completion */ =>
-      acc.concat(
-        [getDocLabel(doc), ...(doc.synonyms || [])].map((label) => ({
-          label,
-          // detail: 'xxx', // An optional short piece of information to show (with a different style) after the label.
-          info: () => {
-            const node = document.createElement('div');
-            // if Autocomplete is non-interactive, it could also be rendered at build time..
-            // .. using renderToStaticMarkup
-            createRoot(node).render(<Autocomplete doc={doc} label={label} />);
-            return node;
-          },
-          type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type
-        })),
-      ),
-    [],
-  );
-
-export const strudelAutocomplete = (context /* : CompletionContext */) => {
-  let word = context.matchBefore(/\w*/);
-  if (word.from == word.to && !context.explicit) return null;
-  return {
-    from: word.from,
-    options: jsdocCompletions,
-    /*     options: [
-      { label: 'match', type: 'keyword' },
-      { label: 'hello', type: 'variable', info: '(World)' },
-      { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
-    ], */
-  };
-};
diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
deleted file mode 100644
index 4852b287..00000000
--- a/packages/react/src/components/CodeMirror6.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { autocompletion } from '@codemirror/autocomplete';
-import { Prec } from '@codemirror/state';
-import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
-import { ViewPlugin, EditorView, keymap } from '@codemirror/view';
-import { emacs } from '@replit/codemirror-emacs';
-import { vim } from '@replit/codemirror-vim';
-import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import _CodeMirror from '@uiw/react-codemirror';
-import React, { useCallback, useMemo } from 'react';
-import strudelTheme from '../themes/strudel-theme';
-import { strudelAutocomplete } from './Autocomplete';
-import { strudelTooltip } from './Tooltip';
-import {
-  highlightExtension,
-  flashField,
-  flash,
-  highlightMiniLocations,
-  updateMiniLocations,
-} from '@strudel/codemirror';
-import './style.css';
-import { sliderPlugin } from '@strudel/codemirror/slider.mjs';
-
-export { flash, highlightMiniLocations, updateMiniLocations };
-
-const staticExtensions = [javascript(), flashField, highlightExtension, sliderPlugin];
-
-export default function CodeMirror({
-  value,
-  onChange,
-  onViewChanged,
-  onSelectionChange,
-  onDocChange,
-  theme,
-  keybindings,
-  isLineNumbersDisplayed,
-  isActiveLineHighlighted,
-  isAutoCompletionEnabled,
-  isTooltipEnabled,
-  isLineWrappingEnabled,
-  fontSize = 18,
-  fontFamily = 'monospace',
-}) {
-  const handleOnChange = useCallback(
-    (value) => {
-      onChange?.(value);
-    },
-    [onChange],
-  );
-
-  const handleOnCreateEditor = useCallback(
-    (view) => {
-      onViewChanged?.(view);
-    },
-    [onViewChanged],
-  );
-
-  const handleOnUpdate = useCallback(
-    (viewUpdate) => {
-      if (viewUpdate.docChanged && onDocChange) {
-        onDocChange?.(viewUpdate);
-      }
-      if (viewUpdate.selectionSet && onSelectionChange) {
-        onSelectionChange?.(viewUpdate.state.selection);
-      }
-    },
-    [onSelectionChange],
-  );
-
-  const vscodePlugin = ViewPlugin.fromClass(
-    class {
-      constructor(view) {}
-    },
-    {
-      provide: (plugin) => {
-        return Prec.highest(keymap.of([...vscodeKeymap]));
-      },
-    },
-  );
-
-  const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
-
-  const extensions = useMemo(() => {
-    let _extensions = [...staticExtensions];
-    let bindings = {
-      vim,
-      emacs,
-      vscode: vscodeExtension,
-    };
-
-    if (bindings[keybindings]) {
-      _extensions.push(bindings[keybindings]());
-    }
-
-    if (isAutoCompletionEnabled) {
-      _extensions.push(javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }));
-    } else {
-      _extensions.push(autocompletion({ override: [] }));
-    }
-
-    if (isTooltipEnabled) {
-      _extensions.push(strudelTooltip);
-    }
-
-    _extensions.push([keymap.of({})]);
-
-    if (isLineWrappingEnabled) {
-      _extensions.push(EditorView.lineWrapping);
-    }
-
-    return _extensions;
-  }, [keybindings, isAutoCompletionEnabled, isTooltipEnabled, isLineWrappingEnabled]);
-
-  const basicSetup = useMemo(
-    () => ({
-      lineNumbers: isLineNumbersDisplayed,
-      highlightActiveLine: isActiveLineHighlighted,
-    }),
-    [isLineNumbersDisplayed, isActiveLineHighlighted],
-  );
-
-  return (
-    <div style={{ fontSize, fontFamily }} className="w-full">
-      <_CodeMirror
-        value={value}
-        theme={theme || strudelTheme}
-        onChange={handleOnChange}
-        onCreateEditor={handleOnCreateEditor}
-        onUpdate={handleOnUpdate}
-        extensions={extensions}
-        basicSetup={basicSetup}
-      />
-    </div>
-  );
-}
diff --git a/packages/react/src/components/Icon.tsx b/packages/react/src/components/Icon.tsx
deleted file mode 100644
index 24ec8786..00000000
--- a/packages/react/src/components/Icon.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-export function Icon({ type }) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-      {
-        {
-          refresh: (
-            <path
-              fillRule="evenodd"
-              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-              clipRule="evenodd"
-            />
-          ),
-          play: (
-            <path
-              fillRule="evenodd"
-              d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
-              clipRule="evenodd"
-            />
-          ),
-          pause: (
-            <path
-              fillRule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
-              clipRule="evenodd"
-            />
-          ),
-          stop: (
-            <path
-              fillRule="evenodd"
-              d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z"
-              clipRule="evenodd"
-            />
-          ),
-        }[type]
-      }
-    </svg>
-  );
-}
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
deleted file mode 100644
index c7f70907..00000000
--- a/packages/react/src/components/MiniRepl.jsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
-import React, { useLayoutEffect, useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { useInView } from 'react-hook-inview';
-import 'tailwindcss/tailwind.css';
-import cx from '../cx';
-import useHighlighting from '../hooks/useHighlighting.mjs';
-import useStrudel from '../hooks/useStrudel.mjs';
-import CodeMirror6, { flash } from './CodeMirror6';
-import { Icon } from './Icon';
-import './style.css';
-import { logger } from '@strudel.cycles/core';
-import useEvent from '../hooks/useEvent.mjs';
-import useKeydown from '../hooks/useKeydown.mjs';
-
-const getTime = () => getAudioContext().currentTime;
-
-export function MiniRepl({
-  tune,
-  hideOutsideView = false,
-  enableKeyboard,
-  onTrigger,
-  drawTime,
-  punchcard,
-  punchcardLabels,
-  onPaint,
-  canvasHeight = 200,
-  fontSize = 18,
-  fontFamily,
-  hideHeader = false,
-  theme,
-  keybindings,
-  isLineNumbersDisplayed,
-  isActiveLineHighlighted,
-}) {
-  drawTime = drawTime || (punchcard ? [0, 4] : undefined);
-  const evalOnMount = !!drawTime;
-  const drawContext = useCallback(
-    punchcard ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
-    [punchcard],
-  );
-  const {
-    code,
-    setCode,
-    evaluate,
-    activateCode,
-    error,
-    isDirty,
-    activeCode,
-    pattern,
-    started,
-    scheduler,
-    togglePlay,
-    stop,
-    canvasId,
-    id: replId,
-  } = useStrudel({
-    initialCode: tune,
-    defaultOutput: webaudioOutput,
-    editPattern: (pat, id) => {
-      //pat = pat.withContext((ctx) => ({ ...ctx, id }));
-      if (onTrigger) {
-        pat = pat.onTrigger(onTrigger, false);
-      }
-      if (onPaint) {
-        pat = pat.onPaint(onPaint);
-      } else if (punchcard) {
-        pat = pat.punchcard({ labels: punchcardLabels });
-      }
-      return pat;
-    },
-    getTime,
-    evalOnMount,
-    drawContext,
-    drawTime,
-    afterEval: ({ meta }) => setMiniLocations(meta.miniLocations),
-  });
-
-  const [view, setView] = useState();
-  const [ref, isVisible] = useInView({
-    threshold: 0.01,
-  });
-  const wasVisible = useRef();
-  const show = useMemo(() => {
-    if (isVisible || !hideOutsideView) {
-      wasVisible.current = true;
-    }
-    return isVisible || wasVisible.current;
-  }, [isVisible, hideOutsideView]);
-  const { setMiniLocations } = useHighlighting({
-    view,
-    pattern,
-    active: started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.now(),
-  });
-
-  // keyboard shortcuts
-  useKeydown(
-    useCallback(
-      async (e) => {
-        if (view?.hasFocus) {
-          if (e.ctrlKey || e.altKey) {
-            if (e.code === 'Enter') {
-              e.preventDefault();
-              flash(view);
-              await activateCode();
-            } else if (e.key === '.' || e.code === 'Period') {
-              stop();
-              e.preventDefault();
-            }
-          }
-        }
-      },
-      [activateCode, stop, view],
-    ),
-  );
-
-  const [log, setLog] = useState([]);
-  useLogger(
-    useCallback((e) => {
-      const { data } = e.detail;
-      const logId = data?.hap?.context?.id;
-      // const logId = data?.pattern?.meta?.id;
-      if (logId === replId) {
-        setLog((l) => {
-          return l.concat([e.detail]).slice(-8);
-        });
-      }
-    }, []),
-  );
-
-  return (
-    <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
-      {!hideHeader && (
-        <div className="flex justify-between bg-lineHighlight">
-          <div className="flex">
-            <button
-              className={cx(
-                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
-                started ? 'animate-pulse' : '',
-              )}
-              onClick={() => togglePlay()}
-            >
-              <Icon type={started ? 'stop' : 'play'} />
-            </button>
-            <button
-              className={cx(
-                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
-                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
-              )}
-              onClick={() => activateCode()}
-            >
-              <Icon type="refresh" />
-            </button>
-          </div>
-        </div>
-      )}
-      <div className="overflow-auto relative">
-        {show && (
-          <CodeMirror6
-            value={code}
-            onChange={setCode}
-            onViewChanged={setView}
-            theme={theme}
-            fontFamily={fontFamily}
-            fontSize={fontSize}
-            keybindings={keybindings}
-            isLineNumbersDisplayed={isLineNumbersDisplayed}
-            isActiveLineHighlighted={isActiveLineHighlighted}
-          />
-        )}
-        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
-      </div>
-      {punchcard && (
-        <canvas
-          id={canvasId}
-          className="w-full pointer-events-none"
-          height={canvasHeight}
-          ref={(el) => {
-            if (el && el.width !== el.clientWidth) {
-              el.width = el.clientWidth;
-            }
-          }}
-        ></canvas>
-      )}
-      {!!log.length && (
-        <div className="bg-gray-800 rounded-md p-2">
-          {log.map(({ message }, i) => (
-            <div key={i}>{message}</div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// TODO: dedupe
-function useLogger(onTrigger) {
-  useEvent(logger.key, onTrigger);
-}
diff --git a/packages/react/src/components/Tooltip.jsx b/packages/react/src/components/Tooltip.jsx
deleted file mode 100644
index 43a53476..00000000
--- a/packages/react/src/components/Tooltip.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { hoverTooltip } from '@codemirror/view';
-import jsdoc from '../../../../doc.json';
-import { Autocomplete } from './Autocomplete';
-
-const getDocLabel = (doc) => doc.name || doc.longname;
-
-let ctrlDown = false;
-
-// Record Control key event to trigger or block the tooltip depending on the state
-window.addEventListener(
-  'keyup',
-  function (e) {
-    if (e.key == 'Control') {
-      ctrlDown = false;
-    }
-  },
-  true,
-);
-
-window.addEventListener(
-  'keydown',
-  function (e) {
-    if (e.key == 'Control') {
-      ctrlDown = true;
-    }
-  },
-  true,
-);
-
-export const strudelTooltip = hoverTooltip(
-  (view, pos, side) => {
-    // Word selection from CodeMirror Hover Tooltip example https://codemirror.net/examples/tooltip/#hover-tooltips
-    if (!ctrlDown) {
-      return null;
-    }
-    let { from, to, text } = view.state.doc.lineAt(pos);
-    let start = pos,
-      end = pos;
-    while (start > from && /\w/.test(text[start - from - 1])) {
-      start--;
-    }
-    while (end < to && /\w/.test(text[end - from])) {
-      end++;
-    }
-    if ((start == pos && side < 0) || (end == pos && side > 0)) {
-      return null;
-    }
-    let word = text.slice(start - from, end - from);
-    // Get entry from Strudel documentation
-    let entry = jsdoc.docs.filter((doc) => getDocLabel(doc) === word)[0];
-    if (!entry) {
-      // Try for synonyms
-      entry = jsdoc.docs.filter((doc) => doc.synonyms && doc.synonyms.includes(word))[0];
-      if (!entry) {
-        return null;
-      }
-    }
-
-    return {
-      pos: start,
-      end,
-      above: false,
-      arrow: true,
-      create(view) {
-        let dom = document.createElement('div');
-        dom.className = 'strudel-tooltip';
-        createRoot(dom).render(<Autocomplete doc={entry} label={word} />);
-        return { dom };
-      },
-    };
-  },
-  { hoverTime: 10 },
-);
diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
deleted file mode 100644
index 6336bba3..00000000
--- a/packages/react/src/components/style.css
+++ /dev/null
@@ -1,34 +0,0 @@
-:root {
-  --background: #222;
-  --lineBackground: #22222299;
-  --foreground: #fff;
-  --caret: #ffcc00;
-  --selection: rgba(128, 203, 196, 0.5);
-  --selectionMatch: #036dd626;
-  --lineHighlight: #00000050;
-  --gutterBackground: transparent;
-  --gutterForeground: #8a919966;
-}
-
-.cm-editor {
-  background-color: transparent !important;
-  height: 100%;
-  z-index: 11;
-}
-
-.cm-theme {
-  width: 100%;
-  height: 100%;
-}
-
-.cm-theme-light {
-  width: 100%;
-}
-
-footer {
-  z-index: 0 !important;
-}
-
-.strudel-tooltip {
-  padding: 5px;
-}
diff --git a/packages/react/src/hooks/useHighlighting.mjs b/packages/react/src/hooks/useHighlighting.mjs
deleted file mode 100644
index cb2ca114..00000000
--- a/packages/react/src/hooks/useHighlighting.mjs
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { highlightMiniLocations, updateMiniLocations } from '../components/CodeMirror6';
-const round = (x) => Math.round(x * 1000) / 1000;
-
-function useHighlighting({ view, pattern, active, getTime }) {
-  const highlights = useRef([]);
-  const lastEnd = useRef(0);
-
-  const [miniLocations, setMiniLocations] = useState([]);
-  useEffect(() => {
-    if (view) {
-      updateMiniLocations(view, miniLocations);
-    }
-  }, [view, miniLocations]);
-
-  useEffect(() => {
-    if (view) {
-      if (pattern && active) {
-        lastEnd.current = 0;
-        let frame = requestAnimationFrame(function updateHighlights() {
-          try {
-            const audioTime = getTime();
-            // force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away
-            // see https://github.com/tidalcycles/strudel/issues/108
-            const begin = Math.max(lastEnd.current ?? audioTime, audioTime - 1 / 10, -0.01); // negative time seems buggy
-            const span = [round(begin), round(audioTime + 1 / 60)];
-            lastEnd.current = span[1];
-            highlights.current = highlights.current.filter((hap) => hap.endClipped > audioTime); // keep only highlights that are still active
-            const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
-            highlights.current = highlights.current.concat(haps); // add potential new onsets
-            highlightMiniLocations(view, begin, highlights.current);
-          } catch (err) {
-            highlightMiniLocations(view, 0, []);
-          }
-          frame = requestAnimationFrame(updateHighlights);
-        });
-        return () => {
-          cancelAnimationFrame(frame);
-        };
-      } else {
-        highlights.current = [];
-        highlightMiniLocations(view, 0, highlights.current);
-      }
-    }
-  }, [pattern, active, view]);
-
-  return { setMiniLocations };
-}
-
-export default useHighlighting;
diff --git a/packages/react/src/hooks/useKeydown.mjs b/packages/react/src/hooks/useKeydown.mjs
deleted file mode 100644
index 88d1cb94..00000000
--- a/packages/react/src/hooks/useKeydown.mjs
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-// set active pattern on ctrl+enter
-const useKeydown = (callback) =>
-  useLayoutEffect(() => {
-    window.addEventListener('keydown', callback, true);
-    return () => window.removeEventListener('keydown', callback, true);
-  }, [callback]);
-
-export default useKeydown;
diff --git a/packages/react/src/hooks/usePatternFrame.mjs b/packages/react/src/hooks/usePatternFrame.mjs
deleted file mode 100644
index 725fe0a3..00000000
--- a/packages/react/src/hooks/usePatternFrame.mjs
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import 'tailwindcss/tailwind.css';
-import useFrame from '../hooks/useFrame.mjs';
-
-function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2] }) {
-  let [lookbehind, lookahead] = drawTime;
-  lookbehind = Math.abs(lookbehind);
-  let visibleHaps = useRef([]);
-  let lastFrame = useRef(null);
-  useEffect(() => {
-    if (pattern && started) {
-      const t = getTime();
-      const futureHaps = pattern.queryArc(Math.max(t, 0), t + lookahead + 0.1); // +0.1 = workaround for weird holes in query..
-      visibleHaps.current = visibleHaps.current.filter((h) => h.whole.begin < t);
-      visibleHaps.current = visibleHaps.current.concat(futureHaps);
-    }
-  }, [pattern, started]);
-  const { start: startFrame, stop: stopFrame } = useFrame(
-    useCallback(() => {
-      const phase = getTime() + lookahead;
-      if (lastFrame.current === null) {
-        lastFrame.current = phase;
-        return;
-      }
-      const haps = pattern.queryArc(Math.max(lastFrame.current, phase - 1 / 10), phase);
-      lastFrame.current = phase;
-      visibleHaps.current = (visibleHaps.current || [])
-        .filter((h) => h.endClipped >= phase - lookbehind - lookahead) // in frame
-        .concat(haps.filter((h) => h.hasOnset()));
-      onDraw(pattern, phase - lookahead, visibleHaps.current, drawTime);
-    }, [pattern, onDraw]),
-  );
-  useEffect(() => {
-    if (started) {
-      startFrame();
-    } else {
-      visibleHaps.current = [];
-      stopFrame();
-    }
-  }, [started]);
-  return {
-    clear: () => {
-      visibleHaps.current = [];
-    },
-  };
-}
-
-export default usePatternFrame;
diff --git a/packages/react/src/hooks/usePostMessage.mjs b/packages/react/src/hooks/usePostMessage.mjs
deleted file mode 100644
index 9d3bc8e7..00000000
--- a/packages/react/src/hooks/usePostMessage.mjs
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
-usePostMessage.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/usePostMessage.mjs>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { useEffect, useCallback } from 'react';
-
-function usePostMessage(listener) {
-  useEffect(() => {
-    window.addEventListener('message', listener);
-    return () => window.removeEventListener('message', listener);
-  }, [listener]);
-  return useCallback((data) => window.postMessage(data, '*'), []);
-}
-
-export default usePostMessage;
diff --git a/packages/react/src/hooks/useStrudel.mjs b/packages/react/src/hooks/useStrudel.mjs
deleted file mode 100644
index dbf2269e..00000000
--- a/packages/react/src/hooks/useStrudel.mjs
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { repl } from '@strudel.cycles/core';
-import { transpiler } from '@strudel.cycles/transpiler';
-import usePatternFrame from './usePatternFrame';
-import usePostMessage from './usePostMessage.mjs';
-
-function useStrudel({
-  defaultOutput,
-  interval,
-  getTime,
-  evalOnMount = false,
-  initialCode = '',
-  beforeEval,
-  afterEval,
-  editPattern,
-  onEvalError,
-  onToggle,
-  canvasId,
-  drawContext,
-  drawTime = [-2, 2],
-  paintOptions = {},
-}) {
-  const id = useMemo(() => s4(), []);
-  canvasId = canvasId || `canvas-${id}`;
-  // scheduler
-  const [schedulerError, setSchedulerError] = useState();
-  const [evalError, setEvalError] = useState();
-  const [code, setCode] = useState(initialCode);
-  const [activeCode, setActiveCode] = useState();
-  const [pattern, setPattern] = useState();
-  const [started, setStarted] = useState(false);
-  const isDirty = code !== activeCode;
-  //const shouldPaint = useCallback((pat) => !!(pat?.context?.onPaint && drawContext), [drawContext]);
-  const shouldPaint = useCallback((pat) => !!pat?.context?.onPaint, []);
-
-  // TODO: make sure this hook reruns when scheduler.started changes
-  const { scheduler, evaluate, start, stop, pause, setCps } = useMemo(
-    () =>
-      repl({
-        interval,
-        defaultOutput,
-        onSchedulerError: setSchedulerError,
-        onEvalError: (err) => {
-          setEvalError(err);
-          onEvalError?.(err);
-        },
-        getTime,
-        drawContext,
-        transpiler,
-        editPattern,
-        beforeEval: async ({ code }) => {
-          setCode(code);
-          await beforeEval?.();
-        },
-        afterEval: (res) => {
-          const { pattern: _pattern, code } = res;
-          setActiveCode(code);
-          setPattern(_pattern);
-          setEvalError();
-          setSchedulerError();
-          afterEval?.(res);
-        },
-        onToggle: (v) => {
-          setStarted(v);
-          onToggle?.(v);
-        },
-      }),
-    [defaultOutput, interval, getTime],
-  );
-  const broadcast = usePostMessage(({ data: { from, type } }) => {
-    if (type === 'start' && from !== id) {
-      // console.log('message', from, type);
-      stop();
-    }
-  });
-  const activateCode = useCallback(
-    async (newCode, autostart = true) => {
-      if (newCode) {
-        setCode(code);
-      }
-      const res = await evaluate(newCode || code, autostart);
-      broadcast({ type: 'start', from: id });
-      return res;
-    },
-    [evaluate, code],
-  );
-
-  const onDraw = useCallback(
-    (pattern, time, haps, drawTime) => {
-      const { onPaint } = pattern.context || {};
-      const ctx = typeof drawContext === 'function' ? drawContext(canvasId) : drawContext;
-      onPaint?.(ctx, time, haps, drawTime, paintOptions);
-    },
-    [drawContext, canvasId, paintOptions],
-  );
-
-  const drawFirstFrame = useCallback(
-    (pat) => {
-      if (shouldPaint(pat)) {
-        const [_, lookahead] = drawTime;
-        const haps = pat.queryArc(0, lookahead);
-        // draw at -0.001 to avoid activating haps at 0
-        onDraw(pat, -0.001, haps, drawTime);
-      }
-    },
-    [drawTime, onDraw, shouldPaint],
-  );
-
-  const inited = useRef();
-  useEffect(() => {
-    if (!inited.current && evalOnMount && code) {
-      inited.current = true;
-      evaluate(code, false).then((pat) => drawFirstFrame(pat));
-    }
-  }, [evalOnMount, code, evaluate, drawFirstFrame]);
-
-  // this will stop the scheduler when hot reloading in development
-  useEffect(() => {
-    return () => {
-      scheduler.stop();
-    };
-  }, [scheduler]);
-
-  const togglePlay = async () => {
-    if (started) {
-      scheduler.stop();
-      drawFirstFrame(pattern);
-    } else {
-      await activateCode();
-    }
-  };
-  const error = schedulerError || evalError;
-
-  usePatternFrame({
-    pattern,
-    started: shouldPaint(pattern) && started,
-    getTime: () => scheduler.now(),
-    drawTime,
-    onDraw,
-  });
-
-  return {
-    id,
-    canvasId,
-    code,
-    setCode,
-    error,
-    schedulerError,
-    scheduler,
-    evalError,
-    evaluate,
-    activateCode,
-    activeCode,
-    isDirty,
-    pattern,
-    started,
-    start,
-    stop,
-    pause,
-    togglePlay,
-    setCps,
-  };
-}
-
-export default useStrudel;
-
-function s4() {
-  return Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-}
diff --git a/packages/react/src/hooks/useWidgets.mjs b/packages/react/src/hooks/useWidgets.mjs
deleted file mode 100644
index e7ca136a..00000000
--- a/packages/react/src/hooks/useWidgets.mjs
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useEffect, useState } from 'react';
-import { updateWidgets } from '@strudel/codemirror';
-
-// i know this is ugly.. in the future, repl needs to run without react
-export function useWidgets(view) {
-  const [widgets, setWidgets] = useState([]);
-  useEffect(() => {
-    if (view) {
-      updateWidgets(view, widgets);
-    }
-  }, [view, widgets]);
-  return { widgets, setWidgets };
-}
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
deleted file mode 100644
index 818d9c95..00000000
--- a/packages/react/src/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// import 'tailwindcss/tailwind.css';
-
-export { default as CodeMirror, flash, updateMiniLocations, highlightMiniLocations } from './components/CodeMirror6'; // !SSR
-export * from './components/MiniRepl'; // !SSR
-export { default as useHighlighting } from './hooks/useHighlighting'; // !SSR
-export { default as useStrudel } from './hooks/useStrudel'; // !SSR
-export { default as usePostMessage } from './hooks/usePostMessage';
-export { default as useKeydown } from './hooks/useKeydown';
-export { default as useEvent } from './hooks/useEvent';
-export { default as strudelTheme } from './themes/strudel-theme';
-export { default as teletext } from './themes/teletext';
-export { default as cx } from './cx';
diff --git a/packages/react/src/main.jsx b/packages/react/src/main.jsx
deleted file mode 100644
index fe0fabf3..00000000
--- a/packages/react/src/main.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import App from './App';
-import { createRoot } from 'react-dom/client';
-
-createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/packages/react/src/themes/algoboy.js b/packages/react/src/themes/algoboy.js
deleted file mode 100644
index 399370e1..00000000
--- a/packages/react/src/themes/algoboy.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-export const settings = {
-  background: '#9bbc0f',
-  foreground: '#0f380f', // whats that?
-  caret: '#0f380f',
-  selection: '#306230',
-  selectionMatch: '#ffffff26',
-  lineHighlight: '#8bac0f',
-  lineBackground: '#9bbc0f50',
-  //lineBackground: 'transparent',
-  gutterBackground: 'transparent',
-  gutterForeground: '#0f380f',
-  light: true,
-  customStyle: '.cm-line { line-height: 1 }',
-};
-export default createTheme({
-  theme: 'light',
-  settings,
-  styles: [
-    { tag: t.keyword, color: '#0f380f' },
-    { tag: t.operator, color: '#0f380f' },
-    { tag: t.special(t.variableName), color: '#0f380f' },
-    { tag: t.typeName, color: '#0f380f' },
-    { tag: t.atom, color: '#0f380f' },
-    { tag: t.number, color: '#0f380f' },
-    { tag: t.definition(t.variableName), color: '#0f380f' },
-    { tag: t.string, color: '#0f380f' },
-    { tag: t.special(t.string), color: '#0f380f' },
-    { tag: t.comment, color: '#0f380f' },
-    { tag: t.variableName, color: '#0f380f' },
-    { tag: t.tagName, color: '#0f380f' },
-    { tag: t.bracket, color: '#0f380f' },
-    { tag: t.meta, color: '#0f380f' },
-    { tag: t.attributeName, color: '#0f380f' },
-    { tag: t.propertyName, color: '#0f380f' },
-    { tag: t.className, color: '#0f380f' },
-    { tag: t.invalid, color: '#0f380f' },
-    { tag: [t.unit, t.punctuation], color: '#0f380f' },
-  ],
-});
diff --git a/packages/react/src/themes/blackscreen.js b/packages/react/src/themes/blackscreen.js
deleted file mode 100644
index 135285a3..00000000
--- a/packages/react/src/themes/blackscreen.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-export const settings = {
-  background: 'black',
-  foreground: 'white', // whats that?
-  caret: 'white',
-  selection: '#ffffff20',
-  selectionMatch: '#036dd626',
-  lineHighlight: '#ffffff10',
-  lineBackground: '#00000050',
-  gutterBackground: 'transparent',
-  gutterForeground: '#8a919966',
-};
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    { tag: t.keyword, color: 'white' },
-    { tag: t.operator, color: 'white' },
-    { tag: t.special(t.variableName), color: 'white' },
-    { tag: t.typeName, color: 'white' },
-    { tag: t.atom, color: 'white' },
-    { tag: t.number, color: 'white' },
-    { tag: t.definition(t.variableName), color: 'white' },
-    { tag: t.string, color: 'white' },
-    { tag: t.special(t.string), color: 'white' },
-    { tag: t.comment, color: 'white' },
-    { tag: t.variableName, color: 'white' },
-    { tag: t.tagName, color: 'white' },
-    { tag: t.bracket, color: 'white' },
-    { tag: t.meta, color: 'white' },
-    { tag: t.attributeName, color: 'white' },
-    { tag: t.propertyName, color: 'white' },
-    { tag: t.className, color: 'white' },
-    { tag: t.invalid, color: 'white' },
-    { tag: [t.unit, t.punctuation], color: 'white' },
-  ],
-});
diff --git a/packages/react/src/themes/bluescreen.js b/packages/react/src/themes/bluescreen.js
deleted file mode 100644
index aa6489d6..00000000
--- a/packages/react/src/themes/bluescreen.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-export const settings = {
-  background: '#051DB5',
-  lineBackground: '#051DB550',
-  foreground: 'white', // whats that?
-  caret: 'white',
-  selection: 'rgba(128, 203, 196, 0.5)',
-  selectionMatch: '#036dd626',
-  // lineHighlight: '#8a91991a', // original
-  lineHighlight: '#00000050',
-  gutterBackground: 'transparent',
-  // gutterForeground: '#8a919966',
-  gutterForeground: '#8a919966',
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    { tag: t.keyword, color: 'white' },
-    { tag: t.operator, color: 'white' },
-    { tag: t.special(t.variableName), color: 'white' },
-    { tag: t.typeName, color: 'white' },
-    { tag: t.atom, color: 'white' },
-    { tag: t.number, color: 'white' },
-    { tag: t.definition(t.variableName), color: 'white' },
-    { tag: t.string, color: 'white' },
-    { tag: t.special(t.string), color: 'white' },
-    { tag: t.comment, color: 'white' },
-    { tag: t.variableName, color: 'white' },
-    { tag: t.tagName, color: 'white' },
-    { tag: t.bracket, color: 'white' },
-    { tag: t.meta, color: 'white' },
-    { tag: t.attributeName, color: 'white' },
-    { tag: t.propertyName, color: 'white' },
-    { tag: t.className, color: 'white' },
-    { tag: t.invalid, color: 'white' },
-    { tag: [t.unit, t.punctuation], color: 'white' },
-  ],
-});
diff --git a/packages/react/src/themes/strudel-theme.js b/packages/react/src/themes/strudel-theme.js
deleted file mode 100644
index 4ae31060..00000000
--- a/packages/react/src/themes/strudel-theme.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-export default createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#222',
-    foreground: '#75baff', // whats that?
-    caret: '#ffcc00',
-    selection: 'rgba(128, 203, 196, 0.5)',
-    selectionMatch: '#036dd626',
-    // lineHighlight: '#8a91991a', // original
-    lineHighlight: '#00000050',
-    gutterBackground: 'transparent',
-    // gutterForeground: '#8a919966',
-    gutterForeground: '#8a919966',
-  },
-  styles: [
-    { tag: t.keyword, color: '#c792ea' },
-    { tag: t.operator, color: '#89ddff' },
-    { tag: t.special(t.variableName), color: '#eeffff' },
-    // { tag: t.typeName, color: '#f07178' }, // original
-    { tag: t.typeName, color: '#c3e88d' },
-    { tag: t.atom, color: '#f78c6c' },
-    // { tag: t.number, color: '#ff5370' }, // original
-    { tag: t.number, color: '#c3e88d' },
-    { tag: t.definition(t.variableName), color: '#82aaff' },
-    { tag: t.string, color: '#c3e88d' },
-    //     { tag: t.special(t.string), color: '#f07178' }, // original
-    { tag: t.special(t.string), color: '#c3e88d' },
-    { tag: t.comment, color: '#7d8799' },
-    // { tag: t.variableName, color: '#f07178' }, // original
-    { tag: t.variableName, color: '#c792ea' },
-    // { tag: t.tagName, color: '#ff5370' }, // original
-    { tag: t.tagName, color: '#c3e88d' },
-    { tag: t.bracket, color: '#525154' },
-    // { tag: t.bracket, color: '#a2a1a4' }, // original
-    { tag: t.meta, color: '#ffcb6b' },
-    { tag: t.attributeName, color: '#c792ea' },
-    { tag: t.propertyName, color: '#c792ea' },
-
-    { tag: t.className, color: '#decb6b' },
-    { tag: t.invalid, color: '#ffffff' },
-    { tag: [t.unit, t.punctuation], color: '#82aaff' },
-  ],
-});
diff --git a/packages/react/src/themes/teletext.js b/packages/react/src/themes/teletext.js
deleted file mode 100644
index 5fd9a557..00000000
--- a/packages/react/src/themes/teletext.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-
-let colorA = '#6edee4';
-//let colorB = 'magenta';
-let colorB = 'white';
-let colorC = 'red';
-let colorD = '#f8fc55';
-
-export const settings = {
-  background: '#000000',
-  foreground: colorA, // whats that?
-  caret: colorC,
-  selection: colorD,
-  selectionMatch: colorA,
-  lineHighlight: '#6edee440', // panel bg
-  lineBackground: '#00000040',
-  gutterBackground: 'transparent',
-  gutterForeground: '#8a919966',
-  customStyle: '.cm-line { line-height: 1 }',
-};
-
-let punctuation = colorD;
-let mini = colorB;
-
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    { tag: t.keyword, color: colorA },
-    { tag: t.operator, color: mini },
-    { tag: t.special(t.variableName), color: colorA },
-    { tag: t.typeName, color: colorA },
-    { tag: t.atom, color: colorA },
-    { tag: t.number, color: mini },
-    { tag: t.definition(t.variableName), color: colorA },
-    { tag: t.string, color: mini },
-    { tag: t.special(t.string), color: mini },
-    { tag: t.comment, color: punctuation },
-    { tag: t.variableName, color: colorA },
-    { tag: t.tagName, color: colorA },
-    { tag: t.bracket, color: punctuation },
-    { tag: t.meta, color: colorA },
-    { tag: t.attributeName, color: colorA },
-    { tag: t.propertyName, color: colorA }, // methods
-    { tag: t.className, color: colorA },
-    { tag: t.invalid, color: colorC },
-    { tag: [t.unit, t.punctuation], color: punctuation },
-  ],
-});
diff --git a/packages/react/src/themes/terminal.js b/packages/react/src/themes/terminal.js
deleted file mode 100644
index 1374bb86..00000000
--- a/packages/react/src/themes/terminal.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-export const settings = {
-  background: 'black',
-  foreground: '#41FF00', // whats that?
-  caret: '#41FF00',
-  selection: '#ffffff20',
-  selectionMatch: '#036dd626',
-  lineHighlight: '#ffffff10',
-  gutterBackground: 'transparent',
-  gutterForeground: '#8a919966',
-};
-export default createTheme({
-  theme: 'dark',
-  settings,
-  styles: [
-    { tag: t.keyword, color: '#41FF00' },
-    { tag: t.operator, color: '#41FF00' },
-    { tag: t.special(t.variableName), color: '#41FF00' },
-    { tag: t.typeName, color: '#41FF00' },
-    { tag: t.atom, color: '#41FF00' },
-    { tag: t.number, color: '#41FF00' },
-    { tag: t.definition(t.variableName), color: '#41FF00' },
-    { tag: t.string, color: '#41FF00' },
-    { tag: t.special(t.string), color: '#41FF00' },
-    { tag: t.comment, color: '#41FF00' },
-    { tag: t.variableName, color: '#41FF00' },
-    { tag: t.tagName, color: '#41FF00' },
-    { tag: t.bracket, color: '#41FF00' },
-    { tag: t.meta, color: '#41FF00' },
-    { tag: t.attributeName, color: '#41FF00' },
-    { tag: t.propertyName, color: '#41FF00' },
-    { tag: t.className, color: '#41FF00' },
-    { tag: t.invalid, color: '#41FF00' },
-  ],
-});
diff --git a/packages/react/src/themes/whitescreen.js b/packages/react/src/themes/whitescreen.js
deleted file mode 100644
index 22abad9e..00000000
--- a/packages/react/src/themes/whitescreen.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
-export const settings = {
-  background: 'white',
-  foreground: 'black', // whats that?
-  caret: 'black',
-  selection: 'rgba(128, 203, 196, 0.5)',
-  selectionMatch: '#ffffff26',
-  lineHighlight: '#cccccc50',
-  lineBackground: '#ffffff50',
-  gutterBackground: 'transparent',
-  gutterForeground: 'black',
-  light: true,
-};
-export default createTheme({
-  theme: 'light',
-  settings,
-  styles: [
-    { tag: t.keyword, color: 'black' },
-    { tag: t.operator, color: 'black' },
-    { tag: t.special(t.variableName), color: 'black' },
-    { tag: t.typeName, color: 'black' },
-    { tag: t.atom, color: 'black' },
-    { tag: t.number, color: 'black' },
-    { tag: t.definition(t.variableName), color: 'black' },
-    { tag: t.string, color: 'black' },
-    { tag: t.special(t.string), color: 'black' },
-    { tag: t.comment, color: 'black' },
-    { tag: t.variableName, color: 'black' },
-    { tag: t.tagName, color: 'black' },
-    { tag: t.bracket, color: 'black' },
-    { tag: t.meta, color: 'black' },
-    { tag: t.attributeName, color: 'black' },
-    { tag: t.propertyName, color: 'black' },
-    { tag: t.className, color: 'black' },
-    { tag: t.invalid, color: 'black' },
-  ],
-});
diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js
deleted file mode 100644
index c5a940fc..00000000
--- a/packages/react/tailwind.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        // codemirror-theme settings
-        background: 'var(--background)',
-        lineBackground: 'var(--lineBackground)',
-        foreground: 'var(--foreground)',
-        caret: 'var(--caret)',
-        selection: 'var(--selection)',
-        selectionMatch: 'var(--selectionMatch)',
-        gutterBackground: 'var(--gutterBackground)',
-        gutterForeground: 'var(--gutterForeground)',
-        gutterBorder: 'var(--gutterBorder)',
-        lineHighlight: 'var(--lineHighlight)',
-      },
-    },
-  },
-  plugins: [],
-  corePlugins: {
-    preflight: false,
-  },
-};
diff --git a/packages/react/vite.config.js b/packages/react/vite.config.js
deleted file mode 100644
index be289dab..00000000
--- a/packages/react/vite.config.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { peerDependencies, dependencies } from './package.json';
-import { resolve } from 'path';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: 'classic',
-    }),
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src', 'index.js'),
-      formats: ['es', 'cjs'],
-      fileName: (ext) => ({ es: 'index.mjs', cjs: 'index.js' }[ext]),
-      // for UMD name: 'GlobalName'
-    },
-    rollupOptions: {
-      external: [
-        ...Object.keys(peerDependencies),
-        ...Object.keys(dependencies),
-        // TODO: find out which of below names are obsolete now
-        '@strudel.cycles/transpiler',
-        'acorn',
-        '@strudel.cycles/core',
-        '@strudel.cycles/mini',
-        '@strudel.cycles/tonal',
-        '@strudel.cycles/midi',
-        '@strudel.cycles/xen',
-        '@strudel.cycles/serial',
-        '@strudel.cycles/webaudio',
-        '@codemirror/view',
-        '@codemirror/lang-javascript',
-        '@codemirror/state',
-        '@codemirror/commands',
-        '@lezer/highlight',
-        '@codemirror/language',
-        '@uiw/codemirror-themes',
-        '@uiw/react-codemirror',
-        '@lezer/highlight',
-      ],
-    },
-    target: 'esnext',
-  },
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5892af73..f26dd289 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,149 +282,6 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3
 
-  packages/react:
-    dependencies:
-      '@codemirror/autocomplete':
-        specifier: ^6.6.0
-        version: 6.6.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)(@lezer/common@1.0.2)
-      '@codemirror/commands':
-        specifier: ^6.0.0
-        version: 6.2.4
-      '@codemirror/lang-javascript':
-        specifier: ^6.1.7
-        version: 6.1.7
-      '@codemirror/language':
-        specifier: ^6.0.0
-        version: 6.6.0
-      '@codemirror/lint':
-        specifier: ^6.0.0
-        version: 6.1.0
-      '@codemirror/search':
-        specifier: ^6.0.0
-        version: 6.2.3
-      '@codemirror/state':
-        specifier: ^6.2.0
-        version: 6.2.0
-      '@codemirror/view':
-        specifier: ^6.10.0
-        version: 6.10.0
-      '@lezer/highlight':
-        specifier: ^1.1.4
-        version: 1.1.4
-      '@replit/codemirror-emacs':
-        specifier: ^6.0.1
-        version: 6.0.1(@codemirror/autocomplete@6.6.0)(@codemirror/commands@6.2.4)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)
-      '@replit/codemirror-vim':
-        specifier: ^6.0.14
-        version: 6.0.14(@codemirror/commands@6.2.4)(@codemirror/language@6.6.0)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)
-      '@replit/codemirror-vscode-keymap':
-        specifier: ^6.0.2
-        version: 6.0.2(@codemirror/autocomplete@6.6.0)(@codemirror/commands@6.2.4)(@codemirror/language@6.6.0)(@codemirror/lint@6.1.0)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)
-      '@strudel.cycles/core':
-        specifier: workspace:*
-        version: link:../core
-      '@strudel.cycles/transpiler':
-        specifier: workspace:*
-        version: link:../transpiler
-      '@strudel.cycles/webaudio':
-        specifier: workspace:*
-        version: link:../webaudio
-      '@strudel/codemirror':
-        specifier: workspace:*
-        version: link:../codemirror
-      '@uiw/codemirror-themes':
-        specifier: ^4.19.16
-        version: 4.19.16(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)
-      '@uiw/react-codemirror':
-        specifier: ^4.19.16
-        version: 4.19.16(@babel/runtime@7.20.13)(@codemirror/autocomplete@6.6.0)(@codemirror/language@6.6.0)(@codemirror/lint@6.1.0)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/theme-one-dark@6.1.0)(@codemirror/view@6.10.0)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
-      react-hook-inview:
-        specifier: ^4.5.0
-        version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
-    devDependencies:
-      '@types/react':
-        specifier: ^18.2.0
-        version: 18.2.0
-      '@types/react-dom':
-        specifier: ^18.2.1
-        version: 18.2.1
-      '@vitejs/plugin-react':
-        specifier: ^4.0.0
-        version: 4.0.0(vite@4.3.3)
-      autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.14(postcss@8.4.23)
-      postcss:
-        specifier: ^8.4.23
-        version: 8.4.23
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-      tailwindcss:
-        specifier: ^3.3.2
-        version: 3.3.2
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.3
-
-  packages/react/examples/nano-repl:
-    dependencies:
-      '@strudel.cycles/core':
-        specifier: workspace:*
-        version: link:../../../core
-      '@strudel.cycles/mini':
-        specifier: workspace:*
-        version: link:../../../mini
-      '@strudel.cycles/osc':
-        specifier: workspace:*
-        version: link:../../../osc
-      '@strudel.cycles/react':
-        specifier: workspace:*
-        version: link:../..
-      '@strudel.cycles/soundfonts':
-        specifier: workspace:*
-        version: link:../../../soundfonts
-      '@strudel.cycles/tonal':
-        specifier: workspace:*
-        version: link:../../../tonal
-      '@strudel.cycles/transpiler':
-        specifier: workspace:*
-        version: link:../../../transpiler
-      '@strudel.cycles/webaudio':
-        specifier: workspace:*
-        version: link:../../../webaudio
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-    devDependencies:
-      '@types/react':
-        specifier: ^18.2.0
-        version: 18.2.0
-      '@types/react-dom':
-        specifier: ^18.2.1
-        version: 18.2.1
-      '@vitejs/plugin-react':
-        specifier: ^4.0.0
-        version: 4.0.0(vite@4.3.3)
-      autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.14(postcss@8.4.23)
-      postcss:
-        specifier: ^8.4.23
-        version: 8.4.23
-      tailwindcss:
-        specifier: ^3.3.2
-        version: 3.3.2
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.3
-
   packages/repl:
     dependencies:
       '@rollup/plugin-replace':
@@ -669,9 +526,6 @@ importers:
       '@strudel.cycles/osc':
         specifier: workspace:*
         version: link:../packages/osc
-      '@strudel.cycles/react':
-        specifier: workspace:*
-        version: link:../packages/react
       '@strudel.cycles/serial':
         specifier: workspace:*
         version: link:../packages/serial
@@ -933,6 +787,7 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
+    dev: false
 
   /@ampproject/remapping@2.2.0:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
@@ -1077,38 +932,10 @@ packages:
       '@babel/highlight': 7.22.20
       chalk: 2.4.2
 
-  /@babel/compat-data@7.21.5:
-    resolution: {integrity: sha512-M+XAiQ7GzQ3FDPf0KOLkugzptnIypt0X0ma0wmlTKPR3IchgNFdx2JXxZdvd18JY5s7QkaFD/qyX0dsMpog/Ug==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@babel/compat-data@7.23.2:
     resolution: {integrity: sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/core@7.21.5:
-    resolution: {integrity: sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.21.4
-      '@babel/generator': 7.21.5
-      '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.21.5)
-      '@babel/helper-module-transforms': 7.21.5
-      '@babel/helpers': 7.21.5
-      '@babel/parser': 7.21.5
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.5
-      '@babel/types': 7.21.5
-      convert-source-map: 1.9.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/core@7.23.2:
     resolution: {integrity: sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==}
     engines: {node: '>=6.9.0'}
@@ -1140,16 +967,6 @@ packages:
       jsesc: 2.5.2
     dev: true
 
-  /@babel/generator@7.21.5:
-    resolution: {integrity: sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.5
-      '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.17
-      jsesc: 2.5.2
-    dev: true
-
   /@babel/generator@7.23.0:
     resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
     engines: {node: '>=6.9.0'}
@@ -1173,20 +990,6 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
-  /@babel/helper-compilation-targets@7.21.5(@babel/core@7.21.5):
-    resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.21.5
-      '@babel/core': 7.21.5
-      '@babel/helper-validator-option': 7.21.0
-      browserslist: 4.21.5
-      lru-cache: 5.1.1
-      semver: 6.3.0
-    dev: true
-
   /@babel/helper-compilation-targets@7.22.15:
     resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
     engines: {node: '>=6.9.0'}
@@ -1243,11 +1046,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helper-environment-visitor@7.21.5:
-    resolution: {integrity: sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
     engines: {node: '>=6.9.0'}
@@ -1259,14 +1057,6 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
-  /@babel/helper-function-name@7.21.0:
-    resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/types': 7.21.5
-    dev: true
-
   /@babel/helper-function-name@7.23.0:
     resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
     engines: {node: '>=6.9.0'}
@@ -1274,13 +1064,6 @@ packages:
       '@babel/template': 7.22.15
       '@babel/types': 7.23.0
 
-  /@babel/helper-hoist-variables@7.18.6:
-    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.5
-    dev: true
-
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
@@ -1294,35 +1077,12 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
-  /@babel/helper-module-imports@7.21.4:
-    resolution: {integrity: sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.5
-    dev: true
-
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.23.0
 
-  /@babel/helper-module-transforms@7.21.5:
-    resolution: {integrity: sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-environment-visitor': 7.21.5
-      '@babel/helper-module-imports': 7.21.4
-      '@babel/helper-simple-access': 7.21.5
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/helper-validator-identifier': 7.19.1
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.5
-      '@babel/types': 7.21.5
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helper-module-transforms@7.23.0(@babel/core@7.23.2):
     resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
     engines: {node: '>=6.9.0'}
@@ -1343,11 +1103,6 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
-  /@babel/helper-plugin-utils@7.20.2:
-    resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@babel/helper-plugin-utils@7.22.5:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
@@ -1381,13 +1136,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helper-simple-access@7.21.5:
-    resolution: {integrity: sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.5
-    dev: true
-
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
@@ -1401,13 +1149,6 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
-  /@babel/helper-split-export-declaration@7.18.6:
-    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.5
-    dev: true
-
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
@@ -1435,11 +1176,6 @@ packages:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-option@7.21.0:
-    resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@babel/helper-validator-option@7.22.15:
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
     engines: {node: '>=6.9.0'}
@@ -1456,17 +1192,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helpers@7.21.5:
-    resolution: {integrity: sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.5
-      '@babel/types': 7.21.5
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helpers@7.23.2:
     resolution: {integrity: sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==}
     engines: {node: '>=6.9.0'}
@@ -1516,6 +1241,7 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.21.5
+    dev: false
 
   /@babel/parser@7.23.0:
     resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
@@ -2153,16 +1879,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-react-jsx-self@7.21.0(@babel/core@7.21.5):
-    resolution: {integrity: sha512-f/Eq+79JEu+KUANFks9UZCcvydOOGMgF7jBrcwjHa5jTZD8JivnhCJYvmlhR/WTXBWonDExPoW0eO/CR4QJirA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.21.5
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
   /@babel/plugin-transform-react-jsx-self@7.22.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==}
     engines: {node: '>=6.9.0'}
@@ -2173,16 +1889,6 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
-  /@babel/plugin-transform-react-jsx-source@7.19.6(@babel/core@7.21.5):
-    resolution: {integrity: sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.21.5
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
   /@babel/plugin-transform-react-jsx-source@7.22.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w==}
     engines: {node: '>=6.9.0'}
@@ -2404,15 +2110,6 @@ packages:
     dependencies:
       regenerator-runtime: 0.13.11
 
-  /@babel/template@7.20.7:
-    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.21.4
-      '@babel/parser': 7.21.5
-      '@babel/types': 7.21.5
-    dev: true
-
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
@@ -2421,24 +2118,6 @@ packages:
       '@babel/parser': 7.23.0
       '@babel/types': 7.23.0
 
-  /@babel/traverse@7.21.5:
-    resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.21.4
-      '@babel/generator': 7.21.5
-      '@babel/helper-environment-visitor': 7.21.5
-      '@babel/helper-function-name': 7.21.0
-      '@babel/helper-hoist-variables': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.21.5
-      '@babel/types': 7.21.5
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/traverse@7.23.2:
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
@@ -2556,15 +2235,6 @@ packages:
     resolution: {integrity: sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==}
     dev: false
 
-  /@codemirror/theme-one-dark@6.1.0:
-    resolution: {integrity: sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==}
-    dependencies:
-      '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.10.0
-      '@lezer/highlight': 1.1.4
-    dev: false
-
   /@codemirror/view@6.10.0:
     resolution: {integrity: sha512-Oea3rvE4JQLMmLsy2b54yxXQJgJM9xKpUQIpF/LGgKUTH2lA06GAmEtKKWn5OUnbW3jrH1hHeUd8DJEgePMOeQ==}
     dependencies:
@@ -4688,11 +4358,13 @@ packages:
 
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: false
 
   /@types/react-dom@18.2.1:
     resolution: {integrity: sha512-8QZEV9+Kwy7tXFmjJrp3XUKQSs9LTnE0KnoUb0YCguWBiNW0Yfb2iBMYZ08WPg35IR6P3Z0s00B15SwZnO26+w==}
     dependencies:
       '@types/react': 18.2.0
+    dev: false
 
   /@types/react@18.2.0:
     resolution: {integrity: sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==}
@@ -4700,6 +4372,7 @@ packages:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
+    dev: false
 
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
@@ -4709,6 +4382,7 @@ packages:
 
   /@types/scheduler@0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+    dev: false
 
   /@types/trusted-types@2.0.2:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
@@ -4764,26 +4438,6 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: false
 
-  /@uiw/codemirror-extensions-basic-setup@4.19.16(@codemirror/autocomplete@6.6.0)(@codemirror/commands@6.2.4)(@codemirror/language@6.6.0)(@codemirror/lint@6.1.0)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0):
-    resolution: {integrity: sha512-Xm0RDpyYVZ/8hWqaBs3+wZwi4uLwZUBwp/uCt89X80FeR6mr3BFuC+a+gcDO4dBu3l+WQE3jJdhjKjB2TCY/PQ==}
-    peerDependencies:
-      '@codemirror/autocomplete': '>=6.0.0'
-      '@codemirror/commands': '>=6.0.0'
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/lint': '>=6.0.0'
-      '@codemirror/search': '>=6.0.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-    dependencies:
-      '@codemirror/autocomplete': 6.6.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)(@lezer/common@1.0.2)
-      '@codemirror/commands': 6.2.4
-      '@codemirror/language': 6.6.0
-      '@codemirror/lint': 6.1.0
-      '@codemirror/search': 6.2.3
-      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.10.0
-    dev: false
-
   /@uiw/codemirror-theme-abcdef@4.19.16(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0):
     resolution: {integrity: sha512-vZHLg35Rhz39FF3HgAeHSZxIOV3/PG8q8v/0dcywCvt1FG9J6OuAifXzePo2nrT/P/qkienbehxzF+DyHHzV5g==}
     dependencies:
@@ -5059,33 +4713,6 @@ packages:
       '@codemirror/view': 6.10.0
     dev: false
 
-  /@uiw/react-codemirror@4.19.16(@babel/runtime@7.20.13)(@codemirror/autocomplete@6.6.0)(@codemirror/language@6.6.0)(@codemirror/lint@6.1.0)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/theme-one-dark@6.1.0)(@codemirror/view@6.10.0)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-uElraR7Mvwz2oZKrmtF5hmIB8dAlIiU65nfg484e/V9k4PV6/5KtPUQL3JPO4clH2pcd+TQqRTQrFFkP/D25ew==}
-    peerDependencies:
-      '@babel/runtime': '>=7.11.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/theme-one-dark': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-      codemirror: '>=6.0.0'
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@babel/runtime': 7.20.13
-      '@codemirror/commands': 6.2.4
-      '@codemirror/state': 6.2.0
-      '@codemirror/theme-one-dark': 6.1.0
-      '@codemirror/view': 6.10.0
-      '@uiw/codemirror-extensions-basic-setup': 4.19.16(@codemirror/autocomplete@6.6.0)(@codemirror/commands@6.2.4)(@codemirror/language@6.6.0)(@codemirror/lint@6.1.0)(@codemirror/search@6.2.3)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)
-      codemirror: 6.0.1(@lezer/common@1.0.2)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    transitivePeerDependencies:
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
-    dev: false
-
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -5099,21 +4726,6 @@ packages:
       vite-plugin-pwa: 0.16.5(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
     dev: true
 
-  /@vitejs/plugin-react@4.0.0(vite@4.3.3):
-    resolution: {integrity: sha512-HX0XzMjL3hhOYm+0s95pb0Z7F8O81G7joUHgfDd/9J/ZZf5k4xX6QAMFkKsHFxaHlf6X7GD7+XuaZ66ULiJuhQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.2.0
-    dependencies:
-      '@babel/core': 7.21.5
-      '@babel/plugin-transform-react-jsx-self': 7.21.0(@babel/core@7.21.5)
-      '@babel/plugin-transform-react-jsx-source': 7.19.6(@babel/core@7.21.5)
-      react-refresh: 0.14.0
-      vite: 4.3.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@vitejs/plugin-react@4.1.0(vite@4.5.0):
     resolution: {integrity: sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5376,6 +4988,7 @@ packages:
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    dev: false
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -5416,6 +5029,7 @@ packages:
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: false
 
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -5627,22 +5241,6 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /autoprefixer@10.4.14(postcss@8.4.23):
-    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.5
-      caniuse-lite: 1.0.30001481
-      fraction.js: 4.2.0
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.23
-      postcss-value-parser: 4.2.0
-    dev: true
-
   /autoprefixer@10.4.16(postcss@8.4.31):
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5795,17 +5393,6 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
-  /browserslist@4.21.5:
-    resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001481
-      electron-to-chromium: 1.4.284
-      node-releases: 2.0.8
-      update-browserslist-db: 1.0.10(browserslist@4.21.5)
-    dev: true
-
   /browserslist@4.22.1:
     resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -5948,6 +5535,7 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
+    dev: false
 
   /camelcase-keys@6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
@@ -5967,10 +5555,6 @@ packages:
     resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
     engines: {node: '>=14.16'}
 
-  /caniuse-lite@1.0.30001481:
-    resolution: {integrity: sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==}
-    dev: true
-
   /caniuse-lite@1.0.30001559:
     resolution: {integrity: sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==}
 
@@ -6217,20 +5801,6 @@ packages:
     resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
     engines: {node: '>=0.10.0'}
 
-  /codemirror@6.0.1(@lezer/common@1.0.2):
-    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
-    dependencies:
-      '@codemirror/autocomplete': 6.6.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.10.0)(@lezer/common@1.0.2)
-      '@codemirror/commands': 6.2.4
-      '@codemirror/language': 6.6.0
-      '@codemirror/lint': 6.1.0
-      '@codemirror/search': 6.2.3
-      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.10.0
-    transitivePeerDependencies:
-      - '@lezer/common'
-    dev: false
-
   /collect-all@1.0.4:
     resolution: {integrity: sha512-RKZhRwJtJEP5FWul+gkSMEnaK6H3AGPTTWOiRimCcs+rc/OmQE3Yhy1Q7A7KsdkG3ZXVdZq68Y6ONSdvkeEcKA==}
     engines: {node: '>=0.10.0'}
@@ -6341,6 +5911,7 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
+    dev: false
 
   /commander@9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
@@ -6481,10 +6052,6 @@ packages:
       q: 1.5.1
     dev: true
 
-  /convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-    dev: true
-
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -6544,6 +6111,7 @@ packages:
 
   /csstype@3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+    dev: false
 
   /d@1.0.1:
     resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
@@ -6829,6 +6397,7 @@ packages:
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    dev: false
 
   /diff-sequences@29.4.3:
     resolution: {integrity: sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==}
@@ -6923,10 +6492,6 @@ packages:
       jake: 10.8.5
     dev: true
 
-  /electron-to-chromium@1.4.284:
-    resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
-    dev: true
-
   /electron-to-chromium@1.4.574:
     resolution: {integrity: sha512-bg1m8L0n02xRzx4LsTTMbBPiUd9yIR+74iPtS/Ao65CuXvhVZHP0ym1kSdDG3yHFDXqHQQBKujlN1AQ8qZnyFg==}
 
@@ -7792,6 +7357,7 @@ packages:
 
   /fraction.js@4.2.0:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: false
 
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
@@ -8083,6 +7649,7 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
+    dev: false
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -9110,6 +8677,7 @@ packages:
   /jiti@1.18.2:
     resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
     hasBin: true
+    dev: false
 
   /js-sdsl@4.3.0:
     resolution: {integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==}
@@ -9455,10 +9023,12 @@ packages:
   /lilconfig@2.0.6:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
+    dev: false
 
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
+    dev: false
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -9594,6 +9164,7 @@ packages:
     hasBin: true
     dependencies:
       js-tokens: 4.0.0
+    dev: false
 
   /loupe@2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
@@ -10620,6 +10191,7 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
+    dev: false
 
   /nan@2.17.0:
     resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
@@ -10764,10 +10336,6 @@ packages:
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
-  /node-releases@2.0.8:
-    resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==}
-    dev: true
-
   /node-source-walk@4.3.0:
     resolution: {integrity: sha512-8Q1hXew6ETzqKRAs3jjLioSxNfT1cx74ooiF8RlAONwVMcfq+UdzLC2eB5qcPldUxaE5w3ytLkrmV1TGddhZTA==}
     engines: {node: '>=6.0'}
@@ -10851,6 +10419,7 @@ packages:
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /npm-bundled@1.1.2:
     resolution: {integrity: sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==}
@@ -11126,6 +10695,7 @@ packages:
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
+    dev: false
 
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -11612,6 +11182,7 @@ packages:
   /pirates@4.0.5:
     resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
     engines: {node: '>= 6'}
+    dev: false
 
   /pkg-dir@4.2.0:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
@@ -11682,6 +11253,7 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
+    dev: false
 
   /postcss-js@4.0.1(postcss@8.4.23):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -11691,6 +11263,7 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.23
+    dev: false
 
   /postcss-load-config@4.0.1(postcss@8.4.23):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
@@ -11707,6 +11280,7 @@ packages:
       lilconfig: 2.0.6
       postcss: 8.4.23
       yaml: 2.2.2
+    dev: false
 
   /postcss-load-config@4.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
@@ -11733,6 +11307,7 @@ packages:
     dependencies:
       postcss: 8.4.23
       postcss-selector-parser: 6.0.11
+    dev: false
 
   /postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -11751,6 +11326,7 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: false
 
   /postcss-values-parser@6.0.2(postcss@8.4.23):
     resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
@@ -12052,6 +11628,7 @@ packages:
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
+    dev: false
 
   /react-hook-inview@4.5.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Hm61BK32/K2Cc3bjBe2bQkndHbQP6NhHvWVX7zYitaitB6T28uUV+wlgxbXU9twxUt7+17HyHq6aezpMUCijQQ==}
@@ -12070,17 +11647,20 @@ packages:
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
+    dev: false
 
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
+    dev: false
 
   /read-cmd-shim@3.0.0:
     resolution: {integrity: sha512-KQDVjGqhZk92PPNRj9ZEXEuqg8bUobSKRw+q0YQ3TKI5xkce7bUJobL4Z/OtiEbAAv70yEpYIXp4iQ9L8oPVog==}
@@ -12698,6 +12278,7 @@ packages:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
       loose-envify: 1.4.0
+    dev: false
 
   /section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
@@ -13270,6 +12851,7 @@ packages:
       mz: 2.7.0
       pirates: 4.0.5
       ts-interface-checker: 0.1.13
+    dev: false
 
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -13328,6 +12910,7 @@ packages:
       sucrase: 3.32.0
     transitivePeerDependencies:
       - ts-node
+    dev: false
 
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -13480,11 +13063,13 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
+    dev: false
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
+    dev: false
 
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
@@ -13573,6 +13158,7 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    dev: false
 
   /tsconfck@3.0.0(typescript@4.9.4):
     resolution: {integrity: sha512-w3wnsIrJNi7avf4Zb0VjOoodoO0woEqGgZGQm+LHH9przdUI+XDKsWAXwxHA1DaRTjeuZNcregSzr7RaA8zG9A==}
@@ -13968,17 +13554,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /update-browserslist-db@1.0.10(browserslist@4.21.5):
-    resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.5
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: true
-
   /update-browserslist-db@1.0.13(browserslist@4.22.1):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -14818,6 +14393,7 @@ packages:
   /yaml@2.2.2:
     resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
     engines: {node: '>= 14'}
+    dev: false
 
   /yargs-parser@20.2.4:
     resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 615475e4..d60faf4e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,6 +4,5 @@ packages:
   - "website/"
   - "packages/core/examples/vite-vanilla-repl"
   - "packages/core/examples/vite-vanilla-repl-cm6"
-  - "packages/react/examples/nano-repl"
   - "packages/web/examples/repl-example"
   - "packages/superdough/example"
diff --git a/undocumented.json b/undocumented.json
index 0a807c90..8a5641ad 100644
--- a/undocumented.json
+++ b/undocumented.json
@@ -178,7 +178,6 @@
     "backgroundImage",
     "cleanupUi"
   ],
-  "/packages/core/gist.js": [],
   "/packages/core/index.mjs": [],
   "/packages/csound/index.mjs": [
     "loadCSound",
diff --git a/website/package.json b/website/package.json
index b2c5f39a..7557bdc6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -27,7 +27,6 @@
     "@strudel.cycles/midi": "workspace:*",
     "@strudel.cycles/mini": "workspace:*",
     "@strudel.cycles/osc": "workspace:*",
-    "@strudel.cycles/react": "workspace:*",
     "@strudel.cycles/serial": "workspace:*",
     "@strudel.cycles/soundfonts": "workspace:*",
     "@strudel.cycles/tonal": "workspace:*",
diff --git a/website/public/dependencygraph.svg b/website/public/dependencygraph.svg
deleted file mode 100644
index 62fadac7..00000000
--- a/website/public/dependencygraph.svg
+++ /dev/null
@@ -1,326 +0,0 @@
-<svg height="100%" viewBox="0.00 0.00 538.13 507.20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet">
-<defs><pattern id="warning" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45 50 50)">
-        <line class="line0" stroke-width="6px" x1="3" x2="3" y2="12"></line>
-        <line class="line1" stroke-width="6px" x1="9" x2="9" y2="12"></line>
-        </pattern></defs><g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 503.2)">
-
-<!-- @strudel.cycles/core@0.6.8 -->
-<g id="node1" class="node module-_strudel_cycles_core maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/core@0.6.8">
-<title>@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M174.8,-37.3C174.8,-37.3 56.9,-37.3 56.9,-37.3 53.66,-37.3 50.43,-34.07 50.43,-30.83 50.43,-30.83 50.43,-24.37 50.43,-24.37 50.43,-21.13 53.66,-17.9 56.9,-17.9 56.9,-17.9 174.8,-17.9 174.8,-17.9 178.03,-17.9 181.26,-21.13 181.26,-24.37 181.26,-24.37 181.26,-30.83 181.26,-30.83 181.26,-34.07 178.03,-37.3 174.8,-37.3"></path>
-<text text-anchor="middle" x="115.85" y="-24.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/core@0.6.8</text>
-</g>
-<!-- fraction.js@4.2.0 -->
-<g id="node21" class="node module-fraction_js maintainer-infusion license-mit" data-module="fraction.js@4.2.0">
-<title>fraction.js@4.2.0</title>
-<path fill="none" stroke="black" d="M343.81,-19.3C343.81,-19.3 273.9,-19.3 273.9,-19.3 270.67,-19.3 267.44,-16.07 267.44,-12.83 267.44,-12.83 267.44,-6.37 267.44,-6.37 267.44,-3.13 270.67,0.1 273.9,0.1 273.9,0.1 343.81,0.1 343.81,0.1 347.05,0.1 350.28,-3.13 350.28,-6.37 350.28,-6.37 350.28,-12.83 350.28,-12.83 350.28,-16.07 347.05,-19.3 343.81,-19.3"></path>
-<text text-anchor="middle" x="308.86" y="-6.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">fraction.js@4.2.0</text>
-</g>
-<!-- @strudel.cycles/core@0.6.8&#45;&gt;fraction.js@4.2.0 -->
-
-<!-- @strudel.cycles/csound@0.6.2 -->
-<g id="node2" class="node module-_strudel_cycles_csound maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/csound@0.6.2">
-<title>@strudel.cycles/csound@0.6.2</title>
-<path fill="none" stroke="black" d="M180.53,-296.3C180.53,-296.3 51.16,-296.3 51.16,-296.3 47.93,-296.3 44.7,-293.07 44.7,-289.83 44.7,-289.83 44.7,-283.37 44.7,-283.37 44.7,-280.13 47.93,-276.9 51.16,-276.9 51.16,-276.9 180.53,-276.9 180.53,-276.9 183.77,-276.9 187,-280.13 187,-283.37 187,-283.37 187,-289.83 187,-289.83 187,-293.07 183.77,-296.3 180.53,-296.3"></path>
-<text text-anchor="middle" x="115.85" y="-283.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/csound@0.6.2</text>
-</g>
-<!-- @strudel.cycles/csound@0.6.2&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/webaudio@0.6.1 -->
-<g id="node12" class="node module-_strudel_cycles_webaudio maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/webaudio@0.6.1">
-<title>@strudel.cycles/webaudio@0.6.1</title>
-<path fill="none" stroke="black" d="M186.63,-259.3C186.63,-259.3 45.06,-259.3 45.06,-259.3 41.83,-259.3 38.59,-256.07 38.59,-252.83 38.59,-252.83 38.59,-246.37 38.59,-246.37 38.59,-243.13 41.83,-239.9 45.06,-239.9 45.06,-239.9 186.63,-239.9 186.63,-239.9 189.87,-239.9 193.1,-243.13 193.1,-246.37 193.1,-246.37 193.1,-252.83 193.1,-252.83 193.1,-256.07 189.87,-259.3 186.63,-259.3"></path>
-<text text-anchor="middle" x="115.85" y="-246.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/webaudio@0.6.1</text>
-</g>
-<!-- @strudel.cycles/csound@0.6.2&#45;&gt;@strudel.cycles/webaudio@0.6.1 -->
-
-<!-- @csound/browser@6.18.5 -->
-<g id="node14" class="node module-_csound_browser collapsed maintainer-skyne maintainer-kunstmusik maintainer-eddyc maintainer-hlolli license-lgpl_2_1" data-module="@csound/browser@6.18.5">
-<title>@csound/browser@6.18.5</title>
-<path fill="none" stroke="black" d="M364.3,-257.3C364.3,-257.3 253.41,-257.3 253.41,-257.3 250.18,-257.3 246.95,-254.07 246.95,-250.83 246.95,-250.83 246.95,-244.37 246.95,-244.37 246.95,-241.13 250.18,-237.9 253.41,-237.9 253.41,-237.9 364.3,-237.9 364.3,-237.9 367.54,-237.9 370.77,-241.13 370.77,-244.37 370.77,-244.37 370.77,-250.83 370.77,-250.83 370.77,-254.07 367.54,-257.3 364.3,-257.3"></path>
-<text text-anchor="middle" x="308.86" y="-244.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@csound/browser@6.18.5</text>
-</g>
-<!-- @strudel.cycles/csound@0.6.2&#45;&gt;@csound/browser@6.18.5 -->
-
-<!-- @strudel.cycles/embed@0.2.0 -->
-<g id="node3" class="node module-_strudel_cycles_embed maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/embed@0.2.0">
-<title>@strudel.cycles/embed@0.2.0</title>
-<path fill="none" stroke="black" d="M179.69,-462.3C179.69,-462.3 52.01,-462.3 52.01,-462.3 48.77,-462.3 45.54,-459.07 45.54,-455.83 45.54,-455.83 45.54,-449.37 45.54,-449.37 45.54,-446.13 48.77,-442.9 52.01,-442.9 52.01,-442.9 179.69,-442.9 179.69,-442.9 182.92,-442.9 186.16,-446.13 186.16,-449.37 186.16,-449.37 186.16,-455.83 186.16,-455.83 186.16,-459.07 182.92,-462.3 179.69,-462.3"></path>
-<text text-anchor="middle" x="115.85" y="-449.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/embed@0.2.0</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0 -->
-<g id="node4" class="node module-_strudel_cycles_midi maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/midi@0.6.0">
-<title>@strudel.cycles/midi@0.6.0</title>
-<path fill="none" stroke="black" d="M175.04,-370.3C175.04,-370.3 56.66,-370.3 56.66,-370.3 53.42,-370.3 50.19,-367.07 50.19,-363.83 50.19,-363.83 50.19,-357.37 50.19,-357.37 50.19,-354.13 53.42,-350.9 56.66,-350.9 56.66,-350.9 175.04,-350.9 175.04,-350.9 178.27,-350.9 181.5,-354.13 181.5,-357.37 181.5,-357.37 181.5,-363.83 181.5,-363.83 181.5,-367.07 178.27,-370.3 175.04,-370.3"></path>
-<text text-anchor="middle" x="115.85" y="-357.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/midi@0.6.0</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/webaudio@0.6.0 -->
-<g id="node15" class="node module-_strudel_cycles_webaudio maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/webaudio@0.6.0">
-<title>@strudel.cycles/webaudio@0.6.0</title>
-<path fill="none" stroke="black" d="M379.64,-370.3C379.64,-370.3 238.07,-370.3 238.07,-370.3 234.84,-370.3 231.6,-367.07 231.6,-363.83 231.6,-363.83 231.6,-357.37 231.6,-357.37 231.6,-354.13 234.84,-350.9 238.07,-350.9 238.07,-350.9 379.64,-350.9 379.64,-350.9 382.88,-350.9 386.11,-354.13 386.11,-357.37 386.11,-357.37 386.11,-363.83 386.11,-363.83 386.11,-367.07 382.88,-370.3 379.64,-370.3"></path>
-<text text-anchor="middle" x="308.86" y="-357.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/webaudio@0.6.0</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0&#45;&gt;@strudel.cycles/webaudio@0.6.0 -->
-
-<!-- webmidi@3.1.4 -->
-<g id="node25" class="node module-webmidi collapsed maintainer-djipco license-apache_2_0" data-module="webmidi@3.1.4">
-<title>webmidi@3.1.4</title>
-<path fill="none" stroke="black" d="M340.52,-407.3C340.52,-407.3 277.2,-407.3 277.2,-407.3 273.97,-407.3 270.73,-404.07 270.73,-400.83 270.73,-400.83 270.73,-394.37 270.73,-394.37 270.73,-391.13 273.97,-387.9 277.2,-387.9 277.2,-387.9 340.52,-387.9 340.52,-387.9 343.75,-387.9 346.98,-391.13 346.98,-394.37 346.98,-394.37 346.98,-400.83 346.98,-400.83 346.98,-404.07 343.75,-407.3 340.52,-407.3"></path>
-<text text-anchor="middle" x="308.86" y="-394.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">webmidi@3.1.4</text>
-</g>
-<!-- @strudel.cycles/midi@0.6.0&#45;&gt;webmidi@3.1.4 -->
-
-<!-- @strudel.cycles/mini@0.6.0 -->
-<g id="node5" class="node module-_strudel_cycles_mini maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/mini@0.6.0">
-<title>@strudel.cycles/mini@0.6.0</title>
-<path fill="none" stroke="black" d="M175.04,-111.3C175.04,-111.3 56.66,-111.3 56.66,-111.3 53.42,-111.3 50.19,-108.07 50.19,-104.83 50.19,-104.83 50.19,-98.37 50.19,-98.37 50.19,-95.13 53.42,-91.9 56.66,-91.9 56.66,-91.9 175.04,-91.9 175.04,-91.9 178.27,-91.9 181.5,-95.13 181.5,-98.37 181.5,-98.37 181.5,-104.83 181.5,-104.83 181.5,-108.07 178.27,-111.3 175.04,-111.3"></path>
-<text text-anchor="middle" x="115.85" y="-98.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/mini@0.6.0</text>
-</g>
-<!-- @strudel.cycles/mini@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/osc@0.6.0 -->
-<g id="node6" class="node module-_strudel_cycles_osc maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/osc@0.6.0">
-<title>@strudel.cycles/osc@0.6.0</title>
-<path fill="none" stroke="black" d="M172.53,-222.3C172.53,-222.3 59.16,-222.3 59.16,-222.3 55.93,-222.3 52.7,-219.07 52.7,-215.83 52.7,-215.83 52.7,-209.37 52.7,-209.37 52.7,-206.13 55.93,-202.9 59.16,-202.9 59.16,-202.9 172.53,-202.9 172.53,-202.9 175.76,-202.9 179,-206.13 179,-209.37 179,-209.37 179,-215.83 179,-215.83 179,-219.07 175.76,-222.3 172.53,-222.3"></path>
-<text text-anchor="middle" x="115.85" y="-209.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/osc@0.6.0</text>
-</g>
-<!-- @strudel.cycles/osc@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- osc&#45;js@2.4.0 -->
-<g id="node22" class="node module-osc_js collapsed maintainer-andreasdz license-mit" data-module="osc-js@2.4.0">
-<title>osc-js@2.4.0</title>
-<path fill="none" stroke="black" d="M334.18,-220.3C334.18,-220.3 283.53,-220.3 283.53,-220.3 280.3,-220.3 277.06,-217.07 277.06,-213.83 277.06,-213.83 277.06,-207.37 277.06,-207.37 277.06,-204.13 280.3,-200.9 283.53,-200.9 283.53,-200.9 334.18,-200.9 334.18,-200.9 337.42,-200.9 340.65,-204.13 340.65,-207.37 340.65,-207.37 340.65,-213.83 340.65,-213.83 340.65,-217.07 337.42,-220.3 334.18,-220.3"></path>
-<text text-anchor="middle" x="308.86" y="-207.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">osc-js@2.4.0</text>
-</g>
-<!-- @strudel.cycles/osc@0.6.0&#45;&gt;osc&#45;js@2.4.0 -->
-
-<!-- @strudel.cycles/react@0.6.0 -->
-<g id="node7" class="node module-_strudel_cycles_react collapsed maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/react@0.6.0">
-<title>@strudel.cycles/react@0.6.0</title>
-<path fill="none" stroke="black" d="M175.73,-499.3C175.73,-499.3 55.96,-499.3 55.96,-499.3 52.73,-499.3 49.49,-496.07 49.49,-492.83 49.49,-492.83 49.49,-486.37 49.49,-486.37 49.49,-483.13 52.73,-479.9 55.96,-479.9 55.96,-479.9 175.73,-479.9 175.73,-479.9 178.97,-479.9 182.2,-483.13 182.2,-486.37 182.2,-486.37 182.2,-492.83 182.2,-492.83 182.2,-496.07 178.97,-499.3 175.73,-499.3"></path>
-<text text-anchor="middle" x="115.85" y="-486.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/react@0.6.0</text>
-</g>
-<!-- @strudel.cycles/serial@0.6.0 -->
-<g id="node8" class="node module-_strudel_cycles_serial maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/serial@0.6.0">
-<title>@strudel.cycles/serial@0.6.0</title>
-<path fill="none" stroke="black" d="M177.19,-148.3C177.19,-148.3 54.5,-148.3 54.5,-148.3 51.27,-148.3 48.04,-145.07 48.04,-141.83 48.04,-141.83 48.04,-135.37 48.04,-135.37 48.04,-132.13 51.27,-128.9 54.5,-128.9 54.5,-128.9 177.19,-128.9 177.19,-128.9 180.42,-128.9 183.66,-132.13 183.66,-135.37 183.66,-135.37 183.66,-141.83 183.66,-141.83 183.66,-145.07 180.42,-148.3 177.19,-148.3"></path>
-<text text-anchor="middle" x="115.85" y="-135.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/serial@0.6.0</text>
-</g>
-<!-- @strudel.cycles/serial@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/soundfonts@0.6.0 -->
-<g id="node9" class="node module-_strudel_cycles_soundfonts maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/soundfonts@0.6.0">
-<title>@strudel.cycles/soundfonts@0.6.0</title>
-<path fill="none" stroke="black" d="M189.15,-333.3C189.15,-333.3 42.55,-333.3 42.55,-333.3 39.31,-333.3 36.08,-330.07 36.08,-326.83 36.08,-326.83 36.08,-320.37 36.08,-320.37 36.08,-317.13 39.31,-313.9 42.55,-313.9 42.55,-313.9 189.15,-313.9 189.15,-313.9 192.38,-313.9 195.62,-317.13 195.62,-320.37 195.62,-320.37 195.62,-326.83 195.62,-326.83 195.62,-330.07 192.38,-333.3 189.15,-333.3"></path>
-<text text-anchor="middle" x="115.85" y="-320.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/soundfonts@0.6.0</text>
-</g>
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;@strudel.cycles/webaudio@0.6.0 -->
-
-<!-- sfumato@0.1.2 -->
-<g id="node23" class="node module-sfumato maintainer-felixroos license-isc" data-module="sfumato@0.1.2">
-<title>sfumato@0.1.2</title>
-<path fill="none" stroke="black" d="M338.96,-333.3C338.96,-333.3 278.76,-333.3 278.76,-333.3 275.52,-333.3 272.29,-330.07 272.29,-326.83 272.29,-326.83 272.29,-320.37 272.29,-320.37 272.29,-317.13 275.52,-313.9 278.76,-313.9 278.76,-313.9 338.96,-313.9 338.96,-313.9 342.19,-313.9 345.43,-317.13 345.43,-320.37 345.43,-320.37 345.43,-326.83 345.43,-326.83 345.43,-330.07 342.19,-333.3 338.96,-333.3"></path>
-<text text-anchor="middle" x="308.86" y="-320.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">sfumato@0.1.2</text>
-</g>
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;sfumato@0.1.2 -->
-
-<!-- soundfont2@0.4.0 -->
-<g id="node24" class="node module-soundfont2 maintainer-mrten license-mit" data-module="soundfont2@0.4.0">
-<title>soundfont2@0.4.0</title>
-<path fill="none" stroke="black" d="M513.22,-314.3C513.22,-314.3 438.89,-314.3 438.89,-314.3 435.66,-314.3 432.42,-311.07 432.42,-307.83 432.42,-307.83 432.42,-301.37 432.42,-301.37 432.42,-298.13 435.66,-294.9 438.89,-294.9 438.89,-294.9 513.22,-294.9 513.22,-294.9 516.45,-294.9 519.69,-298.13 519.69,-301.37 519.69,-301.37 519.69,-307.83 519.69,-307.83 519.69,-311.07 516.45,-314.3 513.22,-314.3"></path>
-<text text-anchor="middle" x="476.06" y="-301.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">soundfont2@0.4.0</text>
-</g>
-<!-- @strudel.cycles/soundfonts@0.6.0&#45;&gt;soundfont2@0.4.0 -->
-
-<!-- @strudel.cycles/tonal@0.6.0 -->
-<g id="node10" class="node module-_strudel_cycles_tonal maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/tonal@0.6.0">
-<title>@strudel.cycles/tonal@0.6.0</title>
-<path fill="none" stroke="black" d="M176.36,-425.3C176.36,-425.3 55.33,-425.3 55.33,-425.3 52.1,-425.3 48.86,-422.07 48.86,-418.83 48.86,-418.83 48.86,-412.37 48.86,-412.37 48.86,-409.13 52.1,-405.9 55.33,-405.9 55.33,-405.9 176.36,-405.9 176.36,-405.9 179.6,-405.9 182.83,-409.13 182.83,-412.37 182.83,-412.37 182.83,-418.83 182.83,-418.83 182.83,-422.07 179.6,-425.3 176.36,-425.3"></path>
-<text text-anchor="middle" x="115.85" y="-412.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/tonal@0.6.0</text>
-</g>
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @tonaljs/tonal@4.10.0 -->
-<g id="node16" class="node module-_tonaljs_tonal collapsed maintainer-danigb license-mit" data-module="@tonaljs/tonal@4.10.0">
-<title>@tonaljs/tonal@4.10.0</title>
-<path fill="none" stroke="black" d="M523.73,-463.3C523.73,-463.3 428.38,-463.3 428.38,-463.3 425.15,-463.3 421.91,-460.07 421.91,-456.83 421.91,-456.83 421.91,-450.37 421.91,-450.37 421.91,-447.13 425.15,-443.9 428.38,-443.9 428.38,-443.9 523.73,-443.9 523.73,-443.9 526.96,-443.9 530.2,-447.13 530.2,-450.37 530.2,-450.37 530.2,-456.83 530.2,-456.83 530.2,-460.07 526.96,-463.3 523.73,-463.3"></path>
-<text text-anchor="middle" x="476.06" y="-450.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@tonaljs/tonal@4.10.0</text>
-</g>
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;@tonaljs/tonal@4.10.0 -->
-
-<!-- chord&#45;voicings@0.0.1 -->
-<g id="node18" class="node module-chord_voicings maintainer-felixroos license-isc" data-module="chord-voicings@0.0.1">
-<title>chord-voicings@0.0.1</title>
-<path fill="none" stroke="black" d="M354.5,-444.3C354.5,-444.3 263.21,-444.3 263.21,-444.3 259.98,-444.3 256.74,-441.07 256.74,-437.83 256.74,-437.83 256.74,-431.37 256.74,-431.37 256.74,-428.13 259.98,-424.9 263.21,-424.9 263.21,-424.9 354.5,-424.9 354.5,-424.9 357.74,-424.9 360.97,-428.13 360.97,-431.37 360.97,-431.37 360.97,-437.83 360.97,-437.83 360.97,-441.07 357.74,-444.3 354.5,-444.3"></path>
-<text text-anchor="middle" x="308.86" y="-431.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">chord-voicings@0.0.1</text>
-</g>
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;chord&#45;voicings@0.0.1 -->
-
-<!-- @strudel.cycles/tonal@0.6.0&#45;&gt;webmidi@3.1.4 -->
-
-<!-- @strudel.cycles/transpiler@0.6.0 -->
-<g id="node11" class="node module-_strudel_cycles_transpiler maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/transpiler@0.6.0">
-<title>@strudel.cycles/transpiler@0.6.0</title>
-<path fill="none" stroke="black" d="M185.91,-74.3C185.91,-74.3 45.79,-74.3 45.79,-74.3 42.55,-74.3 39.32,-71.07 39.32,-67.83 39.32,-67.83 39.32,-61.37 39.32,-61.37 39.32,-58.13 42.55,-54.9 45.79,-54.9 45.79,-54.9 185.91,-54.9 185.91,-54.9 189.14,-54.9 192.38,-58.13 192.38,-61.37 192.38,-61.37 192.38,-67.83 192.38,-67.83 192.38,-71.07 189.14,-74.3 185.91,-74.3"></path>
-<text text-anchor="middle" x="115.85" y="-61.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/transpiler@0.6.0</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- acorn@8.8.2 -->
-<g id="node17" class="node module-acorn collapsed maintainer-marijn maintainer-adrianheine maintainer-rreverser license-mit" data-module="acorn@8.8.2">
-<title>acorn@8.8.2</title>
-<path fill="none" stroke="black" d="M333.45,-130.3C333.45,-130.3 284.27,-130.3 284.27,-130.3 281.03,-130.3 277.8,-127.07 277.8,-123.83 277.8,-123.83 277.8,-117.37 277.8,-117.37 277.8,-114.13 281.03,-110.9 284.27,-110.9 284.27,-110.9 333.45,-110.9 333.45,-110.9 336.68,-110.9 339.92,-114.13 339.92,-117.37 339.92,-117.37 339.92,-123.83 339.92,-123.83 339.92,-127.07 336.68,-130.3 333.45,-130.3"></path>
-<text text-anchor="middle" x="308.86" y="-117.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">acorn@8.8.2</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;acorn@8.8.2 -->
-
-<!-- escodegen@2.0.0 -->
-<g id="node19" class="node module-escodegen collapsed maintainer-constellation maintainer-michaelficarra license-bsd_2_clause" data-module="escodegen@2.0.0">
-<title>escodegen@2.0.0</title>
-<path fill="none" stroke="black" d="M344.33,-93.3C344.33,-93.3 273.39,-93.3 273.39,-93.3 270.15,-93.3 266.92,-90.07 266.92,-86.83 266.92,-86.83 266.92,-80.37 266.92,-80.37 266.92,-77.13 270.15,-73.9 273.39,-73.9 273.39,-73.9 344.33,-73.9 344.33,-73.9 347.56,-73.9 350.8,-77.13 350.8,-80.37 350.8,-80.37 350.8,-86.83 350.8,-86.83 350.8,-90.07 347.56,-93.3 344.33,-93.3"></path>
-<text text-anchor="middle" x="308.86" y="-80.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">escodegen@2.0.0</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;escodegen@2.0.0 -->
-
-<!-- estree&#45;walker@3.0.3 -->
-<g id="node20" class="node module-estree_walker collapsed maintainer-rich_harris license-mit" data-module="estree-walker@3.0.3">
-<title>estree-walker@3.0.3</title>
-<path fill="none" stroke="black" d="M351.26,-56.3C351.26,-56.3 266.46,-56.3 266.46,-56.3 263.22,-56.3 259.99,-53.07 259.99,-49.83 259.99,-49.83 259.99,-43.37 259.99,-43.37 259.99,-40.13 263.22,-36.9 266.46,-36.9 266.46,-36.9 351.26,-36.9 351.26,-36.9 354.49,-36.9 357.73,-40.13 357.73,-43.37 357.73,-43.37 357.73,-49.83 357.73,-49.83 357.73,-53.07 354.49,-56.3 351.26,-56.3"></path>
-<text text-anchor="middle" x="308.86" y="-43.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">estree-walker@3.0.3</text>
-</g>
-<!-- @strudel.cycles/transpiler@0.6.0&#45;&gt;estree&#45;walker@3.0.3 -->
-
-<!-- @strudel.cycles/webaudio@0.6.1&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/xen@0.6.0 -->
-<g id="node13" class="node module-_strudel_cycles_xen maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/xen@0.6.0">
-<title>@strudel.cycles/xen@0.6.0</title>
-<path fill="none" stroke="black" d="M173.25,-185.3C173.25,-185.3 58.44,-185.3 58.44,-185.3 55.21,-185.3 51.98,-182.07 51.98,-178.83 51.98,-178.83 51.98,-172.37 51.98,-172.37 51.98,-169.13 55.21,-165.9 58.44,-165.9 58.44,-165.9 173.25,-165.9 173.25,-165.9 176.48,-165.9 179.72,-169.13 179.72,-172.37 179.72,-172.37 179.72,-178.83 179.72,-178.83 179.72,-182.07 176.48,-185.3 173.25,-185.3"></path>
-<text text-anchor="middle" x="115.85" y="-172.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/xen@0.6.0</text>
-</g>
-<!-- @strudel.cycles/xen@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- @strudel.cycles/webaudio@0.6.0&#45;&gt;@strudel.cycles/core@0.6.8 -->
-
-<!-- chord&#45;voicings@0.0.1&#45;&gt;@tonaljs/tonal@4.10.0 -->
-<g id="edge27" class="edge">
-<title>chord-voicings@0.0.1-&gt;@tonaljs/tonal@4.10.0</title>
-<path fill="none" stroke="black" d="M361.22,-440.51C377.14,-442.34 394.88,-444.38 411.53,-446.29"></path>
-<polygon fill="black" stroke="black" points="411.39,-449.8 421.73,-447.47 412.19,-442.85 411.39,-449.8"></polygon>
-</g>
-<!-- sfumato@0.1.2&#45;&gt;soundfont2@0.4.0 -->
-<g id="edge28" class="edge">
-<title>sfumato@0.1.2-&gt;soundfont2@0.4.0</title>
-<path fill="none" stroke="black" d="M345.7,-319.48C368.06,-316.91 397.22,-313.55 422.19,-310.68"></path>
-<polygon fill="black" stroke="black" points="422.72,-314.14 432.25,-309.52 421.92,-307.19 422.72,-314.14"></polygon>
-</g>
-<g id="edge1" class="edge">
-<title>@strudel.cycles/core@0.6.8-&gt;fraction.js@4.2.0</title>
-<path fill="none" stroke="black" d="M181.25,-21.53C206.16,-19.18 234.23,-16.54 257.6,-14.34"></path>
-<polygon fill="black" stroke="black" points="258.02,-17.81 267.64,-13.39 257.36,-10.84 258.02,-17.81"></polygon>
-</g><g id="edge3" class="edge">
-<title>@strudel.cycles/csound@0.6.2-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M44.23,-280.41C33.55,-276.09 24.08,-269.5 17.96,-259.6 -5.99,-220.85 -5.99,-93.35 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge4" class="edge">
-<title>@strudel.cycles/csound@0.6.2-&gt;@strudel.cycles/webaudio@0.6.1</title>
-<path fill="none" stroke="black" d="M115.85,-276.84C115.85,-274.39 115.85,-271.94 115.85,-269.49"></path>
-<polygon fill="black" stroke="black" points="119.35,-269.43 115.85,-259.43 112.35,-269.43 119.35,-269.43"></polygon>
-</g><g id="edge6" class="edge">
-<title>@strudel.cycles/midi@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M50.17,-356.56C37.1,-352.37 25.19,-345.3 17.96,-333.6 1.66,-307.23 1.66,-80.97 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge7" class="edge">
-<title>@strudel.cycles/midi@0.6.0-&gt;@strudel.cycles/webaudio@0.6.0</title>
-<path fill="none" stroke="black" d="M181.51,-360.6C194.37,-360.6 208.05,-360.6 221.49,-360.6"></path>
-<polygon fill="black" stroke="black" points="221.71,-364.1 231.7,-360.6 221.7,-357.1 221.71,-364.1"></polygon>
-</g><g id="edge5" class="edge">
-<title>@strudel.cycles/midi@0.6.0-&gt;webmidi@3.1.4</title>
-<path fill="none" stroke="black" d="M166.53,-370.22C195.48,-375.83 231.78,-382.86 260.34,-388.4"></path>
-<polygon fill="black" stroke="black" points="260.01,-391.9 270.49,-390.36 261.34,-385.02 260.01,-391.9"></polygon>
-</g><g id="edge8" class="edge">
-<title>@strudel.cycles/mini@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M50.17,-97.56C37.1,-93.37 25.19,-86.3 17.96,-74.6 7.78,-58.12 21.54,-47.3 41.67,-40.25"></path>
-<polygon fill="black" stroke="black" points="42.78,-43.57 51.3,-37.27 40.71,-36.88 42.78,-43.57"></polygon>
-</g><g id="edge10" class="edge">
-<title>@strudel.cycles/osc@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M52.7,-209.33C38.65,-205.26 25.65,-198.05 17.96,-185.6 2.66,-160.84 2.66,-79.36 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge9" class="edge">
-<title>@strudel.cycles/osc@0.6.0-&gt;osc-js@2.4.0</title>
-<path fill="none" stroke="black" d="M179.13,-211.95C207.93,-211.65 241.33,-211.3 266.9,-211.03"></path>
-<polygon fill="black" stroke="black" points="267.02,-214.53 276.99,-210.92 266.95,-207.53 267.02,-214.53"></polygon>
-</g><g id="edge11" class="edge">
-<title>@strudel.cycles/serial@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M48.17,-133.89C35.89,-129.63 24.82,-122.7 17.96,-111.6 4.64,-90.05 4.64,-76.15 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge14" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M36.71,-313.85C29.15,-309.7 22.6,-304.1 17.96,-296.6 3.83,-273.73 3.83,-77.47 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge15" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;@strudel.cycles/webaudio@0.6.0</title>
-<path fill="none" stroke="black" d="M166.53,-333.22C191.53,-338.07 222.01,-343.97 248.26,-349.05"></path>
-<polygon fill="black" stroke="black" points="247.6,-352.49 258.09,-350.96 248.94,-345.62 247.6,-352.49"></polygon>
-</g><g id="edge12" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;sfumato@0.1.2</title>
-<path fill="none" stroke="black" d="M195.64,-323.6C218.22,-323.6 242.08,-323.6 261.97,-323.6"></path>
-<polygon fill="black" stroke="black" points="261.98,-327.1 271.98,-323.6 261.98,-320.1 261.98,-327.1"></polygon>
-</g><g id="edge13" class="edge">
-<title>@strudel.cycles/soundfonts@0.6.0-&gt;soundfont2@0.4.0</title>
-<path fill="none" stroke="black" d="M164.14,-313.99C184.8,-310.25 209.37,-306.44 231.73,-304.6 297.18,-299.22 372.86,-300.38 422.21,-302.11"></path>
-<polygon fill="black" stroke="black" points="422.21,-305.61 432.33,-302.49 422.47,-298.62 422.21,-305.61"></polygon>
-</g><g id="edge19" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M68.74,-405.99C49.45,-399.45 29.07,-388.58 17.96,-370.6 -0.5,-340.73 -0.5,-84.47 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge16" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;@tonaljs/tonal@4.10.0</title>
-<path fill="none" stroke="black" d="M168.82,-425.25C177.92,-427.57 187.2,-430.33 195.73,-433.6 212.82,-440.15 214.01,-449.01 231.73,-453.6 291.41,-469.07 362.13,-466.9 411.9,-462.17"></path>
-<polygon fill="black" stroke="black" points="412.28,-465.65 421.88,-461.17 411.58,-458.69 412.28,-465.65"></polygon>
-</g><g id="edge17" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;chord-voicings@0.0.1</title>
-<path fill="none" stroke="black" d="M182.85,-422.17C203.51,-424.22 226.22,-426.48 246.55,-428.5"></path>
-<polygon fill="black" stroke="black" points="246.33,-432 256.62,-429.5 247.02,-425.03 246.33,-432"></polygon>
-</g><g id="edge18" class="edge">
-<title>@strudel.cycles/tonal@0.6.0-&gt;webmidi@3.1.4</title>
-<path fill="none" stroke="black" d="M182.85,-409.38C208.4,-406.97 237.07,-404.27 260.51,-402.06"></path>
-<polygon fill="black" stroke="black" points="260.91,-405.54 270.54,-401.12 260.26,-398.57 260.91,-405.54"></polygon>
-</g><g id="edge23" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M115.85,-54.84C115.85,-52.39 115.85,-49.94 115.85,-47.49"></path>
-<polygon fill="black" stroke="black" points="119.35,-47.43 115.85,-37.43 112.35,-47.43 119.35,-47.43"></polygon>
-</g><g id="edge20" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;acorn@8.8.2</title>
-<path fill="none" stroke="black" d="M168.82,-74.25C177.92,-76.57 187.2,-79.33 195.73,-82.6 212.82,-89.15 214.66,-95.99 231.73,-102.6 243.09,-107 255.84,-110.53 267.61,-113.25"></path>
-<polygon fill="black" stroke="black" points="267.12,-116.73 277.64,-115.44 268.61,-109.89 267.12,-116.73"></polygon>
-</g><g id="edge21" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;escodegen@2.0.0</title>
-<path fill="none" stroke="black" d="M192.61,-72.14C214.17,-74.28 237.12,-76.56 256.83,-78.52"></path>
-<polygon fill="black" stroke="black" points="256.51,-82.01 266.81,-79.52 257.21,-75.04 256.51,-82.01"></polygon>
-</g><g id="edge22" class="edge">
-<title>@strudel.cycles/transpiler@0.6.0-&gt;estree-walker@3.0.3</title>
-<path fill="none" stroke="black" d="M192.61,-57.46C211.68,-55.66 231.85,-53.76 249.89,-52.06"></path>
-<polygon fill="black" stroke="black" points="250.33,-55.54 259.96,-51.11 249.68,-48.57 250.33,-55.54"></polygon>
-</g><g id="edge24" class="edge">
-<title>@strudel.cycles/webaudio@0.6.1-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M38.54,-240.82C30.22,-236.58 22.97,-230.7 17.96,-222.6 -1.66,-190.84 -1.66,-86.36 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge25" class="edge">
-<title>@strudel.cycles/xen@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M51.94,-172.1C38.18,-168 25.52,-160.82 17.96,-148.6 -4,-113.06 -4,-90.14 17.96,-54.6 23.42,-45.77 31.54,-39.58 40.82,-35.27"></path>
-<polygon fill="black" stroke="black" points="42.35,-38.43 50.42,-31.56 39.83,-31.9 42.35,-38.43"></polygon>
-</g><g id="edge26" class="edge">
-<title>@strudel.cycles/webaudio@0.6.0-&gt;@strudel.cycles/core@0.6.8</title>
-<path fill="none" stroke="black" d="M241.66,-350.81C237.99,-348.55 234.63,-345.84 231.73,-342.6 143.1,-243.48 284.75,-144.37 195.73,-45.6 193.96,-43.64 192.03,-41.87 189.96,-40.27"></path>
-<polygon fill="black" stroke="black" points="191.74,-37.25 181.4,-34.93 188.03,-43.19 191.74,-37.25"></polygon>
-</g><g id="edge2" class="edge">
-<title>@strudel.cycles/csound@0.6.2-&gt;@csound/browser@6.18.5</title>
-<path fill="none" stroke="black" d="M164.06,-276.96C190.24,-271.62 222.97,-264.93 250.6,-259.29"></path>
-<polygon fill="black" stroke="black" points="251.43,-262.69 260.52,-257.26 250.02,-255.84 251.43,-262.69"></polygon>
-</g></g>
-</svg>
\ No newline at end of file
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index ab18500f..cb3e605a 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -46,41 +46,9 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
 <script>
-  import { settings, injectStyle } from '../repl/themes.mjs';
-  import { settingsMap } from '../settings.mjs';
-  import { listenKeys } from 'nanostores';
-  const themeStyle = document.createElement('style');
-  themeStyle.id = 'strudel-theme';
-  document.head.append(themeStyle);
+  import { initTheme, codemirrorSettings } from '@strudel/codemirror';
 
-  let resetThemeStyle;
-  function activateTheme(name) {
-    if (!settings[name]) {
-      console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
-    }
-    const themeSettings = settings[name] || settings.strudelTheme;
-    // set css variables
-    themeStyle.innerHTML = `:root {
-      ${Object.entries(themeSettings)
-        // important to override fallback
-        .map(([key, value]) => `--${key}: ${value} !important;`)
-        .join('\n')}
-    }`;
-    // tailwind dark mode
-    if (themeSettings.light) {
-      document.documentElement.classList.remove('dark');
-    } else {
-      document.documentElement.classList.add('dark');
-    }
-    resetThemeStyle?.();
-    resetThemeStyle = undefined;
-    if (themeSettings.customStyle) {
-      resetThemeStyle = injectStyle(themeSettings.customStyle);
-    }
-  }
-
-  activateTheme(settingsMap.get().theme);
-  listenKeys(settingsMap, ['theme'], ({ theme }) => activateTheme(theme));
+  initTheme(codemirrorSettings.get().theme);
 
   // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
   const appHeight = () => {
diff --git a/website/src/components/PitchSlider.jsx b/website/src/components/PitchSlider.jsx
index b3c2b920..41b215fb 100644
--- a/website/src/components/PitchSlider.jsx
+++ b/website/src/components/PitchSlider.jsx
@@ -1,5 +1,5 @@
-import useEvent from '@strudel.cycles/react/src/hooks/useEvent.mjs';
-import useFrame from '@strudel.cycles/react/src/hooks/useFrame.mjs';
+import useEvent from '@src/useEvent.mjs';
+import useFrame from '@src/useFrame.mjs';
 import { getAudioContext } from '@strudel.cycles/webaudio';
 import { midi2note } from '@strudel.cycles/core';
 import { useState, useRef, useEffect } from 'react';
diff --git a/packages/react/src/cx.js b/website/src/cx.mjs
similarity index 100%
rename from packages/react/src/cx.js
rename to website/src/cx.mjs
diff --git a/website/src/docs/MicroRepl.jsx b/website/src/docs/MicroRepl.jsx
deleted file mode 100644
index 72561669..00000000
--- a/website/src/docs/MicroRepl.jsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { Icon } from './Icon';
-import { silence, getPunchcardPainter } from '@strudel.cycles/core';
-import { transpiler } from '@strudel.cycles/transpiler';
-import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
-import { StrudelMirror } from '@strudel/codemirror';
-import { prebake } from '@strudel/repl';
-
-export function MicroRepl({
-  code,
-  hideHeader = false,
-  canvasHeight = 100,
-  onTrigger,
-  onPaint,
-  punchcard,
-  punchcardLabels = true,
-}) {
-  const id = useMemo(() => s4(), []);
-  const canvasId = useMemo(() => `canvas-${id}`, [id]);
-  const shouldDraw = !!punchcard;
-
-  const init = useCallback(({ code, shouldDraw }) => {
-    const drawTime = [0, 4];
-    const drawContext = shouldDraw ? document.querySelector('#' + canvasId)?.getContext('2d') : null;
-    let onDraw;
-    if (shouldDraw) {
-      onDraw = (haps, time, frame, painters) => {
-        painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
-        painters?.forEach((painter) => {
-          // ctx time haps drawTime paintOptions
-          painter(drawContext, time, haps, drawTime, { clear: false });
-        });
-      };
-    }
-
-    const editor = new StrudelMirror({
-      id,
-      defaultOutput: webaudioOutput,
-      getTime: () => getAudioContext().currentTime,
-      transpiler,
-      autodraw: !!shouldDraw,
-      root: containerRef.current,
-      initialCode: '// LOADING',
-      pattern: silence,
-      drawTime,
-      onDraw,
-      editPattern: (pat, id) => {
-        if (onTrigger) {
-          pat = pat.onTrigger(onTrigger, false);
-        }
-        if (onPaint) {
-          editor.painters.push(onPaint);
-        } else if (punchcard) {
-          editor.painters.push(getPunchcardPainter({ labels: !!punchcardLabels }));
-        }
-        return pat;
-      },
-      prebake,
-      onUpdateState: (state) => {
-        setReplState({ ...state });
-      },
-    });
-    // init settings
-    editor.setCode(code);
-    editorRef.current = editor;
-  }, []);
-
-  const [replState, setReplState] = useState({});
-  const { started, isDirty, error } = replState;
-  const editorRef = useRef();
-  const containerRef = useRef();
-  const [client, setClient] = useState(false);
-  useEffect(() => {
-    setClient(true);
-    if (!editorRef.current) {
-      setTimeout(() => {
-        init({ code, shouldDraw });
-      });
-    }
-    return () => {
-      editor.clear();
-    };
-  }, []);
-
-  if (!client) {
-    return <pre>{code}</pre>;
-  }
-
-  return (
-    <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight">
-      {!hideHeader && (
-        <div className="flex justify-between bg-lineHighlight">
-          <div className="flex">
-            <button
-              className={cx(
-                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
-                started ? 'animate-pulse' : '',
-              )}
-              onClick={() => editorRef.current?.toggle()}
-            >
-              <Icon type={started ? 'stop' : 'play'} />
-            </button>
-            <button
-              className={cx(
-                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
-                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
-              )}
-              onClick={() => editorRef.current?.evaluate()}
-            >
-              <Icon type="refresh" />
-            </button>
-          </div>
-        </div>
-      )}
-      <div className="overflow-auto relative p-1">
-        <div ref={containerRef}></div>
-        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
-      </div>
-      {shouldDraw && (
-        <canvas
-          id={canvasId}
-          className="w-full pointer-events-none border-t border-lineHighlight"
-          height={canvasHeight}
-          ref={(el) => {
-            if (el && el.width !== el.clientWidth) {
-              el.width = el.clientWidth;
-            }
-          }}
-        ></canvas>
-      )}
-      {/* !!log.length && (
-      <div className="bg-gray-800 rounded-md p-2">
-        {log.map(({ message }, i) => (
-          <div key={i}>{message}</div>
-        ))}
-      </div>
-    ) */}
-    </div>
-  );
-}
-
-function cx(...classes) {
-  // : Array<string | undefined>
-  return classes.filter(Boolean).join(' ');
-}
-
-function s4() {
-  return Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-}
diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx
index 4b37ebad..5e915641 100644
--- a/website/src/docs/MiniRepl.jsx
+++ b/website/src/docs/MiniRepl.jsx
@@ -1,84 +1,156 @@
-import { evalScope, controls, noteToMidi } from '@strudel.cycles/core';
-import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
-import { useEffect, useState } from 'react';
-import { prebake } from '../repl/prebake';
-import { themes, settings } from '../repl/themes.mjs';
-import './MiniRepl.css';
-import { useSettings } from '../settings.mjs';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { Icon } from './Icon';
+import { silence, getPunchcardPainter, noteToMidi } from '@strudel.cycles/core';
+import { transpiler } from '@strudel.cycles/transpiler';
+import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
+import { StrudelMirror } from '@strudel/codemirror';
+// import { prebake } from '@strudel/repl';
+import { prebake } from '../repl/prebake.mjs';
+import { loadModules } from '../repl/util.mjs';
 import Claviature from '@components/Claviature';
+import useClient from '@src/useClient.mjs';
 
-let modules;
+let prebaked, modulesLoading;
 if (typeof window !== 'undefined') {
-  modules = evalScope(
-    controls,
-    import('@strudel.cycles/core'),
-    import('@strudel.cycles/tonal'),
-    import('@strudel.cycles/mini'),
-    import('@strudel.cycles/midi'),
-    import('@strudel.cycles/xen'),
-    import('@strudel.cycles/webaudio'),
-    import('@strudel.cycles/osc'),
-    import('@strudel.cycles/csound'),
-    import('@strudel.cycles/soundfonts'),
-    import('@strudel/hydra'),
-  );
-}
-
-if (typeof window !== 'undefined') {
-  initAudioOnFirstClick();
-  prebake();
+  prebaked = prebake();
+  modulesLoading = loadModules();
 }
 
 export function MiniRepl({
-  tune,
-  drawTime,
+  tune: code,
+  hideHeader = false,
+  canvasHeight = 100,
+  onTrigger,
   punchcard,
   punchcardLabels = true,
-  span = [0, 4],
-  canvasHeight = 100,
-  hideHeader,
   claviature,
   claviatureLabels,
 }) {
-  const [Repl, setRepl] = useState();
-  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed, isActiveLineHighlighted } = useSettings();
+  const id = useMemo(() => s4(), []);
+  const canvasId = useMemo(() => `canvas-${id}`, [id]);
+  const shouldDraw = !!punchcard || !!claviature;
+  const shouldShowCanvas = !!punchcard;
+  const drawTime = punchcard ? [0, 4] : [0, 0];
   const [activeNotes, setActiveNotes] = useState([]);
-  useEffect(() => {
-    // we have to load this package on the client
-    // because codemirror throws an error on the server
-    Promise.all([import('@strudel.cycles/react'), modules])
-      .then(([res]) => setRepl(() => res.MiniRepl))
-      .catch((err) => console.error(err));
-  }, []);
-  return Repl ? (
-    <div className="mb-4 mini-repl">
-      <Repl
-        tune={tune}
-        hideOutsideView={true}
-        drawTime={claviature ? [0, 0] : drawTime}
-        punchcard={punchcard}
-        punchcardLabels={punchcardLabels}
-        span={span}
-        canvasHeight={canvasHeight}
-        theme={themes[theme]}
-        hideHeader={hideHeader}
-        keybindings={keybindings}
-        fontFamily={fontFamily}
-        fontSize={fontSize}
-        isLineNumbersDisplayed={isLineNumbersDisplayed}
-        isActiveLineHighlighted={isActiveLineHighlighted}
-        onPaint={
-          claviature
-            ? (ctx, time, haps, drawTime) => {
-                const active = haps
-                  .map((hap) => hap.value.note)
-                  .filter(Boolean)
-                  .map((n) => (typeof n === 'string' ? noteToMidi(n) : n));
-                setActiveNotes(active);
-              }
-            : undefined
+
+  const init = useCallback(({ code, shouldDraw }) => {
+    const drawContext = shouldDraw ? document.querySelector('#' + canvasId)?.getContext('2d') : null;
+    let onDraw;
+    if (shouldDraw) {
+      onDraw = (haps, time, frame, painters) => {
+        painters.length && drawContext?.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
+        painters?.forEach((painter) => {
+          // ctx time haps drawTime paintOptions
+          painter(drawContext, time, haps, drawTime, { clear: false });
+        });
+      };
+    }
+
+    const editor = new StrudelMirror({
+      id,
+      defaultOutput: webaudioOutput,
+      getTime: () => getAudioContext().currentTime,
+      transpiler,
+      autodraw: !!shouldDraw,
+      root: containerRef.current,
+      initialCode: '// LOADING',
+      pattern: silence,
+      drawTime,
+      onDraw,
+      editPattern: (pat, id) => {
+        if (onTrigger) {
+          pat = pat.onTrigger(onTrigger, false);
         }
-      />
+        if (claviature) {
+          editor?.painters.push((ctx, time, haps, drawTime) => {
+            const active = haps
+              .map((hap) => hap.value.note)
+              .filter(Boolean)
+              .map((n) => (typeof n === 'string' ? noteToMidi(n) : n));
+            setActiveNotes(active);
+          });
+        }
+        if (punchcard) {
+          editor?.painters.push(getPunchcardPainter({ labels: !!punchcardLabels }));
+        }
+        return pat;
+      },
+      prebake: async () => Promise.all([modulesLoading, prebaked]),
+      onUpdateState: (state) => {
+        setReplState({ ...state });
+      },
+    });
+    // init settings
+    editor.setCode(code);
+    editorRef.current = editor;
+  }, []);
+
+  const [replState, setReplState] = useState({});
+  const { started, isDirty, error } = replState;
+  const editorRef = useRef();
+  const containerRef = useRef();
+  const client = useClient();
+
+  if (!client) {
+    return <pre>{code}</pre>;
+  }
+
+  return (
+    <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight">
+      {!hideHeader && (
+        <div className="flex justify-between bg-lineHighlight">
+          <div className="flex">
+            <button
+              className={cx(
+                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+                started ? 'animate-pulse' : '',
+              )}
+              onClick={() => editorRef.current?.toggle()}
+            >
+              <Icon type={started ? 'stop' : 'play'} />
+            </button>
+            <button
+              className={cx(
+                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
+                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
+              )}
+              onClick={() => editorRef.current?.evaluate()}
+            >
+              <Icon type="refresh" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className="overflow-auto relative p-1">
+        <div
+          ref={(el) => {
+            if (!editorRef.current) {
+              containerRef.current = el;
+              init({ code, shouldDraw });
+            }
+          }}
+        ></div>
+        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
+      </div>
+      {shouldShowCanvas && (
+        <canvas
+          id={canvasId}
+          className="w-full pointer-events-none border-t border-lineHighlight"
+          height={canvasHeight}
+          ref={(el) => {
+            if (el && el.width !== el.clientWidth) {
+              el.width = el.clientWidth;
+            }
+          }}
+        ></canvas>
+      )}
+      {/* !!log.length && (
+      <div className="bg-gray-800 rounded-md p-2">
+        {log.map(({ message }, i) => (
+          <div key={i}>{message}</div>
+        ))}
+      </div>
+    ) */}
       {claviature && (
         <Claviature
           options={{
@@ -90,7 +162,16 @@ export function MiniRepl({
         />
       )}
     </div>
-  ) : (
-    <pre>{tune}</pre>
   );
 }
+
+function cx(...classes) {
+  // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 40a1a03f..53a522e8 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import HeadCommon from '../components/HeadCommon.astro';
-import { Repl } from '../repl/Repl.jsx';
+import { Repl } from '../repl/Repl';
 ---
 
 <html lang="en" class="dark">
@@ -9,6 +9,6 @@ import { Repl } from '../repl/Repl.jsx';
     <title>Strudel REPL</title>
   </head>
   <body class="h-app-height bg-background">
-    <Repl client:only="react" />
+    <Repl client:load />
   </body>
 </html>
diff --git a/website/src/pages/next/index.astro b/website/src/pages/next/index.astro
deleted file mode 100644
index 0db75a1d..00000000
--- a/website/src/pages/next/index.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import HeadCommonNext from '../../components/HeadCommonNext.astro';
-import { Repl2 } from '../../repl/Repl2';
----
-
-<html lang="en" class="dark">
-  <head>
-    <HeadCommonNext />
-    <title>Strudel REPL</title>
-  </head>
-  <body class="h-app-height bg-background">
-    <Repl2 client:only="react" />
-  </body>
-</html>
diff --git a/website/src/pages/recipes/recipes-next.mdx b/website/src/pages/recipes/recipes-next.mdx
deleted file mode 100644
index 4230063f..00000000
--- a/website/src/pages/recipes/recipes-next.mdx
+++ /dev/null
@@ -1,312 +0,0 @@
----
-title: Recipes
-layout: ../../layouts/MainLayout.astro
----
-
-import { MicroRepl } from '../../docs/MicroRepl';
-
-# Recipes
-
-This page shows possible ways to achieve common (or not so common) musical goals.
-There are often many ways to do a thing and there is no right or wrong.
-The fun part is that each representation will give you different impulses when improvising.
-
-## Arpeggios
-
-An arpeggio is when the notes of a chord are played in sequence.
-We can either write the notes by hand:
-
-<MicroRepl
-  client:visible
-  code={`note("c eb g c4")
-.clip(2).s("gm_electric_guitar_clean")`}
-  punchcard
-/>
-
-...or use scales:
-
-<MicroRepl
-  client:visible
-  code={`n("0 2 4 7").scale("C:minor")
-.clip(2).s("gm_electric_guitar_clean")`}
-  punchcard
-/>
-
-...or chord symbols:
-
-<MicroRepl
-  client:visible
-  code={`n("0 1 2 3").chord("Cm").mode("above:c3").voicing()
-.clip(2).s("gm_electric_guitar_clean")`}
-  punchcard
-/>
-
-...using off:
-
-<MicroRepl
-  client:visible
-  code={`"0"
-  .off(1/3, add(2))
-  .off(1/2, add(4))
-  .n()
-  .scale("C:minor")
-  .s("gm_electric_guitar_clean")`}
-  punchcard
-/>
-
-## Chopping Breaks
-
-A sample can be looped and chopped like this:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:yaxu/clean-breaks/main')
-s("amen/8").fit().chop(16)`}
-  punchcard
-/>
-
-This fits the break into 8 cycles + chops it in 16 pieces.
-The chops are not audible yet, because we're not doing any manipulation.
-Let's add randmized doubling + reversing:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:yaxu/clean-breaks/main')
-s("amen/8").fit().chop(16).cut(1)
-.sometimesBy(.5, ply(2))
-.sometimesBy(.25, mul(speed(-1)))`}
-  punchcard
-/>
-
-If we want to specify the order of samples, we can replace `chop` with `slice`:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:yaxu/clean-breaks/main')
-s("amen/8").fit()
-  .slice(8, "<0 1 2 3 4*2 5 6 [6 7]>")
-  .cut(1).rarely(ply(2))`}
-  punchcard
-/>
-
-If we use `splice` instead of `slice`, the speed adjusts to the duration of the event:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:yaxu/clean-breaks/main')
-s("amen")
-  .splice(8, "<0 1 2 3 4*2 5 6 [6 7]>")
-  .cut(1).rarely(ply(2))`}
-  punchcard
-/>
-
-Note that we don't need `fit`, because `splice` will do that by itself.
-
-## Filter Envelopes
-
-A minimal filter envelope looks like this:
-
-<MicroRepl
-  client:visible
-  code={`note("g1 bb1 <c2 eb2> d2")
-  .s("sawtooth")
-  .lpf(400).lpa(.2).lpenv(4)
-  .scope()`}
-/>
-
-We can flip the envelope by setting `lpenv` negative + add some resonance `lpq`:
-
-<MicroRepl
-  client:visible
-  code={`note("g1 bb1 <c2 eb2> d2")
-  .s("sawtooth").lpq(8)
-  .lpf(400).lpa(.2).lpenv(-4)
-  .scope()`}
-/>
-
-## Layering Sounds
-
-We can layer sounds by separating them with ",":
-
-<MicroRepl
-  client:visible
-  code={`note("<g1 bb1 d2 f1>")
-.s("sawtooth, square") // <------
-.scope()`}
-/>
-
-We can control the gain of individual sounds like this:
-
-<MicroRepl
-  client:visible
-  code={`note("<g1 bb1 d2 f1>")
-.s("sawtooth, square:0:.5") // <--- "name:number:gain"
-.scope()`}
-/>
-
-For more control over each voice, we can use `layer`:
-
-<MicroRepl
-  client:visible
-  code={`note("<g1 bb1 d2 f1>").layer(
-  x=>x.s("sawtooth").vib(4),
-  x=>x.s("square").add(note(12))
-).scope()`}
-/>
-
-Here, we give the sawtooth a vibrato and the square is moved an octave up.
-With `layer`, you can use any pattern method available on each voice, so sky is the limit..
-
-## Oscillator Detune
-
-We can fatten a sound by adding a detuned version to itself:
-
-<MicroRepl
-  client:visible
-  code={`note("<g1 bb1 d2 f1>")
-.add(note("0,.1")) // <------ chorus
-.s("sawtooth").scope()`}
-  punchcard
-/>
-
-Try out different values, or add another voice!
-
-## Polyrhythms
-
-Here is a simple example of a polyrhythm:
-
-<MicroRepl client:visible code={`s("bd*2,hh*3")`} punchcard />
-
-A polyrhythm is when 2 different tempos happen at the same time.
-
-## Polymeter
-
-This is a polymeter:
-
-<MicroRepl client:visible code={`s("<bd rim>,<hh hh oh>").fast(2)`} punchcard />
-
-A polymeter is when 2 different bar lengths play at the same tempo.
-
-## Phasing
-
-This is a phasing:
-
-<MicroRepl client:visible code={`note("<C D G A Bb D C A G D Bb A>*[6,6.1]").piano()`} punchcard />
-
-Phasing happens when the same sequence plays at slightly different tempos.
-
-## Running through samples
-
-Using `run` with `n`, we can rush through a sample bank:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:Bubobubobubobubo/Dough-Fox/main')
-  n(run(8)).s("ftabla")`}
-  punchcard
-/>
-
-This works great with sample banks that contain similar sounds, like in this case different recordings of a tabla.
-Often times, you'll hear the beginning of the phrase not where the pattern begins.
-In this case, I hear the beginning at the third sample, which can be accounted for with `early`.
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:Bubobubobubobubo/Dough-Fox/main')
-  n(run(8)).s("ftabla").early(2/8)`}
-/>
-
-Let's add some randomness:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:Bubobubobubobubo/Dough-Fox/main')
-n(run(8)).s("ftabla").early(2/8)
-.sometimes(mul(speed(1.5)))`}
-/>
-
-## Tape Warble
-
-We can emulate a pitch warbling effect like this:
-
-<MicroRepl
-  client:visible
-  code={`note("c4 bb f eb")
-.add(note(perlin.range(0,.5))) // <------ warble
-.clip(2).s("gm_electric_guitar_clean")`}
-/>
-
-## Sound Duration
-
-There are a number of ways to change the sound duration. Using clip:
-
-<MicroRepl
-  client:visible
-  code={`note("f ab bb c")
-.clip("<2 1 .5 .25>/2")`}
-/>
-
-The value of clip is relative to the duration of each event.
-We can also create overlaps using release:
-
-<MicroRepl
-  client:visible
-  code={`note("f ab bb c")
-.release("<2 1 .5 .002>/2")`}
-/>
-
-This will smoothly fade out each sound for the given number of seconds.
-We could also make the notes shorter with decay / sustain:
-
-<MicroRepl
-  client:visible
-  code={`note("f ab bb c")
-.decay("<.2 .1 .02>/2").sustain(0)`}
-/>
-
-For now, there is a limitation where decay values that exceed the event duration may cause little cracks, so use higher numbers with caution..
-
-When using samples, we also have `.end` to cut relative to the sample length:
-
-<MicroRepl client:visible code={`s("oh*4").end("<1 .5 .25 .1>")`} />
-
-Compare that to clip:
-
-<MicroRepl client:visible code={`s("oh*4").clip("<1 .5 .25 .1>")`} />
-
-or decay / sustain
-
-<MicroRepl client:visible code={`s("oh*4").decay("<.2 .12 .06 .01>").sustain(0)`} />
-
-## Wavetable Synthesis
-
-You can loop a sample with `loop` / `loopEnd`:
-
-<MicroRepl client:visible code={`note("<c eb g f>").s("bd").loop(1).loopEnd(.05).gain(.2)`} />
-
-This allows us to play the first 5% of the bass drum as a synth!
-To simplify loading wavetables, any sample that starts with `wt_` will be looped automatically:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:bubobubobubobubo/dough-waveforms/main')
-note("c eb g bb").s("wt_dbass").clip(2)`}
-/>
-
-Running through different wavetables can also give interesting variations:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:bubobubobubobubo/dough-waveforms/main')
-note("c2*8").s("wt_dbass").n(run(8))`}
-/>
-
-...adding a filter envelope + reverb:
-
-<MicroRepl
-  client:visible
-  code={`await samples('github:bubobubobubobubo/dough-waveforms/main')
-note("c2*8").s("wt_dbass").n(run(8))
-.lpf(perlin.range(200,2000).slow(8))
-.lpenv(-3).lpa(.1).room(.5)`}
-/>
diff --git a/website/src/pages/technical-manual/patterns.mdx b/website/src/pages/technical-manual/patterns.mdx
index 45664ad7..49ede526 100644
--- a/website/src/pages/technical-manual/patterns.mdx
+++ b/website/src/pages/technical-manual/patterns.mdx
@@ -14,7 +14,7 @@ Example:
 
 <MiniRepl
   client:idle
-  tune={`const pattern = sequence(c3, [e3, g3])
+  tune={`const pattern = sequence("c3", ["e3", "g3"])
 const events = pattern.queryArc(0, 1)
 console.log(events.map((e) => e.show()))
 silence`}
diff --git a/website/src/pages/workshop/first-notes.mdx b/website/src/pages/workshop/first-notes.mdx
index 330dd072..ab11ed90 100644
--- a/website/src/pages/workshop/first-notes.mdx
+++ b/website/src/pages/workshop/first-notes.mdx
@@ -83,7 +83,6 @@ Can you find melodies that are actual words? Hint: ☕ 😉 ⚪
   client:visible
   tune={`note("c2 e3 g4 b5").sound("piano")`}
   claviature
-  claviatureLabels={Object.fromEntries(['c1', 'c2', 'c3', 'c4', 'c5'].map((n) => [n, n]))}
   claviatureLabels={Object.fromEntries(
     Array(49)
       .fill()
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 2592b917..774d0142 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -4,8 +4,7 @@ import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
-import { cx } from '@strudel.cycles/react';
-import React, { useContext } from 'react';
+import cx from '@src/cx.mjs';
 import { useSettings, setIsZen } from '../settings.mjs';
 // import { ReplContext } from './Repl';
 import './Repl.css';
@@ -24,7 +23,7 @@ export function Header({ context }) {
     handleShuffle,
     handleShare,
   } = context;
-  const isEmbedded = embedded || window.location !== window.parent.location;
+  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
   const { isZen } = useSettings();
 
   return (
diff --git a/website/src/repl/Loader.jsx b/website/src/repl/Loader.jsx
index 0c629402..a942ec2d 100644
--- a/website/src/repl/Loader.jsx
+++ b/website/src/repl/Loader.jsx
@@ -1,5 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
+import cx from '@src/cx.mjs';
 
 function Loader({ active }) {
   return (
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 65cc3473..c5f69c8e 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -1,15 +1,15 @@
 /*
-App.js - <short description TODO>
+Repl.jsx - <short description TODO>
 Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/App.js>
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
-import { cleanupDraw, cleanupUi, code2hash, getDrawContext, logger } from '@strudel.cycles/core';
-import { CodeMirror, cx, flash, useHighlighting, useKeydown, useStrudel } from '@strudel.cycles/react';
-import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
-import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio';
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { code2hash, getDrawContext, logger, silence } from '@strudel.cycles/core';
+import cx from '@src/cx.mjs';
+import { transpiler } from '@strudel.cycles/transpiler';
+import { getAudioContext, initAudioOnFirstClick, webaudioOutput } from '@strudel.cycles/webaudio';
+import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
+import { createContext, useCallback, useEffect, useRef, useState } from 'react';
 import {
   initUserCode,
   setActivePattern,
@@ -22,213 +22,149 @@ import { Header } from './Header';
 import Loader from './Loader';
 import './Repl.css';
 import { Panel } from './panel/Panel';
+import { useStore } from '@nanostores/react';
 import { prebake } from './prebake.mjs';
-import { themes } from './themes.mjs';
 import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
+import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+import './Repl.css';
+
+const { code: randomTune, name } = getRandomTune();
+export const ReplContext = createContext(null);
 
 const { latestCode } = settingsMap.get();
 
-initAudioOnFirstClick();
-
-const modulesLoading = loadModules();
-const presets = prebake();
-
-let drawContext, clearCanvas;
+let modulesLoading, presets, drawContext, clearCanvas, isIframe;
 if (typeof window !== 'undefined') {
+  initAudioOnFirstClick();
+  modulesLoading = loadModules();
+  presets = prebake();
   drawContext = getDrawContext();
   clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
+  isIframe = window.location !== window.parent.location;
 }
 
-const getTime = () => getAudioContext().currentTime;
-
-const { code: randomTune, name } = getRandomTune();
-
-export const ReplContext = createContext(null);
-
 export function Repl({ embedded = false }) {
-  const isEmbedded = embedded || window.location !== window.parent.location;
-  const [view, setView] = useState(); // codemirror view
-  const [pending, setPending] = useState(true);
-  const {
-    theme,
-    keybindings,
-    fontSize,
-    fontFamily,
-    isLineNumbersDisplayed,
-    isActiveLineHighlighted,
-    isAutoCompletionEnabled,
-    isTooltipEnabled,
-    isLineWrappingEnabled,
-    panelPosition,
-    isZen,
-  } = useSettings();
+  const isEmbedded = embedded || isIframe;
+  const { panelPosition, isZen } = useSettings();
 
-  const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
-  const { setWidgets } = useWidgets(view);
-  const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
-    useStrudel({
-      initialCode: '// LOADING...',
+  const init = useCallback(() => {
+    const drawTime = [-2, 2];
+    const drawContext = getDrawContext();
+    const onDraw = (haps, time, frame, painters) => {
+      painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
+      painters?.forEach((painter) => {
+        // ctx time haps drawTime paintOptions
+        painter(drawContext, time, haps, drawTime, { clear: false });
+      });
+    };
+    const editor = new StrudelMirror({
       defaultOutput: webaudioOutput,
-      getTime,
-      beforeEval: async () => {
-        setPending(true);
-        await modulesLoading;
-        cleanupUi();
-        cleanupDraw();
+      getTime: () => getAudioContext().currentTime,
+      transpiler,
+      autodraw: false,
+      root: containerRef.current,
+      initialCode: '// LOADING',
+      pattern: silence,
+      drawTime,
+      onDraw,
+      prebake: async () => Promise.all([modulesLoading, presets]),
+      onUpdateState: (state) => {
+        setReplState({ ...state });
       },
-      afterEval: ({ code, meta }) => {
+      afterEval: ({ code }) => {
         updateUserCode(code);
-        setMiniLocations(meta.miniLocations);
-        setWidgets(meta.widgets);
-        setPending(false);
+        // setPending(false);
         setLatestCode(code);
         window.location.hash = '#' + code2hash(code);
       },
-      onEvalError: (err) => {
-        setPending(false);
-      },
-      onToggle: (play) => {
-        if (!play) {
-          cleanupDraw(false);
-          window.postMessage('strudel-stop');
-        } else {
-          window.postMessage('strudel-start');
-        }
-      },
-      drawContext,
-      // drawTime: [0, 6],
-      paintOptions,
+      bgFill: false,
     });
-
-  // init code
-  useEffect(() => {
+    // init settings
     initCode().then((decoded) => {
       let msg;
       if (decoded) {
-        setCode(decoded);
+        editor.setCode(decoded);
         initUserCode(decoded);
         msg = `I have loaded the code from the URL.`;
       } else if (latestCode) {
-        setCode(latestCode);
+        editor.setCode(latestCode);
         msg = `Your last session has been loaded!`;
-      } /*  if(randomTune) */ else {
-        setCode(randomTune);
+      } else {
+        editor.setCode(randomTune);
         msg = `A random code snippet named "${name}" has been loaded!`;
       }
-      //registers samples that have been saved to the index DB
       logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
-      setPending(false);
+      // setPending(false);
     });
+
+    editorRef.current = editor;
   }, []);
 
-  // keyboard shortcuts
-  useKeydown(
-    useCallback(
-      async (e) => {
-        if (e.ctrlKey || e.altKey) {
-          if (e.code === 'Enter') {
-            if (getAudioContext().state !== 'running') {
-              alert('please click play to initialize the audio. you can use shortcuts after that!');
-              return;
-            }
-            e.preventDefault();
-            flash(view);
-            await activateCode();
-          } else if (e.key === '.' || e.code === 'Period') {
-            stop();
-            e.preventDefault();
-          }
-        }
-      },
-      [activateCode, stop, view],
-    ),
-  );
+  const [replState, setReplState] = useState({});
+  const { started, isDirty, error, activeCode, pending } = replState;
+  const editorRef = useRef();
+  const containerRef = useRef();
 
-  // highlighting
-  const { setMiniLocations } = useHighlighting({
-    view,
-    pattern,
-    active: started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.now(),
-  });
+  // this can be simplified once SettingsTab has been refactored to change codemirrorSettings directly!
+  // this will be the case when the main repl is being replaced
+  const _settings = useStore(settingsMap, { keys: Object.keys(defaultSettings) });
+  useEffect(() => {
+    let editorSettings = {};
+    Object.keys(defaultSettings).forEach((key) => {
+      if (_settings.hasOwnProperty(key)) {
+        editorSettings[key] = _settings[key];
+      }
+    });
+    editorRef.current?.updateSettings(editorSettings);
+  }, [_settings]);
 
   //
   // UI Actions
   //
 
-  const handleChangeCode = useCallback(
-    (c) => {
-      setCode(c);
-      // started && logger('[edit] code changed. hit ctrl+enter to update');
-    },
-    [started],
-  );
-  const handleSelectionChange = useCallback((selection) => {
-    // TODO: scroll to selected function in reference
-    // console.log('selectino change', selection.ranges[0].from);
-  }, []);
-
-  const handleTogglePlay = async () => {
-    await getAudioContext().resume(); // fixes no sound in ios webkit
-    if (!started) {
-      logger('[repl] started. tip: you can also start by pressing ctrl+enter', 'highlight');
-      activateCode();
-    } else {
-      logger('[repl] stopped. tip: you can also stop by pressing ctrl+dot', 'highlight');
-      stop();
-    }
-  };
+  const handleTogglePlay = async () => editorRef.current?.toggle();
   const handleUpdate = async (newCode, reset = false) => {
     if (reset) {
       clearCanvas();
       resetLoadedSounds();
-      scheduler.setCps(1);
+      editorRef.current.repl.setCps(1);
       await prebake(); // declare default samples
     }
-    (newCode || isDirty) && activateCode(newCode);
+    if (newCode || isDirty) {
+      editorRef.current.setCode(newCode);
+      editorRef.current.repl.evaluate(newCode);
+    }
     logger('[repl] code updated!');
   };
-
   const handleShuffle = async () => {
+    // window.postMessage('strudel-shuffle');
     const { code, name } = getRandomTune();
     logger(`[repl] ✨ loading random tune "${name}"`);
     setActivePattern(name);
     clearCanvas();
     resetLoadedSounds();
-    scheduler.setCps(1);
+    editorRef.current.repl.setCps(1);
     await prebake(); // declare default samples
-    await evaluate(code, false);
+    editorRef.current.setCode(code);
+    editorRef.current.repl.evaluate(code);
   };
 
-  const handleShare = async () => shareCode(activeCode || code);
+  const handleShare = async () => shareCode(activeCode);
   const context = {
-    scheduler,
     embedded,
     started,
     pending,
     isDirty,
     activeCode,
-    handleChangeCode,
     handleTogglePlay,
     handleUpdate,
     handleShuffle,
     handleShare,
   };
-  const currentTheme = useMemo(() => themes[theme] || themes.strudelTheme, [theme]);
-  const handleViewChanged = useCallback((v) => {
-    setView(v);
-  }, []);
 
   return (
-    // bg-gradient-to-t from-blue-900 to-slate-900
-    // bg-gradient-to-t from-green-900 to-slate-900
     <ReplContext.Provider value={context}>
-      <div
-        className={cx(
-          'h-full flex flex-col relative',
-          // overflow-hidden
-        )}
-      >
+      <div className={cx('h-full flex flex-col relative')}>
         <Loader active={pending} />
         <Header context={context} />
         {isEmbedded && !started && (
@@ -241,23 +177,16 @@ export function Repl({ embedded = false }) {
           </button>
         )}
         <div className="grow flex relative overflow-hidden">
-          <section className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')} id="code">
-            <CodeMirror
-              theme={currentTheme}
-              value={code}
-              keybindings={keybindings}
-              isLineNumbersDisplayed={isLineNumbersDisplayed}
-              isActiveLineHighlighted={isActiveLineHighlighted}
-              isAutoCompletionEnabled={isAutoCompletionEnabled}
-              isTooltipEnabled={isTooltipEnabled}
-              isLineWrappingEnabled={isLineWrappingEnabled}
-              fontSize={fontSize}
-              fontFamily={fontFamily}
-              onChange={handleChangeCode}
-              onViewChanged={handleViewChanged}
-              onSelectionChange={handleSelectionChange}
-            />
-          </section>
+          <section
+            className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')}
+            id="code"
+            ref={(el) => {
+              containerRef.current = el;
+              if (!editorRef.current) {
+                init();
+              }
+            }}
+          ></section>
           {panelPosition === 'right' && !isEmbedded && <Panel context={context} />}
         </div>
         {error && (
diff --git a/website/src/repl/Repl2.jsx b/website/src/repl/Repl2.jsx
deleted file mode 100644
index 641d2a91..00000000
--- a/website/src/repl/Repl2.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-/*
-App.js - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/App.js>
-This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { code2hash, getDrawContext, logger, silence } from '@strudel.cycles/core';
-import { cx } from '@strudel.cycles/react';
-import { transpiler } from '@strudel.cycles/transpiler';
-import { getAudioContext, initAudioOnFirstClick, webaudioOutput } from '@strudel.cycles/webaudio';
-import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
-/* import { writeText } from '@tauri-apps/api/clipboard';
-import { nanoid } from 'nanoid'; */
-import { createContext, useCallback, useEffect, useRef, useState } from 'react';
-import {
-  initUserCode,
-  setActivePattern,
-  setLatestCode,
-  settingsMap,
-  updateUserCode,
-  useSettings,
-} from '../settings.mjs';
-import { Header } from './Header';
-import Loader from './Loader';
-import './Repl.css';
-import { Panel } from './panel/Panel';
-// import { prebake } from '@strudel/repl';
-import { useStore } from '@nanostores/react';
-import { prebake /* , resetSounds */ } from './prebake.mjs';
-import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
-import './Repl.css';
-
-const { code: randomTune, name } = getRandomTune();
-export const ReplContext = createContext(null);
-
-const { latestCode } = settingsMap.get();
-
-initAudioOnFirstClick();
-
-const modulesLoading = loadModules();
-const presets = prebake();
-
-let drawContext, clearCanvas;
-if (typeof window !== 'undefined') {
-  drawContext = getDrawContext();
-  clearCanvas = () => drawContext.clearRect(0, 0, drawContext.canvas.height, drawContext.canvas.width);
-}
-
-// const getTime = () => getAudioContext().currentTime;
-
-export function Repl2({ embedded = false }) {
-  //const isEmbedded = embedded || window.location !== window.parent.location;
-  const isEmbedded = false;
-  const { panelPosition, isZen } = useSettings();
-  /* const replState = useStore($replstate);
-  const isDirty = useStore($repldirty); */
-  const shouldDraw = true;
-
-  const init = useCallback(({ shouldDraw }) => {
-    // TODO: find way to make spiral & punchcard work (if there's any)
-    // upping the 2nd value leads to slow eval times
-    // because Drawer.invalidate might query alot at one time
-    const drawTime = [0, 0];
-    const drawContext = shouldDraw ? getDrawContext() : null;
-    let onDraw;
-    if (shouldDraw) {
-      onDraw = (haps, time, frame, painters) => {
-        painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
-        painters?.forEach((painter) => {
-          // ctx time haps drawTime paintOptions
-          painter(drawContext, time, haps, drawTime, { clear: false });
-        });
-      };
-    }
-    const editor = new StrudelMirror({
-      defaultOutput: webaudioOutput,
-      getTime: () => getAudioContext().currentTime,
-      transpiler,
-      autodraw: false,
-      root: containerRef.current,
-      initialCode: '// LOADING',
-      pattern: silence,
-      drawTime,
-      onDraw,
-      prebake: async () => Promise.all([modulesLoading, presets]),
-      onUpdateState: (state) => {
-        setReplState({ ...state });
-      },
-      afterEval: ({ code }) => {
-        updateUserCode(code);
-        // setPending(false);
-        setLatestCode(code);
-        window.location.hash = '#' + code2hash(code);
-      },
-      bgFill: false,
-    });
-    // init settings
-    initCode().then((decoded) => {
-      let msg;
-      if (decoded) {
-        editor.setCode(decoded);
-        initUserCode(decoded);
-        msg = `I have loaded the code from the URL.`;
-      } else if (latestCode) {
-        editor.setCode(latestCode);
-        msg = `Your last session has been loaded!`;
-      } /*  if(randomTune) */ else {
-        editor.setCode(randomTune);
-        msg = `A random code snippet named "${name}" has been loaded!`;
-      }
-      logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
-      // setPending(false);
-    });
-
-    editorRef.current = editor;
-  }, []);
-
-  const [replState, setReplState] = useState({});
-  const { started, isDirty, error, activeCode } = replState;
-  const editorRef = useRef();
-  const containerRef = useRef();
-  const [client, setClient] = useState(false);
-  useEffect(() => {
-    setClient(true);
-    if (!editorRef.current) {
-      setTimeout(() => {
-        init({ shouldDraw });
-      });
-    }
-    return () => {
-      editorRef.current?.clear();
-      delete editorRef.current;
-    };
-  }, []);
-
-  // this can be simplified once SettingsTab has been refactored to change codemirrorSettings directly!
-  // this will be the case when the main repl is being replaced
-  const _settings = useStore(settingsMap, { keys: Object.keys(defaultSettings) });
-  useEffect(() => {
-    let editorSettings = {};
-    Object.keys(defaultSettings).forEach((key) => {
-      if (_settings.hasOwnProperty(key)) {
-        editorSettings[key] = _settings[key];
-      }
-    });
-    editorRef.current?.updateSettings(editorSettings);
-  }, [_settings]);
-
-  //
-  // UI Actions
-  //
-
-  const handleTogglePlay = async () => editorRef.current?.toggle();
-  const handleUpdate = async (newCode, reset = false) => {
-    if (reset) {
-      clearCanvas();
-      resetLoadedSounds();
-      editorRef.current.repl.setCps(1);
-      await prebake(); // declare default samples
-    }
-    if (newCode || isDirty) {
-      editorRef.current.setCode(newCode);
-      editorRef.current.repl.evaluate(newCode);
-    }
-    logger('[repl] code updated!');
-  };
-  const handleShuffle = async () => {
-    // window.postMessage('strudel-shuffle');
-    const { code, name } = getRandomTune();
-    logger(`[repl] ✨ loading random tune "${name}"`);
-    setActivePattern(name);
-    clearCanvas();
-    resetLoadedSounds();
-    editorRef.current.repl.setCps(1);
-    await prebake(); // declare default samples
-    editorRef.current.setCode(code);
-    editorRef.current.repl.evaluate(code);
-  };
-
-  const handleShare = async () => shareCode(activeCode);
-  const pending = false;
-  //const error = undefined;
-  // const { started, activeCode } = replState;
-
-  const context = {
-    // scheduler,
-    embedded,
-    started,
-    pending,
-    isDirty,
-    activeCode,
-    handleTogglePlay,
-    handleUpdate,
-    handleShuffle,
-    handleShare,
-  };
-
-  return (
-    // bg-gradient-to-t from-blue-900 to-slate-900
-    // bg-gradient-to-t from-green-900 to-slate-900
-    <ReplContext.Provider value={context}>
-      <div
-        className={cx(
-          'h-full flex flex-col relative',
-          // overflow-hidden
-        )}
-      >
-        <Loader active={pending} />
-        <Header context={context} />
-        {/* isEmbedded && !started && (
-          <button
-            onClick={() => handleTogglePlay()}
-            className="text-white text-2xl fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[1000] m-auto p-4 bg-black rounded-md flex items-center space-x-2"
-          >
-            <PlayCircleIcon className="w-6 h-6" />
-            <span>play</span>
-          </button>
-        ) */}
-        <div className="grow flex relative overflow-hidden">
-          <section
-            className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')}
-            id="code"
-            ref={containerRef}
-          ></section>
-          {panelPosition === 'right' && !isEmbedded && <Panel context={context} />}
-        </div>
-        {error && (
-          <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
-        )}
-        {panelPosition === 'bottom' && !isEmbedded && <Panel context={context} />}
-      </div>
-    </ReplContext.Provider>
-  );
-}
diff --git a/website/src/repl/idbutils.mjs b/website/src/repl/idbutils.mjs
index 18e15d20..7613b767 100644
--- a/website/src/repl/idbutils.mjs
+++ b/website/src/repl/idbutils.mjs
@@ -77,6 +77,9 @@ async function bufferToDataUrl(buf) {
 //open db and initialize it if necessary
 const openDB = (config, onOpened) => {
   const { dbName, version, table, columns } = config;
+  if (typeof window === 'undefined') {
+    return;
+  }
   if (!('indexedDB' in window)) {
     console.log('IndexedDB is not supported.');
     return;
diff --git a/website/src/repl/panel/ConsoleTab.jsx b/website/src/repl/panel/ConsoleTab.jsx
index 4472fd4c..b5681ab1 100644
--- a/website/src/repl/panel/ConsoleTab.jsx
+++ b/website/src/repl/panel/ConsoleTab.jsx
@@ -1,5 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
+import cx from '@src/cx.mjs';
 
 export function ConsoleTab({ log }) {
   return (
diff --git a/website/src/repl/panel/Forms.jsx b/website/src/repl/panel/Forms.jsx
index 49d0e913..c5b22002 100644
--- a/website/src/repl/panel/Forms.jsx
+++ b/website/src/repl/panel/Forms.jsx
@@ -1,5 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
+import cx from '@src/cx.mjs';
 
 export function ButtonGroup({ value, onChange, items }) {
   return (
diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
index b815770c..eac31720 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -1,8 +1,9 @@
 import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
-import { cx, useEvent } from '@strudel.cycles/react';
+import useEvent from '@src/useEvent.mjs';
+import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
 import { setActiveFooter, useSettings } from '../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
@@ -11,21 +12,25 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
+import useClient from '@src/useClient.mjs';
 
-const TAURI = window.__TAURI__;
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
 export function Panel({ context }) {
   const footerContent = useRef();
   const [log, setLog] = useState([]);
   const { activeFooter, isZen, panelPosition } = useSettings();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {
       // scroll log box to bottom when log changes
       footerContent.current.scrollTop = footerContent.current?.scrollHeight;
     }
   }, [log, activeFooter]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!footerContent.current) {
     } else if (activeFooter === 'console') {
       footerContent.current.scrollTop = footerContent.current?.scrollHeight;
@@ -79,6 +84,10 @@ export function Panel({ context }) {
     right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
     bottom: cx('relative', isActive ? 'h-[360px] min-h-[360px]' : ''),
   };
+  const client = useClient();
+  if (!client) {
+    return null;
+  }
   return (
     <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
       <div className="flex justify-between px-2">
@@ -105,7 +114,7 @@ export function Panel({ context }) {
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}
-            {activeFooter === 'settings' && <SettingsTab scheduler={context.scheduler} />}
+            {activeFooter === 'settings' && <SettingsTab />}
             {activeFooter === 'files' && <FilesTab />}
           </div>
         </div>
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
index 3efab8f2..9297b0e4 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
-import { themes } from '../themes.mjs';
+import { themes } from '@strudel/codemirror';
 import { ButtonGroup } from './Forms.jsx';
 
 function Checkbox({ label, value, onChange }) {
@@ -82,6 +81,7 @@ export function SettingsTab() {
     isActiveLineHighlighted,
     isAutoCompletionEnabled,
     isTooltipEnabled,
+    isFlashEnabled,
     isLineWrappingEnabled,
     fontSize,
     fontFamily,
@@ -90,24 +90,6 @@ export function SettingsTab() {
 
   return (
     <div className="text-foreground p-4 space-y-4">
-      {/* <FormItem label="Tempo">
-        <div className="space-x-4">
-          <button
-            onClick={() => {
-              scheduler.setCps(scheduler.cps - 0.1);
-            }}
-          >
-            slower
-          </button>
-          <button
-            onClick={() => {
-              scheduler.setCps(scheduler.cps + 0.1);
-            }}
-          >
-            faster
-          </button>
-        </div>
-      </FormItem> */}
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>
@@ -174,6 +156,11 @@ export function SettingsTab() {
           onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
           value={isLineWrappingEnabled}
         />
+        <Checkbox
+          label="Enable flashing on evaluation"
+          onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
+          value={isFlashEnabled}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
index 976361d0..a3639dfb 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -1,5 +1,4 @@
-import { useEvent } from '@strudel.cycles/react';
-// import { cx } from '@strudel.cycles/react';
+import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel.cycles/webaudio';
 import React, { useMemo, useRef } from 'react';
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
index feb0a583..bda6c3f5 100644
--- a/website/src/repl/panel/WelcomeTab.jsx
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -1,6 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
-import * as tunes from '../tunes.mjs';
+import cx from '@src/cx.mjs';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
diff --git a/website/src/repl/themes.mjs b/website/src/repl/themes.mjs
deleted file mode 100644
index bee95fd1..00000000
--- a/website/src/repl/themes.mjs
+++ /dev/null
@@ -1,482 +0,0 @@
-import {
-  abcdef,
-  androidstudio,
-  atomone,
-  aura,
-  bespin,
-  darcula,
-  dracula,
-  duotoneDark,
-  eclipse,
-  githubDark,
-  gruvboxDark,
-  materialDark,
-  nord,
-  okaidia,
-  solarizedDark,
-  sublime,
-  tokyoNight,
-  tokyoNightStorm,
-  vscodeDark,
-  xcodeDark,
-  bbedit,
-  duotoneLight,
-  githubLight,
-  gruvboxLight,
-  materialLight,
-  noctisLilac,
-  solarizedLight,
-  tokyoNightDay,
-  xcodeLight,
-} from '@uiw/codemirror-themes-all';
-
-import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
-import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
-import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
-import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
-import teletext, { settings as teletextSettings } from '@strudel.cycles/react/src/themes/teletext';
-import algoboy, { settings as algoboySettings } from '@strudel.cycles/react/src/themes/algoboy';
-import terminal, { settings as terminalSettings } from '@strudel.cycles/react/src/themes/terminal';
-
-export const themes = {
-  strudelTheme,
-  bluescreen,
-  blackscreen,
-  whitescreen,
-  teletext,
-  algoboy,
-  terminal,
-  abcdef,
-  androidstudio,
-  atomone,
-  aura,
-  bespin,
-  darcula,
-  dracula,
-  duotoneDark,
-  eclipse,
-  githubDark,
-  gruvboxDark,
-  materialDark,
-  nord,
-  okaidia,
-  solarizedDark,
-  sublime,
-  tokyoNight,
-  tokyoNightStorm,
-  vscodeDark,
-  xcodeDark,
-  bbedit,
-  duotoneLight,
-  githubLight,
-  gruvboxLight,
-  materialLight,
-  noctisLilac,
-  solarizedLight,
-  tokyoNightDay,
-  xcodeLight,
-};
-
-// lineBackground is background with 50% opacity, to make sure the selection below is visible
-
-export const settings = {
-  strudelTheme: {
-    background: '#222',
-    lineBackground: '#22222299',
-    foreground: '#fff',
-    // foreground: '#75baff',
-    caret: '#ffcc00',
-    selection: 'rgba(128, 203, 196, 0.5)',
-    selectionMatch: '#036dd626',
-    // lineHighlight: '#8a91991a', // original
-    lineHighlight: '#00000050',
-    gutterBackground: 'transparent',
-    // gutterForeground: '#8a919966',
-    gutterForeground: '#8a919966',
-  },
-  bluescreen: bluescreenSettings,
-  blackscreen: blackscreenSettings,
-  whitescreen: whitescreenSettings,
-  teletext: teletextSettings,
-  algoboy: algoboySettings,
-  terminal: terminalSettings,
-  abcdef: {
-    background: '#0f0f0f',
-    lineBackground: '#0f0f0f99',
-    foreground: '#defdef',
-    caret: '#00FF00',
-    selection: '#515151',
-    selectionMatch: '#515151',
-    gutterBackground: '#555',
-    gutterForeground: '#FFFFFF',
-    lineHighlight: '#314151',
-  },
-  androidstudio: {
-    background: '#282b2e',
-    lineBackground: '#282b2e99',
-    foreground: '#a9b7c6',
-    caret: '#00FF00',
-    selection: '#343739',
-    selectionMatch: '#343739',
-    lineHighlight: '#343739',
-  },
-  atomone: {
-    background: '#272C35',
-    lineBackground: '#272C3599',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#ffffff30',
-    selectionMatch: '#2B323D',
-    gutterBackground: '#272C35',
-    gutterForeground: '#465063',
-    gutterBorder: 'transparent',
-    lineHighlight: '#2B323D',
-  },
-  aura: {
-    background: '#21202e',
-    lineBackground: '#21202e99',
-    foreground: '#edecee',
-    caret: '#a277ff',
-    selection: '#3d375e7f',
-    selectionMatch: '#3d375e7f',
-    gutterBackground: '#21202e',
-    gutterForeground: '#edecee',
-    gutterBorder: 'transparent',
-    lineHighlight: '#a394f033',
-  },
-  bbedit: {
-    light: true,
-    background: '#FFFFFF',
-    lineBackground: '#FFFFFF99',
-    foreground: '#000000',
-    caret: '#FBAC52',
-    selection: '#FFD420',
-    selectionMatch: '#FFD420',
-    gutterBackground: '#f5f5f5',
-    gutterForeground: '#4D4D4C',
-    gutterBorder: 'transparent',
-    lineHighlight: '#00000012',
-  },
-  bespin: {
-    background: '#28211c',
-    lineBackground: '#28211c99',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#36312e',
-    selectionMatch: '#4f382b',
-    gutterBackground: '#28211c',
-    gutterForeground: '#666666',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  darcula: {
-    background: '#2B2B2B',
-    lineBackground: '#2B2B2B99',
-    foreground: '#f8f8f2',
-    caret: '#FFFFFF',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: 'rgba(255, 255, 255, 0.1)',
-    gutterForeground: '#999',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  dracula: {
-    background: '#282a36',
-    lineBackground: '#282a3699',
-    foreground: '#f8f8f2',
-    caret: '#f8f8f0',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  duotoneLight: {
-    light: true,
-    background: '#faf8f5',
-    lineBackground: '#faf8f599',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    gutterBorder: 'transparent',
-    lineHighlight: '#EFEFEF',
-  },
-  duotoneDark: {
-    background: '#2a2734',
-    lineBackground: '#2a273499',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280',
-  },
-  eclipse: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#000',
-    caret: '#FFFFFF',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#f7f7f7',
-    gutterForeground: '#999',
-    lineHighlight: '#e8f2ff',
-    gutterBorder: 'transparent',
-  },
-  githubLight: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#24292e',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#6e7781',
-  },
-  githubDark: {
-    background: '#0d1117',
-    lineBackground: '#0d111799',
-    foreground: '#c9d1d9',
-    caret: '#c9d1d9',
-    selection: '#003d73',
-    selectionMatch: '#003d73',
-    lineHighlight: '#36334280',
-  },
-  gruvboxDark: {
-    background: '#282828',
-    lineBackground: '#28282899',
-    foreground: '#ebdbb2',
-    caret: '#ebdbb2',
-    selection: '#bdae93',
-    selectionMatch: '#bdae93',
-    lineHighlight: '#3c3836',
-    gutterBackground: '#282828',
-    gutterForeground: '#7c6f64',
-  },
-  gruvboxLight: {
-    light: true,
-    background: '#fbf1c7',
-    lineBackground: '#fbf1c799',
-    foreground: '#3c3836',
-    caret: '#af3a03',
-    selection: '#ebdbb2',
-    selectionMatch: '#bdae93',
-    lineHighlight: '#ebdbb2',
-    gutterBackground: '#ebdbb2',
-    gutterForeground: '#665c54',
-    gutterBorder: 'transparent',
-  },
-  materialDark: {
-    background: '#2e3235',
-    lineBackground: '#2e323599',
-    foreground: '#bdbdbd',
-    caret: '#a0a4ae',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#2e3235',
-    gutterForeground: '#999',
-    gutterActiveForeground: '#4f5b66',
-    lineHighlight: '#545b61',
-  },
-  materialLight: {
-    light: true,
-    background: '#FAFAFA',
-    lineBackground: '#FAFAFA99',
-    foreground: '#90A4AE',
-    caret: '#272727',
-    selection: '#80CBC440',
-    selectionMatch: '#FAFAFA',
-    gutterBackground: '#FAFAFA',
-    gutterForeground: '#90A4AE',
-    gutterBorder: 'transparent',
-    lineHighlight: '#CCD7DA50',
-  },
-  noctisLilac: {
-    light: true,
-    background: '#f2f1f8',
-    lineBackground: '#f2f1f899',
-    foreground: '#0c006b',
-    caret: '#5c49e9',
-    selection: '#d5d1f2',
-    selectionMatch: '#d5d1f2',
-    gutterBackground: '#f2f1f8',
-    gutterForeground: '#0c006b70',
-    lineHighlight: '#e1def3',
-  },
-  nord: {
-    background: '#2e3440',
-    lineBackground: '#2e344099',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#3b4252',
-    selectionMatch: '#e5e9f0',
-    gutterBackground: '#2e3440',
-    gutterForeground: '#4c566a',
-    gutterActiveForeground: '#d8dee9',
-    lineHighlight: '#4c566a',
-  },
-  okaidia: {
-    background: '#272822',
-    lineBackground: '#27282299',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#49483E',
-    selectionMatch: '#49483E',
-    gutterBackground: '#272822',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  solarizedLight: {
-    light: true,
-    background: '#fdf6e3',
-    lineBackground: '#fdf6e399',
-    foreground: '#657b83',
-    caret: '#586e75',
-    selection: '#dfd9c8',
-    selectionMatch: '#dfd9c8',
-    gutterBackground: '#00000010',
-    gutterForeground: '#657b83',
-    lineHighlight: '#dfd9c8',
-  },
-  solarizedDark: {
-    background: '#002b36',
-    lineBackground: '#002b3699',
-    foreground: '#93a1a1',
-    caret: '#839496',
-    selection: '#173541',
-    selectionMatch: '#aafe661a',
-    gutterBackground: '#00252f',
-    gutterForeground: '#839496',
-    lineHighlight: '#173541',
-  },
-  sublime: {
-    background: '#303841',
-    lineBackground: '#30384199',
-    foreground: '#FFFFFF',
-    caret: '#FBAC52',
-    selection: '#4C5964',
-    selectionMatch: '#3A546E',
-    gutterBackground: '#303841',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  tokyoNightDay: {
-    light: true,
-    background: '#e1e2e7',
-    lineBackground: '#e1e2e799',
-    foreground: '#3760bf',
-    caret: '#3760bf',
-    selection: '#99a7df',
-    selectionMatch: '#99a7df',
-    gutterBackground: '#e1e2e7',
-    gutterForeground: '#3760bf',
-    gutterBorder: 'transparent',
-    lineHighlight: '#5f5faf11',
-  },
-  tokyoNightStorm: {
-    background: '#24283b',
-    lineBackground: '#24283b99',
-    foreground: '#7982a9',
-    caret: '#c0caf5',
-    selection: '#6f7bb630',
-    selectionMatch: '#1f2335',
-    gutterBackground: '#24283b',
-    gutterForeground: '#7982a9',
-    gutterBorder: 'transparent',
-    lineHighlight: '#292e42',
-  },
-  tokyoNight: {
-    background: '#1a1b26',
-    lineBackground: '#1a1b2699',
-    foreground: '#787c99',
-    caret: '#c0caf5',
-    selection: '#515c7e40',
-    selectionMatch: '#16161e',
-    gutterBackground: '#1a1b26',
-    gutterForeground: '#787c99',
-    gutterBorder: 'transparent',
-    lineHighlight: '#1e202e',
-  },
-  vscodeDark: {
-    background: '#1e1e1e',
-    lineBackground: '#1e1e1e99',
-    foreground: '#9cdcfe',
-    caret: '#c6c6c6',
-    selection: '#6199ff2f',
-    selectionMatch: '#72a1ff59',
-    lineHighlight: '#ffffff0f',
-    gutterBackground: '#1e1e1e',
-    gutterForeground: '#838383',
-    gutterActiveForeground: '#fff',
-  },
-  xcodeLight: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#3D3D3D',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#AFAFAF',
-    lineHighlight: '#EDF4FF',
-  },
-  xcodeDark: {
-    background: '#292A30',
-    lineBackground: '#292A3099',
-    foreground: '#CECFD0',
-    caret: '#fff',
-    selection: '#727377',
-    selectionMatch: '#727377',
-    lineHighlight: '#2F3239',
-  },
-};
-
-function getColors(str) {
-  const colorRegex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g;
-  const colors = [];
-
-  let match;
-  while ((match = colorRegex.exec(str)) !== null) {
-    const color = match[0];
-    if (!colors.includes(color)) {
-      colors.push(color);
-    }
-  }
-
-  return colors;
-}
-
-// TODO: remove
-export function themeColors(theme) {
-  return getColors(stringifySafe(theme));
-}
-
-function getCircularReplacer() {
-  const seen = new WeakSet();
-  return (key, value) => {
-    if (typeof value === 'object' && value !== null) {
-      if (seen.has(value)) {
-        return;
-      }
-      seen.add(value);
-    }
-    return value;
-  };
-}
-
-function stringifySafe(json) {
-  return JSON.stringify(json, getCircularReplacer());
-}
-
-export function injectStyle(rule) {
-  const newStyle = document.createElement('style');
-  document.head.appendChild(newStyle);
-  const styleSheet = newStyle.sheet;
-  const ruleIndex = styleSheet.insertRule(rule, 0);
-  return () => styleSheet.deleteRule(ruleIndex);
-}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 489bd71c..6dbf0dff 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -11,6 +11,7 @@ export const defaultSettings = {
   isActiveLineHighlighted: true,
   isAutoCompletionEnabled: false,
   isTooltipEnabled: false,
+  isFlashEnabled: true,
   isLineWrappingEnabled: false,
   isPatternHighlightingEnabled: true,
   theme: 'strudelTheme',
@@ -19,7 +20,7 @@ export const defaultSettings = {
   latestCode: '',
   isZen: false,
   soundsFilter: 'all',
-  panelPosition: 'bottom',
+  panelPosition: 'right',
   userPatterns: '{}',
 };
 
@@ -54,8 +55,9 @@ export function useSettings() {
     isPatternHighlightingEnabled: [true, 'true'].includes(state.isPatternHighlightingEnabled) ? true : false,
     isTooltipEnabled: [true, 'true'].includes(state.isTooltipEnabled) ? true : false,
     isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
+    isFlashEnabled: [true, 'true'].includes(state.isFlashEnabled) ? true : false,
     fontSize: Number(state.fontSize),
-    panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom',
+    panelPosition: state.activeFooter !== '' ? state.panelPosition : 'right',
     userPatterns: JSON.parse(state.userPatterns),
   };
 }
diff --git a/website/src/useClient.mjs b/website/src/useClient.mjs
new file mode 100644
index 00000000..b695a36c
--- /dev/null
+++ b/website/src/useClient.mjs
@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+
+export default function useClient() {
+  const [client, setClient] = useState(false);
+  useEffect(() => {
+    setClient(true);
+  }, []);
+  return client;
+}
diff --git a/packages/react/src/hooks/useEvent.mjs b/website/src/useEvent.mjs
similarity index 100%
rename from packages/react/src/hooks/useEvent.mjs
rename to website/src/useEvent.mjs
diff --git a/packages/react/src/hooks/useFrame.mjs b/website/src/useFrame.mjs
similarity index 100%
rename from packages/react/src/hooks/useFrame.mjs
rename to website/src/useFrame.mjs