diff --git a/ui (gen4)/experiments/browse-dialog.css b/ui (gen4)/experiments/browse-dialog.css
new file mode 100755
index 00000000..8120e8b5
--- /dev/null
+++ b/ui (gen4)/experiments/browse-dialog.css
@@ -0,0 +1,142 @@
+
+.browse {
+ display: inline-block;
+ min-width: 300px;
+ width: initial;
+ background: gray;
+ color: rgba(255,255,255,0.8);
+ padding: 5px;
+ font-family: sans-serif;
+}
+/*
+.browse:not(:focus) {
+ opacity: 0.8;
+}
+*/
+.browse .v-block {
+ width: 100%;
+ height: auto;
+
+ box-sizing: border-box;
+
+ border-top: 1px solid rgba(255,255,255, 0.3);
+}
+.browse .v-block:first-of-type {
+ border-top: none;
+}
+.browse .v-block:empty {
+ display: none;
+}
+
+
+
+.browse .title {
+ font-weight: bold;
+ color: rgba(255,255,255,0.9);
+ padding: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+
+
+.browse .path {
+ padding: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ white-space: nowrap;
+}
+.browse .path:empty {
+ display: block;
+}
+.browse .path:before {
+ content: "/";
+}
+.browse .path .dir {
+ display: inline-block;
+ cursor: pointer;
+}
+.browse .path .dir:after {
+ content: "/";
+}
+.browse .path .dir:hover ~ .dir {
+ opacity: 0.2;
+}
+.browse .path .dir.cur {
+ opacity: 0.5;
+ cursor: text;
+}
+.browse .path .dir.cur:after {
+ content: "";
+}
+.browse .path .dir.cur:hover {
+ opacity: 1;
+}
+.browse .path .dir.cur:empty:not([contenteditable]) {
+ position: relative;
+ width: 50px;
+ height: 12px;
+ background: transparent;
+ opacity: 0;
+}
+.browse .path .dir.cur:empty:hover:not([contenteditable]) {
+ opacity: 0.6;
+}
+.browse .path .dir.cur:empty:hover:not([contenteditable]):after {
+ content: "______";
+ border: dashed white 1px;
+ cursor: text;
+}
+
+
+
+/* XXX need to make this resizable up but only to a certain size (~80vh) */
+.browse .list {
+ /* XXX need a way to make this automatic and depend on .browser
+ setup to avoid multiple scrollbars and the need to manually
+ dive into the configuration to change the container size
+ limits
+ */
+ max-height: 50vh;
+
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+/*
+.browse .list:empty {
+ display: block;
+}
+*/
+.browse .list div {
+ padding: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ cursor: pointer;
+}
+
+.browse:focus .list div.selected,
+.browse .path .dir:hover,
+.browse .list div:hover {
+ color: white;
+ background: rgba(0,0,0, 0.05);
+}
+
+/* XXX need to make the next two different... */
+.browse .list div.filtered-out {
+ opacity: 0.5;
+}
+.browse:not(.show-filtered-out) .list div.filtered-out {
+ display: none;
+}
+.browse .list div.disabled {
+ opacity: 0.3;
+}
+
+.browse:focus .list div.selected {
+ background: rgba(0,0,0, 0.1);
+ box-shadow: rgba(0,0,0,0.2) 0.1em 0.1em 0.2em;
+}
+
+.browse .list div.selected {
+ background: rgba(0,0,0, 0.08);
+}
diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html
index a6ecfa52..b034b234 100755
--- a/ui (gen4)/experiments/browse-dialog.html
+++ b/ui (gen4)/experiments/browse-dialog.html
@@ -1,5 +1,6 @@
+