66 files changed, 6115 insertions, 297 deletions

diff --git a/css/ninja.css b/css/ninja.css
index ba434f42..5a25cc84 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; }
 
-#bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; }
+#bottomPanelContainer { background: transparent; height: 150px; min-height: 80px; max-height: 50%; overflow: auto; }
 
 .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; }
 
@@ -236,7 +236,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #toolPropertiesPanel { height: 32px; margin: 0px; }
 
-#timelinePanel { height: 116px; }
+#timelinePanel { height: 100%; }
 
 .treeComponent { -webkit-user-select: none; font-size: 11px; margin-left: 20px; cursor: default; color: white; }
 
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
new file mode 100644
index 00000000..1d0ad776
--- /dev/null
+++ b/js/components/editable.reel/editable.js
@@ -0,0 +1,250 @@
+/* ComputedStyleSubPanel.js */
+var Montage   = require("montage").Montage,
+    Component = require("montage/ui/component").Component;
+
+
+/*
+
+EDITABLE - Methods
+- startEdit
+- stopEdit
+- value
+- 
+- _suggest
+- _suggestNext
+- _suggestPrev
+- _clearSuggest
+- _accept
+- _revert
+- _setCaret
+
+*/
+
+
+exports.Editable = Montage.create(Component, {
+    hasTemplate: { value: false },
+
+    _element : { value : null },
+    element : {
+        get : function() {
+            return this._element;
+        },
+        set : function(el) {
+            this._element = el;
+            this._element.addEventListener('keydown', this, false);
+            this._element.addEventListener('input', this, false);
+            
+            if(this.startOnEvent) {
+                this._element.addEventListener(this.startOnEvent, this, false);
+            }
+            
+        }
+    },
+    _readOnly : {
+        value: false
+    },
+    readOnly : {
+        get : function() { return this._readOnly; },
+        set : function(makeReadOnly) {
+            var action = makeReadOnly ? 'add' : 'remove';
+            
+            this._element.classList[action](this.readOnlyClass);
+            
+            if(this.isEditable) {
+                this.stop();
+            }
+            this._readOnly = makeReadOnly;
+        }
+    },
+    _isEditable : {
+        value : false
+    },
+    isEditable : {
+        get : function() {
+            return this._isEditable;
+        },
+        set: function(makeEditable) {
+            if(this._readOnly && makeEditable) { return false; }
+            this._isEditable = makeEditable;
+        }
+    },
+    _isDirty : {
+        value: false
+    },
+    isDirty : {
+        get : function() {
+            return this._isDirty;
+        },
+        set : function(setDirty) {
+            if(setDirty) {
+                this._isDirty = true;
+                this._sendEvent('dirty');
+            } else {
+                this._isDirty = false;
+            }
+        }
+    },
+    value : {
+        get: function() {
+            return this._element.textContent;
+        },
+        set: function(str) {
+            this._element.textContent = str;
+        }
+    },
+
+    ///// Pre Edit Value
+    ///// Value stored when editing starts
+    ///// Useful for reverting to previous value
+    
+    _preEditValue : {
+        value : null
+    },
+    start : {
+        value: function() {
+            if(!this._readOnly) {
+                this._isEditable = this._element.contentEditable = true;
+                this._element.classList.add(this.editingClass);
+                
+                ///// Save the preEditValue
+                this._preEditValue = this.value;
+                
+                if(this.selectOnStart) {
+