cavalion-vcl 1.1.84 → 1.1.86

package/.md

@@ -14,12 +14,12 @@
 			* [Input](src/ui/:.js) < [Checkbox](src/ui/:.js) - [Combobox](src/ui/:.js) - [DatePicker](src/ui/:.js) 
 			* [Button](src/ui/:.js) < [PopupButton](src/ui/:.js)
 			* [Select](src/ui/:.js)
-		* [Container](src/ui/:.js)
+		* **[Container](src/ui/:.js)**
 			* [Group](src/ui/:.js)
 				* [CheckGroup](src/ui/:.js)
 				* [Bar](src/ui/:.js)
 					* [Tabs](src/ui/:.js) - [Tab](src/ui/:.js)
-			* [Panel](src/ui/:.js) 
+			* **[Panel](src/ui/:.js)**
 				* [Popup](src/ui/:.js) - [Ace](src/ui/:.js) - [Console](src/ui/:.js)
 				* ( [Form](src/ui/:.js) - [FormContainer](src/ui/:.js) ) _where does onActive/Deactive go?_
 				* [List](src/ui/:.js) | [ListColumn](src/ui/:.js) - [ListBody](src/ui/:.js) - [ListFooter](src/ui/:.js) - [ListHeader](src/ui/:.js) - [ListRow](src/ui/:.js)
@@ -27,7 +27,9 @@
 
 # [prototypes](src/:/) `2022/04/17` 
 
-> * [App](src/prototypes/:.js) - <= _#window is instantiated here (weirdly not in .desktop)_
+> 
+* [cavalion-blocks](src/prototypes/:.js)
+* [App](src/prototypes/:.js) - <= _#window is instantiated here (weirdly not in .desktop)_
 	* [.console](src/prototypes/App:.js) << _hotkeys_ _probably deprecated_ 
 	* [.desktop](src/prototypes/App:.js) << _#client [ui/forms/Portal<>]()_ _used at all?_
 	* [.framework7](src/prototypes/App:.js) -[.scaffold](src/prototypes/App:.js)

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+### `2025/04/03` - 1.1.86
+
+* 20250403 fixes bug in sorting by column (List) improves selecting console nodes with keyboard
+* 20250403 updates ^Escape handling to toggle console visibility updates glassy styles toasts out a message whenever the system clipboard is read or written
+* 20250403 introduces Action.prototype.go() (alias for execute()) finetunes Component.prototype.getVar introduces Control.findByName(node) where node is a string (eg. ":focus")
+* 20241119 develops support for searching through history updates Panel.prototype.setZoom to support setting transform-origin as well updates auto ListColumn header algoritm
+* 20241119 updates Component.prototype.setVars to control whether to mixInR or mixIn fixes a bug in Control.prototype.updateChildren() updates glassy styles
+* 20241111 updates glassy background to be more light sets ace.config for dynamic loading of themes and modes
+* 20241108 adds prepend
+
+### `2024/11/08` - 1.1.85
+
+* Service build in favor of cavalion-code
+
+### `2024/10/..` - 1.1.84
+
 ### `2024/10/24` - 1.1.83
 
 - 20241024 introduces Control.prototype.getNext/PreviousSibling introduces Ace.prototype.append

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cavalion-vcl",
-  "version": "1.1.84",
+  "version": "1.1.86",
   "description": "Visual Component Library for vcl-comps",
   "main": "index.js",
   "scripts": {

package/src/Action.js

@@ -62,6 +62,10 @@ define(function (require) {
                     }
                 }
             },
+            go: function() {
+            	Action.prototype.go = Action.prototype.execute;
+            	return this.go.apply(this, arguments);
+            },
             execute: function (evt, sender) {
             	return this.onexecute(evt, sender);
             },
@@ -312,8 +316,7 @@ define(function (require) {
 	            /**
 	             * Sets the -hotkey-property.
 	             */
-	            value = value.replace(/Cmd\+/g, "Meta+").replace(/\+Cmd/, "+Meta");
-
+	             
                 if (this._hotkey !== value) {
                     this._hotkey = value;
 
@@ -324,11 +327,18 @@ define(function (require) {
                     }
 
                     var me = this;
-                    var arr = this._hotkey.split("|");
+                    var arr;
+                    
+                    if(typeof this._hotkey === "string") {
+                    	arr = this._hotkey.split("|");
+                    } else if(this._hotkey instanceof Array) {
+                    	arr = this._hotkey;
+                    }
 
                     this._hotkeyListeners = [];
 
                     arr.forEach(function(hotkey, type) {
+			            hotkey = hotkey.replace(/Cmd\+/g, "Meta+").replace(/\+Cmd/, "+Meta");
                         hotkey = String.trim(hotkey).split(":");
                         type = hotkey.length === 1 ? "keydown" : hotkey.shift();
                         hotkey = hotkey.shift();
@@ -478,6 +488,7 @@ define(function (require) {
                 type: Type.BOOLEAN,
                 set: Function
             },
+            "hotkeys": { set(value) { this.setHotkey(value); } }, // alias
             "hotkey": {
                 type: Type.STRING,
                 get: Function,

package/src/Component.js

@@ -512,7 +512,7 @@ define(function (require) {
             	if(arguments.length === 2) {
             		return this.setVar("" + key, value);
             	}
-            	if(arguments.length === 3) {
+            	if(arguments.length >= 3) {
             		return this.getVar.apply(this, arguments);
             	}
             	if(key instanceof Array) {
@@ -535,13 +535,12 @@ define(function (require) {
                 }
                 return this._vars;
             },
-            setVars: function (value) {
+            setVars: function (value, mixInRecursive) {
             	if(typeof value === "string") {
             		value = js.str2obj(value);
             	}
-                if (this.isLoading()) {
-                    this._vars = mixInR(this._vars || {},
-                    value);
+                if (mixInRecursive || this.isLoading()) {
+                    this._vars = mixInR(this._vars || {}, value);
                 } else {
                     this._vars = value;
                 }
@@ -557,16 +556,18 @@ define(function (require) {
             hasVar: function (key) {
                 return (this._vars && this._vars.hasOwnProperty(key)) || false;
             },
-            getVar: function (namePath, fallback_to_owner, defaultValue) {
-                if (this._vars !== null && arguments.length === 3) {
+            getVar: function (namePath, fallback_to_owner, defaultValue, callingComponent) {
+                if (this._vars !== null && arguments.length >= 3) {
                     this._vars = this._vars || {};
                 }
                 
+                if(arguments.length < 4) callingComponent = this;
+                
                 var r = this._vars !== null ? js.get(namePath, this._vars) : undefined;
                 if (r === undefined) {
                 	if(fallback_to_owner === true && this._owner !== null) {
-                    	r = this._owner.getVar(namePath, true, defaultValue);
-                	} else if(arguments.length === 3) {
+                    	r = this._owner.getVar(namePath, true, defaultValue, callingComponent);
+                	} else if(arguments.length >= 3) {
                 		if((r = defaultValue) !== undefined) {
 			                if(typeof defaultValue === "function") {
 			                	r = defaultValue([this].concat(js.copy_args(arguments)));

package/src/Control.js

@@ -1244,6 +1244,8 @@ define(function(require) {
 								control.update();
 							} else if(control._node !== null) {
 								control._update();
+							} else {
+								control.getNode();
 							}
 							control.updateChildren(recursive, directly);
 						}, this);
@@ -1949,6 +1951,11 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 				}, Object.create(root, { hashCode: { value: () => ";-)" } })),
 			
 			findByNode: function(node) {
+				// as selector when string (usage findByNode(":focus"))
+				if(typeof node === "string") {
+					node = document.qs(node);
+				}
+				
 				while(node !== null && node[EventDispatcher.elementKey] === undefined) {
 					node = node.parentNode || null; // IE
 				}

package/src/Factory.js

@@ -534,9 +534,7 @@ this._source = source;
 				var sourceUri = Factory.makeTextUri(name);
 
 				function instantiate(source, local) {
-					var p = "";//local ? ".skip-fetch.local" : "";
-					var factory = new Factory(parentRequire, name + p, sourceUri + p);
-// console.log("instantiate", name + p);
+					var factory = new Factory(parentRequire, name, sourceUri);
 					factory.load(source, () => load(factory, source));
 				}
 

package/src/prototypes/App.console.js

@@ -7,57 +7,42 @@ const Control = require("vcl/Control");
 
 require("console/node/vcl/Component").initialize();
 override(require("vcl/Component").prototype, "print", function(inherited) {
-    		return function() {
-	    		var console = this.down("vcl/ui/Console#console");
-	    		if(console && !console.vars("skip-print")) {
-	    			return console.print.apply(console, arguments);
-	    		}
-	    		return inherited.apply(this, arguments);
-    		};
-    	});
+	return function() {
+		var console = this.down("vcl/ui/Console#console");
+		if(console && !console.vars("skip-print")) {
+			return console.print.apply(console, arguments);
+		}
+		return inherited.apply(this, arguments);
+	};
+});
 
 [(""), [
     ["vcl/Action", ("toggle-console"), {
-        hotkey: `
-keyup:Ctrl+Escape|keydown:Ctrl+Escape|
-keyup:Ctrl+Shift+D|keydown:Ctrl+Shift+D|
-keyup:Alt+Shift+Z|keydown:Alt+Shift+Z|
-keyup:MetaCtrl+192`,
+        hotkey: "keyup:Ctrl+Escape|keydown_:Ctrl+Escape|keyup:Ctrl+Shift+D|keyup:MetaCtrl+192",
 		onLoad() {
 			// TODO #CVLN-20200822-2
-			this.readStorage("visible", (visible) => eval(visible) && this.execute({}));
+			this.readStorage("visible", (visible) => JSON.parse(visible) && this.execute({}));
 		},
         onExecute(evt) {
-            var scope = this.scope();
-            var focused;
-
-            if (evt.type === "keydown") {
-                focused = require("vcl/Control").focused;
-                if (focused !== scope.console.getScope().console) {
-                    this.setVar("focused", focused);
-                }
-            } else {
-                if (!scope.console.isVisible()) {
-                    scope.console.show();
-                    scope['align-enabled'].setState(true);
-                } else {
-                	if(Control.focused === scope.console.getScope().console) {
-	                    scope['align-enabled'].setState(false);
-	                    scope.console.hide();
-	                    focused = this.removeVar("focused");
-	                    if (focused && focused !== scope.console) {
-	                        this.setTimeout("focus", function() {
-	                            // console.log("setFocus", focused);
-	                            focused.setFocus();
-	                        }, 250);
-	                    }
-                	} else {
-                		scope.console.setFocus();
-                	}
-                }
-            }
+            var scope = this.scope(), console = scope.console.qs("#console");
+            var focused = Control.findByNode(document.qs(":focus"));
+            var visible = scope.console.getVisible();
 
-            this.writeStorage("visible", scope.console.isVisible());
+        	if(focused !== console) {
+        		this.vars("focused", focused);
+        	}
+          
+            if(visible && focused !== console) {
+            	console.setFocus();
+            } else if(!scope.console.toggle("visible")) {
+        		if((focused = this.vars("focused"))) {
+        			focused.setFocus();
+        		}
+        	}
+        	
+        	visible = scope.console.isVisible();
+        	scope['align-enabled'].setState(visible);
+            this.writeStorage("visible", visible);
             
             return this.inherited(arguments);
         }
@@ -125,6 +110,17 @@ keyup:MetaCtrl+192`,
     		}
     	}
     }],
+    ["vcl/Action", ("open-alphaview"), {
+    	hotkey: "MetaCtrl+F3",
+    	on() {
+    		let c = Control.findByNode(document.qs(":focus"));
+    		if(c && (c = c instanceof (req("vcl/ui/Console")) ? c : c.udr("vcl/ui/Console"))) {
+    			H("devtools/Alphaview.csv", { console: c });
+			} else {
+				H("devtools/Alphaview.csv");
+			}
+    	}
+    }],
     
     [["ui/forms/util/Console"], "console", {
     	align: "bottom",

package/src/prototypes/App.glassy.js

@@ -1,32 +1,22 @@
-"use vcl/CssRules, vcl/ui/Input";
+"use vcl/CssRules, vcl/ui/Input, vcl/ui/Tabs, vcl/ui/ListRow";
 
 var CssRules = require("vcl/CssRules");
 
 var css = {
 	'#close-x': {
-		'': "transition: opacity 1s, background-color 1s; opacity: 0.1; position:absolute;top:0;right:0;color:silver;padding:4px 8px;font-size:14pt;z-index:999999999999;border-radius:15px;background-color:rgba(255,255,255,0.5);",
-		'&:hover': "color:rgb(56,121,217);cursor:pointer;opacity: 1;"
+		'': "transition: opacity 1s; opacity: 0.1; position:absolute;top:0;right:0;color:silver;padding:4px 8px;font-size:14pt;z-index:999999999999;  border: 1px solid transparent; border-radius:3px;",
+		'&:hover': "color:black;font-weight:bold;cursor:pointer;opacity: 1;backdrop-filter: blur(10px); background-color: rgba(255,255,255,0.5); border: 1px solid silver;",
+		'&:active': "background-color: rgba(56,127,217,0.025);"
 	},
-	'font-family': "Lucida Grande, Arial, sans-serif", 
-	'font-size': "9pt",
-	'.{./Button}': {
-		'font-size': "9pt",
-		'font-family': "Lucida Grande, Arial, sans-serif",
-		'vertical-align': "top",
-		'&.disabled': "color:gray;",
-		'&:not(:active)': "margin-bottom:4px;",
-		'&:active': "margin-bottom:0;margin-top:2px;border:2px solid rgb(57,121,217); padding-left:8px; padding-right:6px;"// background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
-	},
-	
 	".with-shadow": "box-shadow:rgba(0, 0, 0, 0.4) 0px 1px 2px 0px;",
 	".with-text-shadow": "text-shadow: rgb(255 255 255) 0px 0px 12px, #00000094 0px 0px 5px;",
 	".transparent": "background-color:transparent;",
 	".glassy-overlay": {
 		"": "pointer-events: none; color:rgba(5,5,5,0.95);",
- 		".glassy": "background-color: rgba(155, 155, 155, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);",
-		".loading": "background: rgba(155, 155, 155, 0.35) url(/shared/vcl/images/loading.gif) 50% 50% no-repeat;",
+ 		".glassy": "background-color: rgba(215, 215, 215, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);",
+		".loading": "background: url(/shared/vcl/images/loading.gif) 50% 50% no-repeat;",
 		".rounded": "padding: 4px; border-radius: 5px;",
-		".animate-width-height": "transition: z-index 400ms, width 250ms ease-in, height 250ms ease-in, transform 450ms;",
+		".animate-width-height": "transition: width 250ms ease-in, height 250ms ease-in;",
 		">.glassy:not(.no-margin)": "margin: 32px;",
 		">.glassy": {
 			"": "pointer-events: auto;",
@@ -53,12 +43,12 @@ var css = {
 			'border-radius': "5px",
 			'z-index': "1999",
 			// 'backdrop-filter': "blur(10px)",
-			'transition': "box-shadow 0.45s ease 0s, transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s, transform-origin 0.45s ease 0s",
+			'transition': "box-shadow 0.45s ease 0s, transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s",
 		},
 		'&:hover': {
 			'box-shadow': "0 0 10px 5px rgba(0,0,0,.2)",
 			'cursor': "move",
-			'.client': "border-color: rgba(56,127,217,0.025); background-color:rgba(155, 155, 155, 0.2);"
+			'.client': "border-color: rgba(56,127,217,0.025); background-color:rgba(215, 215, 215, 0.2);"
 		},
 		// '&.square': {
 		// 	'min-width': 175 + "px",
@@ -76,16 +66,6 @@ var css = {
 		'&.glassy-overlay > .client.no-margin': "margin:0;",
 		'&.right': "right: 40px; transform-origin: top right;",
 		'&.left': "left: 40px; transform-origin: top left;",
-		
-		'&.parent-topleft':			"transform-origin: 0% 0%;",
-		'&.parent-topcenter':		"transform-origin: 50% 0%;",
-		'&.parent-topright':		"transform-origin: 100% 0%;",
-		'&.parent-middleleft':		"transform-origin: 0% 50%;",
-		'&.parent-middlecenter':	"transform-origin: 50% 50%;",
-		'&.parent-middleright':		"transform-origin: 100% 50%;",
-		'&.parent-bottomleft':		"transform-origin: 0% 100%;",
-		'&.parent-bottomcenter':	"transform-origin: 50% 100%;",
-		'&.parent-bottomright':		"transform-origin: 100% 100%;",		
 
 			// "&.right": {
 			// 	'': "right: 5%; transform-origin: top right;",
@@ -94,7 +74,18 @@ var css = {
 			// "&.left": {
 			// 	'': "left: 5%; transform-origin: top left;",
 			// },
+			
+		'#menubar': "border-bottom: none;",
 
+        '&.parent-topleft': "transform-origin: 0% 0%;",
+        '&.parent-topcenter': "transform-origin: 50% 0%;",
+        '&.parent-topright': "transform-origin: 100% 0%;",
+        '&.parent-middleleft': "transform-origin: 0% 50%;",
+        '&.parent-middlecenter': "transform-origin: 50% 50%;",
+        '&.parent-middleright': "transform-origin: 100% 50%;",
+        '&.parent-bottomleft': "transform-origin: 0% 100%;",
+        '&.parent-bottomcenter': "transform-origin: 50% 100%;",
+        '&.parent-bottomright': "transform-origin: 100% 100%;",
 		'&.shrink-to-corner:not(:hover)': {
 			'width': 175 + "px",
 			'height': 175 + "px"
@@ -104,7 +95,7 @@ var css = {
 			'.{List}': "border-radius:5px;",
 			'.{ListHeader}': {
 				'': "background-color:transparent;transition:background-color 1s ease 0s;", 
-				'&.scrolled': "background-color:rgba(255,255,255,0.75);", 
+				'&.scrolled': "background-color:rgba(255,255,255,0.75);backdrop-filter:blur(10px);", 
 				'>div': "background-image:none;border:none;font-weight:bold;"
 			},
 			'.{Input}': {
@@ -136,11 +127,12 @@ var css = {
 			'border': "7px solid rgba(0,0,0,0)",
 			// 'overflow': "hidden",
 			'height': "100%",
-			'transition': "border-color 0.45s ease 0s, background-color 0.45s ease 0s",
+			'transition': "border-color 0.45s ease 0s, background-color 0.45s ease 0s, border-width: 0.45s ease 0s",
 			'&:hover': {
+				'border-width': "10px"
 			}
 		},
-		'.seperator.seperator.seperator': "border-top: 1px solid rgba(155, 155, 155, 0.55);",
+		'.seperator.seperator.seperator': "border-top: 1px solid rgba(215, 215, 215, 0.55);",
 		
 		'&.phone': {
 			'': "width: 389px; border-radius:20px; box-shadow: 0 0 20px 10px rgba(0,0,0,.2);",
@@ -151,24 +143,15 @@ var css = {
 		}
 	},
 	
-	'.glassy-overflow': "position: absolute; _pointer-events: none; background-color: rgba(205,95,65,0.1); z-index: 1998;",
-	
-	'.veldoffice\\/Tabs\\<Document\\> .\\#preview': "background-color: rgba(240, 240, 240, 0.75);"
+	'.glassy': {
+		'#bar': "background-color: rgba(240, 240, 240, 0.35);",
+		'.{Tabs}': "background-color: rgba(240, 240, 240, 0.35);",
+		'.{ListRow}:not(.selected).odd': "background-color: rgba(240, 240, 240, 0.55);"
+	}
 };
 
-[(""), {
-	onLoad() {
-		const w = this.qs("#window");
-		w.set("css", js.mi(w.get("css") || {}, css));
-		return this.inherited(arguments);
-	}	
-}, [
+[(""), [
+
+	[("#window"), { css: css }]	
 
-	// ["#window", {
-		
-	// 	css: css
-		
-	// }]	
-	
-	
 ]];

package/src/prototypes/App.js

@@ -1,6 +1,7 @@
 "use vcl/ui/Popup, vcl/ui/List";
 
 ["vcl/Application", { }, [
+
     ["vcl/ui/Panel", ("window"), { 
     	align: "client", classes: "animated",
 		onLoad() { 
@@ -11,5 +12,11 @@
 			},
 			req("vcl/ui/Popup").prototype._parent = this;
 		}
+    }],
+    ["vcl/Action", ("reload-app"), {
+    	hotkey: "Shift+MetaCtrl+R|Cmd+Alt+R",
+    	on(evt) { evt.preventDefault(); document.location.reload(); }
     }]
+	
+
 ]];

package/src/prototypes/App.toast.js

@@ -1,4 +1,33 @@
+"use util/Clipboard";
+
+const Clipboard = req("util/Clipboard");
+
 ["", {
+	onLoad() {
+
+		// Override toast method to be more convenient (TODO refactor to vcl/Application)
+		this.toast = (c = "Content not provided", ms = 1500, opts = {}) => {
+			if(typeof c === "object") {
+				return this.constructor.prototype.toast.apply(this, [c]);
+			}
+			return this.constructor.prototype.toast.apply(this, [
+				js.mi({content: c, ms: ms, classes: "fade glassy"}, opts)
+			]);
+		};
+		
+		Clipboard.onPaste.addListener(e => { 
+			this.print("onPaste", e);
+			this.toast(js.sf("Pasted %d bytes...", e.length ))});
+		Clipboard.onCopy.addListener(e => { 
+			this.print("onCopy", e);
+			if(typeof e === "string" && e.length > 150) {
+				this.toast(js.sf("Copied %d bytes", e.length ));
+			} else {
+				this.toast(js.sf("Copied <b>%H<b>", e));
+			}});
+
+		return this.inherited(arguments);		
+	},
 	onToast: function(options) {
 		
 		/*- 

package/src/prototypes/App.v1.js

@@ -67,5 +67,11 @@ var FormContainer = require("vcl/ui/FormContainer");
         ["vcl/ui/FormContainer", "client", { 
         	formUri: "./ui/forms/Portal<>" 
         }]
-    ]]
+    ]],
+    
+    // [("vcl/Action"), "reload-app", {
+    // 	hotkey: "Shift+MetaCtrl+R|Cmd+Alt+R",
+    // 	on(evt) { evt.preventDefault(); document.location.reload(); }
+    // }]
+
 ]];

package/src/prototypes/App.v2.js

@@ -1,154 +1,32 @@
 "use js, vcl/ui/Node, vcl/ui/Input, vcl/ui/Tab, vcl/ui/Button";
 
+const css = {
+	'font-family': "Lucida Grande, Arial, sans-serif", 
+	'font-size': "9pt",
+	'.{Console}': {
+		'.node > .container': "padding-top: 2px;",
+		'.node': "padding-bottom: 2.4px;"
+	},
+	'.{Button}': {
+		'font-size': "9pt",
+		'font-family': "Lucida Grande, Arial, sans-serif",
+		'vertical-align': "top",
+		'&.disabled': "color:gray;",
+		'&:not(:active)': "margin-bottom:4px;",
+		'&:active': "margin-bottom:0;margin-top:2px;border:2px solid rgb(57,121,217); padding-left:8px; padding-right:6px;"// background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
+	}
+};
+
 [["./App.console.toast.glassy<>"], {
-	vars: { canunload: true }
+	vars: { canunload: false }
 }, [
 	
-    [("vcl/Action"), "reload-app", {
-    	hotkey: "Shift+MetaCtrl+R|Cmd+Alt+R",
-    	on() { 
-    		document.location.reload(); 
-    	}
-    }],
+    // [("vcl/Action"), "reload-app", {
+    // 	hotkey: "Shift+MetaCtrl+R|Cmd+Alt+R",
+    // 	on() { 
+    // 		document.location.reload(); 
+    // 	}
+    // }],
     
-    [("#window"), { 
-		css: {
-			'#close-x': {
-				'': "transition: opacity 1s; opacity: 0.1; position:absolute;top:0;right:0;color:silver;padding:4px 8px;font-size:14pt;z-index:999999999999;",
-				'&:hover': "color:black;cursor:pointer;opacity: 1;"
-			},
-			'font-family': "Lucida Grande, Arial, sans-serif", 
-			'font-size': "9pt",
-			'.{./Button}': {
-				'font-size': "9pt",
-				'font-family': "Lucida Grande, Arial, sans-serif",
-				'vertical-align': "top",
-				'&.disabled': "color:gray;",
-				'&:not(:active)': "margin-bottom:4px;",
-				'&:active': "margin-bottom:0;margin-top:2px;border:2px solid rgb(57,121,217); padding-left:8px; padding-right:6px; background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
-			},
-			".with-shadow": "box-shadow:rgba(0, 0, 0, 0.4) 0px 1px 2px 0px;",
-			".with-text-shadow": "text-shadow: rgb(255 255 255) 0px 0px 12px, #00000094 0px 0px 5px;",
-			".transparent": "background-color:transparent;",
-			".glassy-overlay": {
-				"": "pointer-events: none; color:rgba(5,5,5,0.95);",
-		 		".glassy": "background-color: rgba(155, 155, 155, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);",
-				".loading": "background: rgba(155, 155, 155, 0.35) url(/shared/vcl/images/loading.gif) 50% 50% no-repeat;",
-				".rounded": "padding: 4px; border-radius: 5px;",
-				".animate-width-height": "transition: width 250ms ease-in, height 250ms ease-in;",
-				">.glassy:not(.no-margin)": "margin: 32px;",
-				">.glassy": {
-					"": "pointer-events: auto;",
-					// "&:hover": "backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);"
-				},
-				">.{Element}": "pointer-events: auto;",
-				".{Node}": {
-					"&.invisible-layer": "opacity: 0.4;",
-			    	"&.seperator": "border-top:1px solid rgba(155,155,155,0.55);margin-top:2px;padding-top:2px;",
-					">.text>img": "width:20px;height:20px;"
-				}
-			},
-			'.container-glassy': { 
-				/* TODO CSS definitions must (eventually) be moved to App.glassy */
-				'': {
-					// 'height': HEIGHT + "px",
-					// 'width': WIDTH + "px",
-					'top': "5%", 
-					// 'height': "100%",
-					
-					'min-width': "54px",
-					'min-height': "54px",
-		
-					'border-radius': "5px",
-					'z-index': "1999",
-					// 'backdrop-filter': "blur(10px)",
-					'transition': "box-shadow 0.45s ease 0s, transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s",
-				},
-				'&:hover': {
-					'box-shadow': "0 0 10px 5px rgba(0,0,0,.2)",
-					'cursor': "move",
-					'.client': "border-color: rgba(56,127,217,0.025); background-color:rgba(155, 155, 155, 0.2);"
-				},
-				// '&.square': {
-				// 	'min-width': 175 + "px",
-				// 	'min-height': 175 + "px"
-				// },
-				'&.dragging': {
-					'transition': "box-shadow 0.15s ease 0s" || "transform 75ms ease-out 0s, left 75ms ease-out 0s, right 75ms ease-out 0s, top 75ms ease-out 0s, bottom 75ms ease-out 0s, width 75ms ease-out 0s, height 75ms ease-out 0s, border-width 0.45s ease 0s",
-		
-					'box-shadow': "0 0 20px 10px rgba(0,0,0,.2)",
-					'.client': {
-						'border-color': "rgba(56,127,217,0.4)" || "rgba(255,215,0,0.75)"
-					}
-					
-				},
-				'&.glassy-overlay > .client.no-margin': "margin:0;",
-				'&.right': "right: 40px; transform-origin: top right;",
-				'&.left': "left: 40px; transform-origin: top left;",
-		
-					// "&.right": {
-					// 	'': "right: 5%; transform-origin: top right;",
-					// 	"&:not(:hover)": "margin-left:1px; transform: translate3d(75%, 0, 0);"
-					// },
-					// "&.left": {
-					// 	'': "left: 5%; transform-origin: top left;",
-					// },
-		
-				'&.shrink-to-corner:not(:hover)': {
-					'width': 175 + "px",
-					'height': 175 + "px"
-				},
-				'&:not(.no-transparent-effects)': {		
-					'*': "text-shadow: none;",
-					'.{List}': "border-radius:5px;",
-					'.{ListHeader}': {
-						'': "background-color:transparent;transition:background-color 1s ease 0s;", 
-						'&.scrolled': "background-color:rgba(255,255,255,0.75);", 
-						'>div': "background-image:none;border:none;font-weight:bold;"
-					},
-					'.{Input}': {
-						'input': 'background-color: rgba(255,255,255,0.2);',
-						// 'input:focus': 'background-color: rgba(255,255,255,0.9);'
-					},
-					
-					// '.{ListHeader}': { 
-					// 	'': "background-color:transparent;transition:background-color 0.5s ease 0s;", 
-					// 	':active': "background-color: gold;", //rgb(56, 121, 217);" } 
-					// 	'&.scrolled': "background-color:rgba(255,255,255,0.75);"
-					// }
-					
-				},
-				
-				'input': {
-					// 'flex': "1 1 0%",
-				    // 'transition': "width 0.5s ease 0s",
-				    // 'width': "150px"
-				    'padding': "5px",//"5px 24px",
-				    'border-radius': "5px",
-				    'border': "none",
-				    'background': "rgba(255, 255, 255, 0.2)"
-				},
-				
-				'.client': {
-					'position': "relative",
-					'border-radius': "5px",
-					'border': "7px solid rgba(0,0,0,0)",
-					// 'overflow': "hidden",
-					'height': "100%",
-					'transition': "border-color 0.45s ease 0s, background-color 0.45s ease 0s",
-					'&:hover': {
-					}
-				},
-				'.seperator.seperator.seperator': "border-top: 1px solid rgba(155, 155, 155, 0.55);",
-				
-				'&.phone': {
-					'': "width: 389px; border-radius:20px; box-shadow: 0 0 20px 10px rgba(0,0,0,.2);",
-					">.client": {
-						'': "border-radius: 20px;",
-						'iframe': "border-radius: 20px;"
-					}
-				}
-			}
-		}
-    }]
+    [("#window"), { css: css }]
 ]];

package/src/prototypes/make/Build.js

@@ -76,9 +76,9 @@ var Handlers = {
 			return alert("app-js not set"); 
 		}
 		
-		if(confirm("Make?")) {
-			Handlers.make_app.apply(this, [evt]);
-		}
+		// if(confirm("Make?")) {
+		// 	Handlers.make_app.apply(this, [evt]);
+		// }
 		
 		var text = this.ud("#extra-components").getValue();
 		RM.get(uri).then(res => {

package/src/prototypes/ui/forms/View.js

@@ -4,11 +4,18 @@
     ["vcl/ui/Panel", ("left"), { align: "left", width: 325 }, [
         ["vcl/ui/Panel", ("left_content"), { align: "top", autoSize: "height" }, [
 	        ["vcl/ui/Element", ("description"), {
-	            content: [
-	            	// "A view form consists of a panel aligned to the left ",
-	            	// "and one aligned client. The client panel usually shows a menubar ",
-	            	// "aligned to the top."
-	            ].join("")
+	        // 	onRender() {
+	        // 		this.nextTick(() => {
+		       // 		const left_content = this.ud("#left_content").getNode();
+		       // 		// const has = left_content.hasAttribte
+					    // if (left_content.scrollHeight > left_content.clientHeight) {
+					    //     left_content.setAttribute("data-overflow-y", "true");
+					    // } else {
+					    //     left_content.removeAttribute("data-overflow-y");
+					    // }
+	        // 		});
+	        // 	},
+	            content: locale("App-description.default")
 	        }]
         ]]
     ]],

package/src/prototypes/ui/forms/util/Console.js

@@ -1,4 +1,4 @@
-"use devtools/Resources, devtools/Parser, vcl/Component, vcl/Control, vcl/Dragger, util/HotkeyManager, vcl/ui/Sizer, vcl/ui/FormContainer, devtools/cavalion-devtools, vcl/ui/Ace";
+"use devtools/Resources, devtools/Parser, vcl/Component, vcl/Control, vcl/Dragger, util/HotkeyManager, vcl/ui/Sizer, vcl/ui/FormContainer, devtools/cavalion-devtools, vcl/ui/Ace, util/Clipboard, blocks/Blocks";
 
 const Component = require("vcl/Component");
 const Control = require("vcl/Control");
@@ -8,12 +8,18 @@ const Sizer = require("vcl/ui/Sizer");
 const Dragger = require("vcl/Dragger");
 const Resources = require("devtools/Resources");
 const Parser = require("devtools/Parser");
+const Clipboard = require("util/Clipboard");
+const B = require("blocks/Blocks");
 
 const HOTKEY_ALWAYS_ENABLED = {
 	isHotkeyEnabled() { 
-		return this._owner.isEnabled(); 
+		if(this._owner.isEnabled()) {
+			return (Control.focused || this).up("devtools/Workspace<>") === null;
+		}
+		return false;
 	}
 };
+
 const getAce = () => { 
 	return Control.focused instanceof Ace ? 
 		Control.focused :
@@ -22,26 +28,22 @@ const getAce = () => {
 			.filter(ace => ace.isVisible())
 			.pop();
 };
-
 const deselect = () => {
 	window.getSelection && window.getSelection().removeAllRanges();
 	document.selection && document.selection.empty();
 };
 
-window.H = (uri, vars) => B.i(["Hover<>", { vars: js.mi({ uri: uri }, vars)}]);
-
-let cc = function() { // HM-20241010-1-method-auto-require-in-first-call
-	// const args = js.copy_args(arguments);
-	return Promise.resolve(req("clipboard-copy")).then(cc_ => {
-		cc = cc_;
-		
-		return cc.apply(window, arguments);
-	});
-};
+const H = (uri, vars) => B.i(["Hover<>", { vars: js.mi({ uri: uri }, vars)}]);
 
+const cc = (text) => Clipboard.copy(text);
 const cl = console.log;
 const facts = (comp) => Component.getFactories(comp);
 
+window.B = B; window.H = H;
+window.facts = facts;
+window.cc = cc;
+window.cl = cl;
+
 [["ui/Form"], {
     activeControl: "console",
     align: "bottom",
@@ -343,7 +345,6 @@ const facts = (comp) => Component.getFactories(comp);
     	}
     }],
 
-	
     [["ui/controls/Toolbar"], "toolbar", {
         css: { cursor: "ns-resize" },
         draggable: true,
@@ -379,7 +380,6 @@ const facts = (comp) => Component.getFactories(comp);
         },
         onEvaluate(expr) {
 			const cl = console.log;
-			const cc = req("clipboard-copy");
 			const pr = () => this.print.apply(this, arguments);
 
             const open = (uri, opts) => this.bubble(

package/src/ui/Ace.js

@@ -53,7 +53,9 @@ function(require, Ace, ace, Panel, Type, Text) {
 	const markDeletionInGutter = (editor, lineNumber) => {
 	    editor.session.addGutterDecoration(lineNumber, "line-deleted");
 	};
-
+	
+	ace.config.set("basePath", window.require.toUrl("ace").split("?")[0]);
+	
 	return (Ace = Ace(require, {
 		inherits: Panel,
 		prototype: {
@@ -71,7 +73,7 @@ function(require, Ace, ace, Panel, Type, Text) {
 			_content: "<div></div>",
 
 			_cursorPos: null,
-
+			
 			onnodecreated: function() {
 				/**
 				 * @overrides ../Control.prototype.onnodecreated
@@ -82,8 +84,31 @@ function(require, Ace, ace, Panel, Type, Text) {
 				this._editor.$blockScrolling = Infinity;
 				this._editor.setOption("useSoftTabs", false);
 				this._editor.on("change", (e) => this.dispatch("change", e));
-				
+
 				initCommands(this._editor);
+
+				if(this.hasOwnProperty("_value")) {
+					this._editor.setValue(this._value);
+					delete this._value;
+				}
+				
+				if(this.hasOwnProperty("_mode")) {
+					this.setMode(this._mode);
+				}
+				
+				// this.setTimeout(() => {
+					
+				// 	const app = this.app();
+				// 	if(app && app.qsa("#ace").length > 5) {
+				// 		if(this.isVisible() === false) {
+				// 			this.print(this, "autoremove - isVisible: " + this.isVisible());
+				// 			this._value = this.getValue();
+				// 			this.destroyNode();
+				// 			delete this._editor;
+				// 		}
+				// 	}
+
+				// }, 200);
 				
 				return this.inherited(arguments);
 			},
@@ -113,27 +138,42 @@ function(require, Ace, ace, Panel, Type, Text) {
 				 *
 				 * @returns
 				 */
+
+// this.print(this, "getEditor: " + this._editor);
+				 
 				this.nodeNeeded();
 				return this._editor;
 			},
 			getValue: function() {
+				if(this.hasOwnProperty("_value")) return this._value;
+				
 				this.nodeNeeded();
 				return this._editor.session.getValue();
 			},
 			setValue: function(value) {
-				this.nodeNeeded();
 				if(value instanceof Array && value.every(s => typeof s === "string")) {
 					value = value.join("\n");
 				}
-				return this._editor.setValue(typeof value === "string" ? value : JSON.stringify(value));
+				
+				value = typeof value === "string" ? value : JSON.stringify(value);
+
+				if(!this._node) {
+					return (this._value = value);
+				}
+				
+				// this.nodeNeeded();
+				return this._editor.setValue(value);
 			},
 			getLines: function(seperator) {
 				return this.getValue().split(seperator || "\n");
 			},
 			setMode: function (mode) {
-				this.getEditor().session.setMode("ace/mode/" + mode);
+				if(!this._editor) {
+					return this._mode = mode;
+				}
+				this._editor.session.setMode("ace/mode/" + mode);
 			},
-			
+
 			append: function(content) {
 				const editor = this.getEditor();
 			    const session = editor.getSession();       // Get the current session
@@ -141,6 +181,12 @@ function(require, Ace, ace, Panel, Type, Text) {
 			    
 			    session.insert({ row: lastRow, column: 0 }, '\n' + content);  // Insert content at the bottom
 			},
+			prepend: function(content) {
+				const editor = this.getEditor();
+			    const session = editor.getSession();       // Get the current session
+
+			    session.insert({ row: 0, column: 0 }, '\n' + content);  // Insert content at the bottom
+			},
 			
 			getSelection: function() {
 				const editor = this.getEditor();

package/src/ui/Console.js

@@ -1,6 +1,7 @@
 define(function(require) {
 
 	var Class = require("js/Class");
+	var Browser = require("util/Browser");
 	var Deferred = require("js/Deferred");
 	var js = require("js");
 	var Printer = require("console/Printer");
@@ -17,6 +18,17 @@ define(function(require) {
 		};
 
 	var MAX_HISTORY_LENGTH = 1024 * 50;
+	
+	const initialize_Q = (root, value) => {
+		const v = value || root._nodes.input.value;
+		root._Q = root._history.filter((s, i, a) => (!i || a[i - 1] !== s) && (!v || s.startsWith(v)));
+		root._Q = root._Q.concat(root._history.filter(s => s.includes(v))).reverse().filter(Array.fn.unique).reverse();
+
+		if(root._Q.length === 0) {
+			root._Q = [v];// 
+		}
+		root._Q.index = root._Q.length;
+	};
 
 	var Console = {
 		inherits: Panel,
@@ -155,30 +167,41 @@ define(function(require) {
 
 				this._nodes.console = this.getChildNode(0);
 				this._nodes.input = this.getChildNode(1, 0);
-
+				
 				this._printer = new Printer(this._nodes.console);
 			},
-/*
 			onmousedown: function(evt) {
-		        if(evt.target === this._node) {
-		        	this.addClass("highlight-click");
-		        }
+		        // if(evt.target === this._node) {
+		        // 	this.addClass("highlight-click");
+		        // }
 			},
-			onmouseup: function() {
-				if(this.hasClass("highlight-click")) {
-					this.removeClass("highlight-click");
-				}
+			onmouseup: function(evt) {
+				// if(this.hasClass("highlight-click")) {
+				// 	this.removeClass("highlight-click");
+				// }
 			},
-*/
+
 			onclick: function(evt) {
 				/** @overrides ../../Control.prototype.onclick */
-				this.setTimeout("focus", function() {
-			        //if(evt.target === this._node) {
-	    				this.storeScroll();
-	    				this._nodes.input.focus();
-	    				this.restoreScroll();
-			        //}
-				}.bind(this), 200);
+
+				if(this._ignoreClick) return console.log("blocked-click");
+
+				this.setTimeout("focus", () => requestAnimationFrame(() => {
+    				this.storeScroll();
+
+					if(Browser.chrome) {
+						this._ignoreClick = true;
+						this._nodes.input.focus();
+						this._node.click(); // Force Chrome to acknowledge a user event
+						delete this._ignoreClick;
+					}
+					this._nodes.input.focus();
+
+					Browser.chrome && this.restoreScroll();
+					Browser.safari && this.nextTick(() => this.restoreScroll());
+
+					// Browser.chrome && this.nextTick(() => this._nodes.input.focus());
+				}), 100);
 				
 				var node = evt.target;
 				if(evt.metactrlKey && HE.hasClass(node, "key")) {
@@ -220,9 +243,9 @@ define(function(require) {
 			onkeypress: function(evt) {
 				/** @overrides ../../Control.prototype.onkeydown */
 				var r = this.inherited(arguments);
-				if(r !== false) {
+				if(r !== false) { this.nextTick(() => { // let key be handled
+					const text = this._nodes.input.value;
 					if(evt.keyCode === 13) {
-						var text = this._nodes.input.value;
 						if(text !== "") {
 							var value;
 
@@ -236,14 +259,23 @@ define(function(require) {
 							}
 							this.print(text, value);
 						}
+					} else if(text.startsWith("// ") && text.endsWith(" //")) {
+						if(!this._Q || this._Q.text !== text) {
+							initialize_Q(this, text.substring(0, text.length - 4));
+							
+							this._Q.index--;
+							this._nodes.input.value = this._Q[this._Q.index];
+							this._Q.text = text;
+						}
+
 					}
-				}
+				});}
 				//this.print("press", evt.keyCode);
 				return r;
 			},
 			onkeydown: function(evt) {
 				/** @overrides ../../Control.prototype.onkeyup */
-				var r = this.inherited(arguments), clearQ = !!this._Q;
+				var r = this.inherited(arguments), clearQ = !!this._Q, nodes;
 				
 				if(evt.ctrlKey === true) {
 					if(evt.altKey === true && evt.keyCode === 13) {
@@ -257,12 +289,12 @@ define(function(require) {
 						if(evt.shiftKey === true) {
 							console.log(sel);
 						}
-						this.print(sel);
-					} else if(evt.keyCode === 76) {
+						this.print(js.sf("c$%d", Math.random() * 10), sel);
+					} else if(evt.keyCode === 76) { // control+L
 						if(evt.shiftKey === true) {
 							
 						} else {
-							var nodes = this._nodes.console.qsa(".selected.node").map(_ => { 
+							nodes = this._nodes.console.qsa(".selected.node").map(_ => { 
 								_.parentNode.removeChild(_);
 								return _;
 							});
@@ -270,21 +302,40 @@ define(function(require) {
 							evt.preventDefault();
 							nodes.map(_ => this._nodes.console.appendChild(_));
 						}
-					} else if(evt.keyCode === 75) {
+					} else if(evt.keyCode === 75) { // control+K
 						this._nodes.console.qsa(".selected.node").map(_ => HE.removeClass(_, "selected"));
+					} else if(evt.keyCode === 73) { // control+I {
+						nodes = this._nodes.console.qsa(".selected.node");
+						if(nodes.length >= 1) {
+							if(nodes[0].previousSibling) {
+								nodes[0].previousSibling.classList.add("selected");
+								nodes[0].previousSibling.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
+								if(evt.shiftKey !== true) {
+									nodes[0].classList.remove("selected");
+								}
+							}
+						} else {
+							nodes = this._nodes.console.qsa(":scope > .node").reverse()
+							nodes[0].classList.add("selected");
+							nodes[0].scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
+						}
+					} else if(evt.keyCode === 74) { // control+J {
+						nodes = this._nodes.console.qsa(".selected.node").reverse();
+						if(nodes.length >= 1) {
+							if(nodes[0].nextSibling) {
+								nodes[0].nextSibling.classList.add("selected");
+								nodes[0].scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
+								if(evt.shiftKey !== true) {
+									nodes[0].classList.remove("selected");
+								}
+							}
+						}
 					}
 				} else if(evt.keyCode === 38 || evt.keyCode === 40) {
 					clearQ = false;
-					if(!this._Q) {
-						const v = this._nodes.input.value;
-						
-						this._Q = this._history.filter((s, i, a) => (!i || a[i - 1] !== s) && (!v || s.startsWith(v)));
-						this._Q = this._Q.concat(this._history.filter(s => s.includes(v))).reverse().filter(Array.fn.unique).reverse();
 
-						if(this._Q.length === 0) {
-							this._Q = [v];
-						}
-						this._Q.index = this._Q.length;
+					if(!this._Q) {
+						initialize_Q(this);
 					}
 					
 					if(evt.keyCode === 38) {
@@ -435,13 +486,13 @@ define(function(require) {
 			},
 			getValues: function(selected) {
 				return this.getNode("console")
-					.qsa(".node" + selected ? ".selected" : "")
+					.qsa((selected ? "" : ":scope > ") + " .node" + (selected ? ".selected" : ""))
 					.map(n => n._line)
 					.filter(Boolean).map(l => l._value);
 			},
 			getKeys: function(selected) {
 				return this.getNode("console")
-					.qsa(".node" + selected ? ".selected" : "")
+					.qsa((selected ? "" : ":scope > ") + " .node" + (selected ? ".selected" : ""))
 					.map(n => n._line)
 					.filter(Boolean).map(l => l._key);
 			}

package/src/ui/List.js

@@ -37,9 +37,9 @@ define(function(require) {
 			constructor: function() {
 				this._columns = [];
 
-				this._header = new ListHeader();
-				this._footer = new ListFooter();
-				this._body = new ListBody();
+				this._header = new ListHeader(this);
+				this._footer = new ListFooter(this);
+				this._body = new ListBody(this);
 
 				this._header.setParent(this);
 				this._body.setParent(this);
@@ -715,10 +715,10 @@ workaroundColumnAlignment(this);
 							if(column === null) {
 								column = this.addColumn();
 								column.setAttribute(attrs[i]);
-								var s = attrs[i].split(":").pop().split(".");
+								var s = attrs[i]/*.split(":").pop()*/.split(".");
 								if(s.length > 1) {
 									if(shuffle) {
-										s = [s.pop()].concat(s).join(".");
+										s = [s.pop()].concat(s.join(".")).join(" ");
 									} else {
 										s = s.join(".");
 									}
@@ -914,15 +914,19 @@ workaroundColumnAlignment(this);
 						var row1 = this._source._array.indexOf(i1);
 						var row2 = this._source._array.indexOf(i2);
 	
-						if(sv) {
-							i1 = this._source.getAttributeValue(column._attribute, row1, true);
-							i2 = this._source.getAttributeValue(column._attribute, row2, true);
+						// if(sv) {
+						// 	i1 = this._source.getAttributeValue(column._attribute, row1, true);
+						// 	i2 = this._source.getAttributeValue(column._attribute, row2, true);
 	
-							return dir * sv(i1, i2);
-						}
+						// 	return dir * sv(i1, i2);
+						// }
 
 						i1 = this.valueByColumnAndRow(column, row1);
 						i2 = this.valueByColumnAndRow(column, row2);
+						
+						if(numeric === undefined) {
+							numeric = (!isNaN(parseFloat(i1)) || !isNaN(parseFloat(i2)));
+						}
 
 						if(i1 === i2) return 0;
 						

package/src/ui/Panel.js

@@ -47,15 +47,9 @@ define(function (require) {
         inherits: Container,
         prototype: {          
             "@css": {
-                "position": "absolute",
-                "overflow": "auto",
-                "cursor": "default",
-                "&:focus": {
-                    outline: "none"
-                },
-                "&.animated": {
-                	"transition": "transform 0.45s"
-                }
+                '': "position: absolute; overflow: auto; cursor: default;",
+                '&:focus': "outline: none;",
+                '&.animated': "transition: transform 0.45s;"// transform-origin: 0 0;"
             },
 
             /** @overrides ../Control */
@@ -72,7 +66,8 @@ define(function (require) {
             _bottom: 0,
             _width: 0,
             _height: 0,
-            _zoom: 1.0,
+            _zoom: 1.0, 
+            _zoomOrigin: "0 0",
 
             _focusable: false,
             
@@ -368,10 +363,11 @@ define(function (require) {
             	if(zoomed && parseFloat(this._zoom) !== 1) {
         			style.transform = String.format("scale3d(%s, %s, 1)", 
         				this._zoom, this._zoom);
-        			style['transform-origin'] = "0 0";
+        			style['transform-origin'] = this._zoomOrigin;
             	} else {
             		style.transform = "";
-            		style['transform-origin'] = "";
+            		setTimeout(() => style['transform-origin'] = "", 450);
+            		// something is not right here, 0 0 is already the default, right?
             	}
             },
 
@@ -852,13 +848,23 @@ define(function (require) {
             	}
             	return this._zoom;
             },
-            setZoom: function(f) {
-            	if(this._zoom !== f) {
+            setZoom: function(f, o) {
+            	if(f instanceof Array) {
+            		// support for zoom: [1.5, "50% 0"]
+            		return this.setZoom(f[0], f[1]);
+            	}
+            	
+            	if(this._zoom !== f || this._zoomOrigin !== o) {
             		if(!this.hasClass("animated")) {
             			this.addClass("animated");
-            			return this.update(function() { this.setZoom(f); }.bind(this));	
+            			return this.update(function() { this.setZoom(f, o); }.bind(this));	
             		}
             		this._zoom = f;
+            		if(o === undefined) {
+            			delete this._zoomOrigin;
+            		} else {
+            			this._zoomOrigin = o;
+            		}
             		this.nodeNeeded();
             		this.renderZoom();
             		this.setTimeout("align", 450);

package/src/ui/Tree.js

@@ -117,7 +117,6 @@ define(function (require) {
 					},
                     "&.expandable:not(.expanding)": {
                         ">.icon::before": {
-                            transform: "translate(0, -2px)",
                             'line-height': "0",
                             content: "'▸'" // http://www.alanwood.net/unicode/geometric_shapes.html
                         }