solid-pianoroll 0.0.24 → 0.0.25

package/dist/index.cjs

@@ -0,0 +1,1330 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var store = require('solid-js/store');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/PianoRoll.module.css
+var _default = {};
+var defaultState = {
+  ppq: 0,
+  mode: "keys",
+  position: 0,
+  zoom: 10,
+  verticalZoom: 5,
+  verticalPosition: 44,
+  verticalTrackZoom: 0.5,
+  verticalTrackPosition: 0,
+  playHeadPosition: 0,
+  gridDivision: 4,
+  snapToGrid: true,
+  duration: 0,
+  tracks: [],
+  selectedTrackIndex: 0,
+  pressedKeys: {},
+  notesScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
+  tracksScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 }
+};
+var propNameToHandlerName = /* @__PURE__ */ __name((name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`, "propNameToHandlerName");
+var pianoRollStatePropNames = [
+  ...Object.keys(defaultState),
+  ...Object.keys(defaultState).map(propNameToHandlerName),
+  "onNoteChange",
+  "onInsertNote",
+  "onRemoveNote",
+  "onNoteDown",
+  "onNoteUp",
+  "isKeyDown",
+  "snapValueToGridIfEnabled"
+];
+var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
+  const [state, setState] = store.createStore({
+    ...defaultState,
+    ...initialState
+  });
+  const handlers = Object.fromEntries(
+    Object.entries(state).map((entry) => {
+      const handlerName = propNameToHandlerName(entry[0]);
+      return [
+        handlerName,
+        (value, originalEvent) => {
+          const handler = initialState?.[handlerName];
+          setState(entry[0], value);
+          if (handler) {
+            handler(value, originalEvent);
+          }
+        }
+      ];
+    })
+  );
+  const onPlayheadPositionChange = /* @__PURE__ */ __name((playheadPosition, originalEvent) => {
+    handlers.onPlayHeadPositionChange(
+      snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey)
+    );
+  }, "onPlayheadPositionChange");
+  const updateNotes = /* @__PURE__ */ __name(async (trackIndex, getNotes) => {
+    const track = state.tracks[trackIndex];
+    if (!track)
+      return;
+    const notes = track.notes;
+    handlers.onTracksChange([
+      ...state.tracks.slice(0, trackIndex),
+      { ...track, notes: getNotes(notes) },
+      ...state.tracks.slice(trackIndex + 1)
+    ]);
+  }, "updateNotes");
+  const onNoteChange = /* @__PURE__ */ __name((trackIndex, noteIndex, note) => {
+    updateNotes(trackIndex, (notes) => [
+      ...notes.slice(0, noteIndex),
+      note,
+      ...notes.slice(noteIndex + 1)
+    ]);
+  }, "onNoteChange");
+  const onInsertNote = /* @__PURE__ */ __name((trackIndex, note) => {
+    const track = state.tracks[trackIndex];
+    if (!track)
+      return -1;
+    const notes = track.notes;
+    const newNoteIndex = Math.max(
+      notes.findIndex(({ ticks }) => ticks > note.ticks),
+      0
+    );
+    updateNotes(trackIndex, (notes2) => [
+      ...notes2.slice(0, newNoteIndex),
+      note,
+      ...notes2.slice(newNoteIndex)
+    ]);
+    return newNoteIndex;
+  }, "onInsertNote");
+  const onRemoveNote = /* @__PURE__ */ __name((trackIndex, noteIndex) => {
+    updateNotes(trackIndex, (notes) => [
+      ...notes.slice(0, noteIndex),
+      ...notes.slice(noteIndex + 1)
+    ]);
+  }, "onRemoveNote");
+  const updateKeyPressedState = /* @__PURE__ */ __name((trackIndex, keyNumber, value) => {
+    handlers.onPressedKeysChange?.({
+      ...state.pressedKeys,
+      [trackIndex]: {
+        ...state.pressedKeys[trackIndex],
+        [keyNumber]: value
+      }
+    });
+  }, "updateKeyPressedState");
+  const onNoteDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
+    updateKeyPressedState(trackIndex, keyNumber, true);
+  }, "onNoteDown");
+  const onNoteUp = /* @__PURE__ */ __name((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 gridDivisionTicks = state.ppq * 4 / state.gridDivision;
+    return state.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks) * gridDivisionTicks : value;
+  }, "snapValueToGridIfEnabled");
+  return solidJs.mergeProps(state, {
+    ...handlers,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote,
+    onNoteDown,
+    onNoteUp,
+    isKeyDown,
+    snapValueToGridIfEnabled,
+    onPlayheadPositionChange
+  });
+}, "createPianoRollstate");
+exports.createPianoRollstate = createPianoRollstate;
+
+// src/PianoRollContext.tsx
+var PianoRollContext = solidJs.createContext();
+var PianoRollContextProvider = PianoRollContext.Provider;
+var usePianoRollContext = /* @__PURE__ */ __name(() => {
+  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");
+
+// src/PianoRollKeys.module.css
+var _default2 = {};
+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");
+    return {
+      ...state2,
+      onZoomChange,
+      onPositionChange,
+      calculatePixelOffset,
+      calculatePixelValue,
+      calculatePosition,
+      calculatePixelDimensions,
+      calculateVisibleRange,
+      calculateMaxPosition,
+      isVisible
+    };
+  }, "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;
+}
+__name(createViewPortDimension, "createViewPortDimension");
+var clamp = /* @__PURE__ */ __name((value, min, max) => Math.max(min, Math.min(max, value)), "clamp");
+
+// src/viewport/ScrollZoomViewPort.tsx
+var defaultViewPortProps = {
+  pixelOffset: 0,
+  position: 0,
+  range: 1,
+  zoom: 1,
+  minZoom: 1,
+  maxZoom: Infinity
+};
+var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+  const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({
+    name,
+    ...defaultViewPortProps,
+    ...viewPortProps()
+  })));
+  const parentViewPorts = solidJs.useContext(ScrollZoomViewPortContext);
+  return web.createComponent(ScrollZoomViewPortContext.Provider, {
+    get value() {
+      return [...parentViewPorts, ...viewPorts];
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}, "ScrollZoomViewPort");
+var ScrollZoomViewPortContext = solidJs.createContext([]);
+var useViewPortDimension = /* @__PURE__ */ __name((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");
+
+// src/viewport/ScrollZoomContainer.module.css
+var _default3 = {};
+
+// src/viewport/ScrollZoomContainer.tsx
+var _tmpl$ = /* @__PURE__ */ web.template(`<div><div><div><div></div></div></div></div>`, 8);
+var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
+  let scrollContentRef;
+  const [ownProps, divProps] = solidJs.splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
+  const propsWithDefaults = solidJs.mergeProps({
+    verticalDimensionName: "vertical",
+    horizontalDimensionName: "horizontal",
+    showScrollbar: true
+  }, ownProps);
+  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
+  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
+  const handleScroll = /* @__PURE__ */ __name((event) => {
+    event.preventDefault();
+    if (didUpdateScroll) {
+      didUpdateScroll = false;
+      return;
+    }
+    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollWidth,
+      scrollHeight
+    } = event.currentTarget;
+    const scrollTopAmount = scrollTop / (scrollHeight - height);
+    const scrollLeftAmount = scrollLeft / (scrollWidth - width);
+    verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
+    horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
+  }, "handleScroll");
+  const handleWheel = /* @__PURE__ */ __name((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));
+      }
+    } 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();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const scrollTopAmount = maxVerticalPosition > 0 ? verticalViewPort().position / maxVerticalPosition : 0;
+    const scrollLeftAmount = maxPosition > 0 ? horizontalViewPort().position / maxPosition : 0;
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
+    if (!scrollContentRef?.parentElement)
+      return;
+    const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
+    const scrollTop = scrollTopAmount * (scrollDivHeight - height);
+    const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
+    const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
+    didUpdateScroll = true;
+    scrollContentRef.style.height = `${scrollDivHeight}px`;
+    scrollContentRef.style.width = `${scrollDivWidth}px`;
+    scrollContentRef.parentElement.scrollTo({
+      left: scrollLeft,
+      top: scrollTop
+    });
+  });
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    _el$.addEventListener("wheel", handleWheel);
+    _el$.addEventListener("scroll", handleScroll);
+    const _ref$ = props.ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
+    web.spread(_el$, web.mergeProps(divProps, {
+      get style() {
+        return {
+          overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
+          ...typeof divProps.style === "object" && divProps.style
+        };
+      },
+      get classList() {
+        return {
+          [_default3.ScrollZoomContainer]: true,
+          ...divProps.classList
+        };
+      }
+    }), false, true);
+    const _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);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: 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(() => {
+  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(() => {
+    setIsMouseDown(false);
+  }, "handleMouseUp");
+  solidJs.createEffect(() => {
+    if (isMouseDown()) {
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+  });
+  return (() => {
+    const _el$ = _tmpl$2.cloneNode(true);
+    web.insert(_el$, web.createComponent(ScrollZoomContainer_default, {
+      horizontalDimensionName: "horizontalKeys",
+      showScrollbar: false,
+      get children() {
+        return web.createComponent(solidJs.Index, {
+          each: keys,
+          children: (key) => {
+            const isDown = solidJs.createMemo(() => context.isKeyDown(context.selectedTrackIndex, key().number));
+            const virtualDimensions = solidJs.createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
+            const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
+            const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
+            return web.createComponent(solidJs.Show, {
+              get when() {
+                return verticalViewPort().isVisible(virtualDimensions());
+              },
+              get children() {
+                const _el$2 = _tmpl$2.cloneNode(true);
+                _el$2.addEventListener("mouseleave", () => {
+                  if (isMouseDown()) {
+                    context.onNoteUp(context.selectedTrackIndex, key().number);
+                  }
+                });
+                _el$2.addEventListener("mouseenter", () => {
+                  if (isMouseDown()) {
+                    context.onNoteDown(context.selectedTrackIndex, key().number);
+                  }
+                });
+                _el$2.$$mouseup = () => {
+                  context.onNoteUp(context.selectedTrackIndex, key().number);
+                };
+                _el$2.$$mousedown = () => {
+                  setIsMouseDown(true);
+                  context.onNoteDown(context.selectedTrackIndex, key().number);
+                };
+                web.effect((_p$) => {
+                  const _v$3 = {
+                    [_default2["Key"]]: true,
+                    [_default2["black"]]: key().isBlack,
+                    [_default2["white"]]: !key().isBlack,
+                    [_default2["down"]]: isDown()
+                  }, _v$4 = key().name, _v$5 = key().number % 12, _v$6 = `${virtualDimensions().offset - virtualDimensions().size * (!key().isBlack ? nextIsBlack ? 1 / 2 : 0 : 0)}px`, _v$7 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`, _v$8 = `0px 0px ${Math.min(virtualDimensions().size / 20, 1)}px ${Math.min(virtualDimensions().size / 50, 1)}px rgba(0, 0, 0, 0.5) ${key().isBlack ? "" : "inset"}` + isDown() ? `0px 0px ${Math.min(virtualDimensions().size / 8, 2)}px ${Math.min(virtualDimensions().size / 20, 2)}px rgba(0, 0, 0, 0.5) inset` : "";
+                  _p$._v$3 = 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);
+                  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
+                });
+                return _el$2;
+              }
+            });
+          }
+        });
+      }
+    }));
+    web.effect((_p$) => {
+      const _v$ = _default2.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);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: 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({
+  length: 128
+}).map((_, index) => ({
+  number: index,
+  name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
+  isBlack: blackKeys.includes(index % 12)
+}));
+var PianoRollKeys_default = PianoRollKeys;
+web.delegateEvents(["mousedown", "mouseup"]);
+
+// src/PianoRollNotes.module.css
+var _default4 = {};
+
+// src/PianoRollNotes.tsx
+var _tmpl$3 = /* @__PURE__ */ web.template(`<div></div>`, 2);
+var PianoRollNotes = /* @__PURE__ */ __name((props) => {
+  const context = usePianoRollContext();
+  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
+  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
+  const gridDivisionTicks = solidJs.createMemo(() => context.ppq * 4 / context.gridDivision);
+  const [isDragging, setIsDragging] = solidJs.createSignal(false);
+  const [noteDragMode, setNoteDragMode] = solidJs.createSignal();
+  const [currentNoteIndex, setCurrentNoteIndex] = solidJs.createSignal(-1);
+  const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = solidJs.createSignal(-1);
+  const [diffPosition, setDiffPosition] = solidJs.createSignal(0);
+  const [getInitialNote, setInitialNote] = solidJs.createSignal();
+  const calculateNoteDragValues = /* @__PURE__ */ __name((event) => {
+    const targetTrackIndex = context.mode === "tracks" ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1) : currentNoteTrackIndex() > -1 ? currentNoteTrackIndex() : context.selectedTrackIndex;
+    const midi = context.mode === "keys" ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY)) : getInitialNote()?.midi ?? 60;
+    const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
+    return {
+      targetTrackIndex,
+      midi,
+      horiontalPosition
+    };
+  }, "calculateNoteDragValues");
+  const handleMouseMove = /* @__PURE__ */ __name((mouseMoveEvent) => {
+    mouseMoveEvent.preventDefault();
+    mouseMoveEvent.stopPropagation();
+    const note = getInitialNote();
+    if (!note)
+      return;
+    const {
+      targetTrackIndex,
+      midi,
+      horiontalPosition
+    } = calculateNoteDragValues(mouseMoveEvent);
+    const ticks = context.snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+    const updatedNote = {
+      ...note,
+      midi,
+      ...noteDragMode() === "move" && {
+        ticks
+      },
+      ...noteDragMode() === "trimStart" && {
+        ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
+        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+      },
+      ...noteDragMode() === "trimEnd" && {
+        ticks: ticks < note.ticks ? ticks : note.ticks,
+        durationTicks: ticks < note.ticks ? note.ticks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+      }
+    };
+    const previousTrackIndex = currentNoteTrackIndex();
+    const previousNoteIndex = currentNoteIndex();
+    if (targetTrackIndex === previousTrackIndex) {
+      context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
+    } else {
+      if (context.onInsertNote) {
+        context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+        const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+        setCurrentNoteTrackIndex(targetTrackIndex);
+        setCurrentNoteIndex(newNoteIndex);
+      }
+    }
+  }, "handleMouseMove");
+  const stopDragging = /* @__PURE__ */ __name(() => {
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", stopDragging);
+    setIsDragging(false);
+    setCurrentNoteIndex(-1);
+    setCurrentNoteTrackIndex(-1);
+  }, "stopDragging");
+  const startDragging = /* @__PURE__ */ __name(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", stopDragging);
+  }, "startDragging");
+  const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
+    return noteDragMode2 ? [_default4.Note, _default4[noteDragMode2]] : [_default4.Note];
+  }, "getClasses");
+  return (() => {
+    const _el$ = _tmpl$3.cloneNode(true);
+    _el$.$$mousedown = (mouseDownEvent) => {
+      mouseDownEvent.preventDefault();
+      mouseDownEvent.stopPropagation();
+      const {
+        targetTrackIndex,
+        midi,
+        horiontalPosition
+      } = calculateNoteDragValues(mouseDownEvent);
+      const ticks = context.snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey, context);
+      const durationTicks = gridDivisionTicks();
+      const newNote = {
+        midi,
+        ticks,
+        durationTicks,
+        velocity: 100
+      };
+      const newNoteIndex = context.onInsertNote(targetTrackIndex, newNote);
+      setIsDragging(true);
+      setCurrentNoteTrackIndex(targetTrackIndex);
+      setCurrentNoteIndex(newNoteIndex);
+      setInitialNote(newNote);
+      setDiffPosition(0);
+      setNoteDragMode("trimEnd");
+      startDragging();
+    };
+    const _ref$ = props.ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
+    web.insert(_el$, web.createComponent(solidJs.For, {
+      get each() {
+        return context.tracks;
+      },
+      children: (track, trackIndex) => {
+        return web.createComponent(solidJs.Show, {
+          get when() {
+            return trackIndex() === context.selectedTrackIndex || context.showAllTracks || context.mode === "tracks";
+          },
+          get children() {
+            return web.createComponent(solidJs.For, {
+              get each() {
+                return track.notes;
+              },
+              children: (note, noteIndex) => {
+                const verticalVirtualDimensions = solidJs.createMemo(() => verticalViewPort().calculatePixelDimensions(context.mode === "keys" ? 127 - note.midi : trackIndex(), 1));
+                const horizontalDimensions = solidJs.createMemo(() => horizontalViewPort().calculatePixelDimensions(note.ticks, note.durationTicks));
+                return web.createComponent(solidJs.Show, {
+                  get when() {
+                    return web.memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
+                  },
+                  get children() {
+                    const _el$2 = _tmpl$3.cloneNode(true);
+                    _el$2.$$mousedown = (event) => {
+                      event.stopPropagation();
+                      const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
+                      setDiffPosition(noteDragMode() === "trimEnd" ? -(note.ticks + note.durationTicks - initialPosition) : initialPosition - note.ticks);
+                      setIsDragging(true);
+                      setCurrentNoteIndex(noteIndex());
+                      setCurrentNoteTrackIndex(trackIndex());
+                      setInitialNote(note);
+                      startDragging();
+                    };
+                    _el$2.$$dblclick = (event) => {
+                      event.stopPropagation();
+                      context.onRemoveNote?.(trackIndex(), noteIndex());
+                    };
+                    _el$2.$$mousemove = (event) => {
+                      if (isDragging())
+                        return;
+                      event.stopPropagation();
+                      const relativeX = horizontalViewPort().calculatePixelValue(horizontalViewPort().calculatePosition(event.clientX));
+                      const noteStartX = horizontalViewPort().calculatePixelValue(note.ticks);
+                      const noteEndX = horizontalViewPort().calculatePixelValue(note.ticks + note.durationTicks);
+                      setNoteDragMode(relativeX - noteStartX < 3 ? "trimStart" : noteEndX - relativeX < 3 ? "trimEnd" : "move");
+                    };
+                    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);
+                      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
+                    });
+                    return _el$2;
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    }));
+    web.effect((_$p) => web.classList(_el$, {
+      [_default4.PianoRollNotes]: true
+    }, _$p));
+    return _el$;
+  })();
+}, "PianoRollNotes");
+var PianoRollNotes_default = PianoRollNotes;
+web.delegateEvents(["mousedown", "mousemove", "dblclick"]);
+
+// src/PianoRollGrid.module.css
+var _default5 = {};
+var usePianoRollGrid = /* @__PURE__ */ __name(() => {
+  const context = usePianoRollContext();
+  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
+  const measureTicks = solidJs.createMemo(() => context.ppq * 4);
+  const selectedGridDivisorTicks = solidJs.createMemo(() => measureTicks() / context.gridDivision);
+  function calculateVisibleGridDivisorTicks(value) {
+    const visibleRange = horizontalViewPort().calculateVisibleRange();
+    if (visibleRange <= 0)
+      return 0;
+    if (visibleRange / value > 100) {
+      return calculateVisibleGridDivisorTicks(value * 2);
+    }
+    if (visibleRange / value < 30) {
+      return calculateVisibleGridDivisorTicks(value / 2);
+    }
+    return value;
+  }
+  __name(calculateVisibleGridDivisorTicks, "calculateVisibleGridDivisorTicks");
+  const gridDivisorTicks = solidJs.createMemo(
+    () => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks())
+  );
+  const gridArray = solidJs.createMemo(() => {
+    const numberOfLines = Math.ceil(
+      horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1
+    );
+    const startIndex = Math.floor(context.position / gridDivisorTicks());
+    return Array.from({ length: numberOfLines }).map((_, i) => {
+      const index = i + startIndex;
+      const ticks = index * gridDivisorTicks();
+      const measurePosition = ticks / context.ppq / 4 + 1;
+      const bars = Math.floor(measurePosition);
+      const beats = Math.floor((measurePosition - bars) * 4);
+      const label = `${bars}${beats ? `.${beats}` : ""}`;
+      return {
+        index,
+        ticks,
+        isHighlighted: Math.ceil((index + 1) * selectedGridDivisorTicks() / measureTicks()) % 2 === 0,
+        hasHighlightedBorder: index * gridDivisorTicks() % selectedGridDivisorTicks() === 0,
+        showLabel: index * selectedGridDivisorTicks() / measureTicks() % 2 === 0,
+        virtualDimensions: horizontalViewPort().calculatePixelDimensions(ticks, gridDivisorTicks()),
+        label
+      };
+    });
+  });
+  return gridArray;
+}, "usePianoRollGrid");
+var usePianoRollGrid_default = usePianoRollGrid;
+
+// src/PianoRollGrid.tsx
+var _tmpl$4 = /* @__PURE__ */ web.template(`<div></div>`, 2);
+var PianoRollGrid = /* @__PURE__ */ __name(() => {
+  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);
+    web.insert(_el$, web.createComponent(solidJs.Index, {
+      get each() {
+        return gridArray();
+      },
+      children: (entry) => {
+        return web.createComponent(solidJs.Show, {
+          get when() {
+            return horizontalViewPort().isVisible(entry().virtualDimensions);
+          },
+          get children() {
+            const _el$2 = _tmpl$4.cloneNode(true);
+            web.effect((_p$) => {
+              const _v$ = {
+                [_default5["PianoRollGrid-Time"]]: true,
+                [_default5["Highlighted"]]: entry().isHighlighted,
+                [_default5["HighlightedBorder"]]: entry().hasHighlightedBorder
+              }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
+              _p$._v$ = 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);
+              return _p$;
+            }, {
+              _v$: void 0,
+              _v$2: void 0,
+              _v$3: void 0
+            });
+            return _el$2;
+          }
+        });
+      }
+    }), null);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return context.mode === "keys";
+      },
+      get children() {
+        return web.createComponent(solidJs.Index, {
+          each: keys,
+          children: (key) => {
+            const virtualDimensions = solidJs.createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
+            return web.createComponent(solidJs.Show, {
+              get when() {
+                return verticalViewPort().isVisible(virtualDimensions());
+              },
+              get children() {
+                const _el$3 = _tmpl$4.cloneNode(true);
+                web.effect((_p$) => {
+                  const _v$4 = {
+                    [_default5["PianoRollGrid-Row"]]: true,
+                    [_default5["Key"]]: true,
+                    [_default5["IsDark"]]: key().isBlack,
+                    [_default5["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
+                  }, _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);
+                  return _p$;
+                }, {
+                  _v$4: void 0,
+                  _v$5: void 0,
+                  _v$6: void 0
+                });
+                return _el$3;
+              }
+            });
+          }
+        });
+      }
+    }), null);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return context.mode === "tracks";
+      },
+      get children() {
+        return web.createComponent(solidJs.For, {
+          get each() {
+            return context.tracks;
+          },
+          children: (track, index) => {
+            const virtualDimensions = solidJs.createMemo(() => verticalViewPort().calculatePixelDimensions(index(), 1));
+            return web.createComponent(solidJs.Show, {
+              get when() {
+                return verticalViewPort().isVisible(virtualDimensions());
+              },
+              get children() {
+                const _el$4 = _tmpl$4.cloneNode(true);
+                web.effect((_p$) => {
+                  const _v$7 = {
+                    [_default5["PianoRollGrid-Row"]]: true,
+                    [_default5["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);
+                  return _p$;
+                }, {
+                  _v$7: void 0,
+                  _v$8: void 0,
+                  _v$9: void 0
+                });
+                return _el$4;
+              }
+            });
+          }
+        });
+      }
+    }), null);
+    web.effect(() => web.className(_el$, _default5.PianoRollGrid));
+    return _el$;
+  })();
+}, "PianoRollGrid");
+var PianoRollGrid_default = PianoRollGrid;
+var _tmpl$5 = /* @__PURE__ */ web.template(`<input step="0.01">`, 1);
+var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
+  const propsWithDefaults = solidJs.mergeProps({
+    orientation: "horizontal"
+  }, props);
+  const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
+  return (() => {
+    const _el$ = _tmpl$5.cloneNode(true);
+    web.spread(_el$, web.mergeProps({
+      get min() {
+        return dimension().minZoom;
+      },
+      get max() {
+        return dimension().maxZoom;
+      }
+    }, props, {
+      get value() {
+        return dimension().zoom;
+      },
+      "onInput": (event) => {
+        const value = event.currentTarget.valueAsNumber;
+        dimension().onZoomChange?.(value);
+      },
+      "type": "range"
+    }, () => ({
+      orient: propsWithDefaults.orientation
+    }), {
+      get style() {
+        return propsWithDefaults.orientation === "vertical" ? {
+          margin: 0,
+          "margin-left": "4px",
+          "margin-right": "4px",
+          width: "16px",
+          transform: "rotate(180deg)",
+          ...{
+            "writing-mode": "bt-lr",
+            "-webkit-appearance": "slider-vertical"
+          },
+          ...typeof props.style === "object" && props.style
+        } : {
+          margin: 0,
+          "margin-top": "4px",
+          "margin-bottom": "4px",
+          ...typeof props.style === "object" && props.style
+        };
+      }
+    }), false, false);
+    return _el$;
+  })();
+}, "ZoomSliderControl");
+var ZoomSliderControl_default = ZoomSliderControl;
+
+// src/PianoRollTrackList.module.css
+var _default6 = {};
+var _tmpl$6 = /* @__PURE__ */ web.template(`<div></div>`, 2);
+var _tmpl$22 = /* @__PURE__ */ web.template(`<div> </div>`, 2);
+var PianoRollTrackList = /* @__PURE__ */ __name(() => {
+  const viewPort = solidJs.createMemo(() => useViewPortDimension("verticalTracks"));
+  const context = usePianoRollContext();
+  return (() => {
+    const _el$ = _tmpl$6.cloneNode(true);
+    web.insert(_el$, web.createComponent(solidJs.Index, {
+      get each() {
+        return context.tracks;
+      },
+      children: (track, index) => {
+        const virtualDimensions = solidJs.createMemo(() => viewPort().calculatePixelDimensions(index, 1));
+        return web.createComponent(solidJs.Show, {
+          get when() {
+            return virtualDimensions().size > 0;
+          },
+          get children() {
+            const _el$2 = _tmpl$22.cloneNode(true), _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$ = {
+                [_default6["Track"]]: true,
+                [_default6["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);
+              return _p$;
+            }, {
+              _v$: void 0,
+              _v$2: void 0,
+              _v$3: void 0,
+              _v$4: void 0
+            });
+            return _el$2;
+          }
+        });
+      }
+    }));
+    web.effect(() => web.className(_el$, _default6.PianoRollTrackList));
+    return _el$;
+  })();
+}, "PianoRollTrackList");
+var PianoRollTrackList_default = PianoRollTrackList;
+web.delegateEvents(["click"]);
+var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+  const zoomFactor = 500;
+  const context = usePianoRollContext();
+  return web.createComponent(ScrollZoomViewPort, {
+    dimensions: {
+      horizontal: () => ({
+        pixelOffset: context.notesScrollerClientRect.left,
+        pixelSize: context.notesScrollerClientRect.width,
+        position: context.position,
+        range: context.duration,
+        zoom: context.zoom * (zoomFactor / context.notesScrollerClientRect.width),
+        onPositionChange: context.onPositionChange,
+        onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / context.notesScrollerClientRect.width)),
+        minZoom: 1,
+        maxZoom: 500
+      }),
+      vertical: () => ({
+        pixelOffset: context.notesScrollerClientRect.top,
+        pixelSize: context.notesScrollerClientRect.height,
+        position: context.verticalPosition,
+        range: 128,
+        zoom: context.verticalZoom * (zoomFactor / context.notesScrollerClientRect.height),
+        onPositionChange: context.onVerticalPositionChange,
+        onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / context.notesScrollerClientRect.height)),
+        minZoom: 1,
+        maxZoom: 10
+      }),
+      horizontalTracks: () => ({
+        pixelOffset: 0,
+        pixelSize: context.tracksScrollerClientRect.width
+      }),
+      verticalTracks: () => ({
+        pixelOffset: context.tracksScrollerClientRect.top,
+        pixelSize: context.tracksScrollerClientRect.height,
+        position: context.verticalTrackPosition,
+        range: context.tracks.length,
+        zoom: context.verticalTrackZoom * (zoomFactor / context.tracksScrollerClientRect.height),
+        onPositionChange: context.onVerticalTrackPositionChange,
+        onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / context.tracksScrollerClientRect.height)),
+        minZoom: 0.8,
+        maxZoom: 3
+      }),
+      horizontalKeys: () => ({
+        pixelSize: 60
+      })
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}, "PianoRollScrollZoomViewPort");
+var PianoRollScrollZoomViewPort_default = PianoRollScrollZoomViewPort;
+var defaultRect = {
+  left: 0,
+  width: 0,
+  top: 0,
+  height: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0
+};
+function useBoundingClientRect(containerRef) {
+  const [boundingClientRect, setBoundingClientRect] = solidJs.createSignal(defaultRect);
+  solidJs.createEffect(() => {
+    const container = containerRef();
+    if (!container)
+      return;
+    const updateBoundingClientRect = /* @__PURE__ */ __name(() => {
+      setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
+    }, "updateBoundingClientRect");
+    const resizeObserver = new ResizeObserver(updateBoundingClientRect);
+    resizeObserver.observe(container);
+    updateBoundingClientRect();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+  return boundingClientRect;
+}
+__name(useBoundingClientRect, "useBoundingClientRect");
+
+// src/PianoRollNotesScroller.tsx
+var PianoRollNotesScroller = /* @__PURE__ */ __name((props) => {
+  const context = usePianoRollContext();
+  const [ref, setRef] = solidJs.createSignal();
+  const clientRect = useBoundingClientRect(ref);
+  solidJs.createEffect(() => {
+    context.onNotesScrollerClientRectChange(clientRect());
+  });
+  return web.createComponent(ScrollZoomContainer_default, {
+    ref: setRef,
+    get verticalDimensionName() {
+      return context.mode === "keys" ? "vertical" : "verticalTracks";
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}, "PianoRollNotesScroller");
+var PianoRollNotesScroller_default = PianoRollNotesScroller;
+var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
+  const context = usePianoRollContext();
+  const [ref, setRef] = solidJs.createSignal();
+  const clientRect = useBoundingClientRect(ref);
+  solidJs.createEffect(() => {
+    context.onTracksScrollerClientRectChange(clientRect());
+  });
+  return web.createComponent(ScrollZoomContainer_default, {
+    ref: setRef,
+    horizontalDimensionName: "horizontalTracks",
+    verticalDimensionName: "verticalTracks",
+    get showScrollbar() {
+      return context.mode === "keys";
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}, "PianoRollTrackListScroller");
+var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
+
+// src/PianoRollScale.module.css
+var _default7 = {};
+
+// src/PianoRollScale.tsx
+var _tmpl$7 = /* @__PURE__ */ web.template(`<div></div>`, 2);
+var PianoRollScale = /* @__PURE__ */ __name(() => {
+  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
+  const grid = usePianoRollGrid_default();
+  const context = usePianoRollContext();
+  const updatePlayheadPosition = /* @__PURE__ */ __name((event) => {
+    const position = horizontalViewPort().calculatePosition(event.clientX);
+    context.onPlayHeadPositionChange(position, event);
+  }, "updatePlayheadPosition");
+  return (() => {
+    const _el$ = _tmpl$7.cloneNode(true);
+    _el$.$$mousedown = (event) => {
+      updatePlayheadPosition(event);
+      const handleMouseUp = /* @__PURE__ */ __name(() => {
+        window.removeEventListener("mousemove", updatePlayheadPosition);
+        window.removeEventListener("mouseup", handleMouseUp);
+      }, "handleMouseUp");
+      window.addEventListener("mousemove", updatePlayheadPosition);
+      window.addEventListener("mouseup", handleMouseUp);
+    };
+    web.insert(_el$, web.createComponent(solidJs.Index, {
+      get each() {
+        return grid();
+      },
+      children: (entry) => {
+        return web.createComponent(solidJs.Show, {
+          get when() {
+            return horizontalViewPort().isVisible(entry().virtualDimensions);
+          },
+          get children() {
+            const _el$2 = _tmpl$7.cloneNode(true);
+            web.insert(_el$2, web.createComponent(solidJs.Show, {
+              get when() {
+                return entry().showLabel;
+              },
+              get children() {
+                const _el$3 = _tmpl$7.cloneNode(true);
+                web.insert(_el$3, () => entry().label);
+                web.effect(() => web.className(_el$3, _default7["PianoRollScale-Label"]));
+                return _el$3;
+              }
+            }));
+            web.effect((_p$) => {
+              const _v$ = {
+                [_default7["PianoRollScale-Time"]]: true,
+                [_default7["Highlighted"]]: entry().isHighlighted,
+                [_default7["HighlightedBorder"]]: entry().hasHighlightedBorder
+              }, _v$2 = `${entry().virtualDimensions.offset}px`, _v$3 = `${entry().virtualDimensions.size}px`;
+              _p$._v$ = 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);
+              return _p$;
+            }, {
+              _v$: void 0,
+              _v$2: void 0,
+              _v$3: void 0
+            });
+            return _el$2;
+          }
+        });
+      }
+    }));
+    web.effect(() => web.className(_el$, _default7.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) => {
+  const propsWithDefaults = solidJs.mergeProps({
+    showAllTracks: false
+  }, allProps);
+  const [context, divProps] = splitContextProps(propsWithDefaults);
+  return web.createComponent(PianoRollContextProvider, {
+    value: context,
+    get children() {
+      const _el$ = _tmpl$42.cloneNode(true);
+      web.spread(_el$, web.mergeProps(divProps, {
+        get ["class"]() {
+          return _default.PianoRoll;
+        }
+      }), false, true);
+      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;
+            web.insert(_el$2, web.createComponent(ZoomSliderControl_default, {
+              orientation: "vertical",
+              dimensionName: "verticalTracks"
+            }), _el$3);
+            web.insert(_el$3, web.createComponent(solidJs.Show, {
+              get when() {
+                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");
+                _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;
+              },
+              get children() {
+                return web.createComponent(PianoRollTrackListScroller_default, {
+                  get children() {
+                    return web.createComponent(PianoRollTrackList_default, {});
+                  }
+                });
+              }
+            }), null);
+            web.insert(_el$7, web.createComponent(solidJs.Show, {
+              get when() {
+                return context.mode === "keys";
+              },
+              get children() {
+                return web.createComponent(PianoRollKeys_default, {});
+              }
+            }), null);
+            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");
+                  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);
+                  return _el$8;
+                })()];
+              }
+            }), null);
+            web.insert(_el$2, web.createComponent(ZoomSliderControl_default, {
+              orientation: "vertical",
+              get disabled() {
+                return context.mode !== "keys";
+              }
+            }), null);
+            web.effect((_p$) => {
+              const _v$ = _default.PianoRollContainer, _v$2 = {
+                [_default.PianoRollLeftColumn]: true,
+                [_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);
+              return _p$;
+            }, {
+              _v$: void 0,
+              _v$2: void 0
+            });
+            return _el$2;
+          })(), web.createComponent(ZoomSliderControl_default, {
+            orientation: "horizontal",
+            get style() {
+              return {
+                "margin-left": `${context.tracksScrollerClientRect.width + 24}px`,
+                "margin-right": "24px"
+              };
+            }
+          })];
+        }
+      }));
+      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) => {
+  const [props, divProps] = solidJs.splitProps(allProps, ["position", "sync", "onPositionChange", "dimensionName"]);
+  const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
+  solidJs.createEffect(() => {
+    if (!props.sync)
+      return;
+    const maxPosition = viewPort.range;
+    const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
+    viewPort.onPositionChange?.(newPosition);
+  });
+  const leftPosition = solidJs.createMemo(() => viewPort.calculatePixelOffset(props.position));
+  return (() => {
+    const _el$ = _tmpl$9.cloneNode(true);
+    web.spread(_el$, web.mergeProps(divProps, {
+      get style() {
+        return {
+          position: "absolute",
+          height: "100%",
+          width: "2px",
+          left: `${leftPosition()}px`,
+          "background-color": "green",
+          cursor: "pointer",
+          ...typeof divProps.style === "object" && divProps.style
+        };
+      },
+      "onMouseDown": (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const handleMouseMove = /* @__PURE__ */ __name((event2) => {
+          const newPosition = viewPort.calculatePosition(event2.clientX);
+          props.onPositionChange?.(newPosition, event2);
+        }, "handleMouseMove");
+        const handleMouseUp = /* @__PURE__ */ __name(() => {
+          window.removeEventListener("mousemove", handleMouseMove);
+          window.removeEventListener("mouseup", handleMouseUp);
+        }, "handleMouseUp");
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+      }
+    }), false, false);
+    return _el$;
+  })();
+}, "PlayHead");
+exports.PlayHead = PlayHead;
+var useNotes = /* @__PURE__ */ __name(() => {
+  const [notes, onNotesChange] = solidJs.createSignal([]);
+  const onNoteChange = /* @__PURE__ */ __name((index, note) => {
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
+  }, "onNoteChange");
+  const onInsertNote = /* @__PURE__ */ __name((note) => {
+    const index = Math.max(
+      notes().findIndex(({ ticks }) => ticks > note.ticks),
+      0
+    );
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
+    return index;
+  }, "onInsertNote");
+  const onRemoveNote = /* @__PURE__ */ __name((index) => {
+    onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
+  }, "onRemoveNote");
+  return {
+    notes,
+    onNotesChange,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote
+  };
+}, "useNotes");
+exports.useNotes = useNotes;