@moises.ai/design-system 4.14.3 → 4.14.5

package/package.json

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

package/src/components/Callout/Callout.jsx

@@ -37,21 +37,20 @@ export const Callout = ({
 
   const contentRef = useRef(null)
   const actionsRef = useRef(null)
-  const [contentAlign, setContentAlign] = useState('flex-start')
+  const [outerAlign, setOuterAlign] = useState('start')
 
   useLayoutEffect(() => {
-
     if (!hasActions) {
-      setContentAlign('flex-start')
+      setOuterAlign('start')
       return
     }
 
     if (!contentRef.current || !actionsRef.current) return
 
     const updateAlign = () => {
-      const contentHeight = contentRef.current.offsetHeight
-      const actionsHeight = actionsRef.current.offsetHeight
-      setContentAlign(contentHeight < actionsHeight ? 'center' : 'flex-start')
+      const contentHeight = contentRef.current.scrollHeight
+      const actionsHeight = actionsRef.current.scrollHeight
+      setOuterAlign(contentHeight <= actionsHeight ? 'center' : 'start')
     }
 
     updateAlign()
@@ -90,11 +89,10 @@ export const Callout = ({
       )}
       {...props}
     >
-      <Flex justify="between" gap="3" width="100%">
+      <Flex justify="between" gap="3" width="100%" align={outerAlign}>
         <Flex
           direction="row"
           gap="2"
-          align={contentAlign}
           width="100%"
         >
           {renderIcon()}

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']