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:T28e4,/** * Source: https://maru.audio/ui-kit/envelope-editor * 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. */ /** * EnvelopeEditor — the envelope display and its four knobs, kept in sync. * * This is a composition rather than a new control: the shape on top is * `EnvelopeDisplay`, the row underneath is four `Knob`s, and both edit the same * value. Drag a handle and the knobs follow; turn a knob and the shape follows. * That works because neither child owns the state — this component does, and * hands each of them a controlled value. * * The time knobs use a logarithmic curve so their travel matches the display's * sqrt time axis in spirit: the short end, where envelope times actually get * chosen, gets most of the throw. * * By default the pieces float on whatever panel hosts them. Set `frame` to * pull them into one self-contained module — surface fill, hairline border, * rounded corners, the display recessed like a window — and `variant="compact"` * for a dense preset (shorter display, mini knobs, tighter gaps, a fixed * four-column knob strip) that fits a channel-strip column. */ import { useCallback, useRef, useState } from "react" import type { CSSProperties } from "react" import { token } from "maruaudio/ui/shared/theme" import type { InteractionEvent } from "maruaudio/ui/shared/use-first-interaction" import { DEFAULT_ENVELOPE_RANGES, EnvelopeDisplay, type ADSR, type EnvelopeRanges, } from "@/components/ui/envelope-display" import { Knob, type KnobVariant } from "@/components/ui/knob" export type { ADSR } from "@/components/ui/envelope-display" export interface EnvelopeEditorProps { /** Match an AR engine without exposing unsupported decay/sustain controls. */ mode?: "adsr" | "ar" /** Controlled envelope. Omit for uncontrolled operation. */ value?: ADSR /** Starting envelope when uncontrolled, and the reset target. */ defaultValue?: ADSR onChange?: (value: ADSR) => void onChangeEnd?: (value: ADSR) => void /** Fires once on the first gesture — for resuming an AudioContext. */ onInteraction?: (event: InteractionEvent) => void /** Per-segment bounds, shared by the display and the knobs. */ ranges?: EnvelopeRanges /** Host parameter paths resolved by the ambient CC mapping provider. */ paths?: Partial> /** * Layout preset. `"compact"` shrinks the whole module — a ~104 px display, * mini knobs, tighter gaps, and a fixed four-column knob strip that lines up * under the display instead of wrapping. Explicit `displayHeight` and * `knobVariant` still win over the preset. */ variant?: "default" | "compact" /** * Wrap the editor in a framed panel — `surface` fill, hairline border, * themed corner radius, tight padding — so it reads as one piece of plugin * hardware rather than loose floating parts. The display is recessed into * the panel like a window. Off by default for back-compatibility. */ frame?: boolean /** Height of the envelope display, in pixels. Defaults to 160 (compact: 104). */ displayHeight?: number /** Visual variant passed to the four knobs. Defaults to "small" (compact: "mini"). */ knobVariant?: KnobVariant /** Shape of attack, decay and release, shared with EnvelopeDisplay. */ curve?: "linear" | "exponential" /** Knob diameter override, in pixels. */ knobSize?: number /** Marker style for the knobs. */ knobIndicator?: "line" | "dot" /** Hide the knob row, leaving just the draggable shape. */ hideKnobs?: boolean /** Render the display's A/D/S/R summary strip. */ showSegmentLabels?: boolean /** How the display reads a time out (seconds in); see `EnvelopeDisplay`. */ formatTime?: (seconds: number) => string disabled?: boolean className?: string style?: CSSProperties "aria-label"?: string } const DEFAULT_ENVELOPE: ADSR = { attack: 0.01, decay: 0.2, sustain: 0.6, release: 0.4, } export function EnvelopeEditor({ mode = "adsr", value, defaultValue = DEFAULT_ENVELOPE, onChange, onChangeEnd, onInteraction, ranges, paths, variant = "default", frame = false, displayHeight, knobVariant, curve, knobSize, knobIndicator = "line", hideKnobs = false, showSegmentLabels = true, formatTime, disabled = false, className, style, "aria-label": ariaLabel, }: EnvelopeEditorProps) { const compact = variant === "compact" // The preset only fills in what the caller left unspecified, so an explicit // height or knob size always beats the variant. const resolvedDisplayHeight = displayHeight ?? (compact ? 104 : 160) const resolvedKnobVariant = knobVariant ?? (compact ? "mini" : "small") const bounds = { attack: ranges?.attack ?? DEFAULT_ENVELOPE_RANGES.attack, decay: ranges?.decay ?? DEFAULT_ENVELOPE_RANGES.decay, sustain: ranges?.sustain ?? DEFAULT_ENVELOPE_RANGES.sustain, release: ranges?.release ?? DEFAULT_ENVELOPE_RANGES.release, } const isControlled = value !== undefined const [internal, setInternal] = useState(defaultValue) const current = isControlled ? value : internal const latest = useRef(current) latest.current = current const commit = useCallback( (next: ADSR) => { if (!isControlled) setInternal(next) latest.current = next onChange?.(next) }, [isControlled, onChange] ) // One setter per parameter, so a knob only reports its own axis. const setParam = useCallback( (key: keyof ADSR) => (next: number) => commit({ ...latest.current, [key]: next }), [commit] ) const endParam = useCallback( () => onChangeEnd?.(latest.current), [onChangeEnd] ) return (

{!hideKnobs && (

{mode === "adsr" ? ( <> ) : null}

)}

) } 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":["https://pluginui.com/r/core-envelope-display.json","https://pluginui.com/r/core-knob.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/ui/envelope-editor.tsx","content":"$64","type":"registry:component","target":"@ui/envelope-editor.tsx"}],"className":"h-[70svh] min-h-80"}]]}]