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:T192a,"use client"; import { useCallback, useEffect, useImperativeHandle, useRef } from "react"; import type { ComponentProps, CSSProperties, Ref, RefObject } from "react"; import { useAudioConfig } from "@/hooks/use-audio-config"; import { useFrameSource } from "@/hooks/use-frame-source"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { useVisibility } from "@/hooks/use-visibility"; import { createBarLevels } from "@/lib/audio/bar-levels"; import type { BarIdle, BarLevelsOptions } from "@/lib/audio/bar-levels"; import { subscribeFrame } from "@/lib/audio/frame-loop"; import type { FrameSource, Orientation, VisualFrame } from "@/lib/audio/types"; import { cn } from "@/lib/utils"; const DEFAULT_BAR_COUNT = 24; const DEFAULT_MIN_LEVEL = 0.08; const REDUCED_MOTION_INTERVAL_MS = 250; export interface BarVisualizerActions { /** Paint levels (0..1) directly. They are resampled to the bar count. */ paint: (levels: ArrayLike) => void; } export interface BarVisualizerProps extends ComponentProps<"div"> { /** A visual source; the bars follow its frequency bands. */ source?: FrameSource | null; /** Levels, 0..1, for declarative use. */ levels?: ArrayLike; /** Number of bars. Bands are resampled to fit. Default 24. */ barCount?: number; /** Where bars grow from. Default `center`. */ align?: "center" | "start" | "end"; /** Symmetric around the middle bar. Default false. */ mirrored?: boolean; /** Resting bar size, 0..1. Default 0.08. */ minLevel?: number; /** What the bars do with no signal. Default `static`. */ idle?: BarIdle; /** Runs a sweep animation, for connecting or thinking states. Default false. */ loading?: boolean; orientation?: Orientation; actionsRef?: Ref; } const ALIGN_CLASS = { center: "items-center", end: "items-end", start: "items-start", } as const; interface BarPainterOptions extends BarLevelsOptions { bars: (HTMLSpanElement | null)[]; input: RefObject | null>; root: RefObject; visible: RefObject; } /** Paints bars outside React, with release smoothing and idle animations. */ const createBarPainter = (options: BarPainterOptions) => { const { bars, reducedMotion } = options; const barLevels = createBarLevels(options); const shown = new Float32Array(options.barCount).fill(-1); let lastPaintMs = 0; let activeShown: boolean | null = null; return (nowMs: number) => { if (!options.visible.current) { return; } if (reducedMotion && nowMs - lastPaintMs < REDUCED_MOTION_INTERVAL_MS) { return; } lastPaintMs = nowMs; const active = barLevels.step(nowMs, options.input.current); if (active !== activeShown) { activeShown = active; options.root.current?.toggleAttribute("data-active", active); } for (const [index, value] of barLevels.levels.entries()) { if (Math.abs(value - (shown[index] ?? -1)) > 0.002) { shown[index] = value; bars[index]?.style.setProperty("--bar-level", value.toFixed(4)); } } }; }; export const BarVisualizer = ({ source, levels, barCount = DEFAULT_BAR_COUNT, align = "center", mirrored = false, minLevel = DEFAULT_MIN_LEVEL, idle = "static", loading = false, orientation: orientationProp, actionsRef, className, ref, ...props }: BarVisualizerProps) => { const config = useAudioConfig(); const orientation = orientationProp ?? config.orientation ?? "horizontal"; const reducedMotion = useReducedMotion(); const barsRef = useRef<(HTMLSpanElement | null)[]>([]); const inputRef = useRef | null>(null); const rootRef = useRef(null); const visibleRef = useVisibility(rootRef); const paint = useCallback((next: ArrayLike) => { inputRef.current = next; }, []); useFrameSource(source, (frame) => { inputRef.current = frame.bands; }); // Clear only when levels go from set to unset, so the bars fall instead of // freezing, without wiping levels painted through the handle on re-runs. const hadLevelsRef = useRef(false); useEffect(() => { if (levels) { inputRef.current = levels; hadLevelsRef.current = true; } else if (hadLevelsRef.current) { inputRef.current = null; hadLevelsRef.current = false; } }, [levels]); useImperativeHandle(actionsRef, () => ({ paint }), [paint]); useEffect(() => { const unsubscribe = subscribeFrame( createBarPainter({ barCount, bars: barsRef.current, idle, input: inputRef, loading, minLevel, mirrored, reducedMotion, root: rootRef, visible: visibleRef, }) ); const root = rootRef.current; return () => { unsubscribe(); if (root) { delete root.dataset.active; } }; }, [barCount, idle, loading, minLevel, mirrored, reducedMotion, visibleRef]); const setRootRef = useCallback( (node: HTMLDivElement | null) => { rootRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }, [ref] ); const horizontal = orientation === "horizontal"; return (

{Array.from({ length: barCount }, (_, index) => ( { barsRef.current[index] = node; }} style={{ "--bar-level": minLevel } as CSSProperties} /> ))}

); }; 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":[null,["$","$L51",null,{"namespace":"@audiocn","registryDependencies":["@audiocn/core","@audiocn/use-audio-config","@audiocn/use-frame-source","@audiocn/use-reduced-motion","@audiocn/use-visibility"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/bar-visualizer.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]