@tremolo-ui/react 0.0.8 → 0.0.10

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, useState, forwardRef, useImperativeHandle, createRef, createContext, useContext } from 'react';
+import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, createContext, useContext, useState, forwardRef, useImperativeHandle, createRef } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -84,7 +84,7 @@ function AnimationCanvas(_a) {
         const context = canvas.getContext('2d', options);
         if (!context)
             throw new Error('Cannot get canvas context.');
-        const dpr = window.devicePixelRatio;
+        const dpr = globalThis.window.devicePixelRatio;
         if (relativeSize) {
             const parent = canvas.parentElement;
             if (!parent)
@@ -97,6 +97,7 @@ function AnimationCanvas(_a) {
                 // https://zenn.dev/megeton/articles/be1c677e174c84#%E6%A0%B9%E6%9C%AC%E7%9A%84%E3%81%AB-resizeobserver-loop-limit-exceeded-%E3%81%8C%E5%87%BA%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%AB%E5%90%91%E3%81%8D%E5%90%88%E3%81%86
                 for (const entry of entries) {
                     // Prevents loss of some context when the canvas is resized
+                    // TODO: saving scale and translate
                     const contextMemo = {};
                     for (const prop of drawingState) {
                         contextMemo[prop] = context[prop];
@@ -189,15 +190,15 @@ function stepValue(value, step) {
         throw new RangeError('requirements: step > 0');
     const quotient = Math.floor(value / step);
     const decimalDigits = (_a = decimalPart$1(step)) === null || _a === void 0 ? void 0 : _a.length;
-    const v = toFixed$2(quotient * step, decimalDigits);
-    const next = toFixed$2((quotient + 1) * step, decimalDigits);
+    const v = toFixed$1(quotient * step, decimalDigits);
+    const next = toFixed$1((quotient + 1) * step, decimalDigits);
     return Math.abs(value - v) < Math.abs(value - next) ? v : next;
 }
 /**
  *
  * @category Math
  */
-function toFixed$2(x, fractionDigits) {
+function toFixed$1(x, fractionDigits) {
     return Number(x.toFixed(fractionDigits));
 }
 /**
@@ -284,7 +285,7 @@ function parseNoteName(noteName) {
     };
 }
 /**
- *
+ * Convert noteName to noteNumber
  * @category MIDI
  */
 function noteNumber(noteName) {
@@ -294,7 +295,7 @@ function noteNumber(noteName) {
     return noteIndex + 12 * (Number(octave) + 1) + accidentalValue;
 }
 /**
- *
+ * Convert noteNumber to noteName
  * @category MIDI
  */
 function noteName(noteNumber) {
@@ -303,6 +304,7 @@ function noteName(noteNumber) {
     return noteNames[noteIndex] + octave;
 }
 /**
+ * @param note noteNumber: 0 ~ 127 or noteName e.g. 'C3'
  * @category MIDI
  */
 function isWhiteKey(note) {
@@ -365,6 +367,55 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
     }, deps);
 }
 
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd, }) {
+    const dragOffsetX = useRef(undefined);
+    const dragOffsetY = useRef(undefined);
+    const dragStartX = useRef(0);
+    const dragStartY = useRef(0);
+    const handleDrag = useCallback((event, first = false) => {
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
+        const screenX = isTouch ? event.touches[0].screenX : event.screenX;
+        const screenY = isTouch ? event.touches[0].screenY : event.screenY;
+        let deltaX = 0;
+        let deltaY = 0;
+        if (first) {
+            dragStartX.current = screenX;
+            dragStartY.current = screenY;
+        }
+        if (dragOffsetX.current) {
+            deltaX = screenX - dragOffsetX.current;
+            dragOffsetX.current = screenX;
+        }
+        if (dragOffsetY.current) {
+            deltaY = screenY - dragOffsetY.current;
+            dragOffsetY.current = screenY;
+        }
+        if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold)
+            return;
+        if (onDrag)
+            onDrag(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
+    }, [threshold, onDrag]);
+    const refHandler = useRefCallbackEvent('touchmove', handleDrag, { passive: false }, [onDrag]);
+    const pointerDownHandler = useCallback((event) => {
+        dragOffsetX.current = event.screenX;
+        dragOffsetY.current = event.screenY;
+        handleDrag(event, true);
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+    }, [handleDrag, onDragStart]);
+    useEventListener(globalThis.window, 'mousemove', handleDrag);
+    useEventListener(globalThis.window, 'pointerup', () => {
+        dragOffsetX.current = undefined;
+        dragOffsetY.current = undefined;
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    });
+    return [refHandler, pointerDownHandler];
+}
+
 function addNoSelect() {
     document.body.classList.add('tremolo-no-select');
 }
@@ -374,34 +425,21 @@ function removeNoSelect() {
 
 /**
  * simple rotary Knob.
+ * @category AnimationKnob
  */
 function AnimationKnob(_a) {
     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 [privateValue, setPrivateValue] = useState(value);
-    const dragOffsetY = useRef(undefined);
+    const valueRef = useRef(0);
     // --- interpret props ---
-    // const percent = normalizeValue(value, min, max, skew)
     const isRelativeSize = typeof (size !== null && size !== void 0 ? size : width) == 'string' || typeof height == 'string';
-    const handleEvent = (event) => {
-        const isTouch = event instanceof TouchEvent;
-        if (isTouch && event.cancelable)
-            event.preventDefault();
-        if (dragOffsetY.current) {
-            if (bodyNoSelect)
-                addNoSelect();
-            const screenY = isTouch ? event.touches[0].screenY : event.screenY;
-            const delta = dragOffsetY.current - screenY;
-            if (Math.abs(delta) < 1)
-                return;
-            dragOffsetY.current = screenY;
-            const n = normalizeValue(value, min, max, skew);
-            const v = rawValue(n + delta / 100, min, max, skew);
-            const v2 = clamp(stepValue(v, step), min, max);
-            if (onChange)
-                onChange(v2);
-        }
-    };
+    const onDrag = useCallback((_x, y) => {
+        if (!onChange)
+            return;
+        const v = rawValue(valueRef.current - y / 100, min, max, skew);
+        const v2 = clamp(stepValue(v, step), min, max);
+        onChange(v2);
+    }, [max, min, onChange, skew, step]);
     const handleKeyDown = useCallback((event) => {
         if (!keyboard || !onChange)
             return;
@@ -421,6 +459,18 @@ function AnimationKnob(_a) {
         }
     }, [value, min, max, step, skew, keyboard, onChange]);
     // --- hooks ---
+    const [touchMoveRefCallback, pointerDownHandler] = useDrag({
+        onDrag: onDrag,
+        onDragStart: () => {
+            valueRef.current = normalizeValue(value, min, max, skew);
+            if (bodyNoSelect)
+                addNoSelect();
+        },
+        onDragEnd: () => {
+            if (bodyNoSelect)
+                removeNoSelect();
+        },
+    });
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
         if (!wheel)
             return;
@@ -437,20 +487,10 @@ function AnimationKnob(_a) {
         if (onChange)
             onChange(clamp(stepValue(v, step), min, max));
     }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [value, min, max, skew, step, onChange, bodyNoSelect]);
-    useEventListener(window, 'mousemove', handleEvent);
-    useEventListener(window, 'pointerup', () => {
-        dragOffsetY.current = undefined;
-        if (bodyNoSelect)
-            removeNoSelect();
-    });
     return (jsx("div", Object.assign({ className: clsx('tremolo-animation-knob', className), ref: (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: (event) => {
-            dragOffsetY.current = event.screenY;
-            handleEvent(event);
-        }, onDoubleClick: () => {
+        }, 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);
             }
@@ -503,49 +543,22 @@ function AnimationKnob(_a) {
                 } })) })));
 }
 
+/** @category DragObserver */
 function DragObserver(props) {
-    const { children, onDrag, onDragStart, onDragEnd, as: Component = 'div' } = props, attributes = __rest(props, ["children", "onDrag", "onDragStart", "onDragEnd", "as"]);
-    const dragOffsetX = useRef(undefined);
-    const dragOffsetY = useRef(undefined);
-    const handleEvent = (event) => {
-        const isTouch = event instanceof TouchEvent;
-        if (isTouch && event.cancelable)
-            event.preventDefault();
-        const screenX = isTouch ? event.touches[0].screenX : event.screenX;
-        const screenY = isTouch ? event.touches[0].screenY : event.screenY;
-        let deltaX = 0, deltaY = 0;
-        if (dragOffsetX.current) {
-            deltaX = screenX - dragOffsetX.current;
-            dragOffsetX.current = screenX;
-        }
-        if (dragOffsetY.current) {
-            deltaY = screenY - dragOffsetY.current;
-            dragOffsetY.current = screenY;
-        }
-        if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1)
-            return;
-        if (onDrag)
-            onDrag(deltaX, deltaY);
-    };
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [onDrag]);
-    useEventListener(window, 'mousemove', handleEvent);
-    useEventListener(window, 'pointerup', () => {
-        dragOffsetX.current = undefined;
-        dragOffsetY.current = undefined;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    const { as: Component = 'div', threshold = 1, children, onDrag, onDragStart, onDragEnd } = props, attributes = __rest(props, ["as", "threshold", "children", "onDrag", "onDragStart", "onDragEnd"]);
+    const [refCallback, pointerDownHandler] = useDrag({
+        threshold: threshold,
+        onDrag: onDrag,
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd,
     });
-    return (jsx(Component, Object.assign({ ref: touchMoveRefCallback, onPointerDown: (event) => {
-            dragOffsetX.current = event.screenX;
-            dragOffsetY.current = event.screenY;
-            handleEvent(event);
-            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
-        } }, attributes, { children: children })));
+    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"]);
-    // -- state and ref ---
-    const dragOffsetY = useRef(undefined);
+    const valueRef = useRef(0);
     // --- interpret props ---
     const padding = 8; // %
     const thumbLineWeight = 6; // %
@@ -554,26 +567,13 @@ function Knob(_a) {
     const p = normalizeValue(value, min, max, skew);
     const s = normalizeValue(startValue, min, max, skew);
     // --- internal functions ---
-    const handleEvent = (event) => {
+    const onDrag = useCallback((_x, y) => {
         if (!onChange || readonly)
             return;
-        const isTouch = event instanceof TouchEvent;
-        if (isTouch && event.cancelable)
-            event.preventDefault();
-        if (dragOffsetY.current) {
-            if (bodyNoSelect)
-                addNoSelect();
-            const screenY = isTouch ? event.touches[0].screenY : event.screenY;
-            const delta = dragOffsetY.current - screenY;
-            if (Math.abs(delta) < 1)
-                return;
-            dragOffsetY.current = screenY;
-            const n = normalizeValue(value, min, max, skew);
-            const v = rawValue(n + delta / 100, min, max, skew);
-            const v2 = clamp(stepValue(v, step), min, max);
-            onChange(v2);
-        }
-    };
+        const v = rawValue(valueRef.current - y / 100, min, max, skew);
+        const v2 = clamp(stepValue(v, step), min, max);
+        onChange(v2);
+    }, [max, min, onChange, readonly, skew, step]);
     const handleKeyDown = useCallback((event) => {
         if (!keyboard || !onChange || readonly)
             return;
@@ -593,6 +593,18 @@ function Knob(_a) {
         }
     }, [value, min, max, step, skew, keyboard, readonly, onChange]);
     // --- hooks ---
+    const [touchMoveRefCallback, pointerDownHandler] = useDrag({
+        onDrag: onDrag,
+        onDragStart: () => {
+            valueRef.current = normalizeValue(value, min, max, skew);
+            if (bodyNoSelect)
+                addNoSelect();
+        },
+        onDragEnd: () => {
+            if (bodyNoSelect)
+                removeNoSelect();
+        },
+    });
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
         if (!wheel)
             return;
@@ -609,13 +621,6 @@ function Knob(_a) {
         if (onChange)
             onChange(clamp(stepValue(v, step), min, max));
     }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [value, min, max, skew, step, onChange, bodyNoSelect]);
-    useEventListener(window, 'mousemove', handleEvent);
-    useEventListener(window, 'pointerup', () => {
-        dragOffsetY.current = undefined;
-        if (bodyNoSelect)
-            removeNoSelect();
-    });
     const center = size / 2;
     const r1 = -135;
     const r2 = -135 + Math.min(p, s) * 270;
@@ -632,34 +637,17 @@ function Knob(_a) {
     return (jsxs("svg", Object.assign({ className: clsx('tremolo-knob', className), ref: (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) => {
-            dragOffsetY.current = event.screenY;
-            handleEvent(event);
-        }, onDoubleClick: () => {
+        }, width: size, height: size, tabIndex: 0, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, "aria-readonly": readonly, onPointerDown: pointerDownHandler, onDoubleClick: () => {
             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%" })] })] })));
 }
 
-/**
- * clamp value between min and max
- * @category Math
- */
-/**
- *
- * @category Math
- */
-function toFixed$1(x, fractionDigits) {
-    return Number(x.toFixed(fractionDigits));
-}
-
 /**
  * @module NumberInput
  */
 function selectUnit(units, value) {
-    if (typeof units == 'string')
-        return [units, 1];
     let i = 0;
     for (; i < units.length; i++) {
         if (Math.abs(units[i][1]) > Math.abs(value))
@@ -667,46 +655,33 @@ function selectUnit(units, value) {
     }
     return units[Math.max(0, i - 1)];
 }
-function parseValue(inputString, units, digit, defaultValue = 0) {
-    let str = inputString.trim();
-    if (str == '')
-        str = String(defaultValue);
-    if (!units) {
-        return {
-            rawValue: Number(str) || defaultValue,
-            formatValue: str,
-            unit: '',
-        };
-    }
-    else if (typeof units == 'string') {
+function parseValue(inputString, units, digit) {
+    var _a;
+    const str = inputString.trim();
+    if (!units || typeof units == 'string') {
+        const m = str.match(/-?\d+(\.\d+)?/);
+        let v = Number((_a = m === null || m === void 0 ? void 0 : m[0]) !== null && _a !== void 0 ? _a : '0');
+        v = isNaN(v) ? 0 : v;
         return {
-            rawValue: Number(str) || defaultValue,
-            formatValue: `${str}${units}`,
-            unit: units,
+            rawValue: v,
+            formatValue: (digit != undefined ? v.toFixed(digit) : v) + (units !== null && units !== void 0 ? units : ''),
+            unit: units !== null && units !== void 0 ? units : '',
         };
     }
     const unitList = units.map(([u, _s]) => u);
     const scaleList = units.map(([_u, s]) => s);
-    let rawValue = defaultValue;
-    let formatValue = `${scaleList[0]}`;
+    let rawValue = 0;
     let unit = unitList[0];
+    let formatValue = (digit != undefined ? rawValue.toFixed(digit) : rawValue) + unit;
     const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
     if (m) {
         rawValue = Number(m[1]) || 0;
-        const inputUnit = m[3];
-        if (inputUnit != '' && unitList.indexOf(inputUnit) != -1) {
-            rawValue *= scaleList[unitList.indexOf(inputUnit)];
-            const s = selectUnit(units, rawValue);
-            const v = rawValue / s[1];
-            formatValue = `${digit != undefined ? toFixed$1(v, digit) : v}${s[0]}`;
-            unit = s[0];
-        }
-        else {
-            const [u, scale] = selectUnit(units, rawValue);
-            const v = rawValue / scale;
-            formatValue = `${digit != undefined ? toFixed$1(v, digit) : v}${u}`;
-            unit = u;
-        }
+        const uIndex = unitList.indexOf(m[3]);
+        rawValue *= uIndex != -1 ? scaleList[uIndex] : 1;
+        const [u, scale] = selectUnit(units, rawValue);
+        const v = rawValue / scale;
+        formatValue = (digit != undefined ? v.toFixed(digit) : v) + u;
+        unit = u;
     }
     return {
         rawValue: rawValue,
@@ -715,44 +690,203 @@ function parseValue(inputString, units, digit, defaultValue = 0) {
     };
 }
 
-/**
- * Input with some useful functions for entering numerical values.
- */
-function NumberInput(_a) {
-    var { value, min, max, step, defaultValue = min, units, disabled = false, placeholder, readOnly, tabIndex, typeNumber = false, digit, selectWithFocus = 'none', blurWithEnter = true, className, onChange, onFocus, onBlur } = _a, props = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "placeholder", "readOnly", "tabIndex", "typeNumber", "digit", "selectWithFocus", "blurWithEnter", "className", "onChange", "onFocus", "onBlur"]);
-    const [showValue, setShowValue] = useState(parseValue(String(value), units, digit, defaultValue).formatValue);
-    const calculatedTypeNumber = units ? false : typeNumber;
-    return (jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedTypeNumber ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onChange: (event) => {
+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);
+}
+const createNumberInputStore = (initProps) => {
+    const DEFAULT_PROPS = {
+        value: '',
+        valueAsNumber: 0,
+        min: 0,
+        max: 0,
+        step: 1,
+        keepWithinRange: true,
+        onChange: (_v, _t) => { },
+    };
+    return createStore()((set) => (Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), {
+        value: 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).formatValue,
+        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.keepWithinRange) {
+                next = safeClamp(next, state.min, state.max);
+            }
+            const v = parseValue(String(next), state.units, state.digit).formatValue;
+            (_b = state === null || state === void 0 ? void 0 : state.onChange) === null || _b === void 0 ? void 0 : _b.call(state, next, v);
+            return {
+                value: v,
+                valueAsNumber: next,
+            };
+        }), 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.keepWithinRange) {
+                next = safeClamp(next, state.min, state.max);
+            }
+            const v = parseValue(String(next), state.units, state.digit).formatValue;
+            (_b = state === null || state === void 0 ? void 0 : state.onChange) === null || _b === void 0 ? void 0 : _b.call(state, next, v);
+            return {
+                value: v,
+                valueAsNumber: next,
+            };
+        }), change: (value) => set((state) => {
+            const v = value !== null && value !== void 0 ? value : '';
+            return {
+                value: v,
+                valueAsNumber: parseValue(v, state.units, state.digit).rawValue,
+            };
+        }) })));
+};
+const NumberInputContext = createContext(null);
+function NumberInputProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createNumberInputStore(props);
+    }
+    useEffect(() => {
+        if (storeRef.current) {
+            const parsed = parseValue(String((props === null || props === void 0 ? void 0 : props.value) || ''), props === null || props === void 0 ? void 0 : props.units, props === null || props === void 0 ? void 0 : props.digit);
+            storeRef.current.setState(Object.assign(Object.assign({}, props), {
+                value: parsed.formatValue,
+                valueAsNumber: parsed.rawValue,
+            }));
+        }
+        else {
+            storeRef.current = createNumberInputStore(props);
+        }
+    }, [props]);
+    return (jsx(NumberInputContext.Provider, { value: storeRef.current, children: children }));
+}
+/** @category NumberInput */
+function useNumberInputContext(selector) {
+    const store = useContext(NumberInputContext);
+    if (!store)
+        throw new Error('Missing NumberInputContext.Provider in the tree');
+    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 [editing, setEditing] = useState(false);
+    const value = useNumberInputContext((s) => s.value);
+    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const change = useNumberInputContext((s) => s.change);
+    const error = useMemo(() => {
+        if (editing)
+            return false;
+        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 v = event.currentTarget.value;
-            setShowValue(v);
-            const newValue = clamp(parseValue(v, units, digit, defaultValue).rawValue, min !== null && min !== void 0 ? min : -Infinity, max !== null && max !== void 0 ? max : Infinity);
-            if (onChange)
-                onChange(newValue, event);
+            change(v);
+            const valueAsNumber = parseValue(v, units, digit).rawValue;
+            onChange === null || onChange === void 0 ? void 0 : onChange(valueAsNumber, v);
         }, onFocus: (event) => {
+            setEditing(true);
             const v = event.currentTarget.value;
-            const parsed = parseValue(v, units, digit, defaultValue);
+            const parsed = parseValue(v, units, digit);
             if (selectWithFocus == 'all') {
                 event.currentTarget.setSelectionRange(0, v.length);
             }
             else if (selectWithFocus == 'number') {
                 event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
             }
-            if (onFocus)
-                onFocus(parsed.rawValue, event);
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(parsed.rawValue, parsed.formatValue, event);
         }, onBlur: (event) => {
+            setEditing(false);
             // update value
-            const v = event.currentTarget.value;
-            const parsed = parseValue(v, units, digit, defaultValue);
-            setShowValue(parsed.formatValue);
-            if (onBlur)
-                onBlur(parsed.rawValue, event);
+            let v = parseValue(event.currentTarget.value, units, digit).rawValue;
+            if (clampValueOnBlur) {
+                v = safeClamp(v, min, max);
+            }
+            const parsed = parseValue(String(v), units, digit);
+            change(parsed.formatValue);
+            if (clampValueOnBlur) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
+            }
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(parsed.rawValue, parsed.formatValue, event);
         }, onKeyDown: (event) => {
-            if (blurWithEnter && event.key == 'Enter') {
+            if (blurOnEnter && event.key == 'Enter') {
                 event.currentTarget.blur();
             }
         } }, props)));
 }
+/**
+ * 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), 
+            // 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] }) }));
+}
 
+/** @category Piano */
 function KeyLabel(_a) {
     var { label, className, wrapperClassName, wrapperStyle, __note, __index, __label } = _a, props = __rest(_a, ["label", "className", "wrapperClassName", "wrapperStyle", "__note", "__index", "__label"]);
     const content = label
@@ -761,8 +895,11 @@ function KeyLabel(_a) {
     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 })) })));
 }
 
-const BlackKey = forwardRef((_a, ref) => {
-    var { width = 40 * 0.65, height = '60%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__playNote", "__stopNote", "__label"]);
+/** @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 [played, setPlayed] = useState(false);
     useImperativeHandle(ref, () => {
         return {
@@ -770,19 +907,19 @@ const BlackKey = forwardRef((_a, ref) => {
                 if (__disabled)
                     return;
                 setPlayed(true);
-                if (__playNote)
-                    __playNote(__note);
+                if (__onPlayNote)
+                    __onPlayNote(__note);
             },
             stop() {
                 setPlayed(false);
-                if (__stopNote)
-                    __stopNote(__note);
+                if (__onStopNote)
+                    __onStopNote(__note);
             },
             played() {
                 return played;
             },
         };
-    }, [__disabled, __note, __playNote, __stopNote, played]);
+    }, [__disabled, __note, __onPlayNote, __onStopNote, played]);
     let keyLabelProps = {};
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
@@ -799,37 +936,40 @@ const BlackKey = forwardRef((_a, ref) => {
             }
         });
     }
-    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: () => {
+    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 (__playNote)
-                __playNote(__note);
+            if (__onPlayNote)
+                __onPlayNote(__note);
         }, onPointerEnter: () => {
             if (__disabled)
                 return;
             if (__glissando) {
                 setPlayed(true);
-                if (__playNote)
-                    __playNote(__note);
+                if (__onPlayNote)
+                    __onPlayNote(__note);
             }
         }, onPointerUp: () => {
             if (__disabled)
                 return;
             setPlayed(false);
-            if (__stopNote)
-                __stopNote(__note);
+            if (__onStopNote)
+                __onStopNote(__note);
         }, onPointerLeave: () => {
             if (__disabled)
                 return;
-            setPlayed(false);
-            if (__stopNote)
-                __stopNote(__note);
+            if (__glissando) {
+                setPlayed(false);
+                if (__onStopNote)
+                    __onStopNote(__note);
+            }
         } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
 });
 
-const WhiteKey = forwardRef((_a, ref) => {
-    var { width = 40, height = '100%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__playNote", "__stopNote", "__label"]);
+/** @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 {
@@ -837,19 +977,19 @@ const WhiteKey = forwardRef((_a, ref) => {
                 if (__disabled)
                     return;
                 setPlayed(true);
-                if (__playNote)
-                    __playNote(__note);
+                if (__onPlayNote)
+                    __onPlayNote(__note);
             },
             stop() {
                 setPlayed(false);
-                if (__stopNote)
-                    __stopNote(__note);
+                if (__onStopNote)
+                    __onStopNote(__note);
             },
             played() {
                 return played;
             },
         };
-    }, [__disabled, __note, __playNote, __stopNote, played]);
+    }, [__disabled, __note, __onPlayNote, __onStopNote, played]);
     let keyLabelProps = {};
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
@@ -866,35 +1006,38 @@ 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: () => {
+    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 (__playNote)
-                __playNote(__note);
+            if (__onPlayNote)
+                __onPlayNote(__note);
         }, onPointerEnter: () => {
             if (__disabled)
                 return;
             if (__glissando) {
                 setPlayed(true);
-                if (__playNote)
-                    __playNote(__note);
+                if (__onPlayNote)
+                    __onPlayNote(__note);
             }
         }, onPointerUp: () => {
             if (__disabled)
                 return;
             setPlayed(false);
-            if (__stopNote)
-                __stopNote(__note);
+            if (__onStopNote)
+                __onStopNote(__note);
         }, onPointerLeave: () => {
             if (__disabled)
                 return;
-            setPlayed(false);
-            if (__stopNote)
-                __stopNote(__note);
+            if (__glissando) {
+                setPlayed(false);
+                if (__onStopNote)
+                    __onStopNote(__note);
+            }
         } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
 });
 
+/** @category Piano */
 const Shortcuts = {
     HOME_ROW: {
         keys: [
@@ -919,8 +1062,9 @@ const Shortcuts = {
     },
 };
 
+/** @category Piano */
 function Piano(_a) {
-    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, className, playNote, stopNote, label, children } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "style", "className", "playNote", "stopNote", "label", "children"]);
+    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"]);
     // -- state and ref ---
     const [pressed, setPressed] = useState(false);
     const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1);
@@ -992,10 +1136,10 @@ function Piano(_a) {
             resizeObserver.observe(parent);
         }
         else {
-            setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width) || 40);
+            setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width) || defaultWhiteKeyWidth);
         }
     }, [fill, whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width, whiteNoteCount]);
-    useEventListener(window, 'keydown', (e) => {
+    useEventListener(globalThis.window, 'keydown', (e) => {
         var _a, _b, _c, _d;
         if (e.repeat)
             return;
@@ -1008,7 +1152,7 @@ function Piano(_a) {
             }
         }
     });
-    useEventListener(window, 'keyup', (e) => {
+    useEventListener(globalThis.window, 'keyup', (e) => {
         var _a, _b;
         if (e.repeat)
             return;
@@ -1019,7 +1163,7 @@ 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%' : undefined, height: height }, style), onPointerDown: (e) => {
+    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);
@@ -1028,35 +1172,46 @@ function Piano(_a) {
                 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, __playNote: playNote, __stopNote: stopNote, __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, __playNote: playNote, __stopNote: stopNote, __label: label }, blackKeyProps), note));
+            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));
         }) })));
 }
 
-const minContext = createContext(0);
-const maxContext = createContext(0);
-const stepContext = createContext(0);
-const skewContext = createContext(0);
-const verticalContext = createContext(false);
-const reverseContext = createContext(false);
-const disabledContext = createContext(false);
-function SliderValuesProvider({ min: _min, max: _max, step: _step, skew: _skew, vertical: _vertical, reverse: _reverse, disabled: _disabled, children, }) {
-    const [min] = useState(_min);
-    const [max] = useState(_max);
-    const [step] = useState(_step);
-    const [skew] = useState(_skew);
-    const [vertical] = useState(_vertical);
-    const [reverse] = useState(_reverse);
-    const [disabled] = useState(_disabled);
-    return (jsx(minContext.Provider, { value: min, children: jsx(maxContext.Provider, { value: max, children: jsx(stepContext.Provider, { value: step, children: jsx(skewContext.Provider, { value: skew, children: jsx(verticalContext.Provider, { value: vertical, children: jsx(reverseContext.Provider, { value: reverse, children: jsx(disabledContext.Provider, { value: disabled, children: children }) }) }) }) }) }) }));
+const createSliderStore = (initProps) => {
+    const DEFAULT_PROPS = {
+        min: 0,
+        max: 0,
+        step: 0,
+        skew: 0,
+        vertical: false,
+        reverse: false,
+        disabled: false,
+    };
+    return createStore()((set) => (Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), { updateMin: (min) => set(() => ({ min: min })), updateMax: (max) => set(() => ({ max: max })), updateStep: (step) => set(() => ({ step: step })), updateSkew: (skew) => set(() => ({ skew: skew })), updateVertical: (vertical) => set(() => ({ vertical: vertical })), updateReverse: (reverse) => set(() => ({ reverse: reverse })), updateDisabled: (disabled) => set(() => ({ disabled: disabled })) })));
+};
+const SliderContext = createContext(null);
+function SliderProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createSliderStore(props);
+    }
+    useEffect(() => {
+        if (storeRef.current) {
+            storeRef.current.setState(props);
+        }
+        else {
+            storeRef.current = createSliderStore(props);
+        }
+    }, [props]);
+    return (jsx(SliderContext.Provider, { value: storeRef.current, children: children }));
+}
+/** @category Slider */
+function useSliderContext(selector) {
+    const store = useContext(SliderContext);
+    if (!store)
+        throw new Error('Missing SliderContext.Provider in the tree');
+    return useStore(store, selector);
 }
-const useMin = () => useContext(minContext);
-const useMax = () => useContext(maxContext);
-const useStep = () => useContext(stepContext);
-const useSkew = () => useContext(skewContext);
-const useVertical = () => useContext(verticalContext);
-// export const useSetVertical = () => useContext(setVerticalContext)
-const useReverse = () => useContext(reverseContext);
-const useDisabled = () => useContext(disabledContext);
 
 /**
  * clamp value between min and max
@@ -1092,28 +1247,30 @@ function generateOptionsList(options, min, max, step) {
     return optionsList;
 }
 
+/** @category Slider */
 function ScaleOption(_a) {
     var { value, type = 'mark-number', label, thickness = 1, length = '0.5rem', gap = 2, labelWidth, classes, styles, className, style } = _a, props = __rest(_a, ["value", "type", "label", "thickness", "length", "gap", "labelWidth", "classes", "styles", "className", "style"]);
-    const min = useMin();
-    const max = useMax();
-    const skew = useSkew();
-    const vertical = useVertical();
-    const reverse = useReverse();
+    const min = useSliderContext((s) => s.min);
+    const max = useSliderContext((s) => s.max);
+    const skew = useSliderContext((s) => s.skew);
+    const vertical = useSliderContext((s) => s.vertical);
+    const reverse = useSliderContext((s) => s.reverse);
     const calcPercent = useCallback((rawValue) => {
-        return toFixed$2(xor(vertical, reverse)
+        return toFixed$1(xor(vertical, reverse)
             ? 100 - normalizeValue(rawValue, min, max, skew) * 100
             : normalizeValue(rawValue, min, max, skew) * 100);
     }, [vertical, reverse, max, min, skew]);
     return (jsxs("div", Object.assign({ className: clsx('tremolo-slider-scale-option', className), style: Object.assign({ left: !vertical ? `${calcPercent(value)}%` : undefined, top: vertical ? `${calcPercent(value)}%` : undefined }, style), "data-vertical": vertical }, props, { children: [type != 'number' && (jsx("div", { className: clsx('tremolo-slider-scale-option-mark', classes === null || classes === void 0 ? void 0 : classes.mark), style: Object.assign({ width: !vertical ? thickness : length, height: vertical ? thickness : length, marginBottom: !vertical ? gap : undefined, marginRight: vertical ? gap : undefined }, styles === null || styles === void 0 ? void 0 : styles.mark), "data-vertical": vertical })), type != 'mark' && (jsx("div", { className: clsx('tremolo-slider-scale-option-label', classes === null || classes === void 0 ? void 0 : classes.label), style: Object.assign({ width: labelWidth }, styles === null || styles === void 0 ? void 0 : styles.label), children: label || value }))] })));
 }
 
+/** @category Slider */
 function Scale(_a) {
     var { gap = 6, options, children, className, style } = _a, props = __rest(_a, ["gap", "options", "children", "className", "style"]);
-    const min = useMin();
-    const max = useMax();
-    const step = useStep();
-    const vertical = useVertical();
-    const reverse = useReverse();
+    const min = useSliderContext((s) => s.min);
+    const max = useSliderContext((s) => s.max);
+    const step = useSliderContext((s) => s.step);
+    const vertical = useSliderContext((s) => s.vertical);
+    const reverse = useSliderContext((s) => s.reverse);
     const optionsList = options
         ? generateOptionsList(options, min, max, step)
         : [];
@@ -1126,11 +1283,13 @@ function Scale(_a) {
             : children })));
 }
 
+/** @category Slider */
 const defaultThumbSize = 22;
+/** @category Slider */
 const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, children, className, style, __percent, }, ref) => {
     const wrapperRef = useRef(null);
-    const vertical = useVertical();
-    const disabled = useDisabled();
+    const vertical = useSliderContext((s) => s.vertical);
+    const disabled = useSliderContext((s) => s.disabled);
     useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -1153,24 +1312,30 @@ const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defau
             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) })) }));
 });
 
+/** @category Slider */
 const defaultLength = 140;
+/** @category Slider */
 const defaultThickness = 10;
-function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, __thumb, __percent, }) {
-    const vertical = useVertical();
-    const reverse = useReverse();
-    const disabled = useDisabled();
+/** @category Slider */
+function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0, }) {
+    const vertical = useSliderContext((s) => s.vertical);
+    const reverse = useSliderContext((s) => s.reverse);
+    const disabled = useSliderContext((s) => s.disabled);
     const direction = vertical ? 'bottom' : 'right';
     const colors = {
         '--active': active,
         '--inactive': inactive,
     };
-    return (jsxs("div", { className: clsx('tremolo-slider-track', className), "aria-disabled": disabled, 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] }));
+    return (jsxs("div", { 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] }));
 }
 
 /**
  * Customizable slider
+ * @category Slider
  */
 const Slider = forwardRef((_a, ref) => {
     var _b, _c, _d;
@@ -1180,8 +1345,8 @@ const Slider = forwardRef((_a, ref) => {
     const thumbRef = useRef(null);
     const thumbDragged = useRef(false);
     // --- interpret props ---
-    const p = toFixed$2(normalizeValue(value, min, max, skew) * 100);
-    const rev = toFixed$2(100 - p);
+    const p = toFixed$1(normalizeValue(value, min, max, skew) * 100);
+    const rev = toFixed$1(100 - p);
     // NOTE
     // normal -> normal (right)
     // vertical -> rev (up)
@@ -1284,10 +1449,10 @@ const Slider = forwardRef((_a, ref) => {
     }, {
         passive: false,
     }, [wheel, value, min, max, skew, step]);
-    useEventListener(window, 'mousemove', (event) => {
+    useEventListener(globalThis.window, 'mousemove', (event) => {
         handleValue(event);
     });
-    useEventListener(window, 'mouseup', () => {
+    useEventListener(globalThis.window, 'mouseup', () => {
         thumbDragged.current = false;
         if (bodyNoSelect)
             removeNoSelect();
@@ -1304,7 +1469,7 @@ const Slider = forwardRef((_a, ref) => {
             },
         };
     }, []);
-    return (jsx(SliderValuesProvider, { min: min, max: max, step: step, skew: skew, vertical: vertical, reverse: reverse, disabled: disabled, children: jsx("div", Object.assign({ className: clsx('tremolo-slider', className), ref: (div) => {
+    return (jsx(SliderProvider, { min: min, max: max, step: step, skew: skew, vertical: vertical, reverse: reverse, disabled: disabled, children: jsx("div", Object.assign({ className: clsx('tremolo-slider', className), ref: (div) => {
                 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) => {
@@ -1313,9 +1478,12 @@ const Slider = forwardRef((_a, ref) => {
             }, 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: {
                     display: 'flex',
                     flexDirection: vertical ? 'row' : 'column',
+                    width: !vertical ? '100%' : undefined,
+                    height: vertical ? '100%' : undefined,
                 }, children: [jsx("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, children: jsx(SliderTrack, Object.assign({ __percent: percent, __thumb: jsx(SliderThumb, Object.assign({ ref: thumbRef, __percent: percent }, thumbProps)) }, trackProps)) }), scaleComponent] }) })) }));
 });
 
+/** @category WheelObserver */
 function WheelObserver(props) {
     const { children, onWheel, as: Component = 'div' } = props, attributes = __rest(props, ["children", "onWheel", "as"]);
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
@@ -1325,10 +1493,12 @@ function WheelObserver(props) {
     return (jsx(Component, Object.assign({ ref: wheelRefCallback }, attributes, { children: children })));
 }
 
+/** @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] }));
 }
 
+/** @category XYPad */
 const XYPadThumb = forwardRef(({ size, width = 22, height = 22, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css, }, ref) => {
     const wrapperRef = useRef(null);
     useImperativeHandle(ref, () => {
@@ -1359,6 +1529,7 @@ const defaultValueOptions = {
 };
 /**
  * Simple XYPad
+ * @category XYPad
  */
 const XYPad = forwardRef((_a, ref) => {
     var _b, _c, _d;
@@ -1376,8 +1547,8 @@ const XYPad = forwardRef((_a, ref) => {
     // --- 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$2((x.reverse ? 1 - nx : nx) * 100);
-    const percentY = toFixed$2((y.reverse ? 1 - ny : ny) * 100);
+    const percentX = toFixed$1((x.reverse ? 1 - nx : nx) * 100);
+    const percentY = toFixed$1((y.reverse ? 1 - ny : ny) * 100);
     let areaProps = {}, thumbProps = {};
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
@@ -1484,10 +1655,10 @@ const XYPad = forwardRef((_a, ref) => {
     }, {
         passive: false,
     }, [x, y]);
-    useEventListener(window, 'mousemove', (event) => {
+    useEventListener(globalThis.window, 'mousemove', (event) => {
         handleValue(event);
     });
-    useEventListener(window, 'mouseup', () => {
+    useEventListener(globalThis.window, 'mouseup', () => {
         thumbDragged.current = false;
         if (bodyNoSelect)
             removeNoSelect();
@@ -1518,5 +1689,5 @@ const XYPad = forwardRef((_a, ref) => {
                     } }, thumbProps)) }, areaProps)) }) })));
 });
 
-export { AnimationCanvas, AnimationKnob, BlackKey, DragObserver, KeyLabel, Knob, NumberInput, Piano, Scale, ScaleOption, Shortcuts, Slider, SliderThumb, SliderTrack, SliderValuesProvider, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, defaultLength, defaultThickness, defaultThumbSize, useDisabled, useMax, useMin, useReverse, useSkew, useStep, useVertical };
+export { AnimationCanvas, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NumberInput, Piano, Scale, ScaleOption, Shortcuts, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, useSliderContext };
 //# sourceMappingURL=index.js.map