@moises.ai/design-system 4.14.4 → 4.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.14.4",
+  "version": "4.14.6",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -1,4 +1,11 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './InputLevelMeter.module.css'
 
@@ -7,6 +14,8 @@ const SEGMENT_RANGE = 25
 const UNITY_GAIN_POS = 0.667
 const MAX_BOOST_DB = 6
 const FADER_KEYBOARD_STEP = 0.02
+const THUMB_DOUBLE_TAP_MS = 400
+const THUMB_DOUBLE_TAP_MAX_PX = 12
 
 function linearToMeterLevel(linear) {
   const peakDb = 20 * Math.log10(Math.max(linear, 1e-6))
@@ -81,10 +90,134 @@ function MeterRow({ level }) {
   )
 }
 
+const MeterThumb = memo(
+  forwardRef(function MeterThumb(
+    {
+      faderPercent,
+      isPressed,
+      hover,
+      volume,
+      doubleTapStateRef,
+      onVolumeChange,
+      onVolumeReset,
+    },
+    ref,
+  ) {
+    const [thumbFocused, setThumbFocused] = useState(false)
+    const [hoverOpen, setHoverOpen] = useState(false)
+
+    const tooltipOpen = isPressed || thumbFocused || hoverOpen
+
+    const handlePointerDownCapture = useCallback(
+      (e) => {
+        if (!onVolumeReset || e.button !== 0) return
+        const now = performance.now()
+        const prev = doubleTapStateRef.current
+        if (
+          prev &&
+          now - prev.t < THUMB_DOUBLE_TAP_MS &&
+          Math.hypot(e.clientX - prev.x, e.clientY - prev.y) <
+            THUMB_DOUBLE_TAP_MAX_PX
+        ) {
+          e.preventDefault()
+          e.stopPropagation()
+          doubleTapStateRef.current = null
+          onVolumeReset()
+          return
+        }
+        doubleTapStateRef.current = {
+          t: now,
+          x: e.clientX,
+          y: e.clientY,
+        }
+      },
+      [doubleTapStateRef, onVolumeReset],
+    )
+
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (!onVolumeChange) return
+        const pos = gainToFaderPosition(volume)
+        let nextPos = pos
+        switch (e.key) {
+          case 'ArrowRight':
+          case 'ArrowUp':
+            e.preventDefault()
+            nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP)
+            onVolumeChange([faderPositionToGain(nextPos)])
+            break
+          case 'ArrowLeft':
+          case 'ArrowDown':
+            e.preventDefault()
+            nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP)
+            onVolumeChange([faderPositionToGain(nextPos)])
+            break
+          case 'Home':
+            e.preventDefault()
+            onVolumeChange([faderPositionToGain(0)])
+            break
+          case 'End':
+            e.preventDefault()
+            onVolumeChange([faderPositionToGain(1)])
+            break
+          case 'PageUp':
+            e.preventDefault()
+            nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP * 4)
+            onVolumeChange([faderPositionToGain(nextPos)])
+            break
+          case 'PageDown':
+            e.preventDefault()
+            nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP * 4)
+            onVolumeChange([faderPositionToGain(nextPos)])
+            break
+          default:
+            break
+        }
+      },
+      [onVolumeChange, volume],
+    )
+
+    const gainDbForAria =
+      volume <= 0 ? -96 : 20 * Math.log10(Math.max(volume, 1e-6))
+
+    return (
+      <Tooltip
+        content={formatGainDb(volume)}
+        open={tooltipOpen}
+        onOpenChange={setHoverOpen}
+        side="bottom"
+        align="center"
+        sideOffset={3}
+        delayDuration={0}
+      >
+        <div
+          ref={ref}
+          role="slider"
+          tabIndex={0}
+          aria-label="Input gain"
+          aria-valuemin={-96}
+          aria-valuemax={MAX_BOOST_DB}
+          aria-valuenow={Math.round(gainDbForAria * 10) / 10}
+          aria-valuetext={formatGainDb(volume)}
+          className={`${styles.thumb} ${isPressed ? styles.pressed : hover ? styles.hovered : ''}`}
+          style={{ left: `${faderPercent}%` }}
+          onPointerDownCapture={handlePointerDownCapture}
+          onFocus={() => setThumbFocused(true)}
+          onBlur={() => setThumbFocused(false)}
+          onKeyDown={handleKeyDown}
+        />
+      </Tooltip>
+    )
+  }),
+)
+
+MeterThumb.displayName = 'MeterThumb'
+
 export const InputLevelMeter = memo(function InputLevelMeter({
   linear = [0, 0],
   volume = 1,
   onVolumeChange,
+  onVolumeReset,
   showHandler = true,
   showMeter = true,
   hover = false,
@@ -97,14 +230,13 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const [isPressed, setIsPressed] = useState(false)
   const isPressedRef = useRef(false)
   const meterRef = useRef(null)
+  const thumbRef = useRef(null)
+  const thumbDoubleTapStateRef = useRef(null)
   const peakHoldRef = useRef(0)
   const peakTimerRef = useRef(null)
   const [peakHoldPct, setPeakHoldPct] = useState(0)
   const [peakRising, setPeakRising] = useState(false)
 
-  const [thumbFocused, setThumbFocused] = useState(false)
-  const [hoverOpen, setHoverOpen] = useState(false)
-
   useEffect(() => {
     peakHoldRef.current = 0
     setPeakHoldPct(0)
@@ -151,6 +283,13 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const handlePointerDown = useCallback(
     (e) => {
       if (!onVolumeChange) return
+      if (
+        thumbRef.current &&
+        e.target instanceof Element &&
+        !thumbRef.current.contains(e.target)
+      ) {
+        thumbDoubleTapStateRef.current = null
+      }
       e.currentTarget.setPointerCapture(e.pointerId)
       isPressedRef.current = true
       setIsPressed(true)
@@ -188,49 +327,6 @@ export const InputLevelMeter = memo(function InputLevelMeter({
     document.body.style.cursor = ''
   }, [])
 
-  const handleThumbKeyDown = useCallback(
-    (e) => {
-      if (!onVolumeChange) return
-      const pos = gainToFaderPosition(volume)
-      let nextPos = pos
-      switch (e.key) {
-        case 'ArrowRight':
-        case 'ArrowUp':
-          e.preventDefault()
-          nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP)
-          onVolumeChange([faderPositionToGain(nextPos)])
-          break
-        case 'ArrowLeft':
-        case 'ArrowDown':
-          e.preventDefault()
-          nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP)
-          onVolumeChange([faderPositionToGain(nextPos)])
-          break
-        case 'Home':
-          e.preventDefault()
-          onVolumeChange([faderPositionToGain(0)])
-          break
-        case 'End':
-          e.preventDefault()
-          onVolumeChange([faderPositionToGain(1)])
-          break
-        case 'PageUp':
-          e.preventDefault()
-          nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP * 4)
-          onVolumeChange([faderPositionToGain(nextPos)])
-          break
-        case 'PageDown':
-          e.preventDefault()
-          nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP * 4)
-          onVolumeChange([faderPositionToGain(nextPos)])
-          break
-        default:
-          break
-      }
-    },
-    [onVolumeChange, volume],
-  )
-
   const hasHandler = onVolumeChange && showHandler
 
   const meterClassName = [
@@ -241,11 +337,6 @@ export const InputLevelMeter = memo(function InputLevelMeter({
     .filter(Boolean)
     .join(' ')
 
-  const tooltipOpen = isPressed || thumbFocused || hoverOpen
-
-  const gainDbForAria =
-    volume <= 0 ? -96 : 20 * Math.log10(Math.max(volume, 1e-6))
-
   return (
     <div
       className={styles.container}
@@ -261,30 +352,16 @@ export const InputLevelMeter = memo(function InputLevelMeter({
         <MeterRow level={rightLevel} />
 
         {hasHandler && (
-          <Tooltip
-            content={formatGainDb(volume)}
-            open={tooltipOpen}
-            onOpenChange={setHoverOpen}
-            side="bottom"
-            align="center"
-            sideOffset={3}
-            delayDuration={0}
-          >
-            <div
-              role="slider"
-              tabIndex={0}
-              aria-label="Input gain"
-              aria-valuemin={-96}
-              aria-valuemax={MAX_BOOST_DB}
-              aria-valuenow={Math.round(gainDbForAria * 10) / 10}
-              aria-valuetext={formatGainDb(volume)}
-              className={`${styles.thumb} ${isPressed ? styles.pressed : hover ? styles.hovered : ''}`}
-              style={{ left: `${faderPercent}%` }}
-              onFocus={() => setThumbFocused(true)}
-              onBlur={() => setThumbFocused(false)}
-              onKeyDown={handleThumbKeyDown}
-            />
-          </Tooltip>
+          <MeterThumb
+            ref={thumbRef}
+            faderPercent={faderPercent}
+            isPressed={isPressed}
+            hover={hover}
+            volume={volume}
+            doubleTapStateRef={thumbDoubleTapStateRef}
+            onVolumeChange={onVolumeChange}
+            onVolumeReset={onVolumeReset}
+          />
         )}
 
         <div

package/src/components/InputLevelMeter/InputLevelMeter.stories.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { InputLevelMeter } from './InputLevelMeter'
 import { useSimulatedInputLevel } from './useSimulatedInputLevel'
 
@@ -47,12 +47,18 @@ function InteractiveMeter({ initialVolume = 1, ...props }) {
         linear={linear}
         volume={volume}
         onVolumeChange={handleVolumeChange}
+        onVolumeReset={() => setVolume(1)}
         {...props}
       />
       <span
-        style={{ color: 'rgba(255,255,255,0.5)', fontSize: '11px', fontFamily: 'monospace' }}
+        style={{
+          color: 'rgba(255,255,255,0.5)',
+          fontSize: '11px',
+          fontFamily: 'monospace',
+        }}
       >
-        gain: {volume.toFixed(3)} | dB: {volume > 0 ? (20 * Math.log10(volume)).toFixed(1) : '-∞'}
+        gain: {volume.toFixed(3)} | dB:{' '}
+        {volume > 0 ? (20 * Math.log10(volume)).toFixed(1) : '-∞'}
       </span>
     </div>
   )
@@ -152,13 +158,29 @@ export const HoverState = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
       <div>
-        <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', display: 'block', marginBottom: '4px' }}>
+        <span
+          style={{
+            color: 'rgba(255,255,255,0.4)',
+            fontSize: '10px',
+            fontFamily: 'monospace',
+            display: 'block',
+            marginBottom: '4px',
+          }}
+        >
           Default
         </span>
         <AnimatedMeter />
       </div>
       <div>
-        <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', display: 'block', marginBottom: '4px' }}>
+        <span
+          style={{
+            color: 'rgba(255,255,255,0.4)',
+            fontSize: '10px',
+            fontFamily: 'monospace',
+            display: 'block',
+            marginBottom: '4px',
+          }}
+        >
           hover=true (parent hovered)
         </span>
         <AnimatedMeter hover />
@@ -258,13 +280,15 @@ export const MultipleMeters = {
       const linear = useSimulatedInputLevel()
       const [volumes, setVolumes] = useState([1, 0.7, 0.4, 0.1])
 
-      const makeHandler = (idx) => ([v]) => {
-        setVolumes((prev) => {
-          const next = [...prev]
-          next[idx] = v
-          return next
-        })
-      }
+      const makeHandler =
+        (idx) =>
+        ([v]) => {
+          setVolumes((prev) => {
+            const next = [...prev]
+            next[idx] = v
+            return next
+          })
+        }
 
       const labels = ['Master', 'Vocals', 'Guitar', 'Drums']
 

package/src/components/TrackHeader/TrackHeader.jsx

@@ -54,6 +54,7 @@ export const TrackHeader = memo(
 
     // State change listeners
     onVolumeChange,
+    onVolumeReset,
     onPanChange,
     onMutedChange,
     onRecordChange,
@@ -218,6 +219,7 @@ export const TrackHeader = memo(
                     linear={inputLevel}
                     volume={volume}
                     onVolumeChange={onVolumeChange}
+                    onVolumeReset={onVolumeReset}
                   />
                   {showPan && (
                     <PanControl

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -28,7 +28,7 @@ import { TrackHeader } from '@moises.ai/design-system'
 import { TrackHeader } from '@moises.ai/design-system'
 
 <TrackHeader title="Group Track">
-  <TrackHeader title="Grouped Track" showPan showVolumeControls volume={0.7} pan={-0.3} isMuted={false} isSolo={false} onVolumeChange={() => {}} onPanChange={() => {}} onMutedChange={() => {}} onSoloChange={() => {}} isGrouped />
+  <TrackHeader title="Grouped Track" showPan showVolumeControls volume={0.7} pan={-0.3} isMuted={false} isSolo={false} onVolumeChange={() => {}} onVolumeReset={() => {}} onPanChange={() => {}} onMutedChange={() => {}} onSoloChange={() => {}} isGrouped />
 </TrackHeader>
 \`\`\`
 
@@ -59,6 +59,7 @@ import { TrackHeader } from '@moises.ai/design-system'
   isMuted: boolean; // Whether the track is muted
   isSolo: boolean; // Whether the track is solo
   onVolumeChange: (volume: number) => void; // Callback function to handle volume change
+  onVolumeReset: () => void; // Callback function to handle volume reset
   onPanChange: (pan: number) => void; // Callback function to handle pan change
   onMutedChange: (muted: boolean) => void; // Callback function to handle muted change
   onSoloChange: (solo: boolean) => void; // Callback function to handle solo change
@@ -123,10 +124,11 @@ export const Default = {
     isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
+    onVolumeChange: () => {},
+    onVolumeReset: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
@@ -177,20 +179,26 @@ export const Group = {
     isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
-    onInstrumentChange: () => { },
+    onInstrumentChange: () => {},
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(true)
     const [pan, setPan] = useState(-0.3)
     const [pan2, setPan2] = useState(-0.3)
     return (
-      <TrackHeader {...args} isOpen={isOpen} onOpenChange={setIsOpen} instrumentSelected={args.instrumentSelected} onInstrumentChange={args.onInstrumentChange}>
+      <TrackHeader
+        {...args}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        instrumentSelected={args.instrumentSelected}
+        onInstrumentChange={args.onInstrumentChange}
+      >
         <TrackHeader
           title="Grouped Track"
           isGrouped
@@ -200,10 +208,10 @@ export const Group = {
           pan={pan}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => { }}
+          onVolumeChange={() => {}}
           onPanChange={setPan}
-          onMutedChange={() => { }}
-          onSoloChange={() => { }}
+          onMutedChange={() => {}}
+          onSoloChange={() => {}}
           menuOptions={menuOptions}
           instrumentOptions={args.instrumentOptions}
           instrumentSelected={args.instrumentSelected}
@@ -218,10 +226,10 @@ export const Group = {
           pan={pan2}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => { }}
+          onVolumeChange={() => {}}
           onPanChange={setPan2}
-          onMutedChange={() => { }}
-          onSoloChange={() => { }}
+          onMutedChange={() => {}}
+          onSoloChange={() => {}}
           menuOptions={menuOptions}
           instrumentOptions={args.instrumentOptions}
           instrumentSelected={args.instrumentSelected}
@@ -245,18 +253,21 @@ export const Takelanes = {
     isSolo: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
-    onOpenChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
+    onOpenChange: () => {},
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
-    onInstrumentChange: () => { },
-
+    onInstrumentChange: () => {},
   },
   render: (args) => (
-    <TrackHeader {...args} instrumentSelected={args.instrumentSelected} onInstrumentChange={args.onInstrumentChange}>
+    <TrackHeader
+      {...args}
+      instrumentSelected={args.instrumentSelected}
+      onInstrumentChange={args.onInstrumentChange}
+    >
       <TrackHeader
         title="Take Lane 1"
         showPan={false}