x4js 2.2.49 → 2.2.51

package/README.md

@@ -2,11 +2,12 @@
 **A TypeScript framework for people who build applications, not markup.**
 
 ## Home page
-see [home](https://x4js.org)
+see [X4 home page](https://x4js.org)
 
 ## API Documentation
-see [API](https://rlibre.github.io/x4/index.html)
-see [AI](./aicontext.md)
+see [GitHib](https://rlibre.github.io/x4/index.html)
+
+see [AI context](./aicontext.md)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.49",
+  "version": "2.2.51",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/boxes/boxes.module.scss

@@ -19,6 +19,7 @@
 .x4box {
 	min-width: 0;
 	min-height: 0;
+	flex-shrink: 0;
 }
 
 .x4hbox {

package/src/components/btngroup/btngroup.module.scss

@@ -22,7 +22,7 @@
 	align-content: start;
 	margin: 5px;
 	gap: 4px;
-
+	overflow: hidden;
 	background: var( --btngroup-background );
 
 	&.align-right {

package/src/components/colorpicker/colorpicker.ts

@@ -163,7 +163,7 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
 
 
 /**
- * 
+ * @internal
  */
 
 @class_ns( "x4" )
@@ -240,7 +240,7 @@ class HueSlider extends Box<BoxProps,CommonEvents> {
 
 
 /**
- * 
+ * @internal
  */
 
 @class_ns( "x4" )

package/src/components/combobox/combobox.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, ComponentProps, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, EvClick, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
 import { class_ns, IComponentInterface, IFormElement, kbNav, safeText, sanitizeHtml, UnsafeHtml } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
@@ -31,7 +31,8 @@ import icon from "./updown.svg";
 
 
 interface DropdownEvents extends PopupEvents {
-	selectionChange: EvSelectionChange;
+	//selectionChange: EvSelectionChange;
+	click: EvClick;
 }
 
 
@@ -57,8 +58,9 @@ export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 			ev.preventDefault( );
 		}, true );
 
-		this._list.on( "selectionChange", ( ev ) => {
-			this.fire( "selectionChange", ev );
+		this._list.on( "click", ( ev ) => {
+			//this.fire( "selectionChange", ev );
+			this.fire( "click", ev );
 		})
 	}
 
@@ -152,11 +154,11 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			}
 		}
 
-		this._popup.on( "selectionChange", ( ev ) => {
-			const [sel] = ev.selection as ListboxID[];
+		this._popup.on( "click", ( ev ) => {
+			const sel = ev.context as ListboxID;
 			if( sel!==undefined ) {	// no empty sel
 				_select( sel );			
-				this.fire( "selectionChange", ev );
+				this.fire( "selectionChange", { selection: [sel], empty: false }  );
 			}
 		});
 
@@ -178,8 +180,11 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		switch( ev.key ) {
 			case "Enter":
 			case "Escape": {
-				this._popup.show( false );
-				break;
+				if( this._popup.isOpen( ) ) {
+					this._popup.show( false );
+					break;
+				}
+				return;
 			}
 
 			case "ArrowUp":

package/src/components/dialog/dialog.ts

@@ -89,7 +89,8 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 								this.fire("btnclick", { button: props.closable } );
 							}
 							else {
-								this.close() 
+								//<no it's ok 99% ! this.fire("btnclick", { button: props.buttons[0] } );
+								this.close( );
 							}
 						}
 					}) : null,
@@ -113,6 +114,14 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 				// todo cancel
 				ev.preventDefault();
 				ev.stopPropagation();
+
+				if( isString(props.closable) ) {
+					this.fire("btnclick", { button: props.closable } );
+				}
+				else {
+					//<no it's ok 99% ! this.fire("btnclick", { button: props.buttons[0] } );
+					this.close( );
+				}
 			}
 			else if (ev.key == 'Enter') {
 				const def = this.query<Button>('button.default');
@@ -124,6 +133,10 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 				}
 			}
 		})
+
+		asap( ( ) => {
+			this.focusNext( true );
+		} );
 	}
 
 	private focusNext( next: boolean) : boolean {

package/src/components/input/input.module.scss

@@ -15,6 +15,9 @@
  **/
 
 :root {
+    --input-background: rgba(255, 255, 255, 0.6);
+    --input-color: black;
+
 	--input-sel-background: var( --accent-background );
 	--input-sel-color: var( --accent-color );
 	--input-placeholder: var( --disabled-background );
@@ -28,6 +31,8 @@ input.x4input {
 	outline: none;
 	
 	border: none;
+    background-color: var( --input-background );
+    color: var( --input-color );
 
 	&::selection {
 		background-color: var( --input-sel-background );

package/src/components/listbox/listbox.ts

@@ -251,14 +251,14 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		while( target && target!=this.dom ) {
 			const c = componentFromDOM( target );
 
-			// avoid trapping child ckick
-			if( c.dom.tagName==='INPUT' ) {
+			// avoid trapping child click
+			if( c && c.dom.tagName==='INPUT' ) {
 				return;
 			}
 
 			if( c && c.hasClass("x4item") ) {
 				const id = c.getInternalData( "id" );
-				const fev: ComponentEvent = { context:id };
+				const fev: EvClick = { context:id };
 				if (ev.type == 'click') {
 					this.fire('click', fev );
 				}
@@ -276,6 +276,10 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			target = target.parentElement;
 		}
 
+		if (ev.type == 'click') {
+			this.fire('click', {} );
+		}
+		
 		this.clearSelection( );
 
 		ev.stopImmediatePropagation();
@@ -498,30 +502,30 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 	defaultRenderer( item: ListItem ): Component {
 
-		const mk_col = ( _: any, index: number ) => {
-			const c = item.sub_cols[index];
+		const mk_col = ( c: any, index: number ) => {
 			if( c===undefined || c===null ) { 
 				return null;
 			}
 
 			if( c instanceof Component ) {
+				c.addClass( "column" );
 				return c;
 			}
 				
 			return new SimpleText( { cls: `column ref-c${index+2}`, text: c } )
 		}
 
-		let cols: Component[] = null;
+		const content = [
+			new Label( { cls: `column ref-c1`, icon: item.iconId, text: item.text } ),
+		];
+
 		if( item.sub_cols ) {
-			cols = item.sub_cols.map( mk_col );
+			content.push( ...(item.sub_cols.map( mk_col )) );
 		}
 
 		return new HBox( {
 			cls: item.cls,
-			content: [
-				new Label( { cls: `column ref-c1`, icon: item.iconId, text: item.text } ),
-				...cols,
-			],
+			content			
 		} )
 	}
 

package/src/components/notification/notification.ts

@@ -42,6 +42,12 @@ interface NotificationProps extends ComponentProps {
 }
 
 /**
+ * 
+ * @example:
+ * const not = new Notification( { title: "Yooo", text: "You win !", mode: "danger" })
+ * not.display( 3000 )
+ * 
+ * 
  * @cssvar
  * ```
  * --notification-border

package/src/components/popup/popup.module.scss

@@ -32,6 +32,7 @@
 	}
 }
 
+//<to remove
 .x4popup.center {
 	left: 50%;
 	top: 50%;

package/src/components/popup/popup.ts

@@ -22,6 +22,7 @@ import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
 import { getGlobalZoom, getScrollbarSize } from '../../core/core_tools.js';
+import { Application } from '../../core/core_application.js';
 
 export interface PopupEvents extends ComponentEvents {
 	closed: ComponentEvent;
@@ -66,6 +67,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		}
 
 		// wait for element to create it's childs
+		// > setContent is in ctor
 		asap( ( ) => {
 			if( this.props.movable===true || (this.props.sizable && this.props.movable===undefined) ) {
 				const movers = this.queryAll( ".caption-element" );
@@ -136,13 +138,31 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	}
 
 	/**
-	 * s
+	 * stupid parameter
 	 */
 
-	displayCenter( center = true ) {
-		//this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
-		this.setClass( 'center', center );
+	displayCenter(  ) {
 		this._do_show( );		// to compute size
+
+		const fixpos = ( ) => {
+			console.log( "fixpos" );
+
+			const orc = this.getBoundingRect( );
+			this.setStyle( {
+				left: ((window.innerWidth - orc.width) / 2) +'px',
+				top:  ((window.innerHeight - orc.height) / 2) +'px',
+			} );
+
+			console.log( orc );
+		}
+
+		asap( fixpos );
+
+		const tkn = Application.instance( ).on( "resize", () => {
+			asap( fixpos );
+		} )
+
+		this.addCleanup( tkn.off );
 	}
 
 	/**
@@ -411,51 +431,54 @@ class CMover {
 
 		this.self = ref ? true : false;
 
-		x.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
+		const mouseDown = ( e: PointerEvent ) => {
 			if( this.self && e.target!=x.dom ) {
 				return;
 			}
 
 			x.setCapture( e.pointerId );
 
-			this.ref = ref ?? componentFromDOM( x.dom.parentElement );
+			if( !ref ) {
+				ref = componentFromDOM( x.dom.parentElement );
+			}
 
+			this.ref = ref;
 			this.delta = {x:0,y:0};
-			const rc = this.ref.getBoundingRect();
+			const rc = ref.getBoundingRect();
 
 			this.delta.x = e.pageX-rc.left;
 			this.delta.y = e.pageY-rc.top;
-		});
-
-		x.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
-			x.releaseCapture( e.pointerId );
-			this.ref = null;
-		});
+		}
 
-		x.addDOMEvent( "pointermove", ( e: PointerEvent ) => {
-			this._onMouseMove( e );
-		});
-	}
+		const mouseMove = ( e: PointerEvent ) => {
+			if( !this.delta ) {
+				return;
+			}
 
-	private _onMouseMove( e: PointerEvent ) {
-		if( !this.ref ) {
-			return;
+			const ref = this.ref
+			const pt = { x: e.pageX-this.delta.x, y: e.pageY-this.delta.y };
+			const rc = ref.getBoundingRect( );
+
+			ref.setStyle( {
+				top: pt.y+"",
+				left: pt.x+"",
+			} );
+			
+			e.preventDefault( );
+			e.stopPropagation( );
 		}
 
-		const pt = { x: e.pageX-this.delta.x, y: e.pageY-this.delta.y };
-		const rc = this.ref.getBoundingRect( );
-
-		let nr: any = {
-		};
+		const mouseUp = ( e: PointerEvent ) => {
+			x.releaseCapture( e.pointerId );
+			this.delta = null;
+		}
 
-		this.ref.setStyle( {
-			top: pt.y+"",
-			left: pt.x+"",
-		} );
-		
-		e.preventDefault( );
-		e.stopPropagation( );
+		x.addDOMEvent( "pointerdown", mouseDown );
+		x.addDOMEvent( "pointerup", mouseUp );
+		x.addDOMEvent( "pointermove", mouseMove );
 	}
+
+	
 }
 
 

package/src/components/propgrid/progrid.module.scss

@@ -6,6 +6,8 @@
 
 :root {
 	--propertygrid-background: white;
+    --propertygrid-gadget-background: white;
+    --propertygrid-gadget-color: black;
 }
 
 .x4propertygrid {
@@ -92,10 +94,6 @@
 			flex-basis: 10px;
 	    	padding: 4px;
 
-			&>* {
-				width: 100%;
-			}
-
 			input {
 				background: rgba(255,255,255,0.6);
 			}
@@ -110,8 +108,16 @@
 			padding-left: 34px;
 		}
 
-		.cell:has(.x4button) {
+		.cell:has(.button) {
 			padding: 4px 40px;
 		}
+
+        .gadget {
+            &.x4button {
+                --button-background: var( --propertygrid-gadget-background );
+                --button-color: var( --propertygrid-gadget-color );
+                padding: 5px;
+            }
+        }
 	}
 }

package/src/components/propgrid/propgrid.ts

@@ -44,6 +44,7 @@ export interface PropertyValue {
     step?: number;	// for numbers
 	min?: number;
     max?: number;
+    gadgets?: Component[];
 }
 
 export interface PropertyGroup {
@@ -246,6 +247,7 @@ export class PropertyGrid extends VBox {
 			use_hdr = false;
 			editor = new Button({ 
 				id: item.name,
+                cls: "button",
 				label: value as string, 
 				click: ( ) => {
 					item.callback?.( item.name, '' );
@@ -253,17 +255,17 @@ export class PropertyGrid extends VBox {
 			});
 		}
 		else {
-			editor = new Input({ 
-				type: 'text', 
-				id: item.name,
-				name: item.name, 
-				value: value as string,
-				focus: ( e: EvFocus ) => {
-					if( e.focus_out ) {
-						item.callback?.( item.name, (editor as Input).getValue() );
-					}
-				}
-			});
+            editor = new Input({ 
+                type: 'text', 
+                id: item.name,
+                name: item.name, 
+                value: value as string,
+                focus: ( e: EvFocus ) => {
+                    if( e.focus_out ) {
+                        item.callback?.( item.name, (editor as Input).getValue() );
+                    }
+                },
+            })
 		}
 		
 		let cls = 'row';
@@ -271,12 +273,25 @@ export class PropertyGrid extends VBox {
 			cls += ' ' + item.cls;
 		}
 
+        editor.addClass( "x4flex" );
+
+        const content: Component[] = [
+            editor
+        ]
+
+        if( item.gadgets ) {
+            item.gadgets.forEach( g => {
+                g.addClass( "gadget" );
+                content.push( g );
+            } );
+        }
+
 		return new HBox({
 			cls,
 			content: [
-				use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
-				new Component({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content: editor })
-			]
+                use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
+                new HBox({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content }),
+            ]
 		});
 	}
 

package/src/components/sizers/sizer.ts

@@ -24,7 +24,9 @@ import "./sizer.module.scss"
  */
 
 export interface EvSizeChange extends ComponentEvent {
-	size: number;
+	size: number;	// compat
+	width: number;
+	height: number;
 }
 
 interface CSizerEvent extends ComponentEvents {
@@ -111,28 +113,41 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		let nr: any = {};
 		let horz = true;
 
+		//const center = this._ref.hasClass("center");
+		//if( center ) {
+		//	const orc = this._ref.getBoundingRect( );
+		//	this._ref.removeClass("center");
+		//
+		//	nr.left = orc.left;
+		//	nr.top = orc.top;
+		//}
+
 		if( this._type.includes("top") ) {
 			nr.top = pt.y,
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type=="vsize-next" ) {
+		
+		if( this._type=="vsize-next" ) {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
-			//nr.top = rc.top;
+		
+		if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
 			nr.height = (pt.y-rc.top);
 			horz = false;
 		}
-		else if( this._type.includes("left") ) {
+		
+		if( this._type.includes("left") ) {
 			nr.left = pt.x;
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type=="hsize-next" ) {
+		
+		if( this._type=="hsize-next" ) {
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type.includes("right") || this._type=='hsize-prev' ) {
+		
+		if( this._type.includes("right") || this._type=='hsize-prev' ) {
 			nr.width = (pt.x-rc.left);
 		}
 
@@ -140,7 +155,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		//this._ref.setStyleValue( "flexGrow", 0 );
 
 		const nrc = this._ref.getBoundingRect( );
-		this.fire( "resize", { size: horz ? nrc.width : nrc.height })
+		this.fire( "resize", { size: horz ? nrc.width : nrc.height, width: nrc.width, height: nrc.height })
 
 		e.preventDefault( );
 		e.stopPropagation( );

package/src/components/tabs/tabs.ts

@@ -75,12 +75,7 @@ interface TablistEvents extends ComponentEvents {
 
 /**
  * bar containing buttons
- * 
- * @cssvar
- * ```
- * --tab-border-selected
- * --tab-border-hover
- * ```
+ * @internal
  */
 
 @class_ns( "x4" )
@@ -147,6 +142,11 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --tab-border-selected
+ * --tab-border-hover
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/tooltips/tooltips.ts

@@ -75,7 +75,7 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 		tooltip = new Tooltip( { } );
 	}
 
-	timer.setTimeout( null, 300, ( ) => {
+	timer.setTimeout( "update", 300, ( ) => {
 		tooltip.setText( unsafeHtml(text) );
 
 		let y = mouse_pos.y;
@@ -90,7 +90,7 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 
 function closeTT( ) {
 	tooltip.show( false );
-	timer.clearTimeout( null );
+	timer.clearTimeout( "update" );
 }
 
 /**

package/src/components/treeview/treeview.ts

@@ -488,8 +488,10 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			this._selitem = undefined;
 		}
 
+        if( this._selection ) {
 			this._selection = undefined;
 			this.fire( "selectionChange", { selection: [], empty: true } );
+        }
 	}
 
 	/**

package/src/core/component.ts

@@ -14,11 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym } from './core_tools';
 import { CoreElement } from './core_element';
 import { AriaAttributes, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
-import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom';
+import { addEvent, DOMEventHandler, GlobalDOMEvents, COMPONENT } from './core_dom';
 import { Application, EvMessage } from './core_application';
 import { makeState } from './core_state.js';
 
@@ -30,7 +30,6 @@ type ComponentAttributes = Record<string,string|number|boolean>;
 type CreateComponentCallBack =  ( attrs: Record<string,string> ) => ComponentContent;
 
 const FRAGMENT = Symbol( "fragment" );
-const COMPONENT = Symbol( "component" );
 
 const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
@@ -152,7 +151,7 @@ export interface ComponentEvents extends EventMap {
  * ```
  */
 
-@class_ns( "x4" )
+@class_ns("x4")
 export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> 
 		extends CoreElement<E> {
 
@@ -166,16 +165,16 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	#store: Map<string|symbol,any>;
 	#pstate: any;
-	
-	constructor( props: P ) {
+
+	constructor(props: P) {
 		super( );
 
 		this.props = props;	// copy ?
 
 		if( props.existingDOM ) {
 			this.dom = props.existingDOM;
-		}
-		else {
+							}
+							else {
 			if( props.ns ) {
 				this.dom = document.createElementNS( props.ns, props.tag ?? "div" );
 			}
@@ -242,8 +241,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				this.addDOMEvent( "created", ( ) => {
 					this.enable( false );
 				} );
+				}
 			}
-		}
 
 		(this.dom as any)[COMPONENT] = this;
 	}
@@ -281,10 +280,10 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * Multiple classes can be provided as a space-separated string.
      * @param cls - The CSS class(es) to add.
      */
-    
+
 	addClass( cls: string ) {
 		if( !cls ) return;
-			
+		
 		cls = cls.trim( );
 			
 		if( cls.includes(' ') ) {
@@ -309,13 +308,13 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( cls=='*' ) {
 			this.dom.classList.value = "";
 			return;
-		}
+			}
 		
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
 			this.dom.classList.remove(...ccs);
-		}
-		else {
+			}
+			else {
 			this.dom.classList.remove(cls);
 		}
 	}
@@ -351,11 +350,11 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
 			ccs.forEach( toggle );
-		}
-		else {
+				}
+				else {
 			toggle( cls );
 		}
-	}
+				}
 
 	/**
      * Sets or removes a CSS class based on a boolean condition.
@@ -368,7 +367,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( set ) this.addClass(cls);
 		else this.removeClass( cls );
 		return this;
-	}
+			}
 
 	// :: ATTRIBUTES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
@@ -383,7 +382,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 			this.setAttribute( name, attrs[name] );
 		}
 		return this;
-	}
+			}
 
 	/**
      * Sets a single HTML attribute on the component's DOM element.
@@ -399,7 +398,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		else {
 			this.dom.setAttribute( name, ""+value );
 		}
-	}
+		}
 
 	/**
      * Retrieves the value of an HTML attribute from the component's DOM element.
@@ -420,8 +419,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * @see Component.getIntData
 	 * @see Component.setInternalData
 	 * @see Component.getInternalData
-     */
-    
+	 */
+
 	getData( name: string ) : string {
 		return this.getAttribute( "data-"+name );
 	}
@@ -794,7 +793,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Sets pointer capture on the component's DOM element for a specific pointer.
      * @param pointerId - The unique ID of the pointer.
-	 *
+	 * 
 	 * @example
 	 * control.on("pointerdown", (ev) => {
 	 * 	ev.preventDefault(); // Prevent default browser actions
@@ -858,7 +857,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Checks if the component's DOM element is currently visible (i.e., not hidden by `display: none`).
      * @returns `true` if the component is visible, `false` otherwise.
-     */
+	 */
 
 	isVisible( ) {
 		return (this.dom as HTMLElement).offsetParent !== null;
@@ -944,7 +943,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Returns the previous sibling element as a Component instance.
      * @returns The previous sibling component, or `null` if none exists.
-     */
+	 */
 
 	prevElement<T extends Component = Component>( ): T {
 		const nxt = this.dom.previousElementSibling;
@@ -962,7 +961,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	}
 
 	/**
-     * 
+	 * 
 	 */
 
 	childCount( ) {
@@ -974,9 +973,9 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @param dom - The starting DOM node from which to search upwards.
      * @param cls - Optional. The constructor of the Component type to match.
      * @returns The matching parent Component instance, or `null` if not found.
-     */
-	
-	
+	 */
+
+
 	static parentElement<T extends Component>( dom: Node, cls?: Constructor<T> ): T {
 
 		while( dom.parentElement ) {
@@ -991,14 +990,14 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 			dom = dom.parentElement;
 		}
-
+		
 		return null;
 	}
 
 	/**
      * Returns the first child element as a Component instance.
      * @returns The first child component, or `null` if none exists.
-     */
+	 */
 
 	firstChild<T extends Component = Component>( ) : T {
 		const nxt = this.dom.firstElementChild;
@@ -1008,7 +1007,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	/**
      * Returns the last child element as a Component instance.
      * @returns The last child component, or `null` if none exists.
-     */
+	 */
 
 	lastChild<T extends Component = Component>( ) : T {
 		const nxt = this.dom.lastElementChild;
@@ -1019,19 +1018,19 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * Enumerates all child components of this component.
      * @param recursive - If `true`, searches all descendants; otherwise, only direct children.
      * @returns An array of child Component instances.
-     */
+	 */
 
 	enumChildComponents( recursive: boolean ) {
-
+	
 		const children: Component[] = [];
-		
+
 		const nodes = this.enumChildNodes( recursive );
 		nodes.forEach( ( c: Node ) => {
 			const cc = componentFromDOM( c as HTMLElement );
 			if( cc ) {
 				children.push(cc);
 			}
-		} );
+				});
 
 		return children;
 	}
@@ -1188,7 +1187,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		state.on( "change", ( ) => {
 			this.setTimeout( key, 500, ( ) => {
 				Application.instance().setStorage( key, JSON.stringify( raw ) );
-			});
+		} );
 		});
 
 		this.#pstate[name] = state;
@@ -1214,7 +1213,7 @@ type ComponentConstructor = {
 
 export function componentFromDOM<T extends Component = Component>( node: Element ) {
 	return node ? (node as any)[COMPONENT] as T : null;
-}
+	}
 
 /**
  * Wraps an existing HTMLElement with a new Component instance.

package/src/core/core_application.ts

@@ -27,9 +27,15 @@ export interface EvMessage extends CoreEvent {
 	params: any;
 }
 
+interface EvWindowResize extends CoreEvent {
+	width: number;
+	height: number;
+}
+
 export interface ApplicationEvents extends EventMap {
 	global: EvMessage;
 	message: EvMessage;
+	resize: EvWindowResize;
 }
 
 // singleton
@@ -104,6 +110,15 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		else {
 			window.addEventListener( "load", loaded, { once: true } );
 		}
+
+		const resize = ( ) => {
+			this.fire( "resize", {
+				width: window.innerWidth,
+				height: window.innerHeight,
+			} );
+		}
+
+		window.addEventListener('resize', resize, { passive: true });
 	}
 
 	/**

package/src/core/core_dom.ts

@@ -14,6 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+export const COMPONENT = Symbol( "component" );
+
 /** @ignore this events must be defined on domNode (do not bubble) */
 export const unbubbleEvents = {
 	mouseleave: 1, mouseenter: 1, load: 1, unload: 1, scroll: 1, focus: 1, blur: 1, rowexit: 1, beforeunload: 1, stop: 1,
@@ -33,9 +35,33 @@ let mutObserver: MutationObserver = null;
 
 const observeMutation = (mutations: MutationRecord[], observer: MutationObserver): void => {
 
+	// moves are handled this way
+	const added   = new Set<Node>( );
+	const removed = new Set<Node>( );
+
+	for( const mutation of mutations ) {
+		if( mutation.type == "childList" ) {
+			mutation.addedNodes.forEach( n => {
+				if( removed.has( n ) ) {
+					removed.delete( n ); 
+				}
+				else { 
+					added.add( n ); 
+				}
+			} );
+
+			mutation.removedNodes.forEach( n => {
+				if( added.has( n ) ) { 
+					added.delete( n ); 
+				}
+				else { 
+					removed.add( n ); 
+				}
+			} );
+		}
+	}
+
 	const sendEvent = ( node: Node, code: "created" | "removed" ) => {
-//		console.log( "notify", node, code );
-			
 		const store = event_handlers.get( node );
 		if ( store && store[code] ) {
 			node.dispatchEvent( new Event( code, {} ) );
@@ -53,26 +79,17 @@ const observeMutation = (mutations: MutationRecord[], observer: MutationObserver
 		}
 
 		if( !create ) {
+			const core = (node as any)[COMPONENT];
+			if( core && core.cleanUp ) {	//<yes: dirty hack
+				core.cleanUp(); 
+			}
+
 			sendEvent( node, "removed" );
 		}
 	}
 
-	
-	for (const mutation of mutations)  {
-		if( mutation.type=="childList" ) {
-			if( mutation.addedNodes ) {
-				mutation.addedNodes.forEach( node => {
-					notify( node, true );
-				} );
-			}
-			
-			if( mutation.removedNodes ) {
-				mutation.removedNodes.forEach( node => {
-					notify( node, false );
-				} );
-			}
-		}
-	}
+	added.forEach( n => { if( n.isConnected ) notify( n, true ); } );
+	removed.forEach( n => { if( !n.isConnected ) notify( n, false ); } );
 }
 
 
@@ -144,17 +161,27 @@ export function dispatchEvent(ev: Event) {
 
 export function addEvent( node: Node, name: string, handler: DOMEventHandler, prepend = false ) {
 
+	if( !mutObserver ) {
+		mutObserver = new MutationObserver( observeMutation )
+		mutObserver.observe( document.body, {childList: true,subtree: true} );
+	}
+	
 	if( name=="removed" || name=="created" ) {
-		if( !mutObserver ) {
-			mutObserver = new MutationObserver( observeMutation )
-			mutObserver.observe( document.body, {childList: true,subtree: true} );
+		const core = (node as any)[COMPONENT];
+		if( core && core.addClass ) {	//<yes: dirty hack
+			core.addClass( "x4:mut")
 		}
 	}
 	else if( name=="resized" ) {
 		if (!sizeObserver) {
 			sizeObserver = new ResizeObserver( observeSize );
 		}
-		
+
+		const core = (node as any)[COMPONENT];
+		if( core && core.addClass ) {	//<yes: dirty hack
+			core.addClass( "x4:sze")
+		}
+
 		sizeObserver.observe( node as Element );
 	}
 
@@ -470,12 +497,3 @@ export interface GlobalDOMEvents {
 	created?: ( ev: Event ) => void;		// occurs when inserted in the dom
 	removed?: ( ev: Event ) => void;		// occurs when removed from dom
 }
-
-
-
-
-
-
-
-
-

package/src/core/core_element.ts

@@ -17,6 +17,13 @@
 import { EventMap, EventSource } from './core_events';
 
 
+interface TimerEntry {
+	cb: Function;
+	id: number;
+	clear: Function;
+}
+
+
 /**
  * CoreElement
  *
@@ -77,10 +84,14 @@ import { EventMap, EventSource } from './core_events';
  * el.clearInterval("poll");
  * ```
  */
+
 export class CoreElement<E extends EventMap = EventMap> {
 
 	#events: EventSource<E>;
-	#timers: Map<string, Function>;
+	#timers: Map<string, TimerEntry>;
+	#cleanup: Function[];
+
+	/** changed to stop timers when object is down
 
 	private __startTimer( name: string, ms: number, repeat: boolean, callback: ( ) => void ) {
 		if (!this.#timers) {
@@ -102,6 +113,69 @@ export class CoreElement<E extends EventMap = EventMap> {
 		const clear = this.#timers?.get(name);
 		if (clear) { clear(); }
 	}
+	*/
+
+	private __startTimer(name: string, ms: number, repeat: boolean, callback: () => void) {
+		if (!this.#timers) {
+			this.#timers = new Map();
+		}
+		else {
+			this.__stopTimer(name);
+		}
+
+		// Weak reference only: the native timer must not keep the element alive.
+		// The callback itself is stored in #timers, held by the element,
+		// so the element remains collectable while a timer is active.
+		const ref = new WeakRef(this);	// avoid keeping a ref on this.
+
+		let tick: () => void;
+
+		if (repeat) {
+			tick = () => {
+				const self = ref.deref();
+				if (!self) {
+					clearInterval(id);
+					return;
+				}
+
+				self.#timers.get(name)!.cb();
+			};
+
+			const id = setInterval( tick, ms );
+
+			this.#timers.set(name, {
+				cb: callback,
+				id,
+				clear( ) { clearInterval(id); }
+			});
+		}
+		else {
+			tick = () => {
+				const self = ref.deref();
+				if (!self) {
+					return;
+				}
+
+				// One-shot: remove the entry before firing so the map stays clean.
+				self.#timers.delete(name);
+				callback();
+			};
+
+			this.#timers.set(name, {
+				cb: callback,
+				id: setTimeout(tick, ms),
+				clear() { clearTimeout(this.id); }
+			});
+		}
+	}
+
+	private __stopTimer(name: string) {
+		const entry = this.#timers?.get(name);
+		if (entry) {
+			entry.clear();
+			this.#timers.delete(name);
+		}
+	}
 
 	/**
 	 * Sets a timeout that executes a callback function after a specified delay.
@@ -110,19 +184,19 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * @param ms - The delay in milliseconds before the callback is executed.
 	 * @param callback - The function to execute after the delay.
 	 */
-	
-	setTimeout( name: string, ms: number, callback: () => void ) {
-		this.__startTimer( name, ms, false, callback );
+
+	setTimeout(name: string, ms: number, callback: () => void) {
+		this.__startTimer(name, ms, false, callback);
 	}
-	
+
 	/**
 	 * Clears a previously set timeout.
 	 * @param name - The name of the timeout to clear.
 	 * @see setTimeout
 	 */
 
-	clearTimeout( name: string ) {
-		this.__stopTimer( name );
+	clearTimeout(name: string) {
+		this.__stopTimer(name);
 	}
 
 	/**
@@ -133,8 +207,8 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * @param callback - The function to execute after the delay.
 	 */
 
-	setInterval( name: string, ms: number, callback: ( ) => void ) {
-		this.__startTimer( name, ms, true, callback );
+	setInterval(name: string, ms: number, callback: () => void) {
+		this.__startTimer(name, ms, true, callback);
 	}
 
 	/**
@@ -143,8 +217,8 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * @see setInterval
 	 */
 
-	clearInterval( name: string ) {
-		this.__stopTimer( name );
+	clearInterval(name: string) {
+		this.__stopTimer(name);
 	}
 
 	/**
@@ -152,12 +226,40 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * This stops all scheduled callbacks and removes their references.
 	 * @see setTimeout
 	 */
-	clearTimeouts( ) {
-		for( const [id,val] of this.#timers ) {
-			val( );
+	
+	clearTimeouts() {
+		if (!this.#timers) {
+			return;
+		}
+
+		// Entries no longer mutate the map in clear(), so plain iteration is safe.
+		for (const entry of this.#timers.values()) {
+			entry.clear();
 		}
-		
-		this.#timers.clear( );
+
+		this.#timers.clear();
+	}
+
+	/**
+	 * add a cleanup function to the cleanup list
+	 * @see cleanUp
+	 */
+
+	addCleanup( fn : Function ) {
+		if( !this.#cleanup ) {
+			this.#cleanup = [];
+		}
+
+		this.#cleanup.push( fn );
+	}
+
+	/**
+	 * called when element is removed from dom
+	 */ 
+
+	cleanUp( ) {
+		this.clearTimeouts( );
+		this.#cleanup?.forEach( x => x() );
 	}
 
 	// :: EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -173,17 +275,17 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * attach to an event
 	 */
 
-	on<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ) {
-		console.assert( listener!==undefined && listener!==null );
+	on<K extends keyof E>(name: K, listener: (ev: E[K]) => void) {
+		console.assert(listener !== undefined && listener !== null);
 
-		if( !this.#events ) {
-			this.#events = new EventSource( this );
+		if (!this.#events) {
+			this.#events = new EventSource(this);
 		}
-		
-		this.#events.addListener( name, listener );
+
+		this.#events.addListener(name, listener);
 		return {
-			off: ( ) => {
-				this.#events.removeListener( name, listener );
+			off: () => {
+				this.#events.removeListener(name, listener);
 			}
 		}
 	}
@@ -197,11 +299,11 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * @see fire
 	 */
 
-	off<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ) {
-		console.assert( listener!==undefined && listener!==null );
+	off<K extends keyof E>(name: K, listener: (ev: E[K]) => void) {
+		console.assert(listener !== undefined && listener !== null);
 
-		if( this.#events ) {
-			this.#events.removeListener( name, listener );
+		if (this.#events) {
+			this.#events.removeListener(name, listener);
 		}
 	}
 
@@ -214,9 +316,9 @@ export class CoreElement<E extends EventMap = EventMap> {
 	 * @see off
 	 */
 
-	fire<K extends keyof E>( name: K, ev: E[K] ) {
-		if( this.#events ) {
-			this.#events.fire( name, ev );
+	fire<K extends keyof E>(name: K, ev: E[K]) {
+		if (this.#events) {
+			this.#events.fire(name, ev);
 		}
 	}
 }

package/src/core/core_pdf.ts

@@ -124,6 +124,7 @@ function serialize(val: PDFValue): string {
 	return String(val)
 }
 
+// @internal
 class Ref {
 	id: number
 	constructor(id: number) { this.id = id }