solid-pianoroll 0.0.25 → 0.0.26

package/dist/index.js

@@ -5,8 +5,8 @@ import { createStore } from 'solid-js/store';
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// src/PianoRoll.module.css
-var _default = {};
+// 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" };
 var defaultState = {
   ppq: 0,
   mode: "keys",
@@ -148,8 +148,8 @@ var usePianoRollContext = /* @__PURE__ */ __name(() => {
 }, "usePianoRollContext");
 var splitContextProps = /* @__PURE__ */ __name((allProps) => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
 
-// src/PianoRollKeys.module.css
-var _default2 = {};
+// 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" };
 function createViewPortDimension(getState) {
   const getStateWithFunctions = /* @__PURE__ */ __name(() => {
     const state2 = getState();
@@ -242,8 +242,8 @@ var useViewPortDimension = /* @__PURE__ */ __name((name) => {
   return viewPort;
 }, "useViewPortDimension");
 
-// src/viewport/ScrollZoomContainer.module.css
-var _default3 = {};
+// css-module:./ScrollZoomContainer.module.css#css-module
+var ScrollZoomContainer_module_default = { "ScrollZoomContainer": "_ScrollZoomContainer_f395r_1" };
 
 // src/viewport/ScrollZoomContainer.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div><div><div></div></div></div></div>`, 8);
@@ -333,7 +333,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
       },
       get classList() {
         return {
-          [_default3.ScrollZoomContainer]: true,
+          [ScrollZoomContainer_module_default.ScrollZoomContainer]: true,
           ...divProps.classList
         };
       }
@@ -419,10 +419,10 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
                 };
                 effect((_p$) => {
                   const _v$3 = {
-                    [_default2["Key"]]: true,
-                    [_default2["black"]]: key().isBlack,
-                    [_default2["white"]]: !key().isBlack,
-                    [_default2["down"]]: isDown()
+                    [PianoRollKeys_module_default["Key"]]: true,
+                    [PianoRollKeys_module_default["black"]]: key().isBlack,
+                    [PianoRollKeys_module_default["white"]]: !key().isBlack,
+                    [PianoRollKeys_module_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 = classList(_el$2, _v$3, _p$._v$3);
                   _v$4 !== _p$._v$4 && setAttribute(_el$2, "title", _p$._v$4 = _v$4);
@@ -447,7 +447,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       }
     }));
     effect((_p$) => {
-      const _v$ = _default2.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
+      const _v$ = PianoRollKeys_module_default.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && _el$.style.setProperty("width", _p$._v$2 = _v$2);
       return _p$;
@@ -470,8 +470,8 @@ var keys = Array.from({
 var PianoRollKeys_default = PianoRollKeys;
 delegateEvents(["mousedown", "mouseup"]);
 
-// src/PianoRollNotes.module.css
-var _default4 = {};
+// 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" };
 
 // src/PianoRollNotes.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div></div>`, 2);
@@ -548,7 +548,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
     window.addEventListener("mouseup", stopDragging);
   }, "startDragging");
   const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
-    return noteDragMode2 ? [_default4.Note, _default4[noteDragMode2]] : [_default4.Note];
+    return noteDragMode2 ? [PianoRollNotes_module_default.Note, PianoRollNotes_module_default[noteDragMode2]] : [PianoRollNotes_module_default.Note];
   }, "getClasses");
   return (() => {
     const _el$ = _tmpl$3.cloneNode(true);
@@ -655,7 +655,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       }
     }));
     effect((_$p) => classList(_el$, {
-      [_default4.PianoRollNotes]: true
+      [PianoRollNotes_module_default.PianoRollNotes]: true
     }, _$p));
     return _el$;
   })();
@@ -663,8 +663,8 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
 var PianoRollNotes_default = PianoRollNotes;
 delegateEvents(["mousedown", "mousemove", "dblclick"]);
 
-// src/PianoRollGrid.module.css
-var _default5 = {};
+// 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" };
 var usePianoRollGrid = /* @__PURE__ */ __name(() => {
   const context = usePianoRollContext();
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
@@ -735,9 +735,9 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
             const _el$2 = _tmpl$4.cloneNode(true);
             effect((_p$) => {
               const _v$ = {
-                [_default5["PianoRollGrid-Time"]]: true,
-                [_default5["Highlighted"]]: entry().isHighlighted,
-                [_default5["HighlightedBorder"]]: entry().hasHighlightedBorder
+                [PianoRollGrid_module_default["PianoRollGrid-Time"]]: true,
+                [PianoRollGrid_module_default["Highlighted"]]: entry().isHighlighted,
+                [PianoRollGrid_module_default["HighlightedBorder"]]: entry().hasHighlightedBorder
               }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
               _p$._v$ = classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && _el$2.style.setProperty("left", _p$._v$2 = _v$2);
@@ -770,10 +770,10 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 const _el$3 = _tmpl$4.cloneNode(true);
                 effect((_p$) => {
                   const _v$4 = {
-                    [_default5["PianoRollGrid-Row"]]: true,
-                    [_default5["Key"]]: true,
-                    [_default5["IsDark"]]: key().isBlack,
-                    [_default5["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
+                    [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)
                   }, _v$5 = `${virtualDimensions().offset}px`, _v$6 = `${virtualDimensions().size}px`;
                   _p$._v$4 = classList(_el$3, _v$4, _p$._v$4);
                   _v$5 !== _p$._v$5 && _el$3.style.setProperty("top", _p$._v$5 = _v$5);
@@ -810,8 +810,8 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 const _el$4 = _tmpl$4.cloneNode(true);
                 effect((_p$) => {
                   const _v$7 = {
-                    [_default5["PianoRollGrid-Row"]]: true,
-                    [_default5["IsDark"]]: index() % 2 === 0
+                    [PianoRollGrid_module_default["PianoRollGrid-Row"]]: true,
+                    [PianoRollGrid_module_default["IsDark"]]: index() % 2 === 0
                   }, _v$8 = `${virtualDimensions().offset}px`, _v$9 = `${virtualDimensions().size}px`;
                   _p$._v$7 = classList(_el$4, _v$7, _p$._v$7);
                   _v$8 !== _p$._v$8 && _el$4.style.setProperty("top", _p$._v$8 = _v$8);
@@ -829,7 +829,7 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
         });
       }
     }), null);
-    effect(() => className(_el$, _default5.PianoRollGrid));
+    effect(() => className(_el$, PianoRollGrid_module_default.PianoRollGrid));
     return _el$;
   })();
 }, "PianoRollGrid");
@@ -886,8 +886,8 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
 }, "ZoomSliderControl");
 var ZoomSliderControl_default = ZoomSliderControl;
 
-// src/PianoRollTrackList.module.css
-var _default6 = {};
+// css-module:./PianoRollTrackList.module.css#css-module
+var PianoRollTrackList_module_default = { "PianoRollTrackList": "_PianoRollTrackList_11kti_1", "Track": "_Track_11kti_7", "selected": "_selected_11kti_21" };
 var _tmpl$6 = /* @__PURE__ */ template(`<div></div>`, 2);
 var _tmpl$22 = /* @__PURE__ */ template(`<div> </div>`, 2);
 var PianoRollTrackList = /* @__PURE__ */ __name(() => {
@@ -912,8 +912,8 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
             insert(_el$2, () => track().name || "[unnamed track]", null);
             effect((_p$) => {
               const _v$ = {
-                [_default6["Track"]]: true,
-                [_default6["selected"]]: index === context.selectedTrackIndex
+                [PianoRollTrackList_module_default["Track"]]: true,
+                [PianoRollTrackList_module_default["selected"]]: index === context.selectedTrackIndex
               }, _v$2 = track().name, _v$3 = `${virtualDimensions().offset}px`, _v$4 = `${virtualDimensions().size}px`;
               _p$._v$ = classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && setAttribute(_el$2, "title", _p$._v$2 = _v$2);
@@ -931,7 +931,7 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
         });
       }
     }));
-    effect(() => className(_el$, _default6.PianoRollTrackList));
+    effect(() => className(_el$, PianoRollTrackList_module_default.PianoRollTrackList));
     return _el$;
   })();
 }, "PianoRollTrackList");
@@ -1059,8 +1059,8 @@ var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
 }, "PianoRollTrackListScroller");
 var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 
-// src/PianoRollScale.module.css
-var _default7 = {};
+// 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" };
 
 // src/PianoRollScale.tsx
 var _tmpl$7 = /* @__PURE__ */ template(`<div></div>`, 2);
@@ -1101,15 +1101,15 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
               get children() {
                 const _el$3 = _tmpl$7.cloneNode(true);
                 insert(_el$3, () => entry().label);
-                effect(() => className(_el$3, _default7["PianoRollScale-Label"]));
+                effect(() => className(_el$3, PianoRollScale_module_default["PianoRollScale-Label"]));
                 return _el$3;
               }
             }));
             effect((_p$) => {
               const _v$ = {
-                [_default7["PianoRollScale-Time"]]: true,
-                [_default7["Highlighted"]]: entry().isHighlighted,
-                [_default7["HighlightedBorder"]]: entry().hasHighlightedBorder
+                [PianoRollScale_module_default["PianoRollScale-Time"]]: true,
+                [PianoRollScale_module_default["Highlighted"]]: entry().isHighlighted,
+                [PianoRollScale_module_default["HighlightedBorder"]]: entry().hasHighlightedBorder
               }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
               _p$._v$ = classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && _el$2.style.setProperty("left", _p$._v$2 = _v$2);
@@ -1125,7 +1125,7 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
         });
       }
     }));
-    effect(() => className(_el$, _default7.PianoRollScale));
+    effect(() => className(_el$, PianoRollScale_module_default.PianoRollScale));
     return _el$;
   })();
 }, "PianoRollScale");
@@ -1148,7 +1148,7 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       const _el$ = _tmpl$42.cloneNode(true);
       spread(_el$, mergeProps$1(divProps, {
         get ["class"]() {
-          return _default.PianoRoll;
+          return PianoRoll_module_default.PianoRoll;
         }
       }), false, true);
       insert(_el$, createComponent(PianoRollScrollZoomViewPort_default, {
@@ -1227,9 +1227,9 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
               }
             }), null);
             effect((_p$) => {
-              const _v$ = _default.PianoRollContainer, _v$2 = {
-                [_default.PianoRollLeftColumn]: true,
-                [_default.showTrackList]: context.showTrackList
+              const _v$ = PianoRoll_module_default.PianoRollContainer, _v$2 = {
+                [PianoRoll_module_default.PianoRollLeftColumn]: true,
+                [PianoRoll_module_default.showTrackList]: context.showTrackList
               };
               _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
               _p$._v$2 = classList(_el$3, _v$2, _p$._v$2);

package/dist/index.jsx

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// src/PianoRoll.module.css
-var _default = {};
+// 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" };
 
 // src/PianoRoll.tsx
 import { Show as Show6, mergeProps as mergeProps4 } from "solid-js";
@@ -154,8 +154,8 @@ var usePianoRollContext = /* @__PURE__ */ __name(() => {
 }, "usePianoRollContext");
 var splitContextProps = /* @__PURE__ */ __name((allProps) => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
 
-// src/PianoRollKeys.module.css
-var _default2 = {};
+// 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" };
 
 // src/PianoRollKeys.tsx
 import { createEffect as createEffect3, createMemo as createMemo2, createSignal, Index, Show } from "solid-js";
@@ -256,8 +256,8 @@ var useViewPortDimension = /* @__PURE__ */ __name((name) => {
 // src/viewport/ScrollZoomContainer.tsx
 import { createEffect as createEffect2, createMemo, mergeProps as mergeProps2, splitProps as splitProps2 } from "solid-js";
 
-// src/viewport/ScrollZoomContainer.module.css
-var _default3 = {};
+// css-module:./ScrollZoomContainer.module.css#css-module
+var ScrollZoomContainer_module_default = { "ScrollZoomContainer": "_ScrollZoomContainer_f395r_1" };
 
 // src/viewport/ScrollZoomContainer.tsx
 var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
@@ -356,7 +356,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
       ...typeof divProps.style === "object" && divProps.style
     }}
     classList={{
-      [_default3.ScrollZoomContainer]: true,
+      [ScrollZoomContainer_module_default.ScrollZoomContainer]: true,
       ...divProps.classList
     }}
   ><div ref={scrollContentRef}><div
@@ -394,7 +394,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       window.removeEventListener("mouseup", handleMouseUp);
     }
   });
-  return <div class={_default2.PianoRollKeys} style={{ width: `${horizontalViewPort().pixelSize}px` }}><ScrollZoomContainer_default horizontalDimensionName="horizontalKeys" showScrollbar={false}><Index each={keys}>{(key) => {
+  return <div class={PianoRollKeys_module_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 +405,10 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
     const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
     return <Show when={verticalViewPort().isVisible(virtualDimensions())}><div
       classList={{
-        [_default2["Key"]]: true,
-        [_default2["black"]]: key().isBlack,
-        [_default2["white"]]: !key().isBlack,
-        [_default2["down"]]: isDown()
+        [PianoRollKeys_module_default["Key"]]: true,
+        [PianoRollKeys_module_default["black"]]: key().isBlack,
+        [PianoRollKeys_module_default["white"]]: !key().isBlack,
+        [PianoRollKeys_module_default["down"]]: isDown()
       }}
       onMouseDown={() => {
         setIsMouseDown(true);
@@ -455,8 +455,8 @@ var PianoRollKeys_default = PianoRollKeys;
 // src/PianoRollNotes.tsx
 import { createMemo as createMemo3, createSignal as createSignal2, For, Show as Show2 } from "solid-js";
 
-// src/PianoRollNotes.module.css
-var _default4 = {};
+// 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" };
 
 // src/PianoRollNotes.tsx
 var PianoRollNotes = /* @__PURE__ */ __name((props) => {
@@ -541,10 +541,10 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
     window.addEventListener("mouseup", stopDragging);
   }, "startDragging");
   const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
-    return noteDragMode2 ? [_default4.Note, _default4[noteDragMode2]] : [_default4.Note];
+    return noteDragMode2 ? [PianoRollNotes_module_default.Note, PianoRollNotes_module_default[noteDragMode2]] : [PianoRollNotes_module_default.Note];
   }, "getClasses");
   return <div
-    classList={{ [_default4.PianoRollNotes]: true }}
+    classList={{ [PianoRollNotes_module_default.PianoRollNotes]: true }}
     ref={props.ref}
     onMouseDown={(mouseDownEvent) => {
       mouseDownEvent.preventDefault();
@@ -639,8 +639,8 @@ var PianoRollNotes_default = PianoRollNotes;
 // src/PianoRollGrid.tsx
 import { createMemo as createMemo5, For as For2, Index as Index2, Show as Show3 } from "solid-js";
 
-// src/PianoRollGrid.module.css
-var _default5 = {};
+// 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" };
 
 // src/usePianoRollGrid.ts
 import { createMemo as createMemo4 } from "solid-js";
@@ -700,13 +700,13 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
   );
   const horizontalViewPort = createMemo5(() => useViewPortDimension("horizontal"));
   const gridArray = usePianoRollGrid_default();
-  return <div class={_default5.PianoRollGrid}>
+  return <div class={PianoRollGrid_module_default.PianoRollGrid}>
     <Index2 each={gridArray()}>{(entry) => {
       return <Show3 when={horizontalViewPort().isVisible(entry().virtualDimensions)}><div
         classList={{
-          [_default5["PianoRollGrid-Time"]]: true,
-          [_default5["Highlighted"]]: entry().isHighlighted,
-          [_default5["HighlightedBorder"]]: entry().hasHighlightedBorder
+          [PianoRollGrid_module_default["PianoRollGrid-Time"]]: true,
+          [PianoRollGrid_module_default["Highlighted"]]: entry().isHighlighted,
+          [PianoRollGrid_module_default["HighlightedBorder"]]: entry().hasHighlightedBorder
         }}
         style={{
           left: `${entry().virtualDimensions.offset}px`,
@@ -720,10 +720,10 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
       );
       return <Show3 when={verticalViewPort().isVisible(virtualDimensions())}><div
         classList={{
-          [_default5["PianoRollGrid-Row"]]: true,
-          [_default5["Key"]]: true,
-          [_default5["IsDark"]]: key().isBlack,
-          [_default5["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
+          [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)
         }}
         style={{
           top: `${virtualDimensions().offset}px`,
@@ -737,8 +737,8 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
       );
       return <Show3 when={verticalViewPort().isVisible(virtualDimensions())}><div
         classList={{
-          [_default5["PianoRollGrid-Row"]]: true,
-          [_default5["IsDark"]]: index() % 2 === 0
+          [PianoRollGrid_module_default["PianoRollGrid-Row"]]: true,
+          [PianoRollGrid_module_default["IsDark"]]: index() % 2 === 0
         }}
         style={{
           top: `${virtualDimensions().offset}px`,
@@ -790,20 +790,20 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
 }, "ZoomSliderControl");
 var ZoomSliderControl_default = ZoomSliderControl;
 
-// src/PianoRollTrackList.module.css
-var _default6 = {};
+// css-module:./PianoRollTrackList.module.css#css-module
+var PianoRollTrackList_module_default = { "PianoRollTrackList": "_PianoRollTrackList_11kti_1", "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={_default6.PianoRollTrackList}><Index3 each={context.tracks}>{(track, index) => {
+  return <div class={PianoRollTrackList_module_default.PianoRollTrackList}><Index3 each={context.tracks}>{(track, index) => {
     const virtualDimensions = createMemo7(() => viewPort().calculatePixelDimensions(index, 1));
     return <Show4 when={virtualDimensions().size > 0}><div
       classList={{
-        [_default6["Track"]]: true,
-        [_default6["selected"]]: index === context.selectedTrackIndex
+        [PianoRollTrackList_module_default["Track"]]: true,
+        [PianoRollTrackList_module_default["selected"]]: index === context.selectedTrackIndex
       }}
       title={track().name}
       style={{
@@ -944,8 +944,8 @@ var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 // src/PianoRollScale.tsx
 import { createMemo as createMemo8, Index as Index4, Show as Show5 } from "solid-js";
 
-// src/PianoRollScale.module.css
-var _default7 = {};
+// 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" };
 
 // src/PianoRollScale.tsx
 var PianoRollScale = /* @__PURE__ */ __name(() => {
@@ -957,7 +957,7 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
     context.onPlayHeadPositionChange(position, event);
   }, "updatePlayheadPosition");
   return <div
-    class={_default7.PianoRollScale}
+    class={PianoRollScale_module_default.PianoRollScale}
     onMouseDown={(event) => {
       updatePlayheadPosition(event);
       const handleMouseUp = /* @__PURE__ */ __name(() => {
@@ -970,15 +970,15 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
   ><Index4 each={grid()}>{(entry) => {
     return <Show5 when={horizontalViewPort().isVisible(entry().virtualDimensions)}><div
       classList={{
-        [_default7["PianoRollScale-Time"]]: true,
-        [_default7["Highlighted"]]: entry().isHighlighted,
-        [_default7["HighlightedBorder"]]: entry().hasHighlightedBorder
+        [PianoRollScale_module_default["PianoRollScale-Time"]]: true,
+        [PianoRollScale_module_default["Highlighted"]]: entry().isHighlighted,
+        [PianoRollScale_module_default["HighlightedBorder"]]: entry().hasHighlightedBorder
       }}
       style={{
         left: `${entry().virtualDimensions.offset}px`,
         width: `${entry().virtualDimensions.size}px`
       }}
-    ><Show5 when={entry().showLabel}><div class={_default7["PianoRollScale-Label"]}>{entry().label}</div></Show5></div></Show5>;
+    ><Show5 when={entry().showLabel}><div class={PianoRollScale_module_default["PianoRollScale-Label"]}>{entry().label}</div></Show5></div></Show5>;
   }}</Index4></div>;
 }, "PianoRollScale");
 var PianoRollScale_default = PianoRollScale;
@@ -987,13 +987,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={_default.PianoRoll}><PianoRollScrollZoomViewPort_default>
-    <div class={_default.PianoRollContainer}>
+  return <PianoRollContextProvider value={context}><div {...divProps} class={PianoRoll_module_default.PianoRoll}><PianoRollScrollZoomViewPort_default>
+    <div class={PianoRoll_module_default.PianoRollContainer}>
       <ZoomSliderControl_default orientation="vertical" dimensionName="verticalTracks" />
       <div
         classList={{
-          [_default.PianoRollLeftColumn]: true,
-          [_default.showTrackList]: context.showTrackList
+          [PianoRoll_module_default.PianoRollLeftColumn]: true,
+          [PianoRoll_module_default.showTrackList]: context.showTrackList
         }}
       >
         <Show6 when={context.showTrackList}><div

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.25",
+  "version": "0.0.26",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",
@@ -63,10 +63,13 @@
     "solid-js": "^1.6.0"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.13",
     "concurrently": "^7.6.0",
     "esbuild": "^0.17.5",
     "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",