22 files changed, 670 insertions, 20 deletions

diff --git a/.gitignore b/.gitignore
index 6c288e8c..40248468 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,9 +8,6 @@ images/treeControl/Thumbs.db
 .DS_Store
 .project
 
-_scss/compass_app_log.txt
-_scss/.sass-cache
-
 js/panels/Color/colorpanelpopup.reel/.sass-cache/2fbca323ccf38cf180e7675ba0d8d3e07adeffea/ColorPanelPopup.scssc
 js/panels/Color/colorpanelpopup.reel/compass_app_log.txt
 js/panels/Color/colorpanelbase.reel/compass_app_log.txt
@@ -21,6 +18,6 @@ js/components/gradientpicker.reel/.sass-cache/6f8390f69a31f1a976968b9c18d0824d78
 cloud/
 
 /.idea/scopes/scope_settings.xml
-_scss/imports/scss/_Stage.scss
 compass_app_log.txt
-js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cloudpopup.scssc
\ No newline at end of file
+js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cloudpopup.scssc
+scss/.sass-cache/
\ No newline at end of file
diff --git a/css/ninja.css b/css/ninja.css
index 824a675a..96ae6caf 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -118,9 +118,9 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #sceneBar { height: 70px; background-color: #474747; }
 
-#mainContainer #rulerTop { background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; display:none;}
+#mainContainer #rulerTop { background: gray; height: 15px; margin-bottom: 0px; }
 
-#rulerLeft { background: url("../images/temp/ruler-left.png"); width: 16px; display:none;}
+#rulerLeft { background: gray; width: 16px; }
 
 #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; }
 
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index a3a9350e..340233c7 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -26,7 +26,6 @@
     cursor: pointer;
     font-weight: bold;
     padding: 3px 0 4px;
-    text-shadow: 1px 1px 1px #000;
 }
 
 /* First Level */
diff --git a/js/data/menu-data.js b/js/data/menu-data.js
index 3a065958..6503e776 100755
--- a/js/data/menu-data.js
+++ b/js/data/menu-data.js
@@ -352,6 +352,15 @@ exports.MenuData = Montage.create( Montage, {
                         }
                     },
                     {
+                        "displayText" : "Presets",
+                        "hasSubMenu" : false,
+                        "enabled": true,
+                        "checked": {
+                            "value": true,
+                            "boundProperty": "PresetsPanel"
+                        }
+                    },
+                    {
                         "displayText" : "Code",
                         "hasSubMenu" : false,
                         "enabled": true
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 62f7e522..a2283d46 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -90,7 +90,7 @@ exports.CloudPopup = Montage.create(Component, {
         value: function() {
                 if(this._os === 'mac') {
                         location.href = '/ninja_localcloud_for_mac.zip';
-                } else if (this._os === 'win') {
+                } else if (this._os === 'windows') {
                         location.href = '/ninja_localcloud_for_windows.zip';
                 } else {
                         alert('Your operating system is not supported by the Ninja Local Cloud App.');
diff --git a/js/models/app-model.js b/js/models/app-model.js
index 57394bb9..bfa1871c 100755
--- a/js/models/app-model.js
+++ b/js/models/app-model.js
@@ -325,6 +325,19 @@ exports.AppModel = Montage.create(Component, {
         }
     },
 
+    _presetsPanel: {
+        value: true
+    },
+
+    PresetsPanel: {
+        get: function() {
+            return this._presetsPanel;
+        },
+        set: function(value) {
+            this._presetsPanel = value;
+        }
+    },
+
     _materials: {
         value: []
     },
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 66333cc0..b8223471 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -15,6 +15,7 @@ var CSSPanel        = require("js/panels/CSSPanel/CSSPanel").CSSPanel;
 var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel;
 var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
 var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
+var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
 
 exports.PanelContainer = Montage.create(Component, {
     lastOffset: {
@@ -44,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel']
+        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
     },
 
     panelOrder: {
@@ -99,6 +100,7 @@ exports.PanelContainer = Montage.create(Component, {
             this.addEventListener("change@appModel.ComponentsPanel", this, false);
             this.addEventListener("change@appModel.CSSPanel", this, false);
             this.addEventListener("change@appModel.MaterialsPanel", this, false);
+            this.addEventListener("change@appModel.PresetsPanel", this, false);
         }
     },
 
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
new file mode 100644
index 00000000..08e1d53b
--- /dev/null
+++ b/js/panels/presets/content.reel/content.css
@@ -0,0 +1,52 @@
+.presetsPanel {
+    display: -webkit-box;
+    text-shadow: 1px 1px 1px #000;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.presetsPanel .treeRoot {
+    margin: 0 8px;
+}
+.tab-bar {
+    -webkit-box-flex: 0;
+    background-color: #282828;
+    color: #FFF;
+    display: -webkit-box;
+    font-size: 12px;
+    -webkit-box-orient: horizontal;
+}
+
+.tab-bar div {
+    -webkit-box-flex: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    background-color: #474747;
+    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px);
+    border-top: 1px solid rgb(100, 100, 100);
+    border-left: 1px solid rgba(100, 100, 100, 0.3);
+    border-right: 1px solid rgba(100, 100, 100, 0.3);
+    padding: 4px 9px;
+    cursor: pointer;
+    opacity: 0.6;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    position: relative;
+    z-index: 999;
+}
+.tab-bar div.active-tab {
+    background-image: none;
+    box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2);
+    position: relative;
+    opacity: 1;
+    text-overflow: clip;
+    z-index: 1001;
+}
+
+.librarySlot {
+    -webkit-box-flex: 1;
+    overflow: auto;