diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css
index 2aa77cd7..57f97ef4 100644
--- a/ui (gen4)/css/layout.css	
+++ b/ui (gen4)/css/layout.css	
@@ -793,6 +793,27 @@ stretching in width... */
   width: 12px;
   height: 3px;
 }
+/* XXX these are still experimental... */
+.mark.brace-opening {
+  width: 20px;
+  height: 310px;
+  border-top: solid 5px yellow;
+  border-left: solid 5px yellow;
+  border-bottom: solid 5px yellow;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  margin-right: -15px;
+}
+.mark.brace-closing {
+  width: 20px;
+  height: 310px;
+  border-top: solid 5px yellow;
+  border-right: solid 5px yellow;
+  border-bottom: solid 5px yellow;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  margin-left: -15px;
+}
 /****************************************************** Image info ***/
 .inline-image-info {
   display: none;
diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 020e9a06..6466842f 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -808,6 +808,33 @@ stretching in width... */
 }
 
 
+/* XXX these are still experimental... */
+.mark.brace-opening {
+	width: @image-tile-size / 15;
+	height: @image-tile-size + 10;
+
+	border-top: solid 5px yellow;
+	border-left: solid 5px yellow;
+	border-bottom: solid 5px yellow;
+
+	margin-top: -10px;
+	margin-bottom: -10px;
+	margin-right: -15px;
+}
+.mark.brace-closing {
+	width: @image-tile-size / 15;
+	height: @image-tile-size + 10;
+
+	border-top: solid 5px yellow;
+	border-right: solid 5px yellow;
+	border-bottom: solid 5px yellow;
+
+	margin-top: -10px;
+	margin-bottom: -10px;
+	margin-left: -15px;
+}
+
+
 /****************************************************** Image info ***/
 .inline-image-info {
 	display: none;
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 292883f1..337d54c9 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -6,6 +6,7 @@
 <link rel="stylesheet" href="css/editor.css">
 <link rel="stylesheet" href="css/widget/browse.css">
 <link rel="stylesheet" href="css/widget/overlay.css">
+<link rel="stylesheet" href="css/widget/drawer.css">
 
 <!-- XXX remove before use... -->
 <style>
diff --git a/ui (gen4)/package.json b/ui (gen4)/package.json
index 0e742bc2..6258bfb5 100755
--- a/ui (gen4)/package.json	
+++ b/ui (gen4)/package.json	
@@ -1,5 +1,5 @@
 {
-  "name": "ImageGrid.Viewer (gen4)",
+  "name": "ImageGrid.Viewer.g4",
   "main": "index.html",
   "version": "0.0.1",
   "window": {
diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js
index 194f2c7e..72bab146 100755
--- a/ui (gen4)/viewer.js	
+++ b/ui (gen4)/viewer.js	
@@ -2216,6 +2216,7 @@ module.GlobalStateIndicator = features.Feature(ImageGridFeatures, {
 // widgets...
 var browse = require('lib/widget/browse')
 var overlay = require('lib/widget/overlay')
+var drawer = require('lib/widget/drawer')
 
 var makeActionLister = function(list, filter, pre_order){
 	pre_order = typeof(filter) == typeof(true) ? filter : pre_order
@@ -2262,6 +2263,22 @@ var ActionTreeActions = actions.Actions({
 				var a = l.pop()
 				return a +' ('+ l.join(', ') +')'
 			})],
+
+	// XXX this is just a test...
+	drawerTest:['Interface/Drawer widget test',
+		function(){
+			drawer.Drawer($('body'), 
+				$('<div>')
+					.css({
+						position: 'relative',
+						background: 'white',
+						height: '300px',
+					})
+					.append($('<h1>')
+						.text('Drawer test...'))
+					.append($('<p>')
+						.text('With some text.')))
+		}],
 })
 
 var ActionTree =