diff --git a/ui (gen4)/features/_ui-render.js b/ui (gen4)/features/_ui-render.js
new file mode 100755
index 00000000..aefb0d96
--- /dev/null
+++ b/ui (gen4)/features/_ui-render.js	
@@ -0,0 +1,123 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define)
+(function(require){ var module={} // make module AMD/node compatible...
+/*********************************************************************/
+
+var object = require('lib/object')
+var actions = require('lib/actions')
+var features = require('lib/features')
+
+var core = require('features/core')
+
+
+
+/*********************************************************************/
+
+var RenderActions = actions.Actions({
+	load: [
+		function(){
+			// XXX
+		}],
+	reload: [
+		function(){
+			// XXX
+		}],
+	refresh: [
+		function(){
+			// XXX
+		}],
+	clear: [
+		function(){
+			// XXX
+		}],
+
+	resizing: [
+		core.notUserCallable(function(unit, size, overflow){
+			// This is a resizing protocol root function.
+			//
+			// This will never be used directly, but will wrap protocol user
+			// functions.
+			//
+			// As an example see: .viewScale(..)
+
+			// XXX stop current animation...
+			// XXX
+
+			// XXX call .resizingDone(..) when animations done...
+			// XXX
+		})],
+
+	viewScale: ['- Zoom/',
+		function(scale){ 
+			if(scale == null || scale == '?'){
+				return // XXX get scale...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX set scale...
+			}, 'scale', scale)
+		}],
+	fitImage: ['Zoom/Fit image',
+		function(count, overflow){ 
+			if(count == '?'){
+				return // XXX get size...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX
+			}, 'screenwidth', count, overflow)
+		}],
+	fitRibbon: ['Zoom/Fit ribbon vertically',
+		function(count, whole){ 
+			if(count == '?'){
+				return // XXX get size...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX set size...
+			}, 'screenheight', count, whole)
+		}],
+
+	centerImage: ['- Interface/Center an image in ribbon horizontally',
+		function(target, align, offset, scale){ 
+			// XXX
+		}],
+	centerRibbon: ['- Interface/Center a ribbon vertically',
+		function(target){ 
+			// XXX
+		}],
+
+	ribbonRotation: ['- Interface|Ribbon/', 
+		function(angle){ 
+			// XXX
+		}],
+})
+
+var Render = 
+module.Render = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	// XXX
+	tag: 'ui-xxx-render',
+	exclusive: ['ui-render'],
+	depends: [
+		// XXX
+	],
+
+	actions: RenderActions, 
+
+	handlers: [
+		// XXX
+	],
+})
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                               */ return module })
diff --git a/ui (gen4)/features/ui-react.js b/ui (gen4)/features/ui-react.js
index e5bb666e..922e2cbe 100755
--- a/ui (gen4)/features/ui-react.js	
+++ b/ui (gen4)/features/ui-react.js	
@@ -15,31 +15,86 @@ var core = require('features/core')
 
 
 
-/*********************************************************************/
-
-var ViewerClassPrototype = {
-}
-
-
-var ViewerPrototype = {
-	sync: function(){
-	},
-}
-
-
-var Viewer =
-module.Viewer =
-object.makeConstructor('Viewer', 
-	ViewerClassPrototype,
-	ViewerPrototype)
-
-
-
 /*********************************************************************/
 
 var ReactActions = actions.Actions({
-	get viewer(){
-	},
+	load: [
+		function(){
+			// XXX
+		}],
+	reload: [
+		function(){
+			// XXX
+		}],
+	refresh: [
+		function(){
+			// XXX
+		}],
+	clear: [
+		function(){
+			// XXX
+		}],
+
+	resizing: [
+		core.notUserCallable(function(unit, size, overflow){
+			// This is a resizing protocol root function.
+			//
+			// This will never be used directly, but will wrap protocol user
+			// functions.
+			//
+			// As an example see: .viewScale(..)
+
+			// XXX stop current animation...
+			// XXX
+
+			// XXX call .resizingDone(..) when animations done...
+			// XXX
+		})],
+
+	viewScale: ['- Zoom/',
+		function(scale){ 
+			if(scale == null || scale == '?'){
+				return // XXX get scale...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX set scale...
+			}, 'scale', scale)
+		}],
+	fitImage: ['Zoom/Fit image',
+		function(count, overflow){ 
+			if(count == '?'){
+				return // XXX get size...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX
+			}, 'screenwidth', count, overflow)
+		}],
+	fitRibbon: ['Zoom/Fit ribbon vertically',
+		function(count, whole){ 
+			if(count == '?'){
+				return // XXX get size...
+			}
+
+			this.resizing.chainCall(this, function(){
+				// XXX set size...
+			}, 'screenheight', count, whole)
+		}],
+
+	centerImage: ['- Interface/Center an image in ribbon horizontally',
+		function(target, align, offset, scale){ 
+			// XXX
+		}],
+	centerRibbon: ['- Interface/Center a ribbon vertically',
+		function(target){ 
+			// XXX
+		}],
+
+	ribbonRotation: ['- Interface|Ribbon/', 
+		function(angle){ 
+			// XXX
+		}],
 })
 
 var React = 
@@ -55,7 +110,9 @@ module.React = core.ImageGridFeatures.Feature({
 
 	actions: ReactActions, 
 
-	handlers: [],
+	handlers: [
+		// XXX
+	],
 })
 
 
diff --git a/ui (gen4)/features/ui-ribbons.js b/ui (gen4)/features/ui-ribbons.js
index 330286f1..4ff18d2f 100755
--- a/ui (gen4)/features/ui-ribbons.js	
+++ b/ui (gen4)/features/ui-ribbons.js	
@@ -329,6 +329,7 @@ actions.Actions({
 			}
 		}],
 
+
 	// Zoom/scale protocol...
 	resizing: [
 		core.notUserCallable(function(unit, size, overflow){
@@ -586,7 +587,7 @@ core.ImageGridFeatures.Feature({
 
 // XXX try using .ribbons.resizeRibbon(..) for basic tasks...
 // XXX try a strategy: load more in the direction of movement by an offset...
-// XXX updateRibbon(..) is not signature compatible with data.updateRibbon(..)
+// XXX .updateRibbon(..) is not signature compatible with data.updateRibbon(..)
 var PartialRibbonsActions = 
 actions.Actions({
 	config: {
@@ -686,14 +687,6 @@ actions.Actions({
 		}],
 })
 
-// NOTE: I do not fully understand it yet, but PartialRibbons must be 
-// 		setup BEFORE RibbonAlignToFirst, otherwise the later will break
-// 		on shifting an image to a new ribbon...
-// 			To reproduce:
-// 				- setupe RibbonAlignToFirst first
-// 				- go to top ribbon
-// 				- shift image up
-// 		XXX The two should be completely independent.... (???)
 var PartialRibbons = 
 module.PartialRibbons = 
 core.ImageGridFeatures.Feature({
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js
index 26479dd2..b540d31e 100755
--- a/ui (gen4)/features/ui.js	
+++ b/ui (gen4)/features/ui.js	
@@ -51,20 +51,6 @@ var base = require('features/base')
 // This requires a 'ui-render' family feature to be present
 //
 // 	Expected render API is:
-//		Center image horizontally...
-//		.centerImage(target, align, offset, scale){
-//			-> this
-//
-//		Center ribbon vertically...
-//		.centerRibbon(target)
-//			-> this
-//
-//		Get/set ribbon rotation...
-//		.ribbonRotation()
-//			-> angle
-//		.ribbonRotation(angle)
-//			-> this
-//
 //		Get/set view scale...
 //		.viewScale()
 //		.viewScale('?')
@@ -84,6 +70,20 @@ var base = require('features/base')
 //		.fitRibbon(count, whole)
 //			-> this
 //
+//		Center image horizontally...
+//		.centerImage(target, align, offset, scale){
+//			-> this
+//
+//		Center ribbon vertically...
+//		.centerRibbon(target)
+//			-> this
+//
+//		Get/set ribbon rotation...
+//		.ribbonRotation()
+//			-> angle
+//		.ribbonRotation(angle)
+//			-> this
+//
 // 	Expected render events:
 //		Pre/post wrap the resize animation...
 //		.resizing(unit, size, overflow)
@@ -626,18 +626,18 @@ module.ViewerActions = actions.Actions({
 	// NOTE: these are here for documentation purpose...
 	//
 	// XXX should these check if they are a base feature and if so err???
-	centerImage: ['- Interface/Center an image in ribbon horizontally',
-		function(target, align, offset, scale){ }],
-	centerRibbon: ['- Interface/Center a ribbon vertically',
-		function(target){ }],
-	ribbonRotation: ['- Interface|Ribbon/', 
-		function(angle){ }],
 	viewScale: ['- Zoom/',
 		function(scale){ }],
 	fitImage: ['Zoom/Fit image',
 		function(count, overflow){ }],
 	fitRibbon: ['Zoom/Fit ribbon vertically',
 		function(count, whole){ }],
+	centerImage: ['- Interface/Center an image in ribbon horizontally',
+		function(target, align, offset, scale){ }],
+	centerRibbon: ['- Interface/Center a ribbon vertically',
+		function(target){ }],
+	ribbonRotation: ['- Interface|Ribbon/', 
+		function(angle){ }],
 })
 
 var Viewer =