@tremolo-ui/react 0.1.6 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -23,30 +23,26 @@
     "clean:sb": "rimraf ./storybook-static"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-vite": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "@testing-library/react": "^16.0.1",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "jest-environment-jsdom": "^29.7.0",
-    "jotai": "^2.12.1",
-    "react": "^19",
-    "react-dom": "^19",
-    "storybook": "^8.6.7",
-    "tone": "^15"
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "jest-environment-jsdom": "29.7.0",
+    "jotai": "2.20.2",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "storybook": "10.5.10",
+    "tone": "15.1.22",
+    "@storybook/addon-docs": "10.5.10"
   },
   "peerDependencies": {
     "react": "^18 ||^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/functions": "^0.1.6",
+    "@tremolo-ui/functions": "^0.2.1",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },
@@ -91,6 +87,8 @@
     "./styles/Knob.css": "./src/components/Knob/index.css",
     "./styles/NumberInput.css": "./src/components/NumberInput/index.css",
     "./styles/Piano.css": "./src/components/Piano/index.css",
+    "./styles/PointsEditor.css": "./src/components/PointsEditor/index.css",
+    "./styles/Slider.css": "./src/components/Slider/index.css",
     "./styles/XYPad.css": "./src/components/XYPad/index.css"
   }
 }

package/src/components/AnimationCanvas/index.tsx

@@ -15,7 +15,6 @@ import {
   setDprConfig,
 } from './canvas'
 
-/** @category AnimationCanvas */
 export type InitFunction = (
   context: CanvasRenderingContext2D,
   option: {
@@ -26,7 +25,6 @@ export type InitFunction = (
   },
 ) => void
 
-/** @category AnimationCanvas */
 export type DrawFunction = (
   context: CanvasRenderingContext2D,
   option: {
@@ -45,7 +43,6 @@ export type DrawFunction = (
   },
 ) => void
 
-/** @category AnimationCanvas */
 export interface CommonProps {
   draw: DrawFunction
   init?: InitFunction
@@ -56,26 +53,22 @@ export interface CommonProps {
   options?: CanvasRenderingContext2DSettings
 }
 
-/** @category AnimationCanvas */
 export interface AbsoluteSizingProps {
   width?: number
   height?: number
 }
 
-/** @category AnimationCanvas */
 export interface RelativeSizingProps {
   relativeSize?: boolean
   reduceFlickering?: boolean
 }
 
-/** @category AnimationCanvas */
 export type AnimationCanvasProps = CommonProps &
   AbsoluteSizingProps &
   RelativeSizingProps
 
 /**
  * A simple animatable canvas with requestAnimationFrame()
- * @category AnimationCanvas
  */
 export function AnimationCanvas(
   props: CommonProps &

package/src/components/DragObserver/index.tsx

@@ -1,8 +1,8 @@
 import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
 
 import { useDrag } from '../../hooks/useDrag'
+import { Override } from '../_util/type'
 
-/** @category DragObserver */
 export interface DragObserverProps<T extends ElementType> {
   /**
    * React.ElementType
@@ -17,23 +17,22 @@ export interface DragObserverProps<T extends ElementType> {
   threshold?: number
 
   children?: ReactNode
-  onDrag: (x: number, y: number, deltaX: number, deltaY: 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>>,
+  props: Override<DragObserverProps<T>, ComponentPropsWithoutRef<T>>,
 ) {
   const {
     as: Component = 'div',
     threshold = 1,
-    children,
     onDrag,
     onDragStart,
     onDragEnd,
+    children,
+    onPointerDown,
     ...attributes
   } = props
 
@@ -47,7 +46,10 @@ export function DragObserver<T extends ElementType = 'div'>(
   return (
     <Component
       ref={refCallback}
-      onPointerDown={pointerDownHandler}
+      onPointerDown={(e) => {
+        pointerDownHandler(e)
+        onPointerDown?.(e)
+      }}
       {...attributes}
     >
       {children}

package/src/components/Knob/ActiveLine.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import { SVGProps } from 'react'
+
+import { center, useKnobContext } from './context'
+
+export function ActiveLine({
+  stroke = 'currentColor',
+  strokeWidth = 6,
+  className,
+  ...props
+}: Omit<SVGProps<SVGPathElement>, 'd'>) {
+  const r2 = useKnobContext((s) => s.r2)
+  const r3 = useKnobContext((s) => s.r3)
+  const x2 = useKnobContext((s) => s.x2)
+  const y2 = useKnobContext((s) => s.y2)
+  const x3 = useKnobContext((s) => s.x3)
+  const y3 = useKnobContext((s) => s.y3)
+
+  return (
+    <path
+      className={clsx('tremolo-knob-active-line', className)}
+      d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3} ${y3}`}
+      fill="none"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      {...props}
+    />
+  )
+}

package/src/components/Knob/InactiveLine.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx'
+import { SVGProps } from 'react'
+
+import { center, useKnobContext } from './context'
+
+export function InactiveLine({
+  stroke = 'currentColor',
+  strokeWidth = 6,
+  className,
+  ...props
+}: Omit<SVGProps<SVGPathElement>, 'd'>) {
+  const min = useKnobContext((s) => s.min)
+  const max = useKnobContext((s) => s.max)
+  const startValue = useKnobContext((s) => s.startValue)
+
+  const r1 = useKnobContext((s) => s.r1)
+  const r2 = useKnobContext((s) => s.r2)
+  const r3 = useKnobContext((s) => s.r3)
+  const r4 = useKnobContext((s) => s.r4)
+  const x1 = useKnobContext((s) => s.x1)
+  const y1 = useKnobContext((s) => s.y1)
+  const x2 = useKnobContext((s) => s.x2)
+  const y2 = useKnobContext((s) => s.y2)
+  const x3 = useKnobContext((s) => s.x3)
+  const y3 = useKnobContext((s) => s.y3)
+  const x4 = useKnobContext((s) => s.x4)
+  const y4 = useKnobContext((s) => s.y4)
+
+  return (
+    <>
+      {startValue > min && (
+        <path
+          className={clsx('tremolo-knob-inactive-line', className)}
+          d={`M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2} ${y2}`}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          {...props}
+        />
+      )}
+      {startValue < max && (
+        <path
+          className={clsx('tremolo-knob-inactive-line', className)}
+          d={`M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4} ${y4}`}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          {...props}
+        />
+      )}
+    </>
+  )
+}

package/src/components/Knob/SVGRoot.tsx

@@ -0,0 +1,39 @@
+import { SVGProps } from 'react'
+
+import { Override } from '../_util/type'
+
+import { ActiveLine } from './ActiveLine'
+import { viewBoxSize } from './context'
+import { InactiveLine } from './InactiveLine'
+import { Thumb } from './Thumb'
+
+interface SVGRoot {
+  block?: boolean
+  overflowVisible?: boolean
+}
+
+export function SVGRoot({
+  children,
+  style,
+  ...props
+}: Override<SVGRoot, SVGProps<SVGSVGElement>>) {
+  return (
+    <svg
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      style={{
+        display: 'block',
+        overflow: 'visible',
+        ...style,
+      }}
+      {...props}
+    >
+      {children || (
+        <>
+          <InactiveLine />
+          <ActiveLine />
+          <Thumb />
+        </>
+      )}
+    </svg>
+  )
+}

package/src/components/Knob/Thumb.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx'
+import { SVGProps } from 'react'
+
+import { clamp } from '@tremolo-ui/functions'
+
+import { useKnobContext, viewBoxSize } from './context'
+
+interface Props {
+  /** color */
+  thumb?: string
+  /** color */
+  thumbLine?: string
+  /** percent (0-100) */
+  thumbSize?: number
+  /** percent (0-100) */
+  thumbLineWeight?: number
+  /** percent (0-100) */
+  thumbLineLength?: number
+
+  classes?: {
+    thumb?: string
+    thumbLine?: string
+  }
+}
+
+export function Thumb({
+  className,
+
+  thumb = 'currentColor',
+  thumbLine = 'currentColor',
+  thumbSize = 84,
+  thumbLineWeight = 6,
+  thumbLineLength = 35,
+  classes,
+
+  ...props
+}: Props & Omit<SVGProps<SVGSVGElement>, 'd' | keyof Props>) {
+  const angleRange = useKnobContext((s) => s.angleRange)
+
+  const p = useKnobContext((s) => s.p)
+  const r1 = useKnobContext((s) => s.r1)
+
+  return (
+    <svg className={clsx('tremolo-knob-thumb', classes?.thumb)} {...props}>
+      <circle cx="50%" cy="50%" r={`${thumbSize / 2}%`} fill={thumb} />
+      <line
+        className={clsx('tremolo-knob-thumb-line', classes?.thumbLine)}
+        x1="50%"
+        y1={`${(viewBoxSize - clamp(thumbSize, 0, 100)) / 2}%`}
+        x2="50%"
+        y2={`${thumbLineLength}%`}
+        stroke={thumbLine}
+        strokeWidth={`${thumbLineWeight}%`}
+        // NOTE
+        // https://bugs.webkit.org/show_bug.cgi?id=201854
+        // https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform-origin#browser_compatibility
+        style={{
+          transform: `rotate(${r1 + p * angleRange}deg)`,
+          transformOrigin: '50% 50%',
+        }}
+      />
+    </svg>
+  )
+}

package/src/components/Knob/context.tsx

@@ -0,0 +1,120 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { normalizeValue, radian } from '@tremolo-ui/functions'
+
+export const viewBoxSize = 100
+export const center = viewBoxSize / 2
+
+type State = {
+  value: number
+  min: number
+  max: number
+  step: number
+  skew: number // | SkewFunction // TODO
+  startValue: number
+  angleRange: number
+}
+
+type DrawingState = {
+  p: number // normalized value
+  r1: number // ロータリー開始位置
+  r2: number // activeLineの開始位置
+  r3: number // activeLineの終了位置
+  r4: number // ロータリー終了位置
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+  x3: number
+  y3: number
+  x4: number
+  y4: number
+}
+
+function calcDrawingState({
+  value,
+  min,
+  max,
+  skew,
+  startValue,
+  angleRange,
+}: State) {
+  const p = normalizeValue(value, min, max, skew)
+  const s = normalizeValue(startValue, min, max, skew)
+
+  const r1 = -angleRange / 2
+  const r2 = r1 + Math.min(p, s) * angleRange
+  const r3 = r1 + Math.max(p, s) * angleRange
+  const r4 = angleRange / 2
+  const x1 = center + center * Math.cos(radian(r1 - 90))
+  const y1 = center + center * Math.sin(radian(r1 - 90))
+  const x2 = center + center * Math.cos(radian(r2 - 90))
+  const y2 = center + center * Math.sin(radian(r2 - 90))
+  const x3 = center + center * Math.cos(radian(r3 - 90))
+  const y3 = center + center * Math.sin(radian(r3 - 90))
+  const x4 = center + center * Math.cos(radian(r4 - 90))
+  const y4 = center + center * Math.sin(radian(r4 - 90))
+
+  return {
+    p,
+    r1,
+    r2,
+    r3,
+    r4,
+    x1,
+    y1,
+    x2,
+    y2,
+    x3,
+    y3,
+    x4,
+    y4,
+  }
+}
+
+type KnobStore = ReturnType<typeof createKnobStore>
+
+const createKnobStore = (initProps: State) => {
+  return createStore<State & DrawingState>()(() => ({
+    ...initProps,
+    ...calcDrawingState(initProps),
+  }))
+}
+
+const KnobContext = createContext<KnobStore | null>(null)
+
+export function KnobProvider({ children, ...props }: PropsWithChildren<State>) {
+  const storeRef = useRef<KnobStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createKnobStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.setState({ ...props, ...calcDrawingState(props) })
+    } else {
+      storeRef.current = createKnobStore(props)
+    }
+  }, [props])
+
+  return (
+    <KnobContext.Provider value={storeRef.current}>
+      {children}
+    </KnobContext.Provider>
+  )
+}
+
+export function useKnobContext<T>(
+  selector: (state: State & DrawingState) => T,
+): T {
+  const store = useContext(KnobContext)
+  if (!store) throw new Error('Missing KnobContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/Knob/index.css

@@ -1,12 +1,16 @@
 .tremolo-knob {
   display: inline-block;
-  cursor: pointer;
+  cursor: grab;
   overflow: visible;
   outline: 0;
 
   &[aria-readonly='true'] {
     cursor: not-allowed;
   }
+
+  &[data-dragging='true'] {
+    cursor: inherit;
+  }
 }
 
 .tremolo-knob-active-line {
@@ -14,7 +18,7 @@
   color: oklch(69.2% 0.17548 266.373);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: var(--tremolo-theme-color);
+    color: oklch(59.5% 0.17548 266.373);
   }
 
   :where(.tremolo-knob[aria-disabled='true']) & {
@@ -22,43 +26,43 @@
   }
 }
 
-:where(.dark, [data-theme='dark']) {
-  .tremolo-knob-active-line {
-    color: var(--tremolo-theme-color);
+.tremolo-knob-inactive-line {
+  color: oklch(95% 0 0);
 
-    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(65.2% 0.17548 266.373);
-    }
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 0 0);
   }
 }
 
-.tremolo-knob-inactive-line {
-  color: oklch(95% 0 0);
+.tremolo-knob-thumb {
+  color: oklch(85.7% 0 0);
 
   :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(90% 0 0);
+    color: oklch(84.5% 0 0);
   }
 }
 
+.tremolo-knob-thumb-line {
+  color: oklch(94.2% 0 0);
+}
+
 :where(.dark, [data-theme='dark']) {
-  .tremolo-knob-inactive-line {
-    color: oklch(41.7% 0 0);
+  .tremolo-knob-active-line {
+    color: oklch(59.5% 0.17548 266.373);
 
     :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-      color: oklch(44.59% 0 0);
+      color: oklch(65.2% 0.17548 266.373);
     }
   }
-}
 
-.tremolo-knob-thumb {
-  color: oklch(85.7% 0 0);
+  .tremolo-knob-inactive-line {
+    color: oklch(41.7% 0 0);
 
-  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
-    color: oklch(84.5% 0 0);
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(44.59% 0 0);
+    }
   }
-}
 
-:where(.dark, [data-theme='dark']) {
   .tremolo-knob-thumb {
     color: oklch(48.6% 0 0);
 
@@ -66,13 +70,7 @@
       color: oklch(51.7% 0 0);
     }
   }
-}
 
-.tremolo-knob-thumb-line {
-  color: oklch(94.2% 0 0);
-}
-
-:where(.dark, [data-theme='dark']) {
   .tremolo-knob-thumb-line {
     color: oklch(84.2% 0 0);
   }