solid-pianoroll 0.0.26 → 0.0.28

package/dist/dev.cjs

@@ -7,8 +7,56 @@ var store = require('solid-js/store');
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// css-module:./PianoRoll.module.css#css-module
-var PianoRoll_module_default = { "PianoRoll": "_PianoRoll_1v1e7_1", "PianoRollContainer": "_PianoRollContainer_1v1e7_10", "PianoRollLeftColumn": "_PianoRollLeftColumn_1v1e7_17", "showTrackList": "_showTrackList_1v1e7_24", "PianoRollRightColumn": "_PianoRollRightColumn_1v1e7_29" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-LSmXvyshvjNA/solid-pianoroll/src/PianoRoll.module.css.js
+var digest = "f98365679977aeae978639d556d0bab7b4f40e1a8f0db1eb3e5c93f9af6181e2";
+var css = `._PianoRoll_1v1e7_1 {
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  height: 100%;
+  user-select: none;
+}
+
+._PianoRollContainer_1v1e7_10 {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+._PianoRollLeftColumn_1v1e7_17 {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  max-width: 250px;
+  margin-top: 30px;
+}
+._PianoRollLeftColumn_1v1e7_17._showTrackList_1v1e7_24 {
+  width: 30%;
+  margin-top: 0;
+}
+
+._PianoRollRightColumn_1v1e7_29 {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest)) {
+    var el = document.createElement("style");
+    el.id = digest;
+    el.textContent = css;
+    document.head.appendChild(el);
+  }
+})();
+var PianoRoll_module_css_default = { "PianoRoll": "_PianoRoll_1v1e7_1", "pianoRoll": "_PianoRoll_1v1e7_1", "PianoRollContainer": "_PianoRollContainer_1v1e7_10", "pianoRollContainer": "_PianoRollContainer_1v1e7_10", "PianoRollLeftColumn": "_PianoRollLeftColumn_1v1e7_17", "pianoRollLeftColumn": "_PianoRollLeftColumn_1v1e7_17", "showTrackList": "_showTrackList_1v1e7_24", "PianoRollRightColumn": "_PianoRollRightColumn_1v1e7_29", "pianoRollRightColumn": "_PianoRollRightColumn_1v1e7_29" };
 var defaultState = {
   ppq: 0,
   mode: "keys",
@@ -150,8 +198,71 @@ var usePianoRollContext = /* @__PURE__ */ __name(() => {
 }, "usePianoRollContext");
 var splitContextProps = /* @__PURE__ */ __name((allProps) => solidJs.splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
 
-// css-module:./PianoRollKeys.module.css#css-module
-var PianoRollKeys_module_default = { "PianoRollKeys": "_PianoRollKeys_1ne9i_1", "Key": "_Key_1ne9i_14", "black": "_black_1ne9i_29", "white": "_white_1ne9i_38", "down": "_down_1ne9i_46" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-Kk7l3Q96iL2R/solid-pianoroll/src/PianoRollKeys.module.css.js
+var digest2 = "912cd598d71719296925d32a7bc4dad8d79de7d166ad38b36f9ac6875ac81491";
+var css2 = `._PianoRollKeys_1ne9i_1 {
+  position: relative;
+  height: 100%;
+  border-width: 0;
+  border-color: #000;
+  border-style: solid;
+  border-right-width: 1px;
+  border-left-width: 1px;
+  background: white;
+  cursor: pointer;
+  background: black;
+}
+
+._Key_1ne9i_14 {
+  transition-property: background-color, box-shadow;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+  border-width: 0px;
+  position: absolute;
+  box-sizing: border-box;
+  width: 120%;
+  left: -20%;
+  border-color: #000;
+  border-style: solid;
+  transform: rotateX(0deg);
+  perspective: 100px;
+}
+
+._black_1ne9i_29 {
+  background: black;
+  border-top-right-radius: 12%;
+  border-bottom-right-radius: 12%;
+  margin-left: -20%;
+  z-index: 1;
+  border: 1px black outset;
+}
+
+._white_1ne9i_38 {
+  background: white;
+  border-top-width: 0.5px;
+  border-bottom-width: 0.5px;
+  border-top-right-radius: 4%;
+  border-bottom-right-radius: 4%;
+}
+
+._down_1ne9i_46 {
+  transition: none;
+  background: red;
+  transform: rotateX(0deg) rotateY(20deg);
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest2)) {
+    var el = document.createElement("style");
+    el.id = digest2;
+    el.textContent = css2;
+    document.head.appendChild(el);
+  }
+})();
+var PianoRollKeys_module_css_default = { "PianoRollKeys": "_PianoRollKeys_1ne9i_1", "pianoRollKeys": "_PianoRollKeys_1ne9i_1", "Key": "_Key_1ne9i_14", "key": "_Key_1ne9i_14", "black": "_black_1ne9i_29", "white": "_white_1ne9i_38", "down": "_down_1ne9i_46" };
 function createViewPortDimension(getState) {
   const getStateWithFunctions = /* @__PURE__ */ __name(() => {
     const state2 = getState();
@@ -244,8 +355,26 @@ var useViewPortDimension = /* @__PURE__ */ __name((name) => {
   return viewPort;
 }, "useViewPortDimension");
 
-// css-module:./ScrollZoomContainer.module.css#css-module
-var ScrollZoomContainer_module_default = { "ScrollZoomContainer": "_ScrollZoomContainer_f395r_1" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-aLe4BGGsm44C/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
+var digest3 = "a96973717aefff52bb67be47a75e74b9c1b6e5f5c00c390ce172eb51ae933787";
+var css3 = `._ScrollZoomContainer_f395r_1 {
+  height: 100%;
+  width: 100%;
+  z-index: 4;
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest3)) {
+    var el = document.createElement("style");
+    el.id = digest3;
+    el.textContent = css3;
+    document.head.appendChild(el);
+  }
+})();
+var ScrollZoomContainer_module_css_default = { "ScrollZoomContainer": "_ScrollZoomContainer_f395r_1", "scrollZoomContainer": "_ScrollZoomContainer_f395r_1" };
 
 // src/viewport/ScrollZoomContainer.tsx
 var _tmpl$ = /* @__PURE__ */ web.template(`<div><div><div><div></div></div></div></div>`, 8);
@@ -335,7 +464,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
       },
       get classList() {
         return {
-          [ScrollZoomContainer_module_default.ScrollZoomContainer]: true,
+          [ScrollZoomContainer_module_css_default.ScrollZoomContainer]: true,
           ...divProps.classList
         };
       }
@@ -421,10 +550,10 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
                 };
                 web.effect((_p$) => {
                   const _v$3 = {
-                    [PianoRollKeys_module_default["Key"]]: true,
-                    [PianoRollKeys_module_default["black"]]: key().isBlack,
-                    [PianoRollKeys_module_default["white"]]: !key().isBlack,
-                    [PianoRollKeys_module_default["down"]]: isDown()
+                    [PianoRollKeys_module_css_default["Key"]]: true,
+                    [PianoRollKeys_module_css_default["black"]]: key().isBlack,
+                    [PianoRollKeys_module_css_default["white"]]: !key().isBlack,
+                    [PianoRollKeys_module_css_default["down"]]: isDown()
                   }, _v$4 = key().name, _v$5 = key().number % 12, _v$6 = `${virtualDimensions().offset - virtualDimensions().size * (!key().isBlack ? nextIsBlack ? 1 / 2 : 0 : 0)}px`, _v$7 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`, _v$8 = `0px 0px ${Math.min(virtualDimensions().size / 20, 1)}px ${Math.min(virtualDimensions().size / 50, 1)}px rgba(0, 0, 0, 0.5) ${key().isBlack ? "" : "inset"}` + isDown() ? `0px 0px ${Math.min(virtualDimensions().size / 8, 2)}px ${Math.min(virtualDimensions().size / 20, 2)}px rgba(0, 0, 0, 0.5) inset` : "";
                   _p$._v$3 = web.classList(_el$2, _v$3, _p$._v$3);
                   _v$4 !== _p$._v$4 && web.setAttribute(_el$2, "title", _p$._v$4 = _v$4);
@@ -449,7 +578,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       }
     }));
     web.effect((_p$) => {
-      const _v$ = PianoRollKeys_module_default.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
+      const _v$ = PianoRollKeys_module_css_default.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
       _v$ !== _p$._v$ && web.className(_el$, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && _el$.style.setProperty("width", _p$._v$2 = _v$2);
       return _p$;
@@ -472,8 +601,49 @@ var keys = Array.from({
 var PianoRollKeys_default = PianoRollKeys;
 web.delegateEvents(["mousedown", "mouseup"]);
 
-// css-module:./PianoRollNotes.module.css#css-module
-var PianoRollNotes_module_default = { "PianoRollNotes": "_PianoRollNotes_u3pew_1", "Note": "_Note_u3pew_12", "trimStart": "_trimStart_u3pew_22", "trimEnd": "_trimEnd_u3pew_26" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-TSvPowr7zW3j/solid-pianoroll/src/PianoRollNotes.module.css.js
+var digest4 = "45ae91170ebfe23414eef13e702caf49cc0c26c03329a7f360501aa4e212d6c3";
+var css4 = `._PianoRollNotes_u3pew_1 {
+  position: absolute;
+  flex: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  cursor: grab;
+}
+
+._Note_u3pew_12 {
+  position: absolute;
+  box-sizing: border-box;
+  border-width: 0.5px;
+  border-style: solid;
+  border-color: #a00;
+
+  cursor: move;
+}
+
+._Note_u3pew_12._trimStart_u3pew_22 {
+  cursor: w-resize;
+}
+
+._Note_u3pew_12._trimEnd_u3pew_26 {
+  cursor: e-resize;
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest4)) {
+    var el = document.createElement("style");
+    el.id = digest4;
+    el.textContent = css4;
+    document.head.appendChild(el);
+  }
+})();
+var PianoRollNotes_module_css_default = { "PianoRollNotes": "_PianoRollNotes_u3pew_1", "pianoRollNotes": "_PianoRollNotes_u3pew_1", "Note": "_Note_u3pew_12", "note": "_Note_u3pew_12", "trimStart": "_trimStart_u3pew_22", "trimEnd": "_trimEnd_u3pew_26" };
 
 // src/PianoRollNotes.tsx
 var _tmpl$3 = /* @__PURE__ */ web.template(`<div></div>`, 2);
@@ -550,7 +720,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
     window.addEventListener("mouseup", stopDragging);
   }, "startDragging");
   const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
-    return noteDragMode2 ? [PianoRollNotes_module_default.Note, PianoRollNotes_module_default[noteDragMode2]] : [PianoRollNotes_module_default.Note];
+    return noteDragMode2 ? [PianoRollNotes_module_css_default.Note, PianoRollNotes_module_css_default[noteDragMode2]] : [PianoRollNotes_module_css_default.Note];
   }, "getClasses");
   return (() => {
     const _el$ = _tmpl$3.cloneNode(true);
@@ -657,7 +827,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       }
     }));
     web.effect((_$p) => web.classList(_el$, {
-      [PianoRollNotes_module_default.PianoRollNotes]: true
+      [PianoRollNotes_module_css_default.PianoRollNotes]: true
     }, _$p));
     return _el$;
   })();
@@ -665,8 +835,64 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
 var PianoRollNotes_default = PianoRollNotes;
 web.delegateEvents(["mousedown", "mousemove", "dblclick"]);
 
-// css-module:./PianoRollGrid.module.css#css-module
-var PianoRollGrid_module_default = { "PianoRollGrid": "_PianoRollGrid_qke5f_1", "PianoRollGrid-Row": "_PianoRollGrid-Row_qke5f_7", "IsDark": "_IsDark_qke5f_14", "Key": "_Key_qke5f_18", "IsBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "PianoRollGrid-Time": "_PianoRollGrid-Time_qke5f_26", "Highlighted": "_Highlighted_qke5f_37", "HighlightedBorder": "_HighlightedBorder_qke5f_41" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-UjLZQ4qpn5e1/solid-pianoroll/src/PianoRollGrid.module.css.js
+var digest5 = "bcec03cb2e8c0e0e21f47ae79ec573dc2bea2705a1db031668fdb120eaff9042";
+var css5 = `._PianoRollGrid_qke5f_1 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._PianoRollGrid-Row_qke5f_7 {
+  position: absolute;
+  border-style: solid;
+  border-color: gray;
+  width: 100%;
+  border-width: 0;
+}
+._PianoRollGrid-Row_qke5f_7._IsDark_qke5f_14 {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+._PianoRollGrid-Row_qke5f_7._Key_qke5f_18 {
+  border-width: 0px 1px 0px 0;
+}
+._PianoRollGrid-Row_qke5f_7._IsBlackAndNextIsWhite_qke5f_21 {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-width: 0.1px 1px 0.1px 0;
+}
+
+._PianoRollGrid-Time_qke5f_26 {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0px;
+  height: 100%;
+  border-left-style: solid;
+  border-left-width: 0.5px;
+  border-left-color: #bbb;
+  background: #ccc;
+}
+
+._PianoRollGrid-Time_qke5f_26._Highlighted_qke5f_37 {
+  background: #ddd;
+}
+
+._PianoRollGrid-Time_qke5f_26._HighlightedBorder_qke5f_41 {
+  border-left-color: gray;
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest5)) {
+    var el = document.createElement("style");
+    el.id = digest5;
+    el.textContent = css5;
+    document.head.appendChild(el);
+  }
+})();
+var PianoRollGrid_module_css_default = { "PianoRollGrid": "_PianoRollGrid_qke5f_1", "pianoRollGrid": "_PianoRollGrid_qke5f_1", "PianoRollGrid-Row": "_PianoRollGrid-Row_qke5f_7", "pianoRollGridRow": "_PianoRollGrid-Row_qke5f_7", "IsDark": "_IsDark_qke5f_14", "isDark": "_IsDark_qke5f_14", "Key": "_Key_qke5f_18", "key": "_Key_qke5f_18", "IsBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "isBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "PianoRollGrid-Time": "_PianoRollGrid-Time_qke5f_26", "pianoRollGridTime": "_PianoRollGrid-Time_qke5f_26", "Highlighted": "_Highlighted_qke5f_37", "highlighted": "_Highlighted_qke5f_37", "HighlightedBorder": "_HighlightedBorder_qke5f_41", "highlightedBorder": "_HighlightedBorder_qke5f_41" };
 var usePianoRollGrid = /* @__PURE__ */ __name(() => {
   const context = usePianoRollContext();
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
@@ -737,9 +963,9 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
             const _el$2 = _tmpl$4.cloneNode(true);
             web.effect((_p$) => {
               const _v$ = {
-                [PianoRollGrid_module_default["PianoRollGrid-Time"]]: true,
-                [PianoRollGrid_module_default["Highlighted"]]: entry().isHighlighted,
-                [PianoRollGrid_module_default["HighlightedBorder"]]: entry().hasHighlightedBorder
+                [PianoRollGrid_module_css_default["PianoRollGrid-Time"]]: true,
+                [PianoRollGrid_module_css_default["Highlighted"]]: entry().isHighlighted,
+                [PianoRollGrid_module_css_default["HighlightedBorder"]]: entry().hasHighlightedBorder
               }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
               _p$._v$ = web.classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && _el$2.style.setProperty("left", _p$._v$2 = _v$2);
@@ -772,10 +998,10 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 const _el$3 = _tmpl$4.cloneNode(true);
                 web.effect((_p$) => {
                   const _v$4 = {
-                    [PianoRollGrid_module_default["PianoRollGrid-Row"]]: true,
-                    [PianoRollGrid_module_default["Key"]]: true,
-                    [PianoRollGrid_module_default["IsDark"]]: key().isBlack,
-                    [PianoRollGrid_module_default["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
+                    [PianoRollGrid_module_css_default["PianoRollGrid-Row"]]: true,
+                    [PianoRollGrid_module_css_default["Key"]]: true,
+                    [PianoRollGrid_module_css_default["IsDark"]]: key().isBlack,
+                    [PianoRollGrid_module_css_default["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
                   }, _v$5 = `${virtualDimensions().offset}px`, _v$6 = `${virtualDimensions().size}px`;
                   _p$._v$4 = web.classList(_el$3, _v$4, _p$._v$4);
                   _v$5 !== _p$._v$5 && _el$3.style.setProperty("top", _p$._v$5 = _v$5);
@@ -812,8 +1038,8 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 const _el$4 = _tmpl$4.cloneNode(true);
                 web.effect((_p$) => {
                   const _v$7 = {
-                    [PianoRollGrid_module_default["PianoRollGrid-Row"]]: true,
-                    [PianoRollGrid_module_default["IsDark"]]: index() % 2 === 0
+                    [PianoRollGrid_module_css_default["PianoRollGrid-Row"]]: true,
+                    [PianoRollGrid_module_css_default["IsDark"]]: index() % 2 === 0
                   }, _v$8 = `${virtualDimensions().offset}px`, _v$9 = `${virtualDimensions().size}px`;
                   _p$._v$7 = web.classList(_el$4, _v$7, _p$._v$7);
                   _v$8 !== _p$._v$8 && _el$4.style.setProperty("top", _p$._v$8 = _v$8);
@@ -831,7 +1057,7 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
         });
       }
     }), null);
-    web.effect(() => web.className(_el$, PianoRollGrid_module_default.PianoRollGrid));
+    web.effect(() => web.className(_el$, PianoRollGrid_module_css_default.PianoRollGrid));
     return _el$;
   })();
 }, "PianoRollGrid");
@@ -888,8 +1114,44 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
 }, "ZoomSliderControl");
 var ZoomSliderControl_default = ZoomSliderControl;
 
-// css-module:./PianoRollTrackList.module.css#css-module
-var PianoRollTrackList_module_default = { "PianoRollTrackList": "_PianoRollTrackList_11kti_1", "Track": "_Track_11kti_7", "selected": "_selected_11kti_21" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-d4QXpNtqE8lR/solid-pianoroll/src/PianoRollTrackList.module.css.js
+var digest6 = "c2b6ba27e633672615923990319ea17ccb9603b3d13457afe2e514b43b021699";
+var css6 = `._PianoRollTrackList_11kti_1 {
+  position: relative;
+  height: 100%;
+  flex: 1;
+}
+
+._Track_11kti_7 {
+  border-width: 0px;
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: #000;
+  border-style: solid;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  padding: 2px;
+  cursor: pointer;
+  background: lightgrey;
+}
+
+Track._selected_11kti_21 {
+  background: gray;
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest6)) {
+    var el = document.createElement("style");
+    el.id = digest6;
+    el.textContent = css6;
+    document.head.appendChild(el);
+  }
+})();
+var PianoRollTrackList_module_css_default = { "PianoRollTrackList": "_PianoRollTrackList_11kti_1", "pianoRollTrackList": "_PianoRollTrackList_11kti_1", "Track": "_Track_11kti_7", "track": "_Track_11kti_7", "selected": "_selected_11kti_21" };
 var _tmpl$6 = /* @__PURE__ */ web.template(`<div></div>`, 2);
 var _tmpl$22 = /* @__PURE__ */ web.template(`<div> </div>`, 2);
 var PianoRollTrackList = /* @__PURE__ */ __name(() => {
@@ -914,8 +1176,8 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
             web.insert(_el$2, () => track().name || "[unnamed track]", null);
             web.effect((_p$) => {
               const _v$ = {
-                [PianoRollTrackList_module_default["Track"]]: true,
-                [PianoRollTrackList_module_default["selected"]]: index === context.selectedTrackIndex
+                [PianoRollTrackList_module_css_default["Track"]]: true,
+                [PianoRollTrackList_module_css_default["selected"]]: index === context.selectedTrackIndex
               }, _v$2 = track().name, _v$3 = `${virtualDimensions().offset}px`, _v$4 = `${virtualDimensions().size}px`;
               _p$._v$ = web.classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && web.setAttribute(_el$2, "title", _p$._v$2 = _v$2);
@@ -933,7 +1195,7 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
         });
       }
     }));
-    web.effect(() => web.className(_el$, PianoRollTrackList_module_default.PianoRollTrackList));
+    web.effect(() => web.className(_el$, PianoRollTrackList_module_css_default.PianoRollTrackList));
     return _el$;
   })();
 }, "PianoRollTrackList");
@@ -1061,8 +1323,58 @@ var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
 }, "PianoRollTrackListScroller");
 var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 
-// css-module:./PianoRollScale.module.css#css-module
-var PianoRollScale_module_default = { "PianoRollScale": "_PianoRollScale_1khhn_1", "PianoRollScale-Time": "_PianoRollScale-Time_1khhn_7", "PianoRollScale-Label": "_PianoRollScale-Label_1khhn_23", "Highlighted": "_Highlighted_1khhn_31", "HighlightedBorder": "_HighlightedBorder_1khhn_35" };
+// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90274-XI6Mgkkop9wE/solid-pianoroll/src/PianoRollScale.module.css.js
+var digest7 = "3cfb7e77c4bc36c2a72017a4a0141c02394d8380f58d46d6e7e113ed6f9fe532";
+var css7 = `._PianoRollScale_1khhn_1 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._PianoRollScale-Time_1khhn_7 {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0px;
+  height: 100%;
+  border-left-style: solid;
+  border-left-width: 0.5px;
+  border-left-color: x#666;
+  border-bottom-color: #333;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5px;
+  background: #777;
+  display: flex;
+  align-items: center;
+}
+
+._PianoRollScale-Label_1khhn_23 {
+  position: absolute;
+  z-index: 1;
+  color: #ccc;
+  margin-left: 3px;
+  font-size: 0.8em;
+}
+
+._PianoRollScale-Time_1khhn_7._Highlighted_1khhn_31 {
+  background: #666;
+}
+
+._PianoRollScale-Time_1khhn_7._HighlightedBorder_1khhn_35 {
+  border-left-color: #111;
+}
+`;
+(function() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!document.getElementById(digest7)) {
+    var el = document.createElement("style");
+    el.id = digest7;
+    el.textContent = css7;
+    document.head.appendChild(el);
+  }
+})();
+var PianoRollScale_module_css_default = { "PianoRollScale": "_PianoRollScale_1khhn_1", "pianoRollScale": "_PianoRollScale_1khhn_1", "PianoRollScale-Time": "_PianoRollScale-Time_1khhn_7", "pianoRollScaleTime": "_PianoRollScale-Time_1khhn_7", "PianoRollScale-Label": "_PianoRollScale-Label_1khhn_23", "pianoRollScaleLabel": "_PianoRollScale-Label_1khhn_23", "Highlighted": "_Highlighted_1khhn_31", "highlighted": "_Highlighted_1khhn_31", "HighlightedBorder": "_HighlightedBorder_1khhn_35", "highlightedBorder": "_HighlightedBorder_1khhn_35" };
 
 // src/PianoRollScale.tsx
 var _tmpl$7 = /* @__PURE__ */ web.template(`<div></div>`, 2);
@@ -1103,15 +1415,15 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
               get children() {
                 const _el$3 = _tmpl$7.cloneNode(true);
                 web.insert(_el$3, () => entry().label);
-                web.effect(() => web.className(_el$3, PianoRollScale_module_default["PianoRollScale-Label"]));
+                web.effect(() => web.className(_el$3, PianoRollScale_module_css_default["PianoRollScale-Label"]));
                 return _el$3;
               }
             }));
             web.effect((_p$) => {
               const _v$ = {
-                [PianoRollScale_module_default["PianoRollScale-Time"]]: true,
-                [PianoRollScale_module_default["Highlighted"]]: entry().isHighlighted,
-                [PianoRollScale_module_default["HighlightedBorder"]]: entry().hasHighlightedBorder
+                [PianoRollScale_module_css_default["PianoRollScale-Time"]]: true,
+                [PianoRollScale_module_css_default["Highlighted"]]: entry().isHighlighted,
+                [PianoRollScale_module_css_default["HighlightedBorder"]]: entry().hasHighlightedBorder
               }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
               _p$._v$ = web.classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && _el$2.style.setProperty("left", _p$._v$2 = _v$2);
@@ -1127,7 +1439,7 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
         });
       }
     }));
-    web.effect(() => web.className(_el$, PianoRollScale_module_default.PianoRollScale));
+    web.effect(() => web.className(_el$, PianoRollScale_module_css_default.PianoRollScale));
     return _el$;
   })();
 }, "PianoRollScale");
@@ -1150,7 +1462,7 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       const _el$ = _tmpl$42.cloneNode(true);
       web.spread(_el$, web.mergeProps(divProps, {
         get ["class"]() {
-          return PianoRoll_module_default.PianoRoll;
+          return PianoRoll_module_css_default.PianoRoll;
         }
       }), false, true);
       web.insert(_el$, web.createComponent(PianoRollScrollZoomViewPort_default, {
@@ -1229,9 +1541,9 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
               }
             }), null);
             web.effect((_p$) => {
-              const _v$ = PianoRoll_module_default.PianoRollContainer, _v$2 = {
-                [PianoRoll_module_default.PianoRollLeftColumn]: true,
-                [PianoRoll_module_default.showTrackList]: context.showTrackList
+              const _v$ = PianoRoll_module_css_default.PianoRollContainer, _v$2 = {
+                [PianoRoll_module_css_default.PianoRollLeftColumn]: true,
+                [PianoRoll_module_css_default.showTrackList]: context.showTrackList
               };
               _v$ !== _p$._v$ && web.className(_el$2, _p$._v$ = _v$);
               _p$._v$2 = web.classList(_el$3, _v$2, _p$._v$2);