diff --git a/ui (gen4)/css/experimenting.css b/ui (gen4)/css/experimenting.css
new file mode 100755
index 00000000..6ae62c82
--- /dev/null
+++ b/ui (gen4)/css/experimenting.css	
@@ -0,0 +1,214 @@
+
+body {
+	margin: 0;
+	/* this will prevent odd blur effects when blurring out specific 
+		elements... */
+	background: black;
+
+	/*font: OpenSans, sans-serif;*/
+}
+
+/* show image gid... */
+.visible-gid .image:after {
+	content: attr(gid);
+	display: block;
+	position: relative;
+	color: red;
+	margin: 10px;
+	width: 20px;
+	height: 20px;
+	text-align: center;
+	border: solid 2px red;
+	border-radius: 50%;
+	background: black;
+}
+
+
+/*
+.image.current {
+	border-color: red;
+}
+*/
+
+.shadow {
+	margin: 0px;
+	z-index: 4000;
+}
+.ui-bounds-indicators {
+	z-index: 5000;
+}
+
+/* basic animation... */
+.viewer:not(.no-transitions) {
+	-webkit-transition: background-color 0.8s ease;
+	-moz-transition: background-color 0.8s ease;
+	-ms-transition: background-color 0.8s ease;
+	-o-transition: background-color 0.8s ease;
+	transition: background-color 0.8s ease;
+}
+
+.viewer:not(.no-transitions) .ribbon-set:not(.no-transitions) {
+	-webkit-transition: all 0.1s linear, transform 0.1s linear;
+	-moz-transition: all 0.1s linear, transform 0.1s linear;
+	-ms-transition: all 0.1s linear, transform 0.1s linear;
+	-o-transition: all 0.1s linear, transform 0.1s linear;
+	transition: all 0.1s linear, transform 0.1s linear;
+}
+
+.viewer:not(.no-transitions) .ribbon:not(.no-transitions) {
+	-webkit-transition: all 0.1s ease-out;
+	-moz-transition: all 0.1s ease-out;
+	-ms-transition: all 0.1s ease-out;
+	-o-transition: all 0.1s ease-out;
+	transition: all 0.1s ease-out;
+}
+
+/* XXX not 100% sure about this...
+*/
+:not(.no-transitions) .current-marker:not(.no-transitions) {
+	-webkit-transition: transform 0.1s ease-out;
+	-moz-transition: transform 0.1s ease-out;
+	-ms-transition: transform 0.1s ease-out;
+	-o-transition: transform 0.1s ease-out;
+	transition: transform 0.1s ease-out;
+}
+
+/* XXX should this be !important */
+.no-transitions {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-ms-transition: none;
+	-o-transition: none;
+	transition: none;
+}
+
+/* XXX think of a way not to use !important */
+.single-image-mode .ribbon,
+.single-image-mode .ribbon-set {
+	-webkit-transition: none !important;
+	-moz-transition: none !important;
+	-ms-transition: none !important;
+	-o-transition: none !important;
+	transition: none !important;
+}
+
+
+/* TEST: this is mostly speed limited... */
+.ribbon {
+	box-shadow: 5px 5px 50px -5px rgba(0, 0, 0, 0.2); 
+
+	-webkit-transition: box-shadow 0.8s ease;
+	-moz-transition: box-shadow 0.8s ease;
+	-ms-transition: box-shadow 0.8s ease;
+	-o-transition: box-shadow 0.8s ease;
+	transition: box-shadow 0.8s ease;
+}
+.current.ribbon {
+	box-shadow: 5px 5px 60px -5px rgba(0, 0, 0, 0.3); 
+}
+
+.single-image-mode .ribbon {
+	box-shadow: none; 
+}
+
+
+/* Metadata viewer */
+.item-value-view .text:first-child,
+.browse-widget.metadata-view .list>div .text:first-child {
+	width: 50%;
+	font-weight: bold;
+}
+.item-value-view .text:nth-child(2),
+.browse-widget.metadata-view .list>div .text:nth-child(2) {
+	font-style: italic;
+
+	-moz-user-select: auto;
+	-webkit-user-select: auto;
+	-o-user-select: auto;
+	-ms-user-select: auto;
+	user-select: auto;
+
+	cursor: text;
+}
+
+
+/* External Editor List */
+.browse-widget.editor-list .list>div:first-child .text:after {
+	content: "(primary)";
+	margin-left: 5px;
+	opacity: 0.5;
+	font-style: italic;
+}
+/* XXX this is ugly -- use a class... */
+.browse-widget.editor-list .list>div:first-child .button:nth-child(4) {
+	opacity: 0.1;
+}
+.browse-widget.editor-list .list>div:nth-child(2):not(:last-child) .text:after {
+	content: "(secondary)";
+	margin-left: 5px;
+	opacity: 0.5;
+	font-style: italic;
+}
+/* XXX this is ugly -- use a class... */
+.browse-widget.editor-list .list>div:nth-child(2) .button:nth-child(3) {
+	opacity: 0.1;
+}
+
+/* slideshow interval list... */
+.browse-widget.tail-action .list>div:last-child {
+	margin-top: 0.2em;
+	border-top: solid 1px rgba(255,255,255, 0.2);
+}
+.browse-widget.tail-action .list>div:last-child .text {
+	font-style: italic;
+}
+.browse-widget.tail-action .list>div:last-child .button {
+	display: none;
+}
+
+
+/* DEBUG stuff... */
+.container-center {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 10px;
+	height: 10px;
+
+	border-top: solid 1px black;
+	border-left: solid 1px black;
+}
+.container-center:after {
+	content: "";
+	position: absolute;
+	top: -11px;
+	left: -11px;
+	width: 10px;
+	height: 10px;
+
+	border-top: none;
+	border-left: none;
+	border-bottom: solid 1px black;
+	border-right: solid 1px black;
+}
+.point {
+	position: absolute;
+	width: 4px;
+	height: 4px;
+	border: solid 1px blue;
+	margin-top: -2px;
+	margin-left: -2px;
+
+	background: yellow;
+
+	transition-origin: 50% 50%;
+
+	z-index: 9999;
+}
+.point {
+	-webkit-transition: all 0.2s linear;
+	-moz-transition: all 0.2s linear;
+	transition: all 0.2s linear;
+}
+/* DEBUG end */
+
diff --git a/ui (gen4)/features/cli.js b/ui (gen4)/features/cli.js
index 0cad746b..10e12d06 100755
--- a/ui (gen4)/features/cli.js	
+++ b/ui (gen4)/features/cli.js	
@@ -55,8 +55,12 @@ var CLIActions = actions.Actions({
 
 			return this.loadImages(path)
 				.then(function(){ 
+					that.saveIndex(path)
+
 					that.makePreviews('all')
+
 					//that.readAllMetadata()
+					//
 					that
 						.sortImages()
 						// XXX for some reason this is not running from cli
@@ -87,7 +91,7 @@ module.CLI = core.ImageGridFeatures.Feature({
 				var that = this
 				// get the arguments...
 				if(this.runtime == 'nw'){
-					var argv = requirejs('nw.gui').App.argv
+					var argv = nw.App.argv
 
 					// XXX appears to have a stray '--help' lodged in 
 					// 		all the time...
diff --git a/ui (gen4)/features/filesystem.js b/ui (gen4)/features/filesystem.js
index 402cb850..aeb4da16 100755
--- a/ui (gen4)/features/filesystem.js	
+++ b/ui (gen4)/features/filesystem.js	
@@ -14,7 +14,8 @@ if(typeof(process) != 'undefined'){
 	var fse = requirejs('fs-extra')
 	var pathlib = requirejs('path')
 	var glob = requirejs('glob')
-	var file = requirejs('./file')
+
+	var file = require('file')
 }
 
 var data = require('data')
diff --git a/ui (gen4)/features/sharp.js b/ui (gen4)/features/sharp.js
index cca5fae3..1e55da33 100755
--- a/ui (gen4)/features/sharp.js	
+++ b/ui (gen4)/features/sharp.js	
@@ -26,7 +26,8 @@ if(typeof(process) != 'undefined'){
 	var fse = requirejs('fs-extra')
 	var pathlib = requirejs('path')
 	var glob = requirejs('glob')
-	var file = requirejs('./file')
+
+	var file = require('file')
 }
 
 
@@ -38,6 +39,7 @@ if(typeof(process) != 'undefined'){
 }
 
 
+
 /*********************************************************************/
 
 var SharpActions = actions.Actions({
diff --git a/ui (gen4)/file.js b/ui (gen4)/file.js
index 4bd23dde..36ca8925 100755
--- a/ui (gen4)/file.js	
+++ b/ui (gen4)/file.js	
@@ -4,24 +4,24 @@
 *
 **********************************************************************/
 
-var pathlib = require('path')
-var events = require('events')
-
-var fse = require('fs-extra')
-var glob = require('glob')
-
-// XXX seems that we need different buids of this for use with node and nw...
-// XXX BUG: nw-gyp does not support msvs2015...
-//var sharp = require('sharp') 
-
-var guaranteeEvents = require('guarantee-events')
-
-
 define(function(require){ var module = {}
 
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
+if(typeof(process) != 'undefined'){
+	var pathlib = requirejs('path')
+	var events = requirejs('events')
+
+	var fse = requirejs('fs-extra')
+	var glob = requirejs('glob')
+
+	var guaranteeEvents = requirejs('guarantee-events')
+
+} else {
+	return module
+}
+
 var data = require('data')
 var images = require('images')
 
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 737539f9..b08fa584 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -13,225 +13,9 @@
 
 <link rel="stylesheet" href="css/loader.css">
 
-<!-- XXX remove before use... -->
-<style>
+<link rel="stylesheet" href="css/experimenting.css">
 
 
-body {
-	margin: 0;
-	/* this will prevent odd blur effects when blurring out specific 
-		elements... */
-	background: black;
-
-	/*font: OpenSans, sans-serif;*/
-}
-
-/* show image gid... */
-.visible-gid .image:after {
-	content: attr(gid);
-	display: block;
-	position: relative;
-	color: red;
-	margin: 10px;
-	width: 20px;
-	height: 20px;
-	text-align: center;
-	border: solid 2px red;
-	border-radius: 50%;
-	background: black;
-}
-
-
-/*
-.image.current {
-	border-color: red;
-}
-*/
-
-.shadow {
-	margin: 0px;
-	z-index: 4000;
-}
-.ui-bounds-indicators {
-	z-index: 5000;
-}
-
-/* basic animation... */
-.viewer:not(.no-transitions) {
-	-webkit-transition: background-color 0.8s ease;
-	-moz-transition: background-color 0.8s ease;
-	-ms-transition: background-color 0.8s ease;
-	-o-transition: background-color 0.8s ease;
-	transition: background-color 0.8s ease;
-}
-
-.viewer:not(.no-transitions) .ribbon-set:not(.no-transitions) {
-	-webkit-transition: all 0.1s linear, transform 0.1s linear;
-	-moz-transition: all 0.1s linear, transform 0.1s linear;
-	-ms-transition: all 0.1s linear, transform 0.1s linear;
-	-o-transition: all 0.1s linear, transform 0.1s linear;
-	transition: all 0.1s linear, transform 0.1s linear;
-}
-
-.viewer:not(.no-transitions) .ribbon:not(.no-transitions) {
-	-webkit-transition: all 0.1s ease-out;
-	-moz-transition: all 0.1s ease-out;
-	-ms-transition: all 0.1s ease-out;
-	-o-transition: all 0.1s ease-out;
-	transition: all 0.1s ease-out;
-}
-
-/* XXX not 100% sure about this...
-*/
-:not(.no-transitions) .current-marker:not(.no-transitions) {
-	-webkit-transition: transform 0.1s ease-out;
-	-moz-transition: transform 0.1s ease-out;
-	-ms-transition: transform 0.1s ease-out;
-	-o-transition: transform 0.1s ease-out;
-	transition: transform 0.1s ease-out;
-}
-
-/* XXX should this be !important */
-.no-transitions {
-	-webkit-transition: none;
-	-moz-transition: none;
-	-ms-transition: none;
-	-o-transition: none;
-	transition: none;
-}
-
-/* XXX think of a way not to use !important */
-.single-image-mode .ribbon,
-.single-image-mode .ribbon-set {
-	-webkit-transition: none !important;
-	-moz-transition: none !important;
-	-ms-transition: none !important;
-	-o-transition: none !important;
-	transition: none !important;
-}
-
-
-/* TEST: this is mostly speed limited... */
-.ribbon {
-	box-shadow: 5px 5px 50px -5px rgba(0, 0, 0, 0.2); 
-
-	-webkit-transition: box-shadow 0.8s ease;
-	-moz-transition: box-shadow 0.8s ease;
-	-ms-transition: box-shadow 0.8s ease;
-	-o-transition: box-shadow 0.8s ease;
-	transition: box-shadow 0.8s ease;
-}
-.current.ribbon {
-	box-shadow: 5px 5px 60px -5px rgba(0, 0, 0, 0.3); 
-}
-
-.single-image-mode .ribbon {
-	box-shadow: none; 
-}
-
-
-/* Metadata viewer */
-.item-value-view .text:first-child,
-.browse-widget.metadata-view .list>div .text:first-child {
-	width: 50%;
-	font-weight: bold;
-}
-.item-value-view .text:nth-child(2),
-.browse-widget.metadata-view .list>div .text:nth-child(2) {
-	font-style: italic;
-
-	-moz-user-select: auto;
-	-webkit-user-select: auto;
-	-o-user-select: auto;
-	-ms-user-select: auto;
-	user-select: auto;
-
-	cursor: text;
-}
-
-
-/* External Editor List */
-.browse-widget.editor-list .list>div:first-child .text:after {
-	content: "(primary)";
-	margin-left: 5px;
-	opacity: 0.5;
-	font-style: italic;
-}
-/* XXX this is ugly -- use a class... */
-.browse-widget.editor-list .list>div:first-child .button:nth-child(4) {
-	opacity: 0.1;
-}
-.browse-widget.editor-list .list>div:nth-child(2):not(:last-child) .text:after {
-	content: "(secondary)";
-	margin-left: 5px;
-	opacity: 0.5;
-	font-style: italic;
-}
-/* XXX this is ugly -- use a class... */
-.browse-widget.editor-list .list>div:nth-child(2) .button:nth-child(3) {
-	opacity: 0.1;
-}
-
-/* slideshow interval list... */
-.browse-widget.tail-action .list>div:last-child {
-	margin-top: 0.2em;
-	border-top: solid 1px rgba(255,255,255, 0.2);
-}
-.browse-widget.tail-action .list>div:last-child .text {
-	font-style: italic;
-}
-.browse-widget.tail-action .list>div:last-child .button {
-	display: none;
-}
-
-
-/* DEBUG stuff... */
-.container-center {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 10px;
-	height: 10px;
-
-	border-top: solid 1px black;
-	border-left: solid 1px black;
-}
-.container-center:after {
-	content: "";
-	position: absolute;
-	top: -11px;
-	left: -11px;
-	width: 10px;
-	height: 10px;
-
-	border-top: none;
-	border-left: none;
-	border-bottom: solid 1px black;
-	border-right: solid 1px black;
-}
-.point {
-	position: absolute;
-	width: 4px;
-	height: 4px;
-	border: solid 1px blue;
-	margin-top: -2px;
-	margin-left: -2px;
-
-	background: yellow;
-
-	transition-origin: 50% 50%;
-
-	z-index: 9999;
-}
-.point {
-	-webkit-transition: all 0.2s linear;
-	-moz-transition: all 0.2s linear;
-	transition: all 0.2s linear;
-}
-/* DEBUG end */
-
-</style>
-
 <script>
 if(window.require && window.nw){
 	window.__devtools_failsafe = setTimeout(function(){
diff --git a/ui (gen4)/lib/widget/browse-walk.js b/ui (gen4)/lib/widget/browse-walk.js
index fb8a0f90..0cff9920 100755
--- a/ui (gen4)/lib/widget/browse-walk.js	
+++ b/ui (gen4)/lib/widget/browse-walk.js	
@@ -4,20 +4,16 @@
 *
 **********************************************************************/
 
-if(typeof(process) != 'undefined'){
-	var os = require('os')
-	var fs = require('fs')
-	var path = require('path')
-	var glob = require('glob')
-	var guaranteeEvents = require('guarantee-events')
-}
-
-
 define(function(require){ var module = {}
 
-// XXX HACK...
-// 		...for some reason this gets loaded in browser...
-if(typeof(process) == 'undefined'){
+if(typeof(process) != 'undefined'){
+	var os = requirejs('os')
+	var fs = requirejs('fs')
+	var path = requirejs('path')
+	var glob = requirejs('glob')
+	var guaranteeEvents = requirejs('guarantee-events')
+
+} else {
 	return module
 }
 
diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js
index 3710af25..81ced65f 100755
--- a/ui (gen4)/ui.js	
+++ b/ui (gen4)/ui.js	
@@ -19,29 +19,24 @@ if((typeof(process) != 'undefined' ? process : {}).__nwjs){
 // Setup requirejs if we are in node/nw...
 //
 // NOTE: no need to do this in browser...
+//
+// XXX this will create a second requirejs instance with node 
+// 		compatibility...
+// 		...would be nice if we could avoid this...
+// XXX setting nodeRequire on existing requirejs will change how 
+// 		everything is loaded...
 if(typeof(process) != 'undefined'){
-
-	var requirejs = require('requirejs')
-
-	global.requirejs = requirejs
-	if(typeof(window) != 'undefined'){
-		window.requirejs = requirejs
-	}
-
-	requirejs.config({
-		nodeRequire: require,
-		//baseUrl: __dirname,
-
-		// XXX this does not work on direct filesystem access...
-		//urlArgs: 'bust='+Date.now(),
-	})
+	var requirejs = 
+	global.requirejs = 
+	window.requirejs = 
+		require('requirejs')
 }
 
 
-
 /*********************************************************************/
 
 define(function(require){ var module = {}
+//requirejs(['viewer'], function(viewer){
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
@@ -70,6 +65,12 @@ $(function(){
 
 				// XXX this is not for production...
 				'experiments',
+
+				// XXX BUG: disabling features on this level does not 
+				// 		work, yet works deeper down...
+				// 			Example:
+				// 				'-ui' // will throw an error:
+				// 					  //	Feature "-ui" not loaded...
 			])
 
 
@@ -120,3 +121,4 @@ $(function(){
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */
 return module })
+//})