(\"timeline\");\n const [session, setSession] = useState(defaultSession);\n\n // Audio engine refs — shared across all tabs\n const audioCtxRef = useRef(null);\n // Binaural\n const leftOscRef = useRef(null);\n const rightOscRef = useRef(null);\n const binauralGainRef = useRef(null);\n // Ocean\n const oceanNoiseRef = useRef(null);\n const oceanLfoRef = useRef(null);\n const oceanGainRef = useRef(null);\n // Clock\n const clockTimerRef = useRef | null>(null);\n const clockRunningRef = useRef(false);\n const nextTickRef = useRef(0);\n const nextPolyRef = useRef(0);\n // Master analyser for waveform\n const analyserRef = useRef(null);\n const masterGainRef = useRef(null);\n // Wisdom timer\n const wisdomTimerRef = useRef | null>(null);\n const sessionStartRef = useRef(null);\n\n const [sessionElapsedSec, setSessionElapsedSec] = useState(0);\n\n const getCtx = useCallback(() => {\n if (!audioCtxRef.current) {\n const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n audioCtxRef.current = new Ctx();\n }\n const ctx = audioCtxRef.current;\n if (ctx.state === \"suspended\") ctx.resume();\n\n // Setup master chain once — limiter gain so all layers mix without clipping\n if (!analyserRef.current) {\n const analyser = ctx.createAnalyser();\n analyser.fftSize = 2048;\n const limiter = ctx.createGain();\n limiter.gain.value = 0.85;\n const master = ctx.createGain();\n master.gain.value = 1;\n master.connect(limiter);\n limiter.connect(analyser);\n analyser.connect(ctx.destination);\n analyserRef.current = analyser;\n masterGainRef.current = master;\n }\n return ctx;\n }, []);\n\n // ── START BINAURAL ────────────────────────────────────────────────────────\n const startBinaural = useCallback((ctx: AudioContext, s: SessionState) => {\n if (leftOscRef.current) { leftOscRef.current.stop(); leftOscRef.current.disconnect(); }\n if (rightOscRef.current) { rightOscRef.current.stop(); rightOscRef.current.disconnect(); }\n\n const left = ctx.createOscillator();\n const right = ctx.createOscillator();\n const lp = ctx.createStereoPanner(); lp.pan.value = -1;\n const rp = ctx.createStereoPanner(); rp.pan.value = 1;\n const gain = ctx.createGain();\n gain.gain.setValueAtTime(0, ctx.currentTime);\n gain.gain.linearRampToValueAtTime(0.38, ctx.currentTime + 1.5);\n\n left.connect(lp); right.connect(rp);\n lp.connect(gain); rp.connect(gain);\n gain.connect(masterGainRef.current!);\n\n left.frequency.value = s.baseFreq;\n right.frequency.value = s.baseFreq + s.beatFreq;\n left.start(); right.start();\n leftOscRef.current = left;\n rightOscRef.current = right;\n binauralGainRef.current = gain;\n }, []);\n\n const stopBinaural = useCallback(() => {\n leftOscRef.current?.stop(); leftOscRef.current?.disconnect();\n rightOscRef.current?.stop(); rightOscRef.current?.disconnect();\n leftOscRef.current = null; rightOscRef.current = null;\n }, []);\n\n // ── START OCEAN ───────────────────────────────────────────────────────────\n function makeBrown(ctx: AudioContext) {\n const size = ctx.sampleRate * 4;\n const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n const out = buf.getChannelData(0);\n let last = 0;\n for (let i = 0; i < size; i++) {\n const w = Math.random() * 2 - 1;\n out[i] = (last + 0.02 * w) / 1.02; last = out[i]; out[i] *= 3.5;\n }\n return buf;\n }\n\n const startOcean = useCallback((ctx: AudioContext, s: SessionState) => {\n if (oceanNoiseRef.current) { oceanNoiseRef.current.stop(); oceanNoiseRef.current.disconnect(); }\n if (oceanLfoRef.current) { oceanLfoRef.current.stop(); oceanLfoRef.current.disconnect(); }\n\n const master = ctx.createGain(); master.gain.value = 0.42;\n master.connect(masterGainRef.current!);\n\n const waveGain = ctx.createGain(); waveGain.gain.value = 0.48;\n waveGain.connect(master);\n\n const lfo = ctx.createOscillator(); lfo.type = \"sine\";\n lfo.frequency.value = s.breathRate / 60;\n const lfoG = ctx.createGain(); lfoG.gain.value = 0.5;\n lfo.connect(lfoG); lfoG.connect(waveGain.gain); lfo.start();\n\n const noise = ctx.createBufferSource();\n noise.buffer = makeBrown(ctx); noise.loop = true;\n noise.connect(waveGain); noise.start();\n\n oceanNoiseRef.current = noise;\n oceanLfoRef.current = lfo;\n oceanGainRef.current = master;\n }, []);\n\n const stopOcean = useCallback(() => {\n oceanNoiseRef.current?.stop(); oceanNoiseRef.current?.disconnect();\n oceanLfoRef.current?.stop(); oceanLfoRef.current?.disconnect();\n oceanGainRef.current?.disconnect();\n oceanNoiseRef.current = null; oceanLfoRef.current = null;\n }, []);\n\n // ── CLOCK SCHEDULER ───────────────────────────────────────────────────────\n const sessionRef = useRef(session);\n sessionRef.current = session;\n\n const scheduleClock = useCallback(() => {\n const ctx = audioCtxRef.current;\n if (!ctx || !masterGainRef.current || !clockRunningRef.current) return;\n const s = sessionRef.current;\n const ahead = 0.1;\n\n while (nextTickRef.current < ctx.currentTime + ahead) {\n const t = nextTickRef.current;\n const osc = ctx.createOscillator(); const g = ctx.createGain();\n osc.connect(g); g.connect(masterGainRef.current);\n osc.type = \"sine\"; osc.frequency.setValueAtTime(900, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.06);\n g.gain.setValueAtTime(0.28, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.06);\n osc.start(t); osc.stop(t + 0.07);\n nextTickRef.current += s.tickSpeed / 1000;\n }\n while (nextPolyRef.current < ctx.currentTime + ahead) {\n const t = nextPolyRef.current;\n // Gong-like accent: fundamental + octave harmonic for metallic resonance\n const osc1 = ctx.createOscillator(); const g1 = ctx.createGain();\n const osc2 = ctx.createOscillator(); const g2 = ctx.createGain();\n osc1.type = \"sine\"; osc1.frequency.setValueAtTime(180, t); osc1.frequency.exponentialRampToValueAtTime(120, t + 0.55);\n osc2.type = \"sine\"; osc2.frequency.setValueAtTime(360, t); osc2.frequency.exponentialRampToValueAtTime(240, t + 0.3);\n g1.gain.setValueAtTime(0.32, t); g1.gain.exponentialRampToValueAtTime(0.001, t + 0.6);\n g2.gain.setValueAtTime(0.12, t); g2.gain.exponentialRampToValueAtTime(0.001, t + 0.35);\n osc1.connect(g1); osc2.connect(g2); g1.connect(masterGainRef.current); g2.connect(masterGainRef.current);\n osc1.start(t); osc1.stop(t + 0.6); osc2.start(t); osc2.stop(t + 0.35);\n nextPolyRef.current += s.polySpeed;\n }\n if (clockRunningRef.current) clockTimerRef.current = setTimeout(scheduleClock, 25);\n }, []);\n\n const startClock = useCallback((ctx: AudioContext) => {\n if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n clockRunningRef.current = true;\n nextTickRef.current = ctx.currentTime + 0.05;\n nextPolyRef.current = ctx.currentTime + 0.05;\n scheduleClock();\n }, [scheduleClock]);\n\n const stopClock = useCallback(() => {\n clockRunningRef.current = false;\n if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n clockTimerRef.current = null;\n }, []);\n\n // ── WISDOM SPEAKER ────────────────────────────────────────────────────────\n const speakWisdom = useCallback(async (quotes: any[], voice: string) => {\n const enabled = quotes.filter((q: any) => q.enabled);\n if (!enabled.length) return;\n const q = enabled[Math.floor(Math.random() * enabled.length)];\n\n try {\n const r = await fetch(\"/api/tts\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text: q.text, voice }),\n });\n if (!r.ok) return;\n const blob = await r.blob();\n\n // Apply reverb via Web Audio\n const ctx = getCtx();\n const arrayBuf = await blob.arrayBuffer();\n const decoded = await ctx.decodeAudioData(arrayBuf);\n const src = ctx.createBufferSource();\n src.buffer = decoded;\n\n // Convolver for reverb\n const convolver = ctx.createConvolver();\n const reverbLen = ctx.sampleRate * 2.5;\n const reverbBuf = ctx.createBuffer(2, reverbLen, ctx.sampleRate);\n for (let ch = 0; ch < 2; ch++) {\n const d = reverbBuf.getChannelData(ch);\n for (let i = 0; i < reverbLen; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / reverbLen, 2);\n }\n convolver.buffer = reverbBuf;\n\n const dryGain = ctx.createGain(); dryGain.gain.value = 0.6;\n const wetGain = ctx.createGain(); wetGain.gain.value = 0.25;\n\n src.connect(dryGain); dryGain.connect(masterGainRef.current!);\n src.connect(convolver); convolver.connect(wetGain); wetGain.connect(masterGainRef.current!);\n src.start();\n } catch (e) { console.error(\"TTS error\", e); }\n }, [getCtx]);\n\n // ── MASTER PLAY / STOP ────────────────────────────────────────────────────\n const masterPlay = useCallback(async () => {\n const ctx = getCtx();\n const s = sessionRef.current;\n\n if (s.binauralOn) startBinaural(ctx, s);\n if (s.oceanOn) startOcean(ctx, s);\n if (s.clockOn) startClock(ctx);\n\n if (s.wisdomOn) {\n try {\n const r = await fetch(\"/api/quotes\");\n const quotes = await r.json();\n speakWisdom(quotes, s.wisdomVoice);\n wisdomTimerRef.current = setInterval(async () => {\n const r2 = await fetch(\"/api/quotes\");\n const q2 = await r2.json();\n speakWisdom(q2, sessionRef.current.wisdomVoice);\n }, s.wisdomIntervalMin * 60 * 1000);\n } catch (e) { console.error(\"Wisdom fetch error\", e); }\n }\n\n sessionStartRef.current = performance.now();\n setSession(prev => ({ ...prev, playing: true }));\n }, [getCtx, startBinaural, startOcean, startClock, speakWisdom]);\n\n const masterStop = useCallback(() => {\n stopBinaural();\n stopOcean();\n stopClock();\n if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current);\n wisdomTimerRef.current = null;\n sessionStartRef.current = null;\n setSessionElapsedSec(0);\n setSession(prev => ({ ...prev, playing: false }));\n }, [stopBinaural, stopOcean, stopClock]);\n\n useEffect(() => {\n if (!session.playing || sessionStartRef.current == null) return;\n const tick = () => {\n const elapsed = (performance.now() - sessionStartRef.current!) / 1000;\n setSessionElapsedSec(elapsed);\n };\n tick(); // initial\n const id = setInterval(tick, 100);\n return () => clearInterval(id);\n }, [session.playing]);\n\n const toggleMaster = useCallback(() => {\n if (session.playing) masterStop();\n else masterPlay();\n }, [session.playing, masterPlay, masterStop]);\n\n // Update binaural in real-time when params change while playing\n useEffect(() => {\n if (session.playing && session.binauralOn && leftOscRef.current && rightOscRef.current && audioCtxRef.current) {\n const ctx = audioCtxRef.current;\n leftOscRef.current.frequency.setTargetAtTime(session.baseFreq, ctx.currentTime, 0.1);\n rightOscRef.current.frequency.setTargetAtTime(session.baseFreq + session.beatFreq, ctx.currentTime, 0.1);\n }\n }, [session.baseFreq, session.beatFreq]);\n\n // Update ocean LFO in real-time\n useEffect(() => {\n if (session.playing && session.oceanOn && oceanLfoRef.current && audioCtxRef.current) {\n oceanLfoRef.current.frequency.setTargetAtTime(session.breathRate / 60, audioCtxRef.current.currentTime, 0.5);\n }\n }, [session.breathRate]);\n\n // Restart clock if speed changes while playing\n useEffect(() => {\n if (session.playing && session.clockOn && audioCtxRef.current) {\n stopClock();\n startClock(audioCtxRef.current);\n }\n }, [session.tickSpeed, session.polySpeed]);\n\n // React to layer pills while playing — start/stop each layer independently\n useEffect(() => {\n if (!session.playing || !audioCtxRef.current) return;\n if (session.clockOn) startClock(audioCtxRef.current);\n else stopClock();\n }, [session.clockOn]);\n\n useEffect(() => {\n if (!session.playing || !audioCtxRef.current) return;\n if (session.binauralOn) startBinaural(audioCtxRef.current, sessionRef.current);\n else stopBinaural();\n }, [session.binauralOn]);\n\n useEffect(() => {\n if (!session.playing || !audioCtxRef.current) return;\n if (session.oceanOn) startOcean(audioCtxRef.current, sessionRef.current);\n else stopOcean();\n }, [session.oceanOn]);\n\n useEffect(() => {\n if (!session.playing) return;\n if (!session.wisdomOn) {\n if (wisdomTimerRef.current) { clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; }\n return;\n }\n let cancelled = false;\n const intervalMin = sessionRef.current.wisdomIntervalMin;\n (async () => {\n try {\n const r = await fetch(\"/api/quotes\");\n if (cancelled) return;\n const quotes = await r.json();\n if (cancelled) return;\n speakWisdom(quotes, sessionRef.current.wisdomVoice);\n if (cancelled) return;\n wisdomTimerRef.current = setInterval(async () => {\n if (!sessionRef.current.wisdomOn) return;\n const r2 = await fetch(\"/api/quotes\");\n const q2 = await r2.json();\n speakWisdom(q2, sessionRef.current.wisdomVoice);\n }, intervalMin * 60 * 1000);\n } catch (e) { if (!cancelled) console.error(\"Wisdom fetch error\", e); }\n })();\n return () => { cancelled = true; if (wisdomTimerRef.current) clearInterval(wisdomTimerRef.current); wisdomTimerRef.current = null; };\n }, [session.wisdomOn, session.wisdomIntervalMin]);\n\n useEffect(() => () => { masterStop(); }, []);\n\n const NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n { id: \"timeline\", label: \"FLOW\", accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n { id: \"binaural\", label: \"BEATS\", accent: \"var(--accent-blue)\", icon: \"Waves\" },\n { id: \"ocean\", label: \"OCEAN\", accent: \"var(--accent-cyan)\", icon: \"Ocean\" },\n { id: \"wisdom\", label: \"WISDOM\", accent: \"var(--accent-amber)\", icon: \"Quote\" },\n { id: \"clock\", label: \"CLOCK\", accent: \"var(--accent-green)\", icon: \"Clock\" },\n ];\n\n const activeAccent = NAV.find(n => n.id === tab)?.accent ?? \"var(--accent-blue)\";\n\n return (\n

\n \n\n

\n {/* ── HEADER ── */}\n

\n \n brain\n \n

\n · Binaural beats for the token breather - Tomaso Valmax\n

\n\n {/* ── WAVEFORM ── */}\n

\n \n

\n\n {/* ── ACTIVE SEGMENT BADGE ── */}\n {session.activeSegment && session.playing && (\n

\n \n {session.activeSegment.label.toUpperCase()} · {session.activeSegment.brainwave.toUpperCase()}\n \n

\n )}\n\n {/* ── MAIN CONTENT ── */}\n

\n {tab === \"timeline\" && }\n {tab === \"binaural\" && }\n {tab === \"ocean\" && }\n {tab === \"wisdom\" && }\n {tab === \"clock\" && }\n

\n\n {/* ── BOTTOM TOOLBAR (mobile) — play centered ── */}\n

\n {NAV.slice(0, 2).map(({ id, label, accent, icon }) => {\n const Icon = Icons[icon] as () => JSX.Element;\n const active = tab === id;\n return (\n \n );\n })}\n

\n \n {session.playing\n ? \n : \n }\n \n

\n {NAV.slice(2).map(({ id, label, accent, icon }) => {\n const Icon = Icons[icon] as () => JSX.Element;\n const active = tab === id;\n return (\n \n );\n })}\n

\n );\n}\n",[],[84,122],"fc6fefec-1e73-11f1-a4d1-42dde27851f2","AdminQuotesPage.tsx","fc6ff0aa-1e73-11f1-a4d1-42dde27851f2",67,["D",1773361893038],"/**\n * Admin page for managing quotes — not linked from main app.\n * Navigate directly to /admin to access.\n */\nimport React, { useState, useEffect } from \"react\";\n\ninterface Quote { id: number; text: string; author: string; enabled: number; }\n\nexport default function AdminQuotesPage() {\n const [quotes, setQuotes] = useState([]);\n const [loading, setLoading] = useState(true);\n const [editingId, setEditingId] = useState(null);\n const [draft, setDraft] = useState({ text: \"\", author: \"\" });\n const [adding, setAdding] = useState(false);\n const [newQ, setNewQ] = useState({ text: \"\", author: \"\" });\n\n async function loadQuotes() {\n setLoading(true);\n const r = await fetch(\"/api/quotes\");\n setQuotes(await r.json());\n setLoading(false);\n }\n useEffect(() => { loadQuotes(); }, []);\n\n async function addQuote() {\n if (!newQ.text.trim()) return;\n await fetch(\"/api/quotes\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(newQ) });\n setNewQ({ text: \"\", author: \"\" }); setAdding(false); loadQuotes();\n }\n async function saveEdit(id: number) {\n await fetch(`/api/quotes/${id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(draft) });\n setEditingId(null); loadQuotes();\n }\n async function deleteQuote(id: number) {\n await fetch(`/api/quotes/${id}`, { method: \"DELETE\" });\n loadQuotes();\n }\n async function toggleEnabled(q: Quote) {\n await fetch(`/api/quotes/${q.id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ enabled: !q.enabled }) });\n loadQuotes();\n }\n\n return (\n

\n \n\n

Admin · Quotes

Edit and delete quotes. Not linked from main app.

\n\n ← Back to app\n\n {/* Add new */}\n {adding ? (\n

setNewQ(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n            <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p => ({ ...p, author: e.target.value }))} style={{ marginBottom: 10 }} />\n            <div style={{ display: \"flex\", gap: 8 }}>\n              <button onClick={addQuote} style={{ padding: \"8px 14px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 12, fontWeight: 700, cursor: \"pointer\" }}>Save</button>\n              <button onClick={() => setAdding(false)} style={{ padding: \"8px 14px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\" }}>Cancel</button>\n            </div>\n          </div>\n        ) : (\n          <button onClick={() => setAdding(true)} style={{ padding: \"10px 16px\", background: \"#21262d\", border: \"1px dashed rgba(255,255,255,0.2)\", borderRadius: 8, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\", marginBottom: 20 }}>\n            + Add quote\n          </button>\n        )}\n\n        {/* Quote list */}\n        {loading ? (\n          <div style={{ color: \"#6e7681\", padding: 40, textAlign: \"center\" }}>Loading…</div>\n        ) : (\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>\n            {quotes.map(q => (\n              <div key={q.id} className=\"admin-card\" style={{ opacity: q.enabled ? 1 : 0.6 }}>\n                {editingId === q.id ? (\n                  <>\n                    <textarea rows={3} value={draft.text} onChange={e => setDraft(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n                    <input value={draft.author} onChange={e => setDraft(p => ({ ...p, author: e.target.value }))} placeholder=\"Author\" style={{ marginBottom: 10 }} />\n                    <div style={{ display: \"flex\", gap: 8 }}>\n                      <button onClick={() => saveEdit(q.id)} style={{ padding: \"6px 12px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Save</button>\n                      <button onClick={() => setEditingId(null)} style={{ padding: \"6px 12px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Cancel</button>\n                    </div>\n                  </>\n                ) : (\n                  <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\", gap: 12 }}>\n                    <div style={{ flex: 1 }}>\n                      <div style={{ fontSize: 13, lineHeight: 1.5, fontStyle: \"italic\", marginBottom: 4 }}>{q.text}</div>\n                      {q.author && <div style={{ fontSize: 11, color: \"#8b949e\" }}>— {q.author}</div>}\n                    </div>\n                    <div style={{ display: \"flex\", gap: 6, flexShrink: 0 }}>\n                      <button onClick={() => toggleEnabled(q)} style={{ padding: \"4px 8px\", background: \"none\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 4, color: q.enabled ? \"#3fb950\" : \"#6e7681\", fontFamily: \"inherit\", fontSize: 10, cursor: \"pointer\" }}>\n                        {q.enabled ? \"ON\" : \"OFF\"}\n                      </button>\n                      <button onClick={() => { setEditingId(q.id); setDraft({ text: q.text, author: q.author }); }} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#8b949e\", cursor: \"pointer\" }} title=\"Edit\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\n                      </button>\n                      <button onClick={() => deleteQuote(q.id)} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#f85149\", cursor: \"pointer\" }} title=\"Delete\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n                      </button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div style={{ marginTop: 24, fontSize: 11, color: \"#6e7681\", textAlign: \"center\" }}>\n          {quotes.length} quote{quotes.length !== 1 ? \"s\" : \"\"}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[84,132],"42baf4d8-1e6f-11f1-9ea7-42dde27851f2","components","42baf596-1e6f-11f1-9ea7-42dde27851f2",5,["D",1773359863484],[146,147,148,149,150,151,152,153,154],[84,140],{"_38":221,"_13":222,"_41":223,"_43":141,"_44":45,"_46":224,"_48":49,"_50":225,"_17":142,"_53":127,"_55":226,"_57":58,"_59":-5,"_103":227,"_18":228},{"_38":213,"_13":214,"_41":215,"_43":141,"_44":45,"_46":216,"_48":49,"_50":217,"_17":86,"_53":127,"_55":218,"_57":58,"_59":-5,"_103":219,"_18":220},{"_38":205,"_13":206,"_41":207,"_43":141,"_44":45,"_46":208,"_48":49,"_50":209,"_17":66,"_53":127,"_55":210,"_57":58,"_59":-5,"_103":211,"_18":212},{"_38":197,"_13":198,"_41":199,"_43":141,"_44":45,"_46":200,"_48":49,"_50":201,"_17":142,"_53":127,"_55":202,"_57":58,"_59":-5,"_103":203,"_18":204},{"_38":189,"_13":190,"_41":191,"_43":141,"_44":45,"_46":192,"_48":49,"_50":193,"_17":86,"_53":127,"_55":194,"_57":58,"_59":-5,"_103":195,"_18":196},{"_38":181,"_13":182,"_41":183,"_43":141,"_44":45,"_46":184,"_48":49,"_50":185,"_17":142,"_53":127,"_55":186,"_57":58,"_59":-5,"_103":187,"_18":188},{"_38":172,"_13":173,"_41":174,"_43":141,"_44":45,"_46":175,"_48":49,"_50":176,"_17":177,"_53":127,"_55":178,"_57":58,"_59":-5,"_103":179,"_18":180},{"_38":163,"_13":164,"_41":165,"_43":141,"_44":45,"_46":166,"_48":49,"_50":167,"_17":168,"_53":127,"_55":169,"_57":58,"_59":-5,"_103":170,"_18":171},{"_38":155,"_13":156,"_41":157,"_43":141,"_44":45,"_46":158,"_48":49,"_50":159,"_17":66,"_53":127,"_55":160,"_57":58,"_59":-5,"_103":161,"_18":162},"7a253c06-1e71-11f1-a3e4-42dde27851f2","Waveform.tsx","7a253cf6-1e71-11f1-a3e4-42dde27851f2",47,["D",1773360815448],"import React, { useRef, useEffect } from \"react\";\n\ninterface Props {\n  analyser: AnalyserNode | null;\n  playing: boolean;\n  accent: string;\n}\n\nexport function Waveform({ analyser, playing, accent }: Props) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const rafRef = useRef<number>(0);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\")!;\n\n    // Resolve CSS variable to a real color\n    const resolveColor = (v: string) => {\n      if (v.startsWith(\"var(\")) {\n        const name = v.slice(4, -1).trim();\n        return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || \"#58a6ff\";\n      }\n      return v;\n    };\n\n    const draw = () => {\n      rafRef.current = requestAnimationFrame(draw);\n      const W = canvas.width;\n      const H = canvas.height;\n\n      ctx.clearRect(0, 0, W, H);\n      ctx.fillStyle = \"#161b22\";\n      ctx.fillRect(0, 0, W, H);\n\n      if (!analyser || !playing) {\n        // Flat idle line\n        ctx.strokeStyle = \"rgba(255,255,255,0.06)\";\n        ctx.lineWidth = 1;\n        ctx.beginPath();\n        ctx.moveTo(0, H / 2);\n        ctx.lineTo(W, H / 2);\n        ctx.stroke();\n        return;\n      }\n\n      const bufLen = analyser.fftSize;\n      const data = new Float32Array(bufLen);\n      analyser.getFloatTimeDomainData(data);\n\n      const color = resolveColor(accent);\n\n      // Glow pass\n      ctx.shadowBlur = 10;\n      ctx.shadowColor = color;\n      ctx.strokeStyle = color;\n      ctx.lineWidth = 1.5;\n      ctx.globalAlpha = 0.9;\n      ctx.beginPath();\n\n      const step = W / bufLen;\n      for (let i = 0; i < bufLen; i++) {\n        const x = i * step;\n        const y = (1 - (data[i] * 0.85 + 1) / 2) * H;\n        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n      }\n      ctx.stroke();\n\n      // Second softer pass\n      ctx.shadowBlur = 0;\n      ctx.globalAlpha = 0.25;\n      ctx.lineWidth = 3;\n      ctx.stroke();\n\n      ctx.globalAlpha = 1;\n    };\n\n    draw();\n    return () => { cancelAnimationFrame(rafRef.current); };\n  }, [analyser, playing, accent]);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      width={430}\n      height={56}\n      style={{ width: \"100%\", height: 56, display: \"block\", background: \"var(--bg2)\", borderBottom: \"1px solid var(--border2)\" }}\n    />\n  );\n}\n",[],[84,140,156],"9717d86a-1e98-11f1-88df-42dde27851f2","TimelineTab.tsx","ac2af6c0-1e6f-11f1-8d5a-42dde27851f2",82,["D",1773377614351],9,"import React, { useState, useEffect, useRef } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { SessionTimelineView } from \"https://esm.town/v/all/brain/frontend/components/SessionTimelineView.tsx\";\n\n// Flow presets — all layers on, wisdom every 1min\nconst FLOW_PRESETS = [\n  {\n    name: \"Deep Focus\",\n    desc: \"Beta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 250, beatFreq: 16, breathRate: 6, tickSpeed: 800, polySpeed: 20, wisdomVoice: \"autumn\" },\n    segments: [{ id: \"f1\", label: \"Focus\", brainwave: \"beta\", durationMin: 15, baseFreq: 250 }],\n  },\n  {\n    name: \"Creative Flow\",\n    desc: \"Theta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 300, beatFreq: 7, breathRate: 5, tickSpeed: 1000, polySpeed: 33, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"c1\", label: \"Warm up\", brainwave: \"alpha\", durationMin: 3, baseFreq: 200 },\n      { id: \"c2\", label: \"Create\", brainwave: \"theta\", durationMin: 20, baseFreq: 300 },\n    ],\n  },\n  {\n    name: \"Wind Down\",\n    desc: \"Alpha→Theta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 150, beatFreq: 6, breathRate: 4, tickSpeed: 1200, polySpeed: 45, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"w1\", label: \"Relax\", brainwave: \"alpha\", durationMin: 5, baseFreq: 150 },\n      { id: \"w2\", label: \"Drift\", brainwave: \"theta\", durationMin: 15, baseFreq: 120 },\n    ],\n  },\n  {\n    name: \"Power Nap\",\n    desc: \"Delta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 100, beatFreq: 2, breathRate: 3, tickSpeed: 1500, polySpeed: 60, wisdomVoice: \"autumn\" },\n    segments: [{ id: \"p1\", label: \"Deep rest\", brainwave: \"delta\", durationMin: 20, baseFreq: 100 }],\n  },\n  {\n    name: \"Morning Ritual\",\n    desc: \"Theta→Alpha · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 180, beatFreq: 8, breathRate: 6, tickSpeed: 1000, polySpeed: 25, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"m1\", label: \"Meditate\", brainwave: \"theta\", durationMin: 5, baseFreq: 150 },\n      { id: \"m2\", label: \"Awaken\", brainwave: \"alpha\", durationMin: 5, baseFreq: 200 },\n    ],\n  },\n  {\n    name: \"Study Session\",\n    desc: \"Beta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 220, beatFreq: 18, breathRate: 6, tickSpeed: 800, polySpeed: 18, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"s1\", label: \"Focus\", brainwave: \"beta\", durationMin: 25, baseFreq: 220 },\n      { id: \"s2\", label: \"Break\", brainwave: \"alpha\", durationMin: 5, baseFreq: 180 },\n    ],\n  },\n  {\n    name: \"Full Spectrum\",\n    desc: \"δ→θ→α→β journey · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 200, beatFreq: 10, breathRate: 5, tickSpeed: 1000, polySpeed: 30, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"fs1\", label: \"Deep\", brainwave: \"delta\", durationMin: 5, baseFreq: 100 },\n      { id: \"fs2\", label: \"Dream\", brainwave: \"theta\", durationMin: 8, baseFreq: 150 },\n      { id: \"fs3\", label: \"Calm\", brainwave: \"alpha\", durationMin: 7, baseFreq: 200 },\n      { id: \"fs4\", label: \"Active\", brainwave: \"beta\", durationMin: 10, baseFreq: 250 },\n    ],\n  },\n  {\n    name: \"Quick Reset\",\n    desc: \"10min · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 200, beatFreq: 10, breathRate: 6, tickSpeed: 1000, polySpeed: 33, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"qr1\", label: \"Breathe\", brainwave: \"alpha\", durationMin: 5, baseFreq: 180 },\n      { id: \"qr2\", label: \"Refocus\", brainwave: \"beta\", durationMin: 5, baseFreq: 220 },\n    ],\n  },\n];\n\nconst WAVE_COLORS: Record<string, string> = {\n  delta:     \"var(--accent-violet)\",\n  theta:     \"var(--accent-blue)\",\n  alpha:     \"var(--accent-cyan)\",\n  beta:      \"var(--accent-green)\",\n  high_beta: \"var(--accent-amber)\",\n};\nconst WAVE_HZ: Record<string, { start: number; end: number }> = {\n  delta:    { start: 2,  end: 4  },\n  theta:    { start: 5,  end: 7  },\n  alpha:    { start: 9,  end: 11 },\n  beta:     { start: 15, end: 20 },\n  high_beta:{ start: 25, end: 30 },\n};\n\ninterface Segment { id: string; label: string; brainwave: string; durationMin: number; baseFreq: number; }\ninterface Timeline { id?: number; name: string; segments: Segment[]; }\n\nfunction uid() { return Math.random().toString(36).slice(2); }\n\ninterface TimelineTabProps { session?: any; setSession?: (fn: (p: any) => any) => void; masterPlaying?: boolean; masterPlay?: () => void; masterStop?: () => void; masterElapsedSec?: number; }\n\nexport function TimelineTab({ session = null, setSession, masterPlaying = false, masterPlay, masterStop, masterElapsedSec = 0 }: TimelineTabProps) {\n  const [timelines, setTimelines] = useState<Timeline[]>([]);\n  const [current, setCurrent] = useState<Timeline>({ name: \"New Session\", segments: [] });\n  const [saving, setSaving] = useState(false);\n  const [playing, setPlaying] = useState(false);\n  const [activeSegIdx, setActiveSegIdx] = useState(0);\n  const [localElapsedSec, setLocalElapsedSec] = useState(0);\n\n  const ctxRef = useRef<AudioContext | null>(null);\n  const segmentStartRef = useRef<number>(0);\n  const leftRef = useRef<OscillatorNode | null>(null);\n  const rightRef = useRef<OscillatorNode | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  async function load() {\n    const r = await fetch(\"/api/timeline\");\n    setTimelines(await r.json());\n  }\n  async function save() {\n    setSaving(true);\n    const method = current.id ? \"PUT\" : \"POST\";\n    const url = current.id ? `/api/timeline/${current.id}` : \"/api/timeline\";\n    const r = await fetch(url, { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(current) });\n    const data = await r.json();\n    setCurrent(data);\n    await load();\n    setSaving(false);\n  }\n  async function deleteTl(id: number) {\n    await fetch(`/api/timeline/${id}`, { method: \"DELETE\" });\n    await load();\n    if (current.id === id) setCurrent({ name: \"New Session\", segments: [] });\n  }\n\n  useEffect(() => { load(); }, []);\n\n  function addSegment() {\n    const seg: Segment = { id: uid(), label: \"Focus\", brainwave: \"beta\", durationMin: 5, baseFreq: 200 };\n    setCurrent(p => ({ ...p, segments: [...p.segments, seg] }));\n  }\n  function updateSeg(id: string, patch: Partial<Segment>) {\n    setCurrent(p => ({ ...p, segments: p.segments.map(s => s.id === id ? { ...s, ...patch } : s) }));\n  }\n  function removeSeg(id: string) {\n    setCurrent(p => ({ ...p, segments: p.segments.filter(s => s.id !== id) }));\n  }\n\n  function stopPlayback() {\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    leftRef.current = null; rightRef.current = null;\n    if (timerRef.current) clearTimeout(timerRef.current);\n    setPlaying(false); setActiveSegIdx(0); setLocalElapsedSec(0);\n  }\n  function startPlayback() {\n    if (!current.segments.length) return;\n    const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n    if (!ctxRef.current) ctxRef.current = new Ctx();\n    const ctx = ctxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n    setPlaying(true);\n    runSegment(0, ctx);\n  }\n  function runSegment(idx: number, ctx: AudioContext) {\n    if (idx >= current.segments.length) { stopPlayback(); return; }\n    segmentStartRef.current = performance.now();\n    setActiveSegIdx(idx);\n    const seg = current.segments[idx];\n    const hz = WAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    const left = ctx.createOscillator(), right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(), rp = ctx.createStereoPanner();\n    const gain = ctx.createGain();\n    lp.pan.value = -1; rp.pan.value = 1; gain.gain.value = 0.4;\n    left.connect(lp); right.connect(rp); lp.connect(gain); rp.connect(gain); gain.connect(ctx.destination);\n    left.frequency.value = seg.baseFreq;\n    right.frequency.setValueAtTime(seg.baseFreq + hz.start, ctx.currentTime);\n    right.frequency.linearRampToValueAtTime(seg.baseFreq + hz.end, ctx.currentTime + seg.durationMin * 60);\n    left.start(); right.start();\n    leftRef.current = left; rightRef.current = right;\n    timerRef.current = setTimeout(() => runSegment(idx + 1, ctx), seg.durationMin * 60 * 1000);\n  }\n\n  const totalMin = current.segments.reduce((s, seg) => s + seg.durationMin, 0);\n\n  useEffect(() => {\n    if (!playing || masterPlaying || !current.segments.length) return;\n    const tick = () => {\n      const completedSec = current.segments.slice(0, activeSegIdx).reduce((s, seg) => s + seg.durationMin * 60, 0);\n      const inSegSec = (performance.now() - segmentStartRef.current) / 1000;\n      setLocalElapsedSec(completedSec + inSegSec);\n    };\n    tick();\n    const id = setInterval(tick, 100);\n    return () => clearInterval(id);\n  }, [playing, masterPlaying, current.segments, activeSegIdx]);\n\n  const elapsedSec = masterPlaying ? masterElapsedSec : (playing ? localElapsedSec : 0);\n\n  function applyFlowPreset(preset: typeof FLOW_PRESETS[0]) {\n    if (setSession) setSession((p: any) => ({ ...p, ...preset.session }));\n    setCurrent({ name: preset.name, segments: preset.segments.map(s => ({ ...s, id: uid() })) });\n  }\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, width: \"100%\" }}>\n      <div>\n        <div className=\"section-title\">Timeline</div>\n        <div className=\"section-sub\">SESSION BUILDER</div>\n      </div>\n\n      {/* Flow presets — all layers, wisdom 1min */}\n      <div>\n        <div className=\"label-key\" style={{ marginBottom: 8 }}>FLOW PRESETS · ALL LAYERS · WISDOM 1MIN</div>\n        <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(2, 1fr)\", gap: 6 }}>\n          {FLOW_PRESETS.map((preset) => (\n            <button\n              key={preset.name}\n              onClick={() => applyFlowPreset(preset)}\n              className=\"preset-btn\"\n              style={{ textAlign: \"left\", padding: \"8px 10px\" }}>\n              <span className=\"preset-name\">{preset.name}</span>\n              <span style={{ fontSize: 8, opacity: 0.7, display: \"block\", marginTop: 2 }}>{preset.desc}</span>\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Session timeline view — grid, beats, Hz curves, clock, playhead */}\n      <SessionTimelineView\n        segments={current.segments}\n        tickSpeedMs={session?.tickSpeed ?? 1000}\n        activeSegIdx={activeSegIdx}\n        playing={playing}\n        clockOn={session?.clockOn ?? false}\n        elapsedSec={elapsedSec}\n        showPlayhead={masterPlaying || playing}\n      />\n\n      {/* Timeline bar */}\n      {current.segments.length > 0 && (\n        <div style={{ width: \"100%\", height: 48, display: \"flex\", borderRadius: 8, overflow: \"hidden\", border: \"1px solid var(--border2)\", outline: \"1px solid var(--border)\", outlineOffset: 2 }}>\n          {current.segments.map((seg, i) => {\n            const w = totalMin > 0 ? (seg.durationMin / totalMin) * 100 : 100 / current.segments.length;\n            const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n            const isActive = playing && i === activeSegIdx;\n            return (\n              <div key={seg.id} style={{\n                width: `${w}%`,\n                background: col,\n                opacity: playing ? (isActive ? 0.9 : 0.25) : 0.5,\n                display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n                fontSize: 8, fontWeight: 700, color: \"#fff\",\n                letterSpacing: \"0.05em\",\n                transition: \"opacity 0.3s\",\n                position: \"relative\",\n                overflow: \"hidden\",\n              }}>\n                {w > 10 && seg.label}\n                {isActive && <div style={{ position: \"absolute\", inset: 0, border: \"2px solid rgba(255,255,255,0.6)\", animation: \"pulse 1s infinite\" }} />}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* Name + controls row */}\n      <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n        <input\n          value={current.name}\n          onChange={e => setCurrent(p => ({ ...p, name: e.target.value }))}\n          style={{ flex: 1, fontWeight: 700, fontSize: 12 }}\n        />\n        <button onClick={save} disabled={saving} className=\"card-sm\" style={{ cursor: \"pointer\", color: saving ? \"var(--text-dim)\" : \"var(--accent-violet)\", border: \"1px solid var(--border2)\", display: \"flex\", alignItems: \"center\", padding: \"8px 10px\" }}>\n          <Icons.Save />\n        </button>\n        {current.segments.length > 0 && (\n          <button onClick={playing ? stopPlayback : startPlayback} className=\"card-sm\" style={{ cursor: \"pointer\", color: playing ? \"var(--accent-violet)\" : \"var(--text-dim)\", border: `1px solid ${playing ? \"var(--accent-violet)\" : \"var(--border2)\"}`, display: \"flex\", alignItems: \"center\", padding: \"8px 10px\" }}>\n            {playing ? <Icons.Square /> : <Icons.Play />}\n          </button>\n        )}\n      </div>\n\n      {/* Segments */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        {current.segments.map((seg, i) => {\n          const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n          const isActive = playing && i === activeSegIdx;\n          return (\n            <div key={seg.id} className=\"card\" style={{ borderColor: isActive ? col : \"var(--border2)\" }}>\n              <div style={{ display: \"flex\", gap: 8, alignItems: \"center\", marginBottom: 10 }}>\n                <div style={{ width: 8, height: 8, borderRadius: \"50%\", background: col, flexShrink: 0 }} />\n                <input value={seg.label} onChange={e => updateSeg(seg.id, { label: e.target.value })}\n                  style={{ flex: 1, fontSize: 11, fontWeight: 700, background: \"transparent\", border: \"none\", borderBottom: \"1px solid var(--border2)\", color: \"var(--text-bright)\", paddingBottom: 2, outline: \"none\", fontFamily: \"inherit\" }} />\n                <button onClick={() => removeSeg(seg.id)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", color: \"var(--text-dim)\" }}><Icons.Trash /></button>\n              </div>\n              <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr 1fr\", gap: 8 }}>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>WAVE</div>\n                  <select value={seg.brainwave} onChange={e => updateSeg(seg.id, { brainwave: e.target.value })}>\n                    {Object.keys(WAVE_HZ).map(k => <option key={k} value={k}>{k}</option>)}\n                  </select>\n                </div>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>MIN</div>\n                  <input type=\"number\" value={seg.durationMin} min={1} max={120} onChange={e => updateSeg(seg.id, { durationMin: Number(e.target.value) })} />\n                </div>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>BASE Hz</div>\n                  <input type=\"number\" value={seg.baseFreq} min={80} max={500} step={10} onChange={e => updateSeg(seg.id, { baseFreq: Number(e.target.value) })} />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <button onClick={addSegment} className=\"card-sm\" style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", gap: 8, color: \"var(--accent-violet)\", border: \"1px dashed var(--border2)\", cursor: \"pointer\", fontSize: 11, fontWeight: 700, letterSpacing: \"0.06em\" }}>\n        <Icons.Plus /> ADD SEGMENT\n      </button>\n\n      {/* Saved sessions */}\n      {timelines.length > 0 && (\n        <div style={{ marginTop: 8 }}>\n          <div className=\"label-key\" style={{ marginBottom: 8 }}>SAVED SESSIONS</div>\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n            {timelines.map(tl => (\n              <div key={tl.id} className=\"card-sm\" style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                <button onClick={() => setCurrent(tl)} style={{ flex: 1, background: \"none\", border: \"none\", color: \"var(--text)\", fontFamily: \"inherit\", fontSize: 11, textAlign: \"left\", cursor: \"pointer\" }}>\n                  {tl.name} <span style={{ color: \"var(--text-dim)\", fontSize: 9 }}>· {tl.segments.length} segs · {tl.segments.reduce((s,g)=>s+g.durationMin,0)}min</span>\n                </button>\n                <button onClick={() => deleteTl(tl.id!)} style={{ background: \"none\", border: \"none\", color: \"var(--text-dim)\", cursor: \"pointer\" }}><Icons.Trash /></button>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      <div style={{ fontSize: 9, color: \"var(--text-dim)\", textAlign: \"center\", letterSpacing: \"0.06em\" }}>\n        TOTAL SESSION <span style={{ color: \"var(--accent-violet)\" }}>{totalMin}min</span>\n      </div>\n    </div>\n  );\n}\n",[],[84,140,164],"7b064014-1e73-11f1-bdeb-42dde27851f2","TTSWisdomTab.tsx","c5330ea0-1e6f-11f1-8481-42dde27851f2",66,["D",1773361675907],6,"import React, { useState, useEffect } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\ninterface Quote { id: number; text: string; author: string; enabled: number; }\ninterface Props { session: any; setSession: (fn: (p: any) => any) => void; speakWisdom: (quotes: any[], voice: string) => Promise<void>; }\n\n// Groq Orpheus valid voices: autumn, diana, hannah, austin, daniel, troy\nconst VOICES = [\n  { value: \"troy\", label: \"TROY\" },\n  { value: \"hannah\", label: \"HANNAH\" },\n  { value: \"austin\", label: \"AUSTIN\" },\n  { value: \"autumn\", label: \"AUTUMN\" },\n  { value: \"diana\", label: \"DIANA\" },\n  { value: \"daniel\", label: \"DANIEL\" },\n];\n\nexport function TTSWisdomTab({ session, setSession, speakWisdom }: Props) {\n  const [quotes, setQuotes] = useState<Quote[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [adding, setAdding] = useState(false);\n  const [newQ, setNewQ] = useState({ text: \"\", author: \"\" });\n\n  async function loadQuotes() {\n    setLoading(true);\n    const r = await fetch(\"/api/quotes\");\n    setQuotes(await r.json());\n    setLoading(false);\n  }\n  useEffect(() => { loadQuotes(); }, []);\n\n  async function addQuote() {\n    if (!newQ.text.trim()) return;\n    await fetch(\"/api/quotes\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(newQ) });\n    setNewQ({ text: \"\", author: \"\" }); setAdding(false); loadQuotes();\n  }\n  async function toggleEnabled(q: Quote) {\n    await fetch(`/api/quotes/${q.id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ enabled: !q.enabled }) });\n    loadQuotes();\n  }\n\n  function pickRandom(): Quote | null {\n    const enabled = quotes.filter(q => q.enabled);\n    if (!enabled.length) return null;\n    return enabled[Math.floor(Math.random() * enabled.length)];\n  }\n\n  async function speakOne() {\n    const q = pickRandom();\n    if (q) speakWisdom([q], session.wisdomVoice);\n  }\n\n  const cardStyle = { borderRadius: 0, background: \"var(--bg2)\", border: \"1px solid var(--border2)\", outline: \"1px solid var(--border)\", outlineOffset: 2 };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n      <div>\n        <div className=\"section-title\">Wisdom</div>\n        <div className=\"section-sub\">VOICE QUOTES · MASTER PLAY</div>\n      </div>\n\n      {/* Module toggle + status */}\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n        <button onClick={() => setSession((p: any) => ({ ...p, wisdomOn: !p.wisdomOn }))}\n          style={{ background: \"none\", border: `1px solid ${session.wisdomOn ? \"var(--accent-amber)\" : \"var(--border2)\"}`, padding: \"4px 10px\", fontFamily: \"inherit\", fontSize: 9, fontWeight: 700, color: session.wisdomOn ? \"var(--accent-amber)\" : \"var(--text-dim)\", cursor: \"pointer\" }}>\n          {session.wisdomOn ? \"● VOICE ON\" : \"○ VOICE OFF\"}\n        </button>\n        <span style={{ fontSize: 9, color: \"var(--text-dim)\" }}>\n          {session.playing && session.wisdomOn ? \"Playing…\" : \"Press play from toolbar\"}\n        </span>\n      </div>\n\n      {/* Voice + interval — compact */}\n      <div style={{ ...cardStyle, padding: 10, display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        <div className=\"label-key\" style={{ marginBottom: 2 }}>VOICE</div>\n        <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>\n          {VOICES.map(v => (\n            <button key={v.value} onClick={() => setSession((p: any) => ({ ...p, wisdomVoice: v.value }))}\n              className={`preset-btn${session.wisdomVoice === v.value ? \" active\" : \"\"}`}\n              style={{ \"--active-color\": \"var(--accent-amber)\", flex: 1, padding: \"6px 6px\" } as React.CSSProperties}>\n              <span className=\"preset-name\" style={{ fontSize: 8 }}>{v.label}</span>\n            </button>\n          ))}\n        </div>\n        <div className=\"label-row\">\n          <span className=\"label-key\">INTERVAL</span>\n          <span className=\"label-val\" style={{ color: \"var(--accent-amber)\", fontSize: 10 }}>{session.wisdomIntervalMin}min</span>\n        </div>\n        <input type=\"range\" min={1} max={60} value={session.wisdomIntervalMin}\n          onChange={e => setSession((p: any) => ({ ...p, wisdomIntervalMin: Number(e.target.value) }))}\n          className=\"slider-thumb\" style={{ position: \"relative\", width: \"100%\" }} />\n      </div>\n\n      <button onClick={speakOne} style={{ ...cardStyle, padding: 8, cursor: \"pointer\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", gap: 6, color: \"var(--text-dim)\", fontSize: 9, fontWeight: 700, letterSpacing: \"0.06em\" }}>\n        <Icons.Speaker /> SPEAK ONE\n      </button>\n\n      {/* Quote library header */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n        <span className=\"label-key\" style={{ fontSize: 8 }}>QUOTES {quotes.filter(q => q.enabled).length}/{quotes.length}</span>\n        <button onClick={() => setAdding(true)} style={{ background: \"none\", border: \"none\", color: \"var(--accent-amber)\", cursor: \"pointer\", padding: 2 }}><Icons.Plus /></button>\n      </div>\n\n      {adding && (\n        <div style={{ ...cardStyle, padding: 8, display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          <textarea rows={2} placeholder=\"Quote…\" value={newQ.text} onChange={e => setNewQ(p => ({ ...p, text: e.target.value }))} style={{ resize: \"none\", fontSize: 10 }} />\n          <div style={{ display: \"flex\", gap: 4 }}>\n            <button onClick={addQuote} style={{ flex: 1, ...cardStyle, padding: 6, cursor: \"pointer\", color: \"var(--accent-amber)\", fontSize: 9, fontWeight: 700 }}>SAVE</button>\n            <button onClick={() => setAdding(false)} style={{ flex: 1, ...cardStyle, padding: 6, cursor: \"pointer\", color: \"var(--text-dim)\", fontSize: 9 }}>CANCEL</button>\n          </div>\n        </div>\n      )}\n\n      {/* Quote list — compact: just quote + enable toggle, no edit/delete */}\n      {loading ? (\n        <div style={{ fontSize: 8, color: \"var(--text-dim)\", textAlign: \"center\", padding: 8 }}>LOADING…</div>\n      ) : (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n          {quotes.map(q => (\n            <div key={q.id} style={{ ...cardStyle, padding: \"6px 8px\", opacity: q.enabled ? 1 : 0.45, display: \"flex\", alignItems: \"center\", gap: 6 }}>\n              <div style={{ flex: 1, fontSize: 9, color: \"var(--text)\", lineHeight: 1.4, fontStyle: \"italic\", minWidth: 0 }}>{q.text}</div>\n              <button onClick={() => toggleEnabled(q)}\n                style={{ background: \"none\", border: \"none\", fontFamily: \"inherit\", fontSize: 7, fontWeight: 700, cursor: \"pointer\", color: q.enabled ? \"var(--accent-green)\" : \"var(--text-dim)\", letterSpacing: \"0.06em\", flexShrink: 0 }}>\n                {q.enabled ? \"ON\" : \"OFF\"}\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[84,140,173],"971cd87e-1e98-11f1-9cfb-42dde27851f2","SessionTimelineView.tsx","e9480644-1e72-11f1-9e1e-42dde27851f2",83,["D",1773377614347],"import React, { useMemo } from \"react\";\n\nconst WAVE_HZ: Record<string, { start: number; end: number }> = {\n  delta:    { start: 2,  end: 4  },\n  theta:    { start: 5,  end: 7  },\n  alpha:    { start: 9,  end: 11 },\n  beta:     { start: 15, end: 20 },\n  high_beta:{ start: 25, end: 30 },\n};\n\ninterface Segment { id: string; label: string; brainwave: string; durationMin: number; baseFreq: number; }\n\ninterface Props {\n  segments: Segment[];\n  sessionLengthMin?: number; // total min (default from segments or 6)\n  tickSpeedMs?: number;     // for clock tick density\n  activeSegIdx?: number;\n  playing?: boolean;\n  clockOn?: boolean;       // show ticks with accent when clock enabled\n  elapsedSec?: number;     // current playback position for playhead\n  showPlayhead?: boolean;  // show playhead when playing\n}\n\nexport function SessionTimelineView({\n  segments,\n  sessionLengthMin,\n  tickSpeedMs = 1000,\n  activeSegIdx = 0,\n  playing = false,\n  clockOn = false,\n  elapsedSec = 0,\n  showPlayhead = false,\n}: Props) {\n  const totalMin = sessionLengthMin ?? (segments.length ? segments.reduce((s, seg) => s + seg.durationMin, 0) : 6);\n  const width = 380;\n  const height = 140;\n  const padding = { t: 24, r: 12, b: 20, l: 28 };\n  const plotW = width - padding.l - padding.r;\n  const plotH = height - padding.t - padding.b;\n\n  // Map minute to x: x = padding.l + (minute / totalMin) * plotW\n  const minToX = (m: number) => padding.l + (totalMin > 0 ? (m / totalMin) * plotW : 0);\n\n  // Time grid: vertical lines at each integer minute from 0 to floor(totalMin)\n  const maxMin = Math.max(1, Math.floor(totalMin));\n  const gridMinutes = Array.from({ length: maxMin + 1 }, (_, i) => i);\n\n  // Clock tick marks — all shown, positioned by time, bigger when clock on\n  const tickCount = Math.max(1, Math.floor((totalMin * 60 * 1000) / tickSpeedMs));\n  const ticks = useMemo(() => {\n    const n = tickCount;\n    return Array.from({ length: n }, (_, i) => {\n      const tMin = n > 1 ? (i / (n - 1)) * totalMin : 0;\n      const x = padding.l + (totalMin > 0 ? (tMin / totalMin) * plotW : 0);\n      const tickH = clockOn ? (i % 4 === 0 ? 14 : 8) : (i % 4 === 0 ? 10 : 6);\n      return { x, height: tickH };\n    });\n  }, [tickCount, totalMin, plotW, padding.l, clockOn]);\n\n  // Left (red) and Right (blue) freq curves over time\n  const { leftPath, rightPath } = useMemo(() => {\n    if (!segments.length) {\n      const cx = padding.l + plotW / 2;\n      const cy = padding.t + plotH / 2;\n      const amp = plotH * 0.35;\n      const pts = 60;\n      const left: string[] = [`M ${padding.l} ${cy}`];\n      const right: string[] = [`M ${padding.l} ${cy}`];\n      for (let i = 1; i <= pts; i++) {\n        const x = padding.l + (i / pts) * plotW;\n        const t = (i / pts) * totalMin;\n        const leftY = cy + Math.sin(t * 0.8) * amp * 0.7;\n        const rightY = cy + Math.sin(t * 2.2 + 0.5) * amp * 0.6;\n        left.push(`L ${x} ${leftY}`);\n        right.push(`L ${x} ${rightY}`);\n      }\n      return { leftPath: left.join(\" \"), rightPath: right.join(\" \") };\n    }\n\n    let elapsed = 0;\n    const leftPts: [number, number][] = [];\n    const rightPts: [number, number][] = [];\n\n    for (let i = 0; i < segments.length; i++) {\n      const seg = segments[i];\n      const hz = WAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n      const startX = padding.l + (elapsed / totalMin) * plotW;\n      const endX = padding.l + ((elapsed + seg.durationMin) / totalMin) * plotW;\n\n      const baseY = padding.t + plotH / 2;\n      const amp = plotH * 0.35;\n      const freqNorm = (f: number) => (f - 80) / 420;\n      const leftBase = seg.baseFreq;\n      const rightStart = seg.baseFreq + hz.start;\n      const rightEnd = seg.baseFreq + hz.end;\n\n      const steps = Math.max(2, Math.floor(seg.durationMin * 4));\n      for (let s = 0; s <= steps; s++) {\n        const t = s / steps;\n        const x = startX + (endX - startX) * t;\n        const leftVal = freqNorm(leftBase);\n        const rightVal = freqNorm(rightStart + (rightEnd - rightStart) * t);\n        const leftY = baseY - leftVal * amp * 0.6 - Math.sin(t * Math.PI * 2) * amp * 0.2;\n        const rightY = baseY - rightVal * amp * 0.6 + Math.sin(t * Math.PI * 3) * amp * 0.25;\n        leftPts.push([x, leftY]);\n        rightPts.push([x, rightY]);\n      }\n      elapsed += seg.durationMin;\n    }\n\n    const toPath = (pts: [number, number][]) => {\n      if (!pts.length) return \"\";\n      return pts.reduce((acc, [x, y], i) => (i === 0 ? `M ${x} ${y}` : `${acc} L ${x} ${y}`), \"\");\n    };\n    return { leftPath: toPath(leftPts), rightPath: toPath(rightPts) };\n  }, [segments, totalMin, plotW, plotH, padding]);\n\n  // Golden baseline\n  const baselineY = padding.t + plotH - 4;\n  const baselinePath = `M ${padding.l} ${baselineY} L ${padding.l + plotW - 8} ${baselineY} L ${padding.l + plotW} ${baselineY + 12}`;\n\n  // Playhead position (clamp to plot bounds)\n  const elapsedMin = elapsedSec / 60;\n  const playheadX = showPlayhead && totalMin > 0\n    ? Math.min(Math.max(padding.l, padding.l + (elapsedMin / totalMin) * plotW), padding.l + plotW)\n    : null;\n\n  return (\n    <div style={{ width: \"100%\" }}>\n      <div style={{ fontSize: 8, color: \"var(--text-dim)\", marginBottom: 6, letterSpacing: \"0.08em\" }}>\n        SESSION · {totalMin}min\n      </div>\n      <svg width=\"100%\" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio=\"xMidYMid meet\"\n        style={{ display: \"block\", background: \"var(--bg2)\", border: \"1px solid var(--border2)\", borderRadius: 8 }}>\n        {/* Grid divs — at each integer minute */}\n        {gridMinutes.map((m) => {\n          const x = minToX(m);\n          return (\n            <line key={m} x1={x} y1={padding.t} x2={x} y2={height - padding.b}\n              stroke=\"rgba(255,255,255,0.06)\" strokeWidth={1} />\n          );\n        })}\n        {/* Axis */}\n        <line x1={padding.l} y1={height - padding.b} x2={padding.l + plotW} y2={height - padding.b}\n          stroke=\"var(--border2)\" strokeWidth={1} />\n        <line x1={padding.l} y1={padding.t} x2={padding.l} y2={height - padding.b}\n          stroke=\"var(--border2)\" strokeWidth={1} />\n\n        {/* Clock tick marks — rail + ticks, full width, align with plot */}\n        <line x1={padding.l} y1={padding.t} x2={padding.l + plotW} y2={padding.t}\n          stroke={clockOn ? \"var(--accent-green)\" : \"var(--border2)\"} strokeWidth={clockOn ? 2 : 1} opacity={clockOn ? 0.95 : 0.5} />\n        {ticks.map((t, i) => (\n          <line key={i} x1={t.x} y1={padding.t} x2={t.x} y2={padding.t - t.height}\n            stroke={clockOn ? \"var(--accent-green)\" : \"var(--border2)\"} strokeWidth={clockOn ? 2 : 1.5}\n            opacity={clockOn ? 0.95 : 0.5} />\n        ))}\n\n        {/* Hz freq curves */}\n        <path d={leftPath} fill=\"none\" stroke=\"var(--accent-rose, #f85149)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity={0.9} />\n        <path d={rightPath} fill=\"none\" stroke=\"var(--accent-blue)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity={0.9} />\n\n        {/* Golden baseline */}\n        <path d={baselinePath} fill=\"none\" stroke=\"var(--accent-amber)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity={0.7} />\n\n        {/* Playhead — vertical line showing current position */}\n        {playheadX != null && (\n          <line x1={playheadX} y1={padding.t} x2={playheadX} y2={height - padding.b}\n            stroke=\"var(--accent-rose)\" strokeWidth={2} opacity={0.95} />\n        )}\n\n        {/* Time labels (min) — aligned with grid */}\n        {gridMinutes.map((m) => (\n          <text key={m} x={minToX(m)} y={height - 4} textAnchor=\"middle\" fontSize={7} fill=\"var(--text-dim)\" fontFamily=\"inherit\">\n            {m}m\n          </text>\n        ))}\n      </svg>\n      <div style={{ fontSize: 7, color: \"var(--text-dim)\", marginTop: 4, display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n        {showPlayhead && <span><span style={{ color: \"var(--accent-rose)\" }}>▎</span> playhead</span>}\n        <span><span style={{ color: \"var(--accent-green)\" }}>▬</span> ticks</span>\n        <span><span style={{ color: \"var(--accent-rose)\" }}>■</span> L Hz</span>\n        <span><span style={{ color: \"var(--accent-blue)\" }}>■</span> R Hz</span>\n        <span><span style={{ color: \"var(--accent-amber)\" }}>■</span> baseline</span>\n      </div>\n    </div>\n  );\n}\n",[],[84,140,182],"96b06fb2-1e71-11f1-ada8-42dde27851f2","OceanPulseTab.tsx","93de9b62-1e6f-11f1-821a-42dde27851f2",49,["D",1773360863269],"import React from \"react\";\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function OceanPulseTab({ session, setSession }: Props) {\n  const bars = 20;\n  const dur = (60 / session.breathRate).toFixed(1);\n\n  return (\n    <div style={{ display:\"flex\", flexDirection:\"column\", gap:14 }}>\n      <div>\n        <div className=\"section-title\">Ocean Pulse</div>\n        <div className=\"section-sub\">BREATH-SYNCED AMPLITUDE MOD</div>\n      </div>\n\n      <div style={{ display:\"flex\", alignItems:\"center\", gap:8 }}>\n        <button onClick={() => setSession((p:any) => ({ ...p, oceanOn: !p.oceanOn }))}\n          style={{ background:\"none\", border:`1px solid ${session.oceanOn ? \"var(--accent-cyan)\" : \"var(--border2)\"}`, borderRadius:20, padding:\"4px 12px\", fontFamily:\"inherit\", fontSize:9, fontWeight:700, letterSpacing:\"0.08em\", color:session.oceanOn?\"var(--accent-cyan)\":\"var(--text-dim)\", cursor:\"pointer\" }}>\n          {session.oceanOn ? \"● ON\" : \"○ OFF\"}\n        </button>\n        <span style={{ fontSize:9, color:\"var(--text-dim)\" }}>layered with master play</span>\n      </div>\n\n      {/* Wave viz */}\n      <div className=\"card\" style={{ height:72, display:\"flex\", alignItems:\"flex-end\", justifyContent:\"center\", gap:2, padding:\"10px 14px\", overflow:\"hidden\" }}>\n        {Array.from({ length: bars }).map((_, i) => (\n          <div key={i} style={{\n            flex:1, borderRadius:2, minWidth:3,\n            background: session.oceanOn ? \"var(--accent-cyan)\" : \"var(--bg3)\",\n            opacity: session.oceanOn ? 0.7 : 0.2,\n            animation: session.oceanOn ? `oceanBar ${60/session.breathRate}s ease-in-out ${(i/bars)*(60/session.breathRate)}s infinite` : \"none\",\n            height: session.oceanOn ? undefined : 3,\n          }}/>\n        ))}\n        <style>{`@keyframes oceanBar{0%,100%{height:3px;opacity:.25}50%{height:50px;opacity:.85}}`}</style>\n      </div>\n\n      <div className=\"card\" style={{ display:\"flex\", flexDirection:\"column\", gap:16 }}>\n        <Slider label=\"BREATH RATE\" value={session.breathRate} min={2} max={12} accent=\"var(--accent-cyan)\"\n          onChange={(v:number) => setSession((p:any)=>({...p,breathRate:v}))} unit=\"bpm\"/>\n      </div>\n\n      <div style={{ fontSize:9, color:\"var(--text-dim)\", textAlign:\"center\", letterSpacing:\"0.06em\", lineHeight:1.8 }}>\n        WAVE PERIOD <span style={{ color:\"var(--accent-cyan)\" }}>{dur}s</span> · INHALE ↑ EXHALE ↓<br/>\n        <span style={{ opacity:0.5 }}>Brown noise amplitude-modulated at breath rate</span>\n      </div>\n    </div>\n  );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n  const pct = ((value-min)/(max-min))*100;\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color:accent }}>{value}<span style={{fontSize:8,marginLeft:2,opacity:0.6}}>{unit}</span></span>\n      </div>\n      <div className=\"slider-wrap\">\n        <div className=\"slider-track\"/>\n        <div className=\"slider-fill\" style={{ width:`${pct}%`, background:accent }}/>\n        <input type=\"range\" min={min} max={max} value={value} onChange={e=>onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n      </div>\n    </div>\n  );\n}\n",[],[84,140,190],"e8cdb1aa-1e72-11f1-b559-42dde27851f2","NeumorphicSlider.tsx","701ac822-1e6f-11f1-a8bc-42dde27851f2",58,["D",1773361430584],"import React from \"react\";\n\ninterface Props {\n  label: string;\n  value: number;\n  min: number;\n  max: number;\n  onChange: (v: number) => void;\n  unit?: string;\n  step?: number;\n  accent?: string;\n}\n\nexport function NeumorphicSlider({ label, value, min, max, onChange, unit = \"\", step = 1, accent }: Props) {\n  const pct = ((value - min) / (max - min)) * 100;\n  const color = accent || \"var(--accent-blue)\";\n\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color }}>{value}<span style={{ fontSize: 9, marginLeft: 2, opacity: 0.7 }}>{unit}</span></span>\n      </div>\n      <div style={{ position: \"relative\", height: 20, display: \"flex\", alignItems: \"center\" }}>\n        {/* Track background */}\n        <div style={{\n          position: \"absolute\",\n          width: \"100%\",\n          height: 3,\n          borderRadius: 2,\n          background: \"var(--bg3)\",\n          border: \"1px solid var(--border)\",\n        }} />\n        {/* Fill */}\n        <div style={{\n          position: \"absolute\",\n          width: `${pct}%`,\n          height: 3,\n          borderRadius: 2,\n          background: `linear-gradient(to right, color-mix(in srgb, ${color} 60%, transparent), ${color})`,\n          pointerEvents: \"none\",\n        }} />\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          onChange={(e) => onChange(Number(e.target.value))}\n          className=\"slider-thumb\"\n          style={{\n            position: \"absolute\",\n            width: \"100%\",\n            zIndex: 2,\n            background: \"transparent\",\n            cursor: \"pointer\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n",[],[84,140,198],"6bed99aa-1e6f-11f1-a8bc-42dde27851f2","Icons.tsx","6bed9a5e-1e6f-11f1-a8bc-42dde27851f2",11,["D",1773359932602],"export const Icons = {\n  Waves: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M2 12h4l2-9 5 18 4-9h5\"/>\n    </svg>\n  ),\n  Clock: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>\n    </svg>\n  ),\n  Play: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polygon points=\"5 3 19 12 5 21 5 3\"/>\n    </svg>\n  ),\n  Square: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n    </svg>\n  ),\n  Sliders: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"/><line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"/><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"/><line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"/><line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"/><line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"/><line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"/><line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"/>\n    </svg>\n  ),\n  Ocean: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M2 18c1.4-1.4 3-2 4.5-2 1.5 0 3.1.6 4.5 2 1.4-1.4 3-2 4.5-2 1.5 0 3.1.6 4.5 2\"/>\n      <path d=\"M2 12c1.4-1.4 3-2 4.5-2 1.5 0 3.1.6 4.5 2 1.4-1.4 3-2 4.5-2 1.5 0 3.1.6 4.5 2\"/>\n      <path d=\"M2 6c1.4-1.4 3-2 4.5-2 1.5 0 3.1.6 4.5 2 1.4-1.4 3-2 4.5-2 1.5 0 3.1.6 4.5 2\"/>\n    </svg>\n  ),\n  Timeline: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/>\n      <circle cx=\"7\" cy=\"12\" r=\"2\" fill=\"currentColor\"/>\n      <circle cx=\"13\" cy=\"12\" r=\"2\" fill=\"currentColor\"/>\n      <circle cx=\"19\" cy=\"12\" r=\"2\" fill=\"currentColor\"/>\n      <line x1=\"7\" y1=\"8\" x2=\"7\" y2=\"10\"/>\n      <line x1=\"13\" y1=\"8\" x2=\"13\" y2=\"10\"/>\n      <line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"10\"/>\n    </svg>\n  ),\n  Quote: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z\"/>\n      <path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z\"/>\n    </svg>\n  ),\n  Trash: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/>\n      <path d=\"M10 11v6\"/><path d=\"M14 11v6\"/>\n    </svg>\n  ),\n  Plus: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n    </svg>\n  ),\n  Edit: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n    </svg>\n  ),\n  Save: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"/><polyline points=\"17 21 17 13 7 13 7 21\"/><polyline points=\"7 3 7 8 15 8\"/>\n    </svg>\n  ),\n  Speaker: () => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n      <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n      <path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"/>\n    </svg>\n  ),\n};\n",[],[84,140,206],"a07cba8c-1e71-11f1-ada8-42dde27851f2","ClockTab.tsx","ce4e0364-1e6f-11f1-813d-42dde27851f2",50,["D",1773360879767],"import React from \"react\";\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function ClockTab({ session, setSession }: Props) {\n  const bpm = Math.round(60000 / session.tickSpeed);\n\n  return (\n    <div style={{ display:\"flex\", flexDirection:\"column\", gap:14 }}>\n      <div>\n        <div className=\"section-title\">Polyrhythms</div>\n        <div className=\"section-sub\">GENERATIVE TIMING ENGINE</div>\n      </div>\n\n      <div style={{ display:\"flex\", alignItems:\"center\", gap:8 }}>\n        <button onClick={() => setSession((p:any) => ({ ...p, clockOn: !p.clockOn }))}\n          style={{ background:\"none\", border:`1px solid ${session.clockOn ? \"var(--accent-green)\" : \"var(--border2)\"}`, borderRadius:20, padding:\"4px 12px\", fontFamily:\"inherit\", fontSize:9, fontWeight:700, letterSpacing:\"0.08em\", color:session.clockOn?\"var(--accent-green)\":\"var(--text-dim)\", cursor:\"pointer\" }}>\n          {session.clockOn ? \"● ON\" : \"○ OFF\"}\n        </button>\n        <span style={{ fontSize:9, color:\"var(--text-dim)\" }}>layered with master play</span>\n      </div>\n\n      {/* BPM display */}\n      <div style={{ textAlign:\"center\", padding:\"16px 0\" }}>\n        <div style={{ fontSize:52, fontWeight:700, color: session.clockOn ? \"var(--accent-green)\" : \"var(--text-dim)\", letterSpacing:\"-0.03em\", lineHeight:1 }}>\n          {bpm}\n        </div>\n        <div style={{ fontSize:9, color:\"var(--text-dim)\", letterSpacing:\"0.12em\", marginTop:4 }}>BPM</div>\n      </div>\n\n      <div className=\"card\" style={{ display:\"flex\", flexDirection:\"column\", gap:16 }}>\n        <Slider label=\"TICK SPEED\" value={session.tickSpeed} min={100} max={3000} accent=\"var(--accent-green)\"\n          onChange={(v:number) => setSession((p:any)=>({...p,tickSpeed:v}))} unit=\"ms\"/>\n        <Slider label=\"POLY CYCLE\" value={session.polySpeed} min={1} max={120} accent=\"var(--accent-green)\"\n          onChange={(v:number) => setSession((p:any)=>({...p,polySpeed:v}))} unit=\"s\"/>\n      </div>\n\n      {/* Rhythm grid visualization */}\n      <div className=\"card\" style={{ display:\"flex\", flexWrap:\"wrap\", gap:4, padding:12 }}>\n        {Array.from({length: 16}).map((_,i) => (\n          <div key={i} style={{\n            flex:\"1 1 10%\", aspectRatio:\"1\", borderRadius:3, minWidth:16,\n            background: i===0 ? \"var(--accent-green)\" : i%4===0 ? \"var(--bg3)\" : \"var(--bg)\",\n            border:`1px solid ${i%4===0?\"var(--border2)\":\"var(--border)\"}`,\n            opacity: session.clockOn ? 1 : 0.3,\n            transition:\"all 0.2s\",\n          }}/>\n        ))}\n      </div>\n\n      <div style={{ fontSize:9, color:\"var(--text-dim)\", textAlign:\"center\", letterSpacing:\"0.06em\", lineHeight:1.8 }}>\n        TICK <span style={{ color:\"var(--accent-green)\" }}>{session.tickSpeed}ms</span>\n         ·  POLY <span style={{ color:\"var(--accent-green)\" }}>{session.polySpeed}s</span>\n      </div>\n    </div>\n  );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n  const pct = ((value-min)/(max-min))*100;\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color:accent }}>{value}<span style={{fontSize:8,marginLeft:2,opacity:0.6}}>{unit}</span></span>\n      </div>\n      <div className=\"slider-wrap\">\n        <div className=\"slider-track\"/>\n        <div className=\"slider-fill\" style={{ width:`${pct}%`, background:accent }}/>\n        <input type=\"range\" min={min} max={max} value={value} onChange={e=>onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n      </div>\n    </div>\n  );\n}\n",[],[84,140,214],"e8bfaa38-1e72-11f1-8d3f-42dde27851f2","BinauralTab.tsx","85f31190-1e6f-11f1-8d5a-42dde27851f2",57,["D",1773361430450],"import React from \"react\";\nimport { NeumorphicSlider } from \"https://esm.town/v/all/brain/frontend/components/NeumorphicSlider.tsx\";\n\nconst PRESETS = {\n  custom:     { name:\"CUSTOM\",   wave:\"—\",      baseFreq:200, beatFreq:10,  noise:\"none\"  as const, desc:null },\n  focus:      { name:\"FOCUS\",    wave:\"β MID\",  baseFreq:250, beatFreq:16,  noise:\"pink\"  as const, desc:\"Mid-Beta 16Hz — active attention.\" },\n  energy:     { name:\"ENERGY\",   wave:\"β HIGH\", baseFreq:200, beatFreq:25,  noise:\"none\"  as const, desc:\"High-Beta 25Hz — peak alertness.\" },\n  creativity: { name:\"CREATE\",   wave:\"θ\",      baseFreq:300, beatFreq:7,   noise:\"brown\" as const, desc:\"Theta 7Hz — open monitoring.\" },\n  meditation: { name:\"MEDITATE\", wave:\"θ LOW\",  baseFreq:150, beatFreq:5,   noise:\"none\"  as const, desc:\"Low Theta 5Hz — deep relaxation.\" },\n  sleep:      { name:\"SLEEP\",    wave:\"δ\",      baseFreq:100, beatFreq:2,   noise:\"brown\" as const, desc:\"Delta 2Hz — induce sleep.\" },\n} as const;\ntype PresetKey = keyof typeof PRESETS;\n\nconst ACCENT: Record<PresetKey, string> = {\n  custom:\"var(--text-dim)\", focus:\"var(--accent-blue)\", energy:\"var(--accent-amber)\",\n  creativity:\"var(--accent-violet)\", meditation:\"var(--accent-cyan)\", sleep:\"var(--accent-rose)\",\n};\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function BinauralTab({ session, setSession }: Props) {\n  const [preset, setPreset] = React.useState<PresetKey>(\"custom\");\n\n  const applyPreset = (key: PresetKey) => {\n    setPreset(key);\n    if (key !== \"custom\") {\n      const p = PRESETS[key];\n      setSession((prev: any) => ({ ...prev, baseFreq: p.baseFreq, beatFreq: p.beatFreq }));\n    }\n  };\n\n  const acc = ACCENT[preset];\n  const pct = (v: number, min: number, max: number) => ((v-min)/(max-min))*100;\n\n  return (\n    <div style={{ display:\"flex\", flexDirection:\"column\", gap:14 }}>\n      <div>\n        <div className=\"section-title\">Binaural Beats</div>\n        <div className=\"section-sub\">ENTRAINMENT ENGINE · USE HEADPHONES</div>\n      </div>\n\n      {/* Module on/off */}\n      <div style={{ display:\"flex\", alignItems:\"center\", gap:8 }}>\n        <button onClick={() => setSession((p:any) => ({ ...p, binauralOn: !p.binauralOn }))}\n          style={{ background:\"none\", border:`1px solid ${session.binauralOn ? \"var(--accent-blue)\" : \"var(--border2)\"}`, borderRadius:20, padding:\"4px 12px\", fontFamily:\"inherit\", fontSize:9, fontWeight:700, letterSpacing:\"0.08em\", color:session.binauralOn?\"var(--accent-blue)\":\"var(--text-dim)\", cursor:\"pointer\" }}>\n          {session.binauralOn ? \"● ON\" : \"○ OFF\"}\n        </button>\n        <span style={{ fontSize:9, color:\"var(--text-dim)\" }}>module {session.binauralOn ? \"active\" : \"disabled\"} — play from bottom toolbar</span>\n      </div>\n\n      {/* Preset grid */}\n      <div className=\"preset-grid\">\n        {(Object.entries(PRESETS) as [PresetKey, any][]).map(([key, p]) => {\n          const a = ACCENT[key];\n          const active = preset === key;\n          return (\n            <button key={key} onClick={() => applyPreset(key)} className={`preset-btn${active?\" active\":\"\"}`}\n              style={{ borderColor: active ? a : undefined, color: active ? a : undefined }}>\n              <span className=\"preset-name\">{p.name}</span>\n              <span className=\"preset-hz\">{key===\"custom\" ? `${session.baseFreq}Hz` : `${p.baseFreq}Hz`}</span>\n              <span className=\"preset-wave\">{p.wave}</span>\n            </button>\n          );\n        })}\n      </div>\n\n      {preset !== \"custom\" && PRESETS[preset].desc && (\n        <div style={{ fontSize:10, color:acc, letterSpacing:\"0.04em\", lineHeight:1.5, padding:\"7px 11px\", background:\"var(--bg2)\", border:`1px solid color-mix(in srgb,${acc} 30%,transparent)`, borderRadius:8 }}>\n          {PRESETS[preset].desc}\n        </div>\n      )}\n\n      <div className=\"card\" style={{ display:\"flex\", flexDirection:\"column\", gap:16 }}>\n        <Slider label=\"BASE FREQ\" value={session.baseFreq} min={80} max={500} accent={acc}\n          onChange={v => { setPreset(\"custom\"); setSession((p:any)=>({...p,baseFreq:v})); }} unit=\"Hz\" />\n        <Slider label=\"BEAT FREQ\" value={session.beatFreq} min={1} max={40} accent={acc}\n          onChange={v => { setPreset(\"custom\"); setSession((p:any)=>({...p,beatFreq:v})); }} unit=\"Hz\" />\n      </div>\n\n      <div style={{ fontSize:9, color:\"var(--text-dim)\", letterSpacing:\"0.06em\", textAlign:\"center\", lineHeight:1.8 }}>\n        <span style={{ color:\"var(--accent-blue)\" }}>{session.baseFreq}Hz</span> L  / {\" \"}\n        <span style={{ color:acc }}>{session.baseFreq + session.beatFreq}Hz</span> R\n      </div>\n    </div>\n  );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n  const pct = ((value-min)/(max-min))*100;\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color:accent }}>{value}<span style={{fontSize:8,marginLeft:2,opacity:0.6}}>{unit}</span></span>\n      </div>\n      <div className=\"slider-wrap\">\n        <div className=\"slider-track\"/>\n        <div className=\"slider-fill\" style={{ width:`${pct}%`, background:`linear-gradient(to right,color-mix(in srgb,${accent} 50%,transparent),${accent})` }}/>\n        <input type=\"range\" min={min} max={max} value={value} onChange={e=>onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n      </div>\n    </div>\n  );\n}\n",[],[84,140,222],["D",1773359859285],[232,233,234],[91],{"_38":250,"_13":251,"_41":252,"_43":92,"_44":45,"_46":253,"_48":49,"_50":254,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_103":255,"_18":256},{"_38":243,"_13":244,"_41":245,"_43":92,"_44":45,"_46":177,"_48":49,"_50":246,"_17":66,"_53":127,"_55":247,"_57":58,"_59":-5,"_103":248,"_18":249},{"_38":235,"_13":236,"_41":237,"_43":92,"_44":45,"_46":238,"_48":49,"_50":239,"_17":66,"_53":127,"_55":240,"_57":58,"_59":-5,"_103":241,"_18":242},"5ab3c178-1e6f-11f1-a07b-42dde27851f2","index.ts","5ab3c24a-1e6f-11f1-a07b-42dde27851f2",10,["D",1773359903648],"import { handleQuotes } from \"./routes/quotes.ts\";\nimport { handleTimeline } from \"./routes/timeline.ts\";\nimport { handleTTS } from \"./routes/tts.ts\";\n\nexport async function handleAPI(req: Request): Promise<Response | null> {\n  const url = new URL(req.url);\n  const path = url.pathname;\n\n  // CORS preflight\n  if (req.method === \"OPTIONS\") {\n    return new Response(null, { headers: corsHeaders() });\n  }\n\n  let res: Response | null = null;\n\n  if (path.startsWith(\"/api/quotes\")) {\n    res = await handleQuotes(req);\n  } else if (path.startsWith(\"/api/timeline\")) {\n    res = await handleTimeline(req);\n  } else if (path === \"/api/tts\") {\n    res = await handleTTS(req);\n  }\n\n  if (res) {\n    // Attach CORS headers to all API responses\n    const headers = new Headers(res.headers);\n    for (const [k, v] of Object.entries(corsHeaders())) {\n      headers.set(k, v);\n    }\n    return new Response(res.body, { status: res.status, headers });\n  }\n\n  return null;\n}\n\nfunction corsHeaders(): Record<string, string> {\n  return {\n    \"Access-Control-Allow-Origin\": \"*\",\n    \"Access-Control-Allow-Methods\": \"GET, POST, PUT, PATCH, DELETE, OPTIONS\",\n    \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n  };\n}\n",[],[91,236],"4870641c-1e6f-11f1-a07b-42dde27851f2","db.ts","4870650c-1e6f-11f1-a07b-42dde27851f2",["D",1773359873062],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDB() {\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS quotes (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      text TEXT NOT NULL,\n      author TEXT NOT NULL DEFAULT '',\n      enabled INTEGER NOT NULL DEFAULT 1,\n      created_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS timelines (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      name TEXT NOT NULL,\n      segments TEXT NOT NULL DEFAULT '[]',\n      created_at TEXT NOT NULL DEFAULT (datetime('now')),\n      updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )\n  `);\n\n  // Seed default quotes if empty\n  const existing = await sqlite.execute(`SELECT COUNT(*) as count FROM quotes`);\n  const count = (existing.rows[0] as any).count;\n  if (count === 0) {\n    const defaults = [\n      [\"The present moment always will have been.\", \"Stoic Axiom\"],\n      [\"Be still and know.\", \"Psalm 46:10\"],\n      [\"Wherever you are, be all there.\", \"Jim Elliot\"],\n      [\"The quieter you become, the more you can hear.\", \"Ram Dass\"],\n      [\"Respond; do not react. Listen; do not wait to speak.\", \"Rumi\"],\n      [\"In the middle of difficulty lies opportunity.\", \"Albert Einstein\"],\n      [\"What you seek is seeking you.\", \"Rumi\"],\n      [\"Do not go where the path may lead, go instead where there is no path.\", \"Emerson\"],\n    ];\n    for (const [text, author] of defaults) {\n      await sqlite.execute({\n        sql: `INSERT INTO quotes (text, author) VALUES (?, ?)`,\n        args: [text, author],\n      });\n    }\n  }\n}\n\nexport { sqlite };\n",[],[91,244],"41751860-1e6f-11f1-9ea7-42dde27851f2","routes","41751932-1e6f-11f1-9ea7-42dde27851f2",3,["D",1773359861327],[257,258,259],[91,251],{"_38":276,"_13":277,"_41":278,"_43":252,"_44":45,"_46":52,"_48":49,"_50":279,"_17":66,"_53":127,"_55":280,"_57":58,"_59":-5,"_103":281,"_18":282},{"_38":268,"_13":269,"_41":270,"_43":252,"_44":45,"_46":271,"_48":49,"_50":272,"_17":66,"_53":127,"_55":273,"_57":58,"_59":-5,"_103":274,"_18":275},{"_38":260,"_13":261,"_41":262,"_43":252,"_44":45,"_46":263,"_48":49,"_50":264,"_17":93,"_53":127,"_55":265,"_57":58,"_59":-5,"_103":266,"_18":267},"e88653c8-1e72-11f1-9eb7-42dde27851f2","tts.ts","568eb44a-1e6f-11f1-8d5a-42dde27851f2",55,["D",1773361430125],"/**\n * Proxy to Groq Orpheus TTS API — keeps API key server-side.\n * POST /api/tts  { text: string, voice?: string }\n * Returns audio/wav stream with reverb applied via Web Audio on client.\n *\n * Model: canopylabs/orpheus-v1-english\n * Voices: autumn, diana, hannah, austin, daniel, troy\n */\nconst VALID_VOICES = new Set([\"autumn\", \"diana\", \"hannah\", \"austin\", \"daniel\", \"troy\"]);\n\nexport async function handleTTS(req: Request): Promise<Response> {\n  if (req.method !== \"POST\") {\n    return new Response(\"Method Not Allowed\", { status: 405 });\n  }\n\n  const GROQ_API_KEY = Deno.env.get(\"GROQ_API\");\n  if (!GROQ_API_KEY) {\n    return new Response(JSON.stringify({ error: \"GROQ_API not configured\" }), {\n      status: 500,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  let body: any;\n  try {\n    body = await req.json();\n  } catch {\n    return new Response(JSON.stringify({ error: \"Invalid JSON\" }), {\n      status: 400,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  const { text, voice: rawVoice = \"troy\" } = body;\n  const voice = VALID_VOICES.has(rawVoice) ? rawVoice : \"troy\";\n\n  if (!text?.trim()) {\n    return new Response(JSON.stringify({ error: \"text required\" }), {\n      status: 400,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  const groqRes = await fetch(\"https://api.groq.com/openai/v1/audio/speech\", {\n    method: \"POST\",\n    headers: {\n      \"Authorization\": `Bearer ${GROQ_API_KEY}`,\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify({\n      model: \"canopylabs/orpheus-v1-english\",\n      input: text,\n      voice,\n      response_format: \"wav\",\n    }),\n  });\n\n  if (!groqRes.ok) {\n    const err = await groqRes.text();\n    console.error(\"Groq TTS error:\", groqRes.status, err);\n    return new Response(JSON.stringify({ error: err }), {\n      status: groqRes.status,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  return new Response(groqRes.body, {\n    headers: {\n      \"Content-Type\": \"audio/wav\",\n      \"Cache-Control\": \"no-cache\",\n    },\n  });\n}\n",[],[91,251,261],"52d1bf46-1e6f-11f1-a07b-42dde27851f2","timeline.ts","52d1c018-1e6f-11f1-a07b-42dde27851f2",8,["D",1773359890477],"import { initDB, sqlite } from \"../db.ts\";\n\nexport async function handleTimeline(req: Request): Promise<Response> {\n  await initDB();\n  const url = new URL(req.url);\n  const method = req.method;\n  const idMatch = url.pathname.match(/\\/api\\/timeline\\/(\\d+)$/);\n\n  // GET /api/timeline — list all\n  if (method === \"GET\" && !idMatch) {\n    const rows = await sqlite.execute(`SELECT * FROM timelines ORDER BY updated_at DESC`);\n    return json(rows.rows.map(r => ({ ...r, segments: JSON.parse((r as any).segments) })));\n  }\n\n  // GET /api/timeline/:id\n  if (method === \"GET\" && idMatch) {\n    const id = Number(idMatch[1]);\n    const rows = await sqlite.execute({ sql: `SELECT * FROM timelines WHERE id = ?`, args: [id] });\n    if (!rows.rows.length) return json({ error: \"not found\" }, 404);\n    const r = rows.rows[0] as any;\n    return json({ ...r, segments: JSON.parse(r.segments) });\n  }\n\n  // POST /api/timeline — create\n  if (method === \"POST\") {\n    const body = await req.json();\n    const { name = \"New Session\", segments = [] } = body;\n    const result = await sqlite.execute({\n      sql: `INSERT INTO timelines (name, segments, updated_at) VALUES (?, ?, datetime('now')) RETURNING *`,\n      args: [name, JSON.stringify(segments)],\n    });\n    const r = result.rows[0] as any;\n    return json({ ...r, segments: JSON.parse(r.segments) }, 201);\n  }\n\n  // PUT /api/timeline/:id — full replace\n  if (method === \"PUT\" && idMatch) {\n    const id = Number(idMatch[1]);\n    const body = await req.json();\n    const { name, segments } = body;\n    const result = await sqlite.execute({\n      sql: `UPDATE timelines SET name = ?, segments = ?, updated_at = datetime('now') WHERE id = ? RETURNING *`,\n      args: [name, JSON.stringify(segments), id],\n    });\n    if (!result.rows.length) return json({ error: \"not found\" }, 404);\n    const r = result.rows[0] as any;\n    return json({ ...r, segments: JSON.parse(r.segments) });\n  }\n\n  // DELETE /api/timeline/:id\n  if (method === \"DELETE\" && idMatch) {\n    const id = Number(idMatch[1]);\n    await sqlite.execute({ sql: `DELETE FROM timelines WHERE id = ?`, args: [id] });\n    return json({ ok: true });\n  }\n\n  return json({ error: \"not found\" }, 404);\n}\n\nfunction json(data: any, status = 200): Response {\n  return new Response(JSON.stringify(data), {\n    status,\n    headers: { \"Content-Type\": \"application/json\" },\n  });\n}\n",[],[91,251,269],"4ce2a6d6-1e6f-11f1-8481-42dde27851f2","quotes.ts","4ce2a79e-1e6f-11f1-8481-42dde27851f2",["D",1773359880521],"import { initDB, sqlite } from \"../db.ts\";\n\nexport async function handleQuotes(req: Request): Promise<Response> {\n  await initDB();\n  const url = new URL(req.url);\n  const method = req.method;\n\n  // GET /api/quotes — list all\n  if (method === \"GET\") {\n    const rows = await sqlite.execute(`SELECT * FROM quotes ORDER BY id ASC`);\n    return json(rows.rows);\n  }\n\n  // POST /api/quotes — create\n  if (method === \"POST\") {\n    const body = await req.json();\n    const { text, author = \"\" } = body;\n    if (!text?.trim()) return json({ error: \"text required\" }, 400);\n    const result = await sqlite.execute({\n      sql: `INSERT INTO quotes (text, author) VALUES (?, ?) RETURNING *`,\n      args: [text.trim(), author.trim()],\n    });\n    return json(result.rows[0], 201);\n  }\n\n  // PATCH /api/quotes/:id — update\n  const idMatch = url.pathname.match(/\\/api\\/quotes\\/(\\d+)$/);\n  if (method === \"PATCH\" && idMatch) {\n    const id = Number(idMatch[1]);\n    const body = await req.json();\n    const fields: string[] = [];\n    const args: any[] = [];\n    if (body.text !== undefined) { fields.push(\"text = ?\"); args.push(body.text); }\n    if (body.author !== undefined) { fields.push(\"author = ?\"); args.push(body.author); }\n    if (body.enabled !== undefined) { fields.push(\"enabled = ?\"); args.push(body.enabled ? 1 : 0); }\n    if (!fields.length) return json({ error: \"no fields\" }, 400);\n    args.push(id);\n    const result = await sqlite.execute({\n      sql: `UPDATE quotes SET ${fields.join(\", \")} WHERE id = ? RETURNING *`,\n      args,\n    });\n    return json(result.rows[0]);\n  }\n\n  // DELETE /api/quotes/:id\n  if (method === \"DELETE\" && idMatch) {\n    const id = Number(idMatch[1]);\n    await sqlite.execute({ sql: `DELETE FROM quotes WHERE id = ?`, args: [id] });\n    return json({ ok: true });\n  }\n\n  return json({ error: \"not found\" }, 404);\n}\n\nfunction json(data: any, status = 200): Response {\n  return new Response(JSON.stringify(data), {\n    status,\n    headers: { \"Content-Type\": \"application/json\" },\n  });\n}\n",[],[91,251,277],"c1c13afe-1e6e-11f1-9536-42dde27851f2",["D",1773359647109],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","ade6ff6e-2082-407d-ac14-f95835477319","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","ac07f7d9-2f7b-4820-84f1-ee64e6f1c40c","tursoName","c1c13afe1e6e11f1953642dde27851f2","tursoHostname","c1c13afe1e6e11f1953642dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789440639557],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_338":334},"org",{"_11":12,"_332":-5,"_333":334,"_292":293,"_335":336,"_337":58},"branch",{"_17":184,"_13":16,"_38":45,"_324":283,"_325":-5,"_326":-5,"_327":-5,"_328":-5,"_329":-5,"_330":14,"_331":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_38":283,"_13":14,"_50":451,"_285":-5,"_286":58,"_287":288,"_289":288,"_290":-5,"_291":-5,"_292":293,"_294":-5,"_295":58,"_296":-5,"_297":-5,"_298":66,"_299":300,"_301":302,"_303":304,"_305":452,"_307":-5,"_308":309,"_310":309,"_311":312,"_313":312,"_314":312,"_315":309,"_316":309,"_317":453,"_319":454,"_321":455,"_323":58},[379,386,399,400,401,402],"files",[379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402],"counts",{"_369":66,"_370":371,"_372":66,"_31":373,"_374":375},[357,358,359,360,361,362],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_38":90,"_13":91,"_41":92,"_43":-5,"_44":45,"_46":93,"_48":49,"_50":94,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_18":368},{"_38":83,"_13":84,"_41":85,"_43":-5,"_44":45,"_46":86,"_48":49,"_50":87,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_18":367},{"_38":76,"_13":77,"_41":78,"_43":-5,"_44":45,"_46":79,"_48":49,"_50":80,"_17":66,"_53":24,"_55":81,"_57":58,"_59":-5,"_18":366},{"_38":69,"_13":70,"_41":71,"_43":-5,"_44":45,"_46":72,"_48":49,"_50":73,"_17":66,"_53":24,"_55":74,"_57":58,"_59":-5,"_18":365},{"_38":61,"_13":62,"_41":63,"_43":-5,"_44":45,"_46":64,"_48":49,"_50":65,"_17":66,"_53":24,"_55":67,"_57":58,"_59":-5,"_18":364},{"_38":39,"_13":40,"_41":42,"_43":-5,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":14,"_18":363},[40],[62],[70],[77],[84],[91],"pulls","branches",1,"forks",{"_376":371,"_378":66},"connections",{"_376":66,"_377":66},"count","unfilledCount","emptyCount",{"_38":90,"_13":91,"_41":92,"_43":-5,"_44":45,"_46":93,"_48":49,"_50":229,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_103":449,"_18":450},{"_38":250,"_13":251,"_41":252,"_43":92,"_44":45,"_46":253,"_48":49,"_50":254,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_103":447,"_18":448},{"_38":276,"_13":277,"_41":278,"_43":252,"_44":45,"_46":52,"_48":49,"_50":279,"_17":66,"_53":127,"_55":280,"_57":58,"_59":-5,"_103":445,"_18":446},{"_38":268,"_13":269,"_41":270,"_43":252,"_44":45,"_46":271,"_48":49,"_50":272,"_17":66,"_53":127,"_55":273,"_57":58,"_59":-5,"_103":443,"_18":444},{"_38":260,"_13":261,"_41":262,"_43":252,"_44":45,"_46":263,"_48":49,"_50":264,"_17":93,"_53":127,"_55":265,"_57":58,"_59":-5,"_103":441,"_18":442},{"_38":243,"_13":244,"_41":245,"_43":92,"_44":45,"_46":177,"_48":49,"_50":246,"_17":66,"_53":127,"_55":247,"_57":58,"_59":-5,"_103":439,"_18":440},{"_38":235,"_13":236,"_41":237,"_43":92,"_44":45,"_46":238,"_48":49,"_50":239,"_17":66,"_53":127,"_55":240,"_57":58,"_59":-5,"_103":437,"_18":438},{"_38":83,"_13":84,"_41":85,"_43":-5,"_44":45,"_46":86,"_48":49,"_50":115,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_103":435,"_18":436},{"_38":139,"_13":140,"_41":141,"_43":85,"_44":45,"_46":142,"_48":49,"_50":143,"_17":66,"_53":88,"_55":-5,"_57":58,"_59":-5,"_103":433,"_18":434},{"_38":221,"_13":222,"_41":223,"_43":141,"_44":45,"_46":224,"_48":49,"_50":225,"_17":142,"_53":127,"_55":226,"_57":58,"_59":-5,"_103":431,"_18":432},{"_38":213,"_13":214,"_41":215,"_43":141,"_44":45,"_46":216,"_48":49,"_50":217,"_17":86,"_53":127,"_55":218,"_57":58,"_59":-5,"_103":429,"_18":430},{"_38":205,"_13":206,"_41":207,"_43":141,"_44":45,"_46":208,"_48":49,"_50":209,"_17":66,"_53":127,"_55":210,"_57":58,"_59":-5,"_103":427,"_18":428},{"_38":197,"_13":198,"_41":199,"_43":141,"_44":45,"_46":200,"_48":49,"_50":201,"_17":142,"_53":127,"_55":202,"_57":58,"_59":-5,"_103":425,"_18":426},{"_38":189,"_13":190,"_41":191,"_43":141,"_44":45,"_46":192,"_48":49,"_50":193,"_17":86,"_53":127,"_55":194,"_57":58,"_59":-5,"_103":423,"_18":424},{"_38":181,"_13":182,"_41":183,"_43":141,"_44":45,"_46":184,"_48":49,"_50":185,"_17":142,"_53":127,"_55":186,"_57":58,"_59":-5,"_103":421,"_18":422},{"_38":172,"_13":173,"_41":174,"_43":141,"_44":45,"_46":175,"_48":49,"_50":176,"_17":177,"_53":127,"_55":178,"_57":58,"_59":-5,"_103":419,"_18":420},{"_38":163,"_13":164,"_41":165,"_43":141,"_44":45,"_46":166,"_48":49,"_50":167,"_17":168,"_53":127,"_55":169,"_57":58,"_59":-5,"_103":417,"_18":418},{"_38":155,"_13":156,"_41":157,"_43":141,"_44":45,"_46":158,"_48":49,"_50":159,"_17":66,"_53":127,"_55":160,"_57":58,"_59":-5,"_103":415,"_18":416},{"_38":131,"_13":132,"_41":133,"_43":85,"_44":45,"_46":134,"_48":49,"_50":135,"_17":66,"_53":127,"_55":136,"_57":58,"_59":-5,"_103":413,"_18":414},{"_38":121,"_13":122,"_41":123,"_43":85,"_44":45,"_46":124,"_48":49,"_50":125,"_17":126,"_53":127,"_55":128,"_57":58,"_59":-5,"_103":411,"_18":412},{"_38":76,"_13":77,"_41":78,"_43":-5,"_44":45,"_46":79,"_48":49,"_50":112,"_17":66,"_53":24,"_55":81,"_57":58,"_59":-5,"_103":409,"_18":410},{"_38":69,"_13":70,"_41":71,"_43":-5,"_44":45,"_46":72,"_48":49,"_50":109,"_17":66,"_53":24,"_55":74,"_57":58,"_59":-5,"_103":407,"_18":408},{"_38":61,"_13":62,"_41":63,"_43":-5,"_44":45,"_46":64,"_48":49,"_50":106,"_17":66,"_53":24,"_55":67,"_57":58,"_59":-5,"_103":405,"_18":406},{"_38":39,"_13":40,"_41":42,"_43":-5,"_44":45,"_46":47,"_48":49,"_50":102,"_17":52,"_53":54,"_55":56,"_57":58,"_59":14,"_103":403,"_18":404},[],[40],[],[62],[],[70],[],[77],[],[84,122],[],[84,132],[],[84,140,156],[],[84,140,164],[],[84,140,173],[],[84,140,182],[],[84,140,190],[],[84,140,198],[],[84,140,206],[],[84,140,214],[],[84,140,222],[388,389,390,391,392,393,394,395,396],[84,140],[387,397,398],[84],[],[91,236],[],[91,244],[],[91,251,261],[],[91,251,269],[],[91,251,277],[381,382,383],[91,251],[380,384,385],[91],["D",1773359647109],["D",1789440639557],{"_11":12,"_338":334},{"_11":12,"_332":-5,"_333":334,"_292":293,"_335":336,"_337":58},{"_17":184,"_13":16,"_38":45,"_324":283,"_325":-5,"_326":-5,"_327":-5,"_328":-5,"_329":-5,"_330":14,"_331":12},"ctx",{"_317":-5,"_354":489,"_490":491,"_492":493,"_494":58,"_495":58,"_496":58,"_497":49,"_498":-5,"_499":-7,"_500":-7,"_501":66,"_502":58,"_503":58,"_504":-5,"_505":58,"_506":58,"_507":58,"_508":-5},"ENV",{"_460":461,"_462":463,"_464":16,"_465":466,"_467":468,"_469":470,"_471":472,"_473":474,"_475":476,"_477":478,"_479":480,"_481":482,"_483":484,"_485":486,"_487":488},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Code