[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_320":321,"_322":323},"routes/_app.x.$handle.$name",{"_104":103,"_38":52,"_112":94,"_33":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_26":-5,"_124":-5,"_125":-5,"_126":31,"_127":128,"_129":130,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":-5,"_19":61,"_62":-5,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",26,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","2083d53a-00b4-4b87-8ba5-6de9a06721c7","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/components/TTSWisdomTab.tsx","latestPath","fileId","c5330ea0-1e6f-11f1-8481-42dde27851f2","name","TTSWisdomTab.tsx","fileType","script","content","import React, { useState, useEffect, useRef } from \"https://esm.sh/react@18\";\nimport { Icons } from \"./Icons.tsx\";\n\ninterface Quote { id: number; text: string; author: string; enabled: number; }\n\nconst VOICES = [\n { value: \"Calum-PlayAI\", label: \"Calum — Calm\" },\n { value: \"Celeste-PlayAI\", label: \"Celeste — Serene\" },\n { value: \"Finn-PlayAI\", label: \"Finn — Deep\" },\n { value: \"Grayson-PlayAI\", label: \"Grayson — Grounded\" },\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\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\n async function toggleEnabled(q: Quote) {\n await fetch(`/api/quotes/${q.id}`, { method:\"PATCH\", headers:{\"Content-Type\":\"application/json\"}, body: JSON.stringify({ enabled: !q.enabled }) });\n loadQuotes();\n }\n\n 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\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}`, voice }),\n });\n if (!r.ok) throw new Error(\"TTS failed\");\n const blob = await r.blob();\n const url = URL.createObjectURL(blob);\n if (audioRef.current) { audioRef.current.pause(); audioRef.current.src = \"\"; }\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 {\n setTtsStatus(\"error\");\n }\n }\n\n function startInterval() {\n const q = pickRandom();\n if (q) speak(q);\n intervalRef.current = setInterval(() => {\n const next = pickRandom();\n if (next) speak(next);\n }, intervalMin * 60 * 1000);\n setRunning(true);\n }\n\n function stopInterval() {\n if (intervalRef.current) clearInterval(intervalRef.current);\n audioRef.current?.pause();\n setRunning(false); setTtsStatus(\"idle\");\n }\n\n useEffect(() => () => { stopInterval(); }, []);\n\n return (\n

🗣️ TTS Wisdom

Philosophical quotes, spoken aloud via Groq

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

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

\"{currentQuote.text}\"

\n {currentQuote.author &&

— {currentQuote.author}

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

Generating speech…

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

▶ Speaking…

}\n \n ) : (\n

Press play or trigger manually below.

\n )}\n

\n\n {/* Voice + interval controls */}\n

\n Voice\n

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

\n\n

\n Interval: {intervalMin} min\n

\n setIntervalMin(Number(e.target.value))}\n className=\"w-full absolute appearance-none bg-transparent h-full z-10 slider-thumb\" />\n

\n\n {/* Playback controls */}\n

\n \n \n

\n\n {/* Quote list */}\n

Quote Library ({quotes.filter(q=>q.enabled).length} active)

\n \n

\n\n {adding && (\n

setNewQ(p=>({...p,text:e.target.value}))}\n            className=\"w-full text-sm text-[#4a5568] bg-transparent outline-none border-b border-[#c5cdd8] resize-none pb-1\"/>\n          <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p=>({...p,author:e.target.value}))}\n            className=\"w-full text-xs text-[#6b7c93] bg-transparent outline-none border-b border-[#c5cdd8] pb-1\"/>\n          <div className=\"flex gap-2 pt-1\">\n            <button onClick={addQuote} className=\"flex-1 py-2 rounded-xl neo-shadow text-xs font-bold text-blue-500\">Save</button>\n            <button onClick={() => setAdding(false)} className=\"flex-1 py-2 rounded-xl neo-shadow text-xs font-bold text-[#6b7c93]\">Cancel</button>\n          </div>\n        </div>\n      )}\n\n      {loading ? (\n        <p className=\"text-xs text-center text-[#a3b1c6] py-4\">Loading…</p>\n      ) : (\n        <div className=\"space-y-3\">\n          {quotes.map(q => (\n            <div key={q.id} className={`p-4 rounded-2xl transition-all ${q.enabled ? \"neo-shadow\" : \"opacity-50 neo-inset\"}`}>\n              {editingId === q.id ? (\n                <div className=\"space-y-2\">\n                  <textarea value={draft.text} onChange={e => setDraft(p=>({...p,text:e.target.value}))}\n                    className=\"w-full text-sm text-[#4a5568] bg-transparent outline-none border-b border-[#c5cdd8] resize-none\"/>\n                  <input value={draft.author} onChange={e => setDraft(p=>({...p,author:e.target.value}))}\n                    className=\"w-full text-xs text-[#6b7c93] bg-transparent outline-none border-b border-[#c5cdd8]\"/>\n                  <div className=\"flex gap-2\">\n                    <button onClick={() => saveEdit(q.id)} className=\"text-xs font-bold text-blue-500\">Save</button>\n                    <button onClick={() => setEditingId(null)} className=\"text-xs text-[#8ba3c7]\">Cancel</button>\n                  </div>\n                </div>\n              ) : (\n                <div className=\"flex items-start gap-2\">\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-xs text-[#4a5568] leading-relaxed italic\">\"{q.text}\"</p>\n                    {q.author && <p className=\"text-[10px] text-[#8ba3c7] mt-1\">— {q.author}</p>}\n                  </div>\n                  <div className=\"flex flex-col gap-1 flex-shrink-0\">\n                    <button onClick={() => speak(q)} className=\"p-1 text-[#a3b1c6] hover:text-blue-400 transition-colors\"><Icons.Speaker /></button>\n                    <button onClick={() => { setEditingId(q.id); setDraft({ text: q.text, author: q.author }); }} className=\"p-1 text-[#a3b1c6] hover:text-blue-400 transition-colors\"><Icons.Edit /></button>\n                    <button onClick={() => toggleEnabled(q)} title={q.enabled ? \"Disable\" : \"Enable\"}\n                      className={`p-1 text-xs font-bold rounded transition-colors ${q.enabled ? \"text-green-400\" : \"text-[#a3b1c6]\"}`}>\n                      {q.enabled ? \"ON\" : \"OFF\"}\n                    </button>\n                    <button onClick={() => deleteQuote(q.id)} className=\"p-1 text-[#a3b1c6] hover:text-red-400 transition-colors\"><Icons.Trash /></button>\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","import React, { useState, useEffect, useRef } from \"https://esm.sh/react@18\";\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 — Calm\" },\n  { value: \"Celeste-PlayAI\", label: \"Celeste — Serene\" },\n  { value: \"Finn-PlayAI\", label: \"Finn — Deep\" },\n  { value: \"Grayson-PlayAI\", label: \"Grayson — Grounded\" },\n];\n\nexport function TTSWisdomTab() {\n  const [quotes, setQuotes] = useState<Quote[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [editingId, setEditingId] = useState<number | null>(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<Quote | null>(null);\n  const [ttsStatus, setTtsStatus] = useState<\"idle\" | \"loading\" | \"playing\" | \"error\">(\"idle\");\n\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  const audioRef = useRef<HTMLAudioElement | null>(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\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\n  async function toggleEnabled(q: Quote) {\n    await fetch(`/api/quotes/${q.id}`, { method:\"PATCH\", headers:{\"Content-Type\":\"application/json\"}, body: JSON.stringify({ enabled: !q.enabled }) });\n    loadQuotes();\n  }\n\n  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\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}`, voice }),\n      });\n      if (!r.ok) throw new Error(\"TTS failed\");\n      const blob = await r.blob();\n      const url = URL.createObjectURL(blob);\n      if (audioRef.current) { audioRef.current.pause(); audioRef.current.src = \"\"; }\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 {\n      setTtsStatus(\"error\");\n    }\n  }\n\n  function startInterval() {\n    const q = pickRandom();\n    if (q) speak(q);\n    intervalRef.current = setInterval(() => {\n      const next = pickRandom();\n      if (next) speak(next);\n    }, intervalMin * 60 * 1000);\n    setRunning(true);\n  }\n\n  function stopInterval() {\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    audioRef.current?.pause();\n    setRunning(false); setTtsStatus(\"idle\");\n  }\n\n  useEffect(() => () => { stopInterval(); }, []);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"text-center mb-6\">\n        <h2 className=\"text-2xl font-semibold mb-1\">🗣️ TTS Wisdom</h2>\n        <p className=\"text-sm text-[#8ba3c7]\">Philosophical quotes, spoken aloud via Groq</p>\n      </div>\n\n      {/* Current quote display */}\n      <div className={`p-5 rounded-3xl neo-inset mb-6 min-h-[80px] flex flex-col justify-center transition-all ${ttsStatus === \"playing\" ? \"ring-2 ring-blue-300\" : \"\"}`}>\n        {currentQuote ? (\n          <>\n            <p className=\"text-sm text-[#4a5568] italic leading-relaxed\">\"{currentQuote.text}\"</p>\n            {currentQuote.author && <p className=\"text-xs text-[#8ba3c7] mt-2 font-semibold\">— {currentQuote.author}</p>}\n            {ttsStatus === \"loading\" && <p className=\"text-xs text-blue-400 mt-2 animate-pulse\">Generating speech…</p>}\n            {ttsStatus === \"playing\" && <p className=\"text-xs text-blue-500 mt-2 animate-pulse\">▶ Speaking…</p>}\n          </>\n        ) : (\n          <p className=\"text-sm text-[#a3b1c6] text-center\">Press play or trigger manually below.</p>\n        )}\n      </div>\n\n      {/* Voice + interval controls */}\n      <div className=\"p-4 rounded-2xl neo-shadow mb-6 space-y-4\">\n        <div>\n          <label className=\"text-xs font-bold text-[#8ba3c7] uppercase tracking-wider block mb-2\">Voice</label>\n          <div className=\"grid grid-cols-2 gap-2\">\n            {VOICES.map(v => (\n              <button key={v.value} onClick={() => setVoice(v.value)}\n                className={`text-xs py-2 px-3 rounded-xl font-semibold transition-all ${voice===v.value ? \"neo-inset text-blue-500\" : \"neo-shadow text-[#6b7c93]\"}`}>\n                {v.label}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <div>\n          <label className=\"text-xs font-bold text-[#8ba3c7] uppercase tracking-wider block mb-2\">Interval: {intervalMin} min</label>\n          <div className=\"relative h-6 flex items-center\">\n            <div className=\"absolute w-full h-3 rounded-full neo-inset\" />\n            <input type=\"range\" min={1} max={60} value={intervalMin} onChange={e => setIntervalMin(Number(e.target.value))}\n              className=\"w-full absolute appearance-none bg-transparent h-full z-10 slider-thumb\" />\n          </div>\n        </div>\n      </div>\n\n      {/* Playback controls */}\n      <div className=\"flex gap-3 mb-8\">\n        <button onClick={() => { const q = pickRandom(); if(q) speak(q); }}\n          className=\"flex-1 py-3 rounded-2xl neo-shadow text-sm font-bold text-[#6b7c93] hover:text-blue-500 flex items-center justify-center gap-2 transition-all\">\n          <Icons.Speaker /> Speak One\n        </button>\n        <button onClick={running ? stopInterval : startInterval}\n          className={`flex-1 py-3 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 transition-all ${running ? \"neo-inset text-blue-500\" : \"neo-shadow text-[#4a5568]\"}`}>\n          {running ? <><Icons.Square /> Stop Timer</> : <><Icons.Play /> Start Timer</>}\n        </button>\n      </div>\n\n      {/* Quote list */}\n      <div className=\"flex justify-between items-center mb-3\">\n        <p className=\"text-xs font-bold text-[#8ba3c7] uppercase tracking-wider\">Quote Library ({quotes.filter(q=>q.enabled).length} active)</p>\n        <button onClick={() => setAdding(true)} className=\"p-2 rounded-lg neo-shadow text-[#6b7c93] hover:text-blue-500 transition-all\">\n          <Icons.Plus />\n        </button>\n      </div>\n\n      {adding && (\n        <div className=\"p-4 rounded-2xl neo-inset mb-4 space-y-2\">\n          <textarea placeholder=\"Quote text…\" value={newQ.text} onChange={e => setNewQ(p=>({...p,text:e.target.value}))}\n            className=\"w-full text-sm text-[#4a5568] bg-transparent outline-none border-b border-[#c5cdd8] resize-none pb-1\"/>\n          <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p=>({...p,author:e.target.value}))}\n            className=\"w-full text-xs text-[#6b7c93] bg-transparent outline-none border-b border-[#c5cdd8] pb-1\"/>\n          <div className=\"flex gap-2 pt-1\">\n            <button onClick={addQuote} className=\"flex-1 py-2 rounded-xl neo-shadow text-xs font-bold text-blue-500\">Save</button>\n            <button onClick={() => setAdding(false)} className=\"flex-1 py-2 rounded-xl neo-shadow text-xs font-bold text-[#6b7c93]\">Cancel</button>\n          </div>\n        </div>\n      )}\n\n      {loading ? (\n        <p className=\"text-xs text-center text-[#a3b1c6] py-4\">Loading…</p>\n      ) : (\n        <div className=\"space-y-3\">\n          {quotes.map(q => (\n            <div key={q.id} className={`p-4 rounded-2xl transition-all ${q.enabled ? \"neo-shadow\" : \"opacity-50 neo-inset\"}`}>\n              {editingId === q.id ? (\n                <div className=\"space-y-2\">\n                  <textarea value={draft.text} onChange={e => setDraft(p=>({...p,text:e.target.value}))}\n                    className=\"w-full text-sm text-[#4a5568] bg-transparent outline-none border-b border-[#c5cdd8] resize-none\"/>\n                  <input value={draft.author} onChange={e => setDraft(p=>({...p,author:e.target.value}))}\n                    className=\"w-full text-xs text-[#6b7c93] bg-transparent outline-none border-b border-[#c5cdd8]\"/>\n                  <div className=\"flex gap-2\">\n                    <button onClick={() => saveEdit(q.id)} className=\"text-xs font-bold text-blue-500\">Save</button>\n                    <button onClick={() => setEditingId(null)} className=\"text-xs text-[#8ba3c7]\">Cancel</button>\n                  </div>\n                </div>\n              ) : (\n                <div className=\"flex items-start gap-2\">\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-xs text-[#4a5568] leading-relaxed italic\">\"{q.text}\"</p>\n                    {q.author && <p className=\"text-[10px] text-[#8ba3c7] mt-1\">— {q.author}</p>}\n                  </div>\n                  <div className=\"flex flex-col gap-1 flex-shrink-0\">\n                    <button onClick={() => speak(q)} className=\"p-1 text-[#a3b1c6] hover:text-blue-400 transition-colors\"><Icons.Speaker /></button>\n                    <button onClick={() => { setEditingId(q.id); setDraft({ text: q.text, author: q.author }); }} className=\"p-1 text-[#a3b1c6] hover:text-blue-400 transition-colors\"><Icons.Edit /></button>\n                    <button onClick={() => toggleEnabled(q)} title={q.enabled ? \"Disable\" : \"Enable\"}\n                      className={`p-1 text-xs font-bold rounded transition-colors ${q.enabled ? \"text-green-400\" : \"text-[#a3b1c6]\"}`}>\n                      {q.enabled ? \"ON\" : \"OFF\"}\n                    </button>\n                    <button onClick={() => deleteQuote(q.id)} className=\"p-1 text-[#a3b1c6] hover:text-red-400 transition-colors\"><Icons.Trash /></button>\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","createdAt",["D",1773360227649],"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",1789440639557],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_19":61,"_108":109,"_110":31},"branch",{"_13":93,"_38":94,"_50":49,"_95":51,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":52,"_102":103},"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",{"_50":51,"_38":52,"_45":315,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":-5,"_19":61,"_62":-5,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":316,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":317,"_88":318,"_90":319,"_92":31},"tree",[174,181,191],"files",[174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191],"counts",{"_163":67,"_164":165,"_166":67,"_167":168,"_169":170},"contents",[135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_50":157,"_38":158,"_36":159,"_141":-5,"_48":49,"_47":160,"_143":130,"_45":161,"_13":67,"_40":155,"_42":-5,"_30":31,"_148":-5,"_33":162},{"_50":150,"_38":151,"_36":152,"_141":-5,"_48":49,"_47":153,"_143":130,"_45":154,"_13":67,"_40":155,"_42":-5,"_30":31,"_148":-5,"_33":156},{"_50":138,"_38":139,"_36":140,"_141":-5,"_48":49,"_47":142,"_143":31,"_45":144,"_13":145,"_40":146,"_42":147,"_30":31,"_148":52,"_33":149},"109484dc-1e70-11f1-9223-42dde27851f2","main.ts","c1c5a18e-1e6e-11f1-9536-42dde27851f2","parentId",21,"latest",["D",1773360208832],3,"http","/**\n * NEUROSYNC — Main HTTP entry point\n * Routes: /api/* → backend handlers | /* → React SPA 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 files as proper JS/TS modules (correct MIME type).\n  // We must use esm.town URLs for imports, NOT our own HTTP endpoint URL.\n  const esmBase = \"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  <style>\n    body { margin: 0; background: #e0e5ec; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }\n    #root { height: 100dvh; }\n  </style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\">\n    import { createElement } from \"https://esm.sh/react@18\";\n    import { createRoot } from \"https://esm.sh/react-dom@18/client\";\n    // esm.town transpiles .tsx → JS with correct Content-Type: application/javascript\n    import App from \"${esmBase}/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","label",[139],"418662be-1e6f-11f1-8d5a-42dde27851f2","frontend","4186635e-1e6f-11f1-8d5a-42dde27851f2",4,["D",1773359861456],"directory",[151],"403a68f6-1e6f-11f1-8481-42dde27851f2","backend","403a69c8-1e6f-11f1-8481-42dde27851f2",2,["D",1773359859285],[158],"pulls","branches",1,"forks","envVars",{"_171":165,"_173":67},"connections",{"_171":67,"_172":67},"count","unfilledCount","emptyCount",{"_50":157,"_38":158,"_36":159,"_141":-5,"_48":49,"_47":160,"_143":130,"_45":312,"_13":67,"_40":155,"_42":-5,"_30":31,"_148":-5,"_193":313,"_33":314},{"_50":308,"_38":291,"_36":285,"_141":159,"_48":49,"_47":145,"_143":130,"_45":309,"_13":67,"_40":155,"_42":-5,"_30":31,"_148":-5,"_193":310,"_33":311},{"_50":300,"_38":301,"_36":302,"_141":285,"_48":49,"_47":303,"_143":130,"_45":304,"_13":67,"_40":41,"_42":305,"_30":31,"_148":-5,"_193":306,"_33":307},{"_50":292,"_38":293,"_36":294,"_141":285,"_48":49,"_47":295,"_143":130,"_45":296,"_13":67,"_40":41,"_42":297,"_30":31,"_148":-5,"_193":298,"_33":299},{"_50":282,"_38":283,"_36":284,"_141":285,"_48":49,"_47":286,"_143":31,"_45":287,"_13":67,"_40":41,"_42":288,"_30":31,"_148":-5,"_193":289,"_33":290},{"_50":274,"_38":275,"_36":276,"_141":159,"_48":49,"_47":277,"_143":130,"_45":278,"_13":67,"_40":41,"_42":279,"_30":31,"_148":-5,"_193":280,"_33":281},{"_50":266,"_38":267,"_36":268,"_141":159,"_48":49,"_47":269,"_143":130,"_45":270,"_13":67,"_40":41,"_42":271,"_30":31,"_148":-5,"_193":272,"_33":273},{"_50":150,"_38":151,"_36":152,"_141":-5,"_48":49,"_47":153,"_143":130,"_45":263,"_13":67,"_40":155,"_42":-5,"_30":31,"_148":-5,"_193":264,"_33":265},{"_50":258,"_38":213,"_36":207,"_141":152,"_48":49,"_47":259,"_143":130,"_45":260,"_13":67,"_40":155,"_42":-5,"_30":31,"_148":-5,"_193":261,"_33":262},{"_50":250,"_38":251,"_36":252,"_141":207,"_48":49,"_47":253,"_143":31,"_45":254,"_13":165,"_40":41,"_42":255,"_30":31,"_148":-5,"_193":256,"_33":257},{"_50":242,"_38":243,"_36":244,"_141":207,"_48":49,"_47":245,"_143":31,"_45":246,"_13":67,"_40":41,"_42":247,"_30":31,"_148":-5,"_193":248,"_33":249},{"_50":234,"_38":235,"_36":236,"_141":207,"_48":49,"_47":237,"_143":130,"_45":238,"_13":67,"_40":41,"_42":239,"_30":31,"_148":-5,"_193":240,"_33":241},{"_50":226,"_38":227,"_36":228,"_141":207,"_48":49,"_47":229,"_143":31,"_45":230,"_13":67,"_40":41,"_42":231,"_30":31,"_148":-5,"_193":232,"_33":233},{"_50":218,"_38":219,"_36":220,"_141":207,"_48":49,"_47":221,"_143":31,"_45":222,"_13":165,"_40":41,"_42":223,"_30":31,"_148":-5,"_193":224,"_33":225},{"_50":214,"_38":39,"_36":37,"_141":207,"_48":49,"_47":14,"_143":31,"_45":215,"_13":165,"_40":41,"_42":44,"_30":31,"_148":-5,"_193":216,"_33":217},{"_50":204,"_38":205,"_36":206,"_141":207,"_48":49,"_47":208,"_143":31,"_45":209,"_13":165,"_40":41,"_42":210,"_30":31,"_148":-5,"_193":211,"_33":212},{"_50":196,"_38":197,"_36":198,"_141":152,"_48":49,"_47":199,"_143":31,"_45":200,"_13":165,"_40":41,"_42":201,"_30":31,"_148":-5,"_193":202,"_33":203},{"_50":138,"_38":139,"_36":140,"_141":-5,"_48":49,"_47":142,"_143":31,"_45":192,"_13":145,"_40":146,"_42":147,"_30":31,"_148":52,"_193":194,"_33":195},["D",1773360208832],"children",[],[139],"151a5540-1e70-11f1-99a8-42dde27851f2","App.tsx","da8512bc-1e6f-11f1-b19f-42dde27851f2",22,["D",1773360216418],"import React, { useState } from \"https://esm.sh/react@18\";\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; color: string; icon: keyof typeof Icons }[] = [\n  { id: \"binaural\", label: \"BEATS\", color: \"text-blue-500\", icon: \"Waves\" },\n  { id: \"ocean\",    label: \"OCEAN\", color: \"text-cyan-500\",  icon: \"Ocean\" },\n  { id: \"timeline\", label: \"FLOW\",  color: \"text-violet-500\",icon: \"Timeline\" },\n  { id: \"wisdom\",   label: \"WISDOM\",color: \"text-amber-500\", icon: \"Quote\" },\n  { id: \"clock\",    label: \"CLOCK\", color: \"text-emerald-500\",icon: \"Clock\" },\n];\n\nexport default function App() {\n  const [tab, setTab] = useState<Tab>(\"binaural\");\n\n  return (\n    <div className=\"min-h-screen bg-[#e0e5ec] text-[#4a5568] font-sans selection:bg-blue-200 flex justify-center\">\n      <style>{`\n        .neo-bg   { background-color: #e0e5ec; }\n        .neo-shadow { box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff; }\n        .neo-shadow-sm { box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff; }\n        .neo-inset { box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff; }\n        .slider-thumb::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; }\n        .slider-thumb::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#e0e5ec; box-shadow:3px 3px 6px #a3b1c6,-3px -3px 6px #ffffff; cursor:pointer; border:none; }\n        .hide-scrollbar::-webkit-scrollbar { display:none; }\n        .hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }\n        select option { background: #e0e5ec; color: #4a5568; }\n      `}</style>\n\n      <div className=\"w-full max-w-md flex flex-col h-screen relative shadow-2xl overflow-hidden\">\n        {/* Header */}\n        <header className=\"px-6 pt-5 pb-3 flex justify-between items-center z-10 neo-bg\">\n          <h1 className=\"text-xl font-bold tracking-wider text-[#4a5568]\">\n            NEURO<span className=\"text-[#8ba3c7]\">SYNC</span>\n          </h1>\n          <div className=\"flex items-center gap-1 text-[10px] font-bold text-[#a3b1c6] uppercase tracking-widest\">\n            <span className=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse inline-block mr-1\" />\n            LIVE\n          </div>\n        </header>\n\n        {/* Main scroll area */}\n        <main className=\"flex-1 overflow-y-auto px-6 pb-28 pt-2 hide-scrollbar neo-bg\">\n          {tab === \"binaural\"  && <BinauralTab />}\n          {tab === \"ocean\"     && <OceanPulseTab />}\n          {tab === \"timeline\"  && <TimelineTab />}\n          {tab === \"wisdom\"    && <TTSWisdomTab />}\n          {tab === \"clock\"     && <ClockTab />}\n        </main>\n\n        {/* Bottom Nav */}\n        <nav className=\"absolute bottom-0 w-full px-4 pb-4 pt-2 neo-bg z-20\">\n          <div className=\"flex justify-around items-center rounded-2xl p-2 neo-shadow\">\n            {NAV.map(({ id, label, color, icon }) => {\n              const Icon = Icons[icon] as () => JSX.Element;\n              const active = tab === id;\n              return (\n                <button key={id} onClick={() => setTab(id)}\n                  className={`flex-1 py-2 px-1 rounded-xl flex flex-col items-center justify-center transition-all duration-200 gap-1\n                    ${active ? `neo-inset ${color}` : \"text-[#6b7c93] hover:text-[#4a5568]\"}`}>\n                  <Icon />\n                  <span className=\"text-[9px] font-bold tracking-wider\">{label}</span>\n                </button>\n              );\n            })}\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n",[],[151,197],"1b0e0514-1e70-11f1-9eae-42dde27851f2","TimelineTab.tsx","ac2af6c0-1e6f-11f1-8d5a-42dde27851f2","42baf596-1e6f-11f1-9ea7-42dde27851f2",25,["D",1773360226403],"import React, { useState, useEffect, useRef } from \"https://esm.sh/react@18\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\nconst BRAINWAVE_COLORS: Record<string, string> = {\n  delta: \"#6366f1\",\n  theta: \"#8b5cf6\",\n  alpha: \"#3b82f6\",\n  beta: \"#06b6d4\",\n  high_beta: \"#f59e0b\",\n};\n\nconst BRAINWAVE_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 {\n  id: string;\n  label: string;\n  brainwave: string;\n  durationMin: number;\n  baseFreq: number;\n}\n\ninterface Timeline {\n  id?: number;\n  name: string;\n  segments: Segment[];\n}\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 [loading, setLoading] = useState(true);\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  // --- API ---\n  async function load() {\n    setLoading(true);\n    const r = await fetch(\"/api/timeline\");\n    const data = await r.json();\n    setTimelines(data);\n    setLoading(false);\n  }\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\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  // --- Segment helpers ---\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\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\n  function removeSeg(id: string) {\n    setCurrent(p => ({ ...p, segments: p.segments.filter(s => s.id !== id) }));\n  }\n\n  // --- Playback ---\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\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\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 = BRAINWAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n\n    const leftOsc = ctx.createOscillator();\n    const rightOsc = ctx.createOscillator();\n    const lPan = ctx.createStereoPanner(); lPan.pan.value = -1;\n    const rPan = ctx.createStereoPanner(); rPan.pan.value = 1;\n    const gain = ctx.createGain(); gain.gain.value = 0.4;\n    leftOsc.connect(lPan); rightOsc.connect(rPan);\n    lPan.connect(gain); rPan.connect(gain); gain.connect(ctx.destination);\n\n    leftOsc.frequency.value = seg.baseFreq;\n    rightOsc.frequency.setValueAtTime(seg.baseFreq + hz.start, ctx.currentTime);\n    rightOsc.frequency.linearRampToValueAtTime(seg.baseFreq + hz.end, ctx.currentTime + seg.durationMin * 60);\n    leftOsc.start(); rightOsc.start();\n    leftRef.current = leftOsc; rightRef.current = rightOsc;\n\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 className=\"flex flex-col\">\n      <div className=\"text-center mb-6\">\n        <h2 className=\"text-2xl font-semibold mb-1\">📈 Timeline</h2>\n        <p className=\"text-sm text-[#8ba3c7]\">Build & play entrainment sessions</p>\n      </div>\n\n      {/* Timeline Visual */}\n      {current.segments.length > 0 && (\n        <div className=\"w-full h-16 flex rounded-2xl overflow-hidden neo-inset mb-6\">\n          {current.segments.map((seg, i) => {\n            const widthPct = totalMin > 0 ? (seg.durationMin / totalMin) * 100 : 100 / current.segments.length;\n            const color = BRAINWAVE_COLORS[seg.brainwave] ?? \"#8ba3c7\";\n            return (\n              <div key={seg.id} className=\"flex items-center justify-center text-[10px] font-bold text-white relative transition-all\"\n                style={{ width: `${widthPct}%`, backgroundColor: color, opacity: playing && i === activeSegIdx ? 1 : playing ? 0.4 : 0.7 }}>\n                {widthPct > 8 && <span className=\"truncate px-1\">{seg.label}</span>}\n                {playing && i === activeSegIdx && (\n                  <div className=\"absolute inset-0 border-2 border-white animate-pulse rounded-sm\" />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* Session name + controls */}\n      <div className=\"flex gap-3 mb-6 items-center\">\n        <input value={current.name} onChange={e => setCurrent(p => ({...p, name: e.target.value}))}\n          className=\"flex-1 p-3 rounded-xl neo-inset text-sm font-semibold text-[#4a5568] bg-transparent outline-none\"/>\n        <button onClick={save} disabled={saving}\n          className=\"p-3 rounded-xl neo-shadow text-[#6b7c93] hover:text-blue-500 transition-all\">\n          <Icons.Save />\n        </button>\n        {current.segments.length > 0 && (\n          <button onClick={playing ? stopPlayback : startPlayback}\n            className={`p-3 rounded-xl transition-all ${playing ? \"neo-inset text-blue-500\" : \"neo-shadow text-[#4a5568]\"}`}>\n            {playing ? <Icons.Square /> : <Icons.Play />}\n          </button>\n        )}\n      </div>\n\n      {/* Segments */}\n      <div className=\"space-y-3 mb-6\">\n        {current.segments.map((seg, i) => (\n          <div key={seg.id} className={`p-4 rounded-2xl neo-shadow transition-all ${playing && i === activeSegIdx ? \"ring-2 ring-blue-400\" : \"\"}`}>\n            <div className=\"flex gap-2 items-center mb-3\">\n              <div className=\"w-3 h-3 rounded-full flex-shrink-0\" style={{ backgroundColor: BRAINWAVE_COLORS[seg.brainwave] }} />\n              <input value={seg.label} onChange={e => updateSeg(seg.id, { label: e.target.value })}\n                className=\"flex-1 text-sm font-semibold text-[#4a5568] bg-transparent outline-none border-b border-[#c5cdd8] pb-1\"/>\n              <button onClick={() => removeSeg(seg.id)} className=\"text-[#a3b1c6] hover:text-red-400 transition-colors\">\n                <Icons.Trash />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-3 gap-2\">\n              <div>\n                <label className=\"text-[10px] text-[#8ba3c7] font-bold uppercase\">Wave</label>\n                <select value={seg.brainwave} onChange={e => updateSeg(seg.id, { brainwave: e.target.value })}\n                  className=\"w-full text-xs text-[#4a5568] neo-inset rounded-lg p-2 bg-transparent outline-none mt-1\">\n                  {Object.keys(BRAINWAVE_HZ).map(k => <option key={k} value={k}>{k}</option>)}\n                </select>\n              </div>\n              <div>\n                <label className=\"text-[10px] text-[#8ba3c7] font-bold uppercase\">Min</label>\n                <input type=\"number\" value={seg.durationMin} min={1} max={60}\n                  onChange={e => updateSeg(seg.id, { durationMin: Number(e.target.value) })}\n                  className=\"w-full text-xs text-[#4a5568] neo-inset rounded-lg p-2 bg-transparent outline-none mt-1\"/>\n              </div>\n              <div>\n                <label className=\"text-[10px] text-[#8ba3c7] font-bold uppercase\">Base Hz</label>\n                <input type=\"number\" value={seg.baseFreq} min={80} max={500} step={10}\n                  onChange={e => updateSeg(seg.id, { baseFreq: Number(e.target.value) })}\n                  className=\"w-full text-xs text-[#4a5568] neo-inset rounded-lg p-2 bg-transparent outline-none mt-1\"/>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <button onClick={addSegment}\n        className=\"w-full py-3 rounded-2xl neo-shadow flex items-center justify-center gap-2 text-sm font-bold text-[#6b7c93] hover:text-blue-500 transition-all mb-6\">\n        <Icons.Plus /> Add Segment\n      </button>\n\n      {/* Saved timelines */}\n      {timelines.length > 0 && (\n        <div className=\"mb-4\">\n          <p className=\"text-xs font-bold text-[#8ba3c7] uppercase tracking-wider mb-3\">Saved Sessions</p>\n          <div className=\"space-y-2\">\n            {timelines.map(tl => (\n              <div key={tl.id} className=\"flex items-center gap-2 p-3 rounded-xl neo-shadow\">\n                <button onClick={() => setCurrent(tl)} className=\"flex-1 text-sm text-left font-semibold text-[#4a5568]\">\n                  {tl.name} <span className=\"text-xs text-[#8ba3c7] font-normal ml-2\">{tl.segments.length} segments</span>\n                </button>\n                <button onClick={() => deleteTl(tl.id!)} className=\"text-[#a3b1c6] hover:text-red-400\">\n                  <Icons.Trash />\n                </button>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      <p className=\"text-xs text-center text-[#8ba3c7] leading-relaxed\">\n        Total session: <strong className=\"text-[#4a5568]\">{totalMin} min</strong>\n      </p>\n    </div>\n  );\n}\n",[],[151,213,205],"components","1bc9f47c-1e70-11f1-99a8-42dde27851f2",["D",1773360227649],[],[151,213,39],"181899b4-1e70-11f1-9eae-42dde27851f2","OceanPulseTab.tsx","93de9b62-1e6f-11f1-821a-42dde27851f2",24,["D",1773360221452],"import React, { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react@18\";\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\n/**\n * Ocean Pulse — amplitude-modulated brown noise shaped like ocean waves.\n * A slow LFO (tied to breath rate) modulates gain on a brown noise source.\n * Users set breath cycle length (BPM-like), wave depth, and volume.\n */\nexport function OceanPulseTab() {\n  const [playing, setPlaying] = useState(false);\n  const [breathRate, setBreathRate] = useState(6);   // breaths per minute (4–12)\n  const [waveDepth, setWaveDepth] = useState(80);    // 0–100 modulation depth %\n  const [volume, setVolume] = useState(60);          // 0–100\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    // Wave shaper: noise → waveGain → master\n    const waveGain = ctx.createGain();\n    waveGain.gain.value = 1 - (waveDepth / 200); // base level\n    waveGain.connect(master);\n\n    // LFO shapes the amplitude\n    const lfo = ctx.createOscillator();\n    lfo.type = \"sine\";\n    lfo.frequency.value = breathRate / 60; // Hz = breaths/sec\n    const lfoGain = ctx.createGain();\n    lfoGain.gain.value = waveDepth / 200;  // modulation depth\n    lfo.connect(lfoGain);\n    lfoGain.connect(waveGain.gain);\n    lfo.start();\n\n    // Brown noise source\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  // Live-update LFO rate when breathRate changes\n  useEffect(() => {\n    if (lfoRef.current && ctxRef.current) {\n      lfoRef.current.frequency.setTargetAtTime(breathRate / 60, ctxRef.current.currentTime, 0.5);\n    }\n  }, [breathRate]);\n\n  // Live-update master volume\n  useEffect(() => {\n    if (masterRef.current && ctxRef.current) {\n      masterRef.current.gain.setTargetAtTime(volume / 100, ctxRef.current.currentTime, 0.1);\n    }\n  }, [volume]);\n\n  useEffect(() => () => stop(), []);\n\n  const toggle = () => { playing ? stop() : start(); };\n  const breathPeriod = (60 / breathRate).toFixed(1);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"text-center mb-6\">\n        <h2 className=\"text-2xl font-semibold mb-1\">🌊 Ocean Pulse</h2>\n        <p className=\"text-sm text-[#8ba3c7]\">Breath-synced amplitude modulation</p>\n      </div>\n\n      {/* Animated wave visual */}\n      <div className={`mx-auto mb-8 w-full h-24 rounded-2xl neo-inset flex items-center justify-center overflow-hidden relative ${playing ? \"ocean-playing\" : \"\"}`}>\n        {playing ? (\n          <div className=\"flex gap-1 items-end h-16 px-4\">\n            {Array.from({length: 20}).map((_, i) => (\n              <div key={i} className=\"wave-bar rounded-full bg-blue-400 opacity-70 w-3\"\n                style={{ animationDelay: `${i * (1 / breathRate * 60 / 20)}s`, animationDuration: `${60 / breathRate}s` }}\n              />\n            ))}\n          </div>\n        ) : (\n          <Icons.Ocean />\n        )}\n        <style>{`\n          .wave-bar { animation: wavePulse 4s ease-in-out infinite; height: 8px; }\n          @keyframes wavePulse {\n            0%, 100% { height: 8px; opacity: 0.4; }\n            50% { height: 48px; opacity: 0.9; }\n          }\n        `}</style>\n      </div>\n\n      {/* Play Button */}\n      <div className=\"flex justify-center mb-8\">\n        <button onClick={toggle}\n          className={`w-28 h-28 rounded-full flex items-center justify-center transition-all duration-300 ${playing ? \"neo-inset text-blue-400\" : \"neo-shadow text-[#4a5568]\"}`}>\n          {playing ? <Icons.Square /> : <Icons.Play />}\n        </button>\n      </div>\n\n      <div className=\"p-6 rounded-3xl neo-shadow mb-6\">\n        <NeumorphicSlider\n          label=\"Breath Rate\" value={breathRate} min={4} max={12} step={1}\n          onChange={setBreathRate} unit=\"bpm\"\n        />\n        <NeumorphicSlider\n          label=\"Wave Depth\" value={waveDepth} min={10} max={100} step={5}\n          onChange={setWaveDepth} unit=\"%\"\n        />\n        <NeumorphicSlider\n          label=\"Volume\" value={volume} min={0} max={100} step={1}\n          onChange={setVolume} unit=\"%\"\n        />\n      </div>\n\n      <p className=\"text-xs text-center text-[#8ba3c7] px-4 leading-relaxed\">\n        One full wave every <strong className=\"text-[#4a5568]\">{breathPeriod}s</strong> — breathe in as it rises, out as it falls.\n        <br/>Amplitude-modulated brown noise deepens binaural entrainment.\n      </p>\n    </div>\n  );\n}\n",[],[151,213,219],"701ac76e-1e6f-11f1-a8bc-42dde27851f2","NeumorphicSlider.tsx","701ac822-1e6f-11f1-a8bc-42dde27851f2",12,["D",1773359939609],"import React from \"https://esm.sh/react@18\";\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}\n\nexport function NeumorphicSlider({ label, value, min, max, onChange, unit = \"\", step = 1 }: Props) {\n  return (\n    <div className=\"mb-6 w-full\">\n      <div className=\"flex justify-between mb-2 text-sm font-semibold text-[#6b7c93]\">\n        <span>{label}</span>\n        <span>{value} {unit}</span>\n      </div>\n      <div className=\"relative h-6 flex items-center\">\n        <div className=\"absolute w-full h-3 rounded-full neo-inset\" />\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=\"w-full absolute appearance-none bg-transparent h-full z-10 slider-thumb\"\n        />\n      </div>\n    </div>\n  );\n}\n",[],[151,213,227],"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",[],[151,213,235],"ce4e029c-1e6f-11f1-813d-42dde27851f2","ClockTab.tsx","ce4e0364-1e6f-11f1-813d-42dde27851f2",17,["D",1773360097638],"import React, { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react@18\";\nimport { NeumorphicSlider } from \"./NeumorphicSlider.tsx\";\nimport { Icons } from \"./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\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(800, time); osc.frequency.exponentialRampToValueAtTime(0.01, time + 0.1);\n      gain.gain.setValueAtTime(0.5, time); gain.gain.exponentialRampToValueAtTime(0.01, time + 0.05);\n      osc.start(time); osc.stop(time + 0.1);\n    } else {\n      osc.type = \"triangle\"; osc.frequency.setValueAtTime(300, time); osc.frequency.linearRampToValueAtTime(100, time + 0.3);\n      gain.gain.setValueAtTime(0.7, time); gain.gain.exponentialRampToValueAtTime(0.01, time + 0.3);\n      osc.start(time); osc.stop(time + 0.3);\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      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.1;\n      nextPolyRef.current = ctx.currentTime + 0.1;\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  return (\n    <div className=\"flex flex-col\">\n      <div className=\"text-center mb-8\">\n        <h2 className=\"text-2xl font-semibold mb-1\">Polyrhythms</h2>\n        <p className=\"text-sm text-[#8ba3c7]\">Generative timing & sub-beats</p>\n      </div>\n\n      {/* Animated ring */}\n      <div className=\"flex justify-center mb-10 relative\">\n        <div className={`absolute w-36 h-36 rounded-full border-4 border-emerald-300 opacity-30 ${playing ? \"animate-ping\" : \"hidden\"}`} style={{ animationDuration: `${tickSpeed}ms` }} />\n        <button onClick={toggle}\n          className={`w-32 h-32 rounded-full flex items-center justify-center transition-all duration-300 z-10 ${playing ? \"neo-inset text-emerald-500\" : \"neo-shadow text-[#4a5568]\"}`}>\n          {playing ? <Icons.Square /> : <Icons.Play />}\n        </button>\n      </div>\n\n      <div className=\"p-6 rounded-3xl neo-shadow mb-6\">\n        <NeumorphicSlider label=\"Primary Tick Speed\" value={tickSpeed} min={100} max={3000} onChange={setTickSpeed} unit=\"ms\"/>\n        <NeumorphicSlider label=\"Poly Cycle\" value={polySpeed} min={1} max={60} onChange={setPolySpeed} unit=\"sec\"/>\n      </div>\n\n      <p className=\"text-xs text-center text-[#8ba3c7] px-4\">\n        Tick every <strong className=\"text-[#4a5568]\">{tickSpeed}ms</strong>, resonant pulse every <strong className=\"text-[#4a5568]\">{polySpeed}s</strong>.\n      </p>\n    </div>\n  );\n}\n",[],[151,213,243],"177510a0-1e70-11f1-9eae-42dde27851f2","BinauralTab.tsx","85f31190-1e6f-11f1-8d5a-42dde27851f2",23,["D",1773360220380],"import React, { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react@18\";\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\", noise: \"none\" as const },\n  focus:      { name: \"Focus\",      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\",     baseFreq: 200, startBeat: 14, endBeat: 30, rampTime: 120, noise: \"none\"  as const, desc: \"Ramps to High-Beta (30Hz) for peak alertness.\" },\n  creativity: { name: \"Creativity\", baseFreq: 300, startBeat: 15, endBeat:  7, rampTime: 300, noise: \"brown\" as const, desc: \"Ramps to Theta (7Hz) to foster open-monitoring.\" },\n  meditation: { name: \"Meditation\", baseFreq: 150, startBeat: 10, endBeat:  5, rampTime: 300, noise: \"none\"  as const, desc: \"Ramps to Theta (5Hz) for deep relaxation.\" },\n  sleep:      { name: \"Sleep\",      baseFreq: 100, startBeat:  8, endBeat:  2, rampTime: 900, noise: \"brown\" as const, desc: \"Long ramp to Delta (2Hz) to induce sleep.\" },\n};\ntype PresetKey = keyof typeof PRESETS;\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] as any;\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  return (\n    <div className=\"flex flex-col\">\n      <div className=\"text-center mb-6\">\n        <h2 className=\"text-2xl font-semibold mb-1\">Entrainment</h2>\n        <p className=\"text-sm text-[#8ba3c7]\">Advanced Binaural Beats</p>\n      </div>\n\n      {/* Presets */}\n      <div className=\"flex overflow-x-auto hide-scrollbar gap-3 mb-8 px-1 pb-2\">\n        {(Object.entries(PRESETS) as [PresetKey, any][]).map(([key, p]) => (\n          <button key={key} onClick={() => applyPreset(key)}\n            className={`whitespace-nowrap px-4 py-2 rounded-full text-xs font-bold transition-all duration-300 ${preset===key ? \"neo-inset text-blue-500\" : \"neo-shadow text-[#6b7c93]\"}`}>\n            {p.name}\n          </button>\n        ))}\n      </div>\n\n      {/* Play Button */}\n      <div className=\"flex justify-center mb-8\">\n        <button onClick={toggle}\n          className={`w-32 h-32 rounded-full flex items-center justify-center transition-all duration-300 ${playing ? \"neo-inset text-blue-500\" : \"neo-shadow text-[#4a5568]\"}`}>\n          {playing ? <Icons.Square /> : <Icons.Play />}\n        </button>\n      </div>\n\n      <div className=\"p-6 rounded-3xl neo-shadow mb-6\">\n        <NeumorphicSlider label=\"Base Frequency\" value={baseFreq} min={100} max={500} onChange={handleSlider(setBaseFreq)} unit=\"Hz\"/>\n        <NeumorphicSlider label=\"Starting Beat\" value={startBeat} min={1} max={40} onChange={handleSlider(setStartBeat)} unit=\"Hz\"/>\n        <NeumorphicSlider label=\"Target Beat\" value={endBeat} min={1} max={40} onChange={handleSlider(setEndBeat)} unit=\"Hz\"/>\n        <NeumorphicSlider label=\"Ramp Duration\" value={rampTime} min={10} max={900} onChange={handleSlider(setRampTime)} unit=\"sec\"/>\n\n        <div className=\"mt-4 flex justify-between items-center text-sm font-semibold text-[#6b7c93]\">\n          <span>Noise</span>\n          <div className=\"flex gap-2\">\n            {([\"none\",\"pink\",\"brown\"] as const).map(t => (\n              <button key={t} onClick={() => { setPreset(\"custom\"); setNoise(t); }}\n                className={`px-3 py-1 rounded-lg text-xs capitalize ${noise===t ? \"neo-inset text-blue-500\" : \"neo-shadow\"}`}>\n                {t}\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {preset !== \"custom\" && (\n        <p className=\"text-xs text-center text-[#4a5568] font-semibold px-4 mb-2\">\n          {(PRESETS[preset] as any).desc}\n        </p>\n      )}\n      <p className=\"text-xs text-center text-[#8ba3c7] px-4 leading-relaxed\">\n        Plays {baseFreq}Hz (L) & {baseFreq+startBeat}Hz (R), shifting to {baseFreq+endBeat}Hz over {rampTime}s.\n      </p>\n    </div>\n  );\n}\n",[],[151,213,251],"42baf4d8-1e6f-11f1-9ea7-42dde27851f2",5,["D",1773359863484],[183,184,185,186,187,188,189],[151,213],["D",1773359861456],[182,190],[151],"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",[],[158,267],"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",[],[158,275],"568eb378-1e6f-11f1-8d5a-42dde27851f2","tts.ts","568eb44a-1e6f-11f1-8d5a-42dde27851f2","41751932-1e6f-11f1-9ea7-42dde27851f2",9,["D",1773359896749],"/**\n * Proxy to Groq TTS API — keeps API key server-side.\n * POST /api/tts  { text: string, voice?: string }\n * Returns audio/mpeg stream.\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  const body = await req.json();\n  const { text, voice = \"Calum-PlayAI\" } = 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: \"playai-tts\",\n      input: text,\n      voice,\n      response_format: \"mp3\",\n    }),\n  });\n\n  if (!groqRes.ok) {\n    const err = await groqRes.text();\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/mpeg\",\n      \"Cache-Control\": \"no-cache\",\n    },\n  });\n}\n",[],[158,291,283],"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",[],[158,291,293],"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",[],[158,291,301],"41751860-1e6f-11f1-9ea7-42dde27851f2",["D",1773359861327],[176,177,178],[158,291],["D",1773359859285],[175,179,180],[158],["D",1773359647109],["D",1789440639557],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_19":61,"_108":109,"_110":31},{"_13":93,"_38":94,"_50":49,"_95":51,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":52,"_102":103},"ctx",{"_86":-5,"_132":353,"_354":355,"_356":357,"_358":31,"_359":31,"_360":31,"_361":130,"_362":-5,"_363":-7,"_364":-7,"_365":67,"_366":31,"_367":31,"_368":-5,"_369":31,"_370":31,"_371":31,"_372":-5},"ENV",{"_324":325,"_326":327,"_328":94,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352},"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 · v26