51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:T272d,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { Slider as SliderPrimitive } from "@base-ui/react/slider"; import { useRender } from "@base-ui/react/use-render"; import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react"; import type { ComponentProps } from "react"; import { useAudioConfig } from "@/hooks/use-audio-config"; import type { AudioSize } from "@/hooks/use-audio-config"; import { clamp } from "@/lib/audio/decibels"; import type { Orientation } from "@/lib/audio/types"; import { cn } from "@/lib/utils"; const PERCENT = 100; const LOW_LEVEL = 0.34; const MEDIUM_LEVEL = 0.67; const PERCEPTUAL_EXPONENT = 2; export type VolumeLevel = "muted" | "low" | "medium" | "high"; /** Maps a volume (0..1 gain) to a slider position and back. */ const curves = { linear: { toPosition: (volume: number) => volume, toVolume: (position: number) => position, }, perceptual: { toPosition: (volume: number) => volume ** (1 / PERCEPTUAL_EXPONENT), toVolume: (position: number) => position ** PERCEPTUAL_EXPONENT, }, } as const; interface VolumeControlContextValue { volume: number; muted: boolean; level: VolumeLevel; position: number; step: number; orientation: Orientation; disabled: boolean; setPosition: (position: number) => void; commit: () => void; toggleMuted: () => void; } const VolumeControlContext = createContext( null ); const useVolumeControl = (part: string) => { const context = useContext(VolumeControlContext); if (!context) { throw new Error(`${part} must be used inside VolumeControl.`); } return context; }; const levelFor = (volume: number, muted: boolean): VolumeLevel => { if (muted || volume <= 0) { return "muted"; } if (volume < LOW_LEVEL) { return "low"; } if (volume < MEDIUM_LEVEL) { return "medium"; } return "high"; }; export type VolumeControlMuteProps = useRender.ComponentProps<"button">; export const VolumeControlMute = ({ render, className, children, ...props }: VolumeControlMuteProps) => { const { disabled, level, muted, toggleMuted } = useVolumeControl("VolumeControlMute"); const label = muted ? "Unmute" : "Mute"; return useRender({ defaultTagName: "button", props: mergeProps<"button">( { "aria-label": label, "aria-pressed": muted, children: children ?? {label}, className: cn( "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring/30 inline-flex size-7 shrink-0 items-center justify-center rounded-lg transition-colors outline-none focus-visible:ring-3 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4", !children && "w-auto px-2", className ), disabled, onClick: toggleMuted, type: "button", }, props ), render, state: { level, muted, slot: "volume-control-mute" }, }); }; export type VolumeControlSliderProps = Omit< SliderPrimitive.Root.Props, | "value" | "defaultValue" | "onValueChange" | "onValueCommitted" | "min" | "max" | "step" | "orientation" >; export const VolumeControlSlider = ({ className, ...props }: VolumeControlSliderProps) => { const { commit, disabled, muted, orientation, position, setPosition, step, volume, } = useVolumeControl("VolumeControlSlider"); const horizontal = orientation === "horizontal"; const shown = muted ? 0 : position; return ( setPosition(next)} onValueCommitted={commit} orientation={orientation} step={step} value={shown} {...props} > muted ? "Muted" : `${Math.round(volume * PERCENT)}%` } /> ); }; export const VolumeControlValue = ({ className, ...props }: ComponentProps<"span">) => { const { muted, position } = useVolumeControl("VolumeControlValue"); return ( {muted ? "0%" : `${Math.round(position * PERCENT)}%`} ); }; export interface VolumeControlProps extends Omit< ComponentProps<"div">, "defaultValue" | "onChange" > { /** Volume, 0..1, like `HTMLMediaElement.volume`. */ value?: number; /** Default 1. */ defaultValue?: number; onValueChange?: (value: number) => void; onValueCommitted?: (value: number) => void; muted?: boolean; defaultMuted?: boolean; onMutedChange?: (muted: boolean) => void; /** Slider step, in position. Default 0.05. */ step?: number; /** How slider position maps to volume. Default `perceptual`. */ curve?: "linear" | "perceptual"; orientation?: Orientation; size?: AudioSize; disabled?: boolean; } export const VolumeControl = ({ value: valueProp, defaultValue = 1, onValueChange, onValueCommitted, muted: mutedProp, defaultMuted = false, onMutedChange, step = 0.05, curve = "perceptual", orientation = "horizontal", size: sizeProp, disabled: disabledProp, className, children, ...props }: VolumeControlProps) => { const config = useAudioConfig(); const size = sizeProp ?? config.size ?? "default"; const disabled = disabledProp ?? config.disabled ?? false; const [uncontrolledVolume, setUncontrolledVolume] = useState(() => clamp(defaultValue, 0, 1) ); const [uncontrolledMuted, setUncontrolledMuted] = useState(defaultMuted); const volume = valueProp ?? uncontrolledVolume; const muted = mutedProp ?? uncontrolledMuted; const lastAudibleRef = useRef(volume > 0 ? volume : 1); const mapping = curves[curve]; const setVolume = useCallback( (next: number) => { if (next > 0) { lastAudibleRef.current = next; } if (valueProp === undefined) { setUncontrolledVolume(next); } onValueChange?.(next); }, [onValueChange, valueProp] ); const setMuted = useCallback( (next: boolean) => { if (mutedProp === undefined) { setUncontrolledMuted(next); } onMutedChange?.(next); }, [mutedProp, onMutedChange] ); const contextValue = useMemo( () => ({ commit: () => onValueCommitted?.(volume), disabled, level: levelFor(volume, muted), muted, orientation, position: mapping.toPosition(volume), setPosition: (position: number) => { const next = clamp(mapping.toVolume(position), 0, 1); setVolume(next); if (muted && next > 0) { setMuted(false); } }, step, toggleMuted: () => { if (muted && volume <= 0) { setVolume(lastAudibleRef.current); } setMuted(!muted); }, volume, }), [ disabled, mapping, muted, onValueCommitted, orientation, setMuted, setVolume, step, volume, ] ); return (

{children ?? ( <> )}

); }; 50:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}]]}],["$","$L51",null,{"namespace":"@audiocn","registryDependencies":["@audiocn/core","@audiocn/use-audio-config"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/volume-control.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]