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:Tdcd,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { useImperativeHandle } from "react"; import type { Ref } from "react"; import { useClipHold } from "@/hooks/use-clip-hold"; import { useFrameSource } from "@/hooks/use-frame-source"; import { SILENCE_DB } from "@/lib/audio/decibels"; import type { FrameSource, MeterFrame } from "@/lib/audio/types"; import { CLIP_HOLD_MS, CLIP_THRESHOLD_DB } from "@/lib/audio/zones"; import { cn } from "@/lib/utils"; export interface ClipIndicatorActions { /** Feed a level reading. */ report: (db: number) => void; /** Turn the light off and clear the count. */ reset: () => void; } export interface ClipIndicatorProps extends useRender.ComponentProps<"button"> { /** Controlled clip state. When set, the component does no detection. */ clipping?: boolean; /** A meter source; the indicator detects clipping itself. */ source?: FrameSource | null; /** Levels at or above this count as a clip. Default −1 dBFS. */ thresholdDb?: number; /** How long the light stays on. `Infinity` latches until reset. Default 1500 ms. */ holdMs?: number; onClippingChange?: (clipping: boolean) => void; /** Show the number of clips next to the light. Default false. */ showCount?: boolean; actionsRef?: Ref; } const loudestPeak = (frame: MeterFrame) => { let loudest = SILENCE_DB; for (const level of frame.channels) { loudest = Math.max(loudest, level.peakDb); } return loudest; }; export const ClipIndicator = ({ clipping: clippingProp, source, thresholdDb = CLIP_THRESHOLD_DB, holdMs = CLIP_HOLD_MS, onClippingChange, showCount = false, actionsRef, render, className, children, ...props }: ClipIndicatorProps) => { const hold = useClipHold({ holdMs, onClippingChange, thresholdDb }); const clipping = clippingProp ?? hold.clipping; useFrameSource(source, (frame) => { hold.report(loudestPeak(frame)); }); useImperativeHandle( actionsRef, () => ({ report: hold.report, reset: hold.reset }), [hold.report, hold.reset] ); const content = ( <> {children ?? ( )} {showCount ? ( {hold.count} ) : null} {clipping ? "Clipping" : ""} ); return useRender({ defaultTagName: "button", props: mergeProps<"button">( { "aria-label": clipping ? "Clipping. Reset clip indicator" : "Clip indicator", children: content, className: cn( "group/clip-indicator text-muted-foreground hover:bg-muted focus-visible:ring-ring/30 data-clipping:text-meter-clip-foreground relative inline-flex h-5 shrink-0 items-center justify-center gap-1 rounded-full px-1 text-xs font-medium transition-colors outline-none after:absolute after:-inset-1 focus-visible:ring-3 pointer-coarse:after:-inset-2.5", className ), onClick: () => { hold.reset(); }, type: "button", }, props ), render, state: { clipping, slot: "clip-indicator", }, }); }; 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-clip-hold","@audiocn/use-frame-source"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/clip-indicator.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]