cavalion-vcl 1.1.85 → 1.1.86

package/.md

@@ -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,13 @@
+### `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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cavalion-vcl",
-  "version": "1.1.85",
+  "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/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

@@ -4,16 +4,17 @@ var CssRules = require("vcl/CssRules");
 
 var 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;"
+		'': "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);"
 	},
 	".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: width 250ms ease-in, height 250ms ease-in;",
 		">.glassy:not(.no-margin)": "margin: 32px;",
@@ -47,7 +48,7 @@ var css = {
 		'&: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",
@@ -73,6 +74,8 @@ 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%;",
@@ -92,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}': {
@@ -124,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);",
@@ -142,7 +146,7 @@ var css = {
 	'.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.7777);"
+		'.{ListRow}:not(.selected).odd': "background-color: rgba(240, 240, 240, 0.55);"
 	}
 };
 

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

@@ -18,15 +18,15 @@ const css = {
 };
 
 [["./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: 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/util/Console.js

@@ -19,6 +19,7 @@ const HOTKEY_ALWAYS_ENABLED = {
 		return false;
 	}
 };
+
 const getAce = () => { 
 	return Control.focused instanceof Ace ? 
 		Control.focused :

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 */
@@ -372,7 +366,8 @@ define(function (require) {
         			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?
             	}
             },
 
@@ -865,7 +860,11 @@ define(function (require) {
             			return this.update(function() { this.setZoom(f, o); }.bind(this));	
             		}
             		this._zoom = f;
-            		this._zoomOrigin = o;
+            		if(o === undefined) {
+            			delete this._zoomOrigin;
+            		} else {
+            			this._zoomOrigin = o;
+            		}
             		this.nodeNeeded();
             		this.renderZoom();
             		this.setTimeout("align", 450);