solid-pianoroll 0.0.27 → 0.0.29

package/dist/dev.js

@@ -1,12 +1,12 @@
-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 { delegateEvents, createComponent, spread, mergeProps as mergeProps$1, insert, effect, setAttribute, memo, className, classList, template, setStyleProperty, use } from 'solid-js/web';
+import { createContext, mergeProps, Show, splitProps, createEffect, createMemo, createSignal, useContext, Index, For } from 'solid-js';
 import { createStore } from 'solid-js/store';
+import { createViewPortAxis } from 'solid-viewport';
 
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+// src/PianoRoll.tsx
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-ybxAKItRE20S/solid-pianoroll/src/PianoRoll.module.css.js
-var digest = "4c2b012b69d9a9d56b2ed407a7df42a743722df5ccdacb8b19182ce1656beca4";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-8lzhn6eq80hI/solid-pianoroll/src/PianoRoll.module.css.js
+var digest = "f98365679977aeae978639d556d0bab7b4f40e1a8f0db1eb3e5c93f9af6181e2";
 var css = `._PianoRoll_1v1e7_1 {
   box-sizing: border-box;
   display: flex;
@@ -54,7 +54,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" };
 var defaultState = {
   ppq: 0,
   mode: "keys",
@@ -74,7 +74,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),
@@ -86,7 +86,7 @@ var pianoRollStatePropNames = [
   "isKeyDown",
   "snapValueToGridIfEnabled"
 ];
-var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
+var createPianoRollstate = (initialState) => {
   const [state, setState] = createStore({
     ...defaultState,
     ...initialState
@@ -106,12 +106,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;
@@ -121,15 +121,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;
@@ -144,14 +144,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]: {
@@ -159,18 +159,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,
@@ -182,22 +182,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-AT9WAcVpF6To/solid-pianoroll/src/PianoRollKeys.module.css.js
-var digest2 = "032ad836c03622b012144242d71f4417c16e2b90fd9df23695d9c8a0c3fec5bb";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-QWt6xGwg8x8f/solid-pianoroll/src/PianoRollKeys.module.css.js
+var digest2 = "2dc49011f255b6528cef972ac959dce8864dd148b3dc48487161aa29d0898925";
 var css2 = `._PianoRollKeys_1ne9i_1 {
   position: relative;
   height: 100%;
@@ -260,64 +260,60 @@ 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" };
 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] = 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 };
-  }
-  __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 = {
@@ -328,7 +324,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,
     ...defaultViewPortProps,
@@ -343,18 +339,18 @@ var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
       return props.children;
     }
   });
-}, "ScrollZoomViewPort");
+};
 var ScrollZoomViewPortContext = createContext([]);
-var useViewPortDimension = /* @__PURE__ */ __name((name) => {
+var useViewPortDimension = (name) => {
   const viewPorts = useContext(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");
+};
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-z34CeYQYZ9li/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
-var digest3 = "58f65cab946007ad872eaf12fc29c802f739a009b7343bdf77207d442d49e738";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-sRdgNeeVXBuQ/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
+var digest3 = "8b3eabfb7fb7509fb8f2c3e80e0a7ca990acf44d3b9f09a34f5fd4d7a4b1cc4f";
 var css3 = `._ScrollZoomContainer_f395r_1 {
   height: 100%;
   width: 100%;
@@ -372,11 +368,11 @@ 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 _tmpl$ = /* @__PURE__ */ template(`<div><div><div><div></div></div></div></div>`, 8);
-var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
+var _tmpl$ = /* @__PURE__ */ template(`<div><div><div style=top:0;left:0;position:sticky;display:flex><div style=position:relative>`);
+var ScrollZoomContainer = (props) => {
   let scrollContentRef;
   const [ownProps, divProps] = splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
   const propsWithDefaults = mergeProps({
@@ -386,8 +382,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
   }, ownProps);
   const verticalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
   const horizontalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
-  const handleScroll = /* @__PURE__ */ __name((event) => {
-    event.preventDefault();
+  const handleScroll = (event) => {
     if (didUpdateScroll) {
       didUpdateScroll = false;
       return;
@@ -406,25 +401,26 @@ 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;
   createEffect(() => {
     const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
@@ -448,10 +444,10 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
     });
   });
   return (() => {
-    const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    var _el$ = _tmpl$(), _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;
+    var _ref$ = props.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
     spread(_el$, mergeProps$1(divProps, {
       get style() {
@@ -467,42 +463,37 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
         };
       }
     }), false, true);
-    const _ref$2 = scrollContentRef;
+    var _ref$2 = scrollContentRef;
     typeof _ref$2 === "function" ? use(_ref$2, _el$2) : scrollContentRef = _el$2;
-    _el$3.style.setProperty("top", "0");
-    _el$3.style.setProperty("left", "0");
-    _el$3.style.setProperty("position", "sticky");
-    _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`;
-      _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);
+      var _v$ = `${verticalViewPort().pixelSize}px`, _v$2 = `${horizontalViewPort().pixelSize}px`, _v$3 = `${verticalViewPort().pixelSize}px`, _v$4 = `${horizontalViewPort().pixelSize}px`;
+      _v$ !== _p$.e && setStyleProperty(_el$3, "height", _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$3, "width", _p$.t = _v$2);
+      _v$3 !== _p$.a && setStyleProperty(_el$4, "height", _p$.a = _v$3);
+      _v$4 !== _p$.o && setStyleProperty(_el$4, "width", _p$.o = _v$4);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
     });
     return _el$;
   })();
-}, "ScrollZoomContainer");
+};
 var ScrollZoomContainer_default = ScrollZoomContainer;
 
 // src/PianoRollKeys.tsx
-var _tmpl$2 = /* @__PURE__ */ template(`<div></div>`, 2);
-var PianoRollKeys = /* @__PURE__ */ __name(() => {
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var PianoRollKeys = () => {
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontalKeys"));
   const [isMouseDown, setIsMouseDown] = createSignal(false);
   const context = usePianoRollContext();
-  const handleMouseUp = /* @__PURE__ */ __name(() => {
+  const handleMouseUp = () => {
     setIsMouseDown(false);
-  }, "handleMouseUp");
+  };
   createEffect(() => {
     if (isMouseDown()) {
       window.addEventListener("mouseup", handleMouseUp);
@@ -511,7 +502,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
     }
   });
   return (() => {
-    const _el$ = _tmpl$2.cloneNode(true);
+    var _el$ = _tmpl$2();
     insert(_el$, createComponent(ScrollZoomContainer_default, {
       horizontalDimensionName: "horizontalKeys",
       showScrollbar: false,
@@ -528,7 +519,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$2 = _tmpl$2.cloneNode(true);
+                var _el$2 = _tmpl$2();
                 _el$2.addEventListener("mouseleave", () => {
                   if (isMouseDown()) {
                     context.onNoteUp(context.selectedTrackIndex, key().number);
@@ -547,26 +538,26 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
                   context.onNoteDown(context.selectedTrackIndex, key().number);
                 };
                 effect((_p$) => {
-                  const _v$3 = {
+                  var _v$3 = {
                     [PianoRollKeys_module_css_default["Key"]]: true,
                     [PianoRollKeys_module_css_default["black"]]: key().isBlack,
                     [PianoRollKeys_module_css_default["white"]]: !key().isBlack,
                     [PianoRollKeys_module_css_default["down"]]: isDown()
                   }, _v$4 = key().name, _v$5 = key().number % 12, _v$6 = `${virtualDimensions().offset - virtualDimensions().size * (!key().isBlack ? nextIsBlack ? 1 / 2 : 0 : 0)}px`, _v$7 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`, _v$8 = `0px 0px ${Math.min(virtualDimensions().size / 20, 1)}px ${Math.min(virtualDimensions().size / 50, 1)}px rgba(0, 0, 0, 0.5) ${key().isBlack ? "" : "inset"}` + isDown() ? `0px 0px ${Math.min(virtualDimensions().size / 8, 2)}px ${Math.min(virtualDimensions().size / 20, 2)}px rgba(0, 0, 0, 0.5) inset` : "";
-                  _p$._v$3 = 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);
-                  _v$6 !== _p$._v$6 && _el$2.style.setProperty("top", _p$._v$6 = _v$6);
-                  _v$7 !== _p$._v$7 && _el$2.style.setProperty("height", _p$._v$7 = _v$7);
-                  _v$8 !== _p$._v$8 && _el$2.style.setProperty("box-shadow", _p$._v$8 = _v$8);
+                  _p$.e = classList(_el$2, _v$3, _p$.e);
+                  _v$4 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$4);
+                  _v$5 !== _p$.a && setAttribute(_el$2, "data-index", _p$.a = _v$5);
+                  _v$6 !== _p$.o && setStyleProperty(_el$2, "top", _p$.o = _v$6);
+                  _v$7 !== _p$.i && setStyleProperty(_el$2, "height", _p$.i = _v$7);
+                  _v$8 !== _p$.n && setStyleProperty(_el$2, "box-shadow", _p$.n = _v$8);
                   return _p$;
                 }, {
-                  _v$3: void 0,
-                  _v$4: void 0,
-                  _v$5: void 0,
-                  _v$6: void 0,
-                  _v$7: void 0,
-                  _v$8: void 0
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0,
+                  n: void 0
                 });
                 return _el$2;
               }
@@ -576,17 +567,17 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       }
     }));
     effect((_p$) => {
-      const _v$ = PianoRollKeys_module_css_default.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("width", _p$._v$2 = _v$2);
+      var _v$ = PianoRollKeys_module_css_default.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$, "width", _p$.t = _v$2);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
-}, "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({
@@ -599,8 +590,8 @@ var keys = Array.from({
 var PianoRollKeys_default = PianoRollKeys;
 delegateEvents(["mousedown", "mouseup"]);
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-SENiLgehmaRv/solid-pianoroll/src/PianoRollNotes.module.css.js
-var digest4 = "d32249d8c7c0106628fae7a17d315808c6d638c17d0e5b249fa66822e9079fbc";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-fOFxcc31o2aC/solid-pianoroll/src/PianoRollNotes.module.css.js
+var digest4 = "3f793f31c65fd8f88cc4fb08f90896e86c345a805956221f08511b5a800c5877";
 var css4 = `._PianoRollNotes_u3pew_1 {
   position: absolute;
   flex: 1;
@@ -641,11 +632,11 @@ 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 _tmpl$3 = /* @__PURE__ */ template(`<div></div>`, 2);
-var PianoRollNotes = /* @__PURE__ */ __name((props) => {
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var PianoRollNotes = (props) => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
@@ -656,7 +647,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
   const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
   const [diffPosition, setDiffPosition] = createSignal(0);
   const [getInitialNote, setInitialNote] = createSignal();
-  const calculateNoteDragValues = /* @__PURE__ */ __name((event) => {
+  const calculateNoteDragValues = (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);
@@ -665,8 +656,8 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       midi,
       horiontalPosition
     };
-  }, "calculateNoteDragValues");
-  const handleMouseMove = /* @__PURE__ */ __name((mouseMoveEvent) => {
+  };
+  const handleMouseMove = (mouseMoveEvent) => {
     mouseMoveEvent.preventDefault();
     mouseMoveEvent.stopPropagation();
     const note = getInitialNote();
@@ -705,23 +696,23 @@ 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 (() => {
-    const _el$ = _tmpl$3.cloneNode(true);
+    var _el$ = _tmpl$3();
     _el$.$$mousedown = (mouseDownEvent) => {
       mouseDownEvent.preventDefault();
       mouseDownEvent.stopPropagation();
@@ -747,7 +738,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       setNoteDragMode("trimEnd");
       startDragging();
     };
-    const _ref$ = props.ref;
+    var _ref$ = props.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
     insert(_el$, createComponent(For, {
       get each() {
@@ -771,7 +762,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
                     return memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
                   },
                   get children() {
-                    const _el$2 = _tmpl$3.cloneNode(true);
+                    var _el$2 = _tmpl$3();
                     _el$2.$$mousedown = (event) => {
                       event.stopPropagation();
                       const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
@@ -797,23 +788,23 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
                     };
                     setAttribute(_el$2, "draggable", false);
                     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("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);
+                      var _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$.e && className(_el$2, _p$.e = _v$);
+                      _v$2 !== _p$.t && setStyleProperty(_el$2, "background-color", _p$.t = _v$2);
+                      _v$3 !== _p$.a && setStyleProperty(_el$2, "opacity", _p$.a = _v$3);
+                      _v$4 !== _p$.o && setStyleProperty(_el$2, "top", _p$.o = _v$4);
+                      _v$5 !== _p$.i && setStyleProperty(_el$2, "height", _p$.i = _v$5);
+                      _v$6 !== _p$.n && setStyleProperty(_el$2, "left", _p$.n = _v$6);
+                      _v$7 !== _p$.s && setStyleProperty(_el$2, "width", _p$.s = _v$7);
                       return _p$;
                     }, {
-                      _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
+                      e: void 0,
+                      t: void 0,
+                      a: void 0,
+                      o: void 0,
+                      i: void 0,
+                      n: void 0,
+                      s: void 0
                     });
                     return _el$2;
                   }
@@ -829,12 +820,12 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
     }, _$p));
     return _el$;
   })();
-}, "PianoRollNotes");
+};
 var PianoRollNotes_default = PianoRollNotes;
 delegateEvents(["mousedown", "mousemove", "dblclick"]);
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-yky0Qv2c5H02/solid-pianoroll/src/PianoRollGrid.module.css.js
-var digest5 = "bef5af7e6b3b53438d6f460319bb6386b517a5523d5a177037058e5b8317674e";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-FamItjgoB72k/solid-pianoroll/src/PianoRollGrid.module.css.js
+var digest5 = "8f99749fdd1842645e11fa8c67b5563c2609d77e4a017609747695fcd73e49fc";
 var css5 = `._PianoRollGrid_qke5f_1 {
   position: relative;
   width: 100%;
@@ -890,8 +881,8 @@ 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 usePianoRollGrid = /* @__PURE__ */ __name(() => {
+var PianoRollGrid_module_css_default = { "PianoRollGrid": "_PianoRollGrid_qke5f_1", "pianoRollGrid": "_PianoRollGrid_qke5f_1", "PianoRollGrid-Row": "_PianoRollGrid-Row_qke5f_7", "pianoRollGridRow": "_PianoRollGrid-Row_qke5f_7", "IsDark": "_IsDark_qke5f_14", "isDark": "_IsDark_qke5f_14", "Key": "_Key_qke5f_18", "key": "_Key_qke5f_18", "IsBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "isBlackAndNextIsWhite": "_IsBlackAndNextIsWhite_qke5f_21", "PianoRollGrid-Time": "_PianoRollGrid-Time_qke5f_26", "pianoRollGridTime": "_PianoRollGrid-Time_qke5f_26", "Highlighted": "_Highlighted_qke5f_37", "highlighted": "_Highlighted_qke5f_37", "HighlightedBorder": "_HighlightedBorder_qke5f_41", "highlightedBorder": "_HighlightedBorder_qke5f_41" };
+var usePianoRollGrid = () => {
   const context = usePianoRollContext();
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const measureTicks = createMemo(() => context.ppq * 4);
@@ -908,7 +899,6 @@ var usePianoRollGrid = /* @__PURE__ */ __name(() => {
     }
     return value;
   }
-  __name(calculateVisibleGridDivisorTicks, "calculateVisibleGridDivisorTicks");
   const gridDivisorTicks = createMemo(
     () => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks())
   );
@@ -936,18 +926,18 @@ var usePianoRollGrid = /* @__PURE__ */ __name(() => {
     });
   });
   return gridArray;
-}, "usePianoRollGrid");
+};
 var usePianoRollGrid_default = usePianoRollGrid;
 
 // src/PianoRollGrid.tsx
-var _tmpl$4 = /* @__PURE__ */ template(`<div></div>`, 2);
-var PianoRollGrid = /* @__PURE__ */ __name(() => {
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var PianoRollGrid = () => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const gridArray = usePianoRollGrid_default();
   return (() => {
-    const _el$ = _tmpl$4.cloneNode(true);
+    var _el$ = _tmpl$4();
     insert(_el$, createComponent(Index, {
       get each() {
         return gridArray();
@@ -958,21 +948,21 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
             return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$4.cloneNode(true);
+            var _el$2 = _tmpl$4();
             effect((_p$) => {
-              const _v$ = {
+              var _v$ = {
                 [PianoRollGrid_module_css_default["PianoRollGrid-Time"]]: true,
                 [PianoRollGrid_module_css_default["Highlighted"]]: entry().isHighlighted,
                 [PianoRollGrid_module_css_default["HighlightedBorder"]]: entry().hasHighlightedBorder
               }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
-              _p$._v$ = 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);
+              _p$.e = classList(_el$2, _v$, _p$.e);
+              _v$2 !== _p$.t && setStyleProperty(_el$2, "left", _p$.t = _v$2);
+              _v$3 !== _p$.a && setStyleProperty(_el$2, "width", _p$.a = _v$3);
               return _p$;
             }, {
-              _v$: void 0,
-              _v$2: void 0,
-              _v$3: void 0
+              e: void 0,
+              t: void 0,
+              a: void 0
             });
             return _el$2;
           }
@@ -993,22 +983,22 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$3 = _tmpl$4.cloneNode(true);
+                var _el$3 = _tmpl$4();
                 effect((_p$) => {
-                  const _v$4 = {
+                  var _v$4 = {
                     [PianoRollGrid_module_css_default["PianoRollGrid-Row"]]: true,
                     [PianoRollGrid_module_css_default["Key"]]: true,
                     [PianoRollGrid_module_css_default["IsDark"]]: key().isBlack,
                     [PianoRollGrid_module_css_default["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
                   }, _v$5 = `${virtualDimensions().offset}px`, _v$6 = `${virtualDimensions().size}px`;
-                  _p$._v$4 = 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);
+                  _p$.e = classList(_el$3, _v$4, _p$.e);
+                  _v$5 !== _p$.t && setStyleProperty(_el$3, "top", _p$.t = _v$5);
+                  _v$6 !== _p$.a && setStyleProperty(_el$3, "height", _p$.a = _v$6);
                   return _p$;
                 }, {
-                  _v$4: void 0,
-                  _v$5: void 0,
-                  _v$6: void 0
+                  e: void 0,
+                  t: void 0,
+                  a: void 0
                 });
                 return _el$3;
               }
@@ -1033,20 +1023,20 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$4 = _tmpl$4.cloneNode(true);
+                var _el$4 = _tmpl$4();
                 effect((_p$) => {
-                  const _v$7 = {
+                  var _v$7 = {
                     [PianoRollGrid_module_css_default["PianoRollGrid-Row"]]: true,
                     [PianoRollGrid_module_css_default["IsDark"]]: index() % 2 === 0
                   }, _v$8 = `${virtualDimensions().offset}px`, _v$9 = `${virtualDimensions().size}px`;
-                  _p$._v$7 = 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);
+                  _p$.e = classList(_el$4, _v$7, _p$.e);
+                  _v$8 !== _p$.t && setStyleProperty(_el$4, "top", _p$.t = _v$8);
+                  _v$9 !== _p$.a && setStyleProperty(_el$4, "height", _p$.a = _v$9);
                   return _p$;
                 }, {
-                  _v$7: void 0,
-                  _v$8: void 0,
-                  _v$9: void 0
+                  e: void 0,
+                  t: void 0,
+                  a: void 0
                 });
                 return _el$4;
               }
@@ -1058,16 +1048,16 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
     effect(() => className(_el$, PianoRollGrid_module_css_default.PianoRollGrid));
     return _el$;
   })();
-}, "PianoRollGrid");
+};
 var PianoRollGrid_default = PianoRollGrid;
-var _tmpl$5 = /* @__PURE__ */ template(`<input step="0.01">`, 1);
-var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
+var _tmpl$5 = /* @__PURE__ */ template(`<input step=0.01>`);
+var ZoomSliderControl = (props) => {
   const propsWithDefaults = mergeProps({
     orientation: "horizontal"
   }, props);
   const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
   return (() => {
-    const _el$ = _tmpl$5.cloneNode(true);
+    var _el$ = _tmpl$5();
     spread(_el$, mergeProps$1({
       get min() {
         return dimension().minZoom;
@@ -1088,7 +1078,7 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
       orient: propsWithDefaults.orientation
     }), {
       get style() {
-        return propsWithDefaults.orientation === "vertical" ? {
+        return memo(() => propsWithDefaults.orientation === "vertical")() ? {
           margin: 0,
           "margin-left": "4px",
           "margin-right": "4px",
@@ -1097,6 +1087,7 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
           ...{
             "writing-mode": "bt-lr",
             "-webkit-appearance": "slider-vertical"
+            /* WebKit */
           },
           ...typeof props.style === "object" && props.style
         } : {
@@ -1109,11 +1100,11 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
     }), false, false);
     return _el$;
   })();
-}, "ZoomSliderControl");
+};
 var ZoomSliderControl_default = ZoomSliderControl;
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-klyaUxmiR6E6/solid-pianoroll/src/PianoRollTrackList.module.css.js
-var digest6 = "6056d57de83d8e4c4523216c80e2e310bfe4af3721ee4a3bcd1ea77675ce33f2";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-w5NNkTp9mNCS/solid-pianoroll/src/PianoRollTrackList.module.css.js
+var digest6 = "d049e8498e63cdce6936c315f09fa36f99bc002cbbdbdda32aca02834e99d8dd";
 var css6 = `._PianoRollTrackList_11kti_1 {
   position: relative;
   height: 100%;
@@ -1149,14 +1140,14 @@ 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 _tmpl$6 = /* @__PURE__ */ template(`<div></div>`, 2);
-var _tmpl$22 = /* @__PURE__ */ template(`<div> </div>`, 2);
-var PianoRollTrackList = /* @__PURE__ */ __name(() => {
+var PianoRollTrackList_module_css_default = { "PianoRollTrackList": "_PianoRollTrackList_11kti_1", "pianoRollTrackList": "_PianoRollTrackList_11kti_1", "Track": "_Track_11kti_7", "track": "_Track_11kti_7", "selected": "_selected_11kti_21" };
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div> `);
+var PianoRollTrackList = () => {
   const viewPort = createMemo(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$6.cloneNode(true);
+    var _el$ = _tmpl$6();
     insert(_el$, createComponent(Index, {
       get each() {
         return context.tracks;
@@ -1168,25 +1159,25 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$22.cloneNode(true), _el$3 = _el$2.firstChild;
+            var _el$2 = _tmpl$22(), _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$) => {
-              const _v$ = {
+              var _v$ = {
                 [PianoRollTrackList_module_css_default["Track"]]: true,
                 [PianoRollTrackList_module_css_default["selected"]]: index === context.selectedTrackIndex
               }, _v$2 = track().name, _v$3 = `${virtualDimensions().offset}px`, _v$4 = `${virtualDimensions().size}px`;
-              _p$._v$ = 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);
+              _p$.e = classList(_el$2, _v$, _p$.e);
+              _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
+              _v$3 !== _p$.a && setStyleProperty(_el$2, "top", _p$.a = _v$3);
+              _v$4 !== _p$.o && setStyleProperty(_el$2, "height", _p$.o = _v$4);
               return _p$;
             }, {
-              _v$: void 0,
-              _v$2: void 0,
-              _v$3: void 0,
-              _v$4: void 0
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0
             });
             return _el$2;
           }
@@ -1196,10 +1187,10 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
     effect(() => className(_el$, PianoRollTrackList_module_css_default.PianoRollTrackList));
     return _el$;
   })();
-}, "PianoRollTrackList");
+};
 var PianoRollTrackList_default = PianoRollTrackList;
 delegateEvents(["click"]);
-var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+var PianoRollScrollZoomViewPort = (props) => {
   const zoomFactor = 500;
   const context = usePianoRollContext();
   return createComponent(ScrollZoomViewPort, {
@@ -1249,7 +1240,7 @@ var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
       return props.children;
     }
   });
-}, "PianoRollScrollZoomViewPort");
+};
 var PianoRollScrollZoomViewPort_default = PianoRollScrollZoomViewPort;
 var defaultRect = {
   left: 0,
@@ -1267,9 +1258,9 @@ function useBoundingClientRect(containerRef) {
     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();
@@ -1279,10 +1270,9 @@ 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] = createSignal();
   const clientRect = useBoundingClientRect(ref);
@@ -1298,9 +1288,9 @@ var PianoRollNotesScroller = /* @__PURE__ */ __name((props) => {
       return props.children;
     }
   });
-}, "PianoRollNotesScroller");
+};
 var PianoRollNotesScroller_default = PianoRollNotesScroller;
-var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
+var PianoRollTrackListScroller = (props) => {
   const context = usePianoRollContext();
   const [ref, setRef] = createSignal();
   const clientRect = useBoundingClientRect(ref);
@@ -1318,11 +1308,11 @@ var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
       return props.children;
     }
   });
-}, "PianoRollTrackListScroller");
+};
 var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-9OGmi28jUoHf/solid-pianoroll/src/PianoRollScale.module.css.js
-var digest7 = "65643106a937c4c0bffd54789ed098499d6c2055ca2ea4fa79920c0020859678";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-cm8q894CpXzZ/solid-pianoroll/src/PianoRollScale.module.css.js
+var digest7 = "8c0c1123f6a44a31a2bc14c10ff9100747fd8502666ba18676b6ac47d08bc8ba";
 var css7 = `._PianoRollScale_1khhn_1 {
   position: relative;
   width: 100%;
@@ -1372,26 +1362,26 @@ 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 _tmpl$7 = /* @__PURE__ */ template(`<div></div>`, 2);
-var PianoRollScale = /* @__PURE__ */ __name(() => {
+var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
+var PianoRollScale = () => {
   const horizontalViewPort = createMemo(() => 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 (() => {
-    const _el$ = _tmpl$7.cloneNode(true);
+    var _el$ = _tmpl$7();
     _el$.$$mousedown = (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);
     };
@@ -1405,32 +1395,32 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
             return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$7.cloneNode(true);
+            var _el$2 = _tmpl$7();
             insert(_el$2, createComponent(Show, {
               get when() {
                 return entry().showLabel;
               },
               get children() {
-                const _el$3 = _tmpl$7.cloneNode(true);
+                var _el$3 = _tmpl$7();
                 insert(_el$3, () => entry().label);
                 effect(() => className(_el$3, PianoRollScale_module_css_default["PianoRollScale-Label"]));
                 return _el$3;
               }
             }));
             effect((_p$) => {
-              const _v$ = {
+              var _v$ = {
                 [PianoRollScale_module_css_default["PianoRollScale-Time"]]: true,
                 [PianoRollScale_module_css_default["Highlighted"]]: entry().isHighlighted,
                 [PianoRollScale_module_css_default["HighlightedBorder"]]: entry().hasHighlightedBorder
               }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
-              _p$._v$ = 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);
+              _p$.e = classList(_el$2, _v$, _p$.e);
+              _v$2 !== _p$.t && setStyleProperty(_el$2, "left", _p$.t = _v$2);
+              _v$3 !== _p$.a && setStyleProperty(_el$2, "width", _p$.a = _v$3);
               return _p$;
             }, {
-              _v$: void 0,
-              _v$2: void 0,
-              _v$3: void 0
+              e: void 0,
+              t: void 0,
+              a: void 0
             });
             return _el$2;
           }
@@ -1440,16 +1430,16 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
     effect(() => className(_el$, PianoRollScale_module_css_default.PianoRollScale));
     return _el$;
   })();
-}, "PianoRollScale");
+};
 var PianoRollScale_default = PianoRollScale;
 delegateEvents(["mousedown"]);
 
 // 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) => {
+var _tmpl$8 = /* @__PURE__ */ template(`<div style="height:30px;border-right:1px black solid"><button style=font-size:16px;line-height:16px;cursor:pointer;overflow:hidden><div>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div style=width:100%;display:flex;height:100%;flex-direction:column;overflow:hidden><div style=height:30px></div><div style=flex:1;position:relative;overflow:hidden>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div><div><div style=flex:1;display:flex;overflow:hidden>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
+var PianoRoll = (allProps) => {
   const propsWithDefaults = mergeProps({
     showAllTracks: false
   }, allProps);
@@ -1457,7 +1447,7 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
   return createComponent(PianoRollContextProvider, {
     value: context,
     get children() {
-      const _el$ = _tmpl$42.cloneNode(true);
+      var _el$ = _tmpl$42();
       spread(_el$, mergeProps$1(divProps, {
         get ["class"]() {
           return PianoRoll_module_css_default.PianoRoll;
@@ -1466,7 +1456,7 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       insert(_el$, createComponent(PianoRollScrollZoomViewPort_default, {
         get children() {
           return [(() => {
-            const _el$2 = _tmpl$32.cloneNode(true), _el$3 = _el$2.firstChild, _el$7 = _el$3.firstChild;
+            var _el$2 = _tmpl$32(), _el$3 = _el$2.firstChild, _el$7 = _el$3.firstChild;
             insert(_el$2, createComponent(ZoomSliderControl_default, {
               orientation: "vertical",
               dimensionName: "verticalTracks"
@@ -1476,22 +1466,13 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
                 return context.showTrackList;
               },
               get children() {
-                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");
+                var _el$4 = _tmpl$8(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
                 _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" ? "\u2261" : "\u{1F3B9}");
                 effect(() => setAttribute(_el$5, "title", context.mode === "keys" ? "Tracks Mode" : "Keys Mode"));
                 return _el$4;
               }
             }), _el$7);
-            _el$7.style.setProperty("flex", "1");
-            _el$7.style.setProperty("display", "flex");
-            _el$7.style.setProperty("overflow", "hidden");
             insert(_el$7, createComponent(Show, {
               get when() {
                 return context.showTrackList;
@@ -1515,19 +1496,10 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
             insert(_el$2, createComponent(PianoRollNotesScroller_default, {
               get children() {
                 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");
+                  var _el$8 = _tmpl$23(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
                   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);
+                  insert(_el$0, createComponent(PianoRollGrid_default, {}), null);
+                  insert(_el$0, createComponent(PianoRollNotes_default, {}), null);
                   return _el$8;
                 })()];
               }
@@ -1539,16 +1511,16 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
               }
             }), null);
             effect((_p$) => {
-              const _v$ = PianoRoll_module_css_default.PianoRollContainer, _v$2 = {
+              var _v$ = PianoRoll_module_css_default.PianoRollContainer, _v$2 = {
                 [PianoRoll_module_css_default.PianoRollLeftColumn]: true,
                 [PianoRoll_module_css_default.showTrackList]: context.showTrackList
               };
-              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
-              _p$._v$2 = classList(_el$3, _v$2, _p$._v$2);
+              _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+              _p$.t = classList(_el$3, _v$2, _p$.t);
               return _p$;
             }, {
-              _v$: void 0,
-              _v$2: void 0
+              e: void 0,
+              t: void 0
             });
             return _el$2;
           })(), createComponent(ZoomSliderControl_default, {
@@ -1565,11 +1537,11 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       return _el$;
     }
   });
-}, "PianoRoll");
+};
 var PianoRoll_default = PianoRoll;
 delegateEvents(["click"]);
-var _tmpl$9 = /* @__PURE__ */ template(`<div class="PlayHead"></div>`, 2);
-var PlayHead = /* @__PURE__ */ __name((allProps) => {
+var _tmpl$9 = /* @__PURE__ */ template(`<div class=PlayHead>`);
+var PlayHead = (allProps) => {
   const [props, divProps] = splitProps(allProps, ["position", "sync", "onPositionChange", "dimensionName"]);
   const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
   createEffect(() => {
@@ -1581,7 +1553,7 @@ var PlayHead = /* @__PURE__ */ __name((allProps) => {
   });
   const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.position));
   return (() => {
-    const _el$ = _tmpl$9.cloneNode(true);
+    var _el$ = _tmpl$9();
     spread(_el$, mergeProps$1(divProps, {
       get style() {
         return {
@@ -1597,38 +1569,38 @@ 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);
       }
     }), false, false);
     return _el$;
   })();
-}, "PlayHead");
+};
 var PlayHead_default = PlayHead;
-var useNotes = /* @__PURE__ */ __name(() => {
+var useNotes = () => {
   const [notes, onNotesChange] = createSignal([]);
-  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,
@@ -1636,7 +1608,7 @@ var useNotes = /* @__PURE__ */ __name(() => {
     onInsertNote,
     onRemoveNote
   };
-}, "useNotes");
+};
 var useNotes_default = useNotes;
 
 export { PianoRoll_default as PianoRoll, PlayHead_default as PlayHead, usePianoRollState_default as createPianoRollstate, useNotes_default as useNotes };