solid-pianoroll 0.0.23 → 0.0.25

package/dist/{esm/index.js → index.js}

@@ -1,37 +1,13 @@
-import { createComponent, use, spread, mergeProps as mergeProps$1, insert, effect, template, delegateEvents, classList, setAttribute, className, memo } from 'solid-js/web';
-import { mergeProps, createContext, splitProps, useContext, createEffect, createMemo, createSignal, Index, Show, For } from 'solid-js';
+import { delegateEvents, createComponent, spread, mergeProps as mergeProps$1, insert, effect, setAttribute, memo, className, classList, template, use } from 'solid-js/web';
+import { createContext, createEffect, createSignal, mergeProps, Show, splitProps, createMemo, useContext, Index, For } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
-function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
-  var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') {
-    return;
-  }
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$6 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  height: 100%;\n  user-select: none;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n.PianoRoll-module_PianoRollLeftColumn__S6SZQ {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  max-width: 250px;\n  margin-top: 30px;\n}\n.PianoRoll-module_PianoRollLeftColumn__S6SZQ.PianoRoll-module_showTrackList__mqsrT {\n  width: 30%;\n  margin-top: 0;\n}\n\n.PianoRoll-module_PianoRollRightColumn__V98HV {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  flex: 1;\n  height: 100%;\n}\n";
-var styles$6 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7","PianoRollLeftColumn":"PianoRoll-module_PianoRollLeftColumn__S6SZQ","showTrackList":"PianoRoll-module_showTrackList__mqsrT","PianoRollRightColumn":"PianoRoll-module_PianoRollRightColumn__V98HV"};
-styleInject(css_248z$6);
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-const defaultState = {
+// src/PianoRoll.module.css
+var _default = {};
+var defaultState = {
   ppq: 0,
   mode: "keys",
   position: 0,
@@ -40,61 +16,94 @@ const defaultState = {
   verticalPosition: 44,
   verticalTrackZoom: 0.5,
   verticalTrackPosition: 0,
+  playHeadPosition: 0,
   gridDivision: 4,
   snapToGrid: true,
   duration: 0,
   tracks: [],
   selectedTrackIndex: 0,
   pressedKeys: {},
-  notesScrollerClientRect: {
-    left: 0,
-    width: 0,
-    top: 0,
-    height: 0
-  },
-  tracksScrollerClientRect: {
-    left: 0,
-    width: 0,
-    top: 0,
-    height: 0
-  }
+  notesScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
+  tracksScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 }
 };
-const propNameToHandlerName = name => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
-const pianoRollStatePropNames = [...Object.keys(defaultState), ...Object.keys(defaultState).map(propNameToHandlerName), "onNoteChange", "onInsertNote", "onRemoveNote", "onNoteDown", "onNoteUp", "isKeyDown"];
-const createPianoRollstate = initialState => {
+var propNameToHandlerName = /* @__PURE__ */ __name((name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`, "propNameToHandlerName");
+var pianoRollStatePropNames = [
+  ...Object.keys(defaultState),
+  ...Object.keys(defaultState).map(propNameToHandlerName),
+  "onNoteChange",
+  "onInsertNote",
+  "onRemoveNote",
+  "onNoteDown",
+  "onNoteUp",
+  "isKeyDown",
+  "snapValueToGridIfEnabled"
+];
+var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
   const [state, setState] = createStore({
     ...defaultState,
     ...initialState
   });
-  const handlers = Object.fromEntries(Object.entries(state).map(entry => {
-    return [propNameToHandlerName(entry[0]), value => setState(entry[0], value)];
-  }));
-  const updateNotes = async (trackIndex, getNotes) => {
+  const handlers = Object.fromEntries(
+    Object.entries(state).map((entry) => {
+      const handlerName = propNameToHandlerName(entry[0]);
+      return [
+        handlerName,
+        (value, originalEvent) => {
+          const handler = initialState?.[handlerName];
+          setState(entry[0], value);
+          if (handler) {
+            handler(value, originalEvent);
+          }
+        }
+      ];
+    })
+  );
+  const onPlayheadPositionChange = /* @__PURE__ */ __name((playheadPosition, originalEvent) => {
+    handlers.onPlayHeadPositionChange(
+      snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey)
+    );
+  }, "onPlayheadPositionChange");
+  const updateNotes = /* @__PURE__ */ __name(async (trackIndex, getNotes) => {
     const track = state.tracks[trackIndex];
-    if (!track) return;
+    if (!track)
+      return;
     const notes = track.notes;
-    handlers.onTracksChange([...state.tracks.slice(0, trackIndex), {
-      ...track,
-      notes: getNotes(notes)
-    }, ...state.tracks.slice(trackIndex + 1)]);
-  };
-  const onNoteChange = (trackIndex, noteIndex, note) => {
-    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), note, ...notes.slice(noteIndex + 1)]);
-  };
-  const onInsertNote = (trackIndex, note) => {
+    handlers.onTracksChange([
+      ...state.tracks.slice(0, trackIndex),
+      { ...track, notes: getNotes(notes) },
+      ...state.tracks.slice(trackIndex + 1)
+    ]);
+  }, "updateNotes");
+  const onNoteChange = /* @__PURE__ */ __name((trackIndex, noteIndex, note) => {
+    updateNotes(trackIndex, (notes) => [
+      ...notes.slice(0, noteIndex),
+      note,
+      ...notes.slice(noteIndex + 1)
+    ]);
+  }, "onNoteChange");
+  const onInsertNote = /* @__PURE__ */ __name((trackIndex, note) => {
     const track = state.tracks[trackIndex];
-    if (!track) return -1;
+    if (!track)
+      return -1;
     const notes = track.notes;
-    const newNoteIndex = Math.max(notes.findIndex(({
-      ticks
-    }) => ticks > note.ticks), 0);
-    updateNotes(trackIndex, notes => [...notes.slice(0, newNoteIndex), note, ...notes.slice(newNoteIndex)]);
+    const newNoteIndex = Math.max(
+      notes.findIndex(({ ticks }) => ticks > note.ticks),
+      0
+    );
+    updateNotes(trackIndex, (notes2) => [
+      ...notes2.slice(0, newNoteIndex),
+      note,
+      ...notes2.slice(newNoteIndex)
+    ]);
     return newNoteIndex;
-  };
-  const onRemoveNote = (trackIndex, noteIndex) => {
-    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), ...notes.slice(noteIndex + 1)]);
-  };
-  const updateKeyPressedState = (trackIndex, keyNumber, value) => {
+  }, "onInsertNote");
+  const onRemoveNote = /* @__PURE__ */ __name((trackIndex, noteIndex) => {
+    updateNotes(trackIndex, (notes) => [
+      ...notes.slice(0, noteIndex),
+      ...notes.slice(noteIndex + 1)
+    ]);
+  }, "onRemoveNote");
+  const updateKeyPressedState = /* @__PURE__ */ __name((trackIndex, keyNumber, value) => {
     handlers.onPressedKeysChange?.({
       ...state.pressedKeys,
       [trackIndex]: {
@@ -102,14 +111,18 @@ const createPianoRollstate = initialState => {
         [keyNumber]: value
       }
     });
-  };
-  const onNoteDown = (trackIndex, keyNumber) => {
+  }, "updateKeyPressedState");
+  const onNoteDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
     updateKeyPressedState(trackIndex, keyNumber, true);
-  };
-  const onNoteUp = (trackIndex, keyNumber) => {
+  }, "onNoteDown");
+  const onNoteUp = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
     updateKeyPressedState(trackIndex, keyNumber, false);
-  };
-  const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
+  }, "onNoteUp");
+  const isKeyDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber], "isKeyDown");
+  const snapValueToGridIfEnabled = /* @__PURE__ */ __name((value, altKey) => {
+    const gridDivisionTicks = state.ppq * 4 / state.gridDivision;
+    return state.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks) * gridDivisionTicks : value;
+  }, "snapValueToGridIfEnabled");
   return mergeProps(state, {
     ...handlers,
     onNoteChange,
@@ -117,30 +130,33 @@ const createPianoRollstate = initialState => {
     onRemoveNote,
     onNoteDown,
     onNoteUp,
-    isKeyDown
+    isKeyDown,
+    snapValueToGridIfEnabled,
+    onPlayheadPositionChange
   });
-};
+}, "createPianoRollstate");
+var usePianoRollState_default = createPianoRollstate;
 
-const PianoRollContext = createContext();
-const PianoRollContextProvider = PianoRollContext.Provider;
-const usePianoRollContext = () => {
+// src/PianoRollContext.tsx
+var PianoRollContext = createContext();
+var PianoRollContextProvider = PianoRollContext.Provider;
+var usePianoRollContext = /* @__PURE__ */ __name(() => {
   const context = useContext(PianoRollContext);
-  if (!context) throw new Error("No PianoRollContext found");
+  if (!context)
+    throw new Error("No PianoRollContext found");
   return context;
-};
-const splitContextProps = allProps => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]);
-
-var css_248z$5 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  border-width: 0;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-left-width: 1px;\n  background: white;\n  cursor: pointer;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  transition-property: background-color, box-shadow;\n  transition-duration: 200ms;\n  transition-timing-function: ease-out;\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 120%;\n  left: -20%;\n  border-color: #000;\n  border-style: solid;\n  transform: rotateX(0deg);\n  perspective: 100px;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n  border-top-right-radius: 12%;\n  border-bottom-right-radius: 12%;\n  margin-left: -20%;\n  z-index: 1;\n  border: 1px black outset;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n  border-top-right-radius: 4%;\n  border-bottom-right-radius: 4%;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n  transform: rotateX(0deg) rotateY(20deg);\n}\n";
-var styles$5 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","down":"PianoRollKeys-module_down__GcNeZ"};
-styleInject(css_248z$5);
+}, "usePianoRollContext");
+var splitContextProps = /* @__PURE__ */ __name((allProps) => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
 
+// src/PianoRollKeys.module.css
+var _default2 = {};
 function createViewPortDimension(getState) {
-  const getStateWithFunctions = () => {
-    const state = getState();
-    const onZoomChange = zoom => state.onZoomChange?.(clamp(zoom, state.minZoom, state.maxZoom));
-    const onPositionChange = position => state.onPositionChange?.(position);
+  const getStateWithFunctions = /* @__PURE__ */ __name(() => {
+    const state2 = getState();
+    const onZoomChange = /* @__PURE__ */ __name((zoom) => state2.onZoomChange?.(clamp(zoom, state2.minZoom, state2.maxZoom)), "onZoomChange");
+    const onPositionChange = /* @__PURE__ */ __name((position) => state2.onPositionChange?.(position), "onPositionChange");
     return {
-      ...state,
+      ...state2,
       onZoomChange,
       onPositionChange,
       calculatePixelOffset,
@@ -151,46 +167,49 @@ function createViewPortDimension(getState) {
       calculateMaxPosition,
       isVisible
     };
-  };
+  }, "getStateWithFunctions");
   const [state, setState] = createStore(getStateWithFunctions());
   createEffect(() => setState(getStateWithFunctions()));
   function calculatePixelValue(position = state.position) {
     const virtualSize = state.pixelSize * state.zoom;
     return position / state.range * virtualSize;
   }
+  __name(calculatePixelValue, "calculatePixelValue");
   function calculatePixelOffset(position) {
     return calculatePixelValue(position) - calculatePixelValue(state.position);
   }
+  __name(calculatePixelOffset, "calculatePixelOffset");
   function calculatePosition(offset) {
     const percentX = (offset - state.pixelOffset) / state.pixelSize;
     const position = state.position + percentX * calculateVisibleRange();
     return position;
   }
+  __name(calculatePosition, "calculatePosition");
   function calculateVisibleRange() {
     return state.range / state.zoom;
   }
+  __name(calculateVisibleRange, "calculateVisibleRange");
   function calculateMaxPosition() {
     return state.range - state.range / state.zoom;
   }
+  __name(calculateMaxPosition, "calculateMaxPosition");
   function calculatePixelDimensions(position, length) {
     const offset = calculatePixelOffset(position);
     const size = calculatePixelValue(length);
-    return {
-      offset,
-      size
-    };
+    return { offset, size };
   }
-  function isVisible({
-    offset,
-    size
-  }) {
+  __name(calculatePixelDimensions, "calculatePixelDimensions");
+  function isVisible({ offset, size }) {
     return offset + size > 0 && offset < state.pixelSize;
   }
+  __name(isVisible, "isVisible");
   return state;
 }
-const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+__name(createViewPortDimension, "createViewPortDimension");
+var clamp = /* @__PURE__ */ __name((value, min, max) => Math.max(min, Math.min(max, value)), "clamp");
 
-const defaultViewPortProps = {
+// src/viewport/ScrollZoomViewPort.tsx
+var defaultViewPortProps = {
   pixelOffset: 0,
   position: 0,
   range: 1,
@@ -198,9 +217,9 @@ const defaultViewPortProps = {
   minZoom: 1,
   maxZoom: Infinity
 };
-const ScrollZoomViewPort = props => {
+var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
   const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({
-    name: name,
+    name,
     ...defaultViewPortProps,
     ...viewPortProps()
   })));
@@ -213,21 +232,22 @@ const ScrollZoomViewPort = props => {
       return props.children;
     }
   });
-};
-const ScrollZoomViewPortContext = createContext([]);
-const useViewPortDimension = name => {
+}, "ScrollZoomViewPort");
+var ScrollZoomViewPortContext = createContext([]);
+var useViewPortDimension = /* @__PURE__ */ __name((name) => {
   const viewPorts = useContext(ScrollZoomViewPortContext);
-  const viewPort = name ? viewPorts.find(viewPort => viewPort.name === name) : viewPorts[viewPorts.length - 1];
-  if (!viewPort) throw new Error(`ViewPort dimension "${name}" not found.`);
+  const viewPort = name ? viewPorts.find((viewPort2) => viewPort2.name === name) : viewPorts[viewPorts.length - 1];
+  if (!viewPort)
+    throw new Error(`ViewPort dimension "${name}" not found.`);
   return viewPort;
-};
+}, "useViewPortDimension");
 
-var css_248z$4 = ".ScrollZoomContainer-module_ScrollZoomContainer__o2bRt {\n  height: 100%;\n  width: 100%;\n  z-index: 4;\n}\n";
-var styles$4 = {"ScrollZoomContainer":"ScrollZoomContainer-module_ScrollZoomContainer__o2bRt"};
-styleInject(css_248z$4);
+// src/viewport/ScrollZoomContainer.module.css
+var _default3 = {};
 
-const _tmpl$$8 = /*#__PURE__*/template(`<div><div><div><div></div></div></div></div>`, 8);
-const ScrollZoomContainer = props => {
+// src/viewport/ScrollZoomContainer.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div><div><div></div></div></div></div>`, 8);
+var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
   let scrollContentRef;
   const [ownProps, divProps] = splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
   const propsWithDefaults = mergeProps({
@@ -237,7 +257,7 @@ const ScrollZoomContainer = props => {
   }, ownProps);
   const verticalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
   const horizontalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
-  const handleScroll = event => {
+  const handleScroll = /* @__PURE__ */ __name((event) => {
     event.preventDefault();
     if (didUpdateScroll) {
       didUpdateScroll = false;
@@ -257,8 +277,8 @@ const ScrollZoomContainer = props => {
     const scrollLeftAmount = scrollLeft / (scrollWidth - width);
     verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
     horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
-  };
-  const handleWheel = event => {
+  }, "handleScroll");
+  const handleWheel = /* @__PURE__ */ __name((event) => {
     if (event.altKey) {
       event.preventDefault();
       if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
@@ -275,7 +295,7 @@ const ScrollZoomContainer = props => {
       event.currentTarget.scrollLeft += event.deltaX;
       event.currentTarget.scrollTop += event.deltaY;
     }
-  };
+  }, "handleWheel");
   let didUpdateScroll = false;
   createEffect(() => {
     const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
@@ -284,7 +304,8 @@ const ScrollZoomContainer = props => {
     const scrollLeftAmount = maxPosition > 0 ? horizontalViewPort().position / maxPosition : 0;
     const height = verticalViewPort().pixelSize;
     const width = horizontalViewPort().pixelSize;
-    if (!scrollContentRef?.parentElement) return;
+    if (!scrollContentRef?.parentElement)
+      return;
     const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
     const scrollTop = scrollTopAmount * (scrollDivHeight - height);
     const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
@@ -298,10 +319,7 @@ const ScrollZoomContainer = props => {
     });
   });
   return (() => {
-    const _el$ = _tmpl$$8.cloneNode(true),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild,
-      _el$4 = _el$3.firstChild;
+    const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
     _el$.addEventListener("wheel", handleWheel);
     _el$.addEventListener("scroll", handleScroll);
     const _ref$ = props.ref;
@@ -310,12 +328,12 @@ const ScrollZoomContainer = props => {
       get style() {
         return {
           overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
-          ...(typeof divProps.style === "object" && divProps.style)
+          ...typeof divProps.style === "object" && divProps.style
         };
       },
       get classList() {
         return {
-          [styles$4.ScrollZoomContainer]: true,
+          [_default3.ScrollZoomContainer]: true,
           ...divProps.classList
         };
       }
@@ -328,35 +346,34 @@ const ScrollZoomContainer = props => {
     _el$3.style.setProperty("display", "flex");
     _el$4.style.setProperty("position", "relative");
     insert(_el$4, () => props.children);
-    effect(_p$ => {
-      const _v$ = `${verticalViewPort().pixelSize}px`,
-        _v$2 = `${horizontalViewPort().pixelSize}px`,
-        _v$3 = `${verticalViewPort().pixelSize}px`,
-        _v$4 = `${horizontalViewPort().pixelSize}px`;
+    effect((_p$) => {
+      const _v$ = `${verticalViewPort().pixelSize}px`, _v$2 = `${horizontalViewPort().pixelSize}px`, _v$3 = `${verticalViewPort().pixelSize}px`, _v$4 = `${horizontalViewPort().pixelSize}px`;
       _v$ !== _p$._v$ && _el$3.style.setProperty("height", _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && _el$3.style.setProperty("width", _p$._v$2 = _v$2);
       _v$3 !== _p$._v$3 && _el$4.style.setProperty("height", _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && _el$4.style.setProperty("width", _p$._v$4 = _v$4);
       return _p$;
     }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: void 0
     });
     return _el$;
   })();
-};
+}, "ScrollZoomContainer");
+var ScrollZoomContainer_default = ScrollZoomContainer;
 
-const _tmpl$$7 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollKeys = () => {
+// src/PianoRollKeys.tsx
+var _tmpl$2 = /* @__PURE__ */ template(`<div></div>`, 2);
+var PianoRollKeys = /* @__PURE__ */ __name(() => {
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontalKeys"));
   const [isMouseDown, setIsMouseDown] = createSignal(false);
   const context = usePianoRollContext();
-  const handleMouseUp = () => {
+  const handleMouseUp = /* @__PURE__ */ __name(() => {
     setIsMouseDown(false);
-  };
+  }, "handleMouseUp");
   createEffect(() => {
     if (isMouseDown()) {
       window.addEventListener("mouseup", handleMouseUp);
@@ -365,14 +382,14 @@ const PianoRollKeys = () => {
     }
   });
   return (() => {
-    const _el$ = _tmpl$$7.cloneNode(true);
-    insert(_el$, createComponent(ScrollZoomContainer, {
+    const _el$ = _tmpl$2.cloneNode(true);
+    insert(_el$, createComponent(ScrollZoomContainer_default, {
       horizontalDimensionName: "horizontalKeys",
       showScrollbar: false,
       get children() {
         return createComponent(Index, {
           each: keys,
-          children: key => {
+          children: (key) => {
             const isDown = createMemo(() => context.isKeyDown(context.selectedTrackIndex, key().number));
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
             const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
@@ -382,7 +399,7 @@ const PianoRollKeys = () => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$2 = _tmpl$$7.cloneNode(true);
+                const _el$2 = _tmpl$2.cloneNode(true);
                 _el$2.addEventListener("mouseleave", () => {
                   if (isMouseDown()) {
                     context.onNoteUp(context.selectedTrackIndex, key().number);
@@ -400,18 +417,13 @@ const PianoRollKeys = () => {
                   setIsMouseDown(true);
                   context.onNoteDown(context.selectedTrackIndex, key().number);
                 };
-                effect(_p$ => {
+                effect((_p$) => {
                   const _v$3 = {
-                      [styles$5["Key"]]: true,
-                      [styles$5["black"]]: key().isBlack,
-                      [styles$5["white"]]: !key().isBlack,
-                      [styles$5["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` : "";
+                    [_default2["Key"]]: true,
+                    [_default2["black"]]: key().isBlack,
+                    [_default2["white"]]: !key().isBlack,
+                    [_default2["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);
                   _v$5 !== _p$._v$5 && setAttribute(_el$2, "data-index", _p$._v$5 = _v$5);
@@ -420,12 +432,12 @@ const PianoRollKeys = () => {
                   _v$8 !== _p$._v$8 && _el$2.style.setProperty("box-shadow", _p$._v$8 = _v$8);
                   return _p$;
                 }, {
-                  _v$3: undefined,
-                  _v$4: undefined,
-                  _v$5: undefined,
-                  _v$6: undefined,
-                  _v$7: undefined,
-                  _v$8: undefined
+                  _v$3: void 0,
+                  _v$4: void 0,
+                  _v$5: void 0,
+                  _v$6: void 0,
+                  _v$7: void 0,
+                  _v$8: void 0
                 });
                 return _el$2;
               }
@@ -434,36 +446,36 @@ const PianoRollKeys = () => {
         });
       }
     }));
-    effect(_p$ => {
-      const _v$ = styles$5.PianoRollKeys,
-        _v$2 = `${horizontalViewPort().pixelSize}px`;
+    effect((_p$) => {
+      const _v$ = _default2.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$;
     }, {
-      _v$: undefined,
-      _v$2: undefined
+      _v$: void 0,
+      _v$2: void 0
     });
     return _el$;
   })();
-};
-const blackKeys = [1, 3, 6, 8, 10];
-const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
-const keys = Array.from({
+}, "PianoRollKeys");
+var blackKeys = [1, 3, 6, 8, 10];
+var keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+var keys = Array.from({
   length: 128
 }).map((_, index) => ({
   number: index,
   name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
   isBlack: blackKeys.includes(index % 12)
 }));
+var PianoRollKeys_default = PianoRollKeys;
 delegateEvents(["mousedown", "mouseup"]);
 
-var css_248z$3 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: absolute;\n  flex: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: grab;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb {\n  position: absolute;\n  box-sizing: border-box;\n  border-width: 0.5px;\n  border-style: solid;\n  border-color: #a00;\n  cursor: move;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimStart__vuBlj {\n  cursor: w-resize;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimEnd__zPdjr {\n  cursor: e-resize;\n}";
-var styles$3 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
-styleInject(css_248z$3);
+// src/PianoRollNotes.module.css
+var _default4 = {};
 
-const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollNotes = props => {
+// src/PianoRollNotes.tsx
+var _tmpl$3 = /* @__PURE__ */ template(`<div></div>`, 2);
+var PianoRollNotes = /* @__PURE__ */ __name((props) => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
@@ -474,8 +486,7 @@ const PianoRollNotes = props => {
   const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
   const [diffPosition, setDiffPosition] = createSignal(0);
   const [getInitialNote, setInitialNote] = createSignal();
-  const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
-  const calculateNoteDragValues = event => {
+  const calculateNoteDragValues = /* @__PURE__ */ __name((event) => {
     const targetTrackIndex = context.mode === "tracks" ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1) : currentNoteTrackIndex() > -1 ? currentNoteTrackIndex() : context.selectedTrackIndex;
     const midi = context.mode === "keys" ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY)) : getInitialNote()?.midi ?? 60;
     const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
@@ -484,32 +495,33 @@ const PianoRollNotes = props => {
       midi,
       horiontalPosition
     };
-  };
-  const handleMouseMove = mouseMoveEvent => {
+  }, "calculateNoteDragValues");
+  const handleMouseMove = /* @__PURE__ */ __name((mouseMoveEvent) => {
     mouseMoveEvent.preventDefault();
     mouseMoveEvent.stopPropagation();
     const note = getInitialNote();
-    if (!note) return;
+    if (!note)
+      return;
     const {
       targetTrackIndex,
       midi,
       horiontalPosition
     } = calculateNoteDragValues(mouseMoveEvent);
-    const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+    const ticks = context.snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
     const updatedNote = {
       ...note,
       midi,
-      ...(noteDragMode() === "move" && {
+      ...noteDragMode() === "move" && {
         ticks
-      }),
-      ...(noteDragMode() === "trimStart" && {
+      },
+      ...noteDragMode() === "trimStart" && {
         ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
-        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
-      }),
-      ...(noteDragMode() === "trimEnd" && {
+        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+      },
+      ...noteDragMode() === "trimEnd" && {
         ticks: ticks < note.ticks ? ticks : note.ticks,
-        durationTicks: ticks < note.ticks ? note.ticks - ticks : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
-      })
+        durationTicks: ticks < note.ticks ? note.ticks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+      }
     };
     const previousTrackIndex = currentNoteTrackIndex();
     const previousNoteIndex = currentNoteIndex();
@@ -523,24 +535,24 @@ const PianoRollNotes = props => {
         setCurrentNoteIndex(newNoteIndex);
       }
     }
-  };
-  const stopDragging = () => {
+  }, "handleMouseMove");
+  const stopDragging = /* @__PURE__ */ __name(() => {
     window.removeEventListener("mousemove", handleMouseMove);
     window.removeEventListener("mouseup", stopDragging);
     setIsDragging(false);
     setCurrentNoteIndex(-1);
     setCurrentNoteTrackIndex(-1);
-  };
-  const startDragging = () => {
+  }, "stopDragging");
+  const startDragging = /* @__PURE__ */ __name(() => {
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", stopDragging);
-  };
-  const getClasses = noteDragMode => {
-    return noteDragMode ? [styles$3.Note, styles$3[noteDragMode]] : [styles$3.Note];
-  };
+  }, "startDragging");
+  const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
+    return noteDragMode2 ? [_default4.Note, _default4[noteDragMode2]] : [_default4.Note];
+  }, "getClasses");
   return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
-    _el$.$$mousedown = mouseDownEvent => {
+    const _el$ = _tmpl$3.cloneNode(true);
+    _el$.$$mousedown = (mouseDownEvent) => {
       mouseDownEvent.preventDefault();
       mouseDownEvent.stopPropagation();
       const {
@@ -548,7 +560,7 @@ const PianoRollNotes = props => {
         midi,
         horiontalPosition
       } = calculateNoteDragValues(mouseDownEvent);
-      const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
+      const ticks = context.snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey, context);
       const durationTicks = gridDivisionTicks();
       const newNote = {
         midi,
@@ -589,8 +601,8 @@ const PianoRollNotes = props => {
                     return memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
                   },
                   get children() {
-                    const _el$2 = _tmpl$$6.cloneNode(true);
-                    _el$2.$$mousedown = event => {
+                    const _el$2 = _tmpl$3.cloneNode(true);
+                    _el$2.$$mousedown = (event) => {
                       event.stopPropagation();
                       const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
                       setDiffPosition(noteDragMode() === "trimEnd" ? -(note.ticks + note.durationTicks - initialPosition) : initialPosition - note.ticks);
@@ -600,12 +612,13 @@ const PianoRollNotes = props => {
                       setInitialNote(note);
                       startDragging();
                     };
-                    _el$2.$$dblclick = event => {
+                    _el$2.$$dblclick = (event) => {
                       event.stopPropagation();
                       context.onRemoveNote?.(trackIndex(), noteIndex());
                     };
-                    _el$2.$$mousemove = event => {
-                      if (isDragging()) return;
+                    _el$2.$$mousemove = (event) => {
+                      if (isDragging())
+                        return;
                       event.stopPropagation();
                       const relativeX = horizontalViewPort().calculatePixelValue(horizontalViewPort().calculatePosition(event.clientX));
                       const noteStartX = horizontalViewPort().calculatePixelValue(note.ticks);
@@ -613,27 +626,24 @@ const PianoRollNotes = props => {
                       setNoteDragMode(relativeX - noteStartX < 3 ? "trimStart" : noteEndX - relativeX < 3 ? "trimEnd" : "move");
                     };
                     setAttribute(_el$2, "draggable", false);
-                    effect(_p$ => {
-                      const _v$ = getClasses(noteDragMode()).join(" "),
-                        _v$2 = `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
-                        _v$3 = `${verticalVirtualDimensions().offset}px`,
-                        _v$4 = `${verticalVirtualDimensions().size}px`,
-                        _v$5 = `${horizontalDimensions().offset}px`,
-                        _v$6 = `${horizontalDimensions().size}px`;
+                    effect((_p$) => {
+                      const _v$ = getClasses(noteDragMode()).join(" "), _v$2 = `${track.color}`, _v$3 = (note.velocity / 128 + 2) / 3, _v$4 = `${verticalVirtualDimensions().offset}px`, _v$5 = `${verticalVirtualDimensions().size}px`, _v$6 = `${horizontalDimensions().offset}px`, _v$7 = `${horizontalDimensions().size}px`;
                       _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
                       _v$2 !== _p$._v$2 && _el$2.style.setProperty("background-color", _p$._v$2 = _v$2);
-                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
-                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
-                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("left", _p$._v$5 = _v$5);
-                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("width", _p$._v$6 = _v$6);
+                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("opacity", _p$._v$3 = _v$3);
+                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("top", _p$._v$4 = _v$4);
+                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("height", _p$._v$5 = _v$5);
+                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("left", _p$._v$6 = _v$6);
+                      _v$7 !== _p$._v$7 && _el$2.style.setProperty("width", _p$._v$7 = _v$7);
                       return _p$;
                     }, {
-                      _v$: undefined,
-                      _v$2: undefined,
-                      _v$3: undefined,
-                      _v$4: undefined,
-                      _v$5: undefined,
-                      _v$6: undefined
+                      _v$: void 0,
+                      _v$2: void 0,
+                      _v$3: void 0,
+                      _v$4: void 0,
+                      _v$5: void 0,
+                      _v$6: void 0,
+                      _v$7: void 0
                     });
                     return _el$2;
                   }
@@ -644,26 +654,26 @@ const PianoRollNotes = props => {
         });
       }
     }));
-    effect(_$p => classList(_el$, {
-      [styles$3.PianoRollNotes]: true
+    effect((_$p) => classList(_el$, {
+      [_default4.PianoRollNotes]: true
     }, _$p));
     return _el$;
   })();
-};
+}, "PianoRollNotes");
+var PianoRollNotes_default = PianoRollNotes;
 delegateEvents(["mousedown", "mousemove", "dblclick"]);
 
-var css_248z$2 = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs {\n  position: absolute;\n  border-style: solid;\n  border-color: gray;\n  width: 100%;\n  border-width: 0;\n}\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs.PianoRollGrid-module_IsDark__jRyyy {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs.PianoRollGrid-module_Key__8ZwPN {\n  border-width: 0px 1px 0px 0;\n}\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs.PianoRollGrid-module_IsBlackAndNextIsWhite__UF8O2 {\n  background-color: rgba(0, 0, 0, 0.2);\n  border-width: 0.1px 1px 0.1px 0;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n  border-left-color: #bbb;\n  background: #ccc;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E.PianoRollGrid-module_Highlighted__N1J6q {\n  background: #ddd;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E.PianoRollGrid-module_HighlightedBorder__Vnrff {\n  border-left-color: gray;\n}\n";
-var styles$2 = {"PianoRollGrid":"PianoRollGrid-module_PianoRollGrid__tG119","PianoRollGrid-Row":"PianoRollGrid-module_PianoRollGrid-Row__nRMCs","IsDark":"PianoRollGrid-module_IsDark__jRyyy","Key":"PianoRollGrid-module_Key__8ZwPN","IsBlackAndNextIsWhite":"PianoRollGrid-module_IsBlackAndNextIsWhite__UF8O2","PianoRollGrid-Time":"PianoRollGrid-module_PianoRollGrid-Time__jLz3E","Highlighted":"PianoRollGrid-module_Highlighted__N1J6q","HighlightedBorder":"PianoRollGrid-module_HighlightedBorder__Vnrff"};
-styleInject(css_248z$2);
-
-const usePianoRollGrid = () => {
+// src/PianoRollGrid.module.css
+var _default5 = {};
+var usePianoRollGrid = /* @__PURE__ */ __name(() => {
   const context = usePianoRollContext();
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const measureTicks = createMemo(() => context.ppq * 4);
   const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);
   function calculateVisibleGridDivisorTicks(value) {
     const visibleRange = horizontalViewPort().calculateVisibleRange();
-    if (visibleRange <= 0) return 0;
+    if (visibleRange <= 0)
+      return 0;
     if (visibleRange / value > 100) {
       return calculateVisibleGridDivisorTicks(value * 2);
     }
@@ -672,13 +682,16 @@ const usePianoRollGrid = () => {
     }
     return value;
   }
-  const gridDivisorTicks = createMemo(() => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks()));
+  __name(calculateVisibleGridDivisorTicks, "calculateVisibleGridDivisorTicks");
+  const gridDivisorTicks = createMemo(
+    () => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks())
+  );
   const gridArray = createMemo(() => {
-    const numberOfLines = Math.ceil(horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1);
+    const numberOfLines = Math.ceil(
+      horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1
+    );
     const startIndex = Math.floor(context.position / gridDivisorTicks());
-    return Array.from({
-      length: numberOfLines
-    }).map((_, i) => {
+    return Array.from({ length: numberOfLines }).map((_, i) => {
       const index = i + startIndex;
       const ticks = index * gridDivisorTicks();
       const measurePosition = ticks / context.ppq / 4 + 1;
@@ -697,43 +710,43 @@ const usePianoRollGrid = () => {
     });
   });
   return gridArray;
-};
+}, "usePianoRollGrid");
+var usePianoRollGrid_default = usePianoRollGrid;
 
-const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollGrid = () => {
+// src/PianoRollGrid.tsx
+var _tmpl$4 = /* @__PURE__ */ template(`<div></div>`, 2);
+var PianoRollGrid = /* @__PURE__ */ __name(() => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
-  const gridArray = usePianoRollGrid();
+  const gridArray = usePianoRollGrid_default();
   return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true);
+    const _el$ = _tmpl$4.cloneNode(true);
     insert(_el$, createComponent(Index, {
       get each() {
         return gridArray();
       },
-      children: entry => {
+      children: (entry) => {
         return createComponent(Show, {
           get when() {
             return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$$5.cloneNode(true);
-            effect(_p$ => {
+            const _el$2 = _tmpl$4.cloneNode(true);
+            effect((_p$) => {
               const _v$ = {
-                  [styles$2["PianoRollGrid-Time"]]: true,
-                  [styles$2["Highlighted"]]: entry().isHighlighted,
-                  [styles$2["HighlightedBorder"]]: entry().hasHighlightedBorder
-                },
-                _v$2 = `${entry().virtualDimensions.offset}px`,
-                _v$3 = `${entry().virtualDimensions.size}px`;
+                [_default5["PianoRollGrid-Time"]]: true,
+                [_default5["Highlighted"]]: entry().isHighlighted,
+                [_default5["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);
               _v$3 !== _p$._v$3 && _el$2.style.setProperty("width", _p$._v$3 = _v$3);
               return _p$;
             }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined
+              _v$: void 0,
+              _v$2: void 0,
+              _v$3: void 0
             });
             return _el$2;
           }
@@ -747,31 +760,29 @@ const PianoRollGrid = () => {
       get children() {
         return createComponent(Index, {
           each: keys,
-          children: key => {
+          children: (key) => {
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
             return createComponent(Show, {
               get when() {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$3 = _tmpl$$5.cloneNode(true);
-                effect(_p$ => {
+                const _el$3 = _tmpl$4.cloneNode(true);
+                effect((_p$) => {
                   const _v$4 = {
-                      [styles$2["PianoRollGrid-Row"]]: true,
-                      [styles$2["Key"]]: true,
-                      [styles$2["IsDark"]]: key().isBlack,
-                      [styles$2["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
-                    },
-                    _v$5 = `${virtualDimensions().offset}px`,
-                    _v$6 = `${virtualDimensions().size}px`;
+                    [_default5["PianoRollGrid-Row"]]: true,
+                    [_default5["Key"]]: true,
+                    [_default5["IsDark"]]: key().isBlack,
+                    [_default5["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);
                   _v$6 !== _p$._v$6 && _el$3.style.setProperty("height", _p$._v$6 = _v$6);
                   return _p$;
                 }, {
-                  _v$4: undefined,
-                  _v$5: undefined,
-                  _v$6: undefined
+                  _v$4: void 0,
+                  _v$5: void 0,
+                  _v$6: void 0
                 });
                 return _el$3;
               }
@@ -796,22 +807,20 @@ const PianoRollGrid = () => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$4 = _tmpl$$5.cloneNode(true);
-                effect(_p$ => {
+                const _el$4 = _tmpl$4.cloneNode(true);
+                effect((_p$) => {
                   const _v$7 = {
-                      [styles$2["PianoRollGrid-Row"]]: true,
-                      [styles$2["IsDark"]]: index() % 2 === 0
-                    },
-                    _v$8 = `${virtualDimensions().offset}px`,
-                    _v$9 = `${virtualDimensions().size}px`;
+                    [_default5["PianoRollGrid-Row"]]: true,
+                    [_default5["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);
                   _v$9 !== _p$._v$9 && _el$4.style.setProperty("height", _p$._v$9 = _v$9);
                   return _p$;
                 }, {
-                  _v$7: undefined,
-                  _v$8: undefined,
-                  _v$9: undefined
+                  _v$7: void 0,
+                  _v$8: void 0,
+                  _v$9: void 0
                 });
                 return _el$4;
               }
@@ -820,19 +829,19 @@ const PianoRollGrid = () => {
         });
       }
     }), null);
-    effect(() => className(_el$, styles$2.PianoRollGrid));
+    effect(() => className(_el$, _default5.PianoRollGrid));
     return _el$;
   })();
-};
-
-const _tmpl$$4 = /*#__PURE__*/template(`<input step="0.01">`, 1);
-const ZoomSliderControl = props => {
+}, "PianoRollGrid");
+var PianoRollGrid_default = PianoRollGrid;
+var _tmpl$5 = /* @__PURE__ */ template(`<input step="0.01">`, 1);
+var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
   const propsWithDefaults = mergeProps({
     orientation: "horizontal"
   }, props);
   const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true);
+    const _el$ = _tmpl$5.cloneNode(true);
     spread(_el$, mergeProps$1({
       get min() {
         return dimension().minZoom;
@@ -844,7 +853,7 @@ const ZoomSliderControl = props => {
       get value() {
         return dimension().zoom;
       },
-      "onInput": event => {
+      "onInput": (event) => {
         const value = event.currentTarget.valueAsNumber;
         dimension().onZoomChange?.(value);
       },
@@ -860,34 +869,32 @@ const ZoomSliderControl = props => {
           width: "16px",
           transform: "rotate(180deg)",
           ...{
-            "writing-mode": "bt-lr" /* IE */,
-            "-webkit-appearance": "slider-vertical" /* WebKit */
+            "writing-mode": "bt-lr",
+            "-webkit-appearance": "slider-vertical"
           },
-
-          ...(typeof props.style === "object" && props.style)
+          ...typeof props.style === "object" && props.style
         } : {
           margin: 0,
           "margin-top": "4px",
           "margin-bottom": "4px",
-          ...(typeof props.style === "object" && props.style)
+          ...typeof props.style === "object" && props.style
         };
       }
     }), false, false);
     return _el$;
   })();
-};
-
-var css_248z$1 = ".PianoRollTrackList-module_PianoRollTrackList__-sDf0 {\n  position: relative;\n  height: 100%;\n  flex: 1;\n}\n\n.PianoRollTrackList-module_Track__mZP1K {\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 100%;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  padding: 2px;\n  cursor: pointer;\n  background: lightgrey;\n}\n.PianoRollTrackList-module_Track__mZP1K.PianoRollTrackList-module_selected__0b-mf {\n  background: gray;\n}";
-var styles$1 = {"PianoRollTrackList":"PianoRollTrackList-module_PianoRollTrackList__-sDf0","Track":"PianoRollTrackList-module_Track__mZP1K","selected":"PianoRollTrackList-module_selected__0b-mf"};
-styleInject(css_248z$1);
+}, "ZoomSliderControl");
+var ZoomSliderControl_default = ZoomSliderControl;
 
-const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`, 2),
-  _tmpl$2$1 = /*#__PURE__*/template(`<div> </div>`, 2);
-const PianoRollTrackList = () => {
+// src/PianoRollTrackList.module.css
+var _default6 = {};
+var _tmpl$6 = /* @__PURE__ */ template(`<div></div>`, 2);
+var _tmpl$22 = /* @__PURE__ */ template(`<div> </div>`, 2);
+var PianoRollTrackList = /* @__PURE__ */ __name(() => {
   const viewPort = createMemo(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$$3.cloneNode(true);
+    const _el$ = _tmpl$6.cloneNode(true);
     insert(_el$, createComponent(Index, {
       get each() {
         return context.tracks;
@@ -899,42 +906,38 @@ const PianoRollTrackList = () => {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$2$1.cloneNode(true),
-              _el$3 = _el$2.firstChild;
+            const _el$2 = _tmpl$22.cloneNode(true), _el$3 = _el$2.firstChild;
             _el$2.$$click = () => context.onSelectedTrackIndexChange?.(index);
             insert(_el$2, index, _el$3);
             insert(_el$2, () => track().name || "[unnamed track]", null);
-            effect(_p$ => {
+            effect((_p$) => {
               const _v$ = {
-                  [styles$1["Track"]]: true,
-                  [styles$1["selected"]]: index === context.selectedTrackIndex
-                },
-                _v$2 = track().name,
-                _v$3 = `${virtualDimensions().offset}px`,
-                _v$4 = `${virtualDimensions().size}px`;
+                [_default6["Track"]]: true,
+                [_default6["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);
               _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
               _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
               return _p$;
             }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined
+              _v$: void 0,
+              _v$2: void 0,
+              _v$3: void 0,
+              _v$4: void 0
             });
             return _el$2;
           }
         });
       }
     }));
-    effect(() => className(_el$, styles$1.PianoRollTrackList));
+    effect(() => className(_el$, _default6.PianoRollTrackList));
     return _el$;
   })();
-};
+}, "PianoRollTrackList");
+var PianoRollTrackList_default = PianoRollTrackList;
 delegateEvents(["click"]);
-
-const PianoRollScrollZoomViewPort = props => {
+var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
   const zoomFactor = 500;
   const context = usePianoRollContext();
   return createComponent(ScrollZoomViewPort, {
@@ -946,7 +949,7 @@ const PianoRollScrollZoomViewPort = props => {
         range: context.duration,
         zoom: context.zoom * (zoomFactor / context.notesScrollerClientRect.width),
         onPositionChange: context.onPositionChange,
-        onZoomChange: zoom => context.onZoomChange?.(zoom / (zoomFactor / context.notesScrollerClientRect.width)),
+        onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / context.notesScrollerClientRect.width)),
         minZoom: 1,
         maxZoom: 500
       }),
@@ -957,7 +960,7 @@ const PianoRollScrollZoomViewPort = props => {
         range: 128,
         zoom: context.verticalZoom * (zoomFactor / context.notesScrollerClientRect.height),
         onPositionChange: context.onVerticalPositionChange,
-        onZoomChange: verticalZoom => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / context.notesScrollerClientRect.height)),
+        onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / context.notesScrollerClientRect.height)),
         minZoom: 1,
         maxZoom: 10
       }),
@@ -972,7 +975,7 @@ const PianoRollScrollZoomViewPort = props => {
         range: context.tracks.length,
         zoom: context.verticalTrackZoom * (zoomFactor / context.tracksScrollerClientRect.height),
         onPositionChange: context.onVerticalTrackPositionChange,
-        onZoomChange: verticalTrackZoom => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / context.tracksScrollerClientRect.height)),
+        onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / context.tracksScrollerClientRect.height)),
         minZoom: 0.8,
         maxZoom: 3
       }),
@@ -984,9 +987,9 @@ const PianoRollScrollZoomViewPort = props => {
       return props.children;
     }
   });
-};
-
-const defaultRect = {
+}, "PianoRollScrollZoomViewPort");
+var PianoRollScrollZoomViewPort_default = PianoRollScrollZoomViewPort;
+var defaultRect = {
   left: 0,
   width: 0,
   top: 0,
@@ -1000,10 +1003,11 @@ function useBoundingClientRect(containerRef) {
   const [boundingClientRect, setBoundingClientRect] = createSignal(defaultRect);
   createEffect(() => {
     const container = containerRef();
-    if (!container) return;
-    const updateBoundingClientRect = () => {
+    if (!container)
+      return;
+    const updateBoundingClientRect = /* @__PURE__ */ __name(() => {
       setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
-    };
+    }, "updateBoundingClientRect");
     const resizeObserver = new ResizeObserver(updateBoundingClientRect);
     resizeObserver.observe(container);
     updateBoundingClientRect();
@@ -1013,15 +1017,17 @@ function useBoundingClientRect(containerRef) {
   });
   return boundingClientRect;
 }
+__name(useBoundingClientRect, "useBoundingClientRect");
 
-const PianoRollNotesScroller = props => {
+// src/PianoRollNotesScroller.tsx
+var PianoRollNotesScroller = /* @__PURE__ */ __name((props) => {
   const context = usePianoRollContext();
   const [ref, setRef] = createSignal();
   const clientRect = useBoundingClientRect(ref);
   createEffect(() => {
     context.onNotesScrollerClientRectChange(clientRect());
   });
-  return createComponent(ScrollZoomContainer, {
+  return createComponent(ScrollZoomContainer_default, {
     ref: setRef,
     get verticalDimensionName() {
       return context.mode === "keys" ? "vertical" : "verticalTracks";
@@ -1030,16 +1036,16 @@ const PianoRollNotesScroller = props => {
       return props.children;
     }
   });
-};
-
-const PianoRollTrackListScroller = props => {
+}, "PianoRollNotesScroller");
+var PianoRollNotesScroller_default = PianoRollNotesScroller;
+var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
   const context = usePianoRollContext();
   const [ref, setRef] = createSignal();
   const clientRect = useBoundingClientRect(ref);
   createEffect(() => {
     context.onTracksScrollerClientRectChange(clientRect());
   });
-  return createComponent(ScrollZoomContainer, {
+  return createComponent(ScrollZoomContainer_default, {
     ref: setRef,
     horizontalDimensionName: "horizontalTracks",
     verticalDimensionName: "verticalTracks",
@@ -1050,71 +1056,88 @@ const PianoRollTrackListScroller = props => {
       return props.children;
     }
   });
-};
+}, "PianoRollTrackListScroller");
+var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 
-var css_248z = ".PianoRollScale-module_PianoRollScale__5wGRm {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollScale-module_PianoRollScale-Time__03hGQ {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n  border-left-color: x#666;\n  border-bottom-color: #333;\n  border-bottom-style: solid;\n  border-bottom-width: 0.5px;\n  background: #777;\n  display: flex;\n  align-items: center;\n}\n\n.PianoRollScale-module_PianoRollScale-Label__aoRi6 {\n  position: absolute;\n  z-index: 1;\n  color: #ccc;\n  margin-left: 3px;\n  font-size: 0.8em;\n}\n\n.PianoRollScale-module_PianoRollScale-Time__03hGQ.PianoRollScale-module_Highlighted__ziWn5 {\n  background: #666;\n}\n\n.PianoRollScale-module_PianoRollScale-Time__03hGQ.PianoRollScale-module_HighlightedBorder__-OoZE {\n  border-left-color: #111;\n}\n";
-var styles = {"PianoRollScale":"PianoRollScale-module_PianoRollScale__5wGRm","PianoRollScale-Time":"PianoRollScale-module_PianoRollScale-Time__03hGQ","PianoRollScale-Label":"PianoRollScale-module_PianoRollScale-Label__aoRi6","Highlighted":"PianoRollScale-module_Highlighted__ziWn5","HighlightedBorder":"PianoRollScale-module_HighlightedBorder__-OoZE"};
-styleInject(css_248z);
+// src/PianoRollScale.module.css
+var _default7 = {};
 
-const _tmpl$$2 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollScale = () => {
+// src/PianoRollScale.tsx
+var _tmpl$7 = /* @__PURE__ */ template(`<div></div>`, 2);
+var PianoRollScale = /* @__PURE__ */ __name(() => {
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
-  const grid = usePianoRollGrid();
+  const grid = usePianoRollGrid_default();
+  const context = usePianoRollContext();
+  const updatePlayheadPosition = /* @__PURE__ */ __name((event) => {
+    const position = horizontalViewPort().calculatePosition(event.clientX);
+    context.onPlayHeadPositionChange(position, event);
+  }, "updatePlayheadPosition");
   return (() => {
-    const _el$ = _tmpl$$2.cloneNode(true);
+    const _el$ = _tmpl$7.cloneNode(true);
+    _el$.$$mousedown = (event) => {
+      updatePlayheadPosition(event);
+      const handleMouseUp = /* @__PURE__ */ __name(() => {
+        window.removeEventListener("mousemove", updatePlayheadPosition);
+        window.removeEventListener("mouseup", handleMouseUp);
+      }, "handleMouseUp");
+      window.addEventListener("mousemove", updatePlayheadPosition);
+      window.addEventListener("mouseup", handleMouseUp);
+    };
     insert(_el$, createComponent(Index, {
       get each() {
         return grid();
       },
-      children: entry => {
+      children: (entry) => {
         return createComponent(Show, {
           get when() {
             return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$$2.cloneNode(true);
+            const _el$2 = _tmpl$7.cloneNode(true);
             insert(_el$2, createComponent(Show, {
               get when() {
                 return entry().showLabel;
               },
               get children() {
-                const _el$3 = _tmpl$$2.cloneNode(true);
+                const _el$3 = _tmpl$7.cloneNode(true);
                 insert(_el$3, () => entry().label);
-                effect(() => className(_el$3, styles["PianoRollScale-Label"]));
+                effect(() => className(_el$3, _default7["PianoRollScale-Label"]));
                 return _el$3;
               }
             }));
-            effect(_p$ => {
+            effect((_p$) => {
               const _v$ = {
-                  [styles["PianoRollScale-Time"]]: true,
-                  [styles["Highlighted"]]: entry().isHighlighted,
-                  [styles["HighlightedBorder"]]: entry().hasHighlightedBorder
-                },
-                _v$2 = `${entry().virtualDimensions.offset}px`,
-                _v$3 = `${entry().virtualDimensions.size}px`;
+                [_default7["PianoRollScale-Time"]]: true,
+                [_default7["Highlighted"]]: entry().isHighlighted,
+                [_default7["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);
               _v$3 !== _p$._v$3 && _el$2.style.setProperty("width", _p$._v$3 = _v$3);
               return _p$;
             }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined
+              _v$: void 0,
+              _v$2: void 0,
+              _v$3: void 0
             });
             return _el$2;
           }
         });
       }
     }));
-    effect(() => className(_el$, styles.PianoRollScale));
+    effect(() => className(_el$, _default7.PianoRollScale));
     return _el$;
   })();
-};
+}, "PianoRollScale");
+var PianoRollScale_default = PianoRollScale;
+delegateEvents(["mousedown"]);
 
-const _tmpl$$1 = /*#__PURE__*/template(`<div><button><div></div></button></div>`, 6),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div><div></div></div><div><div></div></div></div>`, 10),
-  _tmpl$3 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRoll = allProps => {
+// src/PianoRoll.tsx
+var _tmpl$8 = /* @__PURE__ */ template(`<div><button><div></div></button></div>`, 6);
+var _tmpl$23 = /* @__PURE__ */ template(`<div><div></div><div></div></div>`, 6);
+var _tmpl$32 = /* @__PURE__ */ template(`<div><div><div></div></div></div>`, 6);
+var _tmpl$42 = /* @__PURE__ */ template(`<div></div>`, 2);
+var PianoRoll = /* @__PURE__ */ __name((allProps) => {
   const propsWithDefaults = mergeProps({
     showAllTracks: false
   }, allProps);
@@ -1122,21 +1145,17 @@ const PianoRoll = allProps => {
   return createComponent(PianoRollContextProvider, {
     value: context,
     get children() {
-      const _el$ = _tmpl$3.cloneNode(true);
+      const _el$ = _tmpl$42.cloneNode(true);
       spread(_el$, mergeProps$1(divProps, {
         get ["class"]() {
-          return styles$6.PianoRoll;
+          return _default.PianoRoll;
         }
       }), false, true);
-      insert(_el$, createComponent(PianoRollScrollZoomViewPort, {
+      insert(_el$, createComponent(PianoRollScrollZoomViewPort_default, {
         get children() {
           return [(() => {
-            const _el$2 = _tmpl$2.cloneNode(true),
-              _el$3 = _el$2.firstChild,
-              _el$7 = _el$3.firstChild,
-              _el$8 = _el$3.nextSibling,
-              _el$9 = _el$8.firstChild;
-            insert(_el$2, createComponent(ZoomSliderControl, {
+            const _el$2 = _tmpl$32.cloneNode(true), _el$3 = _el$2.firstChild, _el$7 = _el$3.firstChild;
+            insert(_el$2, createComponent(ZoomSliderControl_default, {
               orientation: "vertical",
               dimensionName: "verticalTracks"
             }), _el$3);
@@ -1145,16 +1164,15 @@ const PianoRoll = allProps => {
                 return context.showTrackList;
               },
               get children() {
-                const _el$4 = _tmpl$$1.cloneNode(true),
-                  _el$5 = _el$4.firstChild,
-                  _el$6 = _el$5.firstChild;
+                const _el$4 = _tmpl$8.cloneNode(true), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
                 _el$4.style.setProperty("height", "30px");
+                _el$4.style.setProperty("border-right", "1px black solid");
                 _el$5.$$click = () => context.onModeChange(context.mode === "keys" ? "tracks" : "keys");
                 _el$5.style.setProperty("font-size", "16px");
                 _el$5.style.setProperty("line-height", "16px");
                 _el$5.style.setProperty("cursor", "pointer");
                 _el$5.style.setProperty("overflow", "hidden");
-                insert(_el$6, () => context.mode === "keys" ? "≡" : "🎹");
+                insert(_el$6, () => context.mode === "keys" ? "\u2261" : "\u{1F3B9}");
                 effect(() => setAttribute(_el$5, "title", context.mode === "keys" ? "Tracks Mode" : "Keys Mode"));
                 return _el$4;
               }
@@ -1167,9 +1185,9 @@ const PianoRoll = allProps => {
                 return context.showTrackList;
               },
               get children() {
-                return createComponent(PianoRollTrackListScroller, {
+                return createComponent(PianoRollTrackListScroller_default, {
                   get children() {
-                    return createComponent(PianoRollTrackList, {});
+                    return createComponent(PianoRollTrackList_default, {});
                   }
                 });
               }
@@ -1179,42 +1197,49 @@ const PianoRoll = allProps => {
                 return context.mode === "keys";
               },
               get children() {
-                return createComponent(PianoRollKeys, {});
+                return createComponent(PianoRollKeys_default, {});
               }
             }), null);
-            _el$8.style.setProperty("width", "100%");
-            _el$8.style.setProperty("display", "flex");
-            _el$8.style.setProperty("height", "100%");
-            _el$8.style.setProperty("flex-direction", "column");
-            _el$8.style.setProperty("overflow", "hidden");
-            _el$9.style.setProperty("height", "30px");
-            insert(_el$9, createComponent(PianoRollScale, {}));
-            insert(_el$8, createComponent(PianoRollNotesScroller, {
+            insert(_el$2, createComponent(PianoRollNotesScroller_default, {
               get children() {
-                return [memo(() => allProps.children), createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
+                return [memo(() => allProps.children), (() => {
+                  const _el$8 = _tmpl$23.cloneNode(true), _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling;
+                  _el$8.style.setProperty("width", "100%");
+                  _el$8.style.setProperty("display", "flex");
+                  _el$8.style.setProperty("height", "100%");
+                  _el$8.style.setProperty("flex-direction", "column");
+                  _el$8.style.setProperty("overflow", "hidden");
+                  _el$9.style.setProperty("height", "30px");
+                  insert(_el$9, createComponent(PianoRollScale_default, {}));
+                  _el$10.style.setProperty("flex", "1");
+                  _el$10.style.setProperty("position", "relative");
+                  _el$10.style.setProperty("overflow", "hidden");
+                  insert(_el$10, createComponent(PianoRollGrid_default, {}), null);
+                  insert(_el$10, createComponent(PianoRollNotes_default, {}), null);
+                  return _el$8;
+                })()];
               }
             }), null);
-            insert(_el$2, createComponent(ZoomSliderControl, {
+            insert(_el$2, createComponent(ZoomSliderControl_default, {
               orientation: "vertical",
               get disabled() {
                 return context.mode !== "keys";
               }
             }), null);
-            effect(_p$ => {
-              const _v$ = styles$6.PianoRollContainer,
-                _v$2 = {
-                  [styles$6.PianoRollLeftColumn]: true,
-                  [styles$6.showTrackList]: context.showTrackList
-                };
+            effect((_p$) => {
+              const _v$ = _default.PianoRollContainer, _v$2 = {
+                [_default.PianoRollLeftColumn]: true,
+                [_default.showTrackList]: context.showTrackList
+              };
               _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
               _p$._v$2 = classList(_el$3, _v$2, _p$._v$2);
               return _p$;
             }, {
-              _v$: undefined,
-              _v$2: undefined
+              _v$: void 0,
+              _v$2: void 0
             });
             return _el$2;
-          })(), createComponent(ZoomSliderControl, {
+          })(), createComponent(ZoomSliderControl_default, {
             orientation: "horizontal",
             get style() {
               return {
@@ -1228,22 +1253,23 @@ const PianoRoll = allProps => {
       return _el$;
     }
   });
-};
+}, "PianoRoll");
+var PianoRoll_default = PianoRoll;
 delegateEvents(["click"]);
-
-const _tmpl$ = /*#__PURE__*/template(`<div class="PlayHead"></div>`, 2);
-const PlayHead = allProps => {
+var _tmpl$9 = /* @__PURE__ */ template(`<div class="PlayHead"></div>`, 2);
+var PlayHead = /* @__PURE__ */ __name((allProps) => {
   const [props, divProps] = splitProps(allProps, ["position", "sync", "onPositionChange", "dimensionName"]);
   const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
   createEffect(() => {
-    if (!props.sync) return;
+    if (!props.sync)
+      return;
     const maxPosition = viewPort.range;
     const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
     viewPort.onPositionChange?.(newPosition);
   });
   const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.position));
   return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
+    const _el$ = _tmpl$9.cloneNode(true);
     spread(_el$, mergeProps$1(divProps, {
       get style() {
         return {
@@ -1253,45 +1279,44 @@ const PlayHead = allProps => {
           left: `${leftPosition()}px`,
           "background-color": "green",
           cursor: "pointer",
-          ...(typeof divProps.style === "object" && divProps.style)
+          ...typeof divProps.style === "object" && divProps.style
         };
       },
-      "onMouseDown": event => {
+      "onMouseDown": (event) => {
         event.preventDefault();
         event.stopPropagation();
-        const handleMouseMove = ({
-          clientX
-        }) => {
-          const newPosition = viewPort.calculatePosition(clientX);
-          props.onPositionChange?.(newPosition);
-        };
-        const handleMouseUp = () => {
+        const handleMouseMove = /* @__PURE__ */ __name((event2) => {
+          const newPosition = viewPort.calculatePosition(event2.clientX);
+          props.onPositionChange?.(newPosition, event2);
+        }, "handleMouseMove");
+        const handleMouseUp = /* @__PURE__ */ __name(() => {
           window.removeEventListener("mousemove", handleMouseMove);
           window.removeEventListener("mouseup", handleMouseUp);
-        };
+        }, "handleMouseUp");
         window.addEventListener("mousemove", handleMouseMove);
         window.addEventListener("mouseup", handleMouseUp);
       }
     }), false, false);
     return _el$;
   })();
-};
-
-const useNotes = () => {
+}, "PlayHead");
+var PlayHead_default = PlayHead;
+var useNotes = /* @__PURE__ */ __name(() => {
   const [notes, onNotesChange] = createSignal([]);
-  const onNoteChange = (index, note) => {
+  const onNoteChange = /* @__PURE__ */ __name((index, note) => {
     onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
-  };
-  const onInsertNote = note => {
-    const index = Math.max(notes().findIndex(({
-      ticks
-    }) => ticks > note.ticks), 0);
+  }, "onNoteChange");
+  const onInsertNote = /* @__PURE__ */ __name((note) => {
+    const index = Math.max(
+      notes().findIndex(({ ticks }) => ticks > note.ticks),
+      0
+    );
     onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
     return index;
-  };
-  const onRemoveNote = index => {
+  }, "onInsertNote");
+  const onRemoveNote = /* @__PURE__ */ __name((index) => {
     onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
-  };
+  }, "onRemoveNote");
   return {
     notes,
     onNotesChange,
@@ -1299,7 +1324,7 @@ const useNotes = () => {
     onInsertNote,
     onRemoveNote
   };
-};
+}, "useNotes");
+var useNotes_default = useNotes;
 
-export { PianoRoll, PlayHead, createPianoRollstate, useNotes };
-//# sourceMappingURL=index.js.map
+export { PianoRoll_default as PianoRoll, PlayHead_default as PlayHead, usePianoRollState_default as createPianoRollstate, useNotes_default as useNotes };