Root panel works as a component.

assets/css/library.css.sass

@@ -32,12 +32,15 @@
   .browser
     position: absolute
     height: 100%
+    width: 100%
     @include transition(left 0.25s ease-in-out)
+    ul, ol
+      width: 100%
     ul.root, ol.artists, ol.albums
       @extend .list
     ol.songs
       @extend .song-list
-    div
+    panel
       position: absolute
       width: $interface-width
       height: 100%

assets/js/components/panel.js

@@ -0,0 +1,39 @@
+can.Component.extend({
+
+  init: function() {
+    console.log('Initializing');
+  },
+
+  tag: 'panel',
+
+  template: can.view('views/panel.mustache'),
+
+  scope: {
+    show: '@',
+    artist: '@',
+    album: '@',
+    title: function() {
+      if (this.show == 'root')
+        return 'Library';
+    },
+    fetchItems: {
+      root: new can.Map,
+      artists: Artist.findAll({}),
+      albums: Album.findAll({ artist: this.artist }),
+      songs: Song.findAll({ artist: this.artist, album: this.album })
+    }
+  },
+
+  events: {
+    inserted: function() {
+      console.log('Panel inserted.');
+    }
+  },
+
+  helpers: {
+    renderItems: function() {
+      return can.view.render('views/library/' + this.show, {});
+    }
+  }
+
+});

assets/js/controls/library.js

@@ -4,7 +4,7 @@ var Library = can.Control.extend({
     this.element = element;
     this.browser = new can.Model({ title: 'Library', currentPane: 0 });
     element.html(
-      can.view('views/library.ejs', { browser: this.browser })
+      can.view('views/library.mustache', { browser: this.browser })
     );
     var rootControl = new Pane('#library .root', { show: 'root' });
     this.panes = new can.List([rootControl]);

assets/js/libs/can.ejs.js

@@ -2,7 +2,7 @@
  * CanJS - 2.0.3
  * http://canjs.us/
  * Copyright (c) 2013 Bitovi
- * Tue, 26 Nov 2013 18:21:40 GMT
+ * Thu, 19 Dec 2013 10:56:42 GMT
  * Licensed MIT
  * Includes: can/view/ejs
  * Download from: http://canjs.com

assets/js/mpd-client.js

@@ -1,10 +1,11 @@
 //= require ./libs/jquery-2.0.3.min
-//= require ./libs/can.jquery.min.js
+//= require ./libs/can.jquery.js
 //= require ./libs/can.ejs.js
 
 //= require ./routes.js
 //= require_tree ./models/
 //= require_tree ./helpers/
 //= require_tree ./controls/
+//= require_tree ./components/
 //= require_tree ./constructs/
 //= require ./application.js

public/views/library.ejs

@@ -10,6 +10,6 @@
      data-current-pane="<%= browser.attr('currentPane') %>"
      style="left: -<%= browser.attr('currentPane') * 20 %>em;">
 
-  <div class="root" style="left: 0;"></div>
+  <panel show="root" style="left: 0;"></panel>
 
 </div>

public/views/library.mustache

@@ -0,0 +1,5 @@
+<div class="browser">
+
+  <panel show="root" style="left: 0;"></panel>
+
+</div>

public/views/library/root.mustache

@@ -0,0 +1,5 @@
+<ul class="root">
+  <li>{{can.route.link('Artists', { page: 'library', show: 'artists', pane: pane + 1 })}}</li>
+  <li>{{can.route.link('Albums', { page: 'library', show: 'albums', pane: pane + 1 })}}</li>
+  <li>{{can.route.link('Songs', { page: 'library', show: 'songs', pane: pane + 1 })}}</li>
+</ul>

public/views/panel.mustache

@@ -0,0 +1,6 @@
+<header>
+  <a class="close" href="#!">Close</a>
+  <h1>{{title}}</h1>
+</header>
+
+{{{renderItems}}}