NeuroSync

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_327":328,"_329":330},"routes/_app.x.$handle.$name",{"_102":101,"_37":50,"_110":92,"_32":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_26":-5,"_122":-5,"_123":-5,"_124":30,"_125":126,"_127":128,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":-5,"_58":-5,"_19":59,"_60":-5,"_61":30,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":30},"version",47,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","707225c2-d009-4967-acf0-676b9251ebb1","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/Waveform.tsx","latestPath","fileId","7a253cf6-1e71-11f1-a3e4-42dde27851f2","name","Waveform.tsx","fileType","script","content","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(null);\n const rafRef = useRef(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 \n );\n}\n","createdAt",["D",1773360815448],"branchVersion","branchId","c1c20a2e-1e6e-11f1-9536-42dde27851f2","id","c1c13afe-1e6e-11f1-9536-42dde27851f2","brain",["D",1773359647109],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","ade6ff6e-2082-407d-ac14-f95835477319","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","ac07f7d9-2f7b-4820-84f1-ee64e6f1c40c","tursoName","c1c13afe1e6e11f1953642dde27851f2","tursoHostname","c1c13afe1e6e11f1953642dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789527643940],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_19":59,"_106":107,"_108":30},"branch",{"_13":91,"_37":92,"_48":47,"_93":49,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":50,"_100":101},"isOwned",83,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","all","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":322,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":-5,"_58":-5,"_19":59,"_60":-5,"_61":30,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":323,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":324,"_86":325,"_88":326,"_90":30},"tree",[172,179,190],"files",[172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190],"counts",{"_161":65,"_162":163,"_164":65,"_165":166,"_167":168},"contents",[133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_48":155,"_37":156,"_35":157,"_139":-5,"_46":47,"_45":158,"_141":128,"_43":159,"_13":65,"_39":153,"_41":-5,"_29":30,"_146":-5,"_32":160},{"_48":148,"_37":149,"_35":150,"_139":-5,"_46":47,"_45":151,"_141":128,"_43":152,"_13":65,"_39":153,"_41":-5,"_29":30,"_146":-5,"_32":154},{"_48":136,"_37":137,"_35":138,"_139":-5,"_46":47,"_45":140,"_141":30,"_43":142,"_13":143,"_39":144,"_41":145,"_29":30,"_146":50,"_32":147},"70c5a1a6-1e70-11f1-8169-42dde27851f2","main.ts","c1c5a18e-1e6e-11f1-9536-42dde27851f2","parentId",30,"latest",["D",1773360370222],5,"http","/**\n * NEUROSYNC — Main HTTP entry point\n * Routes:\n * /api/* → backend API handlers\n * /* → React SPA (HTML shell)\n */\nimport { handleAPI } from \"./backend/index.ts\";\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n // --- API Routes ---\n if (url.pathname.startsWith(\"/api/\")) {\n const res = await handleAPI(req);\n if (res) return res;\n return new Response(JSON.stringify({ error: \"Not Found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // --- Frontend SPA Shell ---\n // esm.town serves val .tsx files as JS modules with correct MIME type.\n // An importmap is required so that bare specifiers like \"react/jsx-runtime\"\n // (injected by the TSX→JS transform) resolve correctly in the browser.\n const ESM = \"https://esm.town/v/all/brain\";\n\n const html = `\n\n\n \n \n NeuroSync\n \n \n \n \n\n\n

\n \n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","label",[137],"418662be-1e6f-11f1-8d5a-42dde27851f2","frontend","4186635e-1e6f-11f1-8d5a-42dde27851f2",4,["D",1773359861456],"directory",[149],"403a68f6-1e6f-11f1-8481-42dde27851f2","backend","403a69c8-1e6f-11f1-8481-42dde27851f2",2,["D",1773359859285],[156],"pulls","branches",1,"forks","envVars",{"_169":163,"_171":65},"connections",{"_169":65,"_170":65},"count","unfilledCount","emptyCount",{"_48":155,"_37":156,"_35":157,"_139":-5,"_46":47,"_45":158,"_141":128,"_43":319,"_13":65,"_39":153,"_41":-5,"_29":30,"_146":-5,"_192":320,"_32":321},{"_48":315,"_37":298,"_35":292,"_139":157,"_46":47,"_45":214,"_141":128,"_43":316,"_13":65,"_39":153,"_41":-5,"_29":30,"_146":-5,"_192":317,"_32":318},{"_48":307,"_37":308,"_35":309,"_139":292,"_46":47,"_45":310,"_141":128,"_43":311,"_13":65,"_39":40,"_41":312,"_29":30,"_146":-5,"_192":313,"_32":314},{"_48":299,"_37":300,"_35":301,"_139":292,"_46":47,"_45":302,"_141":128,"_43":303,"_13":65,"_39":40,"_41":304,"_29":30,"_146":-5,"_192":305,"_32":306},{"_48":289,"_37":290,"_35":291,"_139":292,"_46":47,"_45":293,"_141":30,"_43":294,"_13":163,"_39":40,"_41":295,"_29":30,"_146":-5,"_192":296,"_32":297},{"_48":281,"_37":282,"_35":283,"_139":157,"_46":47,"_45":284,"_141":128,"_43":285,"_13":65,"_39":40,"_41":286,"_29":30,"_146":-5,"_192":287,"_32":288},{"_48":273,"_37":274,"_35":275,"_139":157,"_46":47,"_45":276,"_141":128,"_43":277,"_13":65,"_39":40,"_41":278,"_29":30,"_146":-5,"_192":279,"_32":280},{"_48":148,"_37":149,"_35":150,"_139":-5,"_46":47,"_45":151,"_141":128,"_43":270,"_13":65,"_39":153,"_41":-5,"_29":30,"_146":-5,"_192":271,"_32":272},{"_48":266,"_37":208,"_35":204,"_139":150,"_46":47,"_45":143,"_141":128,"_43":267,"_13":65,"_39":153,"_41":-5,"_29":30,"_146":-5,"_192":268,"_32":269},{"_48":258,"_37":259,"_35":260,"_139":204,"_46":47,"_45":261,"_141":30,"_43":262,"_13":214,"_39":40,"_41":263,"_29":30,"_146":-5,"_192":264,"_32":265},{"_48":250,"_37":251,"_35":252,"_139":204,"_46":47,"_45":253,"_141":30,"_43":254,"_13":214,"_39":40,"_41":255,"_29":30,"_146":-5,"_192":256,"_32":257},{"_48":242,"_37":243,"_35":244,"_139":204,"_46":47,"_45":245,"_141":128,"_43":246,"_13":65,"_39":40,"_41":247,"_29":30,"_146":-5,"_192":248,"_32":249},{"_48":234,"_37":235,"_35":236,"_139":204,"_46":47,"_45":237,"_141":30,"_43":238,"_13":214,"_39":40,"_41":239,"_29":30,"_146":-5,"_192":240,"_32":241},{"_48":226,"_37":227,"_35":228,"_139":204,"_46":47,"_45":229,"_141":30,"_43":230,"_13":214,"_39":40,"_41":231,"_29":30,"_146":-5,"_192":232,"_32":233},{"_48":218,"_37":219,"_35":220,"_139":204,"_46":47,"_45":221,"_141":30,"_43":222,"_13":214,"_39":40,"_41":223,"_29":30,"_146":-5,"_192":224,"_32":225},{"_48":209,"_37":210,"_35":211,"_139":204,"_46":47,"_45":212,"_141":30,"_43":213,"_13":214,"_39":40,"_41":215,"_29":30,"_146":-5,"_192":216,"_32":217},{"_48":203,"_37":38,"_35":36,"_139":204,"_46":47,"_45":14,"_141":128,"_43":205,"_13":65,"_39":40,"_41":42,"_29":30,"_146":-5,"_192":206,"_32":207},{"_48":195,"_37":196,"_35":197,"_139":150,"_46":47,"_45":198,"_141":30,"_43":199,"_13":151,"_39":40,"_41":200,"_29":30,"_146":-5,"_192":201,"_32":202},{"_48":136,"_37":137,"_35":138,"_139":-5,"_46":47,"_45":140,"_141":30,"_43":191,"_13":143,"_39":144,"_41":145,"_29":30,"_146":50,"_192":193,"_32":194},["D",1773360370222],"children",[],[137],"71c6325e-1e71-11f1-b4fd-42dde27851f2","App.tsx","da8512bc-1e6f-11f1-b19f-42dde27851f2",46,["D",1773360801404],"import React, { useState, useRef, useEffect, useCallback, useReducer } from \"react\";\nimport { BinauralTab } from \"https://esm.town/v/all/brain/frontend/components/BinauralTab.tsx\";\nimport { OceanPulseTab } from \"https://esm.town/v/all/brain/frontend/components/OceanPulseTab.tsx\";\nimport { TimelineTab } from \"https://esm.town/v/all/brain/frontend/components/TimelineTab.tsx\";\nimport { TTSWisdomTab } from \"https://esm.town/v/all/brain/frontend/components/TTSWisdomTab.tsx\";\nimport { ClockTab } from \"https://esm.town/v/all/brain/frontend/components/ClockTab.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { Waveform } from \"https://esm.town/v/all/brain/frontend/components/Waveform.tsx\";\n\ntype Tab = \"timeline\" | \"ocean\" | \"wisdom\" | \"clock\" | \"binaural\";\n\n// ── MASTER SESSION STATE ────────────────────────────────────────────────────\nexport interface SessionState {\n playing: boolean;\n // binaural\n binauralOn: boolean;\n baseFreq: number;\n beatFreq: number;\n // ocean\n oceanOn: boolean;\n breathRate: number;\n // clock\n clockOn: boolean;\n tickSpeed: number;\n polySpeed: number;\n // wisdom\n wisdomOn: boolean;\n wisdomIntervalMin: number;\n wisdomVoice: string;\n // active timeline segment info\n activeSegment: { label: string; brainwave: string; color: string } | null;\n}\n\nconst defaultSession: SessionState = {\n playing: false,\n binauralOn: true,\n baseFreq: 200,\n beatFreq: 10,\n oceanOn: false,\n breathRate: 6,\n clockOn: false,\n tickSpeed: 1000,\n polySpeed: 33,\n wisdomOn: false,\n wisdomIntervalMin: 10,\n wisdomVoice: \"leo\",\n activeSegment: null,\n};\n\nexport default function App() {\n const [tab, setTab] = useState(\"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 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 audioElRef = useRef(null);\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\n if (!analyserRef.current) {\n const analyser = ctx.createAnalyser();\n analyser.fftSize = 2048;\n const master = ctx.createGain();\n master.gain.value = 1;\n master.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.45, 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.55;\n master.connect(masterGainRef.current!);\n\n const waveGain = ctx.createGain(); waveGain.gain.value = 0.5;\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 scheduleClockRef = useRef<(() => void) | null>(null);\n const sessionRef = useRef(session);\n sessionRef.current = session;\n\n const scheduleClock = useCallback(() => {\n const ctx = audioCtxRef.current;\n if (!ctx || !masterGainRef.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.35, 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 const osc = ctx.createOscillator(); const g = ctx.createGain();\n osc.connect(g); g.connect(masterGainRef.current);\n osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, t); osc.frequency.linearRampToValueAtTime(80, t + 0.4);\n g.gain.setValueAtTime(0.5, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.4);\n osc.start(t); osc.stop(t + 0.4);\n nextPolyRef.current += s.polySpeed;\n }\n clockTimerRef.current = setTimeout(scheduleClock, 25);\n }, []);\n\n scheduleClockRef.current = scheduleClock;\n\n const startClock = useCallback((ctx: AudioContext) => {\n if (clockTimerRef.current) clearTimeout(clockTimerRef.current);\n nextTickRef.current = ctx.currentTime + 0.05;\n nextPolyRef.current = ctx.currentTime + 0.05;\n scheduleClock();\n }, [scheduleClock]);\n\n const stopClock = useCallback(() => {\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}${q.author ? ` — ${q.author}` : \"\"}`, voice }),\n });\n if (!r.ok) return;\n const blob = await r.blob();\n const url = URL.createObjectURL(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.7;\n const wetGain = ctx.createGain(); wetGain.gain.value = 0.35;\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 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 audioElRef.current?.pause();\n setSession(prev => ({ ...prev, playing: false }));\n }, [stopBinaural, stopOcean, stopClock]);\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 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 NEUROSYNC\n \n\n {/* Module pills */}\n

\n {[\n { key:\"binauralOn\", label:\"BEATS\", color:\"var(--accent-blue)\" },\n { key:\"oceanOn\", label:\"OCEAN\", color:\"var(--accent-cyan)\" },\n { key:\"clockOn\", label:\"CLOCK\", color:\"var(--accent-green)\" },\n { key:\"wisdomOn\", label:\"VOICE\", color:\"var(--accent-amber)\" },\n ].map(({ key, label, color }) => {\n const on = session[key as keyof SessionState] as boolean;\n return (\n \n );\n })}\n

\n\n {/* Master play */}\n \n {session.playing\n ? \n : \n }\n \n

\n\n {/* ── WAVEFORM ── */}\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 {/* ── NAV ── */}\n \n

\n );\n}\n",[],[149,196],"7a253c06-1e71-11f1-a3e4-42dde27851f2","42baf596-1e6f-11f1-9ea7-42dde27851f2",["D",1773360815448],[],[149,208,38],"components","03ade3fc-1e71-11f1-bf62-42dde27851f2","TimelineTab.tsx","ac2af6c0-1e6f-11f1-8d5a-42dde27851f2",43,["D",1773360616687],3,"import React, { useState, useEffect, useRef } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\nconst WAVE_COLORS: Record = {\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 = {\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\nexport function TimelineTab() {\n const [timelines, setTimelines] = useState([]);\n const [current, setCurrent] = useState({ name: \"New Session\", segments: [] });\n const [saving, setSaving] = useState(false);\n const [playing, setPlaying] = useState(false);\n const [activeSegIdx, setActiveSegIdx] = useState(0);\n\n const ctxRef = useRef(null);\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n const timerRef = useRef | 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) {\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);\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 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 return (\n

Timeline

SESSION BUILDER

\n\n {/* Timeline bar */}\n {current.segments.length > 0 && (\n

\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

\n {w > 10 && seg.label}\n {isActive &&

}\n

\n );\n })}\n

\n )}\n\n {/* Name + controls row */}\n

\n setCurrent(p => ({ ...p, name: e.target.value }))}\n style={{ flex: 1, fontWeight: 700, fontSize: 12 }}\n />\n \n {current.segments.length > 0 && (\n \n )}\n

\n\n {/* Segments */}\n

\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

\n 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 \n

WAVE

\n \n

MIN

\n updateSeg(seg.id, { durationMin: Number(e.target.value) })} />\n

BASE Hz

\n updateSeg(seg.id, { baseFreq: Number(e.target.value) })} />\n

\n );\n })}\n

\n\n \n\n {/* Saved sessions */}\n {timelines.length > 0 && (\n

SAVED SESSIONS

\n {timelines.map(tl => (\n

\n \n \n

\n ))}\n

\n )}\n\n

\n TOTAL SESSION {totalMin}min\n

\n );\n}\n",[],[149,208,210],"1e52e248-1e71-11f1-bf62-42dde27851f2","TTSWisdomTab.tsx","c5330ea0-1e6f-11f1-8481-42dde27851f2",44,["D",1773360661393],"import React, { useState, useEffect, useRef } 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; }\n\nconst VOICES = [\n { value: \"Calum-PlayAI\", label: \"CALUM\" },\n { value: \"Celeste-PlayAI\", label: \"CELESTE\" },\n { value: \"Finn-PlayAI\", label: \"FINN\" },\n { value: \"Grayson-PlayAI\", label: \"GRAYSON\" },\n];\n\nexport function TTSWisdomTab() {\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 const [voice, setVoice] = useState(\"Calum-PlayAI\");\n const [intervalMin, setIntervalMin] = useState(10);\n const [running, setRunning] = useState(false);\n const [currentQuote, setCurrentQuote] = useState(null);\n const [ttsStatus, setTtsStatus] = useState<\"idle\" | \"loading\" | \"playing\" | \"error\">(\"idle\");\n\n const intervalRef = useRef | null>(null);\n const audioRef = useRef(null);\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 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\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 speak(q: Quote) {\n setCurrentQuote(q);\n setTtsStatus(\"loading\");\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}${q.author ? ` — ${q.author}` : \"\"}`, voice }),\n });\n if (!r.ok) throw new Error(\"TTS failed\");\n const blob = await r.blob();\n const url = URL.createObjectURL(blob);\n audioRef.current?.pause();\n const audio = new Audio(url);\n audioRef.current = audio;\n audio.onended = () => { setTtsStatus(\"idle\"); URL.revokeObjectURL(url); };\n audio.onerror = () => setTtsStatus(\"error\");\n await audio.play();\n setTtsStatus(\"playing\");\n } catch { setTtsStatus(\"error\"); }\n }\n\n function startInterval() {\n const q = pickRandom(); if (q) speak(q);\n intervalRef.current = setInterval(() => { const next = pickRandom(); if (next) speak(next); }, intervalMin * 60 * 1000);\n setRunning(true);\n }\n function stopInterval() {\n if (intervalRef.current) clearInterval(intervalRef.current);\n audioRef.current?.pause();\n setRunning(false); setTtsStatus(\"idle\");\n }\n useEffect(() => () => { stopInterval(); }, []);\n\n return (\n

TTS Wisdom

GROQ · PHILOSOPHICAL QUOTES

\n\n {/* Current quote */}\n

\n {currentQuote ? (\n <>\n

\n \"{currentQuote.text}\"\n

\n {currentQuote.author && (\n

\n — {currentQuote.author}\n

\n )}\n {ttsStatus === \"loading\" &&

GENERATING…

}\n {ttsStatus === \"playing\" &&

▶ SPEAKING

}\n {ttsStatus === \"error\" &&

TTS ERROR

}\n \n ) : (\n

\n PRESS SPEAK OR START TIMER\n

\n )}\n

\n\n {/* Voice selector */}\n

VOICE

\n {VOICES.map(v => (\n \n ))}\n

\n\n

\n INTERVAL\n {intervalMin}min\n

\n setIntervalMin(Number(e.target.value))}\n className=\"slider-thumb\"\n style={{ position: \"absolute\", width: \"100%\", zIndex: 2, background: \"transparent\" }} />\n

\n\n {/* Controls */}\n

\n \n \n

\n\n {/* Quote library header */}\n

QUOTE LIBRARY {quotes.filter(q=>q.enabled).length}/{quotes.length}

\n \n

\n\n {/* Add form */}\n {adding && (\n

setNewQ(p=>({...p,text:e.target.value}))}\n            style={{ resize: \"none\" }} />\n          <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p=>({...p,author:e.target.value}))} />\n          <div style={{ display: \"flex\", gap: 6 }}>\n            <button onClick={addQuote} className=\"card-sm\" style={{ flex: 1, cursor: \"pointer\", color: \"var(--accent-amber)\", fontSize: 10, fontWeight: 700 }}>SAVE</button>\n            <button onClick={() => setAdding(false)} className=\"card-sm\" style={{ flex: 1, cursor: \"pointer\", color: \"var(--text-dim)\", fontSize: 10, fontWeight: 700 }}>CANCEL</button>\n          </div>\n        </div>\n      )}\n\n      {/* Quote list */}\n      {loading ? (\n        <div style={{ fontSize: 9, color: \"var(--text-dim)\", textAlign: \"center\", padding: 16 }}>LOADING…</div>\n      ) : (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          {quotes.map(q => (\n            <div key={q.id} className=\"card\" style={{ opacity: q.enabled ? 1 : 0.45, borderColor: q.enabled ? \"var(--border2)\" : \"var(--border)\" }}>\n              {editingId === q.id ? (\n                <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n                  <textarea rows={3} value={draft.text} onChange={e => setDraft(p=>({...p,text:e.target.value}))} style={{ resize: \"none\" }} />\n                  <input value={draft.author} onChange={e => setDraft(p=>({...p,author:e.target.value}))} placeholder=\"Author\" />\n                  <div style={{ display: \"flex\", gap: 6 }}>\n                    <button onClick={() => saveEdit(q.id)} style={{ background:\"none\",border:\"none\",color:\"var(--accent-amber)\",fontFamily:\"inherit\",fontSize:10,fontWeight:700,cursor:\"pointer\",letterSpacing:\"0.06em\" }}>SAVE</button>\n                    <button onClick={() => setEditingId(null)} style={{ background:\"none\",border:\"none\",color:\"var(--text-dim)\",fontFamily:\"inherit\",fontSize:10,cursor:\"pointer\" }}>CANCEL</button>\n                  </div>\n                </div>\n              ) : (\n                <div style={{ display: \"flex\", gap: 10, alignItems: \"flex-start\" }}>\n                  <div style={{ flex: 1 }}>\n                    <div style={{ fontSize: 10, color: \"var(--text)\", lineHeight: 1.6, fontStyle: \"italic\" }}>\"{q.text}\"</div>\n                    {q.author && <div style={{ fontSize: 9, color: \"var(--accent-amber)\", marginTop: 4, letterSpacing: \"0.06em\" }}>— {q.author}</div>}\n                  </div>\n                  <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4, flexShrink: 0 }}>\n                    <button onClick={() => speak(q)} style={{ background:\"none\",border:\"none\",color:\"var(--text-dim)\",cursor:\"pointer\",padding:2 }}><Icons.Speaker /></button>\n                    <button onClick={() => { setEditingId(q.id); setDraft({text:q.text,author:q.author}); }} style={{ background:\"none\",border:\"none\",color:\"var(--text-dim)\",cursor:\"pointer\",padding:2 }}><Icons.Edit /></button>\n                    <button onClick={() => toggleEnabled(q)}\n                      style={{ background:\"none\",border:\"none\",fontFamily:\"inherit\",fontSize:8,fontWeight:700,cursor:\"pointer\",color:q.enabled?\"var(--accent-green)\":\"var(--text-dim)\",letterSpacing:\"0.06em\",padding:2 }}>\n                      {q.enabled?\"ON\":\"OFF\"}\n                    </button>\n                    <button onClick={() => deleteQuote(q.id)} style={{ background:\"none\",border:\"none\",color:\"var(--text-dim)\",cursor:\"pointer\",padding:2 }}><Icons.Trash /></button>\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[149,208,219],"db9b954e-1e70-11f1-99cd-42dde27851f2","OceanPulseTab.tsx","93de9b62-1e6f-11f1-821a-42dde27851f2",41,["D",1773360549467],"import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { NeumorphicSlider } from \"https://esm.town/v/all/brain/frontend/components/NeumorphicSlider.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\nexport function OceanPulseTab() {\n  const [playing, setPlaying] = useState(false);\n  const [breathRate, setBreathRate] = useState(6);\n  const [waveDepth, setWaveDepth] = useState(80);\n  const [volume, setVolume] = useState(60);\n\n  const ctxRef = useRef<AudioContext | null>(null);\n  const noiseRef = useRef<AudioBufferSourceNode | null>(null);\n  const lfoRef = useRef<OscillatorNode | null>(null);\n  const masterRef = useRef<GainNode | null>(null);\n  const lfoGainRef = useRef<GainNode | null>(null);\n\n  function makeBrownNoise(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;\n      last = out[i];\n      out[i] *= 3.5;\n    }\n    return buf;\n  }\n\n  const stop = useCallback(() => {\n    noiseRef.current?.stop(); noiseRef.current?.disconnect();\n    lfoRef.current?.stop(); lfoRef.current?.disconnect();\n    masterRef.current?.disconnect(); lfoGainRef.current?.disconnect();\n    noiseRef.current = null; lfoRef.current = null;\n    setPlaying(false);\n  }, []);\n\n  const start = useCallback(() => {\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\n    const master = ctx.createGain();\n    master.gain.value = volume / 100;\n    master.connect(ctx.destination);\n\n    const waveGain = ctx.createGain();\n    waveGain.gain.value = 1 - (waveDepth / 200);\n    waveGain.connect(master);\n\n    const lfo = ctx.createOscillator();\n    lfo.type = \"sine\";\n    lfo.frequency.value = breathRate / 60;\n    const lfoGain = ctx.createGain();\n    lfoGain.gain.value = waveDepth / 200;\n    lfo.connect(lfoGain);\n    lfoGain.connect(waveGain.gain);\n    lfo.start();\n\n    const buf = makeBrownNoise(ctx);\n    const noise = ctx.createBufferSource();\n    noise.buffer = buf;\n    noise.loop = true;\n    noise.connect(waveGain);\n    noise.start();\n\n    noiseRef.current = noise;\n    lfoRef.current = lfo;\n    masterRef.current = master;\n    lfoGainRef.current = lfoGain;\n    setPlaying(true);\n  }, [breathRate, waveDepth, volume]);\n\n  useEffect(() => {\n    if (lfoRef.current && ctxRef.current)\n      lfoRef.current.frequency.setTargetAtTime(breathRate / 60, ctxRef.current.currentTime, 0.5);\n  }, [breathRate]);\n\n  useEffect(() => {\n    if (masterRef.current && ctxRef.current)\n      masterRef.current.gain.setTargetAtTime(volume / 100, ctxRef.current.currentTime, 0.1);\n  }, [volume]);\n\n  useEffect(() => () => stop(), []);\n\n  const breathPeriod = (60 / breathRate).toFixed(1);\n  const bars = 18;\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <div>\n        <div className=\"section-title\">Ocean Pulse</div>\n        <div className=\"section-sub\">BREATH-SYNCED AMPLITUDE MOD</div>\n      </div>\n\n      {/* Wave visualiser */}\n      <div className=\"card\" style={{ height: 80, display: \"flex\", alignItems: \"flex-end\", justifyContent: \"center\", gap: 3, padding: \"12px 16px\", overflow: \"hidden\" }}>\n        {Array.from({ length: bars }).map((_, i) => (\n          <div key={i} style={{\n            flex: 1,\n            borderRadius: 2,\n            background: playing ? \"var(--accent-cyan)\" : \"var(--bg3)\",\n            opacity: playing ? 0.7 : 0.3,\n            minWidth: 4,\n            animation: playing ? `waveBar ${60/breathRate}s ease-in-out ${(i / bars) * (60/breathRate)}s infinite` : \"none\",\n            height: playing ? undefined : 4,\n          }} />\n        ))}\n        <style>{`\n          @keyframes waveBar {\n            0%,100% { height: 4px; opacity: 0.3; }\n            50% { height: 52px; opacity: 0.9; }\n          }\n        `}</style>\n      </div>\n\n      {/* Play */}\n      <div style={{ display: \"flex\", justifyContent: \"center\" }}>\n        <button\n          onClick={() => playing ? stop() : start()}\n          className={`play-btn${playing ? \" active\" : \"\"}`}\n          style={{ \"--active-color\": \"var(--accent-cyan)\" } as React.CSSProperties}\n        >\n          {playing ? <Icons.Square /> : <Icons.Play />}\n        </button>\n      </div>\n\n      <div className=\"card\" style={{ display: \"flex\", flexDirection: \"column\", gap: 18 }}>\n        <NeumorphicSlider label=\"BREATH RATE\" value={breathRate} min={4} max={12} step={1} onChange={setBreathRate} unit=\"bpm\" accent=\"var(--accent-cyan)\" />\n        <NeumorphicSlider label=\"WAVE DEPTH\" value={waveDepth} min={10} max={100} step={5} onChange={setWaveDepth} unit=\"%\" accent=\"var(--accent-cyan)\" />\n        <NeumorphicSlider label=\"VOLUME\" value={volume} min={0} max={100} onChange={setVolume} unit=\"%\" accent=\"var(--accent-cyan)\" />\n      </div>\n\n      <div style={{ fontSize: 9, color: \"var(--text-dim)\", textAlign: \"center\", letterSpacing: \"0.06em\", lineHeight: 1.8 }}>\n        ONE WAVE EVERY <span style={{ color: \"var(--accent-cyan)\" }}>{breathPeriod}s</span>  ·  INHALE ↑ EXHALE ↓\n      </div>\n    </div>\n  );\n}\n",[],[149,208,227],"cca6a9ca-1e70-11f1-b5a6-42dde27851f2","NeumorphicSlider.tsx","701ac822-1e6f-11f1-a8bc-42dde27851f2",40,["D",1773360524374],"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",[],[149,208,235],"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",[],[149,208,243],"e963abd0-1e70-11f1-a8bf-42dde27851f2","ClockTab.tsx","ce4e0364-1e6f-11f1-813d-42dde27851f2",42,["D",1773360572588],"import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { NeumorphicSlider } from \"https://esm.town/v/all/brain/frontend/components/NeumorphicSlider.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\nexport function ClockTab() {\n  const [playing, setPlaying] = useState(false);\n  const [tickSpeed, setTickSpeed] = useState(1000);\n  const [polySpeed, setPolySpeed] = useState(33);\n  const [tick, setTick] = useState(false);\n\n  const ctxRef = useRef<AudioContext | null>(null);\n  const nextTickRef = useRef(0);\n  const nextPolyRef = useRef(0);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  function playSynth(ctx: AudioContext, time: number, type: \"tick\" | \"poly\") {\n    const osc = ctx.createOscillator();\n    const gain = ctx.createGain();\n    osc.connect(gain); gain.connect(ctx.destination);\n    if (type === \"tick\") {\n      osc.type = \"sine\"; osc.frequency.setValueAtTime(880, time); osc.frequency.exponentialRampToValueAtTime(0.01, time + 0.08);\n      gain.gain.setValueAtTime(0.4, time); gain.gain.exponentialRampToValueAtTime(0.001, time + 0.08);\n      osc.start(time); osc.stop(time + 0.08);\n    } else {\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(260, time); osc.frequency.linearRampToValueAtTime(80, time + 0.4);\n      gain.gain.setValueAtTime(0.6, time); gain.gain.exponentialRampToValueAtTime(0.001, time + 0.4);\n      osc.start(time); osc.stop(time + 0.4);\n    }\n  }\n\n  const schedule = useCallback(() => {\n    const ctx = ctxRef.current; if (!ctx) return;\n    const ahead = 0.1;\n    while (nextTickRef.current < ctx.currentTime + ahead) {\n      playSynth(ctx, nextTickRef.current, \"tick\");\n      setTick(t => !t);\n      nextTickRef.current += tickSpeed / 1000;\n    }\n    while (nextPolyRef.current < ctx.currentTime + ahead) {\n      playSynth(ctx, nextPolyRef.current, \"poly\");\n      nextPolyRef.current += polySpeed;\n    }\n    timerRef.current = setTimeout(schedule, 25);\n  }, [tickSpeed, polySpeed]);\n\n  const toggle = () => {\n    if (playing) {\n      if (timerRef.current) clearTimeout(timerRef.current);\n      setPlaying(false);\n    } else {\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      nextTickRef.current = ctx.currentTime + 0.05;\n      nextPolyRef.current = ctx.currentTime + 0.05;\n      schedule();\n      setPlaying(true);\n    }\n  };\n\n  useEffect(() => {\n    if (playing) { if (timerRef.current) clearTimeout(timerRef.current); schedule(); }\n  }, [tickSpeed, polySpeed, playing, schedule]);\n\n  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);\n\n  // BPM derived from tickSpeed\n  const bpm = Math.round(60000 / tickSpeed);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <div>\n        <div className=\"section-title\">Polyrhythms</div>\n        <div className=\"section-sub\">GENERATIVE TIMING ENGINE</div>\n      </div>\n\n      {/* Visual clock ring */}\n      <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\", padding: \"12px 0\", position: \"relative\" }}>\n        {/* Outer ring */}\n        <div style={{\n          position: \"absolute\",\n          width: 130, height: 130,\n          borderRadius: \"50%\",\n          border: `1px solid ${playing ? \"var(--accent-green)\" : \"var(--border)\"}`,\n          outline: `1px solid ${playing ? \"color-mix(in srgb, var(--accent-green) 25%, transparent)\" : \"transparent\"}`,\n          outlineOffset: 4,\n          transition: \"all 0.3s ease\",\n        }} />\n        {/* Pulse ring */}\n        {playing && (\n          <div style={{\n            position: \"absolute\",\n            width: 130, height: 130,\n            borderRadius: \"50%\",\n            border: \"1px solid var(--accent-green)\",\n            opacity: tick ? 0.6 : 0,\n            transform: tick ? \"scale(1.15)\" : \"scale(1)\",\n            transition: `all ${tickSpeed * 0.4}ms ease-out`,\n          }} />\n        )}\n        <button\n          onClick={toggle}\n          className={`play-btn${playing ? \" active\" : \"\"}`}\n          style={{ \"--active-color\": \"var(--accent-green)\" } as React.CSSProperties}\n        >\n          {playing ? <Icons.Square /> : <Icons.Play />}\n        </button>\n      </div>\n\n      {/* BPM readout */}\n      <div style={{ textAlign: \"center\" }}>\n        <span style={{ fontSize: 28, fontWeight: 700, color: playing ? \"var(--accent-green)\" : \"var(--text-dim)\", letterSpacing: \"-0.02em\" }}>\n          {bpm}\n        </span>\n        <span style={{ fontSize: 10, color: \"var(--text-dim)\", marginLeft: 6, letterSpacing: \"0.08em\" }}>BPM</span>\n      </div>\n\n      <div className=\"card\" style={{ display: \"flex\", flexDirection: \"column\", gap: 18 }}>\n        <NeumorphicSlider label=\"TICK SPEED\" value={tickSpeed} min={100} max={3000} onChange={setTickSpeed} unit=\"ms\" accent=\"var(--accent-green)\" />\n        <NeumorphicSlider label=\"POLY CYCLE\" value={polySpeed} min={1} max={60} onChange={setPolySpeed} unit=\"s\" accent=\"var(--accent-green)\" />\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)\" }}>{tickSpeed}ms</span>  ·  POLY PULSE <span style={{ color: \"var(--accent-green)\" }}>{polySpeed}s</span>\n      </div>\n    </div>\n  );\n}\n",[],[149,208,251],"c70d207a-1e70-11f1-bf62-42dde27851f2","BinauralTab.tsx","85f31190-1e6f-11f1-8d5a-42dde27851f2",39,["D",1773360514978],"import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { NeumorphicSlider } from \"https://esm.town/v/all/brain/frontend/components/NeumorphicSlider.tsx\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\nconst PRESETS = {\n  custom:     { name: \"CUSTOM\",     wave: \"—\",      baseFreq: 200, startBeat:  6, endBeat:  3, rampTime:  30, noise: \"none\"  as const, desc: null },\n  focus:      { name: \"FOCUS\",      wave: \"β MID\",  baseFreq: 250, startBeat: 12, endBeat: 20, rampTime: 180, noise: \"pink\"  as const, desc: \"Ramps to Mid-Beta 20Hz for active attention.\" },\n  energy:     { name: \"ENERGY\",     wave: \"β HIGH\", baseFreq: 200, startBeat: 14, endBeat: 30, rampTime: 120, noise: \"none\"  as const, desc: \"Ramps to High-Beta 30Hz for peak alertness.\" },\n  creativity: { name: \"CREATIVE\",   wave: \"θ\",      baseFreq: 300, startBeat: 15, endBeat:  7, rampTime: 300, noise: \"brown\" as const, desc: \"Drops to Theta 7Hz for open-monitoring.\" },\n  meditation: { name: \"MEDITATE\",   wave: \"θ LOW\",  baseFreq: 150, startBeat: 10, endBeat:  5, rampTime: 300, noise: \"none\"  as const, desc: \"Drops to low Theta 5Hz for deep relaxation.\" },\n  sleep:      { name: \"SLEEP\",      wave: \"δ\",      baseFreq: 100, startBeat:  8, endBeat:  2, rampTime: 900, noise: \"brown\" as const, desc: \"Long ramp to Delta 2Hz to induce sleep.\" },\n} as const;\n\ntype PresetKey = keyof typeof PRESETS;\n\nconst PRESET_ACCENT: Record<PresetKey, string> = {\n  custom:     \"var(--text-dim)\",\n  focus:      \"var(--accent-blue)\",\n  energy:     \"var(--accent-amber)\",\n  creativity: \"var(--accent-violet)\",\n  meditation: \"var(--accent-cyan)\",\n  sleep:      \"var(--accent-rose, #f85149)\",\n};\n\nfunction createNoiseBuffer(ctx: AudioContext, type: \"pink\" | \"brown\") {\n  const size = ctx.sampleRate * 2;\n  const buf = ctx.createBuffer(1, size, ctx.sampleRate);\n  const out = buf.getChannelData(0);\n  if (type === \"pink\") {\n    let b0=0,b1=0,b2=0,b3=0,b4=0,b5=0,b6=0;\n    for (let i=0;i<size;i++){const w=Math.random()*2-1;b0=.99886*b0+w*.0555179;b1=.99332*b1+w*.0750759;b2=.9690*b2+w*.153852;b3=.8665*b3+w*.3104856;b4=.5500*b4+w*.5329522;b5=-.7616*b5-w*.016898;out[i]=(b0+b1+b2+b3+b4+b5+b6+w*.5362)*.11;b6=w*.115926;}\n  } else {\n    let last=0;\n    for (let i=0;i<size;i++){const w=Math.random()*2-1;out[i]=(last+(0.02*w))/1.02;last=out[i];out[i]*=3.5;}\n  }\n  return buf;\n}\n\nexport function BinauralTab() {\n  const [playing, setPlaying] = useState(false);\n  const [preset, setPreset] = useState<PresetKey>(\"custom\");\n  const [baseFreq, setBaseFreq] = useState(200);\n  const [startBeat, setStartBeat] = useState(6);\n  const [endBeat, setEndBeat] = useState(3);\n  const [rampTime, setRampTime] = useState(30);\n  const [noise, setNoise] = useState<\"none\"|\"pink\"|\"brown\">(\"none\");\n\n  const ctxRef = useRef<AudioContext|null>(null);\n  const leftRef = useRef<OscillatorNode|null>(null);\n  const rightRef = useRef<OscillatorNode|null>(null);\n  const gainRef = useRef<GainNode|null>(null);\n  const noiseRef = useRef<AudioBufferSourceNode|null>(null);\n\n  const stop = useCallback(() => {\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    noiseRef.current?.stop(); noiseRef.current?.disconnect();\n    leftRef.current = null; rightRef.current = null; noiseRef.current = null;\n    setPlaying(false);\n  }, []);\n\n  const start = useCallback(() => {\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\n    const leftOsc = ctx.createOscillator();\n    const rightOsc = ctx.createOscillator();\n    const lPan = ctx.createStereoPanner();\n    const rPan = ctx.createStereoPanner();\n    const master = ctx.createGain();\n    lPan.pan.value = -1; rPan.pan.value = 1;\n    master.gain.setValueAtTime(0, ctx.currentTime);\n    master.gain.linearRampToValueAtTime(0.5, ctx.currentTime + 2);\n    leftOsc.connect(lPan); rightOsc.connect(rPan);\n    lPan.connect(master); rPan.connect(master);\n\n    if (noise !== \"none\") {\n      const nbuf = createNoiseBuffer(ctx, noise);\n      const nsrc = ctx.createBufferSource();\n      const ngain = ctx.createGain();\n      nsrc.buffer = nbuf; nsrc.loop = true; ngain.gain.value = 0.05;\n      nsrc.connect(ngain); ngain.connect(master); nsrc.start();\n      noiseRef.current = nsrc;\n    }\n    master.connect(ctx.destination);\n\n    leftOsc.frequency.setValueAtTime(baseFreq, ctx.currentTime);\n    rightOsc.frequency.setValueAtTime(baseFreq + startBeat, ctx.currentTime);\n    rightOsc.frequency.linearRampToValueAtTime(baseFreq + endBeat, ctx.currentTime + rampTime);\n    leftOsc.start(); rightOsc.start();\n    leftRef.current = leftOsc; rightRef.current = rightOsc; gainRef.current = master;\n    setPlaying(true);\n  }, [baseFreq, startBeat, endBeat, rampTime, noise]);\n\n  const toggle = () => { playing ? stop() : start(); };\n\n  const applyPreset = (key: PresetKey) => {\n    setPreset(key);\n    if (key !== \"custom\") {\n      const p = PRESETS[key];\n      setBaseFreq(p.baseFreq); setStartBeat(p.startBeat); setEndBeat(p.endBeat);\n      setRampTime(p.rampTime); setNoise(p.noise);\n    }\n  };\n\n  const handleSlider = (setter: (v:number)=>void) => (v:number) => { setPreset(\"custom\"); setter(v); };\n\n  useEffect(() => () => { stop(); }, []);\n\n  const activeAccent = PRESET_ACCENT[preset];\n  const activePreset = PRESETS[preset];\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n\n      {/* Header */}\n      <div>\n        <div className=\"section-title\">Entrainment</div>\n        <div className=\"section-sub\">BINAURAL BEAT ENGINE</div>\n      </div>\n\n      {/* Preset Grid — all 6 visible at once */}\n      <div className=\"preset-grid\" style={{ \"--active-color\": activeAccent } as React.CSSProperties}>\n        {(Object.entries(PRESETS) as [PresetKey, typeof PRESETS[PresetKey]][]).map(([key, p]) => {\n          const acc = PRESET_ACCENT[key];\n          const isActive = preset === key;\n          return (\n            <button\n              key={key}\n              onClick={() => applyPreset(key)}\n              className={`preset-btn${isActive ? \" active\" : \"\"}`}\n              style={{ \"--active-color\": acc } as React.CSSProperties}\n            >\n              <span className=\"preset-name\">{p.name}</span>\n              <span className=\"preset-hz\">\n                {key === \"custom\"\n                  ? `${baseFreq}Hz`\n                  : `${p.baseFreq}Hz`\n                }\n              </span>\n              <span className=\"preset-wave\">{p.wave}</span>\n            </button>\n          );\n        })}\n      </div>\n\n      {/* Active preset desc */}\n      {preset !== \"custom\" && activePreset.desc && (\n        <div style={{\n          fontSize: 10,\n          color: activeAccent,\n          letterSpacing: \"0.04em\",\n          lineHeight: 1.5,\n          padding: \"8px 12px\",\n          background: \"var(--bg2)\",\n          border: `1px solid color-mix(in srgb, ${activeAccent} 30%, transparent)`,\n          borderRadius: 8,\n        }}>\n          {activePreset.desc}\n        </div>\n      )}\n\n      {/* Play button */}\n      <div style={{ display: \"flex\", justifyContent: \"center\", padding: \"4px 0\" }}>\n        <button\n          onClick={toggle}\n          className={`play-btn${playing ? \" active\" : \"\"}`}\n          style={{ \"--active-color\": activeAccent } as React.CSSProperties}\n        >\n          {playing ? <Icons.Square /> : <Icons.Play />}\n        </button>\n      </div>\n\n      {/* Controls card */}\n      <div className=\"card\" style={{ display: \"flex\", flexDirection: \"column\", gap: 18 }}>\n        <NeumorphicSlider label=\"BASE FREQ\" value={baseFreq} min={100} max={500} onChange={handleSlider(setBaseFreq)} unit=\"Hz\" accent={activeAccent} />\n        <NeumorphicSlider label=\"START BEAT\" value={startBeat} min={1} max={40} onChange={handleSlider(setStartBeat)} unit=\"Hz\" accent={activeAccent} />\n        <NeumorphicSlider label=\"TARGET BEAT\" value={endBeat} min={1} max={40} onChange={handleSlider(setEndBeat)} unit=\"Hz\" accent={activeAccent} />\n        <NeumorphicSlider label=\"RAMP TIME\" value={rampTime} min={10} max={900} onChange={handleSlider(setRampTime)} unit=\"s\" accent={activeAccent} />\n\n        {/* Noise */}\n        <div>\n          <div className=\"label-row\" style={{ marginBottom: 10 }}>\n            <span className=\"label-key\">NOISE LAYER</span>\n          </div>\n          <div style={{ display: \"flex\", gap: 6 }}>\n            {([\"none\",\"pink\",\"brown\"] as const).map(t => (\n              <button\n                key={t}\n                onClick={() => { setPreset(\"custom\"); setNoise(t); }}\n                className={`noise-btn${noise===t ? \" active\" : \"\"}`}\n                style={noise===t ? { borderColor: activeAccent, color: activeAccent } : {}}\n              >\n                {t.toUpperCase()}\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* Status line */}\n      <div style={{ fontSize: 9, color: \"var(--text-dim)\", letterSpacing: \"0.06em\", lineHeight: 1.8, textAlign: \"center\" }}>\n        <span style={{ color: \"var(--accent-blue)\" }}>{baseFreq}Hz</span> L  / {\" \"}\n        <span style={{ color: \"var(--accent-violet)\" }}>{baseFreq + startBeat}Hz</span> R  → {\" \"}\n        <span style={{ color: activeAccent }}>{baseFreq + endBeat}Hz</span> over {rampTime}s\n      </div>\n    </div>\n  );\n}\n",[],[149,208,259],"42baf4d8-1e6f-11f1-9ea7-42dde27851f2",["D",1773359863484],[181,182,183,184,185,186,187,188],[149,208],["D",1773359861456],[180,189],[149],"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",[],[156,274],"4870641c-1e6f-11f1-a07b-42dde27851f2","db.ts","4870650c-1e6f-11f1-a07b-42dde27851f2",6,["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",[],[156,282],"39f02ab0-1e71-11f1-b8fe-42dde27851f2","tts.ts","568eb44a-1e6f-11f1-8d5a-42dde27851f2","41751932-1e6f-11f1-9ea7-42dde27851f2",45,["D",1773360707721],"/**\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: troy, hannah, austin, leo, aria, nova, stella, vale\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 = \"leo\" } = body;\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",[],[156,298,290],"routes","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",[],[156,298,300],"4ce2a6d6-1e6f-11f1-8481-42dde27851f2","quotes.ts","4ce2a79e-1e6f-11f1-8481-42dde27851f2",7,["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",[],[156,298,308],"41751860-1e6f-11f1-9ea7-42dde27851f2",["D",1773359861327],[174,175,176],[156,298],["D",1773359859285],[173,177,178],[156],["D",1773359647109],["D",1789527643940],{"_102":101,"_109":105},{"_102":101,"_103":-5,"_104":105,"_19":59,"_106":107,"_108":30},{"_13":91,"_37":92,"_48":47,"_93":49,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":50,"_100":101},"ctx",{"_84":-5,"_130":360,"_361":362,"_363":364,"_365":30,"_366":30,"_367":30,"_368":128,"_369":-5,"_370":-7,"_371":-7,"_372":65,"_373":30,"_374":30,"_375":-5,"_376":30,"_377":30,"_378":30,"_379":-5},"ENV",{"_331":332,"_333":334,"_335":92,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359},"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>

Diff · v47