\n \n\n

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

\n \n brain\n \n

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

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

\n \n

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

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

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

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

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

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

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

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

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

\n \n\n

Admin · Quotes

Edit and delete quotes. Not linked from main app.

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

setNewQ(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n            <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p => ({ ...p, author: e.target.value }))} style={{ marginBottom: 10 }} />\n            <div style={{ display: \"flex\", gap: 8 }}>\n              <button onClick={addQuote} style={{ padding: \"8px 14px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 12, fontWeight: 700, cursor: \"pointer\" }}>Save</button>\n              <button onClick={() => setAdding(false)} style={{ padding: \"8px 14px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\" }}>Cancel</button>\n            </div>\n          </div>\n        ) : (\n          <button onClick={() => setAdding(true)} style={{ padding: \"10px 16px\", background: \"#21262d\", border: \"1px dashed rgba(255,255,255,0.2)\", borderRadius: 8, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\", marginBottom: 20 }}>\n            + Add quote\n          </button>\n        )}\n\n        {/* Quote list */}\n        {loading ? (\n          <div style={{ color: \"#6e7681\", padding: 40, textAlign: \"center\" }}>Loading…</div>\n        ) : (\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>\n            {quotes.map(q => (\n              <div key={q.id} className=\"admin-card\" style={{ opacity: q.enabled ? 1 : 0.6 }}>\n                {editingId === q.id ? (\n                  <>\n                    <textarea rows={3} value={draft.text} onChange={e => setDraft(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n                    <input value={draft.author} onChange={e => setDraft(p => ({ ...p, author: e.target.value }))} placeholder=\"Author\" style={{ marginBottom: 10 }} />\n                    <div style={{ display: \"flex\", gap: 8 }}>\n                      <button onClick={() => saveEdit(q.id)} style={{ padding: \"6px 12px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Save</button>\n                      <button onClick={() => setEditingId(null)} style={{ padding: \"6px 12px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Cancel</button>\n                    </div>\n                  </>\n                ) : (\n                  <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\", gap: 12 }}>\n                    <div style={{ flex: 1 }}>\n                      <div style={{ fontSize: 13, lineHeight: 1.5, fontStyle: \"italic\", marginBottom: 4 }}>{q.text}</div>\n                      {q.author && <div style={{ fontSize: 11, color: \"#8b949e\" }}>— {q.author}</div>}\n                    </div>\n                    <div style={{ display: \"flex\", gap: 6, flexShrink: 0 }}>\n                      <button onClick={() => toggleEnabled(q)} style={{ padding: \"4px 8px\", background: \"none\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 4, color: q.enabled ? \"#3fb950\" : \"#6e7681\", fontFamily: \"inherit\", fontSize: 10, cursor: \"pointer\" }}>\n                        {q.enabled ? \"ON\" : \"OFF\"}\n                      </button>\n                      <button onClick={() => { setEditingId(q.id); setDraft({ text: q.text, author: q.author }); }} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#8b949e\", cursor: \"pointer\" }} title=\"Edit\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\n                      </button>\n                      <button onClick={() => deleteQuote(q.id)} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#f85149\", cursor: \"pointer\" }} title=\"Delete\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n                      </button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div style={{ marginTop: 24, fontSize: 11, color: \"#6e7681\", textAlign: \"center\" }}>\n          {quotes.length} quote{quotes.length !== 1 ? \"s\" : \"\"}\n        </div>\n      </div>\n    </div>\n  );\n}\n",[18,158],"42baf4d8-1e6f-11f1-9ea7-42dde27851f2",["D",1773359863484],[18,79],"pulls","branches",1,"forks","envVars",{"_308":302,"_310":26},"connections",{"_308":26,"_309":26},"count","unfilledCount","emptyCount",{"_47":503,"_13":464,"_77":458,"_57":-5,"_49":50,"_278":478,"_280":24,"_51":504,"_53":26,"_80":81,"_282":-5,"_82":30,"_283":-5,"_343":505,"_17":506},{"_47":498,"_13":482,"_77":475,"_57":458,"_49":50,"_278":499,"_280":24,"_51":500,"_53":26,"_80":81,"_282":-5,"_82":30,"_283":-5,"_343":501,"_17":502},{"_47":491,"_13":492,"_77":493,"_57":475,"_49":50,"_278":340,"_280":24,"_51":494,"_53":26,"_80":96,"_282":495,"_82":30,"_283":-5,"_343":496,"_17":497},{"_47":483,"_13":484,"_77":485,"_57":475,"_49":50,"_278":486,"_280":24,"_51":487,"_53":26,"_80":96,"_282":488,"_82":30,"_283":-5,"_343":489,"_17":490},{"_47":472,"_13":473,"_77":474,"_57":475,"_49":50,"_278":476,"_280":24,"_51":477,"_53":478,"_80":96,"_282":479,"_82":30,"_283":-5,"_343":480,"_17":481},{"_47":465,"_13":466,"_77":467,"_57":458,"_49":50,"_278":398,"_280":24,"_51":468,"_53":26,"_80":96,"_282":469,"_82":30,"_283":-5,"_343":470,"_17":471},{"_47":455,"_13":456,"_77":457,"_57":458,"_49":50,"_278":459,"_280":24,"_51":460,"_53":26,"_80":96,"_282":461,"_82":30,"_283":-5,"_343":462,"_17":463},{"_47":277,"_13":18,"_77":204,"_57":-5,"_49":50,"_278":279,"_280":24,"_51":452,"_53":26,"_80":81,"_282":-5,"_82":30,"_283":-5,"_343":453,"_17":454},{"_47":297,"_13":79,"_77":78,"_57":204,"_49":50,"_278":54,"_280":24,"_51":449,"_53":26,"_80":81,"_282":-5,"_82":30,"_283":-5,"_343":450,"_17":451},{"_47":441,"_13":442,"_77":443,"_57":78,"_49":50,"_278":444,"_280":24,"_51":445,"_53":54,"_80":96,"_282":446,"_82":30,"_283":-5,"_343":447,"_17":448},{"_47":433,"_13":434,"_77":435,"_57":78,"_49":50,"_278":436,"_280":24,"_51":437,"_53":279,"_80":96,"_282":438,"_82":30,"_283":-5,"_343":439,"_17":440},{"_47":425,"_13":426,"_77":427,"_57":78,"_49":50,"_278":428,"_280":24,"_51":429,"_53":26,"_80":96,"_282":430,"_82":30,"_283":-5,"_343":431,"_17":432},{"_47":417,"_13":418,"_77":419,"_57":78,"_49":50,"_278":420,"_280":24,"_51":421,"_53":54,"_80":96,"_282":422,"_82":30,"_283":-5,"_343":423,"_17":424},{"_47":409,"_13":410,"_77":411,"_57":78,"_49":50,"_278":412,"_280":24,"_51":413,"_53":279,"_80":96,"_282":414,"_82":30,"_283":-5,"_343":415,"_17":416},{"_47":402,"_13":403,"_77":404,"_57":78,"_49":50,"_278":242,"_280":24,"_51":405,"_53":54,"_80":96,"_282":406,"_82":30,"_283":-5,"_343":407,"_17":408},{"_47":393,"_13":394,"_77":395,"_57":78,"_49":50,"_278":396,"_280":24,"_51":397,"_53":398,"_80":96,"_282":399,"_82":30,"_283":-5,"_343":400,"_17":401},{"_47":384,"_13":385,"_77":386,"_57":78,"_49":50,"_278":387,"_280":24,"_51":388,"_53":389,"_80":96,"_282":390,"_82":30,"_283":-5,"_343":391,"_17":392},{"_47":376,"_13":377,"_77":378,"_57":78,"_49":50,"_278":379,"_280":24,"_51":380,"_53":26,"_80":96,"_282":381,"_82":30,"_283":-5,"_343":382,"_17":383},{"_47":293,"_13":158,"_77":157,"_57":204,"_49":50,"_278":151,"_280":24,"_51":373,"_53":26,"_80":96,"_282":295,"_82":30,"_283":-5,"_343":374,"_17":375},{"_47":288,"_13":95,"_77":94,"_57":204,"_49":50,"_278":198,"_280":24,"_51":370,"_53":290,"_80":96,"_282":291,"_82":30,"_283":-5,"_343":371,"_17":372},{"_47":362,"_13":363,"_77":364,"_57":-5,"_49":50,"_278":365,"_280":24,"_51":366,"_53":26,"_80":21,"_282":367,"_82":30,"_283":-5,"_343":368,"_17":369},{"_47":354,"_13":355,"_77":356,"_57":-5,"_49":50,"_278":357,"_280":24,"_51":358,"_53":26,"_80":21,"_282":359,"_82":30,"_283":-5,"_343":360,"_17":361},{"_47":346,"_13":347,"_77":348,"_57":-5,"_49":50,"_278":349,"_280":24,"_51":350,"_53":26,"_80":21,"_282":351,"_82":30,"_283":-5,"_343":352,"_17":353},{"_47":335,"_13":336,"_77":337,"_57":-5,"_49":50,"_278":338,"_280":24,"_51":339,"_53":340,"_80":341,"_282":342,"_82":30,"_283":14,"_343":344,"_17":345},"47829688-1e74-11f1-9df1-42dde27851f2","main.ts","c1c5a18e-1e6e-11f1-9536-42dde27851f2",73,["D",1773362018986],7,"http","/**\n * brain — Main HTTP entry point · Tomaso Valmax\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  // --- Admin page (not linked from main app) ---\n  if (url.pathname === \"/admin\" || url.pathname === \"/admin/\") {\n    const ESM = \"https://esm.town/v/all/brain\";\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>brain Admin</title>\n  <script type=\"importmap\">\n  {\"imports\":{\"react\":\"https://esm.sh/react@18\",\"react/\":\"https://esm.sh/react@18/\",\"react-dom\":\"https://esm.sh/react-dom@18\",\"react-dom/\":\"https://esm.sh/react-dom@18/\",\"react/jsx-runtime\":\"https://esm.sh/react@18/jsx-runtime\"}}\n  </script>\n  <style>*{box-sizing:border-box;margin:0;padding:0;}body{background:#0d1117;}</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 AdminQuotesPage from \"${ESM}/frontend/AdminQuotesPage.tsx\";\n    createRoot(document.getElementById(\"root\")).render(createElement(AdminQuotesPage));\n  </script>\n</body>\n</html>`;\n    return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\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>brain · Tomaso Valmax</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: #0d1117; color: #c9d1d9; font-family: 'Space Mono', 'Courier New', monospace; }\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","children",[],[336],"e8e3f35c-1e72-11f1-afb6-42dde27851f2","deno.json","e8e3f438-1e72-11f1-afb6-42dde27851f2",59,["D",1773361430101],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": true,\n    \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"include\": [\"deno:/https/esm.town/**/*\"],\n    \"rules\": {\n      \"exclude\": [\"no-explicit-any\"]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[],[347],"e88a36be-1e72-11f1-b49d-42dde27851f2","AGENTS.md","e88a3754-1e72-11f1-b49d-42dde27851f2",56,["D",1773361430125],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n  return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n  // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n  // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n  messages: [\n    { role: \"user\", content: \"Say hello in a creative way\" },\n  ],\n  model: \"gpt-4o-mini\",\n  max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n  subject: \"Hi\",  \n  text: \"Hi\", \n  html: \"<h1>Hi</h1>\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name);     // Project name\nconsole.log(projectVal.version);  // Version number\nconsole.log(projectVal.branch);   // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `<img src=\"https://maxm-imggenurl.web.val.run/the-description-of-your-image\" />`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `<script src=\"https://esm.town/v/std/catch\"></script>` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `<script src=\"https://cdn.twind.style\" crossorigin></script>` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│   ├── database/\n│   │   ├── migrations.ts    # Schema definitions\n│   │   ├── queries.ts       # DB query functions\n│   │   └── README.md\n│   └── routes/              # Route modules\n│       ├── [route].ts\n│       └── static.ts        # Static file serving\n│   ├── index.ts             # Main entry point\n│   └── README.md\n├── frontend/\n│   ├── components/\n│   │   ├── App.tsx\n│   │   └── [Component].tsx\n│   ├── favicon.svg\n│   ├── index.html           # Main HTML template\n│   ├── index.tsx            # Frontend JS entry point\n│   ├── README.md\n│   └── style.css\n├── README.md\n└── shared/\n    ├── README.md\n    └── utils.ts             # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n  ```ts\n  import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n  \n  // serve all files in frontend/ and shared/\n  app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n  app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n  \n  // For index.html, often you'll want to bootstrap with initial data\n  app.get(\"/\", async c => {\n    let html = await readFile(\"/frontend/index.html\", import.meta.url);\n    \n    // Inject data to avoid extra round-trips\n    const initialData = await fetchInitialData();\n    const dataScript = `<script>\n      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};\n    </script>`;\n    \n    html = html.replace(\"</head>\", `${dataScript}</head>`);\n    return c.html(html);\n  });\n  ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n  ```ts\n  // Unwrap Hono errors to see original error details\n  app.onError((err, c) => {\n    throw err;\n  });\n  ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n   - Val Town runs on Deno in a serverless context, not Node.js\n   - Code in `shared/` must work in both frontend and backend environments\n   - Cannot use `Deno` keyword in shared code\n   - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n   - Limited support for ALTER TABLE operations\n   - Create new tables with updated schemas and copy data when needed\n   - Always run table creation before querying\n\n3. **React Configuration:**\n   - All React dependencies must be pinned to 18.2.0\n   - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n   - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n   - Val Town only supports text files, not binary\n   - Use the provided utilities to read files across branches and forks\n   - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n   - `fetch` handler is the entry point for HTTP vals\n   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[355],"e881aa1c-1e72-11f1-b7a2-42dde27851f2",".vtignore","e881aada-1e72-11f1-b7a2-42dde27851f2",54,["D",1773361430101],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[363],["D",1773377614326],[],[18,95],["D",1773361893038],[],[18,158],"7a253c06-1e71-11f1-a3e4-42dde27851f2","Waveform.tsx","7a253cf6-1e71-11f1-a3e4-42dde27851f2",47,["D",1773360815448],"import React, { useRef, useEffect } from \"react\";\n\ninterface Props {\n  analyser: AnalyserNode | null;\n  playing: boolean;\n  accent: string;\n}\n\nexport function Waveform({ analyser, playing, accent }: Props) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const rafRef = useRef<number>(0);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\")!;\n\n    // Resolve CSS variable to a real color\n    const resolveColor = (v: string) => {\n      if (v.startsWith(\"var(\")) {\n        const name = v.slice(4, -1).trim();\n        return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || \"#58a6ff\";\n      }\n      return v;\n    };\n\n    const draw = () => {\n      rafRef.current = requestAnimationFrame(draw);\n      const W = canvas.width;\n      const H = canvas.height;\n\n      ctx.clearRect(0, 0, W, H);\n      ctx.fillStyle = \"#161b22\";\n      ctx.fillRect(0, 0, W, H);\n\n      if (!analyser || !playing) {\n        // Flat idle line\n        ctx.strokeStyle = \"rgba(255,255,255,0.06)\";\n        ctx.lineWidth = 1;\n        ctx.beginPath();\n        ctx.moveTo(0, H / 2);\n        ctx.lineTo(W, H / 2);\n        ctx.stroke();\n        return;\n      }\n\n      const bufLen = analyser.fftSize;\n      const data = new Float32Array(bufLen);\n      analyser.getFloatTimeDomainData(data);\n\n      const color = resolveColor(accent);\n\n      // Glow pass\n      ctx.shadowBlur = 10;\n      ctx.shadowColor = color;\n      ctx.strokeStyle = color;\n      ctx.lineWidth = 1.5;\n      ctx.globalAlpha = 0.9;\n      ctx.beginPath();\n\n      const step = W / bufLen;\n      for (let i = 0; i < bufLen; i++) {\n        const x = i * step;\n        const y = (1 - (data[i] * 0.85 + 1) / 2) * H;\n        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n      }\n      ctx.stroke();\n\n      // Second softer pass\n      ctx.shadowBlur = 0;\n      ctx.globalAlpha = 0.25;\n      ctx.lineWidth = 3;\n      ctx.stroke();\n\n      ctx.globalAlpha = 1;\n    };\n\n    draw();\n    return () => { cancelAnimationFrame(rafRef.current); };\n  }, [analyser, playing, accent]);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      width={430}\n      height={56}\n      style={{ width: \"100%\", height: 56, display: \"block\", background: \"var(--bg2)\", borderBottom: \"1px solid var(--border2)\" }}\n    />\n  );\n}\n",[],[18,79,377],"9717d86a-1e98-11f1-88df-42dde27851f2","TimelineTab.tsx","ac2af6c0-1e6f-11f1-8d5a-42dde27851f2",82,["D",1773377614351],9,"import React, { useState, useEffect, useRef } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\nimport { SessionTimelineView } from \"https://esm.town/v/all/brain/frontend/components/SessionTimelineView.tsx\";\n\n// Flow presets — all layers on, wisdom every 1min\nconst FLOW_PRESETS = [\n  {\n    name: \"Deep Focus\",\n    desc: \"Beta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 250, beatFreq: 16, breathRate: 6, tickSpeed: 800, polySpeed: 20, wisdomVoice: \"autumn\" },\n    segments: [{ id: \"f1\", label: \"Focus\", brainwave: \"beta\", durationMin: 15, baseFreq: 250 }],\n  },\n  {\n    name: \"Creative Flow\",\n    desc: \"Theta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 300, beatFreq: 7, breathRate: 5, tickSpeed: 1000, polySpeed: 33, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"c1\", label: \"Warm up\", brainwave: \"alpha\", durationMin: 3, baseFreq: 200 },\n      { id: \"c2\", label: \"Create\", brainwave: \"theta\", durationMin: 20, baseFreq: 300 },\n    ],\n  },\n  {\n    name: \"Wind Down\",\n    desc: \"Alpha→Theta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 150, beatFreq: 6, breathRate: 4, tickSpeed: 1200, polySpeed: 45, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"w1\", label: \"Relax\", brainwave: \"alpha\", durationMin: 5, baseFreq: 150 },\n      { id: \"w2\", label: \"Drift\", brainwave: \"theta\", durationMin: 15, baseFreq: 120 },\n    ],\n  },\n  {\n    name: \"Power Nap\",\n    desc: \"Delta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 100, beatFreq: 2, breathRate: 3, tickSpeed: 1500, polySpeed: 60, wisdomVoice: \"autumn\" },\n    segments: [{ id: \"p1\", label: \"Deep rest\", brainwave: \"delta\", durationMin: 20, baseFreq: 100 }],\n  },\n  {\n    name: \"Morning Ritual\",\n    desc: \"Theta→Alpha · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 180, beatFreq: 8, breathRate: 6, tickSpeed: 1000, polySpeed: 25, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"m1\", label: \"Meditate\", brainwave: \"theta\", durationMin: 5, baseFreq: 150 },\n      { id: \"m2\", label: \"Awaken\", brainwave: \"alpha\", durationMin: 5, baseFreq: 200 },\n    ],\n  },\n  {\n    name: \"Study Session\",\n    desc: \"Beta · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 220, beatFreq: 18, breathRate: 6, tickSpeed: 800, polySpeed: 18, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"s1\", label: \"Focus\", brainwave: \"beta\", durationMin: 25, baseFreq: 220 },\n      { id: \"s2\", label: \"Break\", brainwave: \"alpha\", durationMin: 5, baseFreq: 180 },\n    ],\n  },\n  {\n    name: \"Full Spectrum\",\n    desc: \"δ→θ→α→β journey · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 200, beatFreq: 10, breathRate: 5, tickSpeed: 1000, polySpeed: 30, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"fs1\", label: \"Deep\", brainwave: \"delta\", durationMin: 5, baseFreq: 100 },\n      { id: \"fs2\", label: \"Dream\", brainwave: \"theta\", durationMin: 8, baseFreq: 150 },\n      { id: \"fs3\", label: \"Calm\", brainwave: \"alpha\", durationMin: 7, baseFreq: 200 },\n      { id: \"fs4\", label: \"Active\", brainwave: \"beta\", durationMin: 10, baseFreq: 250 },\n    ],\n  },\n  {\n    name: \"Quick Reset\",\n    desc: \"10min · all layers · 1min wisdom\",\n    session: { binauralOn: true, oceanOn: true, clockOn: true, wisdomOn: true, wisdomIntervalMin: 1, baseFreq: 200, beatFreq: 10, breathRate: 6, tickSpeed: 1000, polySpeed: 33, wisdomVoice: \"autumn\" },\n    segments: [\n      { id: \"qr1\", label: \"Breathe\", brainwave: \"alpha\", durationMin: 5, baseFreq: 180 },\n      { id: \"qr2\", label: \"Refocus\", brainwave: \"beta\", durationMin: 5, baseFreq: 220 },\n    ],\n  },\n];\n\nconst WAVE_COLORS: Record<string, string> = {\n  delta:     \"var(--accent-violet)\",\n  theta:     \"var(--accent-blue)\",\n  alpha:     \"var(--accent-cyan)\",\n  beta:      \"var(--accent-green)\",\n  high_beta: \"var(--accent-amber)\",\n};\nconst WAVE_HZ: Record<string, { start: number; end: number }> = {\n  delta:    { start: 2,  end: 4  },\n  theta:    { start: 5,  end: 7  },\n  alpha:    { start: 9,  end: 11 },\n  beta:     { start: 15, end: 20 },\n  high_beta:{ start: 25, end: 30 },\n};\n\ninterface Segment { id: string; label: string; brainwave: string; durationMin: number; baseFreq: number; }\ninterface Timeline { id?: number; name: string; segments: Segment[]; }\n\nfunction uid() { return Math.random().toString(36).slice(2); }\n\ninterface TimelineTabProps { session?: any; setSession?: (fn: (p: any) => any) => void; masterPlaying?: boolean; masterPlay?: () => void; masterStop?: () => void; masterElapsedSec?: number; }\n\nexport function TimelineTab({ session = null, setSession, masterPlaying = false, masterPlay, masterStop, masterElapsedSec = 0 }: TimelineTabProps) {\n  const [timelines, setTimelines] = useState<Timeline[]>([]);\n  const [current, setCurrent] = useState<Timeline>({ name: \"New Session\", segments: [] });\n  const [saving, setSaving] = useState(false);\n  const [playing, setPlaying] = useState(false);\n  const [activeSegIdx, setActiveSegIdx] = useState(0);\n  const [localElapsedSec, setLocalElapsedSec] = useState(0);\n\n  const ctxRef = useRef<AudioContext | null>(null);\n  const segmentStartRef = useRef<number>(0);\n  const leftRef = useRef<OscillatorNode | null>(null);\n  const rightRef = useRef<OscillatorNode | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  async function load() {\n    const r = await fetch(\"/api/timeline\");\n    setTimelines(await r.json());\n  }\n  async function save() {\n    setSaving(true);\n    const method = current.id ? \"PUT\" : \"POST\";\n    const url = current.id ? `/api/timeline/${current.id}` : \"/api/timeline\";\n    const r = await fetch(url, { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(current) });\n    const data = await r.json();\n    setCurrent(data);\n    await load();\n    setSaving(false);\n  }\n  async function deleteTl(id: number) {\n    await fetch(`/api/timeline/${id}`, { method: \"DELETE\" });\n    await load();\n    if (current.id === id) setCurrent({ name: \"New Session\", segments: [] });\n  }\n\n  useEffect(() => { load(); }, []);\n\n  function addSegment() {\n    const seg: Segment = { id: uid(), label: \"Focus\", brainwave: \"beta\", durationMin: 5, baseFreq: 200 };\n    setCurrent(p => ({ ...p, segments: [...p.segments, seg] }));\n  }\n  function updateSeg(id: string, patch: Partial<Segment>) {\n    setCurrent(p => ({ ...p, segments: p.segments.map(s => s.id === id ? { ...s, ...patch } : s) }));\n  }\n  function removeSeg(id: string) {\n    setCurrent(p => ({ ...p, segments: p.segments.filter(s => s.id !== id) }));\n  }\n\n  function stopPlayback() {\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    leftRef.current = null; rightRef.current = null;\n    if (timerRef.current) clearTimeout(timerRef.current);\n    setPlaying(false); setActiveSegIdx(0); setLocalElapsedSec(0);\n  }\n  function startPlayback() {\n    if (!current.segments.length) return;\n    const Ctx = window.AudioContext || (window as any).webkitAudioContext;\n    if (!ctxRef.current) ctxRef.current = new Ctx();\n    const ctx = ctxRef.current;\n    if (ctx.state === \"suspended\") ctx.resume();\n    setPlaying(true);\n    runSegment(0, ctx);\n  }\n  function runSegment(idx: number, ctx: AudioContext) {\n    if (idx >= current.segments.length) { stopPlayback(); return; }\n    segmentStartRef.current = performance.now();\n    setActiveSegIdx(idx);\n    const seg = current.segments[idx];\n    const hz = WAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n    leftRef.current?.stop(); leftRef.current?.disconnect();\n    rightRef.current?.stop(); rightRef.current?.disconnect();\n    const left = ctx.createOscillator(), right = ctx.createOscillator();\n    const lp = ctx.createStereoPanner(), rp = ctx.createStereoPanner();\n    const gain = ctx.createGain();\n    lp.pan.value = -1; rp.pan.value = 1; gain.gain.value = 0.4;\n    left.connect(lp); right.connect(rp); lp.connect(gain); rp.connect(gain); gain.connect(ctx.destination);\n    left.frequency.value = seg.baseFreq;\n    right.frequency.setValueAtTime(seg.baseFreq + hz.start, ctx.currentTime);\n    right.frequency.linearRampToValueAtTime(seg.baseFreq + hz.end, ctx.currentTime + seg.durationMin * 60);\n    left.start(); right.start();\n    leftRef.current = left; rightRef.current = right;\n    timerRef.current = setTimeout(() => runSegment(idx + 1, ctx), seg.durationMin * 60 * 1000);\n  }\n\n  const totalMin = current.segments.reduce((s, seg) => s + seg.durationMin, 0);\n\n  useEffect(() => {\n    if (!playing || masterPlaying || !current.segments.length) return;\n    const tick = () => {\n      const completedSec = current.segments.slice(0, activeSegIdx).reduce((s, seg) => s + seg.durationMin * 60, 0);\n      const inSegSec = (performance.now() - segmentStartRef.current) / 1000;\n      setLocalElapsedSec(completedSec + inSegSec);\n    };\n    tick();\n    const id = setInterval(tick, 100);\n    return () => clearInterval(id);\n  }, [playing, masterPlaying, current.segments, activeSegIdx]);\n\n  const elapsedSec = masterPlaying ? masterElapsedSec : (playing ? localElapsedSec : 0);\n\n  function applyFlowPreset(preset: typeof FLOW_PRESETS[0]) {\n    if (setSession) setSession((p: any) => ({ ...p, ...preset.session }));\n    setCurrent({ name: preset.name, segments: preset.segments.map(s => ({ ...s, id: uid() })) });\n  }\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, width: \"100%\" }}>\n      <div>\n        <div className=\"section-title\">Timeline</div>\n        <div className=\"section-sub\">SESSION BUILDER</div>\n      </div>\n\n      {/* Flow presets — all layers, wisdom 1min */}\n      <div>\n        <div className=\"label-key\" style={{ marginBottom: 8 }}>FLOW PRESETS · ALL LAYERS · WISDOM 1MIN</div>\n        <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(2, 1fr)\", gap: 6 }}>\n          {FLOW_PRESETS.map((preset) => (\n            <button\n              key={preset.name}\n              onClick={() => applyFlowPreset(preset)}\n              className=\"preset-btn\"\n              style={{ textAlign: \"left\", padding: \"8px 10px\" }}>\n              <span className=\"preset-name\">{preset.name}</span>\n              <span style={{ fontSize: 8, opacity: 0.7, display: \"block\", marginTop: 2 }}>{preset.desc}</span>\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Session timeline view — grid, beats, Hz curves, clock, playhead */}\n      <SessionTimelineView\n        segments={current.segments}\n        tickSpeedMs={session?.tickSpeed ?? 1000}\n        activeSegIdx={activeSegIdx}\n        playing={playing}\n        clockOn={session?.clockOn ?? false}\n        elapsedSec={elapsedSec}\n        showPlayhead={masterPlaying || playing}\n      />\n\n      {/* Timeline bar */}\n      {current.segments.length > 0 && (\n        <div style={{ width: \"100%\", height: 48, display: \"flex\", borderRadius: 8, overflow: \"hidden\", border: \"1px solid var(--border2)\", outline: \"1px solid var(--border)\", outlineOffset: 2 }}>\n          {current.segments.map((seg, i) => {\n            const w = totalMin > 0 ? (seg.durationMin / totalMin) * 100 : 100 / current.segments.length;\n            const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n            const isActive = playing && i === activeSegIdx;\n            return (\n              <div key={seg.id} style={{\n                width: `${w}%`,\n                background: col,\n                opacity: playing ? (isActive ? 0.9 : 0.25) : 0.5,\n                display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n                fontSize: 8, fontWeight: 700, color: \"#fff\",\n                letterSpacing: \"0.05em\",\n                transition: \"opacity 0.3s\",\n                position: \"relative\",\n                overflow: \"hidden\",\n              }}>\n                {w > 10 && seg.label}\n                {isActive && <div style={{ position: \"absolute\", inset: 0, border: \"2px solid rgba(255,255,255,0.6)\", animation: \"pulse 1s infinite\" }} />}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* Name + controls row */}\n      <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n        <input\n          value={current.name}\n          onChange={e => setCurrent(p => ({ ...p, name: e.target.value }))}\n          style={{ flex: 1, fontWeight: 700, fontSize: 12 }}\n        />\n        <button onClick={save} disabled={saving} className=\"card-sm\" style={{ cursor: \"pointer\", color: saving ? \"var(--text-dim)\" : \"var(--accent-violet)\", border: \"1px solid var(--border2)\", display: \"flex\", alignItems: \"center\", padding: \"8px 10px\" }}>\n          <Icons.Save />\n        </button>\n        {current.segments.length > 0 && (\n          <button onClick={playing ? stopPlayback : startPlayback} className=\"card-sm\" style={{ cursor: \"pointer\", color: playing ? \"var(--accent-violet)\" : \"var(--text-dim)\", border: `1px solid ${playing ? \"var(--accent-violet)\" : \"var(--border2)\"}`, display: \"flex\", alignItems: \"center\", padding: \"8px 10px\" }}>\n            {playing ? <Icons.Square /> : <Icons.Play />}\n          </button>\n        )}\n      </div>\n\n      {/* Segments */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        {current.segments.map((seg, i) => {\n          const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n          const isActive = playing && i === activeSegIdx;\n          return (\n            <div key={seg.id} className=\"card\" style={{ borderColor: isActive ? col : \"var(--border2)\" }}>\n              <div style={{ display: \"flex\", gap: 8, alignItems: \"center\", marginBottom: 10 }}>\n                <div style={{ width: 8, height: 8, borderRadius: \"50%\", background: col, flexShrink: 0 }} />\n                <input value={seg.label} onChange={e => updateSeg(seg.id, { label: e.target.value })}\n                  style={{ flex: 1, fontSize: 11, fontWeight: 700, background: \"transparent\", border: \"none\", borderBottom: \"1px solid var(--border2)\", color: \"var(--text-bright)\", paddingBottom: 2, outline: \"none\", fontFamily: \"inherit\" }} />\n                <button onClick={() => removeSeg(seg.id)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", color: \"var(--text-dim)\" }}><Icons.Trash /></button>\n              </div>\n              <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr 1fr\", gap: 8 }}>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>WAVE</div>\n                  <select value={seg.brainwave} onChange={e => updateSeg(seg.id, { brainwave: e.target.value })}>\n                    {Object.keys(WAVE_HZ).map(k => <option key={k} value={k}>{k}</option>)}\n                  </select>\n                </div>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>MIN</div>\n                  <input type=\"number\" value={seg.durationMin} min={1} max={120} onChange={e => updateSeg(seg.id, { durationMin: Number(e.target.value) })} />\n                </div>\n                <div>\n                  <div className=\"label-key\" style={{ marginBottom: 4 }}>BASE Hz</div>\n                  <input type=\"number\" value={seg.baseFreq} min={80} max={500} step={10} onChange={e => updateSeg(seg.id, { baseFreq: Number(e.target.value) })} />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <button onClick={addSegment} className=\"card-sm\" style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", gap: 8, color: \"var(--accent-violet)\", border: \"1px dashed var(--border2)\", cursor: \"pointer\", fontSize: 11, fontWeight: 700, letterSpacing: \"0.06em\" }}>\n        <Icons.Plus /> ADD SEGMENT\n      </button>\n\n      {/* Saved sessions */}\n      {timelines.length > 0 && (\n        <div style={{ marginTop: 8 }}>\n          <div className=\"label-key\" style={{ marginBottom: 8 }}>SAVED SESSIONS</div>\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n            {timelines.map(tl => (\n              <div key={tl.id} className=\"card-sm\" style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                <button onClick={() => setCurrent(tl)} style={{ flex: 1, background: \"none\", border: \"none\", color: \"var(--text)\", fontFamily: \"inherit\", fontSize: 11, textAlign: \"left\", cursor: \"pointer\" }}>\n                  {tl.name} <span style={{ color: \"var(--text-dim)\", fontSize: 9 }}>· {tl.segments.length} segs · {tl.segments.reduce((s,g)=>s+g.durationMin,0)}min</span>\n                </button>\n                <button onClick={() => deleteTl(tl.id!)} style={{ background: \"none\", border: \"none\", color: \"var(--text-dim)\", cursor: \"pointer\" }}><Icons.Trash /></button>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      <div style={{ fontSize: 9, color: \"var(--text-dim)\", textAlign: \"center\", letterSpacing: \"0.06em\" }}>\n        TOTAL SESSION <span style={{ color: \"var(--accent-violet)\" }}>{totalMin}min</span>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,385],"7b064014-1e73-11f1-bdeb-42dde27851f2","TTSWisdomTab.tsx","c5330ea0-1e6f-11f1-8481-42dde27851f2",66,["D",1773361675907],6,"import React, { useState, useEffect } from \"react\";\nimport { Icons } from \"https://esm.town/v/all/brain/frontend/components/Icons.tsx\";\n\ninterface Quote { id: number; text: string; author: string; enabled: number; }\ninterface Props { session: any; setSession: (fn: (p: any) => any) => void; speakWisdom: (quotes: any[], voice: string) => Promise<void>; }\n\n// Groq Orpheus valid voices: autumn, diana, hannah, austin, daniel, troy\nconst VOICES = [\n  { value: \"troy\", label: \"TROY\" },\n  { value: \"hannah\", label: \"HANNAH\" },\n  { value: \"austin\", label: \"AUSTIN\" },\n  { value: \"autumn\", label: \"AUTUMN\" },\n  { value: \"diana\", label: \"DIANA\" },\n  { value: \"daniel\", label: \"DANIEL\" },\n];\n\nexport function TTSWisdomTab({ session, setSession, speakWisdom }: Props) {\n  const [quotes, setQuotes] = useState<Quote[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [adding, setAdding] = useState(false);\n  const [newQ, setNewQ] = useState({ text: \"\", author: \"\" });\n\n  async function loadQuotes() {\n    setLoading(true);\n    const r = await fetch(\"/api/quotes\");\n    setQuotes(await r.json());\n    setLoading(false);\n  }\n  useEffect(() => { loadQuotes(); }, []);\n\n  async function addQuote() {\n    if (!newQ.text.trim()) return;\n    await fetch(\"/api/quotes\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(newQ) });\n    setNewQ({ text: \"\", author: \"\" }); setAdding(false); loadQuotes();\n  }\n  async function toggleEnabled(q: Quote) {\n    await fetch(`/api/quotes/${q.id}`, { method: \"PATCH\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ enabled: !q.enabled }) });\n    loadQuotes();\n  }\n\n  function pickRandom(): Quote | null {\n    const enabled = quotes.filter(q => q.enabled);\n    if (!enabled.length) return null;\n    return enabled[Math.floor(Math.random() * enabled.length)];\n  }\n\n  async function speakOne() {\n    const q = pickRandom();\n    if (q) speakWisdom([q], session.wisdomVoice);\n  }\n\n  const cardStyle = { borderRadius: 0, background: \"var(--bg2)\", border: \"1px solid var(--border2)\", outline: \"1px solid var(--border)\", outlineOffset: 2 };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n      <div>\n        <div className=\"section-title\">Wisdom</div>\n        <div className=\"section-sub\">VOICE QUOTES · MASTER PLAY</div>\n      </div>\n\n      {/* Module toggle + status */}\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n        <button onClick={() => setSession((p: any) => ({ ...p, wisdomOn: !p.wisdomOn }))}\n          style={{ background: \"none\", border: `1px solid ${session.wisdomOn ? \"var(--accent-amber)\" : \"var(--border2)\"}`, padding: \"4px 10px\", fontFamily: \"inherit\", fontSize: 9, fontWeight: 700, color: session.wisdomOn ? \"var(--accent-amber)\" : \"var(--text-dim)\", cursor: \"pointer\" }}>\n          {session.wisdomOn ? \"● VOICE ON\" : \"○ VOICE OFF\"}\n        </button>\n        <span style={{ fontSize: 9, color: \"var(--text-dim)\" }}>\n          {session.playing && session.wisdomOn ? \"Playing…\" : \"Press play from toolbar\"}\n        </span>\n      </div>\n\n      {/* Voice + interval — compact */}\n      <div style={{ ...cardStyle, padding: 10, display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        <div className=\"label-key\" style={{ marginBottom: 2 }}>VOICE</div>\n        <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>\n          {VOICES.map(v => (\n            <button key={v.value} onClick={() => setSession((p: any) => ({ ...p, wisdomVoice: v.value }))}\n              className={`preset-btn${session.wisdomVoice === v.value ? \" active\" : \"\"}`}\n              style={{ \"--active-color\": \"var(--accent-amber)\", flex: 1, padding: \"6px 6px\" } as React.CSSProperties}>\n              <span className=\"preset-name\" style={{ fontSize: 8 }}>{v.label}</span>\n            </button>\n          ))}\n        </div>\n        <div className=\"label-row\">\n          <span className=\"label-key\">INTERVAL</span>\n          <span className=\"label-val\" style={{ color: \"var(--accent-amber)\", fontSize: 10 }}>{session.wisdomIntervalMin}min</span>\n        </div>\n        <input type=\"range\" min={1} max={60} value={session.wisdomIntervalMin}\n          onChange={e => setSession((p: any) => ({ ...p, wisdomIntervalMin: Number(e.target.value) }))}\n          className=\"slider-thumb\" style={{ position: \"relative\", width: \"100%\" }} />\n      </div>\n\n      <button onClick={speakOne} style={{ ...cardStyle, padding: 8, cursor: \"pointer\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", gap: 6, color: \"var(--text-dim)\", fontSize: 9, fontWeight: 700, letterSpacing: \"0.06em\" }}>\n        <Icons.Speaker /> SPEAK ONE\n      </button>\n\n      {/* Quote library header */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n        <span className=\"label-key\" style={{ fontSize: 8 }}>QUOTES {quotes.filter(q => q.enabled).length}/{quotes.length}</span>\n        <button onClick={() => setAdding(true)} style={{ background: \"none\", border: \"none\", color: \"var(--accent-amber)\", cursor: \"pointer\", padding: 2 }}><Icons.Plus /></button>\n      </div>\n\n      {adding && (\n        <div style={{ ...cardStyle, padding: 8, display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          <textarea rows={2} placeholder=\"Quote…\" value={newQ.text} onChange={e => setNewQ(p => ({ ...p, text: e.target.value }))} style={{ resize: \"none\", fontSize: 10 }} />\n          <div style={{ display: \"flex\", gap: 4 }}>\n            <button onClick={addQuote} style={{ flex: 1, ...cardStyle, padding: 6, cursor: \"pointer\", color: \"var(--accent-amber)\", fontSize: 9, fontWeight: 700 }}>SAVE</button>\n            <button onClick={() => setAdding(false)} style={{ flex: 1, ...cardStyle, padding: 6, cursor: \"pointer\", color: \"var(--text-dim)\", fontSize: 9 }}>CANCEL</button>\n          </div>\n        </div>\n      )}\n\n      {/* Quote list — compact: just quote + enable toggle, no edit/delete */}\n      {loading ? (\n        <div style={{ fontSize: 8, color: \"var(--text-dim)\", textAlign: \"center\", padding: 8 }}>LOADING…</div>\n      ) : (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n          {quotes.map(q => (\n            <div key={q.id} style={{ ...cardStyle, padding: \"6px 8px\", opacity: q.enabled ? 1 : 0.45, display: \"flex\", alignItems: \"center\", gap: 6 }}>\n              <div style={{ flex: 1, fontSize: 9, color: \"var(--text)\", lineHeight: 1.4, fontStyle: \"italic\", minWidth: 0 }}>{q.text}</div>\n              <button onClick={() => toggleEnabled(q)}\n                style={{ background: \"none\", border: \"none\", fontFamily: \"inherit\", fontSize: 7, fontWeight: 700, cursor: \"pointer\", color: q.enabled ? \"var(--accent-green)\" : \"var(--text-dim)\", letterSpacing: \"0.06em\", flexShrink: 0 }}>\n                {q.enabled ? \"ON\" : \"OFF\"}\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[18,79,394],"971cd87e-1e98-11f1-9cfb-42dde27851f2","SessionTimelineView.tsx","e9480644-1e72-11f1-9e1e-42dde27851f2",["D",1773377614347],"import React, { useMemo } from \"react\";\n\nconst WAVE_HZ: Record<string, { start: number; end: number }> = {\n  delta:    { start: 2,  end: 4  },\n  theta:    { start: 5,  end: 7  },\n  alpha:    { start: 9,  end: 11 },\n  beta:     { start: 15, end: 20 },\n  high_beta:{ start: 25, end: 30 },\n};\n\ninterface Segment { id: string; label: string; brainwave: string; durationMin: number; baseFreq: number; }\n\ninterface Props {\n  segments: Segment[];\n  sessionLengthMin?: number; // total min (default from segments or 6)\n  tickSpeedMs?: number;     // for clock tick density\n  activeSegIdx?: number;\n  playing?: boolean;\n  clockOn?: boolean;       // show ticks with accent when clock enabled\n  elapsedSec?: number;     // current playback position for playhead\n  showPlayhead?: boolean;  // show playhead when playing\n}\n\nexport function SessionTimelineView({\n  segments,\n  sessionLengthMin,\n  tickSpeedMs = 1000,\n  activeSegIdx = 0,\n  playing = false,\n  clockOn = false,\n  elapsedSec = 0,\n  showPlayhead = false,\n}: Props) {\n  const totalMin = sessionLengthMin ?? (segments.length ? segments.reduce((s, seg) => s + seg.durationMin, 0) : 6);\n  const width = 380;\n  const height = 140;\n  const padding = { t: 24, r: 12, b: 20, l: 28 };\n  const plotW = width - padding.l - padding.r;\n  const plotH = height - padding.t - padding.b;\n\n  // Map minute to x: x = padding.l + (minute / totalMin) * plotW\n  const minToX = (m: number) => padding.l + (totalMin > 0 ? (m / totalMin) * plotW : 0);\n\n  // Time grid: vertical lines at each integer minute from 0 to floor(totalMin)\n  const maxMin = Math.max(1, Math.floor(totalMin));\n  const gridMinutes = Array.from({ length: maxMin + 1 }, (_, i) => i);\n\n  // Clock tick marks — all shown, positioned by time, bigger when clock on\n  const tickCount = Math.max(1, Math.floor((totalMin * 60 * 1000) / tickSpeedMs));\n  const ticks = useMemo(() => {\n    const n = tickCount;\n    return Array.from({ length: n }, (_, i) => {\n      const tMin = n > 1 ? (i / (n - 1)) * totalMin : 0;\n      const x = padding.l + (totalMin > 0 ? (tMin / totalMin) * plotW : 0);\n      const tickH = clockOn ? (i % 4 === 0 ? 14 : 8) : (i % 4 === 0 ? 10 : 6);\n      return { x, height: tickH };\n    });\n  }, [tickCount, totalMin, plotW, padding.l, clockOn]);\n\n  // Left (red) and Right (blue) freq curves over time\n  const { leftPath, rightPath } = useMemo(() => {\n    if (!segments.length) {\n      const cx = padding.l + plotW / 2;\n      const cy = padding.t + plotH / 2;\n      const amp = plotH * 0.35;\n      const pts = 60;\n      const left: string[] = [`M ${padding.l} ${cy}`];\n      const right: string[] = [`M ${padding.l} ${cy}`];\n      for (let i = 1; i <= pts; i++) {\n        const x = padding.l + (i / pts) * plotW;\n        const t = (i / pts) * totalMin;\n        const leftY = cy + Math.sin(t * 0.8) * amp * 0.7;\n        const rightY = cy + Math.sin(t * 2.2 + 0.5) * amp * 0.6;\n        left.push(`L ${x} ${leftY}`);\n        right.push(`L ${x} ${rightY}`);\n      }\n      return { leftPath: left.join(\" \"), rightPath: right.join(\" \") };\n    }\n\n    let elapsed = 0;\n    const leftPts: [number, number][] = [];\n    const rightPts: [number, number][] = [];\n\n    for (let i = 0; i < segments.length; i++) {\n      const seg = segments[i];\n      const hz = WAVE_HZ[seg.brainwave] ?? { start: 10, end: 10 };\n      const startX = padding.l + (elapsed / totalMin) * plotW;\n      const endX = padding.l + ((elapsed + seg.durationMin) / totalMin) * plotW;\n\n      const baseY = padding.t + plotH / 2;\n      const amp = plotH * 0.35;\n      const freqNorm = (f: number) => (f - 80) / 420;\n      const leftBase = seg.baseFreq;\n      const rightStart = seg.baseFreq + hz.start;\n      const rightEnd = seg.baseFreq + hz.end;\n\n      const steps = Math.max(2, Math.floor(seg.durationMin * 4));\n      for (let s = 0; s <= steps; s++) {\n        const t = s / steps;\n        const x = startX + (endX - startX) * t;\n        const leftVal = freqNorm(leftBase);\n        const rightVal = freqNorm(rightStart + (rightEnd - rightStart) * t);\n        const leftY = baseY - leftVal * amp * 0.6 - Math.sin(t * Math.PI * 2) * amp * 0.2;\n        const rightY = baseY - rightVal * amp * 0.6 + Math.sin(t * Math.PI * 3) * amp * 0.25;\n        leftPts.push([x, leftY]);\n        rightPts.push([x, rightY]);\n      }\n      elapsed += seg.durationMin;\n    }\n\n    const toPath = (pts: [number, number][]) => {\n      if (!pts.length) return \"\";\n      return pts.reduce((acc, [x, y], i) => (i === 0 ? `M ${x} ${y}` : `${acc} L ${x} ${y}`), \"\");\n    };\n    return { leftPath: toPath(leftPts), rightPath: toPath(rightPts) };\n  }, [segments, totalMin, plotW, plotH, padding]);\n\n  // Golden baseline\n  const baselineY = padding.t + plotH - 4;\n  const baselinePath = `M ${padding.l} ${baselineY} L ${padding.l + plotW - 8} ${baselineY} L ${padding.l + plotW} ${baselineY + 12}`;\n\n  // Playhead position (clamp to plot bounds)\n  const elapsedMin = elapsedSec / 60;\n  const playheadX = showPlayhead && totalMin > 0\n    ? Math.min(Math.max(padding.l, padding.l + (elapsedMin / totalMin) * plotW), padding.l + plotW)\n    : null;\n\n  return (\n    <div style={{ width: \"100%\" }}>\n      <div style={{ fontSize: 8, color: \"var(--text-dim)\", marginBottom: 6, letterSpacing: \"0.08em\" }}>\n        SESSION · {totalMin}min\n      </div>\n      <svg width=\"100%\" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio=\"xMidYMid meet\"\n        style={{ display: \"block\", background: \"var(--bg2)\", border: \"1px solid var(--border2)\", borderRadius: 8 }}>\n        {/* Grid divs — at each integer minute */}\n        {gridMinutes.map((m) => {\n          const x = minToX(m);\n          return (\n            <line key={m} x1={x} y1={padding.t} x2={x} y2={height - padding.b}\n              stroke=\"rgba(255,255,255,0.06)\" strokeWidth={1} />\n          );\n        })}\n        {/* Axis */}\n        <line x1={padding.l} y1={height - padding.b} x2={padding.l + plotW} y2={height - padding.b}\n          stroke=\"var(--border2)\" strokeWidth={1} />\n        <line x1={padding.l} y1={padding.t} x2={padding.l} y2={height - padding.b}\n          stroke=\"var(--border2)\" strokeWidth={1} />\n\n        {/* Clock tick marks — rail + ticks, full width, align with plot */}\n        <line x1={padding.l} y1={padding.t} x2={padding.l + plotW} y2={padding.t}\n          stroke={clockOn ? \"var(--accent-green)\" : \"var(--border2)\"} strokeWidth={clockOn ? 2 : 1} opacity={clockOn ? 0.95 : 0.5} />\n        {ticks.map((t, i) => (\n          <line key={i} x1={t.x} y1={padding.t} x2={t.x} y2={padding.t - t.height}\n            stroke={clockOn ? \"var(--accent-green)\" : \"var(--border2)\"} strokeWidth={clockOn ? 2 : 1.5}\n            opacity={clockOn ? 0.95 : 0.5} />\n        ))}\n\n        {/* Hz freq curves */}\n        <path d={leftPath} fill=\"none\" stroke=\"var(--accent-rose, #f85149)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity={0.9} />\n        <path d={rightPath} fill=\"none\" stroke=\"var(--accent-blue)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity={0.9} />\n\n        {/* Golden baseline */}\n        <path d={baselinePath} fill=\"none\" stroke=\"var(--accent-amber)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity={0.7} />\n\n        {/* Playhead — vertical line showing current position */}\n        {playheadX != null && (\n          <line x1={playheadX} y1={padding.t} x2={playheadX} y2={height - padding.b}\n            stroke=\"var(--accent-rose)\" strokeWidth={2} opacity={0.95} />\n        )}\n\n        {/* Time labels (min) — aligned with grid */}\n        {gridMinutes.map((m) => (\n          <text key={m} x={minToX(m)} y={height - 4} textAnchor=\"middle\" fontSize={7} fill=\"var(--text-dim)\" fontFamily=\"inherit\">\n            {m}m\n          </text>\n        ))}\n      </svg>\n      <div style={{ fontSize: 7, color: \"var(--text-dim)\", marginTop: 4, display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n        {showPlayhead && <span><span style={{ color: \"var(--accent-rose)\" }}>▎</span> playhead</span>}\n        <span><span style={{ color: \"var(--accent-green)\" }}>▬</span> ticks</span>\n        <span><span style={{ color: \"var(--accent-rose)\" }}>■</span> L Hz</span>\n        <span><span style={{ color: \"var(--accent-blue)\" }}>■</span> R Hz</span>\n        <span><span style={{ color: \"var(--accent-amber)\" }}>■</span> baseline</span>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,403],"96b06fb2-1e71-11f1-ada8-42dde27851f2","OceanPulseTab.tsx","93de9b62-1e6f-11f1-821a-42dde27851f2",49,["D",1773360863269],"import React from \"react\";\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function OceanPulseTab({ session, setSession }: Props) {\n  const bars = 20;\n  const dur = (60 / session.breathRate).toFixed(1);\n\n  return (\n    <div style={{ display:\"flex\", flexDirection:\"column\", gap:14 }}>\n      <div>\n        <div className=\"section-title\">Ocean Pulse</div>\n        <div className=\"section-sub\">BREATH-SYNCED AMPLITUDE MOD</div>\n      </div>\n\n      <div style={{ display:\"flex\", alignItems:\"center\", gap:8 }}>\n        <button onClick={() => setSession((p:any) => ({ ...p, oceanOn: !p.oceanOn }))}\n          style={{ background:\"none\", border:`1px solid ${session.oceanOn ? \"var(--accent-cyan)\" : \"var(--border2)\"}`, borderRadius:20, padding:\"4px 12px\", fontFamily:\"inherit\", fontSize:9, fontWeight:700, letterSpacing:\"0.08em\", color:session.oceanOn?\"var(--accent-cyan)\":\"var(--text-dim)\", cursor:\"pointer\" }}>\n          {session.oceanOn ? \"● ON\" : \"○ OFF\"}\n        </button>\n        <span style={{ fontSize:9, color:\"var(--text-dim)\" }}>layered with master play</span>\n      </div>\n\n      {/* Wave viz */}\n      <div className=\"card\" style={{ height:72, display:\"flex\", alignItems:\"flex-end\", justifyContent:\"center\", gap:2, padding:\"10px 14px\", overflow:\"hidden\" }}>\n        {Array.from({ length: bars }).map((_, i) => (\n          <div key={i} style={{\n            flex:1, borderRadius:2, minWidth:3,\n            background: session.oceanOn ? \"var(--accent-cyan)\" : \"var(--bg3)\",\n            opacity: session.oceanOn ? 0.7 : 0.2,\n            animation: session.oceanOn ? `oceanBar ${60/session.breathRate}s ease-in-out ${(i/bars)*(60/session.breathRate)}s infinite` : \"none\",\n            height: session.oceanOn ? undefined : 3,\n          }}/>\n        ))}\n        <style>{`@keyframes oceanBar{0%,100%{height:3px;opacity:.25}50%{height:50px;opacity:.85}}`}</style>\n      </div>\n\n      <div className=\"card\" style={{ display:\"flex\", flexDirection:\"column\", gap:16 }}>\n        <Slider label=\"BREATH RATE\" value={session.breathRate} min={2} max={12} accent=\"var(--accent-cyan)\"\n          onChange={(v:number) => setSession((p:any)=>({...p,breathRate:v}))} unit=\"bpm\"/>\n      </div>\n\n      <div style={{ fontSize:9, color:\"var(--text-dim)\", textAlign:\"center\", letterSpacing:\"0.06em\", lineHeight:1.8 }}>\n        WAVE PERIOD <span style={{ color:\"var(--accent-cyan)\" }}>{dur}s</span> · INHALE ↑ EXHALE ↓<br/>\n        <span style={{ opacity:0.5 }}>Brown noise amplitude-modulated at breath rate</span>\n      </div>\n    </div>\n  );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n  const pct = ((value-min)/(max-min))*100;\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color:accent }}>{value}<span style={{fontSize:8,marginLeft:2,opacity:0.6}}>{unit}</span></span>\n      </div>\n      <div className=\"slider-wrap\">\n        <div className=\"slider-track\"/>\n        <div className=\"slider-fill\" style={{ width:`${pct}%`, background:accent }}/>\n        <input type=\"range\" min={min} max={max} value={value} onChange={e=>onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,410],"e8cdb1aa-1e72-11f1-b559-42dde27851f2","NeumorphicSlider.tsx","701ac822-1e6f-11f1-a8bc-42dde27851f2",58,["D",1773361430584],"import React from \"react\";\n\ninterface Props {\n  label: string;\n  value: number;\n  min: number;\n  max: number;\n  onChange: (v: number) => void;\n  unit?: string;\n  step?: number;\n  accent?: string;\n}\n\nexport function NeumorphicSlider({ label, value, min, max, onChange, unit = \"\", step = 1, accent }: Props) {\n  const pct = ((value - min) / (max - min)) * 100;\n  const color = accent || \"var(--accent-blue)\";\n\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color }}>{value}<span style={{ fontSize: 9, marginLeft: 2, opacity: 0.7 }}>{unit}</span></span>\n      </div>\n      <div style={{ position: \"relative\", height: 20, display: \"flex\", alignItems: \"center\" }}>\n        {/* Track background */}\n        <div style={{\n          position: \"absolute\",\n          width: \"100%\",\n          height: 3,\n          borderRadius: 2,\n          background: \"var(--bg3)\",\n          border: \"1px solid var(--border)\",\n        }} />\n        {/* Fill */}\n        <div style={{\n          position: \"absolute\",\n          width: `${pct}%`,\n          height: 3,\n          borderRadius: 2,\n          background: `linear-gradient(to right, color-mix(in srgb, ${color} 60%, transparent), ${color})`,\n          pointerEvents: \"none\",\n        }} />\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          onChange={(e) => onChange(Number(e.target.value))}\n          className=\"slider-thumb\"\n          style={{\n            position: \"absolute\",\n            width: \"100%\",\n            zIndex: 2,\n            background: \"transparent\",\n            cursor: \"pointer\",\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n",[],[18,79,418],"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",[],[18,79,426],"a07cba8c-1e71-11f1-ada8-42dde27851f2","ClockTab.tsx","ce4e0364-1e6f-11f1-813d-42dde27851f2",50,["D",1773360879767],"import React from \"react\";\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function ClockTab({ session, setSession }: Props) {\n  const bpm = Math.round(60000 / session.tickSpeed);\n\n  return (\n    <div style={{ display:\"flex\", flexDirection:\"column\", gap:14 }}>\n      <div>\n        <div className=\"section-title\">Polyrhythms</div>\n        <div className=\"section-sub\">GENERATIVE TIMING ENGINE</div>\n      </div>\n\n      <div style={{ display:\"flex\", alignItems:\"center\", gap:8 }}>\n        <button onClick={() => setSession((p:any) => ({ ...p, clockOn: !p.clockOn }))}\n          style={{ background:\"none\", border:`1px solid ${session.clockOn ? \"var(--accent-green)\" : \"var(--border2)\"}`, borderRadius:20, padding:\"4px 12px\", fontFamily:\"inherit\", fontSize:9, fontWeight:700, letterSpacing:\"0.08em\", color:session.clockOn?\"var(--accent-green)\":\"var(--text-dim)\", cursor:\"pointer\" }}>\n          {session.clockOn ? \"● ON\" : \"○ OFF\"}\n        </button>\n        <span style={{ fontSize:9, color:\"var(--text-dim)\" }}>layered with master play</span>\n      </div>\n\n      {/* BPM display */}\n      <div style={{ textAlign:\"center\", padding:\"16px 0\" }}>\n        <div style={{ fontSize:52, fontWeight:700, color: session.clockOn ? \"var(--accent-green)\" : \"var(--text-dim)\", letterSpacing:\"-0.03em\", lineHeight:1 }}>\n          {bpm}\n        </div>\n        <div style={{ fontSize:9, color:\"var(--text-dim)\", letterSpacing:\"0.12em\", marginTop:4 }}>BPM</div>\n      </div>\n\n      <div className=\"card\" style={{ display:\"flex\", flexDirection:\"column\", gap:16 }}>\n        <Slider label=\"TICK SPEED\" value={session.tickSpeed} min={100} max={3000} accent=\"var(--accent-green)\"\n          onChange={(v:number) => setSession((p:any)=>({...p,tickSpeed:v}))} unit=\"ms\"/>\n        <Slider label=\"POLY CYCLE\" value={session.polySpeed} min={1} max={120} accent=\"var(--accent-green)\"\n          onChange={(v:number) => setSession((p:any)=>({...p,polySpeed:v}))} unit=\"s\"/>\n      </div>\n\n      {/* Rhythm grid visualization */}\n      <div className=\"card\" style={{ display:\"flex\", flexWrap:\"wrap\", gap:4, padding:12 }}>\n        {Array.from({length: 16}).map((_,i) => (\n          <div key={i} style={{\n            flex:\"1 1 10%\", aspectRatio:\"1\", borderRadius:3, minWidth:16,\n            background: i===0 ? \"var(--accent-green)\" : i%4===0 ? \"var(--bg3)\" : \"var(--bg)\",\n            border:`1px solid ${i%4===0?\"var(--border2)\":\"var(--border)\"}`,\n            opacity: session.clockOn ? 1 : 0.3,\n            transition:\"all 0.2s\",\n          }}/>\n        ))}\n      </div>\n\n      <div style={{ fontSize:9, color:\"var(--text-dim)\", textAlign:\"center\", letterSpacing:\"0.06em\", lineHeight:1.8 }}>\n        TICK <span style={{ color:\"var(--accent-green)\" }}>{session.tickSpeed}ms</span>\n         ·  POLY <span style={{ color:\"var(--accent-green)\" }}>{session.polySpeed}s</span>\n      </div>\n    </div>\n  );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n  const pct = ((value-min)/(max-min))*100;\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color:accent }}>{value}<span style={{fontSize:8,marginLeft:2,opacity:0.6}}>{unit}</span></span>\n      </div>\n      <div className=\"slider-wrap\">\n        <div className=\"slider-track\"/>\n        <div className=\"slider-fill\" style={{ width:`${pct}%`, background:accent }}/>\n        <input type=\"range\" min={min} max={max} value={value} onChange={e=>onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,434],"e8bfaa38-1e72-11f1-8d3f-42dde27851f2","BinauralTab.tsx","85f31190-1e6f-11f1-8d5a-42dde27851f2",57,["D",1773361430450],"import React from \"react\";\nimport { NeumorphicSlider } from \"https://esm.town/v/all/brain/frontend/components/NeumorphicSlider.tsx\";\n\nconst PRESETS = {\n  custom:     { name:\"CUSTOM\",   wave:\"—\",      baseFreq:200, beatFreq:10,  noise:\"none\"  as const, desc:null },\n  focus:      { name:\"FOCUS\",    wave:\"β MID\",  baseFreq:250, beatFreq:16,  noise:\"pink\"  as const, desc:\"Mid-Beta 16Hz — active attention.\" },\n  energy:     { name:\"ENERGY\",   wave:\"β HIGH\", baseFreq:200, beatFreq:25,  noise:\"none\"  as const, desc:\"High-Beta 25Hz — peak alertness.\" },\n  creativity: { name:\"CREATE\",   wave:\"θ\",      baseFreq:300, beatFreq:7,   noise:\"brown\" as const, desc:\"Theta 7Hz — open monitoring.\" },\n  meditation: { name:\"MEDITATE\", wave:\"θ LOW\",  baseFreq:150, beatFreq:5,   noise:\"none\"  as const, desc:\"Low Theta 5Hz — deep relaxation.\" },\n  sleep:      { name:\"SLEEP\",    wave:\"δ\",      baseFreq:100, beatFreq:2,   noise:\"brown\" as const, desc:\"Delta 2Hz — induce sleep.\" },\n} as const;\ntype PresetKey = keyof typeof PRESETS;\n\nconst ACCENT: Record<PresetKey, string> = {\n  custom:\"var(--text-dim)\", focus:\"var(--accent-blue)\", energy:\"var(--accent-amber)\",\n  creativity:\"var(--accent-violet)\", meditation:\"var(--accent-cyan)\", sleep:\"var(--accent-rose)\",\n};\n\ninterface Props { session: any; setSession: (fn: (p:any)=>any) => void; }\n\nexport function BinauralTab({ session, setSession }: Props) {\n  const [preset, setPreset] = React.useState<PresetKey>(\"custom\");\n\n  const applyPreset = (key: PresetKey) => {\n    setPreset(key);\n    if (key !== \"custom\") {\n      const p = PRESETS[key];\n      setSession((prev: any) => ({ ...prev, baseFreq: p.baseFreq, beatFreq: p.beatFreq }));\n    }\n  };\n\n  const acc = ACCENT[preset];\n  const pct = (v: number, min: number, max: number) => ((v-min)/(max-min))*100;\n\n  return (\n    <div style={{ display:\"flex\", flexDirection:\"column\", gap:14 }}>\n      <div>\n        <div className=\"section-title\">Binaural Beats</div>\n        <div className=\"section-sub\">ENTRAINMENT ENGINE · USE HEADPHONES</div>\n      </div>\n\n      {/* Module on/off */}\n      <div style={{ display:\"flex\", alignItems:\"center\", gap:8 }}>\n        <button onClick={() => setSession((p:any) => ({ ...p, binauralOn: !p.binauralOn }))}\n          style={{ background:\"none\", border:`1px solid ${session.binauralOn ? \"var(--accent-blue)\" : \"var(--border2)\"}`, borderRadius:20, padding:\"4px 12px\", fontFamily:\"inherit\", fontSize:9, fontWeight:700, letterSpacing:\"0.08em\", color:session.binauralOn?\"var(--accent-blue)\":\"var(--text-dim)\", cursor:\"pointer\" }}>\n          {session.binauralOn ? \"● ON\" : \"○ OFF\"}\n        </button>\n        <span style={{ fontSize:9, color:\"var(--text-dim)\" }}>module {session.binauralOn ? \"active\" : \"disabled\"} — play from bottom toolbar</span>\n      </div>\n\n      {/* Preset grid */}\n      <div className=\"preset-grid\">\n        {(Object.entries(PRESETS) as [PresetKey, any][]).map(([key, p]) => {\n          const a = ACCENT[key];\n          const active = preset === key;\n          return (\n            <button key={key} onClick={() => applyPreset(key)} className={`preset-btn${active?\" active\":\"\"}`}\n              style={{ borderColor: active ? a : undefined, color: active ? a : undefined }}>\n              <span className=\"preset-name\">{p.name}</span>\n              <span className=\"preset-hz\">{key===\"custom\" ? `${session.baseFreq}Hz` : `${p.baseFreq}Hz`}</span>\n              <span className=\"preset-wave\">{p.wave}</span>\n            </button>\n          );\n        })}\n      </div>\n\n      {preset !== \"custom\" && PRESETS[preset].desc && (\n        <div style={{ fontSize:10, color:acc, letterSpacing:\"0.04em\", lineHeight:1.5, padding:\"7px 11px\", background:\"var(--bg2)\", border:`1px solid color-mix(in srgb,${acc} 30%,transparent)`, borderRadius:8 }}>\n          {PRESETS[preset].desc}\n        </div>\n      )}\n\n      <div className=\"card\" style={{ display:\"flex\", flexDirection:\"column\", gap:16 }}>\n        <Slider label=\"BASE FREQ\" value={session.baseFreq} min={80} max={500} accent={acc}\n          onChange={v => { setPreset(\"custom\"); setSession((p:any)=>({...p,baseFreq:v})); }} unit=\"Hz\" />\n        <Slider label=\"BEAT FREQ\" value={session.beatFreq} min={1} max={40} accent={acc}\n          onChange={v => { setPreset(\"custom\"); setSession((p:any)=>({...p,beatFreq:v})); }} unit=\"Hz\" />\n      </div>\n\n      <div style={{ fontSize:9, color:\"var(--text-dim)\", letterSpacing:\"0.06em\", textAlign:\"center\", lineHeight:1.8 }}>\n        <span style={{ color:\"var(--accent-blue)\" }}>{session.baseFreq}Hz</span> L  / {\" \"}\n        <span style={{ color:acc }}>{session.baseFreq + session.beatFreq}Hz</span> R\n      </div>\n    </div>\n  );\n}\n\nfunction Slider({ label, value, min, max, onChange, unit, accent }: any) {\n  const pct = ((value-min)/(max-min))*100;\n  return (\n    <div>\n      <div className=\"label-row\">\n        <span className=\"label-key\">{label}</span>\n        <span className=\"label-val\" style={{ color:accent }}>{value}<span style={{fontSize:8,marginLeft:2,opacity:0.6}}>{unit}</span></span>\n      </div>\n      <div className=\"slider-wrap\">\n        <div className=\"slider-track\"/>\n        <div className=\"slider-fill\" style={{ width:`${pct}%`, background:`linear-gradient(to right,color-mix(in srgb,${accent} 50%,transparent),${accent})` }}/>\n        <input type=\"range\" min={min} max={max} value={value} onChange={e=>onChange(Number(e.target.value))} className=\"slider-thumb\"/>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,442],["D",1773359863484],[320,321,322,323,324,325,326,327,328],[18,79],["D",1773359861456],[319,329,330],[18],"5ab3c178-1e6f-11f1-a07b-42dde27851f2","index.ts","5ab3c24a-1e6f-11f1-a07b-42dde27851f2","403a69c8-1e6f-11f1-8481-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",[],[464,456],"backend","4870641c-1e6f-11f1-a07b-42dde27851f2","db.ts","4870650c-1e6f-11f1-a07b-42dde27851f2",["D",1773359873062],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDB() {\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS quotes (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      text TEXT NOT NULL,\n      author TEXT NOT NULL DEFAULT '',\n      enabled INTEGER NOT NULL DEFAULT 1,\n      created_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS timelines (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      name TEXT NOT NULL,\n      segments TEXT NOT NULL DEFAULT '[]',\n      created_at TEXT NOT NULL DEFAULT (datetime('now')),\n      updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n    )\n  `);\n\n  // Seed default quotes if empty\n  const existing = await sqlite.execute(`SELECT COUNT(*) as count FROM quotes`);\n  const count = (existing.rows[0] as any).count;\n  if (count === 0) {\n    const defaults = [\n      [\"The present moment always will have been.\", \"Stoic Axiom\"],\n      [\"Be still and know.\", \"Psalm 46:10\"],\n      [\"Wherever you are, be all there.\", \"Jim Elliot\"],\n      [\"The quieter you become, the more you can hear.\", \"Ram Dass\"],\n      [\"Respond; do not react. Listen; do not wait to speak.\", \"Rumi\"],\n      [\"In the middle of difficulty lies opportunity.\", \"Albert Einstein\"],\n      [\"What you seek is seeking you.\", \"Rumi\"],\n      [\"Do not go where the path may lead, go instead where there is no path.\", \"Emerson\"],\n    ];\n    for (const [text, author] of defaults) {\n      await sqlite.execute({\n        sql: `INSERT INTO quotes (text, author) VALUES (?, ?)`,\n        args: [text, author],\n      });\n    }\n  }\n}\n\nexport { sqlite };\n",[],[464,466],"e88653c8-1e72-11f1-9eb7-42dde27851f2","tts.ts","568eb44a-1e6f-11f1-8d5a-42dde27851f2","41751932-1e6f-11f1-9ea7-42dde27851f2",55,["D",1773361430125],2,"/**\n * Proxy to Groq Orpheus TTS API — keeps API key server-side.\n * POST /api/tts  { text: string, voice?: string }\n * Returns audio/wav stream with reverb applied via Web Audio on client.\n *\n * Model: canopylabs/orpheus-v1-english\n * Voices: autumn, diana, hannah, austin, daniel, troy\n */\nconst VALID_VOICES = new Set([\"autumn\", \"diana\", \"hannah\", \"austin\", \"daniel\", \"troy\"]);\n\nexport async function handleTTS(req: Request): Promise<Response> {\n  if (req.method !== \"POST\") {\n    return new Response(\"Method Not Allowed\", { status: 405 });\n  }\n\n  const GROQ_API_KEY = Deno.env.get(\"GROQ_API\");\n  if (!GROQ_API_KEY) {\n    return new Response(JSON.stringify({ error: \"GROQ_API not configured\" }), {\n      status: 500,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  let body: any;\n  try {\n    body = await req.json();\n  } catch {\n    return new Response(JSON.stringify({ error: \"Invalid JSON\" }), {\n      status: 400,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  const { text, voice: rawVoice = \"troy\" } = body;\n  const voice = VALID_VOICES.has(rawVoice) ? rawVoice : \"troy\";\n\n  if (!text?.trim()) {\n    return new Response(JSON.stringify({ error: \"text required\" }), {\n      status: 400,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  const groqRes = await fetch(\"https://api.groq.com/openai/v1/audio/speech\", {\n    method: \"POST\",\n    headers: {\n      \"Authorization\": `Bearer ${GROQ_API_KEY}`,\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify({\n      model: \"canopylabs/orpheus-v1-english\",\n      input: text,\n      voice,\n      response_format: \"wav\",\n    }),\n  });\n\n  if (!groqRes.ok) {\n    const err = await groqRes.text();\n    console.error(\"Groq TTS error:\", groqRes.status, err);\n    return new Response(JSON.stringify({ error: err }), {\n      status: groqRes.status,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n\n  return new Response(groqRes.body, {\n    headers: {\n      \"Content-Type\": \"audio/wav\",\n      \"Cache-Control\": \"no-cache\",\n    },\n  });\n}\n",[],[464,482,473],"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",[],[464,482,484],"4ce2a6d6-1e6f-11f1-8481-42dde27851f2","quotes.ts","4ce2a79e-1e6f-11f1-8481-42dde27851f2",["D",1773359880521],"import { initDB, sqlite } from \"../db.ts\";\n\nexport async function handleQuotes(req: Request): Promise<Response> {\n  await initDB();\n  const url = new URL(req.url);\n  const method = req.method;\n\n  // GET /api/quotes — list all\n  if (method === \"GET\") {\n    const rows = await sqlite.execute(`SELECT * FROM quotes ORDER BY id ASC`);\n    return json(rows.rows);\n  }\n\n  // POST /api/quotes — create\n  if (method === \"POST\") {\n    const body = await req.json();\n    const { text, author = \"\" } = body;\n    if (!text?.trim()) return json({ error: \"text required\" }, 400);\n    const result = await sqlite.execute({\n      sql: `INSERT INTO quotes (text, author) VALUES (?, ?) RETURNING *`,\n      args: [text.trim(), author.trim()],\n    });\n    return json(result.rows[0], 201);\n  }\n\n  // PATCH /api/quotes/:id — update\n  const idMatch = url.pathname.match(/\\/api\\/quotes\\/(\\d+)$/);\n  if (method === \"PATCH\" && idMatch) {\n    const id = Number(idMatch[1]);\n    const body = await req.json();\n    const fields: string[] = [];\n    const args: any[] = [];\n    if (body.text !== undefined) { fields.push(\"text = ?\"); args.push(body.text); }\n    if (body.author !== undefined) { fields.push(\"author = ?\"); args.push(body.author); }\n    if (body.enabled !== undefined) { fields.push(\"enabled = ?\"); args.push(body.enabled ? 1 : 0); }\n    if (!fields.length) return json({ error: \"no fields\" }, 400);\n    args.push(id);\n    const result = await sqlite.execute({\n      sql: `UPDATE quotes SET ${fields.join(\", \")} WHERE id = ? RETURNING *`,\n      args,\n    });\n    return json(result.rows[0]);\n  }\n\n  // DELETE /api/quotes/:id\n  if (method === \"DELETE\" && idMatch) {\n    const id = Number(idMatch[1]);\n    await sqlite.execute({ sql: `DELETE FROM quotes WHERE id = ?`, args: [id] });\n    return json({ ok: true });\n  }\n\n  return json({ error: \"not found\" }, 404);\n}\n\nfunction json(data: any, status = 200): Response {\n  return new Response(JSON.stringify(data), {\n    status,\n    headers: { \"Content-Type\": \"application/json\" },\n  });\n}\n",[],[464,482,492],"41751860-1e6f-11f1-9ea7-42dde27851f2",3,["D",1773359861327],[313,314,315],[464,482],"403a68f6-1e6f-11f1-8481-42dde27851f2",["D",1773359859285],[312,316,317],[464],["D",1773359647109],["D",1789527643940],{"_11":12,"_255":85},{"_11":12,"_251":-5,"_84":85,"_31":83,"_252":253,"_254":30},{"_53":242,"_13":16,"_47":50,"_243":206,"_244":-5,"_245":-5,"_246":-5,"_247":-5,"_248":-5,"_249":14,"_250":12},"ctx",{"_67":-5,"_274":545,"_546":547,"_548":549,"_550":30,"_551":30,"_552":30,"_553":24,"_554":-5,"_555":-7,"_556":-7,"_557":26,"_558":30,"_559":30,"_560":-5,"_561":30,"_562":30,"_563":30,"_564":-5},"ENV",{"_516":517,"_518":519,"_520":16,"_521":522,"_523":524,"_525":526,"_527":528,"_529":530,"_531":532,"_533":534,"_535":536,"_537":538,"_539":540,"_541":542,"_543":544},"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>

History · frontend