62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T4178,/** * Source: https://maru.audio/ui-kit/dynamics-display * Copyright © [Maru](https://maru.audio) * * Maru UI Kit — https://maru.audio/ui-kit * * Installed from the Maru UI registry. This file is yours now: edit it * freely, it will not be overwritten unless you re-run the add command. * * Keep this item’s companion files and CSS imports together. Dependencies * declared by the registry are installed with the source. */ /** * DynamicsDisplay — a compressor or gate's transfer curve, plus its live * gain-reduction meter. * * The curve is the one picture that says what a dynamics processor does: input * level across, output level up, and wherever the line leaves the diagonal the * processor is pulling on the signal. It is *computed*, not measured, so it is * true the moment the page paints — no analyser, no AudioContext, and it * renders on the server. SVG rather than canvas for exactly that reason: the * shape changes only when a parameter moves, so there is nothing to animate and * no ref to wait for. * * The meter is the other half and answers a different question. The curve is * what the processor WOULD do at any level; the meter is what it IS doing to * this signal, right now. Both belong on the face, and the meter reading zero * in silence is honest rather than broken. * * `mode` switches the curve between the two shapes the family needs: * * - `"compressor"` — threshold, ratio and a soft knee, the standard * formulation the Web Audio `DynamicsCompressorNode` is specified against. * - `"gate"` — threshold, a `range` attenuation floor below it, and an * optional `hysteresis` band drawn as the region where the gate's state * depends on which way the level is travelling. * * All the arithmetic lives in `lib/dynamics-math`, which is pure and tested in * Node; this file is the drawing and the animation frame. * * Styling comes from CSS custom properties — see `lib/theme.ts` — with a * `color` prop to override the curve's accent for one instance. */ import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react" import type { CSSProperties } from "react" import { token } from "maruaudio/ui/shared/theme" import { createDynamicsScale, dynamicsReduction, gateThresholds, gridDecibels, kneeBand, reductionToUnit, transferPath, type DynamicsCurve, type DynamicsMode, type GatePhase, } from "maruaudio/ui/shared/dynamics-math" import { createPeakHold, useDocumentVisible, } from "maruaudio/ui/shared/use-audio-source" export interface DynamicsDisplayProps { /** Which curve to draw. */ mode?: DynamicsMode /** Threshold in dB — where the curve bends, in both modes. */ threshold: number /** Compressor only: compression ratio, n:1. */ ratio?: number /** Total knee width in dB, centred on the threshold. 0 is a hard corner. */ knee?: number /** Gate only: attenuation while shut, in dB. Negative. */ range?: number /** Gate only: how far below the threshold the gate holds open, in dB. */ hysteresis?: number /** * Gate only: which edge of the hysteresis band the solid curve draws. The * other edge is drawn faintly whenever `hysteresis` is non-zero, so the band * reads as a band rather than as two unrelated settings. */ phase?: GatePhase /** Bottom of both axes, in dB. */ minDecibels?: number /** Top of both axes, in dB. */ maxDecibels?: number /** Gridline spacing in dB. */ gridStep?: number width?: number | string /** Plot height in pixels. The plot itself stays square inside it. */ height?: number showGrid?: boolean /** Draw the dB numbers along both axes. */ showScale?: boolean /** Draw the "Input dB" / "Output dB" axis titles. */ showAxisTitles?: boolean /** Draw the dashed unity diagonal — the signal untouched. */ showUnity?: boolean /** Shade the knee's footprint on the input axis. */ showKnee?: boolean /** Mark these input levels on the curve with a dot. */ probeLevels?: ReadonlyArray /** Show the live gain-reduction meter under the plot. */ showMeter?: boolean /** * Gain reduction in dB, supplied directly — the driven form, and the exact * analogue of `LevelMeter`'s `value`. Sign-agnostic: pass * `DynamicsCompressorNode.reduction` (negative) or a positive depth. */ reduction?: number /** * Fill `target[0]` with the current gain reduction in dB and return true — * the `getData` form from the kit's audio-source contract, kept so a worklet, * a test harness or a plain number source can drive the meter with no Web * Audio involved. Returning false means "no data this frame". * * A Float32Array rather than a bare number return so the callback matches * every other live display in the kit and allocates nothing per frame. */ getReduction?: (target: Float32Array) => boolean | void /** Reduction in dB that fills the meter. */ meterRange?: number /** Stop the meter's loop and hold the last value. */ paused?: boolean /** Meter peak-hold decay, in units of full scale per second. 0 disables it. */ peakDecay?: number /** Override the curve's accent colour for this instance. */ color?: string className?: string style?: CSSProperties "aria-label"?: string } /** Reduction depths read better without a trailing ".0" at rest. */ function formatReduction(db: number): string { const depth = Math.abs(db) return depth < 0.05 ? "--" : `-${depth.toFixed(1)} dB` } export function DynamicsDisplay({ mode = "compressor", threshold, ratio = 4, knee = 0, range = -60, hysteresis = 0, phase = "opening", minDecibels = -60, maxDecibels = 0, gridStep = 12, width = "100%", height = 220, showGrid = true, showScale = true, showAxisTitles = true, showUnity = true, showKnee = true, probeLevels, showMeter = false, reduction, getReduction, meterRange = 40, paused = false, peakDecay = 0.6, color, className, style, "aria-label": ariaLabel, }: DynamicsDisplayProps) { const rawId = useId() const meterId = `uikit-dyn-${rawId.replace(/[^a-zA-Z0-9]/g, "")}` const accent = color ?? token.accent const scale = useMemo( () => createDynamicsScale({ minDecibels, maxDecibels }), [minDecibels, maxDecibels], ) const curve = useMemo( () => mode === "gate" ? { mode: "gate", threshold, range, knee, hysteresis } : { mode: "compressor", threshold, ratio, knee }, [mode, threshold, range, knee, hysteresis, ratio], ) const curvePath = useMemo( () => transferPath(curve, scale, { phase }), [curve, scale, phase], ) // The other edge of a hysteresis band, drawn faintly behind the solid curve. // Without it the band is an empty rectangle and the second threshold is a // number nobody can see. const ghostPath = useMemo(() => { if (mode !== "gate" || !(hysteresis > 0)) return null return transferPath(curve, scale, { phase: phase === "closing" ? "opening" : "closing", }) }, [mode, hysteresis, curve, scale, phase]) const band = showKnee ? kneeBand(curve, scale, phase) : null const thresholds = mode === "gate" ? gateThresholds({ threshold, hysteresis }) : null const marks = showGrid || showScale ? gridDecibels(scale, gridStep) : [] const probes = probeLevels ?? [] const { padding: pad, innerWidth: innerW, innerHeight: innerH } = scale const { inputToX, outputToY } = scale /* ------------------------------------------------------------- the meter */ const visible = useDocumentVisible() // Meter depth is animation state, not value state: it changes every frame and // no consumer needs to be told about it. const [live, setLive] = useState(0) const [peak, setPeak] = useState(0) const holdRef = useRef(createPeakHold(peakDecay)) const getReductionRef = useRef(getReduction) getReductionRef.current = getReduction const driven = reduction !== undefined const push = useCallback( (db: number, now: number) => { const unit = reductionToUnit(db, meterRange) setLive(db) setPeak(holdRef.current.push(unit, now)) }, [meterRange], ) useEffect(() => { if (!driven) return const now = typeof performance !== "undefined" ? performance.now() : Date.now() push(reduction, now) }, [driven, reduction, push]) // Whether a callback is attached, as a dependency rather than the callback // itself: a fresh closure every render must not restart the loop, but a // source appearing (the app's audio finally starting) must. const hasSource = getReduction !== undefined useEffect(() => { if (!showMeter || driven || paused || !visible || !hasSource) return if (typeof window === "undefined") return // One frame's worth of scalar. Allocated once for the life of the loop so // the animation frame allocates nothing. const buffer = new Float32Array(1) let raf = 0 const frame = () => { raf = requestAnimationFrame(frame) buffer[0] = 0 if (getReductionRef.current?.(buffer) === false) return push(buffer[0], performance.now()) } raf = requestAnimationFrame(frame) return () => cancelAnimationFrame(raf) }, [showMeter, driven, paused, visible, hasSource, push]) const liveUnit = reductionToUnit(live, meterRange) /* ------------------------------------------------------------ the drawing */ const label = ariaLabel ?? (mode === "gate" ? `Gate transfer curve: threshold ${threshold.toFixed(1)} dB, range ${range.toFixed( 0, )} dB, knee ${knee.toFixed(0)} dB${ hysteresis > 0 ? `, hysteresis ${hysteresis.toFixed(0)} dB` : "" }` : `Compressor transfer curve: threshold ${threshold.toFixed(1)} dB, ratio ${ratio.toFixed( 1, )} to 1, knee ${knee.toFixed(0)} dB`) return (

{showMeter && (

{peakDecay > 0 && peak > 0 && (

)}

{formatReduction(live)}

)}

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","maruaudio@>=0.0.3 <0.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/maruaudio","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"maruaudio@>=0.0.3 <0.1.0"}]]}]}]]}],["$","$L62",null,{"namespace":"@pluginui","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/ui/dynamics-display.tsx","content":"$64","type":"registry:component","target":"@ui/dynamics-display.tsx"}],"className":"h-[70svh] min-h-80"}]]}]