50: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"] 51: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"] 52:T16f6,"use client"; import { Slider as SliderPrimitive } from "@base-ui/react/slider"; import { cva } from "class-variance-authority"; import { useState } from "react"; import type { CSSProperties } from "react"; import { useAudioConfig } from "@/hooks/use-audio-config"; import type { AudioSize } from "@/hooks/use-audio-config"; import { clamp } from "@/lib/audio/decibels"; import { cn } from "@/lib/utils"; const PERCENT = 100; const DETENT_RANGE = 0.08; /** "L30", "C", "R30". */ export const formatPan = (value: number): string => { const amount = Math.round(Math.abs(value) * PERCENT); if (amount === 0) { return "C"; } return `${value < 0 ? "L" : "R"}${amount}`; }; const CENTER_TEXT = /^c(?:enter|entre)?$/iu; const SIDE_PREFIX = /^[LR]/iu; /** Reads "L30", "R15", "C" or a number from −100 to 100; the inverse of formatPan. */ export const parsePan = (text: string): number | null => { const trimmed = text.trim().replaceAll("\u2212", "-"); if (CENTER_TEXT.test(trimmed)) { return 0; } const side = SIDE_PREFIX.test(trimmed) ? trimmed[0]?.toUpperCase() : null; const digits = (side ? trimmed.slice(1) : trimmed).trim(); const amount = Number(digits) / PERCENT; if (digits === "" || Number.isNaN(amount)) { return null; } return side === "L" ? -Math.abs(amount) : amount; }; export const describePan = (value: number): string => { const amount = Math.round(Math.abs(value) * PERCENT); if (amount === 0) { return "Center"; } return `${amount}% ${value < 0 ? "left" : "right"}`; }; const panControlVariants = cva( "group/pan-control relative flex w-full touch-none items-center select-none data-disabled:opacity-50", { defaultVariants: { size: "default" }, variants: { size: { default: "[--pan-thumb-size:0.875rem] [--pan-track-size:0.25rem]", lg: "[--pan-thumb-size:1rem] [--pan-track-size:0.375rem]", sm: "[--pan-thumb-size:0.75rem] [--pan-track-size:0.1875rem]", }, }, } ); export interface PanControlProps extends Omit< SliderPrimitive.Root.Props, | "value" | "defaultValue" | "onValueChange" | "onValueCommitted" | "min" | "max" | "orientation" | "format" > { /** −1 (left) to 1 (right). */ value?: number; /** Default 0. */ defaultValue?: number; onValueChange?: (value: number) => void; onValueCommitted?: (value: number) => void; /** Default 0.05. */ step?: number; /** Snap to the centre while dragging near it. Default true. */ detent?: boolean; /** Default: "L30", "C", "R30". */ format?: (value: number) => string; size?: AudioSize; } export const PanControl = ({ value: valueProp, defaultValue = 0, onValueChange, onValueCommitted, step = 0.05, largeStep = 0.25, detent = true, format = formatPan, size: sizeProp, disabled: disabledProp, className, ...props }: PanControlProps) => { const config = useAudioConfig(); const size = sizeProp ?? config.size ?? "default"; const disabled = disabledProp ?? config.disabled ?? false; const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultValue, -1, 1) ); const value = valueProp ?? uncontrolled; const setValue = (next: number) => { if (valueProp === undefined) { setUncontrolled(next); } onValueChange?.(next); }; const start = Math.min(0, value); const end = Math.max(0, value); return ( { const snapped = detent && details.reason === "drag" && Math.abs(next) < DETENT_RANGE ? 0 : next; setValue(snapped); }} onValueCommitted={(next) => { onValueCommitted?.(detent && Math.abs(next) < DETENT_RANGE ? 0 : next); }} step={step} value={value} {...props} >

describePan(value)} onDoubleClick={() => { setValue(0); onValueCommitted?.(0); }} /> {format(value)} ); }; export { panControlVariants }; 4f:["$","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"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@audiocn","registryDependencies":["@audiocn/core","@audiocn/use-audio-config"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/pan-control.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]