@tremolo-ui/react 0.0.9 → 0.0.10

package/dist/esm/types/components/XYPad/index.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { InputEventOption } from '@tremolo-ui/functions';
+/** @category XYPad */
 export interface ValueOptions {
     value: number;
     min: number;
@@ -16,6 +17,7 @@ export interface ValueOptions {
      */
     keyboard?: InputEventOption | null;
 }
+/** @category XYPad */
 export interface XYPadProps {
     x: ValueOptions;
     y: ValueOptions;
@@ -26,12 +28,14 @@ export interface XYPadProps {
     /** \<XYPadThumb /> | \<XYPadArea /> */
     children?: ReactElement | ReactElement[];
 }
+/** @category XYPad */
 export interface XYPadMethods {
     focus: () => void;
     blur: () => void;
 }
 /**
  * Simple XYPad
+ * @category XYPad
  */
 export declare const XYPad: React.ForwardRefExoticComponent<XYPadProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & React.RefAttributes<XYPadMethods>>;
 export * from './Thumb';

package/dist/esm/types/components/XYPad/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/XYPad/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAGZ,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAS9B,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACnC;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,YAAY,CAAA;IACf,CAAC,EAAE,YAAY,CAAA;IAEf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAaD;;GAEG;AACH,eAAO,MAAM,KAAK,sMA0OjB,CAAA;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/XYPad/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAGZ,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAS9B,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACnC;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,YAAY,CAAA;IACf,CAAC,EAAE,YAAY,CAAA;IAEf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,sMA0OjB,CAAA;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}

package/dist/esm/types/hooks/useAnimationFrame.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+export declare const useAnimationFrame: (callback?: () => void, deps?: DependencyList) => void;
+//# sourceMappingURL=useAnimationFrame.d.ts.map

package/dist/esm/types/hooks/useAnimationFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationFrame.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimationFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAA;AAEtE,eAAO,MAAM,iBAAiB,iCAEtB,cAAc,SAarB,CAAA"}

package/dist/esm/types/hooks/useDrag.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    threshold?: number;
+    onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+}
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+export declare function useDrag<T extends Element>({ threshold, onDrag, onDragStart, onDragEnd, }: Props): [
+    (div: EventTarget | null) => void,
+    (event: React.PointerEvent<T>) => void
+];
+export {};
+//# sourceMappingURL=useDrag.d.ts.map

package/dist/esm/types/hooks/useDrag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,GAAG;IACT,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAmEA"}

package/dist/esm/types/hooks/useRefCallbackEvent.d.ts

@@ -1,5 +1,2 @@
-type Options = boolean | AddEventListenerOptions;
-type CallbackFunc = (div: EventTarget | null) => void;
-export declare function useRefCallbackEvent<K extends keyof DocumentEventMap>(event: K, handler: (event: DocumentEventMap[K]) => void, options?: Options, deps?: React.DependencyList): CallbackFunc;
-export {};
+export declare function useRefCallbackEvent<K extends keyof DocumentEventMap>(event: K, handler: (event: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions, deps?: React.DependencyList): (div: EventTarget | null) => void;
 //# sourceMappingURL=useRefCallbackEvent.d.ts.map

package/dist/esm/types/hooks/useRefCallbackEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRefCallbackEvent.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useRefCallbackEvent.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG,OAAO,GAAG,uBAAuB,CAAA;AAChD,KAAK,YAAY,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;AAErD,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAClE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7C,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,YAAY,CAAA"}
+{"version":3,"file":"useRefCallbackEvent.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useRefCallbackEvent.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAClE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,EAC3C,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA"}

package/dist/styles/index.css

@@ -56,31 +56,119 @@
   color: #eee;
 }
 
-.tremolo-number-input {
-  display: inline-block;
-  background-color: inherit;
-  font: inherit;
-  margin: 0px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 10px;
-  padding-right: 10px;
+.tremolo-number-input-wrapper {
+  --tremolo-number-input-border-radius: 4px;
+  --tremolo-number-input-stepper-width: 20px;
+
+  display: inline-flex;
+  flex-direction: row;
+  position: relative;
+
   border-style: solid;
   border-width: 1px;
   border-color: #bbb;
-  border-radius: 4px;
-  outline: 0px;
-  transition: all 0.1s linear;
-  appearance: textfield;
+  border-radius: var(--tremolo-number-input-border-radius);
+
+  width: 140px;
+  height: min-content;
 
   &:hover {
     border-color: var(--tremolo-theme-color);
   }
 
-  &:focus {
+  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
+    border-color: #f34343;
+  }
+
+  &:focus-within {
     border-color: var(--tremolo-theme-color);
     box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
   }
+
+  &[data-stepper='false'] {
+    --tremolo-number-input-stepper-width: 0px;
+  }
+}
+
+.tremolo-number-input {
+  display: block;
+  width: calc(100% - 20px - var(--tremolo-number-input-stepper-width));
+  background-color: inherit;
+  font: inherit;
+  padding: 6px 10px;
+
+  margin: 0;
+  border: none;
+  outline: none;
+  appearance: textfield;
+}
+
+.tremolo-number-input-stepper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--tremolo-number-input-stepper-width);
+  transition: all 0.1s linear;
+
+  &[data-dynamic='true'] {
+    opacity: 0;
+    transform: translateX(40%);
+  }
+}
+
+.tremolo-number-input-wrapper:hover .tremolo-number-input-stepper {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.tremolo-number-input-increment-stepper {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: #ccc;
+  font-size: calc(0.75rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 0%;
+  max-height: 50%;
+  user-select: none;
+  cursor: pointer;
+  border-top-right-radius: var(--tremolo-number-input-border-radius);
+
+  &[aria-disabled='false']:active {
+    background-color: #3443560e;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-number-input-decrement-stepper {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: #ccc;
+  border-top: 1px solid #ccc;
+  font-size: calc(0.75rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 0%;
+  max-height: 50%;
+  user-select: none;
+  cursor: pointer;
+  border-bottom-right-radius: var(--tremolo-number-input-border-radius);
+
+  &[aria-disabled='false']:active {
+    background-color: #3443560e;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-piano {
@@ -184,6 +272,14 @@
 
   position: relative;
 
+  &[data-vertical='false'] {
+    min-width: 50px;
+  }
+
+  &[data-vertical='true'] {
+    min-height: 50px;
+  }
+
   &:hover {
     --active: #6387e9;
     --inactive: #e0e0e0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -66,6 +66,7 @@
     "@storybook/test": "^8.3.3",
     "@testing-library/react": "^16.0.1",
     "jest-environment-jsdom": "^29.7.0",
+    "jotai": "^2.12.1",
     "react": "^18.3.1",
     "react-component-benchmark": "^2.0.0",
     "react-dom": "^18.3.1",
@@ -73,11 +74,13 @@
     "tone": "^15.0.4"
   },
   "peerDependencies": {
+    "@tremolo-ui/functions": "0.0.10",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x"
   },
   "dependencies": {
     "@tremolo-ui/functions": "file:../functions",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "zustand": "^5.0.3"
   }
 }

package/src/components/AnimationCanvas/index.tsx

@@ -24,14 +24,18 @@ function setDprConfig(
   canvas.style.height = `${height}px`
 }
 
+/** @category AnimationCanvas */
 export type DrawFunction = (
+  // TODO: saving scale and translate
+  // context: Omit<CanvasRenderingContext2D, 'save' | 'restore' | 'scale'>,
   context: CanvasRenderingContext2D,
   width: MutableRefObject<number>,
   height: MutableRefObject<number>,
   count: number,
 ) => void
 
-interface CommonProps {
+/** @category AnimationCanvas */
+export interface CommonProps {
   /**
    * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
    */
@@ -40,22 +44,26 @@ interface CommonProps {
   draw: DrawFunction
 }
 
-interface AbsoluteSizingProps {
+/** @category AnimationCanvas */
+export interface AbsoluteSizingProps {
   width?: number
   height?: number
 }
 
-interface RelativeSizingProps {
+/** @category AnimationCanvas */
+export interface RelativeSizingProps {
   relativeSize?: boolean
   reduceFlickering?: boolean
 }
 
+/** @category AnimationCanvas */
 export type AnimationCanvasProps = AbsoluteSizingProps &
   RelativeSizingProps &
   CommonProps
 
 /**
  * A simple animatable canvas with requestAnimationFrame()
+ * @category AnimationCanvas
  */
 export function AnimationCanvas(
   props: AbsoluteSizingProps &
@@ -108,7 +116,7 @@ export function AnimationCanvas({
     const canvas = canvasRef.current
     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
@@ -122,6 +130,7 @@ export function AnimationCanvas({
         // 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 = {} as DrawingContext
           for (const prop of drawingState) {
             ;(contextMemo[prop] as DrawingStateValue) = context[prop]

package/src/components/AnimationKnob/index.tsx

@@ -15,11 +15,12 @@ import {
   InputEventOption,
 } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
+import { useDrag } from '../../hooks/useDrag'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 import { AnimationCanvas, DrawFunction } from '../AnimationCanvas'
 
+/** @category AnimationKnob */
 export type AnimationKnobProps = {
   // required
   value: number
@@ -77,6 +78,7 @@ export type AnimationKnobProps = {
 
 /**
  * simple rotary Knob.
+ * @category AnimationKnob
  */
 export function AnimationKnob({
   value,
@@ -107,35 +109,21 @@ export function AnimationKnob({
 }: AnimationKnobProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof AnimationKnobProps>) {
   // -- state and ref ---
-  // const [privateValue, setPrivateValue] = useState(value);
-  const dragOffsetY = useRef<number | undefined>(undefined)
+  const valueRef = useRef(0)
 
   // --- interpret props ---
-  // const percent = normalizeValue(value, min, max, skew)
-
   const isRelativeSize =
     typeof (size ?? width) == 'string' || typeof height == 'string'
 
-  const handleEvent = (
-    event:
-      | MouseEvent
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | TouchEvent,
-  ) => {
-    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 onDrag = useCallback(
+    (_x: number, y: number) => {
+      if (!onChange) return
+      const v = rawValue(valueRef.current - y / 100, min, max, skew)
       const v2 = clamp(stepValue(v, step), min, max)
-      if (onChange) onChange(v2)
-    }
-  }
+      onChange(v2)
+    },
+    [max, min, onChange, skew, step],
+  )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -159,6 +147,17 @@ export function AnimationKnob({
   )
 
   // --- hooks ---
+  const [touchMoveRefCallback, pointerDownHandler] = useDrag<HTMLDivElement>({
+    onDrag: onDrag,
+    onDragStart: () => {
+      valueRef.current = normalizeValue(value, min, max, skew)
+      if (bodyNoSelect) addNoSelect()
+    },
+    onDragEnd: () => {
+      if (bodyNoSelect) removeNoSelect()
+    },
+  })
+
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
     (event) => {
@@ -178,20 +177,6 @@ export function AnimationKnob({
     [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 (
     <div
       className={clsx('tremolo-animation-knob', className)}
@@ -212,10 +197,7 @@ export function AnimationKnob({
         WebkitTapHighlightColor: 'transparent',
         ...style,
       }}
-      onPointerDown={(event) => {
-        dragOffsetY.current = event.screenY
-        handleEvent(event)
-      }}
+      onPointerDown={pointerDownHandler}
       onDoubleClick={() => {
         if (enableDoubleClickDefault && onChange) {
           onChange(defaultValue)

package/src/components/DragObserver/index.tsx

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode, useRef } from 'react'
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
 
-import { useEventListener } from '../../hooks/useEventListener'
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { useDrag } from '../../hooks/useDrag'
 
+/** @category DragObserver */
 export interface DragObserverProps<T extends ElementType> {
   /**
    * React.ElementType
@@ -17,75 +17,37 @@ export interface DragObserverProps<T extends ElementType> {
   threshold?: number
 
   children?: ReactNode
-  onDrag: (x: number, y: number) => void
+  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void
   onDragStart?: () => void
   onDragEnd?: () => void
 }
 
+/** @category DragObserver */
 export function DragObserver<T extends ElementType = 'div'>(
   props: DragObserverProps<T> &
     Omit<ComponentPropsWithoutRef<T>, keyof DragObserverProps<T>>,
 ) {
   const {
+    as: Component = 'div',
+    threshold = 1,
     children,
     onDrag,
     onDragStart,
     onDragEnd,
-    as: Component = 'div',
     ...attributes
   } = props
 
-  const dragOffsetX = useRef<number | undefined>(undefined)
-  const dragOffsetY = useRef<number | undefined>(undefined)
-
-  const handleEvent = (
-    event:
-      | MouseEvent
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
-      | TouchEvent,
-  ) => {
-    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?.()
+  const [refCallback, pointerDownHandler] = useDrag({
+    threshold: threshold,
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
   })
 
   return (
     <Component
-      ref={touchMoveRefCallback}
-      onPointerDown={(event) => {
-        dragOffsetX.current = event.screenX
-        dragOffsetY.current = event.screenY
-        handleEvent(event)
-        onDragStart?.()
-      }}
+      ref={refCallback}
+      onPointerDown={pointerDownHandler}
       {...attributes}
     >
       {children}

package/src/components/Knob/index.tsx

@@ -10,10 +10,11 @@ import {
   stepValue,
 } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
+import { useDrag } from '../../hooks/useDrag'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
+/** @category Knob */
 export interface KnobProps {
   // required
   value: number
@@ -69,6 +70,7 @@ export interface KnobProps {
   onChange?: (value: number) => void
 }
 
+/** @category Knob */
 export function Knob({
   value,
   min,
@@ -93,8 +95,7 @@ export function Knob({
   classes,
   ...props
 }: KnobProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof KnobProps>) {
-  // -- state and ref ---
-  const dragOffsetY = useRef<number | undefined>(undefined)
+  const valueRef = useRef(0)
 
   // --- interpret props ---
   const padding = 8 // %
@@ -105,27 +106,15 @@ export function Knob({
   const s = normalizeValue(startValue, min, max, skew)
 
   // --- internal functions ---
-  const handleEvent = (
-    event:
-      | MouseEvent
-      | React.MouseEvent<HTMLOrSVGElement, MouseEvent>
-      | TouchEvent,
-  ) => {
-    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 onDrag = useCallback(
+    (_x: number, y: number) => {
+      if (!onChange || readonly) return
+      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: React.KeyboardEvent<HTMLOrSVGElement>) => {
@@ -149,6 +138,17 @@ export function Knob({
   )
 
   // --- hooks ---
+  const [touchMoveRefCallback, pointerDownHandler] = useDrag<SVGElement>({
+    onDrag: onDrag,
+    onDragStart: () => {
+      valueRef.current = normalizeValue(value, min, max, skew)
+      if (bodyNoSelect) addNoSelect()
+    },
+    onDragEnd: () => {
+      if (bodyNoSelect) removeNoSelect()
+    },
+  })
+
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
     (event) => {
@@ -168,20 +168,6 @@ export function Knob({
     [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
@@ -211,10 +197,7 @@ export function Knob({
       aria-valuemax={max}
       aria-disabled={disabled}
       aria-readonly={readonly}
-      onPointerDown={(event) => {
-        dragOffsetY.current = event.screenY
-        handleEvent(event)
-      }}
+      onPointerDown={pointerDownHandler}
       onDoubleClick={() => {
         if (enableDoubleClickDefault && onChange) {
           onChange(defaultValue)