solid-pianoroll 0.0.27 → 0.0.29

package/dist/dev.jsx

@@ -1,7 +1,4 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-4lSEurKZS4xC/solid-pianoroll/src/PianoRoll.module.css.js
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-EoFgjaMDTdLJ/solid-pianoroll/src/PianoRoll.module.css.js
 var digest = "1768455784e6754f5fb57107bf43cc8478bbe0ec2ced0bc6aeb796949dcc4906";
 var css = `._PianoRoll_1v1e7_1 {
   box-sizing: border-box;
@@ -50,7 +47,7 @@ var css = `._PianoRoll_1v1e7_1 {
     document.head.appendChild(el);
   }
 })();
-var PianoRoll_module_css_default = { "pianoRoll": "_PianoRoll_1v1e7_1", "pianoRollContainer": "_PianoRollContainer_1v1e7_10", "pianoRollLeftColumn": "_PianoRollLeftColumn_1v1e7_17", "showTrackList": "_showTrackList_1v1e7_24", "pianoRollRightColumn": "_PianoRollRightColumn_1v1e7_29" };
+var PianoRoll_module_css_default = { "PianoRoll": "_PianoRoll_1v1e7_1", "pianoRoll": "_PianoRoll_1v1e7_1", "PianoRollContainer": "_PianoRollContainer_1v1e7_10", "pianoRollContainer": "_PianoRollContainer_1v1e7_10", "PianoRollLeftColumn": "_PianoRollLeftColumn_1v1e7_17", "pianoRollLeftColumn": "_PianoRollLeftColumn_1v1e7_17", "showTrackList": "_showTrackList_1v1e7_24", "PianoRollRightColumn": "_PianoRollRightColumn_1v1e7_29", "pianoRollRightColumn": "_PianoRollRightColumn_1v1e7_29" };
 
 // src/PianoRoll.tsx
 import { Show as Show6, mergeProps as mergeProps4 } from "solid-js";
@@ -80,7 +77,7 @@ var defaultState = {
   notesScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
   tracksScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 }
 };
-var propNameToHandlerName = /* @__PURE__ */ __name((name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`, "propNameToHandlerName");
+var propNameToHandlerName = (name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
 var pianoRollStatePropNames = [
   ...Object.keys(defaultState),
   ...Object.keys(defaultState).map(propNameToHandlerName),
@@ -92,7 +89,7 @@ var pianoRollStatePropNames = [
   "isKeyDown",
   "snapValueToGridIfEnabled"
 ];
-var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
+var createPianoRollstate = (initialState) => {
   const [state, setState] = createStore({
     ...defaultState,
     ...initialState
@@ -112,12 +109,12 @@ var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
       ];
     })
   );
-  const onPlayheadPositionChange = /* @__PURE__ */ __name((playheadPosition, originalEvent) => {
+  const onPlayheadPositionChange = (playheadPosition, originalEvent) => {
     handlers.onPlayHeadPositionChange(
       snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey)
     );
-  }, "onPlayheadPositionChange");
-  const updateNotes = /* @__PURE__ */ __name(async (trackIndex, getNotes) => {
+  };
+  const updateNotes = async (trackIndex, getNotes) => {
     const track = state.tracks[trackIndex];
     if (!track)
       return;
@@ -127,15 +124,15 @@ var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
       { ...track, notes: getNotes(notes) },
       ...state.tracks.slice(trackIndex + 1)
     ]);
-  }, "updateNotes");
-  const onNoteChange = /* @__PURE__ */ __name((trackIndex, noteIndex, note) => {
+  };
+  const onNoteChange = (trackIndex, noteIndex, note) => {
     updateNotes(trackIndex, (notes) => [
       ...notes.slice(0, noteIndex),
       note,
       ...notes.slice(noteIndex + 1)
     ]);
-  }, "onNoteChange");
-  const onInsertNote = /* @__PURE__ */ __name((trackIndex, note) => {
+  };
+  const onInsertNote = (trackIndex, note) => {
     const track = state.tracks[trackIndex];
     if (!track)
       return -1;
@@ -150,14 +147,14 @@ var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
       ...notes2.slice(newNoteIndex)
     ]);
     return newNoteIndex;
-  }, "onInsertNote");
-  const onRemoveNote = /* @__PURE__ */ __name((trackIndex, noteIndex) => {
+  };
+  const onRemoveNote = (trackIndex, noteIndex) => {
     updateNotes(trackIndex, (notes) => [
       ...notes.slice(0, noteIndex),
       ...notes.slice(noteIndex + 1)
     ]);
-  }, "onRemoveNote");
-  const updateKeyPressedState = /* @__PURE__ */ __name((trackIndex, keyNumber, value) => {
+  };
+  const updateKeyPressedState = (trackIndex, keyNumber, value) => {
     handlers.onPressedKeysChange?.({
       ...state.pressedKeys,
       [trackIndex]: {
@@ -165,18 +162,18 @@ var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
         [keyNumber]: value
       }
     });
-  }, "updateKeyPressedState");
-  const onNoteDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
+  };
+  const onNoteDown = (trackIndex, keyNumber) => {
     updateKeyPressedState(trackIndex, keyNumber, true);
-  }, "onNoteDown");
-  const onNoteUp = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
+  };
+  const onNoteUp = (trackIndex, keyNumber) => {
     updateKeyPressedState(trackIndex, keyNumber, false);
-  }, "onNoteUp");
-  const isKeyDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber], "isKeyDown");
-  const snapValueToGridIfEnabled = /* @__PURE__ */ __name((value, altKey) => {
+  };
+  const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
+  const snapValueToGridIfEnabled = (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,
@@ -188,22 +185,22 @@ var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
     snapValueToGridIfEnabled,
     onPlayheadPositionChange
   });
-}, "createPianoRollstate");
+};
 var usePianoRollState_default = createPianoRollstate;
 
 // src/PianoRollContext.tsx
 var PianoRollContext = createContext();
 var PianoRollContextProvider = PianoRollContext.Provider;
-var usePianoRollContext = /* @__PURE__ */ __name(() => {
+var usePianoRollContext = () => {
   const context = useContext(PianoRollContext);
   if (!context)
     throw new Error("No PianoRollContext found");
   return context;
-}, "usePianoRollContext");
-var splitContextProps = /* @__PURE__ */ __name((allProps) => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
+};
+var splitContextProps = (allProps) => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]);
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-giqIfMskMsUC/solid-pianoroll/src/PianoRollKeys.module.css.js
-var digest2 = "a2160cefc96d2c57ab5bc57c0dfc1f009ceabf6981d7bd2c88f333621de2e52f";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-vPA2rVvQAkSS/solid-pianoroll/src/PianoRollKeys.module.css.js
+var digest2 = "bbaa0942ecbee6a492845a23ecdbace9bcda1f540a5ba6682de5afbdbda272f4";
 var css2 = `._PianoRollKeys_1ne9i_1 {
   position: relative;
   height: 100%;
@@ -266,74 +263,69 @@ var css2 = `._PianoRollKeys_1ne9i_1 {
     document.head.appendChild(el);
   }
 })();
-var PianoRollKeys_module_css_default = { "pianoRollKeys": "_PianoRollKeys_1ne9i_1", "key": "_Key_1ne9i_14", "black": "_black_1ne9i_29", "white": "_white_1ne9i_38", "down": "_down_1ne9i_46" };
+var PianoRollKeys_module_css_default = { "PianoRollKeys": "_PianoRollKeys_1ne9i_1", "pianoRollKeys": "_PianoRollKeys_1ne9i_1", "Key": "_Key_1ne9i_14", "key": "_Key_1ne9i_14", "black": "_black_1ne9i_29", "white": "_white_1ne9i_38", "down": "_down_1ne9i_46" };
 
 // src/PianoRollKeys.tsx
-import { createEffect as createEffect3, createMemo as createMemo2, createSignal, Index, Show } from "solid-js";
+import { createEffect as createEffect2, createMemo as createMemo2, createSignal, Index, Show } from "solid-js";
 
 // src/viewport/ScrollZoomViewPort.tsx
 import { createContext as createContext2, useContext as useContext2 } from "solid-js";
 
 // src/viewport/createViewPortDimension.ts
-import { createEffect } from "solid-js";
-import { createStore as createStore2 } from "solid-js/store";
+import { createViewPortAxis } from "solid-viewport";
 function createViewPortDimension(getState) {
-  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");
+  const axis = createViewPortAxis(() => {
+    const s = getState();
     return {
-      ...state2,
-      onZoomChange,
-      onPositionChange,
-      calculatePixelOffset,
-      calculatePixelValue,
-      calculatePosition,
-      calculatePixelDimensions,
-      calculateVisibleRange,
-      calculateMaxPosition,
-      isVisible
+      name: s.name,
+      position: s.position,
+      range: s.range,
+      pixelOffset: s.pixelOffset,
+      pixelSize: s.pixelSize,
+      zoom: s.zoom,
+      minZoom: s.minZoom,
+      maxZoom: s.maxZoom,
+      onPositionChange: s.onPositionChange,
+      onZoomChange: s.onZoomChange
     };
-  }, "getStateWithFunctions");
-  const [state, setState] = createStore2(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 };
-  }
-  __name(calculatePixelDimensions, "calculatePixelDimensions");
-  function isVisible({ offset, size }) {
-    return offset + size > 0 && offset < state.pixelSize;
-  }
-  __name(isVisible, "isVisible");
-  return state;
+  });
+  return {
+    get name() {
+      return axis.name;
+    },
+    get position() {
+      return axis.position;
+    },
+    get range() {
+      return axis.range;
+    },
+    get pixelOffset() {
+      return axis.pixelOffset;
+    },
+    get pixelSize() {
+      return axis.pixelSize;
+    },
+    get zoom() {
+      return axis.zoom;
+    },
+    get minZoom() {
+      return axis.minZoom;
+    },
+    get maxZoom() {
+      return axis.maxZoom;
+    },
+    onPositionChange: (position) => axis.onPositionChange?.(position),
+    onZoomChange: (zoom) => axis.onZoomChange?.(zoom),
+    calculatePixelValue: (position) => axis.toPixels(position),
+    calculatePixelOffset: (position) => axis.toPixelOffset(position),
+    calculatePosition: (offset) => axis.toPosition(offset),
+    calculatePixelDimensions: (position, length) => axis.dimensions(position, length),
+    calculateVisibleRange: () => axis.visibleRange(),
+    calculateMaxPosition: () => axis.maxPosition(),
+    isVisible: (dimensions) => axis.isVisible(dimensions)
+  };
 }
-__name(createViewPortDimension, "createViewPortDimension");
-var clamp = /* @__PURE__ */ __name((value, min, max) => Math.max(min, Math.min(max, value)), "clamp");
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
 // src/viewport/ScrollZoomViewPort.tsx
 var defaultViewPortProps = {
@@ -344,7 +336,7 @@ var defaultViewPortProps = {
   minZoom: 1,
   maxZoom: Infinity
 };
-var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+var ScrollZoomViewPort = (props) => {
   const viewPorts = Object.entries(props.dimensions).map(
     ([name, viewPortProps]) => createViewPortDimension(() => ({
       name,
@@ -354,21 +346,21 @@ var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
   );
   const parentViewPorts = useContext2(ScrollZoomViewPortContext);
   return <ScrollZoomViewPortContext.Provider value={[...parentViewPorts, ...viewPorts]}>{props.children}</ScrollZoomViewPortContext.Provider>;
-}, "ScrollZoomViewPort");
+};
 var ScrollZoomViewPortContext = createContext2([]);
-var useViewPortDimension = /* @__PURE__ */ __name((name) => {
+var useViewPortDimension = (name) => {
   const viewPorts = useContext2(ScrollZoomViewPortContext);
   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");
+};
 
 // src/viewport/ScrollZoomContainer.tsx
-import { createEffect as createEffect2, createMemo, mergeProps as mergeProps2, splitProps as splitProps2 } from "solid-js";
+import { createEffect, createMemo, mergeProps as mergeProps2, splitProps as splitProps2 } from "solid-js";
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-DACyjAWFEZua/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
-var digest3 = "da87d2f74ba194d0dab11eb617c56efea90f00f122f089820383ed1269e10936";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-GTKRXRld1CFO/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
+var digest3 = "a0ed6c48dc62240340708ba5e4bf3a8fc0a0cdc27a7217d4f6dd1ed6d3319ba8";
 var css3 = `._ScrollZoomContainer_f395r_1 {
   height: 100%;
   width: 100%;
@@ -386,10 +378,10 @@ var css3 = `._ScrollZoomContainer_f395r_1 {
     document.head.appendChild(el);
   }
 })();
-var ScrollZoomContainer_module_css_default = { "scrollZoomContainer": "_ScrollZoomContainer_f395r_1" };
+var ScrollZoomContainer_module_css_default = { "ScrollZoomContainer": "_ScrollZoomContainer_f395r_1", "scrollZoomContainer": "_ScrollZoomContainer_f395r_1" };
 
 // src/viewport/ScrollZoomContainer.tsx
-var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
+var ScrollZoomContainer = (props) => {
   let scrollContentRef;
   const [ownProps, divProps] = splitProps2(props, [
     "ref",
@@ -411,8 +403,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
   const horizontalViewPort = createMemo(
     () => useViewPortDimension(propsWithDefaults.horizontalDimensionName)
   );
-  const handleScroll = /* @__PURE__ */ __name((event) => {
-    event.preventDefault();
+  const handleScroll = (event) => {
     if (didUpdateScroll) {
       didUpdateScroll = false;
       return;
@@ -426,35 +417,28 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
     const scrollLeftAmount = scrollLeft / (scrollWidth - width);
     verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
     horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
-  }, "handleScroll");
-  const handleWheel = /* @__PURE__ */ __name((event) => {
+  };
+  const handleWheel = (event) => {
     if (event.altKey) {
       event.preventDefault();
-      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-        horizontalViewPort()?.onZoomChange?.(
-          horizontalViewPort().zoom / (1 + event.deltaX / horizontalViewPort().pixelSize)
-        );
-        const maxPosition = horizontalViewPort().calculateMaxPosition();
-        horizontalViewPort()?.onPositionChange?.(
-          Math.min(maxPosition, horizontalViewPort()?.position)
-        );
-      } else {
-        verticalViewPort()?.onZoomChange?.(
-          verticalViewPort().zoom / (1 + event.deltaY / verticalViewPort().pixelSize)
-        );
-        const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-        verticalViewPort()?.onPositionChange?.(
-          Math.min(maxVerticalPosition, verticalViewPort()?.position)
-        );
-      }
+      const horizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY);
+      const viewPort = horizontal ? horizontalViewPort() : verticalViewPort();
+      const delta = horizontal ? event.deltaX : event.deltaY;
+      const pointer = horizontal ? event.clientX : event.clientY;
+      const valueAtPointer = viewPort.calculatePosition(pointer);
+      const newZoom = viewPort.zoom / (1 + delta / viewPort.pixelSize);
+      const newVisibleRange = viewPort.range / newZoom;
+      const fraction = (pointer - viewPort.pixelOffset) / viewPort.pixelSize;
+      viewPort.onZoomChange?.(newZoom);
+      viewPort.onPositionChange?.(valueAtPointer - fraction * newVisibleRange);
     } else if (!props.showScrollbar) {
       event.preventDefault();
       event.currentTarget.scrollLeft += event.deltaX;
       event.currentTarget.scrollTop += event.deltaY;
     }
-  }, "handleWheel");
+  };
   let didUpdateScroll = false;
-  createEffect2(() => {
+  createEffect(() => {
     const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
     const maxPosition = horizontalViewPort().calculateMaxPosition();
     const scrollTopAmount = maxVerticalPosition > 0 ? verticalViewPort().position / maxVerticalPosition : 0;
@@ -504,19 +488,19 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
       width: `${horizontalViewPort().pixelSize}px`
     }}
   >{props.children}</div></div></div></div>;
-}, "ScrollZoomContainer");
+};
 var ScrollZoomContainer_default = ScrollZoomContainer;
 
 // src/PianoRollKeys.tsx
-var PianoRollKeys = /* @__PURE__ */ __name(() => {
+var PianoRollKeys = () => {
   const verticalViewPort = createMemo2(() => useViewPortDimension("vertical"));
   const horizontalViewPort = createMemo2(() => useViewPortDimension("horizontalKeys"));
   const [isMouseDown, setIsMouseDown] = createSignal(false);
   const context = usePianoRollContext();
-  const handleMouseUp = /* @__PURE__ */ __name(() => {
+  const handleMouseUp = () => {
     setIsMouseDown(false);
-  }, "handleMouseUp");
-  createEffect3(() => {
+  };
+  createEffect2(() => {
     if (isMouseDown()) {
       window.addEventListener("mouseup", handleMouseUp);
     } else {
@@ -571,7 +555,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       }}
     /></Show>;
   }}</Index></ScrollZoomContainer_default></div>;
-}, "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) => ({
@@ -584,8 +568,8 @@ var PianoRollKeys_default = PianoRollKeys;
 // src/PianoRollNotes.tsx
 import { createMemo as createMemo3, createSignal as createSignal2, For, Show as Show2 } from "solid-js";
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-H6bkIm6VjhJs/solid-pianoroll/src/PianoRollNotes.module.css.js
-var digest4 = "fb03dfb9f9735042f035cb3dc6f116588f2ff84bccb7b1eaafbf1e04d0d357c2";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-4XxVYQ8EHiTc/solid-pianoroll/src/PianoRollNotes.module.css.js
+var digest4 = "8dddfe05bee5a327753f5688eb499ab297b646fb4ce3f45f86b502855b551810";
 var css4 = `._PianoRollNotes_u3pew_1 {
   position: absolute;
   flex: 1;
@@ -626,10 +610,10 @@ var css4 = `._PianoRollNotes_u3pew_1 {
     document.head.appendChild(el);
   }
 })();
-var PianoRollNotes_module_css_default = { "pianoRollNotes": "_PianoRollNotes_u3pew_1", "note": "_Note_u3pew_12", "trimStart": "_trimStart_u3pew_22", "trimEnd": "_trimEnd_u3pew_26" };
+var PianoRollNotes_module_css_default = { "PianoRollNotes": "_PianoRollNotes_u3pew_1", "pianoRollNotes": "_PianoRollNotes_u3pew_1", "Note": "_Note_u3pew_12", "note": "_Note_u3pew_12", "trimStart": "_trimStart_u3pew_22", "trimEnd": "_trimEnd_u3pew_26" };
 
 // src/PianoRollNotes.tsx
-var PianoRollNotes = /* @__PURE__ */ __name((props) => {
+var PianoRollNotes = (props) => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo3(
     () => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks")
@@ -642,7 +626,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
   const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal2(-1);
   const [diffPosition, setDiffPosition] = createSignal2(0);
   const [getInitialNote, setInitialNote] = createSignal2();
-  const calculateNoteDragValues = /* @__PURE__ */ __name((event) => {
+  const calculateNoteDragValues = (event) => {
     const targetTrackIndex = context.mode === "tracks" ? clamp(
       Math.floor(verticalViewPort().calculatePosition(event.clientY)),
       0,
@@ -655,8 +639,8 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       midi,
       horiontalPosition
     };
-  }, "calculateNoteDragValues");
-  const handleMouseMove = /* @__PURE__ */ __name((mouseMoveEvent) => {
+  };
+  const handleMouseMove = (mouseMoveEvent) => {
     mouseMoveEvent.preventDefault();
     mouseMoveEvent.stopPropagation();
     const note = getInitialNote();
@@ -698,21 +682,21 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
         setCurrentNoteIndex(newNoteIndex);
       }
     }
-  }, "handleMouseMove");
-  const stopDragging = /* @__PURE__ */ __name(() => {
+  };
+  const stopDragging = () => {
     window.removeEventListener("mousemove", handleMouseMove);
     window.removeEventListener("mouseup", stopDragging);
     setIsDragging(false);
     setCurrentNoteIndex(-1);
     setCurrentNoteTrackIndex(-1);
-  }, "stopDragging");
-  const startDragging = /* @__PURE__ */ __name(() => {
+  };
+  const startDragging = () => {
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", stopDragging);
-  }, "startDragging");
-  const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
+  };
+  const getClasses = (noteDragMode2) => {
     return noteDragMode2 ? [PianoRollNotes_module_css_default.Note, PianoRollNotes_module_css_default[noteDragMode2]] : [PianoRollNotes_module_css_default.Note];
-  }, "getClasses");
+  };
   return <div
     classList={{ [PianoRollNotes_module_css_default.PianoRollNotes]: true }}
     ref={props.ref}
@@ -803,14 +787,14 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       /></Show2>;
     }}</For></Show2>;
   }}</For></div>;
-}, "PianoRollNotes");
+};
 var PianoRollNotes_default = PianoRollNotes;
 
 // src/PianoRollGrid.tsx
 import { createMemo as createMemo5, For as For2, Index as Index2, Show as Show3 } from "solid-js";
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-6elOn94vcLry/solid-pianoroll/src/PianoRollGrid.module.css.js
-var digest5 = "b0952315b4fe36c31ed82062cb6cba74437c761ac8863b381025d697a4c4b98e";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-9qgGLYKKXfs8/solid-pianoroll/src/PianoRollGrid.module.css.js
+var digest5 = "efa34c6b5207c399897cfd150bae18d5711548b652f1a3cf8a3084679c2a8e21";
 var css5 = `._PianoRollGrid_qke5f_1 {
   position: relative;
   width: 100%;
@@ -866,11 +850,11 @@ var css5 = `._PianoRollGrid_qke5f_1 {
     document.head.appendChild(el);
   }
 })();
-var PianoRollGrid_module_css_default = { "pianoRollGrid": "_PianoRollGrid_qke5f_1", "pianoRollGridRow": "_PianoRollGrid-Row_qke5f_7", "isDark": "_IsDark_qke5f_14", "key": "_Key_qke5f_18", "isBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "pianoRollGridTime": "_PianoRollGrid-Time_qke5f_26", "highlighted": "_Highlighted_qke5f_37", "highlightedBorder": "_HighlightedBorder_qke5f_41" };
+var PianoRollGrid_module_css_default = { "PianoRollGrid": "_PianoRollGrid_qke5f_1", "pianoRollGrid": "_PianoRollGrid_qke5f_1", "PianoRollGrid-Row": "_PianoRollGrid-Row_qke5f_7", "pianoRollGridRow": "_PianoRollGrid-Row_qke5f_7", "IsDark": "_IsDark_qke5f_14", "isDark": "_IsDark_qke5f_14", "Key": "_Key_qke5f_18", "key": "_Key_qke5f_18", "IsBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "isBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "PianoRollGrid-Time": "_PianoRollGrid-Time_qke5f_26", "pianoRollGridTime": "_PianoRollGrid-Time_qke5f_26", "Highlighted": "_Highlighted_qke5f_37", "highlighted": "_Highlighted_qke5f_37", "HighlightedBorder": "_HighlightedBorder_qke5f_41", "highlightedBorder": "_HighlightedBorder_qke5f_41" };
 
 // src/usePianoRollGrid.ts
 import { createMemo as createMemo4 } from "solid-js";
-var usePianoRollGrid = /* @__PURE__ */ __name(() => {
+var usePianoRollGrid = () => {
   const context = usePianoRollContext();
   const horizontalViewPort = createMemo4(() => useViewPortDimension("horizontal"));
   const measureTicks = createMemo4(() => context.ppq * 4);
@@ -887,7 +871,6 @@ var usePianoRollGrid = /* @__PURE__ */ __name(() => {
     }
     return value;
   }
-  __name(calculateVisibleGridDivisorTicks, "calculateVisibleGridDivisorTicks");
   const gridDivisorTicks = createMemo4(
     () => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks())
   );
@@ -915,11 +898,11 @@ var usePianoRollGrid = /* @__PURE__ */ __name(() => {
     });
   });
   return gridArray;
-}, "usePianoRollGrid");
+};
 var usePianoRollGrid_default = usePianoRollGrid;
 
 // src/PianoRollGrid.tsx
-var PianoRollGrid = /* @__PURE__ */ __name(() => {
+var PianoRollGrid = () => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo5(
     () => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks")
@@ -973,12 +956,12 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
       /></Show3>;
     }}</For2></Show3>
   </div>;
-}, "PianoRollGrid");
+};
 var PianoRollGrid_default = PianoRollGrid;
 
 // src/viewport/ZoomSliderControl.tsx
 import { createMemo as createMemo6, mergeProps as mergeProps3 } from "solid-js";
-var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
+var ZoomSliderControl = (props) => {
   const propsWithDefaults = mergeProps3({ orientation: "horizontal" }, props);
   const dimension = createMemo6(
     () => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation)
@@ -1013,11 +996,11 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
       ...typeof props.style === "object" && props.style
     }}
   />;
-}, "ZoomSliderControl");
+};
 var ZoomSliderControl_default = ZoomSliderControl;
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-s5a7xEDYct3c/solid-pianoroll/src/PianoRollTrackList.module.css.js
-var digest6 = "77f61e2e770dc69815f8561e41ee5519ceb2eb971ed938593e2695d0b0edc716";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-GGWiIf0qvcx3/solid-pianoroll/src/PianoRollTrackList.module.css.js
+var digest6 = "e9f8961ee037e20fa2a8071f60eb91f8e32adde4fe62014efe90839a5e4f61fc";
 var css6 = `._PianoRollTrackList_11kti_1 {
   position: relative;
   height: 100%;
@@ -1053,11 +1036,11 @@ Track._selected_11kti_21 {
     document.head.appendChild(el);
   }
 })();
-var PianoRollTrackList_module_css_default = { "pianoRollTrackList": "_PianoRollTrackList_11kti_1", "track": "_Track_11kti_7", "selected": "_selected_11kti_21" };
+var PianoRollTrackList_module_css_default = { "PianoRollTrackList": "_PianoRollTrackList_11kti_1", "pianoRollTrackList": "_PianoRollTrackList_11kti_1", "Track": "_Track_11kti_7", "track": "_Track_11kti_7", "selected": "_selected_11kti_21" };
 
 // src/PianoRollTrackList.tsx
 import { createMemo as createMemo7, Index as Index3, Show as Show4 } from "solid-js";
-var PianoRollTrackList = /* @__PURE__ */ __name(() => {
+var PianoRollTrackList = () => {
   const viewPort = createMemo7(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
   return <div class={PianoRollTrackList_module_css_default.PianoRollTrackList}><Index3 each={context.tracks}>{(track, index) => {
@@ -1079,11 +1062,11 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
       {track().name || "[unnamed track]"}
     </div></Show4>;
   }}</Index3></div>;
-}, "PianoRollTrackList");
+};
 var PianoRollTrackList_default = PianoRollTrackList;
 
 // src/PianoRollScrollZoomViewPort.tsx
-var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+var PianoRollScrollZoomViewPort = (props) => {
   const zoomFactor = 500;
   const context = usePianoRollContext();
   return <ScrollZoomViewPort
@@ -1132,14 +1115,14 @@ var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
       horizontalKeys: () => ({ pixelSize: 60 })
     }}
   >{props.children}</ScrollZoomViewPort>;
-}, "PianoRollScrollZoomViewPort");
+};
 var PianoRollScrollZoomViewPort_default = PianoRollScrollZoomViewPort;
 
 // src/PianoRollNotesScroller.tsx
-import { createEffect as createEffect5, createSignal as createSignal4 } from "solid-js";
+import { createEffect as createEffect4, createSignal as createSignal4 } from "solid-js";
 
 // src/useBoundingClientRect.ts
-import { createEffect as createEffect4, createSignal as createSignal3 } from "solid-js";
+import { createEffect as createEffect3, createSignal as createSignal3 } from "solid-js";
 var defaultRect = {
   left: 0,
   width: 0,
@@ -1152,13 +1135,13 @@ var defaultRect = {
 };
 function useBoundingClientRect(containerRef) {
   const [boundingClientRect, setBoundingClientRect] = createSignal3(defaultRect);
-  createEffect4(() => {
+  createEffect3(() => {
     const container = containerRef();
     if (!container)
       return;
-    const updateBoundingClientRect = /* @__PURE__ */ __name(() => {
+    const updateBoundingClientRect = () => {
       setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
-    }, "updateBoundingClientRect");
+    };
     const resizeObserver = new ResizeObserver(updateBoundingClientRect);
     resizeObserver.observe(container);
     updateBoundingClientRect();
@@ -1168,30 +1151,29 @@ function useBoundingClientRect(containerRef) {
   });
   return boundingClientRect;
 }
-__name(useBoundingClientRect, "useBoundingClientRect");
 
 // src/PianoRollNotesScroller.tsx
-var PianoRollNotesScroller = /* @__PURE__ */ __name((props) => {
+var PianoRollNotesScroller = (props) => {
   const context = usePianoRollContext();
   const [ref, setRef] = createSignal4();
   const clientRect = useBoundingClientRect(ref);
-  createEffect5(() => {
+  createEffect4(() => {
     context.onNotesScrollerClientRectChange(clientRect());
   });
   return <ScrollZoomContainer_default
     ref={setRef}
     verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}
   >{props.children}</ScrollZoomContainer_default>;
-}, "PianoRollNotesScroller");
+};
 var PianoRollNotesScroller_default = PianoRollNotesScroller;
 
 // src/PianoRollTrackListScroller.tsx
-import { createEffect as createEffect6, createSignal as createSignal5 } from "solid-js";
-var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
+import { createEffect as createEffect5, createSignal as createSignal5 } from "solid-js";
+var PianoRollTrackListScroller = (props) => {
   const context = usePianoRollContext();
   const [ref, setRef] = createSignal5();
   const clientRect = useBoundingClientRect(ref);
-  createEffect6(() => {
+  createEffect5(() => {
     context.onTracksScrollerClientRectChange(clientRect());
   });
   return <ScrollZoomContainer_default
@@ -1200,14 +1182,14 @@ var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
     verticalDimensionName="verticalTracks"
     showScrollbar={context.mode === "keys"}
   >{props.children}</ScrollZoomContainer_default>;
-}, "PianoRollTrackListScroller");
+};
 var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 
 // src/PianoRollScale.tsx
 import { createMemo as createMemo8, Index as Index4, Show as Show5 } from "solid-js";
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-ZNE7lRttL9wJ/solid-pianoroll/src/PianoRollScale.module.css.js
-var digest7 = "cb997b7e12c7761253708bd6ddeeafac5c949397b9c43741d4bdf2d93d534714";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-1Z6Wo8jxrF0k/solid-pianoroll/src/PianoRollScale.module.css.js
+var digest7 = "686c303be8798fdc2579a63c350e335a21042ce3150552866a5896a2f019951a";
 var css7 = `._PianoRollScale_1khhn_1 {
   position: relative;
   width: 100%;
@@ -1257,25 +1239,25 @@ var css7 = `._PianoRollScale_1khhn_1 {
     document.head.appendChild(el);
   }
 })();
-var PianoRollScale_module_css_default = { "pianoRollScale": "_PianoRollScale_1khhn_1", "pianoRollScaleTime": "_PianoRollScale-Time_1khhn_7", "pianoRollScaleLabel": "_PianoRollScale-Label_1khhn_23", "highlighted": "_Highlighted_1khhn_31", "highlightedBorder": "_HighlightedBorder_1khhn_35" };
+var PianoRollScale_module_css_default = { "PianoRollScale": "_PianoRollScale_1khhn_1", "pianoRollScale": "_PianoRollScale_1khhn_1", "PianoRollScale-Time": "_PianoRollScale-Time_1khhn_7", "pianoRollScaleTime": "_PianoRollScale-Time_1khhn_7", "PianoRollScale-Label": "_PianoRollScale-Label_1khhn_23", "pianoRollScaleLabel": "_PianoRollScale-Label_1khhn_23", "Highlighted": "_Highlighted_1khhn_31", "highlighted": "_Highlighted_1khhn_31", "HighlightedBorder": "_HighlightedBorder_1khhn_35", "highlightedBorder": "_HighlightedBorder_1khhn_35" };
 
 // src/PianoRollScale.tsx
-var PianoRollScale = /* @__PURE__ */ __name(() => {
+var PianoRollScale = () => {
   const horizontalViewPort = createMemo8(() => useViewPortDimension("horizontal"));
   const grid = usePianoRollGrid_default();
   const context = usePianoRollContext();
-  const updatePlayheadPosition = /* @__PURE__ */ __name((event) => {
+  const updatePlayheadPosition = (event) => {
     const position = horizontalViewPort().calculatePosition(event.clientX);
     context.onPlayHeadPositionChange(position, event);
-  }, "updatePlayheadPosition");
+  };
   return <div
     class={PianoRollScale_module_css_default.PianoRollScale}
     onMouseDown={(event) => {
       updatePlayheadPosition(event);
-      const handleMouseUp = /* @__PURE__ */ __name(() => {
+      const handleMouseUp = () => {
         window.removeEventListener("mousemove", updatePlayheadPosition);
         window.removeEventListener("mouseup", handleMouseUp);
-      }, "handleMouseUp");
+      };
       window.addEventListener("mousemove", updatePlayheadPosition);
       window.addEventListener("mouseup", handleMouseUp);
     }}
@@ -1292,11 +1274,11 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
       }}
     ><Show5 when={entry().showLabel}><div class={PianoRollScale_module_css_default["PianoRollScale-Label"]}>{entry().label}</div></Show5></div></Show5>;
   }}</Index4></div>;
-}, "PianoRollScale");
+};
 var PianoRollScale_default = PianoRollScale;
 
 // src/PianoRoll.tsx
-var PianoRoll = /* @__PURE__ */ __name((allProps) => {
+var PianoRoll = (allProps) => {
   const propsWithDefaults = mergeProps4({ showAllTracks: false }, allProps);
   const [context, divProps] = splitContextProps(propsWithDefaults);
   return <PianoRollContextProvider value={context}><div {...divProps} class={PianoRoll_module_css_default.PianoRoll}><PianoRollScrollZoomViewPort_default>
@@ -1356,12 +1338,12 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       }}
     />
   </PianoRollScrollZoomViewPort_default></div></PianoRollContextProvider>;
-}, "PianoRoll");
+};
 var PianoRoll_default = PianoRoll;
 
 // src/viewport/PlayHead.tsx
-import { createEffect as createEffect7, createMemo as createMemo9, splitProps as splitProps3 } from "solid-js";
-var PlayHead = /* @__PURE__ */ __name((allProps) => {
+import { createEffect as createEffect6, createMemo as createMemo9, splitProps as splitProps3 } from "solid-js";
+var PlayHead = (allProps) => {
   const [props, divProps] = splitProps3(allProps, [
     "position",
     "sync",
@@ -1369,7 +1351,7 @@ var PlayHead = /* @__PURE__ */ __name((allProps) => {
     "dimensionName"
   ]);
   const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
-  createEffect7(() => {
+  createEffect6(() => {
     if (!props.sync)
       return;
     const maxPosition = viewPort.range;
@@ -1392,39 +1374,39 @@ var PlayHead = /* @__PURE__ */ __name((allProps) => {
     onMouseDown={(event) => {
       event.preventDefault();
       event.stopPropagation();
-      const handleMouseMove = /* @__PURE__ */ __name((event2) => {
+      const handleMouseMove = (event2) => {
         const newPosition = viewPort.calculatePosition(event2.clientX);
         props.onPositionChange?.(newPosition, event2);
-      }, "handleMouseMove");
-      const handleMouseUp = /* @__PURE__ */ __name(() => {
+      };
+      const handleMouseUp = () => {
         window.removeEventListener("mousemove", handleMouseMove);
         window.removeEventListener("mouseup", handleMouseUp);
-      }, "handleMouseUp");
+      };
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
     }}
   />;
-}, "PlayHead");
+};
 var PlayHead_default = PlayHead;
 
 // src/useNotes.ts
 import { createSignal as createSignal6 } from "solid-js";
-var useNotes = /* @__PURE__ */ __name(() => {
+var useNotes = () => {
   const [notes, onNotesChange] = createSignal6([]);
-  const onNoteChange = /* @__PURE__ */ __name((index, note) => {
+  const onNoteChange = (index, note) => {
     onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
-  }, "onNoteChange");
-  const onInsertNote = /* @__PURE__ */ __name((note) => {
+  };
+  const onInsertNote = (note) => {
     const index = Math.max(
       notes().findIndex(({ ticks }) => ticks > note.ticks),
       0
     );
     onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
     return index;
-  }, "onInsertNote");
-  const onRemoveNote = /* @__PURE__ */ __name((index) => {
+  };
+  const onRemoveNote = (index) => {
     onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
-  }, "onRemoveNote");
+  };
   return {
     notes,
     onNotesChange,
@@ -1432,7 +1414,7 @@ var useNotes = /* @__PURE__ */ __name(() => {
     onInsertNote,
     onRemoveNote
   };
-}, "useNotes");
+};
 var useNotes_default = useNotes;
 export {
   PianoRoll_default as PianoRoll,