@tremolo-ui/react 0.1.6 → 0.2.1

package/src/components/_util/composeRefs.tsx

@@ -0,0 +1,63 @@
+// ref:
+// https://github.com/radix-ui/primitives/blob/2bab24a811e45c7a83198659272097f6cfa5a165/packages/react/compose-refs/src/compose-refs.tsx
+
+import { useCallback } from 'react'
+
+type PossibleRef<T> = React.Ref<T> | undefined
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    return ref(value)
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return (node) => {
+    let hasCleanup = false
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node)
+      if (!hasCleanup && typeof cleanup == 'function') {
+        hasCleanup = true
+      }
+      return cleanup
+    })
+
+    // React <19 will log an error to the console if a callback ref returns a
+    // value. We don't use ref cleanups internally so this will only happen if a
+    // user's ref callback returns a value, which we only expect if they are
+    // using the cleanup functionality added in React 19.
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i]
+          if (typeof cleanup == 'function') {
+            cleanup()
+          } else {
+            setRef(refs[i], null)
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(composeRefs(...refs), refs)
+}
+
+export { composeRefs, useComposedRefs }

package/src/components/_util/index.ts

@@ -1,11 +1,28 @@
-export function addNoSelect() {
-  document.body.classList.add('tremolo-no-select')
+export function addUserSelectNone() {
+  window.document.body.classList.add('tremolo-user-select-none')
 }
 
-export function removeNoSelect() {
-  document.body.classList.remove('tremolo-no-select')
+export function removeUserSelectNone() {
+  window.document.body.classList.remove('tremolo-user-select-none')
 }
 
-export function toggleNoSelect() {
-  document.body.classList.toggle('tremolo-no-select')
+const cursorStyles = {
+  grabbing: 'tremolo-cursor-grabbing',
+  grab: 'tremolo-cursor-grab',
+  pointer: 'tremolo-cursor-pointer',
+  move: 'tremolo-cursor-move',
+  none: 'tremolo-cursor-none',
+}
+
+export type Cursor = keyof typeof cursorStyles
+
+export function setCursorStyle(type: Cursor) {
+  resetCursorStyle()
+  window.document.body.classList.add(cursorStyles[type])
+}
+
+export function resetCursorStyle() {
+  Object.values(cursorStyles).forEach((s) => {
+    window.document.body.classList.remove(s)
+  })
 }

package/src/components/_util/type.ts

@@ -0,0 +1 @@
+export type Override<T, U> = T & Omit<U, keyof T>

package/src/hooks/useAnimationFrame.ts

@@ -1,8 +1,5 @@
 import { DependencyList, useCallback, useEffect, useRef } from 'react'
 
-/**
- * @category hooks
- */
 export function useAnimationFrame(
   callback = () => {},
   deps: DependencyList = [],

package/src/hooks/useCallbackRef.ts

@@ -1,4 +1,4 @@
-import { useCallback, useInsertionEffect, useRef } from 'react'
+import { DependencyList, useCallback, useInsertionEffect, useRef } from 'react'
 
 /**
  * Internal
@@ -6,7 +6,7 @@ import { useCallback, useInsertionEffect, useRef } from 'react'
  */
 export function useCallbackRef<Args extends unknown[], Return>(
   callback: ((...args: Args) => Return) | undefined,
-  deps: React.DependencyList = [],
+  deps: DependencyList = [],
 ) {
   const callbackRef = useRef<typeof callback>(() => {
     throw new Error('Cannot call an event handler while rendering.')

package/src/hooks/useDrag.ts

@@ -6,17 +6,16 @@ import { useRefCallbackEvent } from './useRefCallbackEvent'
 interface UseDragProps {
   threshold?: number
 
-  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 hooks
  * @returns [refCallback, pointerDownHandler]
  */
 export function useDrag<T extends Element>({
-  threshold = 1,
+  threshold: _threshold = 1,
   onDrag,
   onDragStart,
   onDragEnd,
@@ -29,6 +28,8 @@ export function useDrag<T extends Element>({
   const dragStartX = useRef(0)
   const dragStartY = useRef(0)
 
+  const threshold = Math.max(_threshold, 1)
+
   const handleDrag = useCallback(
     (
       event: MouseEvent | React.MouseEvent<T, MouseEvent> | TouchEvent,
@@ -53,7 +54,7 @@ export function useDrag<T extends Element>({
         dragOffsetY.current = screenY
       }
       if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
-      onDrag(
+      onDrag?.(
         screenX - dragStartX.current,
         screenY - dragStartY.current,
         deltaX,
@@ -63,13 +64,6 @@ export function useDrag<T extends Element>({
     [threshold, onDrag],
   )
 
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
-
   const pointerDownHandler = useCallback(
     (event: React.PointerEvent<T>) => {
       dragOffsetX.current = event.screenX
@@ -80,6 +74,13 @@ export function useDrag<T extends Element>({
     [handleDrag, onDragStart],
   )
 
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
   useEventListener(globalThis.window, 'mousemove', handleDrag)
 
   useEventListener(globalThis.window, 'pointerup', () => {

package/src/hooks/useDragWithElement.ts

@@ -1,37 +1,30 @@
-import { useRef, useCallback, RefObject } from 'react'
+import { useRef, useCallback, RefObject, useState } from 'react'
 
 import { normalizeValue } from '@tremolo-ui/functions'
 
 import { useEventListener } from './useEventListener'
 import { useRefCallbackEvent } from './useRefCallbackEvent'
 
-interface UseDragWithElementProps<T extends Element> {
+interface UseDragWithElement<T extends Element> {
   baseElementRef: RefObject<T | null>
   onDrag: (normalizedX: number, normalizedY: number) => void
   onDragStart?: (normalizedX: number, normalizedY: number) => void
   onDragEnd?: (normalizedX: number, normalizedY: number) => void
 }
 
-/**
- * @category hooks
- * @returns [refCallback, pointerDownHandler]
- */
 export function useDragWithElement<T extends Element>({
   baseElementRef,
   onDrag,
   onDragStart,
   onDragEnd,
-}: UseDragWithElementProps<T>): [
-  (div: EventTarget | null) => void,
-  (event: React.PointerEvent<T>) => void,
-] {
-  const dragged = useRef(false)
+}: UseDragWithElement<T>) {
+  const [dragging, setDragging] = useState(false)
   const normalizedX = useRef(0)
   const normalizedY = useRef(0)
 
   const handleDrag = useCallback(
     (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
-      if (!baseElementRef.current || !dragged.current) {
+      if (!baseElementRef.current || !dragging) {
         return
       }
       const isTouch = event instanceof TouchEvent
@@ -46,7 +39,7 @@ export function useDragWithElement<T extends Element>({
       normalizedY.current = ny
       onDrag(nx, ny)
     },
-    [onDrag, baseElementRef],
+    [onDrag, baseElementRef, dragging],
   )
 
   const refHandler = useRefCallbackEvent(
@@ -58,7 +51,8 @@ export function useDragWithElement<T extends Element>({
 
   const pointerDownHandler = useCallback(
     (event: React.PointerEvent<T>) => {
-      dragged.current = true
+      // dragging.current = true
+      setDragging(true)
       handleDrag(event)
       onDragStart?.(normalizedX.current, normalizedY.current)
     },
@@ -68,10 +62,11 @@ export function useDragWithElement<T extends Element>({
   useEventListener(globalThis.window, 'pointermove', handleDrag)
 
   useEventListener(globalThis.window, 'pointerup', () => {
-    if (!dragged.current) return
-    dragged.current = false
+    if (!dragging) return
+    // dragging.current = false
+    setDragging(false)
     onDragEnd?.(normalizedX.current, normalizedY.current)
   })
 
-  return [refHandler, pointerDownHandler]
+  return { refHandler, pointerDownHandler, dragging }
 }

package/src/hooks/useEventListener.ts

@@ -5,31 +5,28 @@ import { useCallbackRef } from './useCallbackRef'
 type Target = EventTarget | null | (() => EventTarget | null)
 type Options = boolean | AddEventListenerOptions
 
-/**
- * @category hooks
- */
 export function useEventListener<K extends keyof DocumentEventMap>(
   target: Target,
   event: K,
-  handler?: (event: DocumentEventMap[K]) => void,
+  handler: (event: DocumentEventMap[K]) => void,
   options?: Options,
 ): VoidFunction
 export function useEventListener<K extends keyof WindowEventMap>(
   target: Target,
   event: K,
-  handler?: (event: WindowEventMap[K]) => void,
+  handler: (event: WindowEventMap[K]) => void,
   options?: Options,
 ): VoidFunction
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
   target: Target,
   event: K,
-  handler?: (event: GlobalEventHandlersEventMap[K]) => void,
+  handler: (event: GlobalEventHandlersEventMap[K]) => void,
   options?: Options,
 ): VoidFunction
 export function useEventListener(
   target: Target,
   event: string,
-  handler: ((event: Event) => void) | undefined,
+  handler: (event: Event) => void,
   options?: Options,
 ) {
   const listener = useCallbackRef(handler)
@@ -37,13 +34,13 @@ export function useEventListener(
   useEffect(() => {
     const node = typeof target === 'function' ? target() : (target ?? document)
 
-    if (!handler || !node) return
+    if (!node) return
 
     node.addEventListener(event, listener, options)
     return () => {
       node.removeEventListener(event, listener, options)
     }
-  }, [event, target, options, listener, handler])
+  }, [event, target, options, listener])
 
   return () => {
     const node = typeof target === 'function' ? target() : (target ?? document)

package/src/hooks/useInterval.ts

@@ -1,8 +1,5 @@
 import { useEffect, useRef } from 'react'
 
-/**
- * @category hooks
- */
 export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef(callback)
 

package/src/hooks/useLongPress.ts

@@ -3,9 +3,6 @@ import { useCallback, useState } from 'react'
 import { useEventListener } from './useEventListener'
 import { useInterval } from './useInterval'
 
-/**
- * @category hooks
- */
 export function useLongPress(
   callback: () => void,
   initialDelay = 500,

package/src/hooks/useMIDIAccess.ts

@@ -10,7 +10,6 @@ export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
 
 /**
  * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
- * @category hooks
  */
 export function useMIDIAccess(requestOnMount = true) {
   const [midiAccess, setMidiAccess] = useState<MIDIAccess | null>(null)

package/src/hooks/useMIDIInput.ts

@@ -16,7 +16,6 @@ const MIDI_EVENT_TO_NUMBER = {
 
 /**
  * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
- * @category hooks
  */
 export function useMIDIInput(
   midiAccess: MIDIAccess | null,

package/src/hooks/useMIDIMessage.ts

@@ -2,7 +2,6 @@ import { useEffect } from 'react'
 
 /**
  * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
- * @category hooks
  */
 export function useMIDIMessage(
   midiAccess: MIDIAccess | null,

package/src/hooks/usePianoDrag.ts

@@ -0,0 +1,75 @@
+import { useRef, useCallback, RefObject } from 'react'
+
+import { normalizeValue } from '@tremolo-ui/functions'
+
+import { useEventListener } from './useEventListener'
+import { useRefCallbackEvent } from './useRefCallbackEvent'
+
+interface UsePianoDrag<T extends Element> {
+  baseElementRef: RefObject<T | null>
+  onDrag: (normalizedX: number, normalizedY: number) => void
+  onDragStart?: (normalizedX: number, normalizedY: number) => void
+  onDragEnd?: (normalizedX: number, normalizedY: number) => void
+}
+
+/**
+ * Internal
+ * @returns [refCallback, pointerDownHandler]
+ * @private
+ */
+export function usePianoDrag<T extends Element>({
+  baseElementRef,
+  onDrag,
+  onDragStart,
+  onDragEnd,
+}: UsePianoDrag<T>) {
+  const dragged = useRef(false)
+  const normalizedX = useRef(0)
+  const normalizedY = useRef(0)
+
+  const handleDrag = useCallback(
+    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
+      if (!baseElementRef.current || !dragged.current) {
+        return
+      }
+      const isTouch = event instanceof TouchEvent
+      if (isTouch && event.cancelable) event.preventDefault()
+      const { left, top, right, bottom } =
+        baseElementRef.current.getBoundingClientRect()
+      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
+      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
+      const nx = normalizeValue(mouseX, left, right)
+      const ny = normalizeValue(mouseY, top, bottom)
+      normalizedX.current = nx
+      normalizedY.current = ny
+      onDrag(nx, ny)
+    },
+    [onDrag, baseElementRef],
+  )
+
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
+  const pointerDownHandler = useCallback(
+    (event: React.PointerEvent<T>) => {
+      dragged.current = true
+      handleDrag(event)
+      onDragStart?.(normalizedX.current, normalizedY.current)
+    },
+    [handleDrag, onDragStart],
+  )
+
+  useEventListener(globalThis.window, 'pointermove', handleDrag)
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    if (!dragged.current) return
+    dragged.current = false
+    onDragEnd?.(normalizedX.current, normalizedY.current)
+  })
+
+  return { refHandler, pointerDownHandler }
+}

package/src/index.ts

@@ -3,79 +3,70 @@ import './styles/global.css'
 import './components/Knob/index.css'
 import './components/NumberInput/index.css'
 import './components/Piano/index.css'
+import './components/PointsEditor/index.css'
 import './components/Slider/index.css'
 import './components/XYPad/index.css'
 
 export {
-  type AbsoluteSizingProps,
   AnimationCanvas,
+  type AbsoluteSizingProps,
   type AnimationCanvasProps,
   type CommonProps,
   type DrawFunction,
   type InitFunction,
   type RelativeSizingProps,
 } from './components/AnimationCanvas'
-export {
-  AnimationKnob,
-  type AnimationKnobMethods,
-  type AnimationKnobProps,
-} from './components/AnimationKnob'
 export { DragObserver, type DragObserverProps } from './components/DragObserver'
-export { Knob, type KnobMethods, type KnobProps } from './components/Knob'
+export { Knob, type KnobProps, type KnobMethods } from './components/Knob'
 export {
-  DecrementStepper,
-  type DecrementStepperProps,
-  IncrementStepper,
-  type IncrementStepperProps,
   NumberInput,
-  type NumberInputMethods,
   type NumberInputProps,
-  Stepper,
+  type NumberInputMethods,
   type StepperProps,
+  type IncrementStepperProps,
+  type DecrementStepperProps,
 } from './components/NumberInput'
 export {
   Piano,
+  getNoteRangeArray,
+  SHORTCUTS,
   type PianoProps,
   type PianoMethods,
-  getNoteRangeArray,
-  WhiteKey,
-  BlackKey,
   type KeyProps,
   type KeyMethods,
-  KeyLabel,
   type KeyLabelProps,
-  SHORTCUTS,
   type KeyboardShortcuts,
 } from './components/Piano'
 export {
-  Scale,
-  ScaleOption,
+  PointsEditor,
+  clampPoint,
+  type PointsEditorProps,
+  type PointProps,
+  type PointBaseType,
+} from './components/PointsEditor'
+export {
+  Slider,
+  useSliderContext,
   type ScaleOptionProps,
   type ScaleProps,
-  Slider,
   type SliderMethods,
   type SliderProps,
-  SliderThumb,
   type SliderThumbMethods,
   type SliderThumbProps,
-  SliderTrack,
   type SliderTrackProps,
-  useSliderContext,
 } from './components/Slider'
 export {
   WheelObserver,
   type WheelObserverProps,
 } from './components/WheelObserver'
 export {
-  type AreaProps,
-  type ThumbProps,
-  type ValueOptions,
   XYPad,
-  XYPadArea,
-  type XYPadMethods,
   type XYPadProps,
-  XYPadThumb,
+  type XYPadMethods,
+  type XYPadAreaProps,
+  type XYPadThumbProps,
   type XYPadThumbMethods,
+  type ValueOptions,
 } from './components/XYPad'
 
 // hooks

package/src/styles/global.css

@@ -1,7 +1,19 @@
-:root {
-  --tremolo-theme-color: oklch(59.5% 0.17548 266.373);
+.tremolo-user-select-none {
+  user-select: none;
 }
 
-.tremolo-no-select {
-  user-select: none;
+.tremolo-cursor-pointer {
+  cursor: pointer;
+}
+
+.tremolo-cursor-move {
+  cursor: move;
+}
+
+.tremolo-cursor-grabbing {
+  cursor: grabbing;
+}
+
+.tremolo-cursor-none {
+  cursor: none;
 }

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.css","names":[],"sources":["../src/styles/global.css","../src/components/Knob/index.css","../src/components/NumberInput/index.css","../src/components/Piano/index.css","../src/components/Slider/index.css","../src/components/XYPad/index.css"],"sourcesContent":[":root {\n  --tremolo-theme-color: oklch(59.5% 0.17548 266.373);\n}\n\n.tremolo-no-select {\n  user-select: none;\n}\n",".tremolo-knob {\n  display: inline-block;\n  cursor: pointer;\n  overflow: visible;\n  outline: 0;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-knob-active-line {\n  overflow: visible;\n  color: oklch(69.2% 0.17548 266.373);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: var(--tremolo-theme-color);\n  }\n\n  :where(.tremolo-knob[aria-disabled='true']) & {\n    color: oklch(50.5% 0.03307 270.021);\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-knob-active-line {\n    color: var(--tremolo-theme-color);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(65.2% 0.17548 266.373);\n    }\n  }\n}\n\n.tremolo-knob-inactive-line {\n  color: oklch(95% 0 0);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(90% 0 0);\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-knob-inactive-line {\n    color: oklch(41.7% 0 0);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(44.59% 0 0);\n    }\n  }\n}\n\n.tremolo-knob-thumb {\n  color: oklch(85.7% 0 0);\n\n  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n    color: oklch(84.5% 0 0);\n  }\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-knob-thumb {\n    color: oklch(48.6% 0 0);\n\n    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {\n      color: oklch(51.7% 0 0);\n    }\n  }\n}\n\n.tremolo-knob-thumb-line {\n  color: oklch(94.2% 0 0);\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-knob-thumb-line {\n    color: oklch(84.2% 0 0);\n  }\n}\n",".tremolo-number-input-wrapper {\n  --border-radius: 4px;\n  --stepper-width: 20px;\n  --active-color: var(--tremolo-theme-color);\n\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  width: 140px;\n  height: min-content;\n  border-style: solid;\n  border-color: #c1c1c1;\n  border-width: 0px;\n  outline: none;\n  transition: all 0.1s;\n\n  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {\n    border-color: #f34343;\n  }\n\n  &[data-variant='outline'] {\n    border-width: 1px;\n    border-radius: var(--border-radius);\n\n    &:hover {\n      border-color: #909090;\n    }\n\n    &:focus-within {\n      border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='filled'] {\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: transparent;\n    background-color: #edf2f7;\n\n    &:hover {\n      background-color: #e4e9ee;\n    }\n\n    &:focus-within {\n      background-color: inherit;\n      border-color: var(--active-color);\n      box-shadow: 0px 0px 0px 2px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-variant='flushed'] {\n    border-bottom-width: 1px;\n\n    &:hover {\n      border-color: #909090;\n    }\n\n    &:focus-within {\n      border-color: var(--active-color);\n      box-shadow: 0px 2px 0px 0px\n        color-mix(in srgb, var(--active-color) 10%, transparent);\n    }\n  }\n\n  &[data-stepper='false'] {\n    --stepper-width: 0px;\n  }\n}\n\n.tremolo-number-input {\n  display: block;\n  color: inherit;\n  width: calc(100% - 20px - var(--stepper-width));\n  background-color: inherit;\n  font: inherit;\n  padding: 6px 10px;\n\n  margin: 0;\n  border: none;\n  outline: none;\n  appearance: none;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-stepper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--stepper-width);\n  transition: all 0.1s linear;\n\n  &[data-dynamic='true'] {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n}\n\n:is(\n    .tremolo-number-input-wrapper:hover,\n    .tremolo-number-input-wrapper:focus-within\n  )\n  .tremolo-number-input-stepper {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.tremolo-number-input-increment-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: #ccc;\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-top-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: #3443560e;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-number-input-decrement-stepper {\n  border-inline-start-width: 1px;\n  border-inline-start-style: solid;\n  border-inline-start-color: #ccc;\n  border-top: 1px solid #ccc;\n  font-size: calc(0.75rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 1 0%;\n  max-height: 50%;\n  user-select: none;\n  cursor: pointer;\n  border-bottom-right-radius: var(--border-radius);\n\n  &[aria-disabled='false']:active {\n    background-color: #3443560e;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n",".tremolo-piano {\n  display: inline-block;\n  box-sizing: border-box;\n  user-select: none;\n  touch-action: none;\n  position: relative;\n}\n\n.tremolo-piano-white-key {\n  --bg: oklch(100% 0 0);\n  --color: oklch(0% 0 0);\n  --active-bg: oklch(90% 0 0);\n  --active-color: oklch(0% 0 0);\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 1;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-black-key {\n  --color: oklch(100% 0 0);\n  --bg: oklch(32.109% 0.00004 271.152);\n  --active-color: oklch(100% 0 0);\n  --active-bg: oklch(47.836% 0.00005 271.152);\n\n  box-sizing: border-box;\n  position: absolute;\n  background-color: var(--bg);\n  -webkit-tap-highlight-color: transparent;\n  color: var(--color);\n  border: 1px solid #555;\n  border-radius: 0px 0px 8px 8px;\n  cursor: pointer;\n  z-index: 2;\n\n  &[data-active='true'] {\n    background-color: var(--active-bg);\n    color: var(--active-color);\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-piano-key-label-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  height: 100%;\n}\n\n.tremolo-piano-key-label {\n  box-sizing: content-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 0.6rem;\n  height: 10px;\n  margin-bottom: 10px;\n  padding: 4px;\n  border-radius: 4px;\n  border: 1px solid #888;\n  aspect-ratio: 1;\n  max-width: calc(100% - 16px);\n}\n\n:where(.dark, [data-theme='dark']) {\n  .tremolo-piano-white-key {\n    --bg: oklch(48.193% 0.00005 271.152);\n    --color: oklch(100% 0 0);\n    --active-bg: oklch(52.78% 0.00006 271.152);\n    --active-color: oklch(100% 0 0);\n  }\n\n  .tremolo-piano-black-key {\n    --color: oklch(100% 0 0);\n    --bg: oklch(32.109% 0 0);\n    --active-color: oklch(100% 0 0);\n    --active-bg: oklch(38.666% 0.00004 271.152);\n  }\n}\n",".tremolo-slider {\n  display: inline-block;\n  cursor: pointer;\n  outline: 0;\n  -webkit-tap-highlight-color: transparent;\n\n  &[aria-readonly='true'] {\n    cursor: not-allowed;\n  }\n}\n\n.tremolo-slider-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-slider-thumb {\n  --color: var(--tremolo-theme-color);\n\n  background: var(--color);\n  border-radius: 50%;\n  outline: none;\n\n  &[aria-disabled='true'] {\n    background: #5d6478;\n  }\n\n  &[aria-readonly='false']:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n\n.tremolo-slider-track {\n  --active: #7998ec;\n  --inactive: #eee;\n\n  position: relative;\n\n  &[data-vertical='false'] {\n    min-width: 50px;\n  }\n\n  &[data-vertical='true'] {\n    min-height: 50px;\n  }\n\n  &:hover {\n    --active: #6387e9;\n    --inactive: #e0e0e0;\n  }\n\n  &[aria-disabled='true'] {\n    --active: #858890;\n    --inactive: #ddd;\n  }\n}\n\n.tremolo-slider-scale {\n  display: block;\n  position: relative;\n}\n\n.tremolo-slider-scale-option {\n  display: flex;\n  color: #222;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  translate: -50% 0;\n  z-index: 10;\n\n  &[data-vertical='true'] {\n    flex-direction: row;\n    translate: 0 -50%;\n  }\n}\n\n.tremolo-slider-scale-option-mark {\n  background-color: currentColor;\n}\n\n.tremolo-slider-scale-option-label {\n  text-align: right;\n}\n",".tremolo-xy-pad {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.tremolo-xy-pad-area {\n  --color: #eee;\n\n  position: relative;\n  background-color: var(--color);\n}\n\n.tremolo-xy-pad-thumb-wrapper {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 100;\n}\n\n.tremolo-xy-pad-thumb {\n  --color: var(--tremolo-theme-color);\n\n  border-radius: 50%;\n  outline: none;\n  background-color: var(--color);\n\n  &[aria-disabled='true'] {\n    background-color: #5d6478;\n  }\n\n  &:focus {\n    box-shadow: 0px 0px 0px 3px\n      color-mix(in srgb, var(--color) 20%, transparent);\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;;ACNA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AC9EA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACxKA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AChGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;ACtFA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}