@moises.ai/design-system 3.11.8 → 3.11.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.11.8",
+  "version": "3.11.10",
   "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,5 @@
 import { memo, useCallback, useRef, useState } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './InputLevelMeter.module.css'
 
 const SEGMENT_MIN = 5
@@ -56,6 +57,13 @@ function faderPositionToGain(pos) {
   return 10 ** (db / 20)
 }
 
+function formatGainDb(gain) {
+  if (gain <= 0) return '-∞ dB'
+  const db = 20 * Math.log10(gain)
+  if (db <= -96) return '-∞ dB'
+  return `${db >= 0 ? '+' : ''}${db.toFixed(1)} dB`
+}
+
 function MeterRow({ level }) {
   const pct = getNormalizedLevel(level)
   return (
@@ -114,6 +122,7 @@ export const InputLevelMeter = memo(function InputLevelMeter({
       e.currentTarget.setPointerCapture(e.pointerId)
       isPressedRef.current = true
       setIsPressed(true)
+      document.body.style.cursor = 'ew-resize'
       const rect = meterRef.current?.getBoundingClientRect()
       if (rect) {
         const pos = Math.max(
@@ -144,14 +153,19 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const handlePointerUp = useCallback(() => {
     isPressedRef.current = false
     setIsPressed(false)
+    document.body.style.cursor = ''
   }, [])
 
-  const meterClassName = [styles.bars, isPressed ? styles.pressed : '']
+  const hasHandler = onVolumeChange && showHandler
+
+  const meterClassName = [
+    styles.bars,
+    hasHandler ? styles.interactive : '',
+    isPressed ? styles.pressed : '',
+  ]
     .filter(Boolean)
     .join(' ')
 
-  const hasHandler = onVolumeChange && showHandler
-
   return (
     <div
       className={styles.container}
@@ -167,10 +181,18 @@ export const InputLevelMeter = memo(function InputLevelMeter({
         <MeterRow level={rightLevel} />
 
         {hasHandler && (
-          <div
-            className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
-            style={{ left: `${faderPercent}%` }}
-          />
+          <Tooltip
+            content={formatGainDb(volume)}
+            open={isPressed}
+            side="top"
+            sideOffset={8}
+            delayDuration={0}
+          >
+            <div
+              className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
+              style={{ left: `${faderPercent}%` }}
+            />
+          </Tooltip>
         )}
 
         {showPeakHold && (

package/src/components/InputLevelMeter/InputLevelMeter.module.css

@@ -19,6 +19,10 @@
   transition: background-color 0.1s ease;
 }
 
+.bars.interactive {
+  cursor: ew-resize;
+}
+
 .bars.pressed {
   background: rgba(221, 234, 248, 0.08);
 }

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

@@ -1,3 +1,4 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { InputLevelMeter } from './InputLevelMeter'
 import { useSimulatedInputLevel } from './useSimulatedInputLevel'
 
@@ -10,18 +11,304 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d', width: '200px' }}>
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
         <Story />
       </div>
     ),
   ],
+  argTypes: {
+    linear: { control: false },
+    volume: {
+      control: { type: 'range', min: 0, max: 2, step: 0.01 },
+    },
+    showHandler: { control: 'boolean' },
+    showMeter: { control: 'boolean' },
+    onVolumeChange: { action: 'volumeChanged' },
+  },
 }
 
-function AnimatedMeter() {
+function AnimatedMeter(props) {
   const linear = useSimulatedInputLevel()
-  return <InputLevelMeter linear={linear} />
+  return <InputLevelMeter linear={linear} {...props} />
+}
+
+function InteractiveMeter({ initialVolume = 1, ...props }) {
+  const [volume, setVolume] = useState(initialVolume)
+  const linear = useSimulatedInputLevel()
+
+  const handleVolumeChange = useCallback(([v]) => {
+    setVolume(v)
+  }, [])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <InputLevelMeter
+        linear={linear}
+        volume={volume}
+        onVolumeChange={handleVolumeChange}
+        {...props}
+      />
+      <span
+        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) : '-∞'}
+      </span>
+    </div>
+  )
+}
+
+function useFixedLevel(left, right) {
+  const [linear, setLinear] = useState([left, right])
+  useEffect(() => {
+    setLinear([left, right])
+  }, [left, right])
+  return linear
 }
 
 export const Default = {
   render: () => <AnimatedMeter />,
 }
+
+export const WithVolumeControl = {
+  render: () => <InteractiveMeter />,
+}
+
+export const Silent = {
+  render: () => <InputLevelMeter linear={[0, 0]} />,
+}
+
+export const LowLevel = {
+  render: () => {
+    function LowLevelMeter() {
+      const linear = useFixedLevel(0.01, 0.008)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <LowLevelMeter />
+  },
+}
+
+export const MediumLevel = {
+  render: () => {
+    function MediumLevelMeter() {
+      const linear = useFixedLevel(0.15, 0.12)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <MediumLevelMeter />
+  },
+}
+
+export const HotLevel = {
+  render: () => {
+    function HotLevelMeter() {
+      const linear = useFixedLevel(0.7, 0.65)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <HotLevelMeter />
+  },
+}
+
+export const Clipping = {
+  render: () => {
+    function ClippingMeter() {
+      const linear = useFixedLevel(1.0, 0.95)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <ClippingMeter />
+  },
+}
+
+export const MonoLeft = {
+  render: () => {
+    function MonoLeftMeter() {
+      const linear = useFixedLevel(0.5, 0)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <MonoLeftMeter />
+  },
+}
+
+export const MonoRight = {
+  render: () => {
+    function MonoRightMeter() {
+      const linear = useFixedLevel(0, 0.5)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <MonoRightMeter />
+  },
+}
+
+export const AsymmetricLevels = {
+  render: () => {
+    function AsymmetricMeter() {
+      const linear = useFixedLevel(0.8, 0.2)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <AsymmetricMeter />
+  },
+}
+
+export const WithoutHandler = {
+  render: () => <AnimatedMeter showHandler={false} />,
+}
+
+export const WithoutMeterDot = {
+  render: () => <AnimatedMeter showMeter={false} />,
+}
+
+export const MeterOnly = {
+  render: () => <AnimatedMeter showHandler={false} showMeter={false} />,
+}
+
+export const VolumeAtZero = {
+  render: () => <InteractiveMeter initialVolume={0} />,
+}
+
+export const VolumeAtUnity = {
+  render: () => <InteractiveMeter initialVolume={1} />,
+}
+
+export const VolumeBoosted = {
+  render: () => <InteractiveMeter initialVolume={1.5} />,
+}
+
+export const MaxBoost = {
+  render: () => <InteractiveMeter initialVolume={2} />,
+}
+
+export const PulsingSignal = {
+  render: () => {
+    function PulsingMeter() {
+      const [linear, setLinear] = useState([0, 0])
+      const frameRef = useRef(null)
+
+      useEffect(() => {
+        let t = 0
+        function animate() {
+          t += 0.04
+          const val = Math.abs(Math.sin(t)) * 0.9
+          setLinear([val, val * 0.85])
+          frameRef.current = requestAnimationFrame(animate)
+        }
+        frameRef.current = requestAnimationFrame(animate)
+        return () => cancelAnimationFrame(frameRef.current)
+      }, [])
+
+      return <InputLevelMeter linear={linear} />
+    }
+    return <PulsingMeter />
+  },
+}
+
+export const SpikeAndDecay = {
+  render: () => {
+    function SpikeDecayMeter() {
+      const [linear, setLinear] = useState([0, 0])
+      const frameRef = useRef(null)
+      const currentRef = useRef([0, 0])
+      const tickRef = useRef(0)
+
+      useEffect(() => {
+        function animate() {
+          tickRef.current++
+
+          if (tickRef.current % 90 === 0) {
+            currentRef.current = [0.95, 0.9]
+          } else {
+            currentRef.current = currentRef.current.map((v) =>
+              Math.max(0, v * 0.97),
+            )
+          }
+
+          setLinear([...currentRef.current])
+          frameRef.current = requestAnimationFrame(animate)
+        }
+        frameRef.current = requestAnimationFrame(animate)
+        return () => cancelAnimationFrame(frameRef.current)
+      }, [])
+
+      return <InputLevelMeter linear={linear} />
+    }
+    return <SpikeDecayMeter />
+  },
+}
+
+export const MultipleMeters = {
+  render: () => {
+    function MultiMeter() {
+      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 labels = ['Master', 'Vocals', 'Guitar', 'Drums']
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {volumes.map((vol, i) => (
+            <div key={i}>
+              <span
+                style={{
+                  color: 'rgba(255,255,255,0.5)',
+                  fontSize: '10px',
+                  fontFamily: 'monospace',
+                  marginBottom: '4px',
+                  display: 'block',
+                }}
+              >
+                {labels[i]}
+              </span>
+              <InputLevelMeter
+                linear={linear.map((l) => l * vol)}
+                volume={vol}
+                onVolumeChange={makeHandler(i)}
+              />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return <MultiMeter />
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Playground = {
+  args: {
+    volume: 1,
+    showHandler: true,
+    showMeter: true,
+  },
+  render: (args) => {
+    function PlaygroundMeter() {
+      const linear = useSimulatedInputLevel()
+      const [volume, setVolume] = useState(args.volume)
+
+      useEffect(() => {
+        setVolume(args.volume)
+      }, [args.volume])
+
+      return (
+        <InputLevelMeter
+          linear={linear}
+          volume={volume}
+          onVolumeChange={([v]) => setVolume(v)}
+          showHandler={args.showHandler}
+          showMeter={args.showMeter}
+        />
+      )
+    }
+    return <PlaygroundMeter />
+  },
+}

package/src/components/PeakLevel/PeakLevel.jsx

@@ -0,0 +1,71 @@
+import { memo, useRef } from 'react'
+import styles from './PeakLevel.module.css'
+
+const PEAK_HOLD_THRESHOLD_HIGH = 0
+const PEAK_HOLD_THRESHOLD_MEDIUM = -1
+
+function linearToPeakDb(linear) {
+  if (!Array.isArray(linear)) return null
+  const peak = Math.max(linear[0] ?? 0, linear[1] ?? 0)
+  if (peak <= 0) return null
+  const db = 20 * Math.log10(peak)
+  if (db <= -96) return null
+  return db
+}
+
+function getLevel(db) {
+  if (db == null) return 'reset'
+  if (db >= PEAK_HOLD_THRESHOLD_HIGH) return 'high'
+  if (db >= PEAK_HOLD_THRESHOLD_MEDIUM) return 'medium'
+  return 'regular'
+}
+
+function formatPeakDb(db) {
+  if (db == null) return '--'
+  return db.toFixed(1)
+}
+
+export const PeakLevel = memo(function PeakLevel({
+  linear,
+  value,
+  onClick,
+}) {
+  const peakHoldRef = useRef(null)
+
+  let displayDb = value ?? null
+
+  if (linear !== undefined) {
+    const currentDb = linearToPeakDb(linear)
+
+    if (currentDb != null) {
+      if (peakHoldRef.current == null || currentDb > peakHoldRef.current) {
+        peakHoldRef.current = currentDb
+      }
+    }
+
+    if (linear[0] <= 0 && linear[1] <= 0) {
+      peakHoldRef.current = null
+    }
+
+    displayDb = peakHoldRef.current
+  }
+
+  const level = getLevel(displayDb)
+  const text = formatPeakDb(displayDb)
+
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      style={onClick ? { cursor: 'pointer' } : undefined}
+    >
+      <span className={`${styles.value} ${styles[level]}`}>
+        {text}
+      </span>
+    </div>
+  )
+})
+
+PeakLevel.displayName = 'PeakLevel'

package/src/components/PeakLevel/PeakLevel.module.css

@@ -0,0 +1,49 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 2px 0;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.value {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.04px;
+  white-space: nowrap;
+}
+
+.reset {
+  color: rgba(214, 235, 253, 0.19);
+}
+
+.regular {
+  color: #00dae8;
+}
+
+.medium {
+  color: #ffc53d;
+}
+
+.high {
+  color: #ec5d5e;
+}
+
+.container:hover .reset {
+  color: rgba(214, 235, 253, 0.19);
+}
+
+.container:hover .regular {
+  color: #75ebf5;
+}
+
+.container:hover .medium {
+  color: #ffe7b3;
+}
+
+.container:hover .high {
+  color: #ff9592;
+}