fixed webpack and some css, added loop baking

src/Beat.ts

@@ -150,4 +150,13 @@ export default class Beat implements IPublisher<BeatEvents>, BeatLike {
     delete(): void {
         this.publisher.notifySubs(BeatEvents.WantsRemoval);
     }
+
+    bakeLoops(): void {
+        if (this.isLooping()) {
+            this.unitRecord.forEach((unit, i) => {
+                unit.setOn(this.getUnitByIndex(i)?.isOn() ?? false);
+            });
+            this.setLooping(false);
+        }
+    }
 }

src/BeatGroup.ts

@@ -264,4 +264,9 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
         this.barSettingsLocked = false;
         this.publisher.notifySubs(BeatGroupEvents.LockingChanged);
     }
+
+    bakeLoops(): void {
+        this.beats.forEach(beat => beat.bakeLoops());
+        this.setIsUsingAutoBeatLength(false);
+    }
 }

src/ui/Root/Root.css

@@ -69,7 +69,9 @@
     width: 2em;
     height: 2em;
     cursor: pointer;
+    -webkit-mask-image: url(./drawing.svg);
     mask-image: url(./drawing.svg);
+    -webkit-mask-size: 2em;
     mask-size: 2em;
     background-color: var(--color-ui-neutral-dark);
 }
@@ -79,7 +81,9 @@
     width: 2em;
     height: 2em;
     cursor: pointer;
+    -webkit-mask-image: url(./rotate.svg);
     mask-image: url(./rotate.svg);
+    -webkit-mask-size: 2em;
     mask-size: 2em;
     background-color: var(--color-ui-neutral-dark);
 }

src/ui/Widgets/BoolBox/BoolBox.css

@@ -1,5 +1,6 @@
 .bool-box {
     height: 1.1em;
+    white-space: nowrap;
     margin: 0.5em;
     line-height: 1em;
     cursor: pointer;
@@ -28,6 +29,7 @@ input.bool-box-checkbox[type="checkbox"] {
 input.bool-box-checkbox[type="checkbox"]::before {
     width: 2em;
     height: 1em;
+    margin: 0.1em;
     border-radius: 1em;
     background-color: var(--color-ui-accent-active);
     display: inline-block;
@@ -42,23 +44,23 @@ input.bool-box-checkbox[type="checkbox"]:checked::before {
 }
 
 input.bool-box-checkbox[type="checkbox"]::after {
+    box-sizing: border-box;
     position: absolute;
-    width: 1.05em;
-    height: 1.05em;
+    width: 1.2em;
+    height: 1.2em;
     border-radius: 1em;
     border-color: var(--color-ui-neutral-dark);
-    border-width: 0.05em;
+    border-width: 0.075em;
     border-style: solid;
     background-color: var(--color-ui-neutral-dark);
     display: block;
     content: "";
-    top: -0.075em;
+    left: -0.05em;
     z-index: 1;
-    left: -0.075em;
     transition: left 200ms, background-color 200ms;
 }
 
 input.bool-box-checkbox[type="checkbox"]:checked::after {
-    left: 0.925em;
+    left: 1.1em;
     background-color: var(--color-ui-neutral-light);
 }