@tremolo-ui/react 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": false,
@@ -41,8 +41,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/dom": "^0.7.0",
-    "@tremolo-ui/functions": "^0.7.0"
+    "@tremolo-ui/dom": "^0.8.0",
+    "@tremolo-ui/functions": "^0.8.0"
   },
   "files": [
     "dist",

package/src/components/DropZone/index.tsx

@@ -39,7 +39,8 @@ export interface DropZoneProps {
   onDrop?: (files: File[], event: DragEvent) => void
   /**
    * Called with the dropped files that do not match `accept`, so that the
-   * reason can be shown.
+   * reason can be shown. It comes after `onDrop` for the same drop, so a list
+   * of rejected files can be cleared in `onDrop` and filled here.
    */
   onReject?: (files: File[], event: DragEvent) => void
 

package/src/components/FileInput/index.tsx

@@ -7,9 +7,7 @@ import {
   useMemo,
 } from 'react'
 
-import { matchesAccept } from '@tremolo-ui/dom'
-
-import { visuallyHiddenStyle } from '../_util/visually-hidden'
+import { partitionByAccept, visuallyHiddenStyle } from '@tremolo-ui/dom'
 
 import { FileInputProvider } from './context'
 import { Trigger } from './Trigger'
@@ -47,7 +45,8 @@ export interface FileInputProps {
   /**
    * Called with the files that were picked and do not match `accept`, so that
    * the reason can be shown. Given alongside `onChange` when a selection held
-   * both.
+   * both, and after it, so a list of rejected files can be cleared in
+   * `onChange` and filled here.
    */
   onReject?: (files: File[]) => void
 
@@ -92,22 +91,18 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     const context = useMemo(() => ({ inputId, disabled }), [inputId, disabled])
 
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
-      const picked = Array.from(event.target.files ?? [])
+      const { accepted, rejected } = partitionByAccept(
+        Array.from(event.target.files ?? []),
+        accept,
+      )
 
       // Picking the same file twice fires no second change event while the
       // value is still on the input, so it is cleared as soon as it is read.
       // Nothing is lost: the files are already in hand.
       event.target.value = ''
 
-      const accepted: File[] = []
-      const rejected: File[] = []
-      for (const file of picked) {
-        if (matchesAccept(file, accept)) accepted.push(file)
-        else rejected.push(file)
-      }
-
-      if (rejected.length > 0) onReject?.(rejected)
       if (accepted.length > 0) onChange?.(accepted)
+      if (rejected.length > 0) onReject?.(rejected)
     }
 
     return (

package/src/components/Knob/ActiveLine.tsx

@@ -1,8 +1,10 @@
 import { SVGProps } from 'react'
 
+import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
 import { useCheckPlacement } from '../_util/Placement'
 
-import { arcPath, arcRadius, useKnobContext } from './context'
+import { useKnobContext } from './context'
 
 export function ActiveLine({
   stroke = 'currentColor',
@@ -15,12 +17,12 @@ export function ActiveLine({
   const r2 = useKnobContext((s) => s.r2)
   const r3 = useKnobContext((s) => s.r3)
 
-  const radius = arcRadius(strokeWidth)
+  const radius = knobArcRadius(strokeWidth)
 
   return (
     <path
       className={className}
-      d={arcPath(r2, r3, radius)}
+      d={knobArcPath(r2, r3, radius)}
       fill="none"
       stroke={stroke}
       strokeWidth={strokeWidth}

package/src/components/Knob/InactiveLine.tsx

@@ -1,8 +1,10 @@
 import { SVGProps } from 'react'
 
+import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
 import { useCheckPlacement } from '../_util/Placement'
 
-import { arcPath, arcRadius, useKnobContext } from './context'
+import { useKnobContext } from './context'
 
 export function InactiveLine({
   stroke = 'currentColor',
@@ -21,14 +23,14 @@ export function InactiveLine({
   const r3 = useKnobContext((s) => s.r3)
   const r4 = useKnobContext((s) => s.r4)
 
-  const radius = arcRadius(strokeWidth)
+  const radius = knobArcRadius(strokeWidth)
 
   return (
     <>
       {startValue > min && (
         <path
           className={className}
-          d={arcPath(r1, r2, radius)}
+          d={knobArcPath(r1, r2, radius)}
           fill="none"
           stroke={stroke}
           strokeWidth={strokeWidth}
@@ -38,7 +40,7 @@ export function InactiveLine({
       {startValue < max && (
         <path
           className={className}
-          d={arcPath(r3, r4, radius)}
+          d={knobArcPath(r3, r4, radius)}
           fill="none"
           stroke={stroke}
           strokeWidth={strokeWidth}

package/src/components/Knob/SVGRoot.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, SVGProps } from 'react'
 
-import { Placement } from '../_util/Placement'
+import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
 
-import { viewBoxSize } from './context'
+import { Placement } from '../_util/Placement'
 
 export interface KnobSVGRootProps {
   /**
@@ -19,7 +19,7 @@ export function SVGRoot({
 }: KnobSVGRootProps & Omit<SVGProps<SVGSVGElement>, keyof KnobSVGRootProps>) {
   return (
     <svg
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      viewBox={`0 0 ${KNOB_VIEWBOX_SIZE} ${KNOB_VIEWBOX_SIZE}`}
       style={{
         display: 'block',
         ...style,

package/src/components/Knob/Thumb.tsx

@@ -1,10 +1,11 @@
 import { SVGProps } from 'react'
 
+import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
 import { clamp } from '@tremolo-ui/functions'
 
 import { useCheckPlacement } from '../_util/Placement'
 
-import { useKnobContext, viewBoxSize } from './context'
+import { useKnobContext } from './context'
 
 export interface KnobThumbProps {
   /**
@@ -68,7 +69,7 @@ export function Thumb({
       <line
         className={classes?.thumbLine}
         x1="50%"
-        y1={`${(viewBoxSize - clamp(thumbSize, 0, 100)) / 2}%`}
+        y1={`${(KNOB_VIEWBOX_SIZE - clamp(thumbSize, 0, 100)) / 2}%`}
         x2="50%"
         y2={`${thumbLineLength}%`}
         stroke={thumbLine}

package/src/components/Knob/context.tsx

@@ -1,9 +1,7 @@
 import { createContext, useContext } from 'react'
 
-import { radian, type Scale } from '@tremolo-ui/functions'
-
-export const viewBoxSize = 100
-export const center = viewBoxSize / 2
+import { type KnobAngles } from '@tremolo-ui/dom'
+import { type Scale } from '@tremolo-ui/functions'
 
 export type KnobConfig = {
   value: number
@@ -16,76 +14,7 @@ export type KnobConfig = {
   angleRange: number
 }
 
-export type KnobContextValue = KnobConfig & {
-  /** normalized value */
-  p: number
-  /** ロータリー開始位置 */
-  r1: number
-  /** activeLine の開始位置 */
-  r2: number
-  /** activeLine の終了位置 */
-  r3: number
-  /** ロータリー終了位置 */
-  r4: number
-}
-
-/**
- * 角度から円弧上の点を求める。
- *
- * 半径は線の太さの分だけ内側に取る必要があるが、太さは ActiveLine / InactiveLine が
- * それぞれ持つため、座標はストアで先に計算せず各コンポーネント側で求める。
- */
-export function pointOnArc(angle: number, radius: number) {
-  return {
-    x: center + radius * Math.cos(radian(angle - 90)),
-    y: center + radius * Math.sin(radian(angle - 90)),
-  }
-}
-
-/** 線の太さが viewBox からはみ出さないようにした半径 */
-export function arcRadius(strokeWidth: number | string | undefined) {
-  const width =
-    typeof strokeWidth === 'number'
-      ? strokeWidth
-      : Number.parseFloat(String(strokeWidth))
-  return Number.isFinite(width) ? center - width / 2 : center
-}
-
-/** Build an SVG path for an arc, splitting full turns into drawable segments. */
-export function arcPath(startAngle: number, endAngle: number, radius: number) {
-  const start = pointOnArc(startAngle, radius)
-  const sweep = endAngle - startAngle
-  const segmentCount = Math.max(1, Math.ceil(Math.abs(sweep) / 180))
-  const segmentSweep = sweep / segmentCount
-  let path = `M ${start.x} ${start.y}`
-
-  for (let i = 1; i <= segmentCount; i += 1) {
-    const end = pointOnArc(startAngle + segmentSweep * i, radius)
-    path += ` A ${radius} ${radius} 0 0 ${segmentSweep >= 0 ? 1 : 0} ${end.x} ${end.y}`
-  }
-
-  return path
-}
-
-/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
-export function calcAngles({
-  value,
-  min,
-  max,
-  scale,
-  startValue,
-  angleRange,
-}: KnobConfig) {
-  const p = scale.normalize(value, min, max)
-  const s = scale.normalize(startValue, min, max)
-
-  const r1 = -angleRange / 2
-  const r2 = r1 + Math.min(p, s) * angleRange
-  const r3 = r1 + Math.max(p, s) * angleRange
-  const r4 = angleRange / 2
-
-  return { p, r1, r2, r3, r4 }
-}
+export type KnobContextValue = KnobConfig & KnobAngles
 
 const KnobContext = /* @__PURE__ */ createContext<KnobContextValue | null>(null)
 

package/src/components/Knob/index.tsx

@@ -11,10 +11,17 @@ import {
 
 import {
   applyDelta,
+  arrowKeyDirection,
   type AxisOptions,
+  cssLength,
+  DEFAULT_DRAG_SENSITIVITY,
+  DEFAULT_KEYBOARD_OPTIONS,
+  DEFAULT_WHEEL_OPTIONS,
   type InputEventOption,
+  knobAngles,
   type ModifierValue,
   selectModifier,
+  wheelDirection,
   type XY,
 } from '@tremolo-ui/dom'
 import { linearScale, type Scale, type ValueRange } from '@tremolo-ui/functions'
@@ -23,15 +30,9 @@ import { useComposedRefs } from '../../compose-refs'
 import { useCheckSteps } from '../../hooks/_internal/useCheckSteps'
 import { useDragValue } from '../../hooks/useDragValue'
 import { useWheel } from '../../hooks/useWheel'
-import {
-  DEFAULT_DRAG_SENSITIVITY,
-  DEFAULT_KEYBOARD_OPTIONS,
-  DEFAULT_WHEEL_OPTIONS,
-} from '../../input-event'
-import { cssLength } from '../_util/css-length'
 
 import { ActiveLine } from './ActiveLine'
-import { calcAngles, KnobProvider } from './context'
+import { KnobProvider } from './context'
 import { InactiveLine } from './InactiveLine'
 import { SVGRoot } from './SVGRoot'
 import { Thumb } from './Thumb'
@@ -265,12 +266,10 @@ export const Root = /* @__PURE__ */ forwardRef<KnobMethods, Props>(
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLOrSVGElement>) => {
         if (!keyboard || !onChange || inactive) return
-        const key = event.key
-        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
-          event.preventDefault()
-          const direction = key === 'ArrowRight' || key === 'ArrowUp' ? 1 : -1
-          onChange(applyDelta(value, direction, keyboard, range, event))
-        }
+        const direction = arrowKeyDirection(event.key)
+        if (direction === null) return
+        event.preventDefault()
+        onChange(applyDelta(value, direction, keyboard, range, event))
       },
       [keyboard, onChange, inactive, value, range],
     )
@@ -304,9 +303,13 @@ export const Root = /* @__PURE__ */ forwardRef<KnobMethods, Props>(
 
     const wheelRefCallback = useWheel<HTMLElement>((event) => {
       if (!wheel || inactive) return
+      // A notch the knob does not read — a sideways scroll — is left to the
+      // page rather than swallowed.
+      const direction = wheelDirection(event)
+      if (direction === null) return
       event.preventDefault()
-      if (!onChange || event.deltaY === 0) return
-      onChange(applyDelta(value, -Math.sign(event.deltaY), wheel, range, event))
+      if (!onChange) return
+      onChange(applyDelta(value, direction, wheel, range, event))
     }, WHEEL_OPTIONS)
 
     // Composed once, so React attaches the refs a single time instead of
@@ -319,7 +322,7 @@ export const Root = /* @__PURE__ */ forwardRef<KnobMethods, Props>(
 
     const context = useMemo(() => {
       const config = { value, min, max, step, scale, startValue, angleRange }
-      return { ...config, ...calcAngles(config) }
+      return { ...config, ...knobAngles(config) }
     }, [value, min, max, step, scale, startValue, angleRange])
 
     useImperativeHandle(forwardedRef, () => {

package/src/components/NumberInput/InputField.tsx

@@ -7,6 +7,12 @@ import {
   useState,
 } from 'react'
 
+import {
+  caretAtDecimalOffset,
+  caretDecimalOffset,
+  numberSpan,
+} from '@tremolo-ui/dom'
+
 import { useComposedRefs } from '../../compose-refs'
 
 import { useNumberInputContext } from './context'
@@ -17,25 +23,6 @@ type Props = Omit<
   'type' | 'value' | 'defaultValue'
 >
 
-/** The leading number of the displayed text, whatever the format put around it. */
-const NUMBER_PREFIX = /^\s*-?[\d.,]*/
-
-const numberEnd = (text: string) =>
-  text.match(NUMBER_PREFIX)?.[0].length ?? text.length
-
-/**
- * The index the caret is measured against: the decimal point, or where one
- * would go if the number has none.
- *
- * Measuring from an end instead would slide the caret across a digit whenever
- * the number changed length — `9.9` to `10.0` gains a character in front, `10`
- * to `9` loses one — which is exactly what stepping does.
- */
-const decimalAnchor = (text: string) => {
-  const dot = text.indexOf('.')
-  return dot === -1 ? numberEnd(text) : dot
-}
-
 /**
  * The text field of a `NumberInput`, and the only place the value can be typed.
  *
@@ -47,7 +34,7 @@ const decimalAnchor = (text: string) => {
  */
 export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
   function InputField(
-    { className, style, onFocus, onBlur, onKeyDown, ...props },
+    { className, style, onChange, onFocus, onBlur, onKeyDown, ...props },
     forwardedRef,
   ) {
     const {
@@ -87,10 +74,8 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
       if (selectOnFocus === 'all') {
         input.setSelectionRange(0, input.value.length)
       } else {
-        input.setSelectionRange(
-          0,
-          input.value.match(NUMBER_PREFIX)?.[0].length ?? 0,
-        )
+        const span = numberSpan(input.value)
+        if (span) input.setSelectionRange(span.start, span.end)
       }
       // Deliberately not re-run as the text changes: that would drag the
       // selection back over what the user is typing.
@@ -114,8 +99,7 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
       // caret has not moved either, since the key press was prevented.
       if (!input || input.value === pending.from) return
 
-      const place = decimalAnchor(input.value) + pending.offset
-      const caret = Math.max(0, Math.min(place, numberEnd(input.value)))
+      const caret = caretAtDecimalOffset(input.value, pending.offset)
       input.setSelectionRange(caret, caret)
     })
 
@@ -154,6 +138,7 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
           // stepped one no longer means anything.
           caretAfterStep.current = null
           setDraft(event.currentTarget.value)
+          onChange?.(event)
         }}
         onFocus={(event) => {
           setFocused(true)
@@ -185,7 +170,7 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
             const input = event.currentTarget
             if (keepCaretOnStep && input.selectionStart !== null) {
               caretAfterStep.current = {
-                offset: input.selectionStart - decimalAnchor(input.value),
+                offset: caretDecimalOffset(input.value, input.selectionStart),
                 from: input.value,
               }
             }

package/src/components/NumberInput/Stepper.tsx

@@ -1,14 +1,15 @@
-import { ComponentPropsWithoutRef, forwardRef, useMemo, useRef } from 'react'
-
 import {
-  applyDelta,
-  type InputEventOption,
-  mapModifier,
-  selectModifier,
-} from '@tremolo-ui/dom'
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { createStepperDrag, type StepperDragInstance } from '@tremolo-ui/dom'
 
 import { useComposedRefs } from '../../compose-refs'
-import { useDrag } from '../../hooks/useDrag'
 
 import { StepperProvider, useNumberInputContext } from './context'
 
@@ -16,7 +17,8 @@ type Props = ComponentPropsWithoutRef<'div'>
 
 /**
  * The area the steppers sit in, and a drag handle in its own right: dragging it
- * up and down moves the value one `step` every `drag` pixels.
+ * up and down moves the value one `step` every `drag` pixels. The counting is
+ * `createStepperDrag` in the core.
  *
  * The drag lives here rather than on `InputField` because `createDrag` turns
  * off text selection on whatever element it is attached to.
@@ -25,7 +27,6 @@ export const Stepper = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   function Stepper({ className, style, children, ...props }, forwardedRef) {
     const {
       value,
-      step,
       disabled,
       readonly,
       drag,
@@ -34,100 +35,51 @@ export const Stepper = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
       rawRange,
       changeValue,
     } = useNumberInputContext()
-    const inactive = disabled || readonly
-
-    /**
-     * The sensitivity as an amount per `drag` pixels, so that the drag goes
-     * through the same `applyDelta` the wheel and the arrow keys do. Carrying
-     * the modifier map over rather than resolving it here is what keeps `step`
-     * out of the pipeline for a modifier entry — naming one is a request to move
-     * off the grid.
-     */
-    const dragOptions = useMemo(
-      () =>
-        mapModifier(dragSensitivity, (factor): InputEventOption => [
-          'raw',
-          step * factor,
-        ]),
-      [dragSensitivity, step],
-    )
+    // Only attached while it can do something: `createDrag` puts
+    // `touch-action: none` on the element, and a stepper that cannot be
+    // dragged has no reason to stop the page scrolling under a finger.
+    const enabled = drag !== null && !disabled && !readonly
 
-    /**
-     * Set once the drag has actually moved the value, so that the press-and-hold
-     * repeat of a stepper stands down and leaves the value to the drag. A ref,
-     * because it is read from inside the repeat rather than rendered.
-     */
-    const draggingRef = useRef(false)
-    /**
-     * Where the drag started, taken on the first move rather than on pointer
-     * down: the steppers act on pointer down, so by then the value may already
-     * have been nudged once, and the drag should carry on from there.
-     */
-    const originRef = useRef<{ y: number; value: number } | null>(null)
-    /**
-     * Which modifier the drag is currently counting at, and where the previous
-     * event was — a key produces no pointer event of its own, so a change is
-     * only seen on the next move and has to be dated back to the one before it.
-     */
-    const factorRef = useRef<number>(1)
-    const previousYRef = useRef(0)
+    // See useDrag for why the node is held in state rather than a ref.
+    const [node, setNode] = useState<HTMLDivElement | null>(null)
+    const instanceRef = useRef<StepperDragInstance | null>(null)
+    const latest = useRef({ value, changeValue })
+    const options = {
+      range: rawRange,
+      pixels: drag ?? 1,
+      sensitivity: dragSensitivity,
+      pointerLock,
+    }
+    const optionsRef = useRef(options)
 
-    const dragRefCallback = useDrag<HTMLDivElement>({
-      threshold: 1,
-      cursor: inactive ? undefined : 'ns-resize',
-      pointerLock: inactive ? false : pointerLock,
-      onDragStart: (state) => {
-        originRef.current = null
-        draggingRef.current = false
-        factorRef.current = selectModifier(dragSensitivity, state.event).value
-      },
-      onDrag: (_x, y, _dx, _dy, state) => {
-        if (inactive || drag === null) return
-        if (!originRef.current) {
-          originRef.current = { y, value }
-          previousYRef.current = y
-          return
-        }
+    // Runs after every render.
+    useEffect(() => {
+      latest.current = { value, changeValue }
+      optionsRef.current = options
+      instanceRef.current?.update(options)
+    })
 
-        // Pressing or releasing the key mid-drag must not move the value, so the
-        // travel so far is folded into the origin and measuring starts again
-        // from the previous event: that event's own distance belongs to the new
-        // sensitivity.
-        const factor = selectModifier(dragSensitivity, state.event).value
-        if (factor !== factorRef.current) {
-          originRef.current = { y: previousYRef.current, value }
-          factorRef.current = factor
-        }
-        previousYRef.current = y
+    useEffect(() => {
+      if (!node || !enabled) return
+      const instance = createStepperDrag(node, {
+        ...optionsRef.current,
+        getValue: () => latest.current.value,
+        onChange: (next) => latest.current.changeValue(next),
+      })
+      instanceRef.current = instance
+      return () => {
+        instanceRef.current = null
+        instance.destroy()
+      }
+    }, [node, enabled])
 
-        // Dragging up raises the value, as on a knob.
-        const steps = Math.round(-(y - originRef.current.y) / drag)
-        if (steps === 0) return
-        draggingRef.current = true
-        // The same pipeline the wheel and the arrow keys use. Counting from where
-        // the drag started keeps it from accumulating a rounding error.
-        changeValue(
-          applyDelta(
-            originRef.current.value,
-            steps,
-            dragOptions,
-            rawRange,
-            state.event,
-          ),
-        )
-      },
-      onDragEnd: () => {
-        draggingRef.current = false
-      },
-    })
+    const composedRef = useComposedRefs<HTMLDivElement>(forwardedRef, setNode)
 
-    const composedRef = useComposedRefs<HTMLDivElement>(
-      forwardedRef,
-      drag !== null && !inactive ? dragRefCallback : undefined,
+    const context = useMemo(
+      () => ({ moved: () => instanceRef.current?.moved() ?? false }),
+      [],
     )
 
-    const context = useMemo(() => ({ draggingRef }), [])
-
     return (
       <StepperProvider value={context}>
         <div ref={composedRef} className={className} style={style} {...props}>

package/src/components/NumberInput/StepperButton.tsx

@@ -41,13 +41,12 @@ export function StepperButton({
     useNumberInputContext()
   const stepper = useStepperContext()
 
-  // Not memoized: the callback reads `draggingRef.current`, which the compiler
-  // cannot line up with a manual dependency list. `useLongPress` only ever
-  // calls it through a ref, so a fresh identity per render costs nothing.
+  // Not memoized: `useLongPress` only ever calls it through a ref, so a fresh
+  // identity per render costs nothing.
   const press = useLongPress(() => {
     // Once the pointer has actually travelled, the drag on `Stepper` owns the
     // value; repeating on top of it would move it twice.
-    if (stepper?.draggingRef.current) return
+    if (stepper?.moved()) return
     nudge(direction, ['raw', step])
   })
 

package/src/components/NumberInput/context.tsx

@@ -103,7 +103,8 @@ export function useNumberInputContext<T>(
 
 /** Set by `Stepper` once a drag has actually moved, so the steppers stand down. */
 export type StepperContextValue = {
-  draggingRef: RefObject<boolean>
+  /** Whether the drag in progress has moved the value. */
+  moved: () => boolean
 }
 
 const StepperContext =