solid-pianoroll 0.0.26 → 0.0.28

package/dist/index.jsx

@@ -1,8 +1,56 @@
 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-ob34ncAkQvlw/solid-pianoroll/src/PianoRoll.module.css.js
+var digest = "d90f2450d13871a88a0d03dbb9c0bd8b2839f0eedb7a687ece3586572040dfaa";
+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" };
 
 // src/PianoRoll.tsx
 import { Show as Show6, mergeProps as mergeProps4 } from "solid-js";
@@ -154,8 +202,71 @@ var usePianoRollContext = /* @__PURE__ */ __name(() => {
 }, "usePianoRollContext");
 var splitContextProps = /* @__PURE__ */ __name((allProps) => 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-HDzwLAVErUw7/solid-pianoroll/src/PianoRollKeys.module.css.js
+var digest2 = "9f1008928312d61e8977db1f9152ee30457cfd8745a5281f1f4fd3e06e1716d7";
+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" };
 
 // src/PianoRollKeys.tsx
 import { createEffect as createEffect3, createMemo as createMemo2, createSignal, Index, Show } from "solid-js";
@@ -256,8 +367,26 @@ var useViewPortDimension = /* @__PURE__ */ __name((name) => {
 // src/viewport/ScrollZoomContainer.tsx
 import { createEffect as createEffect2, createMemo, mergeProps as mergeProps2, splitProps as splitProps2 } from "solid-js";
 
-// 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-h7PsNtYlpDzp/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
+var digest3 = "d79c37d10b0a08e1c58e2fc5dc30223892be55edc02ab69d7f09f171371153e8";
+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 ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
@@ -356,7 +485,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
       ...typeof divProps.style === "object" && divProps.style
     }}
     classList={{
-      [ScrollZoomContainer_module_default.ScrollZoomContainer]: true,
+      [ScrollZoomContainer_module_css_default.ScrollZoomContainer]: true,
       ...divProps.classList
     }}
   ><div ref={scrollContentRef}><div
@@ -394,7 +523,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       window.removeEventListener("mouseup", handleMouseUp);
     }
   });
-  return <div class={PianoRollKeys_module_default.PianoRollKeys} style={{ width: `${horizontalViewPort().pixelSize}px` }}><ScrollZoomContainer_default horizontalDimensionName="horizontalKeys" showScrollbar={false}><Index each={keys}>{(key) => {
+  return <div class={PianoRollKeys_module_css_default.PianoRollKeys} style={{ width: `${horizontalViewPort().pixelSize}px` }}><ScrollZoomContainer_default horizontalDimensionName="horizontalKeys" showScrollbar={false}><Index each={keys}>{(key) => {
     const isDown = createMemo2(
       () => context.isKeyDown(context.selectedTrackIndex, key().number)
     );
@@ -405,10 +534,10 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
     const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
     return <Show when={verticalViewPort().isVisible(virtualDimensions())}><div
       classList={{
-        [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()
       }}
       onMouseDown={() => {
         setIsMouseDown(true);
@@ -455,8 +584,49 @@ var PianoRollKeys_default = PianoRollKeys;
 // src/PianoRollNotes.tsx
 import { createMemo as createMemo3, createSignal as createSignal2, For, Show as Show2 } from "solid-js";
 
-// 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-pImNd2eja4tf/solid-pianoroll/src/PianoRollNotes.module.css.js
+var digest4 = "943f1c0d669c91d501585f79aa7c6e261dd4f85f7b21853e18b7fb1fbe38a4ee";
+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 PianoRollNotes = /* @__PURE__ */ __name((props) => {
@@ -541,10 +711,10 @@ 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 <div
-    classList={{ [PianoRollNotes_module_default.PianoRollNotes]: true }}
+    classList={{ [PianoRollNotes_module_css_default.PianoRollNotes]: true }}
     ref={props.ref}
     onMouseDown={(mouseDownEvent) => {
       mouseDownEvent.preventDefault();
@@ -639,8 +809,64 @@ var PianoRollNotes_default = PianoRollNotes;
 // src/PianoRollGrid.tsx
 import { createMemo as createMemo5, For as For2, Index as Index2, Show as Show3 } from "solid-js";
 
-// 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-Vg6OvUqRMn3O/solid-pianoroll/src/PianoRollGrid.module.css.js
+var digest5 = "2d81337f922661f0260227c37722b08353e15841be40d913136cdd1aa896da2f";
+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" };
 
 // src/usePianoRollGrid.ts
 import { createMemo as createMemo4 } from "solid-js";
@@ -700,13 +926,13 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
   );
   const horizontalViewPort = createMemo5(() => useViewPortDimension("horizontal"));
   const gridArray = usePianoRollGrid_default();
-  return <div class={PianoRollGrid_module_default.PianoRollGrid}>
+  return <div class={PianoRollGrid_module_css_default.PianoRollGrid}>
     <Index2 each={gridArray()}>{(entry) => {
       return <Show3 when={horizontalViewPort().isVisible(entry().virtualDimensions)}><div
         classList={{
-          [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
         }}
         style={{
           left: `${entry().virtualDimensions.offset}px`,
@@ -720,10 +946,10 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
       );
       return <Show3 when={verticalViewPort().isVisible(virtualDimensions())}><div
         classList={{
-          [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)
         }}
         style={{
           top: `${virtualDimensions().offset}px`,
@@ -737,8 +963,8 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
       );
       return <Show3 when={verticalViewPort().isVisible(virtualDimensions())}><div
         classList={{
-          [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
         }}
         style={{
           top: `${virtualDimensions().offset}px`,
@@ -790,20 +1016,56 @@ 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-jcdMZAFu8LQN/solid-pianoroll/src/PianoRollTrackList.module.css.js
+var digest6 = "e9f8961ee037e20fa2a8071f60eb91f8e32adde4fe62014efe90839a5e4f61fc";
+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" };
 
 // src/PianoRollTrackList.tsx
 import { createMemo as createMemo7, Index as Index3, Show as Show4 } from "solid-js";
 var PianoRollTrackList = /* @__PURE__ */ __name(() => {
   const viewPort = createMemo7(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
-  return <div class={PianoRollTrackList_module_default.PianoRollTrackList}><Index3 each={context.tracks}>{(track, index) => {
+  return <div class={PianoRollTrackList_module_css_default.PianoRollTrackList}><Index3 each={context.tracks}>{(track, index) => {
     const virtualDimensions = createMemo7(() => viewPort().calculatePixelDimensions(index, 1));
     return <Show4 when={virtualDimensions().size > 0}><div
       classList={{
-        [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
       }}
       title={track().name}
       style={{
@@ -944,8 +1206,58 @@ var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 // src/PianoRollScale.tsx
 import { createMemo as createMemo8, Index as Index4, Show as Show5 } from "solid-js";
 
-// 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-kNrDTgfOA32D/solid-pianoroll/src/PianoRollScale.module.css.js
+var digest7 = "4b96172f4bdb557a9510064e4880e8f93bc6f8b0b7c7dec7c7959f03267b0bd8";
+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 PianoRollScale = /* @__PURE__ */ __name(() => {
@@ -957,7 +1269,7 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
     context.onPlayHeadPositionChange(position, event);
   }, "updatePlayheadPosition");
   return <div
-    class={PianoRollScale_module_default.PianoRollScale}
+    class={PianoRollScale_module_css_default.PianoRollScale}
     onMouseDown={(event) => {
       updatePlayheadPosition(event);
       const handleMouseUp = /* @__PURE__ */ __name(() => {
@@ -970,15 +1282,15 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
   ><Index4 each={grid()}>{(entry) => {
     return <Show5 when={horizontalViewPort().isVisible(entry().virtualDimensions)}><div
       classList={{
-        [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
       }}
       style={{
         left: `${entry().virtualDimensions.offset}px`,
         width: `${entry().virtualDimensions.size}px`
       }}
-    ><Show5 when={entry().showLabel}><div class={PianoRollScale_module_default["PianoRollScale-Label"]}>{entry().label}</div></Show5></div></Show5>;
+    ><Show5 when={entry().showLabel}><div class={PianoRollScale_module_css_default["PianoRollScale-Label"]}>{entry().label}</div></Show5></div></Show5>;
   }}</Index4></div>;
 }, "PianoRollScale");
 var PianoRollScale_default = PianoRollScale;
@@ -987,13 +1299,13 @@ var PianoRollScale_default = PianoRollScale;
 var PianoRoll = /* @__PURE__ */ __name((allProps) => {
   const propsWithDefaults = mergeProps4({ showAllTracks: false }, allProps);
   const [context, divProps] = splitContextProps(propsWithDefaults);
-  return <PianoRollContextProvider value={context}><div {...divProps} class={PianoRoll_module_default.PianoRoll}><PianoRollScrollZoomViewPort_default>
-    <div class={PianoRoll_module_default.PianoRollContainer}>
+  return <PianoRollContextProvider value={context}><div {...divProps} class={PianoRoll_module_css_default.PianoRoll}><PianoRollScrollZoomViewPort_default>
+    <div class={PianoRoll_module_css_default.PianoRollContainer}>
       <ZoomSliderControl_default orientation="vertical" dimensionName="verticalTracks" />
       <div
         classList={{
-          [PianoRoll_module_default.PianoRollLeftColumn]: true,
-          [PianoRoll_module_default.showTrackList]: context.showTrackList
+          [PianoRoll_module_css_default.PianoRollLeftColumn]: true,
+          [PianoRoll_module_css_default.showTrackList]: context.showTrackList
         }}
       >
         <Show6 when={context.showTrackList}><div

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.26",
+  "version": "0.0.28",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",
@@ -66,10 +66,9 @@
     "autoprefixer": "^10.4.13",
     "concurrently": "^7.6.0",
     "esbuild": "^0.17.5",
+    "esbuild-css-modules-plugin": "^2.7.1",
     "esbuild-plugin-solid": "^0.5.0",
     "jsdom": "^21.1.0",
-    "postcss": "^8.4.21",
-    "postcss-modules": "^6.0.0",
     "prettier": "2.8.3",
     "sass": "^1.57.1",
     "solid-js": "^1.6.9",