solid-pianoroll 0.0.14 → 0.0.16

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { spread, mergeProps, template, createComponent, delegateEvents, use, insert, memo, effect, className, style, classList, setAttribute } from 'solid-js/web';
-import { createContext, splitProps, useContext, createEffect, createMemo, createSignal, Index, Show, mergeProps as mergeProps$1 } from 'solid-js';
+import { createComponent, delegateEvents, insert, effect, className, classList, setAttribute, template, use, memo, spread, mergeProps } from 'solid-js/web';
+import { createContext, splitProps, useContext, createEffect, createMemo, Index, createSignal, Show, batch, For, mergeProps as mergeProps$1 } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
 function styleInject(css, ref) {
@@ -27,9 +27,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n";
-var styles$3 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
-styleInject(css_248z$3);
+var css_248z$4 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n";
+var styles$4 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
+styleInject(css_248z$4);
 
 const PianoRollContext = createContext();
 const PianoRollContextProvider = PianoRollContext.Provider;
@@ -38,30 +38,11 @@ const usePianoRollContext = () => {
   if (!context) throw new Error("No PianoRollContext found");
   return context;
 };
-const splitContextProps = allProps => splitProps(allProps, ["condensed", "duration", "gridDivision", "notes", "position", "ppq", "snapToGrid", "verticalPosition", "verticalZoom", "zoom", "onInsertNote", "onNoteChange", "onPositionChange", "onRemoveNote", "onVerticalPositionChange", "onVerticalZoomChange", "onZoomChange"]);
+const splitContextProps = allProps => splitProps(allProps, ["mode", "duration", "gridDivision", "tracks", "position", "ppq", "snapToGrid", "verticalPosition", "verticalZoom", "zoom", "onInsertNote", "onNoteChange", "onPositionChange", "onRemoveNote", "onVerticalPositionChange", "onVerticalZoomChange", "onZoomChange", "showAllTracks", "selectedTrackIndex", "onSelectedTrackIndexChange"]);
 
-const _tmpl$$8 = /*#__PURE__*/template(`<input max="500" min="1" step="0.01">`, 1);
-const HorizontalZoomControl = props => {
-  const context = usePianoRollContext();
-  return (() => {
-    const _el$ = _tmpl$$8.cloneNode(true);
-    spread(_el$, mergeProps(props, {
-      get value() {
-        return context.zoom;
-      },
-      "onInput": event => context.onZoomChange?.(event.currentTarget.valueAsNumber),
-      "type": "range",
-      get style() {
-        return {
-          "margin-left": "50px",
-          "margin-right": "16px",
-          ...(typeof props.style === "object" && props.style)
-        };
-      }
-    }), false, false);
-    return _el$;
-  })();
-};
+var css_248z$3 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  width: 50px;\n  border-width: 0;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-left-width: 1px;\n  background: white;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  transition-property: background-color, box-shadow;\n  transition-duration: 400ms;\n  transition-timing-function: ease-out;\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 120%;\n  left: -20%;\n  border-color: #000;\n  border-style: solid;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n  border-top-right-radius: 12%;\n  border-bottom-right-radius: 12%;\n  margin-left: -20%;\n  z-index: 1;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n}\n";
+var styles$3 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","down":"PianoRollKeys-module_down__GcNeZ"};
+styleInject(css_248z$3);
 
 function createViewPortDimension(getState) {
   const getStateWithFunctions = () => ({
@@ -135,6 +116,95 @@ const useViewPortDimension = name => {
   return viewPort;
 };
 
+const _tmpl$$8 = /*#__PURE__*/template(`<div></div>`, 2);
+const PianoRollKeys = () => {
+  const viewPort = createMemo(() => useViewPortDimension("vertical"));
+  return (() => {
+    const _el$ = _tmpl$$8.cloneNode(true);
+    insert(_el$, createComponent(Index, {
+      each: keys,
+      children: key => {
+        const [isDown, setIsDown] = createSignal(false);
+        const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
+        const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
+        const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
+        return createComponent(Show, {
+          get when() {
+            return virtualDimensions().size > 0;
+          },
+          get children() {
+            const _el$2 = _tmpl$$8.cloneNode(true);
+            _el$2.$$mouseup = () => setIsDown(false);
+            _el$2.$$mousedown = () => setIsDown(true);
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return key().isBlack && false;
+              },
+              get children() {
+                const _el$3 = _tmpl$$8.cloneNode(true);
+                effect(_p$ => {
+                  const _v$ = styles$3["black-separator"],
+                    _v$2 = `${virtualDimensions().offset}px`,
+                    _v$3 = `${virtualDimensions().size / 2 - 0.25}px`;
+                  _v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
+                  _v$2 !== _p$._v$2 && _el$3.style.setProperty("top", _p$._v$2 = _v$2);
+                  _v$3 !== _p$._v$3 && _el$3.style.setProperty("height", _p$._v$3 = _v$3);
+                  return _p$;
+                }, {
+                  _v$: undefined,
+                  _v$2: undefined,
+                  _v$3: undefined
+                });
+                return _el$3;
+              }
+            }));
+            effect(_p$ => {
+              const _v$4 = {
+                  [styles$3["Key"]]: true,
+                  [styles$3["black"]]: key().isBlack,
+                  [styles$3["white"]]: !key().isBlack,
+                  [styles$3["down"]]: isDown()
+                },
+                _v$5 = key().name,
+                _v$6 = key().number % 12,
+                _v$7 = `${virtualDimensions().offset - (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0)}px`,
+                _v$8 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
+                _v$9 = [`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`].filter(item => !!item).join(", ");
+              _p$._v$4 = classList(_el$2, _v$4, _p$._v$4);
+              _v$5 !== _p$._v$5 && setAttribute(_el$2, "title", _p$._v$5 = _v$5);
+              _v$6 !== _p$._v$6 && setAttribute(_el$2, "data-index", _p$._v$6 = _v$6);
+              _v$7 !== _p$._v$7 && _el$2.style.setProperty("top", _p$._v$7 = _v$7);
+              _v$8 !== _p$._v$8 && _el$2.style.setProperty("height", _p$._v$8 = _v$8);
+              _v$9 !== _p$._v$9 && _el$2.style.setProperty("box-shadow", _p$._v$9 = _v$9);
+              return _p$;
+            }, {
+              _v$4: undefined,
+              _v$5: undefined,
+              _v$6: undefined,
+              _v$7: undefined,
+              _v$8: undefined,
+              _v$9: undefined
+            });
+            return _el$2;
+          }
+        });
+      }
+    }));
+    effect(() => className(_el$, styles$3.PianoRollKeys));
+    return _el$;
+  })();
+};
+const blackKeys = [1, 3, 6, 8, 10];
+const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+const keys = Array.from({
+  length: 128
+}).map((_, index) => ({
+  number: index,
+  name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
+  isBlack: blackKeys.includes(index % 12)
+}));
+delegateEvents(["mousedown", "mouseup"]);
+
 var css_248z$2 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: absolute;\n  flex: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: grab;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb {\n  position: absolute;\n  box-sizing: border-box;\n  border-width: 0.5px;\n  border-style: solid;\n  border-color: #a00;\n  cursor: move;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimStart__vuBlj {\n  cursor: w-resize;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimEnd__zPdjr {\n  cursor: e-resize;\n}";
 var styles$2 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
 styleInject(css_248z$2);
@@ -148,10 +218,11 @@ const PianoRollNotes = props => {
   const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
   const insertOrUpdateNote = event => {
     const position = horizontalViewPort().calculatePosition(event.clientX);
-    const midi = context.condensed ? 60 : 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
+    const existingNote = currentNote();
+    const midi = context.mode === "keys" ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY)) : existingNote?.midi ?? 60;
+    const targetTrackIndex = context.mode === "tracks" ? Math.floor(verticalViewPort().calculatePosition(event.clientY)) : context.selectedTrackIndex ?? 0;
     const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
     const velocity = 127;
-    const existingNote = newNote();
     const ticks = existingNote?.ticks ?? eventPositionTicks;
     const durationTicks = existingNote?.ticks ? eventPositionTicks - existingNote?.ticks : gridDivisionTicks();
     const note = {
@@ -161,25 +232,26 @@ const PianoRollNotes = props => {
       velocity
     };
     if (existingNote) {
-      context.onNoteChange?.(newNoteIndex(), note);
-      return newNoteIndex();
+      context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
+      return currentNoteIndex();
     } else {
-      return context.onInsertNote?.(note) ?? -1;
+      return context.onInsertNote?.(targetTrackIndex, note) ?? -1;
     }
   };
   const [isDragging, setIsDragging] = createSignal(false);
   const [noteDragMode, setNoteDragMode] = createSignal();
-  const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
+  const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
+  const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
   const [isMouseDown, setIsMouseDown] = createSignal(false);
-  const newNote = createMemo(() => context.notes[newNoteIndex()]);
+  const currentNote = createMemo(() => context.tracks[currentNoteTrackIndex()]?.notes[currentNoteIndex()]);
   const getClasses = noteDragMode => {
     return noteDragMode ? [styles$2.Note, styles$2[noteDragMode]] : [styles$2.Note];
   };
   return (() => {
     const _el$ = _tmpl$$7.cloneNode(true);
     _el$.$$click = event => {
-      if (newNote()) {
-        setNewNoteIndex(-1);
+      if (currentNote()) {
+        setCurrentNoteIndex(-1);
         return;
       }
       if (!event.altKey) return;
@@ -200,94 +272,133 @@ const PianoRollNotes = props => {
         return;
       }
       const index = insertOrUpdateNote(event);
-      setNewNoteIndex(index);
+      setCurrentNoteIndex(index);
     };
     _el$.$$mousedown = event => {
-      console.log("down");
-      setIsMouseDown(true);
-      const index = insertOrUpdateNote(event);
-      setNewNoteIndex(index);
+      batch(() => {
+        setIsMouseDown(true);
+        const index = insertOrUpdateNote(event);
+        setCurrentNoteTrackIndex(context.selectedTrackIndex ?? 0);
+        setCurrentNoteIndex(index);
+      });
     };
     const _ref$ = props.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
-    insert(_el$, createComponent(Index, {
+    insert(_el$, createComponent(For, {
       get each() {
-        return context.notes;
+        return context.tracks;
       },
-      children: (note, index) => {
-        const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
-        const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
+      children: (track, trackIndex) => {
         return createComponent(Show, {
           get when() {
-            return memo(() => !!(verticalViewPort().isVisible(verticalVirtualDimensions()) || context.condensed))() && horizontalViewPort().isVisible(horizontalDimensions());
+            return trackIndex() === context.selectedTrackIndex || context.showAllTracks || context.mode === "tracks";
           },
           get children() {
-            const _el$2 = _tmpl$$7.cloneNode(true);
-            _el$2.$$mousedown = event => {
-              event.stopPropagation();
-              setIsDragging(true);
-              const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
-              const diffPosition = initialPosition - note().ticks;
-              const handleMouseMove = mouseMoveEvent => {
-                const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - diffPosition, 0), mouseMoveEvent.altKey);
-                context.onNoteChange?.(index, {
-                  ...note(),
-                  ...(noteDragMode() === "move" && !context.condensed && {
-                    midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
-                  }),
-                  ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
-                    ticks
-                  }),
-                  ...(noteDragMode() === "trimStart" && {
-                    durationTicks: note().durationTicks + note().ticks - ticks
-                  }),
-                  ...(noteDragMode() === "trimEnd" && {
-                    durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - note().ticks, mouseMoveEvent.altKey)
-                  })
+            return createComponent(For, {
+              get each() {
+                return track.notes;
+              },
+              children: (note, noteIndex) => {
+                const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(context.mode === "keys" ? 127 - note.midi : trackIndex(), 1));
+                const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note.ticks, note.durationTicks));
+                return createComponent(Show, {
+                  get when() {
+                    return memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
+                  },
+                  get children() {
+                    const _el$2 = _tmpl$$7.cloneNode(true);
+                    _el$2.$$mousedown = event => {
+                      event.stopPropagation();
+                      setIsDragging(true);
+                      setCurrentNoteIndex(noteIndex());
+                      setCurrentNoteTrackIndex(trackIndex());
+                      const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
+                      const diffPosition = initialPosition - note.ticks;
+                      const handleMouseMove = mouseMoveEvent => {
+                        const note = currentNote();
+                        if (!note) return;
+                        const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - diffPosition, 0), mouseMoveEvent.altKey);
+                        const updatedNote = {
+                          ...note,
+                          ...(noteDragMode() === "move" && context.mode === "keys" && {
+                            midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
+                          }),
+                          ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
+                            ticks
+                          }),
+                          ...(noteDragMode() === "trimStart" && {
+                            durationTicks: note.durationTicks + note.ticks - ticks
+                          }),
+                          ...(noteDragMode() === "trimEnd" && {
+                            durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - note.ticks, mouseMoveEvent.altKey)
+                          })
+                        };
+                        const previousTrackIndex = currentNoteTrackIndex();
+                        const previousNoteIndex = currentNoteIndex();
+                        const targetTrackIndex = context.mode === "tracks" ? Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY)) : previousTrackIndex;
+                        if (targetTrackIndex === previousTrackIndex) {
+                          context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
+                        } else {
+                          batch(() => {
+                            if (context.onInsertNote) {
+                              context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+                              const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+                              setCurrentNoteTrackIndex(targetTrackIndex);
+                              setCurrentNoteIndex(newNoteIndex);
+                            }
+                          });
+                        }
+                      };
+                      const handleMouseUp = () => {
+                        setIsDragging(false);
+                        setCurrentNoteIndex(-1);
+                        setCurrentNoteTrackIndex(-1);
+                        window.removeEventListener("mousemove", handleMouseMove);
+                        window.removeEventListener("mouseup", handleMouseUp);
+                      };
+                      window.addEventListener("mousemove", handleMouseMove);
+                      window.addEventListener("mouseup", handleMouseUp);
+                    };
+                    _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");
+                    };
+                    setAttribute(_el$2, "draggable", false);
+                    effect(_p$ => {
+                      const _v$ = getClasses(noteDragMode()).join(" "),
+                        _v$2 = `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
+                        _v$3 = `${verticalVirtualDimensions().offset}px`,
+                        _v$4 = `${verticalVirtualDimensions().size}px`,
+                        _v$5 = `${horizontalDimensions().offset}px`,
+                        _v$6 = `${horizontalDimensions().size}px`;
+                      _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+                      _v$2 !== _p$._v$2 && _el$2.style.setProperty("background-color", _p$._v$2 = _v$2);
+                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
+                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
+                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("left", _p$._v$5 = _v$5);
+                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("width", _p$._v$6 = _v$6);
+                      return _p$;
+                    }, {
+                      _v$: undefined,
+                      _v$2: undefined,
+                      _v$3: undefined,
+                      _v$4: undefined,
+                      _v$5: undefined,
+                      _v$6: undefined
+                    });
+                    return _el$2;
+                  }
                 });
-              };
-              const handleMouseUp = () => {
-                setIsDragging(false);
-                window.removeEventListener("mousemove", handleMouseMove);
-                window.removeEventListener("mouseup", handleMouseUp);
-              };
-              window.addEventListener("mousemove", handleMouseMove);
-              window.addEventListener("mouseup", handleMouseUp);
-            };
-            _el$2.$$dblclick = event => {
-              event.stopPropagation();
-              context.onRemoveNote?.(index);
-            };
-            _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");
-            };
-            effect(_p$ => {
-              const _v$ = getClasses(noteDragMode()).join(" "),
-                _v$2 = {
-                  "background-color": `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
-                  ...(context.condensed ? {
-                    top: 0,
-                    height: "100%"
-                  } : {
-                    top: `${verticalVirtualDimensions().offset}px`,
-                    height: `${verticalVirtualDimensions().size}px`
-                  }),
-                  left: `${horizontalDimensions().offset}px`,
-                  width: `${horizontalDimensions().size}px`
-                };
-              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
-              _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
-              return _p$;
-            }, {
-              _v$: undefined,
-              _v$2: undefined
+              }
             });
-            return _el$2;
           }
         });
       }
@@ -401,74 +512,11 @@ const ScrollContainer = props => {
   })();
 };
 
-var css_248z$1 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  width: 50px;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 100%;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n}\n\n.PianoRollKeys-module_whiteAndNextIsWhite__PN1O8 {\n  border-top-width: 0.1px;\n}\n\n.PianoRollKeys-module_whiteAndPreviousIsWhite__-fP3q {\n  border-bottom-width: 0.1px;\n}\n";
-var styles$1 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","whiteAndNextIsWhite":"PianoRollKeys-module_whiteAndNextIsWhite__PN1O8","whiteAndPreviousIsWhite":"PianoRollKeys-module_whiteAndPreviousIsWhite__-fP3q"};
+var css_248z$1 = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs {\n  position: absolute;\n  border-style: solid;\n  border-color: gray;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n}\n";
+var styles$1 = {"PianoRollGrid":"PianoRollGrid-module_PianoRollGrid__tG119","PianoRollGrid-Row":"PianoRollGrid-module_PianoRollGrid-Row__nRMCs","PianoRollGrid-Time":"PianoRollGrid-module_PianoRollGrid-Time__jLz3E"};
 styleInject(css_248z$1);
 
 const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollKeys = () => {
-  const viewPort = createMemo(() => useViewPortDimension("vertical"));
-  return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true);
-    insert(_el$, createComponent(Index, {
-      each: keys,
-      children: key => {
-        const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
-        return createComponent(Show, {
-          get when() {
-            return virtualDimensions().size > 0;
-          },
-          get children() {
-            const _el$2 = _tmpl$$5.cloneNode(true);
-            effect(_p$ => {
-              const _v$ = {
-                  [styles$1["Key"]]: true,
-                  [styles$1["black"]]: key().isBlack,
-                  [styles$1["white"]]: !key().isBlack,
-                  [styles$1["whiteAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12),
-                  [styles$1["whiteAndPreviousIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number - 1) % 12)
-                },
-                _v$2 = key().name,
-                _v$3 = key().number % 12,
-                _v$4 = `${virtualDimensions().offset}px`,
-                _v$5 = `${virtualDimensions().size}px`;
-              _p$._v$ = classList(_el$2, _v$, _p$._v$);
-              _v$2 !== _p$._v$2 && setAttribute(_el$2, "title", _p$._v$2 = _v$2);
-              _v$3 !== _p$._v$3 && setAttribute(_el$2, "data-index", _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);
-              return _p$;
-            }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined,
-              _v$5: undefined
-            });
-            return _el$2;
-          }
-        });
-      }
-    }));
-    effect(() => className(_el$, styles$1.PianoRollKeys));
-    return _el$;
-  })();
-};
-const blackKeys = [1, 3, 6, 8, 10];
-const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
-const keys = Array.from({
-  length: 128
-}).map((_, index) => ({
-  number: index,
-  name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
-  isBlack: blackKeys.includes(index % 12)
-}));
-
-var css_248z = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Key__VRbiB {\n  position: absolute;\n  border-style: solid;\n  border-color: gray;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n}\n";
-var styles = {"PianoRollGrid":"PianoRollGrid-module_PianoRollGrid__tG119","PianoRollGrid-Key":"PianoRollGrid-module_PianoRollGrid-Key__VRbiB","PianoRollGrid-Time":"PianoRollGrid-module_PianoRollGrid-Time__jLz3E"};
-styleInject(css_248z);
-
-const _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollGrid = () => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
@@ -498,7 +546,7 @@ const PianoRollGrid = () => {
     }));
   });
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true);
+    const _el$ = _tmpl$$5.cloneNode(true);
     insert(_el$, createComponent(Index, {
       get each() {
         return gridArray();
@@ -510,9 +558,9 @@ const PianoRollGrid = () => {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$$4.cloneNode(true);
+            const _el$2 = _tmpl$$5.cloneNode(true);
             effect(_p$ => {
-              const _v$ = styles["PianoRollGrid-Time"],
+              const _v$ = styles$1["PianoRollGrid-Time"],
                 _v$2 = Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
                 _v$3 = `${virtualDimensions().offset}px`,
                 _v$4 = `${virtualDimensions().size}px`,
@@ -537,7 +585,7 @@ const PianoRollGrid = () => {
     }), null);
     insert(_el$, createComponent(Show, {
       get when() {
-        return !context.condensed;
+        return context.mode === "keys";
       },
       get children() {
         return createComponent(Index, {
@@ -549,10 +597,10 @@ const PianoRollGrid = () => {
                 return virtualDimensions().size > 0;
               },
               get children() {
-                const _el$3 = _tmpl$$4.cloneNode(true);
+                const _el$3 = _tmpl$$5.cloneNode(true);
                 _el$3.style.setProperty("width", "100%");
                 effect(_p$ => {
-                  const _v$6 = styles["PianoRollGrid-Key"],
+                  const _v$6 = styles$1["PianoRollGrid-Row"],
                     _v$7 = `${virtualDimensions().offset}px`,
                     _v$8 = `${virtualDimensions().size}px`,
                     _v$9 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
@@ -577,35 +625,53 @@ const PianoRollGrid = () => {
         });
       }
     }), null);
-    effect(() => className(_el$, styles.PianoRollGrid));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return context.mode === "tracks";
+      },
+      get children() {
+        return createComponent(For, {
+          get each() {
+            return context.tracks;
+          },
+          children: (track, index) => {
+            const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(index(), 1));
+            return createComponent(Show, {
+              get when() {
+                return virtualDimensions().size > 0;
+              },
+              get children() {
+                const _el$4 = _tmpl$$5.cloneNode(true);
+                _el$4.style.setProperty("width", "100%");
+                _el$4.style.setProperty("border-width", "0");
+                effect(_p$ => {
+                  const _v$11 = styles$1["PianoRollGrid-Row"],
+                    _v$12 = `${virtualDimensions().offset}px`,
+                    _v$13 = `${virtualDimensions().size}px`,
+                    _v$14 = index() % 2 === 0 ? "rgba(0,0,0,0.2)" : "none";
+                  _v$11 !== _p$._v$11 && className(_el$4, _p$._v$11 = _v$11);
+                  _v$12 !== _p$._v$12 && _el$4.style.setProperty("top", _p$._v$12 = _v$12);
+                  _v$13 !== _p$._v$13 && _el$4.style.setProperty("height", _p$._v$13 = _v$13);
+                  _v$14 !== _p$._v$14 && _el$4.style.setProperty("background-color", _p$._v$14 = _v$14);
+                  return _p$;
+                }, {
+                  _v$11: undefined,
+                  _v$12: undefined,
+                  _v$13: undefined,
+                  _v$14: undefined
+                });
+                return _el$4;
+              }
+            });
+          }
+        });
+      }
+    }), null);
+    effect(() => className(_el$, styles$1.PianoRollGrid));
     return _el$;
   })();
 };
 
-const useNotes = () => {
-  const [notes, onNotesChange] = createSignal([]);
-  const onNoteChange = (index, note) => {
-    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
-  };
-  const onInsertNote = note => {
-    const index = Math.max(notes().findIndex(({
-      ticks
-    }) => ticks > note.ticks), 0);
-    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
-    return index;
-  };
-  const onRemoveNote = index => {
-    onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
-  };
-  return {
-    notes,
-    onNotesChange,
-    onNoteChange,
-    onInsertNote,
-    onRemoveNote
-  };
-};
-
 const defaultRect = {
   left: 0,
   width: 0,
@@ -634,11 +700,11 @@ function useBoundingClientRect(containerRef) {
   return boundingClientRect;
 }
 
-const _tmpl$$3 = /*#__PURE__*/template(`<input min="1" max="11" step="0.01">`, 1);
+const _tmpl$$4 = /*#__PURE__*/template(`<input min="1" max="11" step="0.01">`, 1);
 const VerticalZoomControl = props => {
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$$3.cloneNode(true);
+    const _el$ = _tmpl$$4.cloneNode(true);
     spread(_el$, mergeProps(props, {
       get value() {
         return context.verticalZoom;
@@ -662,224 +728,91 @@ const VerticalZoomControl = props => {
   })();
 };
 
-const _tmpl$$2 = /*#__PURE__*/template(`<div><ul></ul></div>`, 4),
-  _tmpl$2 = /*#__PURE__*/template(`<ul></ul>`, 2),
-  _tmpl$3 = /*#__PURE__*/template(`<div><div></div></div>`, 4),
-  _tmpl$4 = /*#__PURE__*/template(`<div></div>`, 2),
-  _tmpl$5 = /*#__PURE__*/template(`<li></li>`, 2);
-const MultiTrackPianoRoll = allProps => {
-  const selectedTrack = createMemo(() => allProps.tracks[allProps.selectedTrackIndex]);
-  const condensed = createMemo(() => !selectedTrack());
-  const [ownProps, restProps] = splitProps(allProps, ["tracks", "selectedTrackIndex"]);
-  const [contextProps, divProps] = splitContextProps(mergeProps$1(restProps, {
-    notes: [],
-    condensed: false,
-    onNoteChange: () => undefined,
-    onInsertNote: () => -1,
-    onRemoveNote: () => undefined
-  }));
-  const [scrollerRef, setScrollerRef] = createSignal();
-  const clientRect = useBoundingClientRect(scrollerRef);
-  const zoomFactor = 500;
-  const minZoom = createMemo(() => 1 / (zoomFactor / clientRect().width));
-  const maxZoom = createMemo(() => 500 * (zoomFactor / clientRect().width));
-  const minVerticalZoom = createMemo(() => 1 / (zoomFactor / clientRect().height));
-  const maxVerticalZoom = createMemo(() => 10 * (zoomFactor / clientRect().height));
+const _tmpl$$3 = /*#__PURE__*/template(`<input max="500" min="1" step="0.01">`, 1);
+const HorizontalZoomControl = props => {
+  const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$4.cloneNode(true);
-    spread(_el$, mergeProps(divProps, {
+    const _el$ = _tmpl$$3.cloneNode(true);
+    spread(_el$, mergeProps(props, {
+      get value() {
+        return context.zoom;
+      },
+      "onInput": event => context.onZoomChange?.(event.currentTarget.valueAsNumber),
+      "type": "range",
       get style() {
         return {
-          display: "flex",
-          flex: 1,
-          height: "100%",
-          "flex-direction": "row",
-          overflow: "hidden",
-          ...(typeof divProps.style === "object" && divProps.style)
+          "margin-left": "50px",
+          "margin-right": "16px",
+          ...(typeof props.style === "object" && props.style)
         };
       }
-    }), false, true);
-    insert(_el$, createComponent(PianoRollContextProvider, {
-      get value() {
-        return {
-          ...contextProps
-        };
+    }), false, false);
+    return _el$;
+  })();
+};
+
+var css_248z = ".PianoRollTrackList-module_PianoRollTrackList__pyuxQ {\n  position: relative;\n  height: 100%;\n  flex: 1;\n}\n\n.PianoRollTrackList-module_Track__VZFIg {\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 100%;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n}\n";
+var styles = {"PianoRollTrackList":"PianoRollTrackList-module_PianoRollTrackList__pyuxQ","Track":"PianoRollTrackList-module_Track__VZFIg"};
+styleInject(css_248z);
+
+const _tmpl$$2 = /*#__PURE__*/template(`<div></div>`, 2),
+  _tmpl$2$1 = /*#__PURE__*/template(`<div> </div>`, 2);
+const PianoRollTrackList = () => {
+  const viewPort = createMemo(() => useViewPortDimension("vertical"));
+  const context = usePianoRollContext();
+  return (() => {
+    const _el$ = _tmpl$$2.cloneNode(true);
+    insert(_el$, createComponent(Index, {
+      get each() {
+        return context.tracks;
       },
-      get children() {
-        return createComponent(ScrollZoomViewPort, {
-          dimensions: {
-            horizontal: () => ({
-              pixelOffset: clientRect().left,
-              pixelSize: clientRect().width,
-              position: contextProps.position,
-              range: contextProps.duration,
-              zoom: contextProps.zoom * (zoomFactor / clientRect().width),
-              onPositionChange: contextProps.onPositionChange,
-              onZoomChange: zoom => contextProps.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom()))
-            }),
-            vertical: () => ({
-              pixelOffset: clientRect().top,
-              pixelSize: clientRect().height,
-              position: contextProps.verticalPosition,
-              range: 128,
-              zoom: contextProps.verticalZoom * (zoomFactor / clientRect().height),
-              onPositionChange: contextProps.onVerticalPositionChange,
-              onZoomChange: verticalZoom => contextProps.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom()))
-            })
+      children: (track, index) => {
+        const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(context.mode === "tracks" ? index : index * 8, context.mode === "tracks" ? 1 : 8));
+        return createComponent(Show, {
+          get when() {
+            return virtualDimensions().size > 0;
           },
           get children() {
-            return [(() => {
-              const _el$2 = _tmpl$$2.cloneNode(true),
-                _el$3 = _el$2.firstChild;
-              _el$2.style.setProperty("width", "250px");
-              _el$2.style.setProperty("display", "flex");
-              _el$2.style.setProperty("flex-direction", "row");
-              _el$3.style.setProperty("margin-block-start", "0");
-              _el$3.style.setProperty("padding-inline-start", "0");
-              _el$3.style.setProperty("flex", "1");
-              _el$3.style.setProperty("position", "relative");
-              insert(_el$3, createComponent(Index, {
-                get each() {
-                  return allProps.tracks;
-                },
-                children: (track, noteIndex) => (() => {
-                  const _el$7 = _tmpl$5.cloneNode(true);
-                  _el$7.$$click = () => {
-                    if (noteIndex === allProps.selectedTrackIndex) {
-                      allProps.onSelectedTrackIndexChange(-1);
-                    } else {
-                      allProps.onSelectedTrackIndexChange(noteIndex);
-                    }
-                  };
-                  _el$7.style.setProperty("width", "100%");
-                  _el$7.style.setProperty("height", "30px");
-                  _el$7.style.setProperty("list-style", "none");
-                  _el$7.style.setProperty("display", "flex");
-                  _el$7.style.setProperty("align-items", "center");
-                  _el$7.style.setProperty("border-top", "1px black solid");
-                  _el$7.style.setProperty("cursor", "pointer");
-                  insert(_el$7, () => track().name);
-                  effect(() => _el$7.style.setProperty("background", noteIndex === allProps.selectedTrackIndex ? "lightgray" : "none"));
-                  return _el$7;
-                })()
-              }));
-              insert(_el$2, createComponent(Show, {
-                get when() {
-                  return !condensed();
-                },
-                get children() {
-                  return createComponent(PianoRollKeys, {});
-                }
-              }), null);
-              return _el$2;
-            })(), (() => {
-              const _el$4 = _tmpl$3.cloneNode(true),
-                _el$5 = _el$4.firstChild;
-              _el$4.style.setProperty("flex", "1");
-              insert(_el$5, createComponent(ScrollContainer, {
-                ref: setScrollerRef,
-                get children() {
-                  return [memo(() => allProps.children), (() => {
-                    const _el$6 = _tmpl$2.cloneNode(true);
-                    _el$6.style.setProperty("margin", "0");
-                    _el$6.style.setProperty("margin-block-start", "0");
-                    _el$6.style.setProperty("padding-inline-start", "0");
-                    insert(_el$6, createComponent(Index, {
-                      get each() {
-                        return allProps.tracks;
-                      },
-                      children: (track, trackIndex) => {
-                        const notes = useNotes();
-                        createEffect(() => {
-                          notes.onNotesChange(track().notes);
-                        });
-                        const [context, setContext] = createStore({
-                          ...contextProps
-                        });
-                        createEffect(() => {
-                          setContext({
-                            ...contextProps,
-                            condensed: condensed(),
-                            notes: track()?.notes,
-                            onNoteChange: (noteIndex, note) => allProps?.onNoteChange?.(trackIndex, noteIndex, note),
-                            onInsertNote: note => allProps.onInsertNote?.(trackIndex, note) ?? -1,
-                            onRemoveNote: noteIndex => allProps.onRemoveNote?.(trackIndex, noteIndex)
-                          });
-                        });
-                        const verticalViewPort = useViewPortDimension("vertical");
-                        return createComponent(Show, {
-                          get when() {
-                            return condensed() || allProps.selectedTrackIndex === trackIndex;
-                          },
-                          get children() {
-                            return createComponent(PianoRollContextProvider, {
-                              value: context,
-                              get children() {
-                                const _el$8 = _tmpl$5.cloneNode(true);
-                                _el$8.style.setProperty("display", "flex");
-                                _el$8.style.setProperty("position", "relative");
-                                _el$8.style.setProperty("list-style", "none");
-                                _el$8.style.setProperty("flex-direction", "row");
-                                _el$8.style.setProperty("border-top", "1px black solid");
-                                insert(_el$8, createComponent(PianoRollNotes, {}), null);
-                                insert(_el$8, createComponent(PianoRollGrid, {}), null);
-                                effect(() => _el$8.style.setProperty("height", condensed() ? "30px" : `${verticalViewPort.pixelSize}px`));
-                                return _el$8;
-                              }
-                            });
-                          }
-                        });
-                      }
-                    }));
-                    return _el$6;
-                  })()];
-                }
-              }), null);
-              insert(_el$5, createComponent(Show, {
-                get when() {
-                  return !condensed();
-                },
-                get children() {
-                  return createComponent(VerticalZoomControl, {
-                    get value() {
-                      return contextProps.verticalZoom;
-                    },
-                    onInput: event => contextProps.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)
-                  });
-                }
-              }), null);
-              insert(_el$4, createComponent(HorizontalZoomControl, {
-                style: {
-                  width: "100%",
-                  "margin-left": 0
-                },
-                get value() {
-                  return contextProps.zoom;
+            const _el$2 = _tmpl$2$1.cloneNode(true),
+              _el$3 = _el$2.firstChild;
+            _el$2.$$click = () => context.onSelectedTrackIndexChange?.(index);
+            _el$2.style.setProperty("cursor", "pointer");
+            insert(_el$2, index, _el$3);
+            insert(_el$2, () => track().name || "[unnamed track]", null);
+            effect(_p$ => {
+              const _v$ = {
+                  [styles["Track"]]: true
                 },
-                onInput: event => contextProps.onZoomChange?.(event.currentTarget.valueAsNumber)
-              }), null);
-              effect(_p$ => {
-                const _v$ = styles$3.PianoRoll,
-                  _v$2 = styles$3.PianoRollContainer;
-                _v$ !== _p$._v$ && className(_el$4, _p$._v$ = _v$);
-                _v$2 !== _p$._v$2 && className(_el$5, _p$._v$2 = _v$2);
-                return _p$;
-              }, {
-                _v$: undefined,
-                _v$2: undefined
-              });
-              return _el$4;
-            })()];
+                _v$2 = track().name,
+                _v$3 = `${virtualDimensions().offset}px`,
+                _v$4 = `${virtualDimensions().size}px`,
+                _v$5 = index === context.selectedTrackIndex ? "gray" : "lightgrey";
+              _p$._v$ = classList(_el$2, _v$, _p$._v$);
+              _v$2 !== _p$._v$2 && setAttribute(_el$2, "title", _p$._v$2 = _v$2);
+              _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
+              _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
+              _v$5 !== _p$._v$5 && _el$2.style.setProperty("background", _p$._v$5 = _v$5);
+              return _p$;
+            }, {
+              _v$: undefined,
+              _v$2: undefined,
+              _v$3: undefined,
+              _v$4: undefined,
+              _v$5: undefined
+            });
+            return _el$2;
           }
         });
       }
     }));
+    effect(() => className(_el$, styles.PianoRollTrackList));
     return _el$;
   })();
 };
 delegateEvents(["click"]);
 
-const _tmpl$$1 = /*#__PURE__*/template(`<div><div></div></div>`, 4);
+const _tmpl$$1 = /*#__PURE__*/template(`<div></div>`, 2),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div></div></div>`, 4);
 const PianoRoll = allProps => {
   const [contextProps, divProps] = splitContextProps(allProps);
   const [scrollerRef, setScrollerRef] = createSignal();
@@ -889,14 +822,20 @@ const PianoRoll = allProps => {
   const maxZoom = createMemo(() => 500 * (zoomFactor / clientRect().width));
   const minVerticalZoom = createMemo(() => 1 / (zoomFactor / clientRect().height));
   const maxVerticalZoom = createMemo(() => 10 * (zoomFactor / clientRect().height));
+  createEffect(isInitial => {
+    if (isInitial) return false;
+    if (contextProps.mode === "tracks") {
+      contextProps.onVerticalPositionChange?.(0);
+    }
+  }, true);
   return createComponent(PianoRollContextProvider, {
     value: contextProps,
     get children() {
-      const _el$ = _tmpl$$1.cloneNode(true),
+      const _el$ = _tmpl$2.cloneNode(true),
         _el$2 = _el$.firstChild;
       spread(_el$, mergeProps(divProps, {
         get ["class"]() {
-          return styles$3.PianoRoll;
+          return styles$4.PianoRoll;
         }
       }), false, true);
       insert(_el$2, createComponent(ScrollZoomViewPort, {
@@ -914,14 +853,35 @@ const PianoRoll = allProps => {
             pixelOffset: clientRect().top,
             pixelSize: clientRect().height,
             position: contextProps.verticalPosition,
-            range: 128,
+            range: contextProps.mode === "keys" ? 128 : Math.max(contextProps.tracks.length, 16),
             zoom: contextProps.verticalZoom * (zoomFactor / clientRect().height),
             onPositionChange: contextProps.onVerticalPositionChange,
             onZoomChange: verticalZoom => contextProps.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom()))
           })
         },
         get children() {
-          return [createComponent(PianoRollKeys, {}), createComponent(ScrollContainer, {
+          return [(() => {
+            const _el$3 = _tmpl$$1.cloneNode(true);
+            _el$3.style.setProperty("display", "flex");
+            _el$3.style.setProperty("width", "20%");
+            insert(_el$3, createComponent(Show, {
+              get when() {
+                return allProps.showTrackList;
+              },
+              get children() {
+                return createComponent(PianoRollTrackList, {});
+              }
+            }), null);
+            insert(_el$3, createComponent(Show, {
+              get when() {
+                return contextProps.mode === "keys";
+              },
+              get children() {
+                return createComponent(PianoRollKeys, {});
+              }
+            }), null);
+            return _el$3;
+          })(), createComponent(ScrollContainer, {
             ref: setScrollerRef,
             get children() {
               return [memo(() => allProps.children), createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
@@ -944,7 +904,7 @@ const PianoRoll = allProps => {
           return maxZoom();
         }
       }), null);
-      effect(() => className(_el$2, styles$3.PianoRollContainer));
+      effect(() => className(_el$2, styles$4.PianoRollContainer));
       return _el$;
     }
   });
@@ -1004,13 +964,37 @@ const PlayHead = allProps => {
   })();
 };
 
+const useNotes = () => {
+  const [notes, onNotesChange] = createSignal([]);
+  const onNoteChange = (index, note) => {
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
+  };
+  const onInsertNote = note => {
+    const index = Math.max(notes().findIndex(({
+      ticks
+    }) => ticks > note.ticks), 0);
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
+    return index;
+  };
+  const onRemoveNote = index => {
+    onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
+  };
+  return {
+    notes,
+    onNotesChange,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote
+  };
+};
+
 const usePianoRoll = () => {
   const [ppq, onPpqChange] = createSignal(120);
-  const [condensed, onCondensedChange] = createSignal(false);
+  const [mode, onModeChange] = createSignal("tracks");
   const [position, onPositionChange] = createSignal(0);
   const [zoom, onZoomChange] = createSignal(10);
   const [verticalZoom, onVerticalZoomChange] = createSignal(5);
-  const [verticalPosition, onVerticalPositionChange] = createSignal(64);
+  const [verticalPosition, onVerticalPositionChange] = createSignal(44);
   const [gridDivision, onGridDivisionChange] = createSignal(4);
   const [snapToGrid, onSnapToGridChange] = createSignal(true);
   const [duration, onDurationChange] = createSignal(0);
@@ -1029,12 +1013,12 @@ const usePianoRoll = () => {
     onGridDivisionChange,
     snapToGrid,
     onSnapToGridChange,
-    condensed,
-    onCondensedChange,
+    mode,
+    onModeChange,
     duration,
     onDurationChange
   };
 };
 
-export { MultiTrackPianoRoll, PianoRoll, PlayHead, useNotes, usePianoRoll };
+export { PianoRoll, PlayHead, useNotes, usePianoRoll };
 //# sourceMappingURL=index.js.map