@tremolo-ui/react 0.0.12 → 0.1.0-alpha.0

package/dist/cjs/index.js

@@ -321,6 +321,13 @@ function isWhiteKey(note) {
         mod(n, 12) == 9 ||
         mod(n, 12) == 11);
 }
+/**
+ * @param note noteNumber: 0 ~ 127 or noteName e.g. 'C3'
+ * @category MIDI
+ */
+function isBlackKey(note) {
+    return !isWhiteKey(note);
+}
 
 /**
  * This hook is user-land implementation of the experimental `useEffectEvent` hook.
@@ -401,8 +408,7 @@ function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd, }) {
         }
         if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold)
             return;
-        if (onDrag)
-            onDrag(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
+        onDrag(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
     }, [threshold, onDrag]);
     const refHandler = useRefCallbackEvent('touchmove', handleDrag, { passive: false }, [onDrag]);
     const pointerDownHandler = React.useCallback((event) => {
@@ -669,7 +675,7 @@ const Knob = React.forwardRef((_a, ref) => {
             elmRef.current = div;
             wheelRefCallback(div);
             touchMoveRefCallback(div);
-        }, width: size, height: size, tabIndex: 0, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, "aria-readonly": readonly, onPointerDown: (event) => {
+        }, width: size, height: size, tabIndex: 0, role: "slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, "aria-readonly": readonly, onPointerDown: (event) => {
             pointerDownHandler(event);
             onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
         }, onDoubleClick: (event) => {
@@ -1059,21 +1065,73 @@ const NumberInput = React.forwardRef((_a, ref) => {
             tabIndex: 0, style: Object.assign({}, colors), "data-stepper": !!children, "data-variant": variant, children: [jsxRuntime.jsx(InternalInput, Object.assign({ ref: ref, readonly: readonly, disabled: disabled, selectWithFocus: selectWithFocus, blurOnEnter: blurOnEnter, clampValueOnBlur: clampValueOnBlur, wheel: wheel, keyboard: keyboard, className: className, onChange: onChange, onFocus: onFocus, onBlur: onBlur }, props)), children] }) }));
 });
 
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd, }) {
+    const dragged = React.useRef(false);
+    const normalizedX = React.useRef(0);
+    const normalizedY = React.useRef(0);
+    const handleDrag = React.useCallback((event) => {
+        if (!baseElementRef.current || !dragged.current) {
+            return;
+        }
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
+        const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
+        const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
+        const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
+        const nx = normalizeValue(mouseX, left, right);
+        const ny = normalizeValue(mouseY, top, bottom);
+        normalizedX.current = nx;
+        normalizedY.current = ny;
+        onDrag(nx, ny);
+    }, [onDrag, baseElementRef]);
+    const refHandler = useRefCallbackEvent('touchmove', handleDrag, { passive: false }, [onDrag]);
+    const pointerDownHandler = React.useCallback((event) => {
+        dragged.current = true;
+        handleDrag(event);
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(normalizedX.current, normalizedY.current);
+    }, [handleDrag, onDragStart]);
+    useEventListener(globalThis.window, 'pointermove', handleDrag);
+    useEventListener(globalThis.window, 'pointerup', () => {
+        if (!dragged.current)
+            return;
+        dragged.current = false;
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(normalizedX.current, normalizedY.current);
+    });
+    return [refHandler, pointerDownHandler];
+}
+
 /** @category Piano */
 function KeyLabel(_a) {
-    var { label, className, wrapperClassName, wrapperStyle, __note, __index, __label } = _a, props = __rest(_a, ["label", "className", "wrapperClassName", "wrapperStyle", "__note", "__index", "__label"]);
+    var { label, className, wrapperClassName, wrapperStyle, __note, __label } = _a, props = __rest(_a, ["label", "className", "wrapperClassName", "wrapperStyle", "__note", "__label"]);
+    const noteRange = usePianoContext((s) => s.noteRange);
+    const noteRangeArray = getNoteRangeArray(noteRange);
+    const index = noteRangeArray.indexOf(__note);
     const content = label
-        ? label(__note, __index)
-        : __label && __label(__note, __index);
+        ? label(__note, index)
+        : __label && __label(__note, index);
     return ((content != undefined || content != null) && (jsxRuntime.jsx("div", { className: clsx('tremolo-piano-key-label-wrapper', wrapperClassName), style: wrapperStyle, children: jsxRuntime.jsx("div", Object.assign({ className: clsx('tremolo-piano-key-label', className) }, props, { children: content })) })));
 }
 
 /** @category Piano */
 const defaultWhiteKeyWidth = 40;
 /** @category Piano */
-const WhiteKey = React.forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth, height = '100%', bg, color, activeBg, activeColor, className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label, onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "bg", "color", "activeBg", "activeColor", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label", "onContextMenu"]);
+const defaultBlackKeyWidth = 26;
+const KeyImpl = React.forwardRef((_a, ref) => {
+    var { keyType, noteNumber, width, height, bg, color, activeBg, activeColor, className, style, children, __width } = _a, props = __rest(_a, ["keyType", "noteNumber", "width", "height", "bg", "color", "activeBg", "activeColor", "className", "style", "children", "__width"]);
     const [played, setPlayed] = React.useState(false);
+    const midiMax = usePianoContext((s) => s.midiMax);
+    const fill = usePianoContext((s) => s.fill);
+    // const glissando = usePianoContext(s => s.glissando)
+    const onPlayNote = usePianoContext((s) => s.onPlayNote);
+    const onStopNote = usePianoContext((s) => s.onStopNote);
+    const label = usePianoContext((s) => s.label);
+    const notePosition = usePianoContext((s) => s.notePosition);
+    const position = notePosition(noteNumber);
+    const disabled = noteNumber > midiMax;
     const colors = {
         '--bg': bg,
         '--color': color,
@@ -1083,22 +1141,22 @@ const WhiteKey = React.forwardRef((_a, ref) => {
     React.useImperativeHandle(ref, () => {
         return {
             play() {
-                if (__disabled)
+                if (disabled)
                     return;
                 setPlayed(true);
-                if (__onPlayNote)
-                    __onPlayNote(__note);
+                if (onPlayNote)
+                    onPlayNote(noteNumber);
             },
             stop() {
                 setPlayed(false);
-                if (__onStopNote)
-                    __onStopNote(__note);
+                if (onStopNote)
+                    onStopNote(noteNumber);
             },
             played() {
                 return played;
             },
         };
-    }, [__disabled, __note, __onPlayNote, __onStopNote, played]);
+    }, [disabled, noteNumber, onPlayNote, onStopNote, played]);
     let keyLabelProps = {};
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
@@ -1115,112 +1173,82 @@ const WhiteKey = React.forwardRef((_a, ref) => {
             }
         });
     }
-    return (jsxRuntime.jsx("div", Object.assign({ className: clsx(`tremolo-piano-white-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign(Object.assign(Object.assign({}, colors), { left: __position, width: __fill ? __width : (width !== null && width !== void 0 ? width : __width), height: height }), style), onPointerDown: () => {
-            if (__disabled)
-                return;
-            setPlayed(true);
-            if (__onPlayNote)
-                __onPlayNote(__note);
-        }, onPointerEnter: () => {
-            if (__disabled)
-                return;
-            if (__glissando) {
-                setPlayed(true);
-                if (__onPlayNote)
-                    __onPlayNote(__note);
-            }
-        }, onPointerUp: () => {
-            if (__disabled)
-                return;
-            setPlayed(false);
-            if (__onStopNote)
-                __onStopNote(__note);
-        }, onPointerLeave: () => {
-            if (__disabled)
-                return;
-            if (__glissando) {
-                setPlayed(false);
-                if (__onStopNote)
-                    __onStopNote(__note);
-            }
-        }, onContextMenu: onContextMenu }, props, { children: jsxRuntime.jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: clsx(`tremolo-piano-${keyType}-key`, className), "aria-disabled": disabled, "data-active": played, style: Object.assign(Object.assign(Object.assign({}, colors), { left: position, width: fill ? __width : width, height: height }), style) }, props, { children: jsxRuntime.jsx(KeyLabel, Object.assign({ label: label, __note: noteNumber }, keyLabelProps)) })));
+});
+/** @category Piano */
+const WhiteKey = React.forwardRef((_a, ref) => {
+    var { width = defaultWhiteKeyWidth, height = '100%', onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "onContextMenu"]);
+    return (jsxRuntime.jsx(KeyImpl, Object.assign({ ref: ref, keyType: "white", width: width, height: height, onContextMenu: onContextMenu }, props)));
 });
-
 /** @category Piano */
 const BlackKey = React.forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth * 0.65, height = '60%', bg, color, activeBg, activeColor, className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label, onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "bg", "color", "activeBg", "activeColor", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label", "onContextMenu"]);
-    const [played, setPlayed] = React.useState(false);
-    const colors = {
-        '--bg': bg,
-        '--color': color,
-        '--active-bg': activeBg,
-        '--active-color': activeColor,
+    var { width = defaultBlackKeyWidth, height = '60%', onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "onContextMenu"]);
+    return (jsxRuntime.jsx(KeyImpl, Object.assign({ ref: ref, keyType: "black", width: width, height: height, onContextMenu: onContextMenu }, props)));
+});
+
+const createPianoStore = (initProps) => {
+    const noteRange = (initProps === null || initProps === void 0 ? void 0 : initProps.noteRange) || { first: 0};
+    const DEFAULT_PROPS = {
+        noteRange: { first: 0, last: 127 },
+        glissando: true,
+        midiMax: 127,
+        fill: false,
+        label: () => undefined,
+        onPlayNote: () => { },
+        onStopNote: () => { },
     };
-    React.useImperativeHandle(ref, () => {
-        return {
-            play() {
-                if (__disabled)
-                    return;
-                setPlayed(true);
-                if (__onPlayNote)
-                    __onPlayNote(__note);
-            },
-            stop() {
-                setPlayed(false);
-                if (__onStopNote)
-                    __onStopNote(__note);
-            },
-            played() {
-                return played;
-            },
-        };
-    }, [__disabled, __note, __onPlayNote, __onStopNote, played]);
-    let keyLabelProps = {};
-    if (children != undefined) {
-        React.Children.forEach(children, (child) => {
-            if (React.isValidElement(child)) {
-                if (child.type == KeyLabel) {
-                    keyLabelProps = child.props;
-                }
-                else {
-                    throw new Error('only <KeyLabel>');
-                }
-            }
-            else {
-                throw new Error('children is an invalid element.');
-            }
-        });
+    return createStore()(() => (Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), { notePosition: (note) => {
+            const pitchPositions = {
+                C: 0,
+                'C#': 1,
+                D: 1,
+                'D#': 2,
+                E: 2,
+                F: 3,
+                'F#': 4,
+                G: 4,
+                'G#': 5,
+                A: 5,
+                'A#': 6,
+                B: 6,
+            };
+            const whiteNoteWidth = defaultWhiteKeyWidth;
+            const blackNoteWidth = defaultBlackKeyWidth;
+            const padding = 1;
+            const targetNoteKey = noteKey(note);
+            const firstNoteKey = noteKey(noteRange.first);
+            const octave = Math.floor((note - noteRange.first) / 12);
+            const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
+            const w = whiteNoteWidth + padding;
+            const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
+            const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
+            return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
+        } })));
+};
+const PianoContext = React.createContext(null);
+function PianoProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = React.useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createPianoStore(props);
     }
-    return (jsxRuntime.jsx("div", Object.assign({ className: clsx(`tremolo-piano-black-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign(Object.assign(Object.assign({}, colors), { left: __position, width: __fill ? __width : (width !== null && width !== void 0 ? width : __width), height: height }), style), onPointerDown: () => {
-            if (__disabled)
-                return;
-            setPlayed(true);
-            if (__onPlayNote)
-                __onPlayNote(__note);
-        }, onPointerEnter: () => {
-            if (__disabled)
-                return;
-            if (__glissando) {
-                setPlayed(true);
-                if (__onPlayNote)
-                    __onPlayNote(__note);
-            }
-        }, onPointerUp: () => {
-            if (__disabled)
-                return;
-            setPlayed(false);
-            if (__onStopNote)
-                __onStopNote(__note);
-        }, onPointerLeave: () => {
-            if (__disabled)
-                return;
-            if (__glissando) {
-                setPlayed(false);
-                if (__onStopNote)
-                    __onStopNote(__note);
-            }
-        }, onContextMenu: onContextMenu }, props, { children: jsxRuntime.jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
-});
+    React.useEffect(() => {
+        if (storeRef.current) {
+            storeRef.current.setState(props);
+        }
+        else {
+            storeRef.current = createPianoStore(props);
+        }
+    }, [props]);
+    return (jsxRuntime.jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
+}
+/** @category Piano */
+function usePianoContext(selector) {
+    const store = React.useContext(PianoContext);
+    if (!store)
+        throw new Error('Missing PianoContext.Provider in the tree');
+    return useStore(store, selector);
+}
 
 /** @category Piano */
 const SHORTCUTS = {
@@ -1247,66 +1275,121 @@ const SHORTCUTS = {
     },
 };
 
+/**
+ * Piano component
+ *
+ * TODO:
+ * - add scale highlight
+ */
+/** @category Piano */
+function getNoteRangeArray(noteRange) {
+    return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
+}
 /**
  * Customizable piano component.
  * @category Piano
  */
 function Piano(_a) {
-    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, className, onPlayNote, onStopNote, label, children, onPointerUp, onPointerDown } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "style", "className", "onPlayNote", "onStopNote", "label", "children", "onPointerUp", "onPointerDown"]);
+    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "whiteNoteWidth", "style", "className", "onPlayNote", "onStopNote", "label", "children", "onPointerDown"]);
     // -- state and ref ---
-    const [pressed, setPressed] = React.useState(false);
-    const [whiteNoteWidth, setWhiteNoteWidth] = React.useState(-1);
+    const [whiteNoteWidth, setWhiteNoteWidth] = React.useState(_whiteNoteWidth);
     const keyRefs = React.useRef([]);
     for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
         keyRefs.current[i] = React.createRef();
     }
     const pianoRef = React.useRef(null);
+    const hitKeyIndex = React.useRef(-1);
     // --- interpret props ---
-    const noteRangeArray = Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
-    const whiteNoteCount = noteRangeArray.filter((v) => isWhiteKey(v)).length;
-    let whiteKeyProps = {}, blackKeyProps = {};
-    if (children != undefined) {
-        React.Children.forEach(children, (child) => {
-            if (React.isValidElement(child)) {
-                if (child.type == WhiteKey) {
-                    whiteKeyProps = child.props;
-                }
-                else if (child.type == BlackKey) {
-                    blackKeyProps = child.props;
-                }
-                else {
-                    throw new Error('only <WhiteKey> or <BlackKey>');
+    const noteRangeArray = getNoteRangeArray(noteRange);
+    const whiteNotes = noteRangeArray.filter((v) => isWhiteKey(v));
+    const blackNotes = noteRangeArray.filter((v) => isBlackKey(v));
+    const whiteNoteCount = whiteNotes.length;
+    const padding = 1;
+    const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
+    // const blackNoteShiftPercent = 0.3
+    // TODO: if fill setWhiteNoteWidth
+    // useMemo
+    // __width
+    const childrenWithProps = React.useMemo(() => {
+        return (children &&
+            React.Children.map(children, (child, index) => {
+                if (React.isValidElement(child)) {
+                    const props = { ref: keyRefs.current[index] };
+                    return React.cloneElement(child, props);
                 }
-            }
-            else {
-                throw new Error('children is an invalid element.');
-            }
-        });
-    }
+                return child;
+            }));
+    }, [children]);
     // --- internal functions ---
-    function notePosition(note) {
+    const notePosition = React.useCallback((note) => {
         const pitchPositions = {
             C: 0,
-            'C#': 0.55,
+            'C#': 1,
             D: 1,
-            'D#': 1.8,
+            'D#': 2,
             E: 2,
             F: 3,
-            'F#': 3.5,
+            'F#': 4,
             G: 4,
-            'G#': 4.7,
+            'G#': 5,
             A: 5,
-            'A#': 5.85,
+            'A#': 6,
             B: 6,
         };
+        const whiteNoteWidth = defaultWhiteKeyWidth;
+        const blackNoteWidth = defaultBlackKeyWidth;
+        const padding = 1;
         const targetNoteKey = noteKey(note);
         const firstNoteKey = noteKey(noteRange.first);
-        const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
         const octave = Math.floor((note - noteRange.first) / 12);
         const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
-        const length = whiteNoteWidth + 3;
-        return pos * length + (octave + octaveOffset) * 7 * length;
-    }
+        const w = whiteNoteWidth + padding;
+        const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
+        const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
+        return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
+    }, [noteRange.first]);
+    const getHitKeyIndex = React.useCallback((x, y) => {
+        if (!pianoRef.current)
+            return -1;
+        const containerHeight = pianoRef.current.clientHeight;
+        const notes = [...blackNotes, ...whiteNotes];
+        for (let i = 0; i < notes.length; i++) {
+            const note = notes[i];
+            const pos = notePosition(note);
+            const w = isWhiteKey(note) ? defaultWhiteKeyWidth : defaultBlackKeyWidth;
+            const h = isWhiteKey(note) ? containerHeight : containerHeight * 0.6;
+            if (pos <= x && x < pos + w && 0 <= y && y < h) {
+                return note;
+            }
+        }
+        return -1;
+    }, [blackNotes, notePosition, whiteNotes]);
+    // TODO: 単一のポインターに対しては、useDragで対応可能だが、
+    // マルチタッチに対しては、TouchEventを使う必要がありそう
+    // 取り敢えず、シングルタッチだけ対応
+    const onDrag = React.useCallback((perX, perY) => {
+        var _a, _b, _c, _d;
+        if (!pianoRef.current)
+            return;
+        const x = perX * staticWidth;
+        const y = perY * pianoRef.current.clientHeight;
+        const note = getHitKeyIndex(x, y);
+        const index = noteRangeArray.indexOf(note);
+        if (index == -1)
+            return;
+        if (hitKeyIndex.current != index) {
+            (_b = (_a = keyRefs.current[hitKeyIndex.current]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.stop();
+            (_d = (_c = keyRefs.current[index]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.play();
+            hitKeyIndex.current = index;
+        }
+    }, [getHitKeyIndex, noteRangeArray, staticWidth]);
+    const onDragEnd = React.useCallback(() => {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = keyRefs.current[hitKeyIndex.current]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.played()) {
+            (_d = (_c = keyRefs.current[hitKeyIndex.current]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.stop();
+        }
+        hitKeyIndex.current = -1;
+    }, [keyRefs]);
     // --- hooks ---
     React.useEffect(() => {
         if (fill && pianoRef.current) {
@@ -1315,7 +1398,7 @@ function Piano(_a) {
                 throw new Error("doesn't have a parent element.");
             const resizeObserver = new ResizeObserver(() => {
                 const w = pianoRef.current.clientWidth;
-                setWhiteNoteWidth(w / whiteNoteCount - 3);
+                setWhiteNoteWidth(w / whiteNoteCount - padding);
             });
             resizeObserver.observe(parent);
             return () => {
@@ -1323,9 +1406,14 @@ function Piano(_a) {
             };
         }
         else {
-            setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width) || defaultWhiteKeyWidth);
+            setWhiteNoteWidth(_whiteNoteWidth);
         }
-    }, [fill, whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width, whiteNoteCount]);
+    }, [fill, _whiteNoteWidth, whiteNoteCount]);
+    const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
+        baseElementRef: pianoRef,
+        onDrag: onDrag,
+        onDragEnd: onDragEnd,
+    });
     useEventListener(globalThis.window, 'keydown', (e) => {
         var _a, _b, _c, _d;
         if (e.repeat)
@@ -1350,15 +1438,14 @@ function Piano(_a) {
             (_b = (_a = keyRefs.current[index]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.stop();
         }
     });
-    return (jsxRuntime.jsx("div", Object.assign({ ref: pianoRef, className: clsx('tremolo-piano', className), style: Object.assign({ width: fill ? '100%' : (whiteNoteWidth + 3) * whiteNoteCount, height: height }, style), onPointerDown: (e) => {
-            setPressed(true);
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
-        }, onPointerUp: (e) => {
-            setPressed(false);
-            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
-        } }, props, { children: noteRangeArray.map((note, index) => {
-            return isWhiteKey(note) ? (jsxRuntime.jsx(WhiteKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth, __onPlayNote: onPlayNote, __onStopNote: onStopNote, __label: label }, whiteKeyProps), note)) : (jsxRuntime.jsx(BlackKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth * 0.65, __onPlayNote: onPlayNote, __onStopNote: onStopNote, __label: label }, blackKeyProps), note));
-        }) })));
+    return (jsxRuntime.jsx(PianoProvider, { noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: jsxRuntime.jsx("div", Object.assign({ ref: (div) => {
+                pianoRef.current = div;
+                touchMoveRefCallback(div);
+            }, className: clsx('tremolo-piano', className), style: Object.assign({ width: fill ? '100%' : staticWidth, height: height }, style), onPointerDown: (event) => {
+                pointerDownHandler(event);
+                onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            } }, props, { children: childrenWithProps ||
+                getNoteRangeArray(noteRange).map((note, index) => isWhiteKey(note) ? (jsxRuntime.jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note }, note)) : (jsxRuntime.jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note }, note))) })) }));
 }
 
 const createSliderStore = (initProps) => {
@@ -1529,7 +1616,6 @@ const Slider = React.forwardRef((_a, ref) => {
     // -- state and ref ---
     const trackElementRef = React.useRef(null);
     const thumbRef = React.useRef(null);
-    const thumbDragged = React.useRef(false);
     // --- interpret props ---
     const p = toFixed$1(normalizeValue(value, min, max, skew) * 100);
     const rev = toFixed$1(100 - p);
@@ -1565,29 +1651,14 @@ const Slider = React.forwardRef((_a, ref) => {
         });
     }
     // --- internal functions ---
-    const handleValue = (event) => {
-        if (!trackElementRef.current ||
-            !thumbDragged.current ||
-            !onChange ||
-            readonly) {
+    const onDrag = React.useCallback((nx, ny) => {
+        if (!onChange || readonly)
             return;
-        }
-        const isTouch = event instanceof TouchEvent;
-        if (isTouch && event.cancelable)
-            event.preventDefault();
-        if (bodyNoSelect)
-            addNoSelect();
-        const { left: x1, top: y1, right: x2, bottom: y2, } = trackElementRef.current.getBoundingClientRect();
-        const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
-        const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-        const n = vertical
-            ? normalizeValue(mouseY, y1, y2)
-            : normalizeValue(mouseX, x1, x2);
+        const n = vertical ? ny : nx;
         const v = rawValue(displayReversed ? 1 - n : n, min, max, skew);
         const v2 = clamp(stepValue(v, step), min, max);
         onChange(v2);
-        return v2;
-    };
+    }, [displayReversed, max, min, onChange, readonly, skew, step, vertical]);
     const updateValueByEvent = React.useCallback((eventType, x) => {
         let newValue;
         if (eventType == 'normalized') {
@@ -1612,7 +1683,26 @@ const Slider = React.forwardRef((_a, ref) => {
         }
     }, [keyboard, onChange, readonly, reverse, updateValueByEvent]);
     // --- hooks ---
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, vertical, reverse, onChange, readonly]);
+    const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
+        baseElementRef: trackElementRef,
+        onDrag: onDrag,
+        onDragStart: (nx, ny) => {
+            var _a;
+            if (readonly)
+                return;
+            if (bodyNoSelect)
+                addNoSelect();
+            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
+        },
+        onDragEnd: (nx, ny) => {
+            if (readonly)
+                return;
+            if (bodyNoSelect)
+                removeNoSelect();
+            onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
+        },
+    });
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
         if (!wheel || !onChange || readonly)
             return;
@@ -1632,17 +1722,6 @@ const Slider = React.forwardRef((_a, ref) => {
     }, {
         passive: false,
     }, [wheel, vertical, readonly, onChange, updateValueByEvent]);
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-        handleValue(event);
-    });
-    useEventListener(globalThis.window, 'mouseup', () => {
-        if (!thumbDragged.current || readonly)
-            return;
-        thumbDragged.current = false;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(value);
-        if (bodyNoSelect)
-            removeNoSelect();
-    });
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -1659,10 +1738,7 @@ const Slider = React.forwardRef((_a, ref) => {
                 wheelRefCallback(div);
                 touchMoveRefCallback(div);
             }, tabIndex: -1, role: "slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": vertical ? 'vertical' : 'horizontal', "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign({ margin: `calc(${styleHelper((_b = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps.size) !== null && _b !== void 0 ? _b : 22)} / 2)` }, style), onPointerDown: (event) => {
-                thumbDragged.current = true;
-                const v = handleValue(event);
-                if (!readonly)
-                    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(v !== null && v !== void 0 ? v : value);
+                pointerDownHandler(event);
                 onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
             }, onKeyDown: (event) => {
                 handleKeyDown(event);
@@ -1745,13 +1821,13 @@ const XYPad = React.forwardRef((_a, ref) => {
     // -- state and ref ---
     const areaElementRef = React.useRef(null);
     const thumbRef = React.useRef(null);
-    const thumbDragged = React.useRef(false);
     // --- interpret props ---
     const nx = normalizeValue(x.value, x.min, x.max, x.skew);
     const ny = normalizeValue(y.value, y.min, y.max, y.skew);
     const percentX = toFixed$1((x.reverse ? 1 - nx : nx) * 100);
     const percentY = toFixed$1((y.reverse ? 1 - ny : ny) * 100);
-    let areaProps = {}, thumbProps = {};
+    let areaProps = {};
+    let thumbProps = {};
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
             if (React.isValidElement(child)) {
@@ -1771,29 +1847,28 @@ const XYPad = React.forwardRef((_a, ref) => {
         });
     }
     // --- internal functions ---
-    const handleValue = (event) => {
-        if (!areaElementRef.current ||
-            !thumbDragged.current ||
-            !onChange ||
-            readonly)
+    const onDrag = React.useCallback((nx, ny) => {
+        if (!onChange || readonly)
             return;
-        const isTouch = event instanceof TouchEvent;
-        if (isTouch && event.cancelable)
-            event.preventDefault();
-        if (bodyNoSelect)
-            addNoSelect();
-        const { left: x1, top: y1, right: x2, bottom: y2, } = areaElementRef.current.getBoundingClientRect();
-        const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
-        const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-        const nx = normalizeValue(mouseX, x1, x2);
-        const ny = normalizeValue(mouseY, y1, y2);
         const vx = rawValue(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew);
         const vy = rawValue(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew);
         const newX = clamp(stepValue(vx, x.step), x.min, x.max);
         const newY = clamp(stepValue(vy, y.step), y.min, y.max);
         onChange(newX, newY);
-        return [newX, newY];
-    };
+    }, [
+        onChange,
+        readonly,
+        x.max,
+        x.min,
+        x.reverse,
+        x.skew,
+        x.step,
+        y.max,
+        y.min,
+        y.reverse,
+        y.skew,
+        y.step,
+    ]);
     const updateValueByEvent = React.useCallback((eventType, target, x) => {
         let v;
         if (eventType == 'normalized') {
@@ -1830,7 +1905,30 @@ const XYPad = React.forwardRef((_a, ref) => {
         }
     }, [onChange, readonly, x, y, updateValueByEvent]);
     // --- hooks ---
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [x, onChange, readonly]);
+    const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
+        baseElementRef: areaElementRef,
+        onDrag: onDrag,
+        onDragStart: (nx, ny) => {
+            var _a;
+            if (readonly)
+                return;
+            if (bodyNoSelect)
+                addNoSelect();
+            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            const valueX = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
+            const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
+            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(valueX, valueY);
+        },
+        onDragEnd: (nx, ny) => {
+            if (readonly)
+                return;
+            if (bodyNoSelect)
+                removeNoSelect();
+            const valueX = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
+            const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
+            onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(valueX, valueY);
+        },
+    });
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
         if (!onChange || readonly)
             return;
@@ -1853,17 +1951,6 @@ const XYPad = React.forwardRef((_a, ref) => {
     }, {
         passive: false,
     }, [x, y, onChange, readonly, updateValueByEvent]);
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-        handleValue(event);
-    });
-    useEventListener(globalThis.window, 'mouseup', () => {
-        if (!thumbDragged.current || readonly)
-            return;
-        thumbDragged.current = false;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(x.value, y.value);
-        if (bodyNoSelect)
-            removeNoSelect();
-    });
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -1882,11 +1969,7 @@ const XYPad = React.forwardRef((_a, ref) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
         }, tabIndex: -1, "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign({ margin: `calc(${styleHelper((_b = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps.size) !== null && _b !== void 0 ? _b : 22)} / 2)`, cursor: readonly ? 'not-allowed' : 'pointer', WebkitTapHighlightColor: 'transparent' }, style), onPointerDown: (event) => {
-            var _a, _b;
-            thumbDragged.current = true;
-            const v = handleValue(event);
-            if (!readonly)
-                onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart((_a = v === null || v === void 0 ? void 0 : v[0]) !== null && _a !== void 0 ? _a : x.value, (_b = v === null || v === void 0 ? void 0 : v[1]) !== null && _b !== void 0 ? _b : y.value);
+            pointerDownHandler(event);
             onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
         }, onKeyDown: (event) => {
             handleKeyDown(event);
@@ -1940,6 +2023,7 @@ exports.WhiteKey = WhiteKey;
 exports.XYPad = XYPad;
 exports.XYPadArea = XYPadArea;
 exports.XYPadThumb = XYPadThumb;
+exports.getNoteRangeArray = getNoteRangeArray;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDrag = useDrag;
 exports.useEventListener = useEventListener;