@moises.ai/design-system 3.11.1 → 3.11.3

package/package.json

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

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -0,0 +1,205 @@
+import { memo, useCallback, useRef, useState } from 'react'
+import styles from './InputLevelMeter.module.css'
+
+const SEGMENT_MIN = 5
+const SEGMENT_RANGE = 25
+const UNITY_GAIN_POS = 0.667
+const MAX_BOOST_DB = 6
+
+function linearToMeterLevel(linear) {
+  const peakDb = 20 * Math.log10(Math.max(linear, 1e-6))
+  return Math.max(0, Math.min(30, (peakDb + 60) / 2))
+}
+
+function clampLevel(level) {
+  if (!Number.isFinite(level)) return 0
+  return Math.max(0, Math.min(30, level))
+}
+
+function clampPeakDb(peakDb) {
+  if (!Number.isFinite(peakDb)) return Number.NEGATIVE_INFINITY
+  return Math.max(-96, peakDb)
+}
+
+function getNormalizedLevel(level) {
+  return Math.max(
+    0,
+    Math.min(100, ((clampLevel(level) - SEGMENT_MIN) / SEGMENT_RANGE) * 100),
+  )
+}
+
+function getPeakHoldColor(peakPct) {
+  if (peakPct >= 88) return 'rgba(254, 78, 84, 0.89)'
+  if (peakPct >= 69) return 'rgb(255, 197, 61)'
+  return '#00dae8'
+}
+
+function gainToFaderPosition(gain) {
+  if (gain <= 0) return 0
+  const db = 20 * Math.log10(gain)
+  if (db <= -96) return 0
+  if (db <= 0) return ((db + 96) / 96) * UNITY_GAIN_POS
+  return (
+    UNITY_GAIN_POS +
+    (Math.min(db, MAX_BOOST_DB) / MAX_BOOST_DB) * (1 - UNITY_GAIN_POS)
+  )
+}
+
+function faderPositionToGain(pos) {
+  if (pos <= 0) return 0
+  let db
+  if (pos <= UNITY_GAIN_POS) {
+    db = (pos / UNITY_GAIN_POS) * 96 - 96
+  } else {
+    db = ((pos - UNITY_GAIN_POS) / (1 - UNITY_GAIN_POS)) * MAX_BOOST_DB
+  }
+  return 10 ** (db / 20)
+}
+
+function MeterRow({ level }) {
+  const pct = getNormalizedLevel(level)
+  return (
+    <div className={styles.barRow}>
+      <div className={styles.barTrack} />
+      <div
+        className={styles.barFill}
+        style={{
+          width: `${pct}%`,
+          backgroundSize: pct > 0 ? `${10000 / pct}% 100%` : '100% 100%',
+        }}
+      />
+    </div>
+  )
+}
+
+export const InputLevelMeter = memo(function InputLevelMeter({
+  linear = [0, 0],
+  volume = 1,
+  onVolumeChange,
+  showHandler = true,
+  showMeter = true,
+}) {
+  const [linearL, linearR] = linear
+  const leftLevel = clampLevel(linearToMeterLevel(linearL ?? 0))
+  const rightLevel = clampLevel(linearToMeterLevel(linearR ?? 0))
+
+  const [isPressed, setIsPressed] = useState(false)
+  const isPressedRef = useRef(false)
+  const meterRef = useRef(null)
+  const peakHoldRef = useRef(0)
+
+  const faderPercent = Math.max(
+    0,
+    Math.min(100, gainToFaderPosition(volume) * 100),
+  )
+
+  const leftNormalized = getNormalizedLevel(leftLevel)
+  const rightNormalized = getNormalizedLevel(rightLevel)
+  const currentPeakPct = Math.max(leftNormalized, rightNormalized)
+
+  if (currentPeakPct > peakHoldRef.current) {
+    peakHoldRef.current = currentPeakPct
+  }
+  if (currentPeakPct <= 0) {
+    peakHoldRef.current = 0
+  }
+
+  const peakHoldPct = peakHoldRef.current
+  const peakHoldColor = getPeakHoldColor(peakHoldPct)
+  const showPeakHold = peakHoldPct > 0
+
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!onVolumeChange) return
+      e.currentTarget.setPointerCapture(e.pointerId)
+      isPressedRef.current = true
+      setIsPressed(true)
+      const rect = meterRef.current?.getBoundingClientRect()
+      if (rect) {
+        const pos = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        )
+        onVolumeChange([faderPositionToGain(pos)])
+      }
+    },
+    [onVolumeChange],
+  )
+
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isPressedRef.current || !onVolumeChange) return
+      const rect = meterRef.current?.getBoundingClientRect()
+      if (rect) {
+        const pos = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        )
+        onVolumeChange([faderPositionToGain(pos)])
+      }
+    },
+    [onVolumeChange],
+  )
+
+  const handlePointerUp = useCallback(() => {
+    isPressedRef.current = false
+    setIsPressed(false)
+  }, [])
+
+  const meterClassName = [styles.bars, isPressed ? styles.pressed : '']
+    .filter(Boolean)
+    .join(' ')
+
+  const hasHandler = onVolumeChange && showHandler
+
+  return (
+    <div
+      className={styles.container}
+      onMouseLeave={() => {
+        if (!isPressed) setIsPressed(false)
+      }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      <div ref={meterRef} className={meterClassName}>
+        <MeterRow level={leftLevel} />
+        <MeterRow level={rightLevel} />
+
+        {hasHandler && (
+          <div
+            className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
+            style={{ left: `${faderPercent}%` }}
+          />
+        )}
+
+        {showPeakHold && (
+          <>
+            <div
+              className={styles.peakDotTop}
+              style={{
+                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+                background: peakHoldColor,
+              }}
+            />
+            <div
+              className={styles.peakDotBottom}
+              style={{
+                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+                background: peakHoldColor,
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {showMeter && (
+        <div
+          className={`${styles.zeroDbDot} ${isPressed ? styles.pressed : ''}`}
+        />
+      )}
+    </div>
+  )
+})
+
+InputLevelMeter.displayName = 'InputLevelMeter'

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

@@ -0,0 +1,111 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.bars {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 3px;
+  width: 100%;
+  background: rgba(216, 244, 246, 0.04);
+  transition: background-color 0.1s ease;
+}
+
+.bars.pressed {
+  background: rgba(221, 234, 248, 0.08);
+}
+
+.barRow {
+  display: inline-grid;
+  grid-template-rows: max-content;
+  place-items: start;
+  width: 100%;
+  position: relative;
+  line-height: 0;
+}
+
+.barTrack {
+  grid-column: 1;
+  grid-row: 1;
+  height: 3px;
+  width: 100%;
+  border-radius: 9999px;
+}
+
+.barFill {
+  grid-column: 1;
+  grid-row: 1;
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    270deg,
+    rgba(254, 78, 84, 0.894) 12%,
+    rgb(255, 197, 61) 12%,
+    rgb(255, 197, 61) 31%,
+    rgb(0, 218, 232) 31%
+  );
+  will-change: width;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 19px;
+  border-radius: 9999px;
+  background: #edeef0;
+  cursor: ew-resize;
+  z-index: 2;
+  touch-action: none;
+}
+
+.thumb.pressed {
+  background: white;
+}
+
+.peakDot {
+  position: absolute;
+  width: 1px;
+  height: 3px;
+  border-radius: 9999px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.peakDotTop {
+  composes: peakDot;
+  top: calc(50% - 2px);
+  transform: translate(-50%, -50%);
+}
+
+.peakDotBottom {
+  composes: peakDot;
+  top: calc(50% + 2px);
+  transform: translate(-50%, -50%);
+}
+
+.zeroDbDot {
+  position: absolute;
+  left: 66.7%;
+  top: 12px;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.zeroDbDot.pressed {
+  width: 3px;
+  height: 3px;
+}

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

@@ -0,0 +1,27 @@
+import { InputLevelMeter } from './InputLevelMeter'
+import { useSimulatedInputLevel } from './useSimulatedInputLevel'
+
+export default {
+  title: 'Components/InputLevelMeter',
+  component: InputLevelMeter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '200px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+function AnimatedMeter() {
+  const linear = useSimulatedInputLevel()
+  return <InputLevelMeter linear={linear} />
+}
+
+export const Default = {
+  render: () => <AnimatedMeter />,
+}

package/src/components/InputLevelMeter/useSimulatedInputLevel.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useSimulatedInputLevel() {
+  const [linear, setLinear] = useState([0.5, 0.5])
+  const targetRef = useRef([0.5, 0.5])
+  const currentRef = useRef([0.5, 0.5])
+  const frameRef = useRef(null)
+  const tickRef = useRef(0)
+
+  useEffect(() => {
+    function animate() {
+      tickRef.current++
+
+      if (tickRef.current % 20 === 0) {
+        targetRef.current = [Math.random(), Math.random()]
+      }
+
+      currentRef.current = currentRef.current.map((cur, i) => {
+        const target = targetRef.current[i]
+        const speed = cur > target ? 0.15 : 0.08
+        return cur + (target - cur) * speed
+      })
+
+      setLinear([...currentRef.current])
+      frameRef.current = requestAnimationFrame(animate)
+    }
+
+    frameRef.current = requestAnimationFrame(animate)
+    return () => cancelAnimationFrame(frameRef.current)
+  }, [])
+
+  return linear
+}

package/src/components/TrackHeader/RecordSettingsPopover.jsx

@@ -0,0 +1,82 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { Popover } from 'radix-ui'
+import { useCallback, useState } from 'react'
+import { InputLevelMeter } from '../InputLevelMeter/InputLevelMeter'
+import { Select } from '../Select/Select'
+import styles from './RecordSettingsPopover.module.css'
+
+export function RecordSettingsPopover({
+  isRecord,
+  device,
+  deviceOptions,
+  onDeviceChange,
+  channel,
+  channelOptions,
+  onChannelChange,
+  inputLevel,
+  children,
+}) {
+  const [opened, setOpened] = useState(false)
+
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (!open || !isRecord) {
+        setOpened(open)
+      }
+    },
+    [open, isRecord],
+  )
+
+  const handleContextMenu = useCallback(() => {
+    e.preventDefault()
+    setOpened(true)
+  }, [])
+
+  return (
+    <Popover.Root open={opened} onOpenChange={handleOpenChange}>
+      <Popover.Trigger asChild onContextMenu={handleContextMenu}>
+        {children}
+      </Popover.Trigger>
+
+      <Popover.Content width="360px">
+        <Flex className={styles.root} direction="column" gap="4">
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              Source
+            </Text>
+
+            {deviceOptions?.length ? (
+              <Select
+                items={deviceOptions}
+                defaultValue={device}
+                onChange={onDeviceChange}
+                size="1"
+              />
+            ) : (
+              <Text size="1">No device options.</Text>
+            )}
+
+            {channelOptions?.length && (
+              <Select
+                items={channelOptions}
+                defaultValue={channel}
+                onChange={onChannelChange}
+                size="1"
+              />
+            )}
+          </Flex>
+
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              Input Level
+            </Text>
+
+            {opened && (
+              <InputLevelMeter linear={inputLevel} showHandler={false} />
+            )}
+          </Flex>
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

package/src/components/TrackHeader/RecordSettingsPopover.module.css

@@ -0,0 +1,13 @@
+.root {
+  width: 200px;
+  padding: var(--space-3);
+  border-radius: var(--radius-4, 8px);
+  border: 1px solid
+    var(--colors-neutral-neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  background: var(--panel-solid, #18191b);
+
+  /* Shadows/shadow-5 */
+  box-shadow:
+    0 12px 32px -16px var(--overlays-black-alpha-5, rgba(0, 0, 0, 0.3)),
+    0 12px 60px 0 var(--overlays-black-alpha-3, rgba(0, 0, 0, 0.15));
+}

package/src/components/TrackHeader/TrackHeader.jsx

@@ -9,29 +9,36 @@ import {
   Box,
   DropdownMenu,
   Flex,
-  HorizontalVolume,
   IconButton,
+  InputLevelMeter,
   PanControl,
   Text,
   Tooltip,
   TrackControlsToggle,
 } from '../../index'
+import { RecordSettingsPopover } from './RecordSettingsPopover'
 import styles from './TrackHeader.module.css'
 
+const DND_PROTECTION = {
+  onPointerDown: (e) => e.stopPropagation(),
+  onMouseDown: (e) => e.stopPropagation(),
+  onTouchStart: (e) => e.stopPropagation(),
+}
+
 export const TrackHeader = memo(
   ({
     // Config
     title,
     menuOptions,
-    instrumentOptions,
-    onInstrumentChange,
-    instrumentSelected,
     showPan = true,
     showVolumeControls = true,
-    isGrouped = false,
     height = 81,
     compact = false,
     isActive = false,
+    instrumentOptions,
+    deviceOptions,
+    channelOptions,
+    inputLevel: inputLevel,
 
     // State
     volume,
@@ -41,6 +48,9 @@ export const TrackHeader = memo(
     isAutoMuted,
     isSolo,
     isOpen,
+    instrumentSelected,
+    device,
+    channel,
 
     // State change listeners
     onVolumeChange,
@@ -49,6 +59,9 @@ export const TrackHeader = memo(
     onRecordChange,
     onSoloChange,
     onOpenChange,
+    onInstrumentChange,
+    onDeviceChange,
+    onChannelChange,
 
     // Children (having content means group/takelanes)
     children,
@@ -94,9 +107,7 @@ export const TrackHeader = memo(
                   style={{ minWidth: 0, overflow: 'hidden' }}
                 >
                   <IconButton
-                    onPointerDown={(e) => e.stopPropagation()}
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
+                    {...DND_PROTECTION}
                     variant="ghost"
                     size="1"
                     onClick={handleToggleOpen}
@@ -142,39 +153,41 @@ export const TrackHeader = memo(
                 </Flex>
 
                 <Flex
+                  {...DND_PROTECTION}
                   direction="row"
-                  gap="3"
+                  gap="2px"
                   align="center"
-                  onPointerDown={(e) => e.stopPropagation()}
-                  onMouseDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
                 >
-                  <Flex gap="2px">
+                  <RecordSettingsPopover
+                    isRecord={isRecord}
+                    deviceOptions={deviceOptions}
+                    device={device}
+                    onDeviceChange={onDeviceChange}
+                    channelOptions={channelOptions}
+                    channel={channel}
+                    onChannelChange={onChannelChange}
+                    inputLevel={inputLevel}
+                  >
                     <TrackControlsToggle
                       type="record"
                       selected={isRecord}
-                      onClick={onRecordChange}
+                      onClick={() => onRecordChange?.()}
                     />
-                    <TrackControlsToggle
-                      type={
-                        isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'
-                      }
-                      selected={isMuted || (!isSolo && isAutoMuted)}
-                      onClick={onMutedChange}
-                    />
-                    <TrackControlsToggle
-                      type="solo"
-                      selected={isSolo}
-                      onClick={onSoloChange}
-                    />
-                  </Flex>
+                  </RecordSettingsPopover>
+                  <TrackControlsToggle
+                    type={isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'}
+                    selected={isMuted || (!isSolo && isAutoMuted)}
+                    onClick={onMutedChange}
+                  />
+                  <TrackControlsToggle
+                    type="solo"
+                    selected={isSolo}
+                    onClick={onSoloChange}
+                  />
                 </Flex>
 
                 {menuOptions && (
-                  <Box
-                    onPointerDown={(e) => e.stopPropagation()}
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}>
+                  <Box {...DND_PROTECTION}>
                     <DropdownMenu
                       trigger={
                         <IconButton
@@ -193,21 +206,16 @@ export const TrackHeader = memo(
                     />
                   </Box>
                 )}
-
               </Flex>
             </div>
 
-            <div
-              className={styles.trackControls}
-              onPointerDown={(e) => e.stopPropagation()}
-              onMouseDown={(e) => e.stopPropagation()}
-              onTouchStart={(e) => e.stopPropagation()}
-            >
+            <div {...DND_PROTECTION} className={styles.trackControls}>
               {!compact && showVolumeControls && (
                 <>
-                  <HorizontalVolume
+                  <InputLevelMeter
+                    linear={inputLevel}
                     volume={volume}
-                    onChangeValue={onVolumeChange}
+                    onVolumeChange={onVolumeChange}
                   />
                   {showPan && (
                     <PanControl

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

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { BassIcon, DrumsIcon, ElectricGuitarIcon, KeysIcon } from '../../icons'
+import { useSimulatedInputLevel } from '../InputLevelMeter/useSimulatedInputLevel'
 import { TrackHeader } from './TrackHeader'
 export default {
   title: 'Components/TrackHeader',
@@ -130,7 +131,33 @@ export const Default = {
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
-  render: (args) => <TrackHeader {...args} />,
+  render: (args) => {
+    const inputLevel = useSimulatedInputLevel()
+    const [isRecord, setIsRecord] = useState(false)
+    const [isMuted, setIsMuted] = useState(args.isMuted)
+    const [isSolo, setIsSolo] = useState(args.isSolo)
+
+    return (
+      <TrackHeader
+        {...args}
+        deviceOptions={[
+          { value: 'mic', label: 'Built-in Microphone' },
+          { value: 'interface', label: 'Audio Interface' },
+        ]}
+        channelOptions={[
+          { value: '1', label: 'Channel 1' },
+          { value: '2', label: 'Channel 2' },
+        ]}
+        isRecord={isRecord}
+        onRecordChange={() => setIsRecord((v) => !v)}
+        isMuted={isMuted}
+        onMutedChange={() => setIsMuted((v) => !v)}
+        isSolo={isSolo}
+        onSoloChange={() => setIsSolo((v) => !v)}
+        inputLevel={inputLevel}
+      />
+    )
+  },
 }
 
 export const Group = {