// shared: icons, audio engine, waveform canvas, small components const IC = { inbox: , wave: , chart: , doc: , queue: , play: , pause: , lock: , sun: , moon: , prev: , next: , tail: , // --- product nav --- home: , explore: , tts: , changer: , fx: , imgvid: , isolator: , studio: , dubbing: , music: , productions: , help: , settings: , bank: , // --- chrome / actions --- collapse: , expand: , search: , bell: , chat: , crown: , plus: , mail: , people: , logout: , qr: , shield: , more: , pencil: , download: , undo: , stop: , share: , trash: , mic: , back: , chevR: , chevL: , chevD: , chevUD: , swap: , zoomIn: , zoomOut: , headphone: , mute: , speaker: , file: , note: , reset: , sort: , check: , eq: , reviewer: , bars: , voicescan: , chatprofile: }; function Icon({ n, s = 15, sw = 1.8, flip }) { // Prefer the real Figma icon set (console/icons/icon-data.window.js); // fall back to the hand-drawn stroke set for anything it doesn't carry. const figName = FIGMAP[n]; const fig = figName && window.FIGICONS && window.FIGICONS[figName]; if (fig) return ; return {IC[n]}; } // semantic name -> Figma component name (from console/icons/Icon.d.ts) const FIGMAP = { home: 'Home50', explore: 'DiscoverCircle', tts: 'Type', changer: 'SongsWaveScan', review: 'SongsWave', fx: 'VolumeHigh', imgvid: 'FolderFileImage', isolator: 'MicrophoneAddPlus', studio: 'Layout04', dubbing: 'PlaySquare', music: 'MusicLibrary', productions: 'FlimSlate', help: 'QuestionMarkSquare', settings: 'Setting9', bank: 'Home50', search: 'Search', bell: 'NewRingtoneMessage', chat: 'Messages4', crown: 'Crown', plus: 'Plus4', more: 'InfoMenu3', pencil: 'Edit', download: 'Download1', share: 'Share3', trash: 'Delete2', mic: 'MicrophoneAddPlus', back: 'ArrowLeft2', chevR: 'ArrowRightSLine', chevL: 'ArrowLeftSLine', chevD: 'ArrowDown2', chevUD: 'UnfoldMore', swap: 'EnlargeHorizontal2', zoomIn: 'SearchAdd', zoomOut: 'SearchMinus', headphone: 'Headphone2', mute: 'VolumeOff', speaker: 'VolumeHigh', file: 'Mp301', video: 'Video', note: 'DocumentBadgePlus', reset: 'Update1', sort: 'SortDown', check: 'Checkmark2', play: 'Play', pause: 'Pause', prev: 'Backward', next: 'Forward', collapse: 'LeftLine', expand: 'LeftLine', filter: 'Filter', copy: 'Copy1', save: 'FloppyDiskSave', close: 'CloseRemove', time: 'TimeCircle', seen: 'SeenCheckmark', /* reviewer: SongsWaveScan is a solid-fill glyph that reads as a dark tile at 20px — fall through to the local stroke wave-scan icon instead */ wave: 'SongsWave', chart: 'WhiteboardChart', doc: 'BookOpen01', queue: 'PlayList', inbox: 'PhoneWaveMusic', lock: 'Lock', eq: 'Setting7', upload: 'CloudUpload', translate: 'Translation', caption: 'ClosedCaptionAlt', book: 'AudioBook02', cpu: 'CpuProcessorCharge', mail: 'Email2', logout: 'Logout', bars: 'Analytics01', voicescan: 'SongsWaveScan', chatprofile: 'ChatProfile' }; // --- audio engine: speech-like murmur synth, simulated playback clock --- const Player = { ctx: null, nodes: null, el: null, raf: 0, t0: 0, from: 0, art: null, cb: null, endCb: null, until: null, ensure() { if (!this.ctx) this.ctx = new (window.AudioContext || window.webkitAudioContext)(); return this.ctx; }, start(art, from, seed, cb, endCb, until) { this.stop(); if (art && art.src) return this.startFile(art, from, cb, endCb, until); const ctx = this.ensure(); if (ctx.state === 'suspended') ctx.resume(); this.art = art; this.from = from; this.cb = cb; this.endCb = endCb; this.until = until || art.dur; const v = LAB.voices[art.voice] || art; const osc = ctx.createOscillator(); osc.type = 'sawtooth'; const base = v.g === 'F' ? 195 : 112; osc.frequency.value = base; const vib = ctx.createOscillator(); vib.frequency.value = 4.6; const vibG = ctx.createGain(); vibG.gain.value = base * 0.06; vib.connect(vibG); vibG.connect(osc.frequency); const filt = ctx.createBiquadFilter(); filt.type = 'lowpass'; filt.frequency.value = 720; filt.Q.value = 0.8; const gain = ctx.createGain(); gain.gain.value = 0; osc.connect(filt); filt.connect(gain); gain.connect(ctx.destination); const peaks = wavePeaks(seed, 220); const now = ctx.currentTime, remain = this.until - from; for (let i = 0; i < 220; i++) { const tt = (i / 220) * art.dur; if (tt < from || tt > this.until) continue; gain.gain.setTargetAtTime(peaks[i] * 0.05, now + (tt - from), 0.03); osc.frequency.setTargetAtTime(base * (0.9 + peaks[i] * 0.35), now + (tt - from), 0.05); } gain.gain.setTargetAtTime(0, now + remain, 0.02); osc.start(); vib.start(); this.nodes = { osc, vib, gain }; this.t0 = performance.now(); const tick = () => { const t = this.from + (performance.now() - this.t0) / 1000; if (t >= this.until) { const e = this.endCb; this.stop(); e && e(); return; } this.cb && this.cb(t); this.raf = requestAnimationFrame(tick); }; this.raf = requestAnimationFrame(tick); }, // real evaluation audio — the console plays the actual rendered WAV startFile(art, from, cb, endCb, until) { this.art = art; this.from = from; this.cb = cb; this.endCb = endCb; this.until = until || art.dur; const el = this.el || (this.el = new Audio()); if (el.getAttribute('src') !== art.src) { el.setAttribute('src', art.src); el.load(); } el.currentTime = from; el.play().catch(() => {}); const tick = () => { const t = el.currentTime; if (t >= this.until - 0.02 || el.ended) { const e = this.endCb; this.stop(); e && e(); return; } this.cb && this.cb(t); this.raf = requestAnimationFrame(tick); }; this.raf = requestAnimationFrame(tick); }, stop() { cancelAnimationFrame(this.raf); if (this.el) { try { this.el.pause(); } catch (e) {} } if (this.nodes) { try { this.nodes.gain.gain.cancelScheduledValues(0); this.nodes.gain.gain.value = 0; this.nodes.osc.stop(); this.nodes.vib.stop(); } catch (e) {} this.nodes = null; } this.art = null; } }; window.Player = Player; // --- waveform canvas --- // Bars are a FIXED size (barW + gap) and the count is derived from the container, // so a wave looks identical at any width instead of stretching. Peaks are resampled. function WaveCanvas({ peaks, progress = 0, height = 150, region, markers = [], onSeek, onRegion, accent, dim: dimC, className, barW = 4, gap = 2, minH = 3, caps = true }) { const ref = React.useRef(null); const drag = React.useRef(null); const [tmpRegion, setTmpRegion] = React.useState(null); const draw = () => { const cv = ref.current; if (!cv) return; const dpr = window.devicePixelRatio || 1; const w = cv.clientWidth, h = cv.clientHeight; if (!w || !h) return; if (cv.width !== Math.round(w * dpr)) { cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr); } const x = cv.getContext('2d'); x.setTransform(dpr, 0, 0, dpr, 0, 0); x.clearRect(0, 0, w, h); const cs = getComputedStyle(document.body); const dim = dimC || cs.getPropertyValue('--wave-dim').trim() || '#dddddd'; const inkC = cs.getPropertyValue('--ink').trim() || '#010101'; const warnC = cs.getPropertyValue('--warn').trim(); const accC = accent || cs.getPropertyValue('--wave').trim() || cs.getPropertyValue('--accent').trim(); const step = barW + gap; const n = Math.max(1, Math.floor((w + gap) / step)); const src = peaks && peaks.length ? peaks : [0]; const r = Math.min(barW / 2, 2.5); const mid = h / 2; // Fade toward the SAME colour at zero alpha. Using `transparent` (rgba(0,0,0,0)) // makes canvas interpolate through black, which is the dark grey fringe. const zeroAlpha = col => { x.fillStyle = col; const c = x.fillStyle; if (c[0] === '#') { const n = c.length === 4 ? [c[1] + c[1], c[2] + c[2], c[3] + c[3]] : [c.slice(1, 3), c.slice(3, 5), c.slice(5, 7)]; const [r, g, b] = n.map(h => parseInt(h, 16)); return `rgba(${r},${g},${b},0)`; } const p = c.match(/[\d.]+/g) || [0, 0, 0]; return `rgba(${p[0]},${p[1]},${p[2]},0)`; }; const grad = (col, y0, y1) => { const clear = zeroAlpha(col); const g = x.createLinearGradient(0, y0, 0, y1); g.addColorStop(0, clear); g.addColorStop(.30, col); g.addColorStop(.70, col); g.addColorStop(1, clear); return g; }; for (let i = 0; i < n; i++) { // resample: average the source bucket so density never distorts the shape const a = Math.floor((i / n) * src.length), b = Math.max(a + 1, Math.floor(((i + 1) / n) * src.length)); let sum = 0; for (let k = a; k < b; k++) sum += src[k]; const p = sum / (b - a); const ph = Math.max(minH, p * (h - 4)); const bx = i * step, by = mid - ph / 2; const played = (i + 0.5) / n <= progress; const col = played ? accC : dim; // both played and unplayed bars fade toward their tips, each to its own // colour at zero alpha (never through black) x.fillStyle = ph > 8 ? grad(col, by, by + ph) : col; x.beginPath(); if (x.roundRect) x.roundRect(bx, by, barW, ph, r); else x.rect(bx, by, barW, ph); x.fill(); } const reg = tmpRegion || region; if (reg) { const x0 = reg[0] * w, x1 = reg[1] * w; // selection sits in our own palette, not an amber highlighter x.fillStyle = 'rgba(27,171,68,.07)'; x.fillRect(x0, 0, x1 - x0, h); x.strokeStyle = accC; x.lineWidth = 1; x.globalAlpha = .5; x.beginPath(); x.moveTo(x0 + 0.5, 0); x.lineTo(x0 + 0.5, h); x.moveTo(x1 - 0.5, 0); x.lineTo(x1 - 0.5, h); x.stroke(); x.globalAlpha = 1; } markers.forEach(m => { x.fillStyle = accC; x.fillRect(m * w - 1, 0, 2, 6); x.fillRect(m * w - 1, h - 6, 2, 6); }); // playhead: hairline in the accent with round caps, the way the kit draws it if (progress > 0 && progress < 1) { const px = Math.round(progress * w) + 0.5; x.strokeStyle = accC; x.lineWidth = 1.5; x.lineCap = 'round'; x.beginPath(); x.moveTo(px, caps ? 5 : 0); x.lineTo(px, h - (caps ? 5 : 0)); x.stroke(); if (caps) { x.fillStyle = accC; x.beginPath(); x.arc(px, 5, 4, 0, 7); x.fill(); x.beginPath(); x.arc(px, h - 5, 4, 0, 7); x.fill(); } } }; React.useEffect(draw); React.useEffect(() => { const r = () => draw(); window.addEventListener('resize', r); return () => window.removeEventListener('resize', r); }); const frac = e => { const r = ref.current.getBoundingClientRect(); return Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); }; const down = e => { drag.current = { start: frac(e), moved: false }; }; const move = e => { if (!drag.current || !onRegion) return; const f = frac(e); if (Math.abs(f - drag.current.start) > 0.01) { drag.current.moved = true; setTmpRegion([Math.min(drag.current.start, f), Math.max(drag.current.start, f)]); } }; const up = e => { if (!drag.current) return; const f = frac(e); if (drag.current.moved && onRegion) onRegion([Math.min(drag.current.start, f), Math.max(drag.current.start, f)]); else if (onSeek) onSeek(f); drag.current = null; setTmpRegion(null); }; return { drag.current = null; setTmpRegion(null); }}>; } // static mini waveform for review cards (SVG, cheap) — dense continuous bars function MiniWave({ seed, played = 0, accentAll = false, height = 28 }) { const N = 96, W = 300, pitch = W / N, bw = pitch * 0.55; const peaks = React.useMemo(() => wavePeaks(seed, N), [seed]); return {peaks.map((p, i) => { const h = Math.max(2, p * height * 0.92); const on = accentAll || (i / N) <= played; return ; })} ; } // table-cell waveform thumbnail (the kit's "Voice Duration" cell) — fixed 2px bars function CellWave({ seed, bars, w = 96, h = 22, barW = 2, gap = 1.5, played = 0 }) { const n = bars || Math.floor((w + gap) / (barW + gap)); const peaks = React.useMemo(() => wavePeaks(seed, n), [seed, n]); return {peaks.map((p, i) => { const ph = Math.max(2, p * (h - 2)); return ; })} ; } function Chip({ kind, children }) { return {children}; } function Tag({ kind, children }) { return {children}; } function VDot({ voice, s = 26 }) { const v = LAB.voices[voice]; return {v.name[0]}; } // the kit's Logo component (36×36, r8, primary-600 with a primary-500 inset // and the 3-path white glyph transcribed from /Component/components/Logo/Logo.jsx) function KLogo({ s = 36 }) { return ; } // the kit's Avatar-1 bitmap (copied verbatim out of the .fig) function KAvatar({ s = 32 }) { return ; } // voice identity mark — typographic monogram in the kit's neutral tokens. // No illustration/bitmap imagery: the .fig's Voice Component art is not ours to ship here. function VoiceAvatar({ s = 30, id = '', name = '' }) { const ch = (name || id || '?').trim().charAt(0).toUpperCase(); return {ch}; } // checkbox in the kit's style function Cbx({ on, onChange }) { return ; } // pagination footer used by every table screen function Pager({ page = 1, total = 24, per = 6, onPage }) { const nums = [1, 2, 3, 4, 5]; return
Page {page} of {total}
{nums.map(n => )} …
; } // Slider [1.0] — transcribed from /Component/components/Percentage75: // 62 tall / gap 6, label Open Sans 500 16/20, track 6px r96 gray-200, // progress primary-600, dot 16px white ring + inner 6px primary-600. function VSlider({ label, value, min = 0, max = 1, lo, hi, onChange }) { const pct = ((value - min) / (max - min)) * 100; const ref = React.useRef(null); const set = e => { const r = ref.current.getBoundingClientRect(); const f = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); onChange && onChange(min + f * (max - min)); }; return
{label &&
{label}
}
{ set(e); const mv = ev => set(ev); const up = () => { window.removeEventListener('mousemove', mv); window.removeEventListener('mouseup', up); }; window.addEventListener('mousemove', mv); window.addEventListener('mouseup', up); }}>
{lo}{hi}
; } function Toggle({ on, onChange, label }) { return ; } // --- edge fades on every scroll region --- // A scroller gets a mask that fades only the edge it can actually scroll toward, // so a full list fades top+bottom, a list at rest fades only downward, and a // container with nothing to scroll shows no fade at all. const FADE_Y = '.nav-scroll,.scroll,.col-cards,.pane,.qlist,.doclist,.docbody,.submenu,.train,.wb-stage,.wb-side,.tl-insp,.board,.rs-main,.rss-list,.dv-main,.dv-side,.ar-page,.pop,.sm-takes'; const FADE_X = '.dubrow,.lanestrip,.tl-lanes,.vb-tags,.rv-rail,.ar-chips,.dv-langs'; const FADE = 28; function paintFade(el, horiz) { const span = horiz ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight; // a nav row must never sit half-masked (it reads as disabled), so the rail fades short const size = el.classList.contains('nav-scroll') ? 10 : FADE; if (span <= 2) { el.style.setProperty('--f-a', '0px'); el.style.setProperty('--f-b', '0px'); return; } const pos = horiz ? el.scrollLeft : el.scrollTop; el.style.setProperty('--f-a', Math.round(Math.max(0, Math.min(size, pos))) + 'px'); el.style.setProperty('--f-b', Math.round(Math.max(0, Math.min(size, span - pos))) + 'px'); } function scanFades() { document.querySelectorAll(FADE_Y).forEach(el => { el.classList.add('fade-y'); paintFade(el, false); }); document.querySelectorAll(FADE_X).forEach(el => { el.classList.add('fade-x'); paintFade(el, true); }); } function initScrollFades() { document.addEventListener('scroll', e => { const el = e.target; if (!(el instanceof Element)) return; if (el.classList.contains('fade-y')) paintFade(el, false); if (el.classList.contains('fade-x')) paintFade(el, true); }, true); window.addEventListener('resize', scanFades); new MutationObserver(scanFades).observe(document.documentElement, { childList: true, subtree: true }); // content can change size without mutating (fonts, canvases) — cheap settle pass setInterval(scanFades, 400); scanFades(); } Object.assign(window, { Icon, WaveCanvas, MiniWave, CellWave, Chip, Tag, VDot, VoiceAvatar, KLogo, KAvatar, Cbx, Pager, VSlider, Toggle, initScrollFades, scanFades, wavePeaks });