Timeline

SESSION BUILDER

\n\n {/* Flow presets — all layers, wisdom 1min */}\n

FLOW PRESETS · ALL LAYERS · WISDOM 1MIN

\n {FLOW_PRESETS.map((preset) => (\n applyFlowPreset(preset)}\n className=\"preset-btn\"\n style={{ textAlign: \"left\", padding: \"8px 10px\" }}>\n {preset.name}\n {preset.desc}\n \n ))}\n

\n\n {/* Session timeline view — grid, beats, Hz curves, clock, playhead */}\n \n\n {/* Timeline bar */}\n {current.segments.length > 0 && (\n

\n {current.segments.map((seg, i) => {\n const w = totalMin > 0 ? (seg.durationMin / totalMin) * 100 : 100 / current.segments.length;\n const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n const isActive = playing && i === activeSegIdx;\n return (\n

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

}\n

\n );\n })}\n

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

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

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

\n {current.segments.map((seg, i) => {\n const col = WAVE_COLORS[seg.brainwave] ?? \"var(--text-dim)\";\n const isActive = playing && i === activeSegIdx;\n return (\n

\n updateSeg(seg.id, { label: e.target.value })}\n style={{ flex: 1, fontSize: 11, fontWeight: 700, background: \"transparent\", border: \"none\", borderBottom: \"1px solid var(--border2)\", color: \"var(--text-bright)\", paddingBottom: 2, outline: \"none\", fontFamily: \"inherit\" }} />\n \n

WAVE

\n \n

MIN

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

BASE Hz

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

\n );\n })}\n

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

SAVED SESSIONS

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

\n \n \n

\n ))}\n

\n )}\n\n

\n TOTAL SESSION {totalMin}min\n

\n );\n}\n","deleted","label",[178,179,159],"frontend","components","permalink","https://www.val.town/x/all/brain/code/frontend/components/TimelineTab.tsx","extension","actionData","errors"]