64: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"] 65:I[544296,["/_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"],"ItemStyles"] 66:I[8513,["/_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"],"ScrollArea"] 67:I[8513,["/_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"],"ScrollBar"] 68: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"] 69:T2bda,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, } from "react"; // --------------------------------------------------------------------------- // WaveformAsciiScrub — an audio-style waveform rendered as columns of ASCII // density glyphs, with a draggable playhead. The mechanic that sets this // apart from every neighboring instrument: resolution is spatial and local, // not a global hover-brighten. At rest the waveform renders at a fixed // coarse column count (one glyph column per base sample). Dragging the // playhead (or just hovering, or holding keyboard focus) subdivides the few // base columns nearest the pointer into several finer sub-columns, each // independently re-sampling the underlying (locally synthesised, no audio // API) amplitude function at its own narrower time span — so the region // under the cursor is re-inked at genuinely finer detail (more, thinner // glyph columns revealing sub-peaks the coarse column averaged away) while // the rest of the strip stays exactly as coarse as it was. The radius eases // in/out over ~250ms rather than snapping. // // Distinct from voice-recorder-meter (real Web Audio analyser bars, one bin // per bar, no drag/scrub, no resolution concept at all), scrubber-film-strip // (a physical claw-and-perforation playback scrubber — its mechanic is // slow-drag-snaps/fast-drag-glides, not spatial resolution), sparkline-ascii // (a DOM character grid, fixed resolution throughout, no drag), and // histogram-live-grain (distribution of arrivals, not a scrub position). // --------------------------------------------------------------------------- export interface WaveformAsciiScrubProps { /** Controlled scrub position, 0..1. Omit for uncontrolled (see defaultValue). */ value?: number; /** Initial position, 0..1, when uncontrolled. Default 0.3. */ defaultValue?: number; /** Total duration in seconds, used only to format aria-valuetext. Default 180. */ duration?: number; /** called with the new position on every scrub */ onValueChange?: (value: number) => void; /** accessible name for the scrubber */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } const BASE_COLS = 64; const SUBDIVIDE = 3; const FOCUS_RADIUS_COLS = 6; const MAX_ROWS = 7; const CHARSET = " .:-=+*#%@"; const VIEW_W = 600; const VIEW_H = 150; const EASE_EPS = 0.02; // Deterministic synthetic amplitude — layered sine partials plus a slow // swell envelope, so a coarse sample averages away detail that a finer // sample genuinely reveals. No audio API, no randomness. function amplitude(t: number): number { const s = t * 40; let v = 0; v += 0.5 * Math.sin(s * 2.13 + 1.7); v += 0.3 * Math.sin(s * 5.02 + 0.4); v += 0.15 * Math.sin(s * 11.7 + 2.9); v += 0.1 * Math.sin(s * 23.3 + 5.1); const swell = 0.55 + 0.45 * Math.pow(Math.sin(t * Math.PI * 2 * 1.3 + 0.6), 2); return Math.min(1, Math.abs(v) * swell); } function peakIn(t0: number, t1: number): number { const SAMPLES = 6; let peak = 0; for (let s = 0; s < SAMPLES; s++) { const t = t0 + ((t1 - t0) * (s + 0.5)) / SAMPLES; peak = Math.max(peak, amplitude(t)); } return peak; } function formatTime(frac: number, duration: number): string { const secs = Math.round(Math.max(0, Math.min(1, frac)) * duration); const m = Math.floor(secs / 60); const s = secs % 60; return `${m}:${s.toString().padStart(2, "0")}`; } interface Tokens { fg: string; bg: string; muted: string; border: string; accent: string; } function readTokens(): Tokens { const cs = getComputedStyle(document.documentElement); const get = (name: string, fallback: string) => cs.getPropertyValue(name).trim() || fallback; return { fg: get("--foreground", "#171717"), bg: get("--background", "#ffffff"), muted: get("--ns-muted", "#4d4d4d"), border: get("--border", "#ebebeb"), accent: get("--ns-accent", "#006bff"), }; } function useTokens(): Tokens { const [tokens, setTokens] = useState(() => typeof document === "undefined" ? { fg: "#171717", bg: "#ffffff", muted: "#4d4d4d", border: "#ebebeb", accent: "#006bff" } : readTokens() ); useEffect(() => { const sync = () => setTokens(readTokens()); sync(); const mo = new MutationObserver(sync); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"] }); return () => mo.disconnect(); }, []); return tokens; } export function WaveformAsciiScrub({ value, defaultValue = 0.3, duration = 180, onValueChange, label = "Scrub position", className = "", }: WaveformAsciiScrubProps) { const uid = useId(); const canvasRef = useRef(null); const wrapRef = useRef(null); const tokens = useTokens(); const isControlled = value !== undefined; const [inner, setInner] = useState(defaultValue); const playhead = isControlled ? (value as number) : inner; const [dragging, setDragging] = useState(false); const [hoverFocus, setHoverFocus] = useState(null); const [focused, setFocused] = useState(false); const reducedRef = useRef(false); useEffect(() => { reducedRef.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches; }, []); function commit(next: number) { const clamped = Math.max(0, Math.min(1, next)); if (!isControlled) setInner(clamped); onValueChange?.(clamped); } function posFromClientX(clientX: number): number { const rect = wrapRef.current?.getBoundingClientRect(); if (!rect || rect.width === 0) return playhead; return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)); } function handlePointerDown(e: ReactPointerEvent) { e.currentTarget.setPointerCapture(e.pointerId); setDragging(true); commit(posFromClientX(e.clientX)); } function handlePointerMove(e: ReactPointerEvent) { const pos = posFromClientX(e.clientX); if (dragging) commit(pos); else setHoverFocus(pos); } function handlePointerUp() { setDragging(false); } function handlePointerLeave() { if (!dragging) setHoverFocus(null); } function handleKeyDown(e: ReactKeyboardEvent) { let next = playhead; if (e.key === "ArrowLeft") next -= 0.01; else if (e.key === "ArrowRight") next += 0.01; else if (e.key === "PageDown") next -= 0.05; else if (e.key === "PageUp") next += 0.05; else if (e.key === "Home") next = 0; else if (e.key === "End") next = 1; else return; e.preventDefault(); commit(next); } // priority: an active drag wins, then a hover preview, then keyboard focus // parked at the committed playhead — otherwise no local focus at all. const targetCenter = dragging ? playhead : hoverFocus !== null ? hoverFocus : focused ? playhead : null; const radiusRef = useRef(0); const centerRef = useRef(playhead); const rafRef = useRef(0); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = VIEW_W * dpr; canvas.height = VIEW_H * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const targetRadius = targetCenter === null ? 0 : FOCUS_RADIUS_COLS; if (targetCenter !== null) centerRef.current = targetCenter; const draw = () => { ctx.clearRect(0, 0, VIEW_W, VIEW_H); ctx.strokeStyle = tokens.border; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, VIEW_H / 2 + 0.5); ctx.lineTo(VIEW_W, VIEW_H / 2 + 0.5); ctx.stroke(); const colW = VIEW_W / BASE_COLS; ctx.font = `${Math.max(8, colW * 0.95)}px "GeistMono", ui-monospace, monospace`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = tokens.fg; const rowH = (VIEW_H * 0.42) / MAX_ROWS; let x = 0; for (let i = 0; i < BASE_COLS; i++) { const t0 = i / BASE_COLS; const t1 = (i + 1) / BASE_COLS; const center = (i + 0.5) / BASE_COLS; const distCols = Math.abs(center - centerRef.current) * BASE_COLS; const subdivided = radiusRef.current > 0.5 && distCols < radiusRef.current; const parts = subdivided ? SUBDIVIDE : 1; const partW = colW / parts; for (let p = 0; p < parts; p++) { const pt0 = t0 + ((t1 - t0) * p) / parts; const pt1 = t0 + ((t1 - t0) * (p + 1)) / parts; const amp = peakIn(pt0, pt1); const rows = Math.max(1, Math.round(amp * MAX_ROWS)); const glyphIdx = Math.min(CHARSET.length - 1, Math.floor(amp * (CHARSET.length - 1))); const glyph = CHARSET[glyphIdx]; const cx = x + partW / 2; for (let r = 0; r < rows; r++) { const yy = VIEW_H / 2 - (r + 0.5) * rowH; ctx.fillText(glyph, cx, yy); ctx.fillText(glyph, cx, VIEW_H - yy); } x += partW; } } const px = playhead * VIEW_W; ctx.strokeStyle = tokens.accent; ctx.lineWidth = focused || dragging ? 2 : 1.5; ctx.beginPath(); ctx.moveTo(px + 0.5, 6); ctx.lineTo(px + 0.5, VIEW_H - 6); ctx.stroke(); let animating = false; if (reducedRef.current) { radiusRef.current = targetRadius; } else { const dr = targetRadius - radiusRef.current; if (Math.abs(dr) > EASE_EPS) { radiusRef.current += dr * 0.25; animating = true; } else { radiusRef.current = targetRadius; } } if (animating) rafRef.current = requestAnimationFrame(draw); }; draw(); return () => cancelAnimationFrame(rafRef.current); }, [tokens, playhead, targetCenter, focused, dragging]); return (