\n\n {/* Header */}\n

Entrainment

BINAURAL BEAT ENGINE

\n\n {/* Preset Grid — all 6 visible at once */}\n

\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 applyPreset(key)}\n className={`preset-btn${isActive ? \" active\" : \"\"}`}\n style={{ \"--active-color\": acc } as React.CSSProperties}\n >\n {p.name}\n \n {key === \"custom\"\n ? `${baseFreq}Hz`\n : `${p.baseFreq}Hz`\n }\n \n {p.wave}\n \n );\n })}\n

\n\n {/* Active preset desc */}\n {preset !== \"custom\" && activePreset.desc && (\n

\n {activePreset.desc}\n

\n )}\n\n {/* Play button */}\n

\n \n {playing ? : }\n \n

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

\n \n \n \n \n\n {/* Noise */}\n

\n NOISE LAYER\n

\n {([\"none\",\"pink\",\"brown\"] as const).map(t => (\n { setPreset(\"custom\"); setNoise(t); }}\n className={`noise-btn${noise===t ? \" active\" : \"\"}`}\n style={noise===t ? { borderColor: activeAccent, color: activeAccent } : {}}\n >\n {t.toUpperCase()}\n \n ))}\n

\n\n {/* Status line */}\n

\n {baseFreq}Hz L / {\" \"}\n {baseFreq + startBeat}Hz R → {\" \"}\n {baseFreq + endBeat}Hz over {rampTime}s\n

\n );\n}\n",[],[236,243,250],{"_106":258,"_97":259,"_163":260,"_165":244,"_166":148,"_167":261,"_169":22,"_108":262,"_102":183,"_172":192,"_174":263,"_175":22,"_176":-5,"_177":264,"_100":265},"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(null);\n const nextTickRef = useRef(0);\n const nextPolyRef = useRef(0);\n const timerRef = useRef | 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

Polyrhythms

GENERATIVE TIMING ENGINE

\n\n {/* Visual clock ring */}\n

\n {/* Outer ring */}\n

\n {/* Pulse ring */}\n {playing && (\n

\n )}\n \n {playing ? : }\n \n

\n\n {/* BPM readout */}\n

\n \n {bpm}\n \n BPM\n

\n\n

\n \n \n

\n\n

\n TICK {tickSpeed}ms · POLY PULSE {polySpeed}s\n

\n );\n}\n",[],[236,243,259],{"_106":267,"_97":268,"_163":269,"_165":244,"_166":148,"_167":270,"_169":170,"_108":271,"_102":33,"_172":192,"_174":272,"_175":22,"_176":-5,"_177":273,"_100":274},"6bed99aa-1e6f-11f1-a8bc-42dde27851f2","Icons.tsx","6bed9a5e-1e6f-11f1-a8bc-42dde27851f2",11,["D",1773359932602],"export const Icons = {\n Waves: () => (\n \n ),\n Clock: () => (\n \n ),\n Play: () => (\n \n ),\n Square: () => (\n \n ),\n Sliders: () => (\n \n ),\n Ocean: () => (\n \n ),\n Timeline: () => (\n \n ),\n Quote: () => (\n \n ),\n Trash: () => (\n \n ),\n Plus: () => (\n \n ),\n Edit: () => (\n \n ),\n Save: () => (\n \n ),\n Speaker: () => (\n \n ),\n};\n",[],[236,243,268],{"_106":276,"_97":277,"_163":278,"_165":244,"_166":148,"_167":279,"_169":22,"_108":280,"_102":183,"_172":192,"_174":281,"_175":22,"_176":-5,"_177":282,"_100":283},"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

\n {label}\n {value}{unit}\n

\n {/* Track background */}\n

\n {/* Fill */}\n

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

\n );\n}\n",[],[236,243,277],{"_106":285,"_97":286,"_163":287,"_165":244,"_166":148,"_167":288,"_169":22,"_108":289,"_102":183,"_172":192,"_174":290,"_175":22,"_176":-5,"_177":291,"_100":292},"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(null);\n const noiseRef = useRef(null);\n const lfoRef = useRef(null);\n const masterRef = useRef(null);\n const lfoGainRef = useRef(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

Ocean Pulse

BREATH-SYNCED AMPLITUDE MOD

\n\n {/* Wave visualiser */}\n

\n {Array.from({ length: bars }).map((_, i) => (\n

\n ))}\n \n

\n\n {/* Play */}\n

\n playing ? stop() : start()}\n className={`play-btn${playing ? \" active\" : \"\"}`}\n style={{ \"--active-color\": \"var(--accent-cyan)\" } as React.CSSProperties}\n >\n {playing ? : }\n \n

\n\n

\n \n \n \n

\n\n

\n ONE WAVE EVERY {breathPeriod}s · INHALE ↑ EXHALE ↓\n

\n );\n}\n",[],[236,243,286],{"_106":294,"_97":295,"_163":296,"_165":244,"_166":148,"_167":103,"_169":22,"_108":297,"_102":183,"_172":192,"_174":298,"_175":22,"_176":-5,"_177":299,"_100":300},"1e52e248-1e71-11f1-bf62-42dde27851f2","TTSWisdomTab.tsx","c5330ea0-1e6f-11f1-8481-42dde27851f2",["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",[],[236,243,295],{"_106":302,"_97":303,"_163":304,"_165":244,"_166":148,"_167":305,"_169":22,"_108":306,"_102":183,"_172":192,"_174":307,"_175":22,"_176":-5,"_177":308,"_100":309},"03ade3fc-1e71-11f1-bf62-42dde27851f2","TimelineTab.tsx","ac2af6c0-1e6f-11f1-8d5a-42dde27851f2",43,["D",1773360616687],"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<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\nexport function TimelineTab() {\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\n  const ctxRef = useRef<AudioContext | null>(null);\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);\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    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <div>\n        <div className=\"section-title\">Timeline</div>\n        <div className=\"section-sub\">SESSION BUILDER</div>\n      </div>\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",[],[236,243,303],[236,243],{"_106":312,"_97":313,"_163":314,"_165":237,"_166":148,"_167":315,"_169":22,"_108":316,"_102":183,"_172":192,"_174":317,"_175":22,"_176":-5,"_177":318,"_100":319},"ac9f95e2-1e70-11f1-b5a6-42dde27851f2","App.tsx","da8512bc-1e6f-11f1-b19f-42dde27851f2",38,["D",1773360470639],"import React, { useState } 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\";\n\ntype Tab = \"binaural\" | \"ocean\" | \"timeline\" | \"wisdom\" | \"clock\";\n\nconst NAV: { id: Tab; label: string; accent: string; icon: keyof typeof Icons }[] = [\n  { id: \"binaural\", label: \"BEATS\",  accent: \"var(--accent-blue)\",   icon: \"Waves\"    },\n  { id: \"ocean\",    label: \"OCEAN\",  accent: \"var(--accent-cyan)\",   icon: \"Ocean\"    },\n  { id: \"timeline\", label: \"FLOW\",   accent: \"var(--accent-violet)\", icon: \"Timeline\" },\n  { id: \"wisdom\",   label: \"WISDOM\", accent: \"var(--accent-amber)\",  icon: \"Quote\"    },\n  { id: \"clock\",    label: \"CLOCK\",  accent: \"var(--accent-green)\",  icon: \"Clock\"    },\n];\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"binaural\");\n\n  return (\n    <div className=\"app-root\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');\n\n        :root {\n          --bg:           #0d1117;\n          --bg2:          #161b22;\n          --bg3:          #1c2330;\n          --border:       rgba(255,255,255,0.07);\n          --border2:      rgba(255,255,255,0.13);\n          --text:         #c9d1d9;\n          --text-dim:     #6e7681;\n          --text-bright:  #f0f6fc;\n          --accent-blue:  #58a6ff;\n          --accent-cyan:  #39d0d8;\n          --accent-violet:#bc8cff;\n          --accent-amber: #e3b341;\n          --accent-green: #3fb950;\n          --accent-rose:  #f85149;\n          --glow-blue:    rgba(88,166,255,0.18);\n          --glow-cyan:    rgba(57,208,216,0.18);\n          --glow-violet:  rgba(188,140,255,0.18);\n          --glow-amber:   rgba(227,179,65,0.18);\n          --glow-green:   rgba(63,185,80,0.18);\n        }\n\n        * { box-sizing: border-box; margin: 0; padding: 0; }\n\n        body {\n          background: var(--bg);\n          color: var(--text);\n          font-family: 'Space Mono', 'Courier New', monospace;\n          -webkit-font-smoothing: antialiased;\n        }\n\n        .app-root {\n          min-height: 100dvh;\n          display: flex;\n          justify-content: center;\n          background: var(--bg);\n        }\n\n        .app-shell {\n          width: 100%;\n          max-width: 430px;\n          display: flex;\n          flex-direction: column;\n          height: 100dvh;\n          position: relative;\n          border-left: 1px solid var(--border2);\n          border-right: 1px solid var(--border2);\n        }\n\n        /* ── DOUBLE-BORDER CARD ── */\n        .card {\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 3px;\n          border-radius: 14px;\n          padding: 18px;\n        }\n        .card-sm {\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 2px;\n          border-radius: 10px;\n          padding: 12px 14px;\n        }\n\n        /* ── INSET / SUNKEN ── */\n        .inset {\n          background: var(--bg);\n          border: 1px solid var(--border);\n          outline: 1px solid var(--border2);\n          outline-offset: 2px;\n          border-radius: 10px;\n        }\n\n        /* ── SLIDER ── */\n        .slider-thumb {\n          -webkit-appearance: none;\n          appearance: none;\n          width: 100%;\n          height: 4px;\n          border-radius: 2px;\n          background: linear-gradient(to right, var(--accent-blue), var(--bg3));\n          outline: none;\n          cursor: pointer;\n        }\n        .slider-thumb::-webkit-slider-thumb {\n          -webkit-appearance: none;\n          width: 16px; height: 16px;\n          border-radius: 50%;\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 2px;\n          cursor: pointer;\n          box-shadow: 0 0 8px var(--glow-blue);\n        }\n        .slider-thumb::-moz-range-thumb {\n          width: 16px; height: 16px;\n          border-radius: 50%;\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          cursor: pointer;\n        }\n\n        /* ── SCROLLBAR ── */\n        .scroll-area { overflow-y: auto; }\n        .scroll-area::-webkit-scrollbar { width: 3px; }\n        .scroll-area::-webkit-scrollbar-track { background: transparent; }\n        .scroll-area::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }\n\n        /* ── NAV ── */\n        .nav-bar {\n          background: var(--bg2);\n          border-top: 1px solid var(--border2);\n          outline-top: 1px solid var(--border);\n          display: flex;\n          padding: 8px;\n          gap: 4px;\n        }\n        .nav-btn {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          gap: 4px;\n          padding: 8px 4px;\n          border-radius: 8px;\n          border: 1px solid transparent;\n          background: transparent;\n          color: var(--text-dim);\n          font-family: inherit;\n          font-size: 8px;\n          font-weight: 700;\n          letter-spacing: 0.08em;\n          cursor: pointer;\n          transition: all 0.18s ease;\n        }\n        .nav-btn.active {\n          background: var(--bg3);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 1px;\n          color: var(--active-color, var(--accent-blue));\n        }\n        .nav-btn:not(.active):hover { color: var(--text); }\n\n        /* ── PLAY BUTTON ── */\n        .play-btn {\n          width: 100px; height: 100px;\n          border-radius: 50%;\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 4px;\n          display: flex; align-items: center; justify-content: center;\n          cursor: pointer;\n          color: var(--text-dim);\n          transition: all 0.2s ease;\n          font-family: inherit;\n        }\n        .play-btn.active {\n          background: var(--bg3);\n          border-color: var(--active-color, var(--accent-blue));\n          outline-color: color-mix(in srgb, var(--active-color, var(--accent-blue)) 30%, transparent);\n          color: var(--active-color, var(--accent-blue));\n          box-shadow: 0 0 24px color-mix(in srgb, var(--active-color, var(--accent-blue)) 25%, transparent);\n        }\n        .play-btn:not(.active):hover {\n          color: var(--text);\n          border-color: var(--border2);\n        }\n\n        /* ── PRESETS GRID ── */\n        .preset-grid {\n          display: grid;\n          grid-template-columns: repeat(3, 1fr);\n          gap: 8px;\n        }\n        .preset-btn {\n          background: var(--bg2);\n          border: 1px solid var(--border2);\n          outline: 1px solid var(--border);\n          outline-offset: 2px;\n          border-radius: 10px;\n          padding: 10px 8px;\n          cursor: pointer;\n          font-family: inherit;\n          color: var(--text-dim);\n          transition: all 0.18s ease;\n          text-align: left;\n        }\n        .preset-btn:hover { color: var(--text); border-color: var(--border2); }\n        .preset-btn.active {\n          background: var(--bg3);\n          border-color: var(--active-color, var(--accent-blue));\n          outline-color: color-mix(in srgb, var(--active-color, var(--accent-blue)) 25%, transparent);\n          color: var(--active-color, var(--accent-blue));\n        }\n        .preset-name {\n          font-size: 10px;\n          font-weight: 700;\n          letter-spacing: 0.06em;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .preset-hz {\n          font-size: 9px;\n          opacity: 0.55;\n          display: block;\n          line-height: 1.3;\n        }\n        .preset-wave {\n          font-size: 8px;\n          margin-top: 3px;\n          display: block;\n          opacity: 0.4;\n          letter-spacing: 0.04em;\n        }\n\n        /* ── NOISE PILLS ── */\n        .noise-btn {\n          background: var(--bg2);\n          border: 1px solid var(--border);\n          border-radius: 6px;\n          padding: 4px 10px;\n          font-family: inherit;\n          font-size: 9px;\n          font-weight: 700;\n          color: var(--text-dim);\n          cursor: pointer;\n          letter-spacing: 0.06em;\n          transition: all 0.15s;\n        }\n        .noise-btn.active {\n          border-color: var(--accent-blue);\n          color: var(--accent-blue);\n          background: var(--bg3);\n        }\n\n        /* ── MISC ── */\n        .label-row {\n          display: flex;\n          justify-content: space-between;\n          align-items: baseline;\n          margin-bottom: 6px;\n        }\n        .label-key {\n          font-size: 9px;\n          font-weight: 700;\n          letter-spacing: 0.1em;\n          color: var(--text-dim);\n          text-transform: uppercase;\n        }\n        .label-val {\n          font-size: 11px;\n          font-weight: 700;\n          color: var(--accent-blue);\n        }\n        .section-title {\n          font-size: 18px;\n          font-weight: 700;\n          color: var(--text-bright);\n          letter-spacing: -0.01em;\n        }\n        .section-sub {\n          font-size: 10px;\n          color: var(--text-dim);\n          letter-spacing: 0.06em;\n          margin-top: 2px;\n        }\n        .dim { color: var(--text-dim); }\n        .bright { color: var(--text-bright); }\n        .mono { font-family: 'Space Mono', monospace; }\n\n        select {\n          background: var(--bg);\n          border: 1px solid var(--border2);\n          border-radius: 6px;\n          color: var(--text);\n          font-family: inherit;\n          font-size: 10px;\n          padding: 6px 8px;\n          outline: none;\n          width: 100%;\n        }\n        select option { background: var(--bg2); }\n\n        input[type=\"number\"] {\n          background: var(--bg);\n          border: 1px solid var(--border2);\n          border-radius: 6px;\n          color: var(--text);\n          font-family: inherit;\n          font-size: 11px;\n          padding: 6px 8px;\n          outline: none;\n          width: 100%;\n        }\n        input[type=\"text\"], textarea {\n          background: var(--bg);\n          border: 1px solid var(--border2);\n          border-radius: 6px;\n          color: var(--text);\n          font-family: inherit;\n          font-size: 11px;\n          padding: 8px 10px;\n          outline: none;\n          width: 100%;\n        }\n        input::placeholder, textarea::placeholder { color: var(--text-dim); }\n\n        /* live dot */\n        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }\n        .live-dot { animation: pulse 2s ease-in-out infinite; }\n      `}</style>\n\n      <div className=\"app-shell\">\n        {/* Header */}\n        <header style={{\n          padding: \"16px 20px 12px\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: \"1px solid var(--border)\",\n          background: \"var(--bg2)\",\n        }}>\n          <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: \"0.12em\", color: \"var(--text-bright)\" }}>\n            NEURO<span style={{ color: \"var(--accent-blue)\" }}>SYNC</span>\n          </span>\n          <span style={{ fontSize: 9, letterSpacing: \"0.1em\", color: \"var(--text-dim)\", display: \"flex\", alignItems: \"center\", gap: 6 }}>\n            <span className=\"live-dot\" style={{ width: 6, height: 6, borderRadius: \"50%\", background: \"var(--accent-green)\", display: \"inline-block\" }} />\n            LIVE\n          </span>\n        </header>\n\n        {/* Main */}\n        <main className=\"scroll-area\" style={{ flex: 1, padding: \"20px 16px 120px\" }}>\n          {tab === \"binaural\"  && <BinauralTab />}\n          {tab === \"ocean\"     && <OceanPulseTab />}\n          {tab === \"timeline\"  && <TimelineTab />}\n          {tab === \"wisdom\"    && <TTSWisdomTab />}\n          {tab === \"clock\"     && <ClockTab />}\n        </main>\n\n        {/* Nav */}\n        <nav className=\"nav-bar\" style={{ position: \"absolute\", bottom: 0, left: 0, right: 0 }}>\n          {NAV.map(({ id, label, accent, icon }) => {\n            const Icon = Icons[icon] as () => JSX.Element;\n            const active = tab === id;\n            return (\n              <button\n                key={id}\n                onClick={() => setTab(id)}\n                className={`nav-btn${active ? \" active\" : \"\"}`}\n                style={{ \"--active-color\": accent } as React.CSSProperties}\n              >\n                <Icon />\n                {label}\n              </button>\n            );\n          })}\n        </nav>\n      </div>\n    </div>\n  );\n}\n",[],[236,313],[236],{"_106":322,"_97":101,"_163":323,"_165":-5,"_166":148,"_167":324,"_169":22,"_108":325,"_102":245,"_172":326,"_174":327,"_175":22,"_176":98,"_177":328,"_100":329},"70c5a1a6-1e70-11f1-8169-42dde27851f2","c1c5a18e-1e6e-11f1-9536-42dde27851f2",30,["D",1773360370222],"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<Response> {\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 = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\"/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"/>\n  <title>NeuroSync</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  \n  <script type=\"importmap\">\n  {\n    \"imports\": {\n      \"react\":             \"https://esm.sh/react@18\",\n      \"react/\":            \"https://esm.sh/react@18/\",\n      \"react-dom\":         \"https://esm.sh/react-dom@18\",\n      \"react-dom/\":        \"https://esm.sh/react-dom@18/\",\n      \"react/jsx-runtime\": \"https://esm.sh/react@18/jsx-runtime\"\n    }\n  }\n  </script>\n  <style>\n    *, *::before, *::after { box-sizing: border-box; }\n    body { margin: 0; background: #e0e5ec; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }\n    #root { height: 100dvh; display: flex; flex-direction: column; }\n  </style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\">\n    import { createRoot } from \"react-dom/client\";\n    import { createElement } from \"react\";\n    import App from \"${ESM}/frontend/App.tsx\";\n    createRoot(document.getElementById(\"root\")).render(createElement(App));\n  </script>\n</body>\n</html>`;\n\n  return new Response(html, {\n    headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n  });\n}\n",[],[101],"files",[160,179,186,196,205,215,224,234,241,248,257,266,275,284,293,301,311,321],"counts",{"_334":33,"_335":336,"_337":33,"_338":339,"_342":343},"pulls","branches",1,"forks","envVars",{"_340":336,"_341":33},"count","emptyCount","connections",{"_340":33,"_344":33},"unfilledCount","contents",[],"file",{"_106":322,"_97":101,"_163":323,"_165":-5,"_166":148,"_167":324,"_169":22,"_108":349,"_102":245,"_172":326,"_174":327,"_175":22,"_176":98,"_100":350},["D",1773360370222],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":359,"_158":364,"_330":437,"_347":438,"_345":441,"_442":-5,"_443":-5,"_444":-5,"_445":-5,"_446":447,"_338":-5},{"_106":107,"_97":98,"_108":360,"_110":-5,"_111":22,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":124,"_125":126,"_127":-5,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_23":361,"_140":362,"_145":363,"_157":22},["D",1773359647109],{"_95":96,"_138":139},{"_95":96,"_142":139,"_14":116,"_143":144},{"_102":147,"_97":45,"_106":148,"_149":107,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":98,"_156":96},[365,393,433],{"_106":161,"_97":162,"_163":164,"_165":-5,"_166":148,"_167":168,"_169":170,"_108":366,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":367,"_100":392},["D",1773359859285],[368,384,388],{"_106":180,"_97":181,"_163":182,"_165":164,"_166":148,"_167":183,"_169":170,"_108":369,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":370,"_100":383},["D",1773359861327],[371,375,379],{"_106":187,"_97":188,"_163":189,"_165":182,"_166":148,"_167":190,"_169":170,"_108":372,"_102":33,"_172":192,"_174":193,"_175":22,"_176":-5,"_177":373,"_100":374},["D",1773359880521],[],[162,181,188],{"_106":197,"_97":198,"_163":199,"_165":182,"_166":148,"_167":200,"_169":170,"_108":376,"_102":33,"_172":192,"_174":202,"_175":22,"_176":-5,"_177":377,"_100":378},["D",1773359890477],[],[162,181,198],{"_106":206,"_97":207,"_163":208,"_165":182,"_166":148,"_167":209,"_169":22,"_108":380,"_102":33,"_172":192,"_174":211,"_175":22,"_176":-5,"_177":381,"_100":382},["D",1773359896749],[],[162,181,207],[162,181],{"_106":216,"_97":217,"_163":218,"_165":164,"_166":148,"_167":219,"_169":170,"_108":385,"_102":33,"_172":192,"_174":221,"_175":22,"_176":-5,"_177":386,"_100":387},["D",1773359873062],[],[162,217],{"_106":225,"_97":226,"_163":227,"_165":164,"_166":148,"_167":228,"_169":170,"_108":389,"_102":33,"_172":192,"_174":230,"_175":22,"_176":-5,"_177":390,"_100":391},["D",1773359903648],[],[162,226],[162],{"_106":235,"_97":236,"_163":237,"_165":-5,"_166":148,"_167":238,"_169":170,"_108":394,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":395,"_100":432},["D",1773359861456],[396,428],{"_106":242,"_97":243,"_163":244,"_165":237,"_166":148,"_167":245,"_169":170,"_108":397,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":398,"_100":427},["D",1773359863484],[399,403,407,411,415,419,423],{"_106":249,"_97":250,"_163":251,"_165":244,"_166":148,"_167":252,"_169":22,"_108":400,"_102":183,"_172":192,"_174":254,"_175":22,"_176":-5,"_177":401,"_100":402},["D",1773360514978],[],[236,243,250],{"_106":258,"_97":259,"_163":260,"_165":244,"_166":148,"_167":261,"_169":22,"_108":404,"_102":183,"_172":192,"_174":263,"_175":22,"_176":-5,"_177":405,"_100":406},["D",1773360572588],[],[236,243,259],{"_106":267,"_97":268,"_163":269,"_165":244,"_166":148,"_167":270,"_169":170,"_108":408,"_102":33,"_172":192,"_174":272,"_175":22,"_176":-5,"_177":409,"_100":410},["D",1773359932602],[],[236,243,268],{"_106":276,"_97":277,"_163":278,"_165":244,"_166":148,"_167":279,"_169":22,"_108":412,"_102":183,"_172":192,"_174":281,"_175":22,"_176":-5,"_177":413,"_100":414},["D",1773360524374],[],[236,243,277],{"_106":285,"_97":286,"_163":287,"_165":244,"_166":148,"_167":288,"_169":22,"_108":416,"_102":183,"_172":192,"_174":290,"_175":22,"_176":-5,"_177":417,"_100":418},["D",1773360549467],[],[236,243,286],{"_106":294,"_97":295,"_163":296,"_165":244,"_166":148,"_167":103,"_169":22,"_108":420,"_102":183,"_172":192,"_174":298,"_175":22,"_176":-5,"_177":421,"_100":422},["D",1773360661393],[],[236,243,295],{"_106":302,"_97":303,"_163":304,"_165":244,"_166":148,"_167":305,"_169":22,"_108":424,"_102":183,"_172":192,"_174":307,"_175":22,"_176":-5,"_177":425,"_100":426},["D",1773360616687],[],[236,243,303],[236,243],{"_106":312,"_97":313,"_163":314,"_165":237,"_166":148,"_167":315,"_169":22,"_108":429,"_102":183,"_172":192,"_174":317,"_175":22,"_176":-5,"_177":430,"_100":431},["D",1773360470639],[],[236,313],[236],{"_106":322,"_97":101,"_163":323,"_165":-5,"_166":148,"_167":324,"_169":22,"_108":434,"_102":245,"_172":326,"_174":327,"_175":22,"_176":98,"_177":435,"_100":436},["D",1773360370222],[],[101],[365,368,371,375,379,384,388,393,396,399,403,407,411,415,419,423,428,433],{"_106":322,"_97":101,"_163":323,"_165":-5,"_166":148,"_167":324,"_169":22,"_108":439,"_102":245,"_172":326,"_174":327,"_175":22,"_176":98,"_100":440},["D",1773360370222],[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]
</article></body></html>