solid-pianoroll 0.0.27 → 0.0.29

package/dist/dev.cjs

@@ -3,12 +3,12 @@
 var web = require('solid-js/web');
 var solidJs = require('solid-js');
 var store = require('solid-js/store');
+var solidViewport = require('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-V03eUkPfYEIp/solid-pianoroll/src/PianoRoll.module.css.js
-var digest = "aa6e03c5e37f26ea12d9db12cf0b54922c25d6767d24d6356119f357fec7dbc1";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-s3EaGM8kmrC8/solid-pianoroll/src/PianoRoll.module.css.js
+var digest = "4c2b012b69d9a9d56b2ed407a7df42a743722df5ccdacb8b19182ce1656beca4";
 var css = `._PianoRoll_1v1e7_1 {
   box-sizing: border-box;
   display: flex;
@@ -56,7 +56,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",
@@ -76,7 +76,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),
@@ -88,7 +88,7 @@ var pianoRollStatePropNames = [
   "isKeyDown",
   "snapValueToGridIfEnabled"
 ];
-var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
+var createPianoRollstate = (initialState) => {
   const [state, setState] = store.createStore({
     ...defaultState,
     ...initialState
@@ -108,12 +108,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;
@@ -123,15 +123,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;
@@ -146,14 +146,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]: {
@@ -161,18 +161,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 solidJs.mergeProps(state, {
     ...handlers,
     onNoteChange,
@@ -184,22 +184,22 @@ var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
     snapValueToGridIfEnabled,
     onPlayheadPositionChange
   });
-}, "createPianoRollstate");
+};
 exports.createPianoRollstate = createPianoRollstate;
 
 // src/PianoRollContext.tsx
 var PianoRollContext = solidJs.createContext();
 var PianoRollContextProvider = PianoRollContext.Provider;
-var usePianoRollContext = /* @__PURE__ */ __name(() => {
+var usePianoRollContext = () => {
   const context = solidJs.useContext(PianoRollContext);
   if (!context)
     throw new Error("No PianoRollContext found");
   return context;
-}, "usePianoRollContext");
-var splitContextProps = /* @__PURE__ */ __name((allProps) => solidJs.splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
+};
+var splitContextProps = (allProps) => solidJs.splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]);
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-xTMbQP4wD71W/solid-pianoroll/src/PianoRollKeys.module.css.js
-var digest2 = "a18eb8da324ba2dc925df238bd089ee2fb6d15e49406fe7cb81d07555761144d";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-QHhwuVzsA5eM/solid-pianoroll/src/PianoRollKeys.module.css.js
+var digest2 = "655c9a4be622ec365983cf13073531f7560f268053424caa6297da081b5a6da8";
 var css2 = `._PianoRollKeys_1ne9i_1 {
   position: relative;
   height: 100%;
@@ -262,64 +262,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 = solidViewport.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] = store.createStore(getStateWithFunctions());
-  solidJs.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 = {
@@ -330,7 +326,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,
@@ -345,18 +341,18 @@ var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
       return props.children;
     }
   });
-}, "ScrollZoomViewPort");
+};
 var ScrollZoomViewPortContext = solidJs.createContext([]);
-var useViewPortDimension = /* @__PURE__ */ __name((name) => {
+var useViewPortDimension = (name) => {
   const viewPorts = solidJs.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-F0rVD0IPyGOM/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
-var digest3 = "c5228d6ab7bb0316abe83997c38bb248d413dbf7dd63f784bdb599ff69cab02c";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-Vy2i5NPJLk6j/solid-pianoroll/src/viewport/ScrollZoomContainer.module.css.js
+var digest3 = "e0ac7449a918804762170aa6571b135af8e3854b1c098de2d57d8c41d73b721c";
 var css3 = `._ScrollZoomContainer_f395r_1 {
   height: 100%;
   width: 100%;
@@ -374,11 +370,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__ */ web.template(`<div><div><div><div></div></div></div></div>`, 8);
-var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
+var _tmpl$ = /* @__PURE__ */ web.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] = solidJs.splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
   const propsWithDefaults = solidJs.mergeProps({
@@ -388,8 +384,7 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
   }, ownProps);
   const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
-  const handleScroll = /* @__PURE__ */ __name((event) => {
-    event.preventDefault();
+  const handleScroll = (event) => {
     if (didUpdateScroll) {
       didUpdateScroll = false;
       return;
@@ -408,25 +403,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;
   solidJs.createEffect(() => {
     const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
@@ -450,10 +446,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" ? web.use(_ref$, _el$) : props.ref = _el$;
     web.spread(_el$, web.mergeProps(divProps, {
       get style() {
@@ -469,42 +465,37 @@ var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
         };
       }
     }), false, true);
-    const _ref$2 = scrollContentRef;
+    var _ref$2 = scrollContentRef;
     typeof _ref$2 === "function" ? web.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");
     web.insert(_el$4, () => props.children);
     web.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 && web.setStyleProperty(_el$3, "height", _p$.e = _v$);
+      _v$2 !== _p$.t && web.setStyleProperty(_el$3, "width", _p$.t = _v$2);
+      _v$3 !== _p$.a && web.setStyleProperty(_el$4, "height", _p$.a = _v$3);
+      _v$4 !== _p$.o && web.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__ */ web.template(`<div></div>`, 2);
-var PianoRollKeys = /* @__PURE__ */ __name(() => {
+var _tmpl$2 = /* @__PURE__ */ web.template(`<div>`);
+var PianoRollKeys = () => {
   const verticalViewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontalKeys"));
   const [isMouseDown, setIsMouseDown] = solidJs.createSignal(false);
   const context = usePianoRollContext();
-  const handleMouseUp = /* @__PURE__ */ __name(() => {
+  const handleMouseUp = () => {
     setIsMouseDown(false);
-  }, "handleMouseUp");
+  };
   solidJs.createEffect(() => {
     if (isMouseDown()) {
       window.addEventListener("mouseup", handleMouseUp);
@@ -513,7 +504,7 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
     }
   });
   return (() => {
-    const _el$ = _tmpl$2.cloneNode(true);
+    var _el$ = _tmpl$2();
     web.insert(_el$, web.createComponent(ScrollZoomContainer_default, {
       horizontalDimensionName: "horizontalKeys",
       showScrollbar: false,
@@ -530,7 +521,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);
@@ -549,26 +540,26 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
                   context.onNoteDown(context.selectedTrackIndex, key().number);
                 };
                 web.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 = web.classList(_el$2, _v$3, _p$._v$3);
-                  _v$4 !== _p$._v$4 && web.setAttribute(_el$2, "title", _p$._v$4 = _v$4);
-                  _v$5 !== _p$._v$5 && web.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 = web.classList(_el$2, _v$3, _p$.e);
+                  _v$4 !== _p$.t && web.setAttribute(_el$2, "title", _p$.t = _v$4);
+                  _v$5 !== _p$.a && web.setAttribute(_el$2, "data-index", _p$.a = _v$5);
+                  _v$6 !== _p$.o && web.setStyleProperty(_el$2, "top", _p$.o = _v$6);
+                  _v$7 !== _p$.i && web.setStyleProperty(_el$2, "height", _p$.i = _v$7);
+                  _v$8 !== _p$.n && web.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;
               }
@@ -578,17 +569,17 @@ var PianoRollKeys = /* @__PURE__ */ __name(() => {
       }
     }));
     web.effect((_p$) => {
-      const _v$ = PianoRollKeys_module_css_default.PianoRollKeys, _v$2 = `${horizontalViewPort().pixelSize}px`;
-      _v$ !== _p$._v$ && web.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 && web.className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && web.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({
@@ -601,8 +592,8 @@ var keys = Array.from({
 var PianoRollKeys_default = PianoRollKeys;
 web.delegateEvents(["mousedown", "mouseup"]);
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-Fvrbm3h7J0pU/solid-pianoroll/src/PianoRollNotes.module.css.js
-var digest4 = "77ea91fc1355e4aabc5edaca5bce8bc7f24ffa40c2865b309d4b577b9e996fab";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-R3rIsMTusReO/solid-pianoroll/src/PianoRollNotes.module.css.js
+var digest4 = "a8a19bfe58e3f6557481c4cde3a2a96269ffb1085b1b546dc004a1a0127b96c5";
 var css4 = `._PianoRollNotes_u3pew_1 {
   position: absolute;
   flex: 1;
@@ -643,11 +634,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__ */ web.template(`<div></div>`, 2);
-var PianoRollNotes = /* @__PURE__ */ __name((props) => {
+var _tmpl$3 = /* @__PURE__ */ web.template(`<div>`);
+var PianoRollNotes = (props) => {
   const context = usePianoRollContext();
   const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
@@ -658,7 +649,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
   const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = solidJs.createSignal(-1);
   const [diffPosition, setDiffPosition] = solidJs.createSignal(0);
   const [getInitialNote, setInitialNote] = solidJs.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);
@@ -667,8 +658,8 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       midi,
       horiontalPosition
     };
-  }, "calculateNoteDragValues");
-  const handleMouseMove = /* @__PURE__ */ __name((mouseMoveEvent) => {
+  };
+  const handleMouseMove = (mouseMoveEvent) => {
     mouseMoveEvent.preventDefault();
     mouseMoveEvent.stopPropagation();
     const note = getInitialNote();
@@ -707,23 +698,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();
@@ -749,7 +740,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
       setNoteDragMode("trimEnd");
       startDragging();
     };
-    const _ref$ = props.ref;
+    var _ref$ = props.ref;
     typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
     web.insert(_el$, web.createComponent(solidJs.For, {
       get each() {
@@ -773,7 +764,7 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
                     return web.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);
@@ -799,23 +790,23 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
                     };
                     web.setAttribute(_el$2, "draggable", false);
                     web.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$ && web.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 && web.className(_el$2, _p$.e = _v$);
+                      _v$2 !== _p$.t && web.setStyleProperty(_el$2, "background-color", _p$.t = _v$2);
+                      _v$3 !== _p$.a && web.setStyleProperty(_el$2, "opacity", _p$.a = _v$3);
+                      _v$4 !== _p$.o && web.setStyleProperty(_el$2, "top", _p$.o = _v$4);
+                      _v$5 !== _p$.i && web.setStyleProperty(_el$2, "height", _p$.i = _v$5);
+                      _v$6 !== _p$.n && web.setStyleProperty(_el$2, "left", _p$.n = _v$6);
+                      _v$7 !== _p$.s && web.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;
                   }
@@ -831,12 +822,12 @@ var PianoRollNotes = /* @__PURE__ */ __name((props) => {
     }, _$p));
     return _el$;
   })();
-}, "PianoRollNotes");
+};
 var PianoRollNotes_default = PianoRollNotes;
 web.delegateEvents(["mousedown", "mousemove", "dblclick"]);
 
-// esbuild-css-modules-plugin-namespace:/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-88608-cvLT374mTOk9/solid-pianoroll/src/PianoRollGrid.module.css.js
-var digest5 = "c27bcb7a9659263ec5bec58defc628211f8062bc76f79cb7aa8d14e31bfca807";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-AoK0aPVvelR0/solid-pianoroll/src/PianoRollGrid.module.css.js
+var digest5 = "dcbb9c2e6dfd3dc62419f65368e6f7d3c8b024ceea2c8f9247cff15156f9bc65";
 var css5 = `._PianoRollGrid_qke5f_1 {
   position: relative;
   width: 100%;
@@ -892,8 +883,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 = solidJs.createMemo(() => useViewPortDimension("horizontal"));
   const measureTicks = solidJs.createMemo(() => context.ppq * 4);
@@ -910,7 +901,6 @@ var usePianoRollGrid = /* @__PURE__ */ __name(() => {
     }
     return value;
   }
-  __name(calculateVisibleGridDivisorTicks, "calculateVisibleGridDivisorTicks");
   const gridDivisorTicks = solidJs.createMemo(
     () => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks())
   );
@@ -938,18 +928,18 @@ var usePianoRollGrid = /* @__PURE__ */ __name(() => {
     });
   });
   return gridArray;
-}, "usePianoRollGrid");
+};
 var usePianoRollGrid_default = usePianoRollGrid;
 
 // src/PianoRollGrid.tsx
-var _tmpl$4 = /* @__PURE__ */ web.template(`<div></div>`, 2);
-var PianoRollGrid = /* @__PURE__ */ __name(() => {
+var _tmpl$4 = /* @__PURE__ */ web.template(`<div>`);
+var PianoRollGrid = () => {
   const context = usePianoRollContext();
   const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
   const gridArray = usePianoRollGrid_default();
   return (() => {
-    const _el$ = _tmpl$4.cloneNode(true);
+    var _el$ = _tmpl$4();
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
         return gridArray();
@@ -960,21 +950,21 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
             return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$4.cloneNode(true);
+            var _el$2 = _tmpl$4();
             web.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$ = web.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 = web.classList(_el$2, _v$, _p$.e);
+              _v$2 !== _p$.t && web.setStyleProperty(_el$2, "left", _p$.t = _v$2);
+              _v$3 !== _p$.a && web.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;
           }
@@ -995,22 +985,22 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$3 = _tmpl$4.cloneNode(true);
+                var _el$3 = _tmpl$4();
                 web.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 = web.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 = web.classList(_el$3, _v$4, _p$.e);
+                  _v$5 !== _p$.t && web.setStyleProperty(_el$3, "top", _p$.t = _v$5);
+                  _v$6 !== _p$.a && web.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;
               }
@@ -1035,20 +1025,20 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
                 return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$4 = _tmpl$4.cloneNode(true);
+                var _el$4 = _tmpl$4();
                 web.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 = web.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 = web.classList(_el$4, _v$7, _p$.e);
+                  _v$8 !== _p$.t && web.setStyleProperty(_el$4, "top", _p$.t = _v$8);
+                  _v$9 !== _p$.a && web.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;
               }
@@ -1060,16 +1050,16 @@ var PianoRollGrid = /* @__PURE__ */ __name(() => {
     web.effect(() => web.className(_el$, PianoRollGrid_module_css_default.PianoRollGrid));
     return _el$;
   })();
-}, "PianoRollGrid");
+};
 var PianoRollGrid_default = PianoRollGrid;
-var _tmpl$5 = /* @__PURE__ */ web.template(`<input step="0.01">`, 1);
-var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
+var _tmpl$5 = /* @__PURE__ */ web.template(`<input step=0.01>`);
+var ZoomSliderControl = (props) => {
   const propsWithDefaults = solidJs.mergeProps({
     orientation: "horizontal"
   }, props);
   const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
   return (() => {
-    const _el$ = _tmpl$5.cloneNode(true);
+    var _el$ = _tmpl$5();
     web.spread(_el$, web.mergeProps({
       get min() {
         return dimension().minZoom;
@@ -1090,7 +1080,7 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
       orient: propsWithDefaults.orientation
     }), {
       get style() {
-        return propsWithDefaults.orientation === "vertical" ? {
+        return web.memo(() => propsWithDefaults.orientation === "vertical")() ? {
           margin: 0,
           "margin-left": "4px",
           "margin-right": "4px",
@@ -1099,6 +1089,7 @@ var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
           ...{
             "writing-mode": "bt-lr",
             "-webkit-appearance": "slider-vertical"
+            /* WebKit */
           },
           ...typeof props.style === "object" && props.style
         } : {
@@ -1111,11 +1102,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-4ujXRJ3IxJIT/solid-pianoroll/src/PianoRollTrackList.module.css.js
-var digest6 = "c0f9b8706d3eae39762f10cf96935d0062e09c38f11edebafd999c673551e23f";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-0s6QrsqkxWaN/solid-pianoroll/src/PianoRollTrackList.module.css.js
+var digest6 = "68f88fded084e9277cd921bc34d4952ddd03c4e6123ac27d8c7863f206fcf89f";
 var css6 = `._PianoRollTrackList_11kti_1 {
   position: relative;
   height: 100%;
@@ -1151,14 +1142,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__ */ web.template(`<div></div>`, 2);
-var _tmpl$22 = /* @__PURE__ */ web.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__ */ web.template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ web.template(`<div> `);
+var PianoRollTrackList = () => {
   const viewPort = solidJs.createMemo(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$6.cloneNode(true);
+    var _el$ = _tmpl$6();
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
         return context.tracks;
@@ -1170,25 +1161,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);
             web.insert(_el$2, index, _el$3);
             web.insert(_el$2, () => track().name || "[unnamed track]", null);
             web.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$ = web.classList(_el$2, _v$, _p$._v$);
-              _v$2 !== _p$._v$2 && web.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 = web.classList(_el$2, _v$, _p$.e);
+              _v$2 !== _p$.t && web.setAttribute(_el$2, "title", _p$.t = _v$2);
+              _v$3 !== _p$.a && web.setStyleProperty(_el$2, "top", _p$.a = _v$3);
+              _v$4 !== _p$.o && web.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;
           }
@@ -1198,10 +1189,10 @@ var PianoRollTrackList = /* @__PURE__ */ __name(() => {
     web.effect(() => web.className(_el$, PianoRollTrackList_module_css_default.PianoRollTrackList));
     return _el$;
   })();
-}, "PianoRollTrackList");
+};
 var PianoRollTrackList_default = PianoRollTrackList;
 web.delegateEvents(["click"]);
-var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+var PianoRollScrollZoomViewPort = (props) => {
   const zoomFactor = 500;
   const context = usePianoRollContext();
   return web.createComponent(ScrollZoomViewPort, {
@@ -1251,7 +1242,7 @@ var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
       return props.children;
     }
   });
-}, "PianoRollScrollZoomViewPort");
+};
 var PianoRollScrollZoomViewPort_default = PianoRollScrollZoomViewPort;
 var defaultRect = {
   left: 0,
@@ -1269,9 +1260,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();
@@ -1281,10 +1272,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] = solidJs.createSignal();
   const clientRect = useBoundingClientRect(ref);
@@ -1300,9 +1290,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] = solidJs.createSignal();
   const clientRect = useBoundingClientRect(ref);
@@ -1320,11 +1310,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-Gt01PkQkdswk/solid-pianoroll/src/PianoRollScale.module.css.js
-var digest7 = "3858698d16170a590e0e8e09319eb5d0fd7d02975226ac7c89b8b7401b7d9ce8";
+// esbuild-css-modules-plugin-namespace:/private/var/folders/hn/m5r9jj0x3zb28s_y23nrnhmc0000gn/T/tmp-90536-otPMivGW1aPm/solid-pianoroll/src/PianoRollScale.module.css.js
+var digest7 = "cc51a77ed85d192e0a184a41c8a39cc632f6fa6111db1d0feeb1fa4f30b67008";
 var css7 = `._PianoRollScale_1khhn_1 {
   position: relative;
   width: 100%;
@@ -1374,26 +1364,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__ */ web.template(`<div></div>`, 2);
-var PianoRollScale = /* @__PURE__ */ __name(() => {
+var _tmpl$7 = /* @__PURE__ */ web.template(`<div>`);
+var PianoRollScale = () => {
   const horizontalViewPort = solidJs.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);
     };
@@ -1407,32 +1397,32 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
             return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$7.cloneNode(true);
+            var _el$2 = _tmpl$7();
             web.insert(_el$2, web.createComponent(solidJs.Show, {
               get when() {
                 return entry().showLabel;
               },
               get children() {
-                const _el$3 = _tmpl$7.cloneNode(true);
+                var _el$3 = _tmpl$7();
                 web.insert(_el$3, () => entry().label);
                 web.effect(() => web.className(_el$3, PianoRollScale_module_css_default["PianoRollScale-Label"]));
                 return _el$3;
               }
             }));
             web.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$ = web.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 = web.classList(_el$2, _v$, _p$.e);
+              _v$2 !== _p$.t && web.setStyleProperty(_el$2, "left", _p$.t = _v$2);
+              _v$3 !== _p$.a && web.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;
           }
@@ -1442,16 +1432,16 @@ var PianoRollScale = /* @__PURE__ */ __name(() => {
     web.effect(() => web.className(_el$, PianoRollScale_module_css_default.PianoRollScale));
     return _el$;
   })();
-}, "PianoRollScale");
+};
 var PianoRollScale_default = PianoRollScale;
 web.delegateEvents(["mousedown"]);
 
 // src/PianoRoll.tsx
-var _tmpl$8 = /* @__PURE__ */ web.template(`<div><button><div></div></button></div>`, 6);
-var _tmpl$23 = /* @__PURE__ */ web.template(`<div><div></div><div></div></div>`, 6);
-var _tmpl$32 = /* @__PURE__ */ web.template(`<div><div><div></div></div></div>`, 6);
-var _tmpl$42 = /* @__PURE__ */ web.template(`<div></div>`, 2);
-var PianoRoll = /* @__PURE__ */ __name((allProps) => {
+var _tmpl$8 = /* @__PURE__ */ web.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__ */ web.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__ */ web.template(`<div><div><div style=flex:1;display:flex;overflow:hidden>`);
+var _tmpl$42 = /* @__PURE__ */ web.template(`<div>`);
+var PianoRoll = (allProps) => {
   const propsWithDefaults = solidJs.mergeProps({
     showAllTracks: false
   }, allProps);
@@ -1459,7 +1449,7 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
   return web.createComponent(PianoRollContextProvider, {
     value: context,
     get children() {
-      const _el$ = _tmpl$42.cloneNode(true);
+      var _el$ = _tmpl$42();
       web.spread(_el$, web.mergeProps(divProps, {
         get ["class"]() {
           return PianoRoll_module_css_default.PianoRoll;
@@ -1468,7 +1458,7 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       web.insert(_el$, web.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;
             web.insert(_el$2, web.createComponent(ZoomSliderControl_default, {
               orientation: "vertical",
               dimensionName: "verticalTracks"
@@ -1478,22 +1468,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");
                 web.insert(_el$6, () => context.mode === "keys" ? "\u2261" : "\u{1F3B9}");
                 web.effect(() => web.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");
             web.insert(_el$7, web.createComponent(solidJs.Show, {
               get when() {
                 return context.showTrackList;
@@ -1517,19 +1498,10 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
             web.insert(_el$2, web.createComponent(PianoRollNotesScroller_default, {
               get children() {
                 return [web.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;
                   web.insert(_el$9, web.createComponent(PianoRollScale_default, {}));
-                  _el$10.style.setProperty("flex", "1");
-                  _el$10.style.setProperty("position", "relative");
-                  _el$10.style.setProperty("overflow", "hidden");
-                  web.insert(_el$10, web.createComponent(PianoRollGrid_default, {}), null);
-                  web.insert(_el$10, web.createComponent(PianoRollNotes_default, {}), null);
+                  web.insert(_el$0, web.createComponent(PianoRollGrid_default, {}), null);
+                  web.insert(_el$0, web.createComponent(PianoRollNotes_default, {}), null);
                   return _el$8;
                 })()];
               }
@@ -1541,16 +1513,16 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
               }
             }), null);
             web.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$ && web.className(_el$2, _p$._v$ = _v$);
-              _p$._v$2 = web.classList(_el$3, _v$2, _p$._v$2);
+              _v$ !== _p$.e && web.className(_el$2, _p$.e = _v$);
+              _p$.t = web.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;
           })(), web.createComponent(ZoomSliderControl_default, {
@@ -1567,11 +1539,11 @@ var PianoRoll = /* @__PURE__ */ __name((allProps) => {
       return _el$;
     }
   });
-}, "PianoRoll");
+};
 exports.PianoRoll = PianoRoll;
 web.delegateEvents(["click"]);
-var _tmpl$9 = /* @__PURE__ */ web.template(`<div class="PlayHead"></div>`, 2);
-var PlayHead = /* @__PURE__ */ __name((allProps) => {
+var _tmpl$9 = /* @__PURE__ */ web.template(`<div class=PlayHead>`);
+var PlayHead = (allProps) => {
   const [props, divProps] = solidJs.splitProps(allProps, ["position", "sync", "onPositionChange", "dimensionName"]);
   const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
   solidJs.createEffect(() => {
@@ -1583,7 +1555,7 @@ var PlayHead = /* @__PURE__ */ __name((allProps) => {
   });
   const leftPosition = solidJs.createMemo(() => viewPort.calculatePixelOffset(props.position));
   return (() => {
-    const _el$ = _tmpl$9.cloneNode(true);
+    var _el$ = _tmpl$9();
     web.spread(_el$, web.mergeProps(divProps, {
       get style() {
         return {
@@ -1599,38 +1571,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");
+};
 exports.PlayHead = PlayHead;
-var useNotes = /* @__PURE__ */ __name(() => {
+var useNotes = () => {
   const [notes, onNotesChange] = solidJs.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,
@@ -1638,5 +1610,5 @@ var useNotes = /* @__PURE__ */ __name(() => {
     onInsertNote,
     onRemoveNote
   };
-}, "useNotes");
+};
 exports.useNotes = useNotes;