Add initial panel API.

It can only add things to the left right now.

src/panel-element.coffee

@@ -0,0 +1,17 @@
+{CompositeDisposable} = require 'event-kit'
+
+class PanelElement extends HTMLElement
+  createdCallback: ->
+    @subscriptions = new CompositeDisposable
+
+  getModel: -> @model
+
+  setModel: (@model) ->
+    @appendChild(@model.getView())
+    @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
+
+  destroyed: ->
+    @subscriptions.dispose()
+    @parentNode?.removeChild(this)
+
+module.exports = PanelElement = document.registerElement 'atom-panel', prototype: PanelElement.prototype

src/panel.coffee

@@ -0,0 +1,26 @@
+{Emitter} = require 'event-kit'
+
+# Public:
+module.exports =
+class Panel
+  constructor: ({@viewRegistry, @item, @orientation}) ->
+    @emitter = new Emitter
+
+  destroy: ->
+    @emitter.emit 'did-destroy', this
+
+  getView: -> @viewRegistry.getView(@item)
+
+  getOrientation: -> @orientation
+
+  ###
+  Section: Event Subscription
+  ###
+
+  # Public: Invoke the given callback when the pane is destroyed.
+  #
+  # * `callback` {Function} to be called when the pane is destroyed.
+  #
+  # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
+  onDidDestroy: (callback) ->
+    @emitter.on 'did-destroy', callback

src/workspace-element.coffee

@@ -65,6 +65,8 @@ class WorkspaceElement extends HTMLElement
     window.addEventListener 'focus', handleWindowFocus
     @subscriptions.add(new Disposable -> window.removeEventListener 'focus', handleWindowFocus)
 
+    @subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
+
     @__spacePenView.setModel(@model)
 
   setTextEditorFontSize: (fontSize) ->
@@ -90,6 +92,13 @@ class WorkspaceElement extends HTMLElement
 
   focusPaneViewOnRight: -> @paneContainer.focusPaneViewOnRight()
 
+  panelAdded: (panel) ->
+    panelView = @model.getView(panel)
+
+    switch panel.getOrientation()
+      when 'left'
+        @horizontalAxis.insertBefore(panelView, @verticalAxis)
+
 atom.commands.add 'atom-workspace',
   'window:increase-font-size': -> @getModel().increaseFontSize()
   'window:decrease-font-size': -> @getModel().decreaseFontSize()

src/workspace.coffee

@@ -10,6 +10,8 @@ Grim = require 'grim'
 TextEditor = require './text-editor'
 PaneContainer = require './pane-container'
 Pane = require './pane'
+Panel = require './panel'
+PanelElement = require './panel-element'
 ViewRegistry = require './view-registry'
 WorkspaceElement = require './workspace-element'
 
@@ -62,6 +64,10 @@ class Workspace extends Model
       modelConstructor: Workspace
       viewConstructor: WorkspaceElement
 
+    @addViewProvider
+      modelConstructor: Panel
+      viewConstructor: PanelElement
+
   # Called by the Serializable mixin during deserialization
   deserializeParams: (params) ->
     for packageName in params.packagesWithActiveGrammars ? []
@@ -277,6 +283,9 @@ class Workspace extends Model
     @onDidAddPaneItem ({item, pane, index}) ->
       callback({textEditor: item, pane, index}) if item instanceof TextEditor
 
+  onDidAddPanel: (callback) ->
+    @emitter.on 'did-add-panel', callback
+
   eachEditor: (callback) ->
     deprecate("Use Workspace::observeTextEditors instead")
 
@@ -659,3 +668,12 @@ class Workspace extends Model
   # added provider.
   addViewProvider: (providerSpec) ->
     @viewRegistry.addViewProvider(providerSpec)
+
+  ###
+  Section: Panels
+  ###
+
+  addLeftPanel: (options) ->
+    panel = new Panel(_.extend(options, {@viewRegistry, orientation: 'left'}))
+    @emitter.emit('did-add-panel', panel)
+    panel