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

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, createContext, useContext, useState, forwardRef, useImperativeHandle, createRef } from 'react';
+import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, forwardRef, useImperativeHandle, createContext, useContext, useState, createRef } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -67,7 +67,7 @@ function setDprConfig(canvas, context, width, height, dpr) {
     canvas.style.height = `${height}px`;
 }
 function AnimationCanvas(_a) {
-    var { width = 100, height = 100, relativeSize = false, reduceFlickering = true, options, init, draw, className } = _a, props = __rest(_a, ["width", "height", "relativeSize", "reduceFlickering", "options", "init", "draw", "className"]);
+    var { width = 100, height = 100, relativeSize = false, reduceFlickering = true, options, init, draw, className, onContextMenu = (event) => event.preventDefault() } = _a, props = __rest(_a, ["width", "height", "relativeSize", "reduceFlickering", "options", "init", "draw", "className", "onContextMenu"]);
     const canvasRef = useRef(null);
     const memoCanvasRef = useRef(null);
     const reqIdRef = useRef(-1);
@@ -116,7 +116,11 @@ function AnimationCanvas(_a) {
                     for (const prop of drawingState) {
                         context[prop] = contextMemo[prop];
                     }
-                    if (reduceFlickering && memoContext) {
+                    if (reduceFlickering &&
+                        memoContext &&
+                        memoCanvas &&
+                        memoCanvas.width > 0 &&
+                        memoCanvas.height > 0) {
                         context.drawImage(memoContext.canvas, 0, 0);
                     }
                 }
@@ -148,7 +152,7 @@ function AnimationCanvas(_a) {
             };
         }
     }, [loop, init, options, reduceFlickering, relativeSize]);
-    return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, ref: memoCanvasRef }))] }));
+    return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: canvasRef, onContextMenu: onContextMenu }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, ref: memoCanvasRef }))] }));
 }
 
 /**
@@ -256,7 +260,7 @@ function xor(a = false, b = false) {
 /**
  * @category MIDI
  */
-const noteNames = [
+const noteKeys = [
     'C',
     'C#',
     'D',
@@ -290,18 +294,16 @@ function parseNoteName(noteName) {
  */
 function noteNumber(noteName) {
     const { letter, accidental, octave } = parseNoteName(noteName);
-    const noteIndex = noteNames.indexOf(letter.toLocaleUpperCase());
+    const noteIndex = noteKeys.indexOf(letter.toLocaleUpperCase());
     const accidentalValue = (accidental[0] == 'b' ? -1 : 1) * accidental.length;
     return noteIndex + 12 * (Number(octave) + 1) + accidentalValue;
 }
 /**
- * Convert noteNumber to noteName
+ * Convert noteNumber to noteKey
  * @category MIDI
  */
-function noteName(noteNumber) {
-    const noteIndex = mod(noteNumber, 12);
-    const octave = Math.floor(noteNumber / 12) - 1;
-    return noteNames[noteIndex] + octave;
+function noteKey(noteNumber) {
+    return noteKeys[mod(noteNumber, 12)];
 }
 /**
  * @param note noteNumber: 0 ~ 127 or noteName e.g. 'C3'
@@ -317,6 +319,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.
@@ -397,8 +406,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 = useCallback((event) => {
@@ -424,13 +432,14 @@ function removeNoSelect() {
 }
 
 /**
- * simple rotary Knob.
+ * Animatable rotary knob.
  * @category AnimationKnob
  */
-function AnimationKnob(_a) {
+const AnimationKnob = forwardRef((_a, ref) => {
     var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, activeColor = '#7998ec', inactiveColor = '#eee', bg = '#ccc', thumb = '#4e76e6', lineWeight = 6, thumbWeight = 4, draw, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], enableDoubleClickDefault = true, style, className, onChange } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "activeColor", "inactiveColor", "bg", "thumb", "lineWeight", "thumbWeight", "draw", "bodyNoSelect", "wheel", "keyboard", "enableDoubleClickDefault", "style", "className", "onChange"]);
     // -- state and ref ---
     const valueRef = useRef(0);
+    const elmRef = useRef(null);
     // --- interpret props ---
     const isRelativeSize = typeof (size !== null && size !== void 0 ? size : width) == 'string' || typeof height == 'string';
     const onDrag = useCallback((_x, y) => {
@@ -487,14 +496,27 @@ function AnimationKnob(_a) {
         if (onChange)
             onChange(clamp(stepValue(v, step), min, max));
     }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
     return (jsx("div", Object.assign({ className: clsx('tremolo-animation-knob', className), ref: (div) => {
+            elmRef.current = div;
             wheelRefCallback(div);
             touchMoveRefCallback(div);
         }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, style: Object.assign({ display: 'inline-block', width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height, cursor: 'pointer', WebkitTapHighlightColor: 'transparent' }, style), onPointerDown: pointerDownHandler, onDoubleClick: () => {
             if (enableDoubleClickDefault && onChange) {
                 onChange(defaultValue);
             }
-        }, onKeyDown: handleKeyDown, onContextMenu: (e) => e.preventDefault() }, props, { children: jsx(AnimationCanvas, Object.assign({}, (isRelativeSize
+        }, onKeyDown: handleKeyDown }, props, { children: jsx(AnimationCanvas, Object.assign({}, (isRelativeSize
             ? { relativeSize: true }
             : {
                 width: size !== null && size !== void 0 ? size : width,
@@ -541,7 +563,7 @@ function AnimationKnob(_a) {
                     ctx.lineWidth = thumbWeight;
                     ctx.stroke();
                 } })) })));
-}
+});
 
 /** @category DragObserver */
 function DragObserver(props) {
@@ -555,15 +577,20 @@ function DragObserver(props) {
     return (jsx(Component, Object.assign({ ref: refCallback, onPointerDown: pointerDownHandler }, attributes, { children: children })));
 }
 
-/** @category Knob */
-function Knob(_a) {
-    var { value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size = 50, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], enableDoubleClickDefault = true, disabled = false, readonly = false, activeLine, inactiveLine, thumb, thumbLine, onChange, className, classes } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "defaultValue", "startValue", "size", "bodyNoSelect", "wheel", "keyboard", "enableDoubleClickDefault", "disabled", "readonly", "activeLine", "inactiveLine", "thumb", "thumbLine", "onChange", "className", "classes"]);
+/**
+ * Interactive rotary knob component implemented in SVG.
+ *
+ * @category Knob
+ */
+const Knob = forwardRef((_a, ref) => {
+    var { value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size = 50, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], enableDoubleClickDefault = true, disabled = false, readonly = false, activeLine, inactiveLine, thumb, thumbLine, onChange, onKeyDown, onPointerDown, onDoubleClick, className, classes } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "defaultValue", "startValue", "size", "bodyNoSelect", "wheel", "keyboard", "enableDoubleClickDefault", "disabled", "readonly", "activeLine", "inactiveLine", "thumb", "thumbLine", "onChange", "onKeyDown", "onPointerDown", "onDoubleClick", "className", "classes"]);
     const valueRef = useRef(0);
+    const elmRef = useRef(null);
     // --- interpret props ---
     const padding = 8; // %
     const thumbLineWeight = 6; // %
-    const thumbLength = 35; // %
-    const lineWeight = 3; // px
+    const thumbLineLength = 35; // %
+    const lineWeight = size * 0.06; // px
     const p = normalizeValue(value, min, max, skew);
     const s = normalizeValue(startValue, min, max, skew);
     // --- internal functions ---
@@ -574,6 +601,17 @@ function Knob(_a) {
         const v2 = clamp(stepValue(v, step), min, max);
         onChange(v2);
     }, [max, min, onChange, readonly, skew, step]);
+    const updateValueByEvent = useCallback((eventType, x) => {
+        let newValue;
+        if (eventType == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            newValue = rawValue(n + x, min, max, skew);
+        }
+        else {
+            newValue = value + x;
+        }
+        return clamp(stepValue(newValue, step), min, max);
+    }, [max, min, skew, step, value]);
     const handleKeyDown = useCallback((event) => {
         if (!keyboard || !onChange || readonly)
             return;
@@ -581,17 +619,9 @@ function Knob(_a) {
         if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
             event.preventDefault();
             const x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
-            let v;
-            if (keyboard[0] == 'normalized') {
-                const n = normalizeValue(value, min, max, skew);
-                v = rawValue(n + x, min, max, skew);
-            }
-            else {
-                v = value + x;
-            }
-            onChange(clamp(stepValue(v, step), min, max));
+            onChange(updateValueByEvent(keyboard[0], x));
         }
-    }, [value, min, max, step, skew, keyboard, readonly, onChange]);
+    }, [keyboard, onChange, readonly, updateValueByEvent]);
     // --- hooks ---
     const [touchMoveRefCallback, pointerDownHandler] = useDrag({
         onDrag: onDrag,
@@ -606,21 +636,26 @@ function Knob(_a) {
         },
     });
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
-        if (!wheel)
+        if (!wheel || readonly)
             return;
         event.preventDefault();
-        const x = event.deltaY > 0 ? -wheel[1] : wheel[1];
-        let v;
-        if (wheel[0] == 'normalized') {
-            const n = normalizeValue(value, min, max, skew);
-            v = rawValue(n + x, min, max, skew);
-        }
-        else {
-            v = value + x;
-        }
-        if (onChange)
-            onChange(clamp(stepValue(v, step), min, max));
-    }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
+        if (!onChange || event.deltaY == 0)
+            return;
+        const x = Math.sign(event.deltaY) * -wheel[1];
+        onChange(updateValueByEvent(wheel[0], x));
+    }, { passive: false }, [wheel, onChange, readonly, updateValueByEvent]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
     const center = size / 2;
     const r1 = -135;
     const r2 = -135 + Math.min(p, s) * 270;
@@ -635,13 +670,62 @@ function Knob(_a) {
     const x4 = center + center * Math.cos(radian(r4 - 90));
     const y4 = center + center * Math.sin(radian(r4 - 90));
     return (jsxs("svg", Object.assign({ className: clsx('tremolo-knob', className), ref: (div) => {
+            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: pointerDownHandler, onDoubleClick: () => {
+        }, 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) => {
             if (enableDoubleClickDefault && onChange) {
                 onChange(defaultValue);
             }
-        }, onKeyDown: handleKeyDown, onContextMenu: (e) => e.preventDefault() }, props, { children: [startValue > min && (jsx("path", { className: clsx('tremolo-knob-inactive-line', classes === null || classes === void 0 ? void 0 : classes.inactiveLine), d: `M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`, fill: "none", stroke: inactiveLine || 'currentColor', strokeWidth: lineWeight })), jsx("path", { className: clsx('tremolo-knob-active-line', classes === null || classes === void 0 ? void 0 : classes.activeLine), d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`, fill: "none", stroke: activeLine || 'currentColor', strokeWidth: lineWeight }), startValue < max && (jsx("path", { className: clsx('tremolo-knob-inactive-line', classes === null || classes === void 0 ? void 0 : classes.inactiveLine), d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`, fill: "none", stroke: inactiveLine || 'currentColor', strokeWidth: lineWeight })), jsxs("svg", { className: clsx('tremolo-knob-thumb', classes === null || classes === void 0 ? void 0 : classes.thumb), children: [jsx("circle", { cx: "50%", cy: "50%", r: `${50 - padding}%`, fill: thumb || 'currentColor' }), jsx("line", { className: clsx('tremolo-knob-thumb-line', classes === null || classes === void 0 ? void 0 : classes.thumbLine), x1: "50%", y1: `${padding}%`, x2: "50%", y2: `${thumbLength}%`, stroke: thumbLine || 'currentColor', strokeWidth: `${thumbLineWeight}%`, transform: `rotate(${ -135 + p * 270})`, "transform-origin": "50% 50%" })] })] })));
+            onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(event);
+        }, onKeyDown: (event) => {
+            handleKeyDown(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        } }, props, { children: [startValue > min && (jsx("path", { className: clsx('tremolo-knob-inactive-line', classes === null || classes === void 0 ? void 0 : classes.inactiveLine), d: `M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`, fill: "none", stroke: inactiveLine || 'currentColor', strokeWidth: lineWeight })), jsx("path", { className: clsx('tremolo-knob-active-line', classes === null || classes === void 0 ? void 0 : classes.activeLine), d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`, fill: "none", stroke: activeLine || 'currentColor', strokeWidth: lineWeight }), startValue < max && (jsx("path", { className: clsx('tremolo-knob-inactive-line', classes === null || classes === void 0 ? void 0 : classes.inactiveLine), d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`, fill: "none", stroke: inactiveLine || 'currentColor', strokeWidth: lineWeight })), jsxs("svg", { className: clsx('tremolo-knob-thumb', classes === null || classes === void 0 ? void 0 : classes.thumb), children: [jsx("circle", { cx: "50%", cy: "50%", r: `${50 - padding}%`, fill: thumb || 'currentColor' }), jsx("line", { className: clsx('tremolo-knob-thumb-line', classes === null || classes === void 0 ? void 0 : classes.thumbLine), x1: "50%", y1: `${padding}%`, x2: "50%", y2: `${thumbLineLength}%`, stroke: thumbLine || 'currentColor', strokeWidth: `${thumbLineWeight}%`, 
+                        // NOTE
+                        // https://bugs.webkit.org/show_bug.cgi?id=201854
+                        // https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform-origin#browser_compatibility
+                        style: {
+                            transform: `rotate(${ -135 + p * 270}deg)`,
+                            transformOrigin: '50% 50%',
+                        } })] })] })));
+});
+
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    () => selector(api.getState()),
+    () => selector(api.getInitialState())
+  );
+  React.useDebugValue(slice);
+  return slice;
 }
 
 /**
@@ -690,40 +774,6 @@ function parseValue(inputString, units, digit) {
     };
 }
 
-const createStoreImpl = (createState) => {
-  let state;
-  const listeners = /* @__PURE__ */ new Set();
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const getInitialState = () => initialState;
-  const subscribe = (listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const api = { setState, getState, getInitialState, subscribe };
-  const initialState = state = createState(setState, getState, api);
-  return api;
-};
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-const identity = (arg) => arg;
-function useStore(api, selector = identity) {
-  const slice = React.useSyncExternalStore(
-    api.subscribe,
-    () => selector(api.getState()),
-    () => selector(api.getInitialState())
-  );
-  React.useDebugValue(slice);
-  return slice;
-}
-
 function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
     return clamp(value, min, max);
 }
@@ -734,6 +784,7 @@ const createNumberInputStore = (initProps) => {
         min: 0,
         max: 0,
         step: 1,
+        readonly: false,
         keepWithinRange: true,
         onChange: (_v, _t) => { },
     };
@@ -742,8 +793,10 @@ const createNumberInputStore = (initProps) => {
         valueAsNumber: parseValue(String((initProps === null || initProps === void 0 ? void 0 : initProps.value) || ''), initProps === null || initProps === void 0 ? void 0 : initProps.units, initProps === null || initProps === void 0 ? void 0 : initProps.digit).rawValue,
     }), { increment: () => set((state) => {
             var _a, _b;
-            let next = parseValue(state.value, state.units, state.digit).rawValue +
-                ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
+            if (state.readonly)
+                return {};
+            const current = parseValue(state.value, state.units, state.digit).rawValue;
+            let next = current + ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
             if (state.keepWithinRange) {
                 next = safeClamp(next, state.min, state.max);
             }
@@ -755,8 +808,10 @@ const createNumberInputStore = (initProps) => {
             };
         }), decrement: () => set((state) => {
             var _a, _b;
-            let next = parseValue(state.value, state.units, state.digit).rawValue -
-                ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
+            if (state.readonly)
+                return {};
+            const current = parseValue(state.value, state.units, state.digit).rawValue;
+            let next = current - ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
             if (state.keepWithinRange) {
                 next = safeClamp(next, state.min, state.max);
             }
@@ -767,6 +822,8 @@ const createNumberInputStore = (initProps) => {
                 valueAsNumber: next,
             };
         }), change: (value) => set((state) => {
+            if (state.readonly)
+                return {};
             const v = value !== null && value !== void 0 ? value : '';
             return {
                 value: v,
@@ -803,36 +860,17 @@ function useNumberInputContext(selector) {
     return useStore(store, selector);
 }
 
-function Stepper(_a) {
-    var { dynamic = true, children, className } = _a, props = __rest(_a, ["dynamic", "children", "className"]);
-    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-stepper', className), "data-dynamic": dynamic }, props, { children: children })));
-}
-
-function IncrementStepper(_a) {
-    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
-    const max = useNumberInputContext((s) => s.max);
-    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-    const increment = useNumberInputContext((s) => s.increment);
-    // TODO: add long press event
-    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-increment-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber >= (max !== null && max !== void 0 ? max : Number.MAX_SAFE_INTEGER), onPointerDown: increment }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "18 15 12 9 6 15" }) })) })));
-}
-
-function DecrementStepper(_a) {
-    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
-    const min = useNumberInputContext((s) => s.min);
-    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-    const decrement = useNumberInputContext((s) => s.decrement);
-    // TODO: add long press event
-    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-decrement-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber <= (min !== null && min !== void 0 ? min : Number.MIN_SAFE_INTEGER), onPointerDown: decrement }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) })) })));
-}
-
-function InternalInput(_a) {
-    var { min, max, step, defaultValue, units, disabled, digit, selectWithFocus, blurOnEnter, keepWithinRange, clampValueOnBlur, wheel, keyboard, wrapperClassName, className, onChange, onFocus, onBlur, children: _children } = _a, props = __rest(_a, ["min", "max", "step", "defaultValue", "units", "disabled", "digit", "selectWithFocus", "blurOnEnter", "keepWithinRange", "clampValueOnBlur", "wheel", "keyboard", "wrapperClassName", "className", "onChange", "onFocus", "onBlur", "children"]);
+const InternalInput = forwardRef((_a, ref) => {
+    var { disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children } = _a, props = __rest(_a, ["disabled", "readonly", "selectWithFocus", "blurOnEnter", "clampValueOnBlur", "wheel", "keyboard", "className", "onChange", "onFocus", "onBlur", "onKeyDown", "children"]);
+    const elmRef = useRef(null);
     const [editing, setEditing] = useState(false);
     const value = useNumberInputContext((s) => s.value);
     const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const min = useNumberInputContext((s) => s.min);
+    const max = useNumberInputContext((s) => s.max);
+    const step = useNumberInputContext((s) => s.step);
+    const units = useNumberInputContext((s) => s.units);
+    const digit = useNumberInputContext((s) => s.digit);
     const change = useNumberInputContext((s) => s.change);
     const error = useMemo(() => {
         if (editing)
@@ -840,11 +878,71 @@ function InternalInput(_a) {
         const v = valueAsNumber;
         return (min !== null && min !== void 0 ? min : -Infinity) > v || v > (max !== null && max !== void 0 ? max : Infinity);
     }, [editing, max, min, valueAsNumber]);
-    return (jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: value, min: min, max: max, step: step, type: "text", disabled: disabled, tabIndex: -1, "data-error": error, onChange: (event) => {
+    const updateValueByEvent = useCallback((eventType, x) => {
+        let newValue;
+        if (eventType == 'normalized') {
+            if (!min || !max) {
+                throw new Error('required parameter: min, max'); // TODO
+            }
+            const n = normalizeValue(valueAsNumber, min, max);
+            newValue = rawValue(n + x, min, max);
+            return clamp(stepValue(newValue, step), min, max);
+        }
+        else {
+            newValue = valueAsNumber + x;
+            return stepValue(newValue, step);
+        }
+    }, [max, min, step, valueAsNumber]);
+    const handleKeyDown = useCallback((event) => {
+        if (!keyboard || !onChange || readonly)
+            return;
+        const key = event.key;
+        if (!['ArrowUp', 'ArrowDown'].includes(key))
+            return;
+        event.preventDefault();
+        const x = key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
+        const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)));
+        console.log('key control');
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
+    }, [keyboard, readonly, onChange, updateValueByEvent]);
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (!wheel || readonly)
+            return;
+        event.preventDefault();
+        if (!onChange || event.deltaY == 0)
+            return;
+        const x = Math.sign(event.deltaY) * -wheel[1];
+        const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
+        console.log('wheel control');
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
+    }, { passive: false }, [wheel, readonly, onChange, updateValueByEvent]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
+    return (jsx("input", Object.assign({ ref: (input) => {
+            elmRef.current = input;
+            wheelRefCallback(input);
+        }, className: clsx('tremolo-number-input', className), value: value, min: min, max: max, step: step, type: "text", "aria-disabled": disabled, "aria-readonly": readonly, tabIndex: -1, "data-error": error, onChange: (event) => {
+            if (readonly)
+                return;
             const v = event.currentTarget.value;
+            const cursorPos = event.target.selectionStart;
             change(v);
             const valueAsNumber = parseValue(v, units, digit).rawValue;
             onChange === null || onChange === void 0 ? void 0 : onChange(valueAsNumber, v);
+            if (cursorPos) {
+                event.target.selectionStart = cursorPos;
+                event.target.selectionEnd = cursorPos;
+            }
         }, onFocus: (event) => {
             setEditing(true);
             const v = event.currentTarget.value;
@@ -873,53 +971,190 @@ function InternalInput(_a) {
             if (blurOnEnter && event.key == 'Enter') {
                 event.currentTarget.blur();
             }
+            handleKeyDown(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         } }, props)));
+});
+
+/** @category NumberInput */
+function Stepper(_a) {
+    var { dynamic = true, children, className } = _a, props = __rest(_a, ["dynamic", "children", "className"]);
+    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-stepper', className), "data-dynamic": dynamic }, props, { children: children })));
+}
+
+function useInterval(callback, delay) {
+    const savedCallback = useRef(callback);
+    // Remember the latest callback if it changes.
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    useEffect(() => {
+        // Don't schedule if no delay is specified.
+        // Note: 0 is a valid value for delay.
+        if (delay === null) {
+            return;
+        }
+        const id = setInterval(() => {
+            savedCallback.current();
+        }, delay);
+        return () => {
+            clearInterval(id);
+        };
+    }, [delay]);
 }
+
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+    const [pressed, setPressed] = useState(false);
+    const [delay, setDelay] = useState(initialDelay);
+    useInterval(() => {
+        callback();
+        setDelay(interval);
+    }, pressed ? delay : null);
+    useEventListener(globalThis.window, 'pointerup', () => {
+        setPressed(false);
+        setDelay(initialDelay);
+    });
+    return useCallback(() => {
+        callback();
+        setPressed(true);
+    }, [callback]);
+}
+
+/** @category NumberInput */
+function IncrementStepper(_a) {
+    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
+    const max = useNumberInputContext((s) => s.max);
+    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const readonly = useNumberInputContext((s) => s.readonly);
+    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+    const increment = useNumberInputContext((s) => s.increment);
+    const press = useLongPress(increment);
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    jsx("div", Object.assign({ className: clsx('tremolo-number-input-increment-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber >= (max !== null && max !== void 0 ? max : Number.MAX_SAFE_INTEGER), "aria-readonly": readonly, onPointerDown: press }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "18 15 12 9 6 15" }) })) })));
+}
+
+/** @category NumberInput */
+function DecrementStepper(_a) {
+    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
+    const min = useNumberInputContext((s) => s.min);
+    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const readonly = useNumberInputContext((s) => s.readonly);
+    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+    const decrement = useNumberInputContext((s) => s.decrement);
+    const press = useLongPress(decrement);
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    jsx("div", Object.assign({ className: clsx('tremolo-number-input-decrement-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber <= (min !== null && min !== void 0 ? min : Number.MIN_SAFE_INTEGER), "aria-readonly": readonly, onPointerDown: press }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) })) })));
+}
+
 /**
  * Input with some useful functions for entering numerical values.
  * @category NumberInput
  */
-function NumberInput(_a) {
-    var { value, min, max, step = 1, defaultValue, units, disabled = false, digit, selectWithFocus = 'none', blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ['raw', 1], keyboard = ['raw', 1], wrapperClassName, className, onChange, onFocus, onBlur, children } = _a, props = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "digit", "selectWithFocus", "blurOnEnter", "keepWithinRange", "clampValueOnBlur", "wheel", "keyboard", "wrapperClassName", "className", "onChange", "onFocus", "onBlur", "children"]);
-    return (jsx(NumberInputProvider, { value: String(value), min: min, max: max, step: step, units: units, digit: digit, keepWithinRange: keepWithinRange, onChange: onChange, children: jsxs("div", { className: clsx('tremolo-number-input-wrapper', wrapperClassName), 
+const NumberInput = forwardRef((_a, ref) => {
+    var { value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = 'outline', selectWithFocus = 'none', blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ['raw', 1], keyboard = ['raw', 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children } = _a, props = __rest(_a, ["value", "min", "max", "step", "units", "readonly", "disabled", "digit", "variant", "selectWithFocus", "blurOnEnter", "keepWithinRange", "clampValueOnBlur", "wheel", "keyboard", "activeColor", "wrapperClassName", "className", "onChange", "onFocus", "onBlur", "children"]);
+    const colors = {
+        '--active-color': activeColor,
+    };
+    return (jsx(NumberInputProvider, { value: String(value), min: min, max: max, step: step, units: units, digit: digit, readonly: readonly, keepWithinRange: keepWithinRange, onChange: onChange, children: jsxs("div", { className: clsx('tremolo-number-input-wrapper', wrapperClassName), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, "data-stepper": !!children, children: [jsx(InternalInput, Object.assign({ min: min, max: max, step: step, defaultValue: defaultValue, units: units, disabled: disabled, digit: digit, selectWithFocus: selectWithFocus, blurOnEnter: blurOnEnter, keepWithinRange: keepWithinRange, clampValueOnBlur: clampValueOnBlur, wheel: wheel, keyboard: keyboard, wrapperClassName: wrapperClassName, className: className, onChange: onChange, onFocus: onFocus, onBlur: onBlur }, props)), children] }) }));
+            tabIndex: 0, style: Object.assign({}, colors), "data-stepper": !!children, "data-variant": variant, children: [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 = useRef(false);
+    const normalizedX = useRef(0);
+    const normalizedY = useRef(0);
+    const handleDrag = 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 = 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) && (jsx("div", { className: clsx('tremolo-piano-key-label-wrapper', wrapperClassName), style: wrapperStyle, children: jsx("div", Object.assign({ className: clsx('tremolo-piano-key-label', className) }, props, { children: content })) })));
 }
 
 /** @category Piano */
 const defaultWhiteKeyWidth = 40;
 /** @category Piano */
-const WhiteKey = forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth, height = '100%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label"]);
+const defaultBlackKeyWidth = 26;
+const KeyImpl = 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] = 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,
+        '--active-bg': activeBg,
+        '--active-color': activeColor,
+    };
     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) => {
@@ -936,109 +1171,85 @@ const WhiteKey = forwardRef((_a, ref) => {
             }
         });
     }
-    return (jsx("div", Object.assign({ className: clsx(`tremolo-piano-white-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign({ 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);
-            }
-        } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+    return (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: jsx(KeyLabel, Object.assign({ label: label, __note: noteNumber }, keyLabelProps)) })));
+});
+/** @category Piano */
+const WhiteKey = forwardRef((_a, ref) => {
+    var { width = defaultWhiteKeyWidth, height = '100%', onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "onContextMenu"]);
+    return (jsx(KeyImpl, Object.assign({ ref: ref, keyType: "white", width: width, height: height, onContextMenu: onContextMenu }, props)));
 });
-
 /** @category Piano */
 const BlackKey = forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth * 0.65, height = '60%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label"]);
-    const [played, setPlayed] = useState(false);
-    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 (jsx("div", Object.assign({ className: clsx(`tremolo-piano-black-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign({ 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);
-            }
-        } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+    var { width = defaultBlackKeyWidth, height = '60%', onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "onContextMenu"]);
+    return (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: () => { },
+    };
+    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 = createContext(null);
+function PianoProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createPianoStore(props);
+    }
+    useEffect(() => {
+        if (storeRef.current) {
+            storeRef.current.setState(props);
+        }
+        else {
+            storeRef.current = createPianoStore(props);
+        }
+    }, [props]);
+    return (jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
+}
+/** @category Piano */
+function usePianoContext(selector) {
+    const store = useContext(PianoContext);
+    if (!store)
+        throw new Error('Missing PianoContext.Provider in the tree');
+    return useStore(store, selector);
+}
+
 /** @category Piano */
-const Shortcuts = {
+const SHORTCUTS = {
     HOME_ROW: {
         keys: [
             'a',
@@ -1062,67 +1273,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 } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "style", "className", "onPlayNote", "onStopNote", "label", "children"]);
+    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] = useState(false);
-    const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1);
+    const [whiteNoteWidth, setWhiteNoteWidth] = useState(_whiteNoteWidth);
     const keyRefs = useRef([]);
     for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
         keyRefs.current[i] = createRef();
     }
     const pianoRef = useRef(null);
+    const hitKeyIndex = 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 = 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 = 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 toNoteName = (n) => {
-            const { letter, accidental } = parseNoteName(noteName(n));
-            return (letter + accidental);
-        };
-        const _noteName = toNoteName(note);
-        const firstNoteName = toNoteName(noteRange.first);
-        const pos = pitchPositions[_noteName] - pitchPositions[firstNoteName];
+        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 = noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0;
-        const length = whiteNoteWidth + 3;
-        return pos * length + (octave + octaveOffset) * 7 * length;
-    }
+        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;
+    }, [noteRange.first]);
+    const getHitKeyIndex = 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 = 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 = 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 ---
     useEffect(() => {
         if (fill && pianoRef.current) {
@@ -1131,14 +1396,22 @@ 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 () => {
+                resizeObserver.unobserve(parent);
+            };
         }
         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)
@@ -1163,17 +1436,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 (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) => {
-            if (props.onPointerDown)
-                props.onPointerDown(e);
-            setPressed(true);
-        }, onPointerUp: (e) => {
-            if (props.onPointerUp)
-                props.onPointerUp(e);
-            setPressed(false);
-        } }, props, { children: noteRangeArray.map((note, index) => {
-            return isWhiteKey(note) ? (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)) : (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 (jsx(PianoProvider, { noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: 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) ? (jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note }, note)) : (jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note }, note))) })) }));
 }
 
 const createSliderStore = (initProps) => {
@@ -1287,7 +1557,7 @@ function Scale(_a) {
 /** @category Slider */
 const defaultThumbSize = 22;
 /** @category Slider */
-const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, children, className, style, __percent, }, ref) => {
+const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent, }, ref) => {
     const wrapperRef = useRef(null);
     const vertical = useSliderContext((s) => s.vertical);
     const disabled = useSliderContext((s) => s.disabled);
@@ -1311,13 +1581,14 @@ const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defau
         // default slider thumb
         jsx("div", { ref: wrapperRef, className: clsx('tremolo-slider-thumb', className), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign({ width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }, style) })) }));
+            tabIndex: 0, "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign(Object.assign({ '--color': color }, { width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }), style) })) }));
 });
 
 const defaultLength = 140;
 const defaultThickness = 10;
 /** @category Slider */
-function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0, }) {
+function SliderTrack(_a) {
+    var { length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0 } = _a, props = __rest(_a, ["length", "thickness", "active", "inactive", "children", "className", "style", "defaultStyle", "__thumb", "__percent"]);
     const vertical = useSliderContext((s) => s.vertical);
     const reverse = useSliderContext((s) => s.reverse);
     const disabled = useSliderContext((s) => s.disabled);
@@ -1326,11 +1597,11 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
         '--active': active,
         '--inactive': inactive,
     };
-    return (jsxs("div", { className: clsx('tremolo-slider-track', className), "aria-disabled": disabled, "data-vertical": vertical, style: !defaultStyle
+    return (jsxs("div", Object.assign({ className: clsx('tremolo-slider-track', className), "aria-disabled": disabled, "data-vertical": vertical, style: !defaultStyle
             ? style
             : Object.assign(Object.assign(Object.assign({}, colors), { background: xor(vertical, reverse)
                     ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
-                    : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`, borderRadius: styleHelper(thickness, '/', 2), width: !vertical ? length : thickness, height: vertical ? length : thickness }), style), children: [children, __thumb] }));
+                    : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`, borderRadius: styleHelper(thickness, '/', 2), width: !vertical ? length : thickness, height: vertical ? length : thickness }), style) }, props, { children: [children, __thumb] })));
 }
 
 /**
@@ -1338,12 +1609,11 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
  * @category Slider
  */
 const Slider = forwardRef((_a, ref) => {
-    var _b, _c, _d;
-    var { value, min, max, step = 1, skew = 1, vertical = false, reverse = false, className, style, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], disabled = false, readonly = false, onChange, children } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "vertical", "reverse", "className", "style", "bodyNoSelect", "wheel", "keyboard", "disabled", "readonly", "onChange", "children"]);
+    var _b;
+    var { value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "vertical", "reverse", "bodyNoSelect", "wheel", "keyboard", "disabled", "readonly", "onChange", "onDragStart", "onDragEnd", "className", "style", "children", "onFocus", "onBlur", "onPointerDown", "onKeyDown"]);
     // -- state and ref ---
     const trackElementRef = useRef(null);
     const thumbRef = useRef(null);
-    const thumbDragged = useRef(false);
     // --- interpret props ---
     const p = toFixed$1(normalizeValue(value, min, max, skew) * 100);
     const rev = toFixed$1(100 - p);
@@ -1379,27 +1649,25 @@ const Slider = forwardRef((_a, ref) => {
         });
     }
     // --- internal functions ---
-    const handleValue = (event) => {
-        if (!trackElementRef.current ||
-            !thumbDragged.current ||
-            !onChange ||
-            readonly) {
+    const onDrag = 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);
-        onChange(clamp(stepValue(v, step), min, max));
-    };
+        const v2 = clamp(stepValue(v, step), min, max);
+        onChange(v2);
+    }, [displayReversed, max, min, onChange, readonly, skew, step, vertical]);
+    const updateValueByEvent = useCallback((eventType, x) => {
+        let newValue;
+        if (eventType == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            newValue = rawValue(n + x, min, max, skew);
+        }
+        else {
+            newValue = value + x;
+        }
+        return clamp(stepValue(newValue, step), min, max);
+    }, [max, min, skew, step, value]);
     const handleKeyDown = useCallback((event) => {
         if (!keyboard || !onChange || readonly)
             return;
@@ -1409,19 +1677,30 @@ const Slider = forwardRef((_a, ref) => {
             let x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
             if (reverse)
                 x *= -1;
-            let v;
-            if (keyboard[0] == 'normalized') {
-                const n = normalizeValue(value, min, max, skew);
-                v = rawValue(n + x, min, max, skew);
-            }
-            else {
-                v = value + x;
-            }
-            onChange(clamp(stepValue(v, step), min, max));
+            onChange(updateValueByEvent(keyboard[0], x));
         }
-    }, [value, min, max, step, skew, reverse, keyboard, onChange, readonly]);
+    }, [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;
@@ -1437,26 +1716,10 @@ const Slider = forwardRef((_a, ref) => {
         }
         if (vertical && reverse)
             x *= -1;
-        let v;
-        if (wheel[0] == 'normalized') {
-            const n = normalizeValue(value, min, max, skew);
-            v = rawValue(n + x, min, max, skew);
-        }
-        else {
-            v = value + x;
-        }
-        onChange(clamp(stepValue(v, step), min, max));
+        onChange(updateValueByEvent(wheel[0], x));
     }, {
         passive: false,
-    }, [wheel, value, min, max, skew, step]);
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-        handleValue(event);
-    });
-    useEventListener(globalThis.window, 'mouseup', () => {
-        thumbDragged.current = false;
-        if (bodyNoSelect)
-            removeNoSelect();
-    });
+    }, [wheel, vertical, readonly, onChange, updateValueByEvent]);
     useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -1473,9 +1736,20 @@ const Slider = 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;
-                handleValue(event);
-            }, onKeyDown: handleKeyDown, onFocus: (_c = thumbRef.current) === null || _c === void 0 ? void 0 : _c.focus, onBlur: (_d = thumbRef.current) === null || _d === void 0 ? void 0 : _d.blur }, props, { children: jsxs("div", { style: {
+                pointerDownHandler(event);
+                onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            }, onKeyDown: (event) => {
+                handleKeyDown(event);
+                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+            }, onFocus: (event) => {
+                var _a;
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            }, onBlur: (event) => {
+                var _a;
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            } }, props, { children: jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: vertical ? 'row' : 'column',
                     width: !vertical ? '100%' : undefined,
@@ -1494,12 +1768,14 @@ function WheelObserver(props) {
 }
 
 /** @category XYPad */
-function XYPadArea({ width = 120, height = 120, bg = '#eee', children, className, style, __thumb, }) {
-    return (jsxs("div", { className: clsx('tremolo-xy-pad-area', className), style: Object.assign({ position: 'relative', width: width, height: height, background: bg }, style), children: [children, __thumb] }));
+function XYPadArea(_a) {
+    var { width = 120, height = 120, color, children, className, style, __thumb } = _a, props = __rest(_a, ["width", "height", "color", "children", "className", "style", "__thumb"]);
+    return (jsxs("div", Object.assign({ className: clsx('tremolo-xy-pad-area', className), style: Object.assign(Object.assign({ '--color': color }, { width: width, height: height }), style) }, props, { children: [children, __thumb] })));
 }
 
 /** @category XYPad */
-const XYPadThumb = forwardRef(({ size, width = 22, height = 22, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css, }, ref) => {
+const XYPadThumb = forwardRef((_a, ref) => {
+    var { size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css } = _a, props = __rest(_a, ["size", "width", "height", "color", "children", "wrapperClassName", "wrapperStyle", "className", "style", "__disabled", "__css"]);
     const wrapperRef = useRef(null);
     useImperativeHandle(ref, () => {
         return {
@@ -1513,11 +1789,11 @@ const XYPadThumb = forwardRef(({ size, width = 22, height = 22, children, wrappe
             },
         };
     }, []);
-    return (jsx("div", { className: clsx('tremolo-xy-pad-thumb-wrapper', wrapperClassName), style: Object.assign(Object.assign({}, __css), wrapperStyle), children: children ? (children) : (
+    return (jsx("div", Object.assign({ className: clsx('tremolo-xy-pad-thumb-wrapper', wrapperClassName), style: Object.assign(Object.assign({}, __css), wrapperStyle) }, props, { children: children ? (children) : (
         // default thumb
         jsx("div", { ref: wrapperRef, className: clsx('tremolo-xy-pad-thumb', className), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, "aria-disabled": __disabled, style: Object.assign({ width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }, style) })) }));
+            tabIndex: 0, "aria-disabled": __disabled, style: Object.assign(Object.assign({ '--color': color }, { width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }), style) })) })));
 });
 
 const defaultValueOptions = {
@@ -1532,8 +1808,8 @@ const defaultValueOptions = {
  * @category XYPad
  */
 const XYPad = forwardRef((_a, ref) => {
-    var _b, _c, _d;
-    var { x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, children } = _a, props = __rest(_a, ["x", "y", "className", "style", "bodyNoSelect", "disabled", "readonly", "onChange", "children"]);
+    var _b;
+    var { x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children } = _a, props = __rest(_a, ["x", "y", "className", "style", "bodyNoSelect", "disabled", "readonly", "onChange", "onDragStart", "onDragEnd", "onPointerDown", "onKeyDown", "onFocus", "onBlur", "children"]);
     const x = useMemo(() => {
         return Object.assign(Object.assign({}, defaultValueOptions), _x);
     }, [_x]);
@@ -1543,13 +1819,13 @@ const XYPad = forwardRef((_a, ref) => {
     // -- state and ref ---
     const areaElementRef = useRef(null);
     const thumbRef = useRef(null);
-    const thumbDragged = 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)) {
@@ -1569,28 +1845,39 @@ const XYPad = forwardRef((_a, ref) => {
         });
     }
     // --- internal functions ---
-    const handleValue = (event) => {
-        if (!areaElementRef.current ||
-            !thumbDragged.current ||
-            !onChange ||
-            readonly)
+    const onDrag = 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);
-    };
+    }, [
+        onChange,
+        readonly,
+        x.max,
+        x.min,
+        x.reverse,
+        x.skew,
+        x.step,
+        y.max,
+        y.min,
+        y.reverse,
+        y.skew,
+        y.step,
+    ]);
+    const updateValueByEvent = useCallback((eventType, target, x) => {
+        let v;
+        if (eventType == 'normalized') {
+            const n = normalizeValue(target.value, target.min, target.max, target.skew);
+            v = rawValue(n + x, target.min, target.max, target.skew);
+        }
+        else {
+            v = target.value + x;
+        }
+        return clamp(stepValue(v, target.step), target.min, target.max);
+    }, []);
     const handleKeyDown = useCallback((event) => {
         if (!onChange || readonly)
             return;
@@ -1606,15 +1893,7 @@ const XYPad = forwardRef((_a, ref) => {
                 delta *= -1;
             if (target.reverse)
                 delta *= -1;
-            let v;
-            if (target.keyboard[0] == 'normalized') {
-                const n = normalizeValue(target.value, target.min, target.max, target.skew);
-                v = rawValue(n + delta, target.min, target.max, target.skew);
-            }
-            else {
-                v = target.value + delta;
-            }
-            const newValue = clamp(stepValue(v, target.step), target.min, target.max);
+            const newValue = updateValueByEvent(target.keyboard[0], target, delta);
             if (isHorizontal) {
                 onChange(newValue, y.value);
             }
@@ -1622,9 +1901,32 @@ const XYPad = forwardRef((_a, ref) => {
                 onChange(x.value, newValue);
             }
         }
-    }, [x, y, onChange, readonly]);
+    }, [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;
@@ -1637,15 +1939,7 @@ const XYPad = forwardRef((_a, ref) => {
             delta *= -1;
         if (target.reverse)
             delta *= -1;
-        let v;
-        if (target.wheel[0] == 'normalized') {
-            const n = normalizeValue(target.value, target.min, target.max, target.skew);
-            v = rawValue(n + delta, target.min, target.max, target.skew);
-        }
-        else {
-            v = target.value + delta;
-        }
-        const newValue = clamp(stepValue(v, target.step), target.min, target.max);
+        const newValue = updateValueByEvent(target.wheel[0], target, delta);
         if (event.shiftKey) {
             onChange(newValue, y.value);
         }
@@ -1654,15 +1948,7 @@ const XYPad = forwardRef((_a, ref) => {
         }
     }, {
         passive: false,
-    }, [x, y]);
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-        handleValue(event);
-    });
-    useEventListener(globalThis.window, 'mouseup', () => {
-        thumbDragged.current = false;
-        if (bodyNoSelect)
-            removeNoSelect();
-    });
+    }, [x, y, onChange, readonly, updateValueByEvent]);
     useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -1681,13 +1967,37 @@ const XYPad = 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) => {
-            thumbDragged.current = true;
-            handleValue(event);
-        }, onKeyDown: handleKeyDown, onFocus: (_c = thumbRef.current) === null || _c === void 0 ? void 0 : _c.focus, onBlur: (_d = thumbRef.current) === null || _d === void 0 ? void 0 : _d.blur }, props, { children: jsx("div", { className: "tremolo-xy-pad-area-wrapper", ref: areaElementRef, children: jsx(XYPadArea, Object.assign({ __thumb: jsx(XYPadThumb, Object.assign({ ref: thumbRef, __disabled: disabled, __css: {
+            pointerDownHandler(event);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+        }, onKeyDown: (event) => {
+            handleKeyDown(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        }, onFocus: (event) => {
+            var _a;
+            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        }, onBlur: (event) => {
+            var _a;
+            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        } }, props, { children: jsx("div", { className: "tremolo-xy-pad-area-wrapper", ref: areaElementRef, children: jsx(XYPadArea, Object.assign({ __thumb: jsx(XYPadThumb, Object.assign({ ref: thumbRef, __disabled: disabled, __css: {
                         top: `${percentY}%`,
                         left: `${percentX}%`,
                     } }, thumbProps)) }, areaProps)) }) })));
 });
 
-export { AnimationCanvas, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NumberInput, Piano, Scale, ScaleOption, Shortcuts, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, useSliderContext };
+const useAnimationFrame = (callback = () => { }, deps = []) => {
+    const reqIdRef = useRef(-1);
+    const loop = useCallback(() => {
+        reqIdRef.current = requestAnimationFrame(loop);
+        callback();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [callback, ...deps]);
+    useEffect(() => {
+        reqIdRef.current = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(reqIdRef.current);
+    }, [loop]);
+};
+
+export { AnimationCanvas, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NumberInput, Piano, SHORTCUTS, Scale, ScaleOption, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, getNoteRangeArray, useAnimationFrame, useDrag, useEventListener, useInterval, useLongPress, useSliderContext };
 //# sourceMappingURL=index.js.map