x4js 2.0.34 → 2.1.0-manual

package/src/core/component.ts

@@ -1,1299 +1,1299 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file component.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * 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.ts';
-import { CoreElement } from './core_element.ts';
-import { ariaValues, unitless } from './core_styles.ts';
-import { CoreEvent, EventMap } from './core_events.ts';
-import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom.ts';
-import { Application, EvMessage } from './core_application.ts';
-
-interface RefType<T extends Component> {
-	dom: T;
-}
-
-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*)?$/;
-
-/**
- * you can change css classname prefix by adding
- *
- *  ```
- * static "$cls-ns" = "<your prefix>";
- * ```
- * 
- * to your class to avoid autogenerated css class names conflicts
- */
-
-function genClassNames( x: any ): string[] {
-	
-	const classes = [];
-	let self = Object.getPrototypeOf(x);
-
-	if( self.constructor==Component ) {
-		return ["x4-comp"];
-	}
-
-	while (self && self.constructor !== Component ) {
-		const clsname:string = self.constructor.name;
-		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
-		classes.push( clsns+clsname.toLowerCase() );
-		self = Object.getPrototypeOf(self);
-	}
-
-	return classes;
-}
-
-/**
- * 
- */
-
-export type ComponentContent = Component | Component[] | string | string[] | UnsafeHtml| UnsafeHtml[] | number | boolean;
-
-let gen_id = 1000;
-
-export const makeUniqueComponentId = ( ) => {
-	return `x4-${gen_id++}`;
-}
-
-/**
- * Base properties for all components.
- */
-
-export interface ComponentProps {
-	/** HTML tag name (default: `"div"`). */
-    tag?: string;
-	/** Namespace for SVG/MathML elements. */
-    ns?: string;
-	/** Inline CSS styles. */
-    style?: Partial<CSSStyleDeclaration>;
-	/** HTML attributes. */
-    attrs?: Record<string,string|number|boolean>;
-	/** Child content (components, strings, or HTML). */
-    content?: ComponentContent;
-	/** DOM event listeners. */
-    dom_events?: GlobalDOMEvents;
-	/** Additional CSS classes. */
-    cls?: string;
-	/** Element ID. */
-    id?: string;
-	/** Reference to the component instance. */
-    ref?: RefType<any>;
-	
-	// shortcuts
-	/** Width (px or string like `"50%"` or `"3em"`). */
-    width?: string | number;
-	/** Height (px or string like `"50%"`). */
-	height?: string | number;
-	/** Component is initialy disabled. */
-	disabled?: boolean,
-	/** Component is initialy hidden. */
-	hidden?: boolean,
-	/** Enables flex layout (boolean) or sets flex-grow (number). */
-	flex?: boolean | number;
-	/** Tooltip text. */
-	tooltip?: string;
-	/** Existing DOM element to wrap. */
-	existingDOM?: HTMLElement;
-
-	//  index signature 
-	//	to avoid errors: Type 'X' has no properties in common with type 'Y' 
-	//	because all memebers here are optional.
-	//	this allow TS to recongnize derived props as ComponentProps
-	//[key: string]: any; 
-}
-
-
-/**
- * 
- */
-
-export interface ComponentEvent extends CoreEvent {
-}
-
-/**
- * 
- */
-
-export interface ComponentEvents extends EventMap {
-}
-
-/**
- * Base component class with DOM integration and event handling.
- * Auto-generates CSS class: `x4comp` + derived class names (e.g., `x4button`).
- *
- * @example
- * ```ts
- * // Basic div
- * const div = new Component({ tag: "div", content: "Hello" });
- *
- * // Custom element
- * class MyComponent extends Component {}
- * const inst = new MyComponent({ cls: "my-class" });
- * ```
- */
-
-@class_ns( "x4" )
-export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> 
-		extends CoreElement<E> {
-
-	/** The underlying DOM element of the component. */
-    readonly dom: Element;
-
-	/** The properties passed to the component's constructor. */
-    readonly props: P;
-	
-	protected readonly clsprefix: string;	// internal class name prefix (x4 internal)
-
-	#store: Map<string|symbol,any>;
-
-	
-	constructor( props: P ) {
-		super( );
-
-		this.props = props;	// copy ?
-
-		if( props.existingDOM ) {
-			this.dom = props.existingDOM;
-		}
-		else {
-			if( props.ns ) {
-				this.dom = document.createElementNS( props.ns, props.tag ?? "div" );
-			}
-			else {
-				this.dom = document.createElement( props.tag ?? "div" );
-			}
-
-			if (props.attrs) {
-				this.setAttributes( props.attrs );
-			}
-
-			if( props.cls ) {
-				this.addClass( props.cls );
-			}
-
-			if( props.hidden ) {
-				this.show( false );
-			}
-
-			if( props.flex===true ) {
-				this.addClass( "x4flex" );
-			}
-			else if( props.flex!==undefined ) {
-				this.setStyle( {
-					"flexGrow": props.flex+""
-				});
-			}
-
-			if( props.id!==undefined ) {
-				this.setAttribute( "id", props.id );
-			}
-
-			// small shortcut
-			if( props.width!==undefined ) {
-				this.setStyleValue( "width", props.width );
-			}
-
-			if( props.height!==undefined ) {
-				this.setStyleValue( "height", props.height );
-			}
-
-			if( props.tooltip ) {
-				this.setAttribute( "tooltip", props.tooltip );
-			}
-
-			if( props.style ) {
-				this.setStyle( props.style );
-			}
-
-			if( props.content ) {
-				this.setContent( props.content );
-			}
-
-			if( props.dom_events ) {
-				this.setDOMEvents( props.dom_events );
-			}
-
-			const classes = genClassNames( this );
-			this.dom.classList.add( ...classes );
-
-			// need to have children for next statements
-			// and children way be created in caller
-			if( props.disabled ) {
-				this.addDOMEvent( "created", ( ) => {
-					this.enable( false );
-				} );
-			}
-		}
-
-		(this.dom as any)[COMPONENT] = this;
-	}
-
-	/**
-     * Attaches a listener for global messages dispatched by the application.
-     * The listener is automatically removed when the component's DOM element is removed.
-     * @param cb - The callback function to execute when a global message is received.
-     */
-
-	onGlobalEvent( cb: ( ev: EvMessage ) => void ) {
-		
-		const off = Application.instance().on( "global", ev => {
-			cb( ev );
-		})
-
-		this.addDOMEvent( "removed", ( ) => off.off() );
-	}
-
-
-	// :: CLASSES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Checks if the component's DOM element has a specific CSS class.
-     * @param cls - The CSS class name to check.
-     * @returns `true` if the class is present, `false` otherwise.
-     */
-    
-	hasClass( cls: string ) {
-		return this.dom.classList.contains( cls );
-	}
-
-	/**
-     * Adds one or more CSS classes to the component's DOM element.
-     * 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(' ') ) {
-			const ccs = cls.split( " " );
-			this.dom.classList.add( ...ccs.filter(x=>x) );
-		}
-		else {
-			this.dom.classList.add(cls);
-		}
-	}
-
-	/**
-     * Removes one or more CSS classes from the component's DOM element.
-     * If `*` is passed as the class name, all classes will be removed.
-     * Multiple classes can be provided as a space-separated string.
-     * @param cls - The CSS class(es) to remove, or `*` to clear all.
-     */
-    
-	removeClass( cls: string ) {
-		if( !cls ) return;
-
-		if( cls=='*' ) {
-			this.dom.classList.value = "";
-			return;
-		}
-		
-		if( cls.indexOf(' ')>=0 ) {
-			const ccs = cls.split( " " );
-			this.dom.classList.remove(...ccs);
-		}
-		else {
-			this.dom.classList.remove(cls);
-		}
-	}
-
-	/**
-     * Removes all CSS classes from the component's DOM element that match a given regular expression.
-     * @param re - The regular expression to match against class names.
-     */
-    
-	removeClassEx( re: RegExp ) {
-		const all = Array.from( this.dom.classList );
-		all.forEach( x => {
-			if( x.match(re) ) {
-				this.dom.classList.remove( x );
-			}
-		});
-	}
-
-	/**
-     * Toggles the presence of one or more CSS classes on the component's DOM element.
-     * If a class is present, it's removed; otherwise, it's added.
-     * Multiple classes can be provided as a space-separated string.
-     * @param cls - The CSS class(es) to toggle.
-     */
-    
-	toggleClass( cls: string ) {
-		if( !cls ) return;
-		
-		const toggle = ( x: string ) => {
-			this.dom.classList.toggle(x);
-		}
-
-		if( cls.indexOf(' ')>=0 ) {
-			const ccs = cls.split( " " );
-			ccs.forEach( toggle );
-		}
-		else {
-			toggle( cls );
-		}
-	}
-
-	/**
-     * Sets or removes a CSS class based on a boolean condition.
-     * @param cls - The CSS class to manage.
-     * @param set - If `true`, the class is added; if `false`, it's removed. Defaults to `true`.
-     * @returns The component instance for chaining.
-     */
-    
-	setClass( cls: string, set: boolean = true ) : this {
-		if( set ) this.addClass(cls);
-		else this.removeClass( cls );
-		return this;
-	}
-
-	// :: ATTRIBUTES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Sets multiple HTML attributes on the component's DOM element.
-     * @param attrs - An object where keys are attribute names and values are their corresponding values.
-     * @returns The component instance for chaining.
-     */
-    
-	setAttributes( attrs: ComponentAttributes ): this {
-		for( const name in attrs ) {
-			this.setAttribute( name, attrs[name] );
-		}
-		return this;
-	}
-
-	/**
-     * Sets a single HTML attribute on the component's DOM element.
-     * If `value` is `null`, `undefined`, or `false`, the attribute will be removed.
-     * @param name - The name of the attribute.
-     * @param value - The value of the attribute.
-     */
-    
-	setAttribute( name: string, value: string | number | boolean ) {
-		if( value===null || value===undefined || value===false ) {
-			this.dom.removeAttribute( name );
-		}
-		else {
-			this.dom.setAttribute( name, ""+value );
-		}
-	}
-
-	/**
-     * Retrieves the value of an HTML attribute from the component's DOM element.
-     * @param name - The name of the attribute.
-     * @returns The string value of the attribute, or `null` if not present.
-     */
-    
-	getAttribute( name: string ): string {
-		return this.dom.getAttribute( name );
-	}
-
-	/**
-     * Retrieves the value of a `data-*` attribute from the component's DOM element.
-     * @param name - The suffix of the `data-` attribute (e.g., for `data-foo`, use `"foo"`).
-     * @returns The string value of the `data-*` attribute, or `null` if not present.
-	 * 
-	 * @cf setIntData/getIntData (number)
-	 * @cf setInternalData/getInternalData (typed data)
-     */
-    
-	getData( name: string ) : string {
-		return this.getAttribute( "data-"+name );
-	}
-
-	/**
-     * Retrieves the integer value of a `data-*` attribute from the component's DOM element.
-     * Returns `undefined` if the attribute is not present or cannot be parsed as a number.
-     * @param name - The suffix of the `data-` attribute.
-     * @returns The integer value of the `data-*` attribute, or `undefined`.
-     */
-
-	getIntData( name: string ) : number {
-		const v = parseInt( this.getAttribute( "data-"+name ) );
-		if( Number.isFinite(v) ) {
-			return v;
-		}
-
-		return undefined;
-	}
-
-	/**
-     * Sets the value of a `data-*` attribute on the component's DOM element.
-     * @param name - The suffix of the `data-` attribute.
-     * @param value - The string value to set.
-     */
-    
-	setData( name: string, value: string ) {
-		return this.setAttribute( "data-"+name, value );
-	}
-
-	/**
-	 * idem as setData but onot on dom, you can store anything 
-	 */
-
-	setInternalData<T>( name: string|symbol, value: T ): this {
-		if( !this.#store ) {
-			this.#store = new Map( );
-		}
-
-		this.#store.set( name, value );
-		return this;
-	}
-
-	getInternalData<T = any>( name: string|symbol ): T {
-		return this.#store?.get(name) as T;
-	}
-
-	
-	// :: DOM EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Adds a DOM event listener to the component's DOM element.
-     * @param name - The name of the DOM event (e.g., `'click'`, `'mouseover'`).
-     * @param listener - The event handler function.
-     * @param prepend - If `true`, the listener is added to the beginning of the event listener list. Defaults to `false`.
-     */
-
-	addDOMEvent<K extends keyof GlobalDOMEvents>( name: K, listener: GlobalDOMEvents[K], prepend = false ) {
-		addEvent( this.dom, name, listener as DOMEventHandler, prepend );
-	}
-
-	/**
-     * Sets multiple DOM event listeners on the component's DOM element.
-     * @param events - An object where keys are event names and values are their corresponding handler functions.
-     */
-
-	setDOMEvents( events: GlobalDOMEvents ) {
-		for( const name in events ) {
-			this.addDOMEvent( name as any, (events as any)[name] );
-		}
-	}
-
-	// :: HILEVEL EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-	 * tool to move named events to internal event map
-	 * @internal
-	 */
-	
-	protected mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
-		const p = props as any;
-		elements.forEach( n => {
-			if (Object.prototype.hasOwnProperty.call(p,n) && p[n]) {
-				this.on( n, p[n] );
-			}
-		});
-	}
-
-	// :: CONTENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Removes all child nodes from the component's DOM element.
-     */
-
-	clearContent( ) {
-		const d = this.dom;
-		while( d.firstChild ) {
-			d.removeChild( d.firstChild );
-		}
-	}
-
-	/**
-     * Replaces the entire content of the component's DOM element with new content.
-     * Any existing content will be cleared before the new content is added.
-     * @param content - The new content to set. Can be a single item or an array of items.
-     */
-
-	setContent( content: ComponentContent ) {
-		this.clearContent( );
-		this.appendContent( content );
-	}
-
-	/**
-     * Appends content to the end of the component's DOM element.
-     * Content can be a single Component, an array of Components, a string, an array of strings,
-     * raw HTML, an array of raw HTML, a number, or a boolean.
-     * @param content - The content to append.
-     */
-
-	appendContent( content: ComponentContent ) {
-		const set = ( d: any, c: Component | string | UnsafeHtml | number | boolean ) => {
-	
-			if (c instanceof Component ) {
-				d.appendChild( c.dom );
-			}
-			else if( c instanceof UnsafeHtml) {
-				d.insertAdjacentHTML( 'beforeend' , c.toString() );
-			}
-			else if (typeof c === "string" || typeof c === "number") {
-				const tnode = document.createTextNode(c.toString());
-				d.appendChild( tnode );
-			}
-			else if( c ) {
-				console.warn("Unknown type to append: ", c);
-			}
-		}
-
-		if( !isArray(content) ) {
-			set( this.dom, content );
-		}
-		else if( content.length<=8 ) {
-			for( const c of content ) {
-				set( this.dom, c );
-			}
-		}
-		else {
-			const fragment = document.createDocumentFragment( ) as any;
-
-			// polyfill
-			fragment.insertAdjacentHTML = ( position: string, html: string ) => {
-				const temp = document.createElement('div');
-    			temp.innerHTML = html;
-    			const nodes = Array.from(temp.childNodes);
-				fragment.append( ...nodes );
-			}
-
-			for (const child of content ) {
-				set( fragment, child );
-			}
-
-			this.dom.appendChild( fragment );
-		}
-	}		
-
-	/**
-     * Prepends content to the beginning of the component's DOM element.
-     * Content can be a single Component, an array of Components, a string, an array of strings,
-     * raw HTML, an array of raw HTML, a number, or a boolean.
-     * @param content - The content to prepend.
-     */
-
-	prependContent( content: ComponentContent ) {
-		const d = this.dom;
-		const set = ( c: Component | string | UnsafeHtml | number | boolean ) => {
-			if (c instanceof Component ) {
-				d.insertAdjacentElement( 'afterbegin', c.dom );
-			}
-			else if( c instanceof UnsafeHtml) {
-				d.insertAdjacentHTML( 'afterbegin', c.toString() );
-			}
-			else if (typeof c === "string" || typeof c === "number") {
-				d.insertAdjacentText( 'afterbegin', c.toString() );
-			}
-			else {
-				console.warn("Unknown type to append: ", c);
-			}
-		}
-
-		if( !isArray(content) ) {
-			set( content );
-		}
-		else {
-			const fragment = document.createDocumentFragment( );
-			for (const child of content ) {
-				set( child );
-			}
-
-			d.insertBefore( d.firstChild, fragment );
-		}
-	}
-
-	/**
-     * Removes a specific child component from this component's DOM element.
-     * @param child - The child component instance to remove.
-	 * @cf clearContent
-     */
-
-	removeChild( child: Component ) {
-		this.dom.removeChild( child.dom );
-	}
-
-	
-	/**
-     * Queries all descendant DOM elements matching a CSS selector and wraps them as Component instances.
-     * @param selector - The CSS selector string.
-     * @returns An array of Component instances.
-     */
-
-	queryAll( selector: string ): Component[] {
-		const all = this.dom.querySelectorAll( selector );
-		const rc = new Array( all.length );
-		all.forEach( (x,i) => rc[i]=wrapDOM(x as HTMLElement) );
-		return rc;
-	}
-
-	/**
-     * Queries the first descendant DOM element matching a CSS selector and wraps it as a Component instance.
-     * @param selector - The CSS selector string.
-     * @returns The first matching Component instance, or `null` if no match is found.
-     */
-	
-	query<T extends Component = Component>( selector: string ): T {
-		const r = this.dom.querySelector( selector );
-		return componentFromDOM<T>(r);
-	}
-
-
-	// :: STYLES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	
-	/**
-     * Sets an ARIA attribute on the component's DOM element.
-     * @param name - The name of the ARIA attribute (e.g., `'aria-label'`).
-     * @param value - The value of the ARIA attribute.
-     * @returns The component instance for chaining.
-     */
-	
-	setAria( name: keyof ariaValues, value: string | number | boolean ): this {
-		this.setAttribute( name, value );
-		return this;
-	}
-
-
-	/**
-     * Sets multiple inline CSS styles on the component's DOM element.
-     * Numeric values for properties like `width` or `height` will automatically append `"px"` unless they are unitless.
-     * @param style - An object where keys are CSS property names and values are their corresponding styles.
-     * @returns The component instance for chaining.
-     */
-
-	setStyle( style: Partial<CSSStyleDeclaration> ): this {
-		const _style = (this.dom as HTMLElement).style;
-
-		for( const name in style ) {
-			
-			let value = style[name];
-			if( !unitless[name] && (isNumber(value) || RE_NUMBER.test(value)) ) {
-				value += "px";
-			}
-
-			_style[name] = value;
-		}
-
-		return this;
-	}
-
-	/**
-     * Sets a single inline CSS style property on the component's DOM element.
-     * Numeric values for properties like `width` or `height` will automatically append `"px"` unless they are unitless.
-     * @param name - The name of the CSS property.
-     * @param value - The value of the CSS property.
-     * @returns The component instance for chaining.
-     */
-
-	setStyleValue<K extends keyof CSSStyleDeclaration>( name: K, value: CSSStyleDeclaration[K] | number ): this {
-		
-		const _style = (this.dom as HTMLElement).style;
-
-		if( isNumber(value) ) {
-			let v = value+"";
-			if( !unitless[name as string] ) {
-				v += "px";
-			}
-			
-			(_style as any)[name] = v;
-		}
-		else {
-			_style[name] = value;
-		}
-
-		return this;
-	}
-
-	/**
-     * Retrieves the computed inline CSS style value for a specific property.
-     * This only returns styles explicitly set via `setStyle` or `setStyleValue`, not inherited or stylesheet-defined styles.
-     * @param name - The name of the CSS property.
-     * @returns The value of the inline CSS property.
-     */
-
-	getStyleValue<K extends keyof CSSStyleDeclaration>( name: K ) {
-		const _style = (this.dom as HTMLElement).style;
-		return _style[name];
-	}
-
-	/**
-     * Sets the width of the component.
-     * @param w - The width value. Can be a number (interpreted as pixels) or a string (e.g., `"100px"`, `"50%"`).
-     */
-
-	setWidth( w: number | string ) {
-		this.setStyleValue( "width", isNumber(w) ? w+"px" : w );
-	}
-
-	/**
-     * Sets the height of the component.
-     * @param h - The height value. Can be a number (interpreted as pixels) or a string (e.g., `"100px"`, `"50%"`).
-     */
-
-	setHeight( h: number | string ) {
-		this.setStyleValue( "height", isNumber(h) ? h+"px" : h );
-	}
-
-	/**
-     * Sets a CSS custom property (CSS variable) on the component's DOM element.
-     * @param name - The name of the CSS variable (e.g., `'--my-color'`).
-     * @param value - The value to set for the CSS variable.
-     */
-
-	setStyleVariable( name: string, value: string ) {
-		(this.dom as HTMLElement).style.setProperty( name, value );
-	}
-
-	/**
-     * Retrieves the value of a CSS custom property (CSS variable) for the component.
-     * The computed style of the element is used.
-     * @param name - The name of the CSS variable.
-     * @returns The string value of the CSS variable.
-     */
-
-	getStyleVariable( name: string ) {
-		const style = this.getComputedStyle( );
-		return style.getPropertyValue( name );
-	}
-
-	/**
-     * Retrieves the computed style for the component's DOM element.
-     * @returns A `CSSStyleDeclaration` object representing the computed styles.
-     */
-
-	getComputedStyle( ) {
-		return getComputedStyle( this.dom );
-	}
-
-	/**
-     * Sets pointer capture on the component's DOM element for a specific pointer.
-     * @param pointerId - The unique ID of the pointer.
-	 *
-	 * @ex
-	 * control.on("pointerdown", (ev) => {
-	 * 	ev.preventDefault(); // Prevent default browser actions
-	 * 	control.setCapture(ev.pointerId);
-	 * }
-     */
-
-	setCapture( pointerId: number ) {
-		this.dom.setPointerCapture( pointerId );
-	}
-
-	/**
-     * Releases pointer capture on the component's DOM element for a specific pointer.
-     * @param pointerId - The unique ID of the pointer.
-     */
-
-	releaseCapture( pointerId: number ) {
-		this.dom.releasePointerCapture( pointerId );
-	}
-
-	/**
-     * Returns the size and position of the component's DOM element relative to the viewport.
-     * @returns A `Rect` object containing the bounding rectangle.
-     */
-
-	getBoundingRect( ): Rect {
-		const rc = this.dom.getBoundingClientRect( );
-		return new Rect( rc.x, rc.y, rc.width, rc.height );
-	}
-
-	// :: MISC ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Gives focus to the component's DOM element.
-     * @returns The component instance for chaining.
-     */
-
-	focus( ): this {
-		(this.dom as HTMLElement).focus( );
-		return this;
-	}
-
-	/**
-     * Checks if the component's DOM element currently has focus.
-     * @returns `true` if the component is focused, `false` otherwise.
-     */
-
-	hasFocus( ) {
-		return document.activeElement==this.dom;
-	}
-
-	/**
-     * Scrolls the component's DOM element into the visible area of the browser window.
-     * @param arg - Optional. A boolean (`true` for smooth scroll) or an object specifying scroll options.
-     */
-
-	scrollIntoView(arg?: boolean | ScrollIntoViewOptions) {
-		this.dom.scrollIntoView(arg);
-	}
-
-	/**
-     * 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;
-	}
-
-	/**
-     * Shows or hides the component.
-     * It toggles the `x4hidden` CSS class.
-     * @param vis - If `true`, the component is shown; if `false`, it's hidden. Defaults to `true`.
-     * @returns The component instance for chaining.
-     */
-
-	show( vis = true ): this {
-		this.setClass( 'x4hidden', !vis );
-		return this;
-	}
-
-	/**
-     * Hides the component by applying the `x4hidden` CSS class.
-     * @returns The component instance for chaining.
-     */
-
-	hide( ): this {
-		this.show( false );
-		return this;
-	}
-
-	/**
-     * Enables or disables the component.
-     * This sets the `disabled` attribute and also propagates the disabled state to child input elements.
-     * @param ena - If `true`, the component is enabled; if `false`, it's disabled. Defaults to `true`.
-     * @returns The component instance for chaining.
-     */
-
-	enable( ena = true ): this {
-		this.setAttribute( "disabled", !ena ? 'true' : null );
-
-		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
-			this.dom.disabled = !ena;
-		}
-
-		// propagate diable state to all input children
-		const nodes = this.enumChildNodes( true );
-		nodes.forEach( x => {
-			if( x instanceof HTMLInputElement || x instanceof HTMLButtonElement ) {
-				x.disabled = !ena;
-			}
-		});
-
-		return this;
-	}
-
-	/**
-     * Disables the component.
-     * @returns The component instance for chaining.
-     */
-
-	disable( ): this {
-		this.enable( false );
-		return this;
-	}
-
-	/**
-     * Checks if the component is marked as disabled.
-     * This checks for the presence of the `disabled` attribute.
-     * @returns The string value of the `disabled` attribute, or `null` if not present.
-     */
-
-	isDisabled( ) {
-		return this.getAttribute('disabled');
-	}
-
-	/**
-     * Returns the next sibling element as a Component instance.
-     * @returns The next sibling component, or `null` if none exists.
-     */
-
-	nextElement<T extends Component = Component>( ): T {
-		const nxt = this.dom.nextElementSibling;
-		return componentFromDOM<T>( nxt );
-	}
-
-	/**
-     * 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;
-		return componentFromDOM<T>( nxt );
-	}
-
-	/**
-     * Searches up the DOM tree for a parent element that is a Component and optionally matches a specific constructor.
-     * @param cls - Optional. The constructor of the Component type to match.
-     * @returns The matching parent Component instance, or `null` if not found.
-     */
-
-	parentElement<T extends Component>( cls?: Constructor<T> ): T {
-		return Component.parentElement<T>( this.dom, cls );	
-	}
-
-	/**
-     * 
-	 */
-
-	childCount( ) {
-		return this.dom.childElementCount;
-	}
-
-	/**
-	 * Static method to search up the DOM tree for a parent element that is a Component and optionally matches a specific constructor.
-     * @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 ) {
-			const cp = componentFromDOM( dom.parentElement );
-			if( !cls ) {
-				return cp as T;
-			}
-
-			if( cp && cp instanceof cls ) {
-				return cp;
-			}
-
-			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;
-		return componentFromDOM<T>( nxt );
-	}
-
-	/**
-     * 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;
-		return componentFromDOM( nxt );
-	}
-
-	/**
-     * 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;
-	}
-
-	/**
-     * Enumerates all child DOM nodes of this component.
-     * Not all nodes may be components.
-     * @param recursive - If `true`, searches all descendant nodes; otherwise, only direct children.
-     * @returns An array of child DOM nodes.
-     */
-
-	enumChildNodes( recursive: boolean ) {
-		const children: Node[] = Array.from( recursive ? this.dom.querySelectorAll( '*' ) : this.dom.children );
-		return children;
-	}
-
-	/**
-     * Visits all descendant components of this component, executing a callback function for each.
-     * The traversal stops if the callback returns `true`.
-     * @param cb - The callback function to execute for each component.
-     */
-
-	visitChildren( cb: ( el: Component ) => boolean ) {
-
-		const visit = ( p: Element ) => {
-			for( let d=p.firstElementChild; d; d=d.nextElementSibling ) {
-				const comp = componentFromDOM( d as Element );
-				if( comp ) {
-					if( cb( comp ) ) {
-						return true;
-					}
-				}
-
-				// avoid visit of svg elements
-				if( d.firstElementChild && d.tagName!="svg" && d.tagName!="SVG" ) {
-					if( visit( d ) ) {
-						return true;
-					}
-				}
-			}
-		}
-
-		visit( this.dom );
-	}
-
-	/**
-     * Animates the component's DOM element using the Web Animations API.
-     * @param keyframes - An array of keyframe objects or a `Keyframe` object.
-     * @param duration - The duration of the animation in milliseconds, or a `KeyframeAnimationOptions` object.
-     */
-
-	animate( keyframes: Keyframe[], duration: number ) {
-		this.dom.animate(keyframes,duration);
-	}
-
-
-	// :: TSX/REACT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Creates a new Component or an array of Components from JSX elements.
-     * This method is typically called by the TypeScript/JavaScript compiler when JSX is transpiled.
-     * @param clsOrTag - The class constructor of the component, an HTML tag name string, a symbol for fragments, or a callback.
-     * @param attrs - An object containing attributes and properties for the component.
-     * @param children - Any child components or content passed within the JSX.
-     * @returns A Component instance or an array of Components.
-     */
-
-	static createElement( clsOrTag: string | ComponentConstructor | symbol | CreateComponentCallBack, attrs: any, ...children: Component[] ): Component | Component[] {
-
-		let comp: Component;
-
-		// fragment
-		if( clsOrTag==this.createFragment || clsOrTag===FRAGMENT ) {
-			return children;
-		}
-
-		// class constructor, yes : dirty
-		if( clsOrTag instanceof Function ) {
-			attrs = attrs ?? {};
-			if( !attrs.children && children && children.length ) {
-				attrs.content = children;
-			}
-
-			comp = new (clsOrTag as any)( attrs ?? {} );
-		}
-		// basic tag
-		else {
-			comp = new Component( {
-				tag: clsOrTag,
-				content: children,
-				...attrs,
-			});
-		}
-
-		if( children && children.length ) {
-			//comp.setContent( children );
-		}
-
-		return comp;
-	}
-
-	/**
-     * Creates a fragment, which is an array of components without a parent DOM element.
-     * Used for grouping multiple children in JSX without introducing an extra DOM node.
-     * @returns An array of components.
-     */
-
-	static createFragment( ): Component[] {
-		return this.createElement( FRAGMENT, null ) as Component[];
-	}
-
-	// :: SPECIALS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-	/**
-     * Queries for a specific system or application-defined interface on the component.
-     * Common system interfaces include "form-element" and "tab-handler".
-     * @param name - The name of the interface to query.
-     * @returns An object conforming to the requested interface, or `null` if not supported.
-	 * 
-	 * 	system interfaces:
-	 * 		"form-element"
-	 * 		"tab-handler"
-	 */
-
-	queryInterface<T>( name: string ): T {
-		return null;
-	}
-}  
-
-
-/**
- * Type definition for a constructor that creates a Component instance.
- */
-
-type ComponentConstructor = {
-	new(...params: any[]): Component;
-};
-
-/**
- * Retrieves a Component instance associated with a given DOM element.
- * Components created by this library internally store a reference to their instance on their `dom` property.
- * @param node - The DOM element to check.
- * @returns The Component instance if found, otherwise `null`.
- */
-
-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.
- * If the HTMLElement already has an associated Component, that instance is returned.
- * Otherwise, a new `Component` is created to manage the existing DOM element.
- * @param el - The HTMLElement to wrap.
- * @returns A Component instance managing the provided HTMLElement.
- */
-
-export function wrapDOM( el: HTMLElement ): Component {
-	const com = componentFromDOM(el);
-	if( com ) {
-		return com;
-	}
-
-	return new Component( { existingDOM: el } );
-}
-
-
-// :: Special components ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-/**
- * A basic component class that provides flexible sizing, typically used in flex layouts.
- * Automatically generates CSS class: `x4flex`.
- */
-
-export class Flex extends Component {
-	constructor( ) {
-		super({})
-	}
-}
-
-/**
- * A simple spacer component used for creating empty space, often in flex containers.
- * @example
- * ```ts
- * new Space(); // default spacer
- * new Space(10); // 10px wide spacer
- * new Space("1em", "my-spacer-class");
- * ```
- */
-
-export class Space extends Component {
-	constructor( width?: number|string, cls?: string ) {
-		super( { width, cls } )
-	}
-}
-
-
-// :: HIGH LEVEL BASIC EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-
-
-/**
- * Click Event
- * click event do not have any additional parameters
- */
-
-export interface EvClick extends ComponentEvent {
-	repeat?: number;
-}
-
-/**
- * Change Event
- * value is the the element value
- */
-
-export interface EvChange extends ComponentEvent {
-	readonly value: any;
-}
-
-/**
- * Focus event
- */
-
-export interface EvFocus extends ComponentEvent {
-	readonly focus_out: boolean;
-}
-
-/**
- * Selection Event
- * value is the new selection or null
- */
-
-type ISelection = number | string | any;
-
-export interface EvSelectionChange extends ComponentEvent {
-	readonly selection: ISelection[];
-	readonly empty: boolean;
-}
-
-
-/**
- * ContextMenu Event
- */
-
-export interface EvContextMenu extends ComponentEvent {
-	uievent: MouseEvent;	// UI event that fire this event
-}
-
-/**
- * Drag/Drop event
- */
-
-export interface EvDrag extends ComponentEvent {
-	element: unknown;
-	data: any;
-}
-
-/**
- * Errors
- */
-
-export interface EvError extends ComponentEvent {
-	code: number;
-	message: string;
-}
-
-/**
- * DblClick Event
- */
-
-export interface EvDblClick extends ComponentEvent {
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file component.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * 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.ts';
+import { CoreElement } from './core_element.ts';
+import { ariaValues, unitless } from './core_styles.ts';
+import { CoreEvent, EventMap } from './core_events.ts';
+import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom.ts';
+import { Application, EvMessage } from './core_application.ts';
+
+interface RefType<T extends Component> {
+	dom: T;
+}
+
+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*)?$/;
+
+/**
+ * you can change css classname prefix by adding
+ *
+ *  ```
+ * static "$cls-ns" = "<your prefix>";
+ * ```
+ * 
+ * to your class to avoid autogenerated css class names conflicts
+ */
+
+function genClassNames( x: any ): string[] {
+	
+	const classes = [];
+	let self = Object.getPrototypeOf(x);
+
+	if( self.constructor==Component ) {
+		return ["x4-comp"];
+	}
+
+	while (self && self.constructor !== Component ) {
+		const clsname:string = self.constructor.name;
+		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
+		classes.push( clsns+clsname.toLowerCase() );
+		self = Object.getPrototypeOf(self);
+	}
+
+	return classes;
+}
+
+/**
+ * 
+ */
+
+export type ComponentContent = Component | Component[] | string | string[] | UnsafeHtml| UnsafeHtml[] | number | boolean;
+
+let gen_id = 1000;
+
+export const makeUniqueComponentId = ( ) => {
+	return `x4-${gen_id++}`;
+}
+
+/**
+ * Base properties for all components.
+ */
+
+export interface ComponentProps {
+	/** HTML tag name (default: `"div"`). */
+    tag?: string;
+	/** Namespace for SVG/MathML elements. */
+    ns?: string;
+	/** Inline CSS styles. */
+    style?: Partial<CSSStyleDeclaration>;
+	/** HTML attributes. */
+    attrs?: Record<string,string|number|boolean>;
+	/** Child content (components, strings, or HTML). */
+    content?: ComponentContent;
+	/** DOM event listeners. */
+    dom_events?: GlobalDOMEvents;
+	/** Additional CSS classes. */
+    cls?: string;
+	/** Element ID. */
+    id?: string;
+	/** Reference to the component instance. */
+    ref?: RefType<any>;
+	
+	// shortcuts
+	/** Width (px or string like `"50%"` or `"3em"`). */
+    width?: string | number;
+	/** Height (px or string like `"50%"`). */
+	height?: string | number;
+	/** Component is initialy disabled. */
+	disabled?: boolean,
+	/** Component is initialy hidden. */
+	hidden?: boolean,
+	/** Enables flex layout (boolean) or sets flex-grow (number). */
+	flex?: boolean | number;
+	/** Tooltip text. */
+	tooltip?: string;
+	/** Existing DOM element to wrap. */
+	existingDOM?: HTMLElement;
+
+	//  index signature 
+	//	to avoid errors: Type 'X' has no properties in common with type 'Y' 
+	//	because all memebers here are optional.
+	//	this allow TS to recongnize derived props as ComponentProps
+	//[key: string]: any; 
+}
+
+
+/**
+ * 
+ */
+
+export interface ComponentEvent extends CoreEvent {
+}
+
+/**
+ * 
+ */
+
+export interface ComponentEvents extends EventMap {
+}
+
+/**
+ * Base component class with DOM integration and event handling.
+ * Auto-generates CSS class: `x4comp` + derived class names (e.g., `x4button`).
+ *
+ * @example
+ * ```ts
+ * // Basic div
+ * const div = new Component({ tag: "div", content: "Hello" });
+ *
+ * // Custom element
+ * class MyComponent extends Component {}
+ * const inst = new MyComponent({ cls: "my-class" });
+ * ```
+ */
+
+@class_ns( "x4" )
+export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> 
+		extends CoreElement<E> {
+
+	/** The underlying DOM element of the component. */
+    readonly dom: Element;
+
+	/** The properties passed to the component's constructor. */
+    readonly props: P;
+	
+	protected readonly clsprefix: string;	// internal class name prefix (x4 internal)
+
+	#store: Map<string|symbol,any>;
+
+	
+	constructor( props: P ) {
+		super( );
+
+		this.props = props;	// copy ?
+
+		if( props.existingDOM ) {
+			this.dom = props.existingDOM;
+		}
+		else {
+			if( props.ns ) {
+				this.dom = document.createElementNS( props.ns, props.tag ?? "div" );
+			}
+			else {
+				this.dom = document.createElement( props.tag ?? "div" );
+			}
+
+			if (props.attrs) {
+				this.setAttributes( props.attrs );
+			}
+
+			if( props.cls ) {
+				this.addClass( props.cls );
+			}
+
+			if( props.hidden ) {
+				this.show( false );
+			}
+
+			if( props.flex===true ) {
+				this.addClass( "x4flex" );
+			}
+			else if( props.flex!==undefined ) {
+				this.setStyle( {
+					"flexGrow": props.flex+""
+				});
+			}
+
+			if( props.id!==undefined ) {
+				this.setAttribute( "id", props.id );
+			}
+
+			// small shortcut
+			if( props.width!==undefined ) {
+				this.setStyleValue( "width", props.width );
+			}
+
+			if( props.height!==undefined ) {
+				this.setStyleValue( "height", props.height );
+			}
+
+			if( props.tooltip ) {
+				this.setAttribute( "tooltip", props.tooltip );
+			}
+
+			if( props.style ) {
+				this.setStyle( props.style );
+			}
+
+			if( props.content ) {
+				this.setContent( props.content );
+			}
+
+			if( props.dom_events ) {
+				this.setDOMEvents( props.dom_events );
+			}
+
+			const classes = genClassNames( this );
+			this.dom.classList.add( ...classes );
+
+			// need to have children for next statements
+			// and children way be created in caller
+			if( props.disabled ) {
+				this.addDOMEvent( "created", ( ) => {
+					this.enable( false );
+				} );
+			}
+		}
+
+		(this.dom as any)[COMPONENT] = this;
+	}
+
+	/**
+     * Attaches a listener for global messages dispatched by the application.
+     * The listener is automatically removed when the component's DOM element is removed.
+     * @param cb - The callback function to execute when a global message is received.
+     */
+
+	onGlobalEvent( cb: ( ev: EvMessage ) => void ) {
+		
+		const off = Application.instance().on( "global", ev => {
+			cb( ev );
+		})
+
+		this.addDOMEvent( "removed", ( ) => off.off() );
+	}
+
+
+	// :: CLASSES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Checks if the component's DOM element has a specific CSS class.
+     * @param cls - The CSS class name to check.
+     * @returns `true` if the class is present, `false` otherwise.
+     */
+    
+	hasClass( cls: string ) {
+		return this.dom.classList.contains( cls );
+	}
+
+	/**
+     * Adds one or more CSS classes to the component's DOM element.
+     * 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(' ') ) {
+			const ccs = cls.split( " " );
+			this.dom.classList.add( ...ccs.filter(x=>x) );
+		}
+		else {
+			this.dom.classList.add(cls);
+		}
+	}
+
+	/**
+     * Removes one or more CSS classes from the component's DOM element.
+     * If `*` is passed as the class name, all classes will be removed.
+     * Multiple classes can be provided as a space-separated string.
+     * @param cls - The CSS class(es) to remove, or `*` to clear all.
+     */
+    
+	removeClass( cls: string ) {
+		if( !cls ) return;
+
+		if( cls=='*' ) {
+			this.dom.classList.value = "";
+			return;
+		}
+		
+		if( cls.indexOf(' ')>=0 ) {
+			const ccs = cls.split( " " );
+			this.dom.classList.remove(...ccs);
+		}
+		else {
+			this.dom.classList.remove(cls);
+		}
+	}
+
+	/**
+     * Removes all CSS classes from the component's DOM element that match a given regular expression.
+     * @param re - The regular expression to match against class names.
+     */
+    
+	removeClassEx( re: RegExp ) {
+		const all = Array.from( this.dom.classList );
+		all.forEach( x => {
+			if( x.match(re) ) {
+				this.dom.classList.remove( x );
+			}
+		});
+	}
+
+	/**
+     * Toggles the presence of one or more CSS classes on the component's DOM element.
+     * If a class is present, it's removed; otherwise, it's added.
+     * Multiple classes can be provided as a space-separated string.
+     * @param cls - The CSS class(es) to toggle.
+     */
+    
+	toggleClass( cls: string ) {
+		if( !cls ) return;
+		
+		const toggle = ( x: string ) => {
+			this.dom.classList.toggle(x);
+		}
+
+		if( cls.indexOf(' ')>=0 ) {
+			const ccs = cls.split( " " );
+			ccs.forEach( toggle );
+		}
+		else {
+			toggle( cls );
+		}
+	}
+
+	/**
+     * Sets or removes a CSS class based on a boolean condition.
+     * @param cls - The CSS class to manage.
+     * @param set - If `true`, the class is added; if `false`, it's removed. Defaults to `true`.
+     * @returns The component instance for chaining.
+     */
+    
+	setClass( cls: string, set: boolean = true ) : this {
+		if( set ) this.addClass(cls);
+		else this.removeClass( cls );
+		return this;
+	}
+
+	// :: ATTRIBUTES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Sets multiple HTML attributes on the component's DOM element.
+     * @param attrs - An object where keys are attribute names and values are their corresponding values.
+     * @returns The component instance for chaining.
+     */
+    
+	setAttributes( attrs: ComponentAttributes ): this {
+		for( const name in attrs ) {
+			this.setAttribute( name, attrs[name] );
+		}
+		return this;
+	}
+
+	/**
+     * Sets a single HTML attribute on the component's DOM element.
+     * If `value` is `null`, `undefined`, or `false`, the attribute will be removed.
+     * @param name - The name of the attribute.
+     * @param value - The value of the attribute.
+     */
+    
+	setAttribute( name: string, value: string | number | boolean ) {
+		if( value===null || value===undefined || value===false ) {
+			this.dom.removeAttribute( name );
+		}
+		else {
+			this.dom.setAttribute( name, ""+value );
+		}
+	}
+
+	/**
+     * Retrieves the value of an HTML attribute from the component's DOM element.
+     * @param name - The name of the attribute.
+     * @returns The string value of the attribute, or `null` if not present.
+     */
+    
+	getAttribute( name: string ): string {
+		return this.dom.getAttribute( name );
+	}
+
+	/**
+     * Retrieves the value of a `data-*` attribute from the component's DOM element.
+     * @param name - The suffix of the `data-` attribute (e.g., for `data-foo`, use `"foo"`).
+     * @returns The string value of the `data-*` attribute, or `null` if not present.
+	 * 
+	 * @cf setIntData/getIntData (number)
+	 * @cf setInternalData/getInternalData (typed data)
+     */
+    
+	getData( name: string ) : string {
+		return this.getAttribute( "data-"+name );
+	}
+
+	/**
+     * Retrieves the integer value of a `data-*` attribute from the component's DOM element.
+     * Returns `undefined` if the attribute is not present or cannot be parsed as a number.
+     * @param name - The suffix of the `data-` attribute.
+     * @returns The integer value of the `data-*` attribute, or `undefined`.
+     */
+
+	getIntData( name: string ) : number {
+		const v = parseInt( this.getAttribute( "data-"+name ) );
+		if( Number.isFinite(v) ) {
+			return v;
+		}
+
+		return undefined;
+	}
+
+	/**
+     * Sets the value of a `data-*` attribute on the component's DOM element.
+     * @param name - The suffix of the `data-` attribute.
+     * @param value - The string value to set.
+     */
+    
+	setData( name: string, value: string ) {
+		return this.setAttribute( "data-"+name, value );
+	}
+
+	/**
+	 * idem as setData but onot on dom, you can store anything 
+	 */
+
+	setInternalData<T>( name: string|symbol, value: T ): this {
+		if( !this.#store ) {
+			this.#store = new Map( );
+		}
+
+		this.#store.set( name, value );
+		return this;
+	}
+
+	getInternalData<T = any>( name: string|symbol ): T {
+		return this.#store?.get(name) as T;
+	}
+
+	
+	// :: DOM EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Adds a DOM event listener to the component's DOM element.
+     * @param name - The name of the DOM event (e.g., `'click'`, `'mouseover'`).
+     * @param listener - The event handler function.
+     * @param prepend - If `true`, the listener is added to the beginning of the event listener list. Defaults to `false`.
+     */
+
+	addDOMEvent<K extends keyof GlobalDOMEvents>( name: K, listener: GlobalDOMEvents[K], prepend = false ) {
+		addEvent( this.dom, name, listener as DOMEventHandler, prepend );
+	}
+
+	/**
+     * Sets multiple DOM event listeners on the component's DOM element.
+     * @param events - An object where keys are event names and values are their corresponding handler functions.
+     */
+
+	setDOMEvents( events: GlobalDOMEvents ) {
+		for( const name in events ) {
+			this.addDOMEvent( name as any, (events as any)[name] );
+		}
+	}
+
+	// :: HILEVEL EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+	 * tool to move named events to internal event map
+	 * @internal
+	 */
+	
+	protected mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
+		const p = props as any;
+		elements.forEach( n => {
+			if (Object.prototype.hasOwnProperty.call(p,n) && p[n]) {
+				this.on( n, p[n] );
+			}
+		});
+	}
+
+	// :: CONTENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Removes all child nodes from the component's DOM element.
+     */
+
+	clearContent( ) {
+		const d = this.dom;
+		while( d.firstChild ) {
+			d.removeChild( d.firstChild );
+		}
+	}
+
+	/**
+     * Replaces the entire content of the component's DOM element with new content.
+     * Any existing content will be cleared before the new content is added.
+     * @param content - The new content to set. Can be a single item or an array of items.
+     */
+
+	setContent( content: ComponentContent ) {
+		this.clearContent( );
+		this.appendContent( content );
+	}
+
+	/**
+     * Appends content to the end of the component's DOM element.
+     * Content can be a single Component, an array of Components, a string, an array of strings,
+     * raw HTML, an array of raw HTML, a number, or a boolean.
+     * @param content - The content to append.
+     */
+
+	appendContent( content: ComponentContent ) {
+		const set = ( d: any, c: Component | string | UnsafeHtml | number | boolean ) => {
+	
+			if (c instanceof Component ) {
+				d.appendChild( c.dom );
+			}
+			else if( c instanceof UnsafeHtml) {
+				d.insertAdjacentHTML( 'beforeend' , c.toString() );
+			}
+			else if (typeof c === "string" || typeof c === "number") {
+				const tnode = document.createTextNode(c.toString());
+				d.appendChild( tnode );
+			}
+			else if( c ) {
+				console.warn("Unknown type to append: ", c);
+			}
+		}
+
+		if( !isArray(content) ) {
+			set( this.dom, content );
+		}
+		else if( content.length<=8 ) {
+			for( const c of content ) {
+				set( this.dom, c );
+			}
+		}
+		else {
+			const fragment = document.createDocumentFragment( ) as any;
+
+			// polyfill
+			fragment.insertAdjacentHTML = ( position: string, html: string ) => {
+				const temp = document.createElement('div');
+    			temp.innerHTML = html;
+    			const nodes = Array.from(temp.childNodes);
+				fragment.append( ...nodes );
+			}
+
+			for (const child of content ) {
+				set( fragment, child );
+			}
+
+			this.dom.appendChild( fragment );
+		}
+	}		
+
+	/**
+     * Prepends content to the beginning of the component's DOM element.
+     * Content can be a single Component, an array of Components, a string, an array of strings,
+     * raw HTML, an array of raw HTML, a number, or a boolean.
+     * @param content - The content to prepend.
+     */
+
+	prependContent( content: ComponentContent ) {
+		const d = this.dom;
+		const set = ( c: Component | string | UnsafeHtml | number | boolean ) => {
+			if (c instanceof Component ) {
+				d.insertAdjacentElement( 'afterbegin', c.dom );
+			}
+			else if( c instanceof UnsafeHtml) {
+				d.insertAdjacentHTML( 'afterbegin', c.toString() );
+			}
+			else if (typeof c === "string" || typeof c === "number") {
+				d.insertAdjacentText( 'afterbegin', c.toString() );
+			}
+			else {
+				console.warn("Unknown type to append: ", c);
+			}
+		}
+
+		if( !isArray(content) ) {
+			set( content );
+		}
+		else {
+			const fragment = document.createDocumentFragment( );
+			for (const child of content ) {
+				set( child );
+			}
+
+			d.insertBefore( d.firstChild, fragment );
+		}
+	}
+
+	/**
+     * Removes a specific child component from this component's DOM element.
+     * @param child - The child component instance to remove.
+	 * @cf clearContent
+     */
+
+	removeChild( child: Component ) {
+		this.dom.removeChild( child.dom );
+	}
+
+	
+	/**
+     * Queries all descendant DOM elements matching a CSS selector and wraps them as Component instances.
+     * @param selector - The CSS selector string.
+     * @returns An array of Component instances.
+     */
+
+	queryAll( selector: string ): Component[] {
+		const all = this.dom.querySelectorAll( selector );
+		const rc = new Array( all.length );
+		all.forEach( (x,i) => rc[i]=wrapDOM(x as HTMLElement) );
+		return rc;
+	}
+
+	/**
+     * Queries the first descendant DOM element matching a CSS selector and wraps it as a Component instance.
+     * @param selector - The CSS selector string.
+     * @returns The first matching Component instance, or `null` if no match is found.
+     */
+	
+	query<T extends Component = Component>( selector: string ): T {
+		const r = this.dom.querySelector( selector );
+		return componentFromDOM<T>(r);
+	}
+
+
+	// :: STYLES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	
+	/**
+     * Sets an ARIA attribute on the component's DOM element.
+     * @param name - The name of the ARIA attribute (e.g., `'aria-label'`).
+     * @param value - The value of the ARIA attribute.
+     * @returns The component instance for chaining.
+     */
+	
+	setAria( name: keyof ariaValues, value: string | number | boolean ): this {
+		this.setAttribute( name, value );
+		return this;
+	}
+
+
+	/**
+     * Sets multiple inline CSS styles on the component's DOM element.
+     * Numeric values for properties like `width` or `height` will automatically append `"px"` unless they are unitless.
+     * @param style - An object where keys are CSS property names and values are their corresponding styles.
+     * @returns The component instance for chaining.
+     */
+
+	setStyle( style: Partial<CSSStyleDeclaration> ): this {
+		const _style = (this.dom as HTMLElement).style;
+
+		for( const name in style ) {
+			
+			let value = style[name];
+			if( !unitless[name] && (isNumber(value) || RE_NUMBER.test(value)) ) {
+				value += "px";
+			}
+
+			_style[name] = value;
+		}
+
+		return this;
+	}
+
+	/**
+     * Sets a single inline CSS style property on the component's DOM element.
+     * Numeric values for properties like `width` or `height` will automatically append `"px"` unless they are unitless.
+     * @param name - The name of the CSS property.
+     * @param value - The value of the CSS property.
+     * @returns The component instance for chaining.
+     */
+
+	setStyleValue<K extends keyof CSSStyleDeclaration>( name: K, value: CSSStyleDeclaration[K] | number ): this {
+		
+		const _style = (this.dom as HTMLElement).style;
+
+		if( isNumber(value) ) {
+			let v = value+"";
+			if( !unitless[name as string] ) {
+				v += "px";
+			}
+			
+			(_style as any)[name] = v;
+		}
+		else {
+			_style[name] = value;
+		}
+
+		return this;
+	}
+
+	/**
+     * Retrieves the computed inline CSS style value for a specific property.
+     * This only returns styles explicitly set via `setStyle` or `setStyleValue`, not inherited or stylesheet-defined styles.
+     * @param name - The name of the CSS property.
+     * @returns The value of the inline CSS property.
+     */
+
+	getStyleValue<K extends keyof CSSStyleDeclaration>( name: K ) {
+		const _style = (this.dom as HTMLElement).style;
+		return _style[name];
+	}
+
+	/**
+     * Sets the width of the component.
+     * @param w - The width value. Can be a number (interpreted as pixels) or a string (e.g., `"100px"`, `"50%"`).
+     */
+
+	setWidth( w: number | string ) {
+		this.setStyleValue( "width", isNumber(w) ? w+"px" : w );
+	}
+
+	/**
+     * Sets the height of the component.
+     * @param h - The height value. Can be a number (interpreted as pixels) or a string (e.g., `"100px"`, `"50%"`).
+     */
+
+	setHeight( h: number | string ) {
+		this.setStyleValue( "height", isNumber(h) ? h+"px" : h );
+	}
+
+	/**
+     * Sets a CSS custom property (CSS variable) on the component's DOM element.
+     * @param name - The name of the CSS variable (e.g., `'--my-color'`).
+     * @param value - The value to set for the CSS variable.
+     */
+
+	setStyleVariable( name: string, value: string ) {
+		(this.dom as HTMLElement).style.setProperty( name, value );
+	}
+
+	/**
+     * Retrieves the value of a CSS custom property (CSS variable) for the component.
+     * The computed style of the element is used.
+     * @param name - The name of the CSS variable.
+     * @returns The string value of the CSS variable.
+     */
+
+	getStyleVariable( name: string ) {
+		const style = this.getComputedStyle( );
+		return style.getPropertyValue( name );
+	}
+
+	/**
+     * Retrieves the computed style for the component's DOM element.
+     * @returns A `CSSStyleDeclaration` object representing the computed styles.
+     */
+
+	getComputedStyle( ) {
+		return getComputedStyle( this.dom );
+	}
+
+	/**
+     * Sets pointer capture on the component's DOM element for a specific pointer.
+     * @param pointerId - The unique ID of the pointer.
+	 *
+	 * @ex
+	 * control.on("pointerdown", (ev) => {
+	 * 	ev.preventDefault(); // Prevent default browser actions
+	 * 	control.setCapture(ev.pointerId);
+	 * }
+     */
+
+	setCapture( pointerId: number ) {
+		this.dom.setPointerCapture( pointerId );
+	}
+
+	/**
+     * Releases pointer capture on the component's DOM element for a specific pointer.
+     * @param pointerId - The unique ID of the pointer.
+     */
+
+	releaseCapture( pointerId: number ) {
+		this.dom.releasePointerCapture( pointerId );
+	}
+
+	/**
+     * Returns the size and position of the component's DOM element relative to the viewport.
+     * @returns A `Rect` object containing the bounding rectangle.
+     */
+
+	getBoundingRect( ): Rect {
+		const rc = this.dom.getBoundingClientRect( );
+		return new Rect( rc.x, rc.y, rc.width, rc.height );
+	}
+
+	// :: MISC ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Gives focus to the component's DOM element.
+     * @returns The component instance for chaining.
+     */
+
+	focus( ): this {
+		(this.dom as HTMLElement).focus( );
+		return this;
+	}
+
+	/**
+     * Checks if the component's DOM element currently has focus.
+     * @returns `true` if the component is focused, `false` otherwise.
+     */
+
+	hasFocus( ) {
+		return document.activeElement==this.dom;
+	}
+
+	/**
+     * Scrolls the component's DOM element into the visible area of the browser window.
+     * @param arg - Optional. A boolean (`true` for smooth scroll) or an object specifying scroll options.
+     */
+
+	scrollIntoView(arg?: boolean | ScrollIntoViewOptions) {
+		this.dom.scrollIntoView(arg);
+	}
+
+	/**
+     * 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;
+	}
+
+	/**
+     * Shows or hides the component.
+     * It toggles the `x4hidden` CSS class.
+     * @param vis - If `true`, the component is shown; if `false`, it's hidden. Defaults to `true`.
+     * @returns The component instance for chaining.
+     */
+
+	show( vis = true ): this {
+		this.setClass( 'x4hidden', !vis );
+		return this;
+	}
+
+	/**
+     * Hides the component by applying the `x4hidden` CSS class.
+     * @returns The component instance for chaining.
+     */
+
+	hide( ): this {
+		this.show( false );
+		return this;
+	}
+
+	/**
+     * Enables or disables the component.
+     * This sets the `disabled` attribute and also propagates the disabled state to child input elements.
+     * @param ena - If `true`, the component is enabled; if `false`, it's disabled. Defaults to `true`.
+     * @returns The component instance for chaining.
+     */
+
+	enable( ena = true ): this {
+		this.setAttribute( "disabled", !ena ? 'true' : null );
+
+		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
+			this.dom.disabled = !ena;
+		}
+
+		// propagate diable state to all input children
+		const nodes = this.enumChildNodes( true );
+		nodes.forEach( x => {
+			if( x instanceof HTMLInputElement || x instanceof HTMLButtonElement ) {
+				x.disabled = !ena;
+			}
+		});
+
+		return this;
+	}
+
+	/**
+     * Disables the component.
+     * @returns The component instance for chaining.
+     */
+
+	disable( ): this {
+		this.enable( false );
+		return this;
+	}
+
+	/**
+     * Checks if the component is marked as disabled.
+     * This checks for the presence of the `disabled` attribute.
+     * @returns The string value of the `disabled` attribute, or `null` if not present.
+     */
+
+	isDisabled( ) {
+		return this.getAttribute('disabled');
+	}
+
+	/**
+     * Returns the next sibling element as a Component instance.
+     * @returns The next sibling component, or `null` if none exists.
+     */
+
+	nextElement<T extends Component = Component>( ): T {
+		const nxt = this.dom.nextElementSibling;
+		return componentFromDOM<T>( nxt );
+	}
+
+	/**
+     * 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;
+		return componentFromDOM<T>( nxt );
+	}
+
+	/**
+     * Searches up the DOM tree for a parent element that is a Component and optionally matches a specific constructor.
+     * @param cls - Optional. The constructor of the Component type to match.
+     * @returns The matching parent Component instance, or `null` if not found.
+     */
+
+	parentElement<T extends Component>( cls?: Constructor<T> ): T {
+		return Component.parentElement<T>( this.dom, cls );	
+	}
+
+	/**
+     * 
+	 */
+
+	childCount( ) {
+		return this.dom.childElementCount;
+	}
+
+	/**
+	 * Static method to search up the DOM tree for a parent element that is a Component and optionally matches a specific constructor.
+     * @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 ) {
+			const cp = componentFromDOM( dom.parentElement );
+			if( !cls ) {
+				return cp as T;
+			}
+
+			if( cp && cp instanceof cls ) {
+				return cp;
+			}
+
+			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;
+		return componentFromDOM<T>( nxt );
+	}
+
+	/**
+     * 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;
+		return componentFromDOM( nxt );
+	}
+
+	/**
+     * 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;
+	}
+
+	/**
+     * Enumerates all child DOM nodes of this component.
+     * Not all nodes may be components.
+     * @param recursive - If `true`, searches all descendant nodes; otherwise, only direct children.
+     * @returns An array of child DOM nodes.
+     */
+
+	enumChildNodes( recursive: boolean ) {
+		const children: Node[] = Array.from( recursive ? this.dom.querySelectorAll( '*' ) : this.dom.children );
+		return children;
+	}
+
+	/**
+     * Visits all descendant components of this component, executing a callback function for each.
+     * The traversal stops if the callback returns `true`.
+     * @param cb - The callback function to execute for each component.
+     */
+
+	visitChildren( cb: ( el: Component ) => boolean ) {
+
+		const visit = ( p: Element ) => {
+			for( let d=p.firstElementChild; d; d=d.nextElementSibling ) {
+				const comp = componentFromDOM( d as Element );
+				if( comp ) {
+					if( cb( comp ) ) {
+						return true;
+					}
+				}
+
+				// avoid visit of svg elements
+				if( d.firstElementChild && d.tagName!="svg" && d.tagName!="SVG" ) {
+					if( visit( d ) ) {
+						return true;
+					}
+				}
+			}
+		}
+
+		visit( this.dom );
+	}
+
+	/**
+     * Animates the component's DOM element using the Web Animations API.
+     * @param keyframes - An array of keyframe objects or a `Keyframe` object.
+     * @param duration - The duration of the animation in milliseconds, or a `KeyframeAnimationOptions` object.
+     */
+
+	animate( keyframes: Keyframe[], duration: number ) {
+		this.dom.animate(keyframes,duration);
+	}
+
+
+	// :: TSX/REACT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Creates a new Component or an array of Components from JSX elements.
+     * This method is typically called by the TypeScript/JavaScript compiler when JSX is transpiled.
+     * @param clsOrTag - The class constructor of the component, an HTML tag name string, a symbol for fragments, or a callback.
+     * @param attrs - An object containing attributes and properties for the component.
+     * @param children - Any child components or content passed within the JSX.
+     * @returns A Component instance or an array of Components.
+     */
+
+	static createElement( clsOrTag: string | ComponentConstructor | symbol | CreateComponentCallBack, attrs: any, ...children: Component[] ): Component | Component[] {
+
+		let comp: Component;
+
+		// fragment
+		if( clsOrTag==this.createFragment || clsOrTag===FRAGMENT ) {
+			return children;
+		}
+
+		// class constructor, yes : dirty
+		if( clsOrTag instanceof Function ) {
+			attrs = attrs ?? {};
+			if( !attrs.children && children && children.length ) {
+				attrs.content = children;
+			}
+
+			comp = new (clsOrTag as any)( attrs ?? {} );
+		}
+		// basic tag
+		else {
+			comp = new Component( {
+				tag: clsOrTag,
+				content: children,
+				...attrs,
+			});
+		}
+
+		if( children && children.length ) {
+			//comp.setContent( children );
+		}
+
+		return comp;
+	}
+
+	/**
+     * Creates a fragment, which is an array of components without a parent DOM element.
+     * Used for grouping multiple children in JSX without introducing an extra DOM node.
+     * @returns An array of components.
+     */
+
+	static createFragment( ): Component[] {
+		return this.createElement( FRAGMENT, null ) as Component[];
+	}
+
+	// :: SPECIALS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+	/**
+     * Queries for a specific system or application-defined interface on the component.
+     * Common system interfaces include "form-element" and "tab-handler".
+     * @param name - The name of the interface to query.
+     * @returns An object conforming to the requested interface, or `null` if not supported.
+	 * 
+	 * 	system interfaces:
+	 * 		"form-element"
+	 * 		"tab-handler"
+	 */
+
+	queryInterface<T>( name: string ): T {
+		return null;
+	}
+}  
+
+
+/**
+ * Type definition for a constructor that creates a Component instance.
+ */
+
+type ComponentConstructor = {
+	new(...params: any[]): Component;
+};
+
+/**
+ * Retrieves a Component instance associated with a given DOM element.
+ * Components created by this library internally store a reference to their instance on their `dom` property.
+ * @param node - The DOM element to check.
+ * @returns The Component instance if found, otherwise `null`.
+ */
+
+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.
+ * If the HTMLElement already has an associated Component, that instance is returned.
+ * Otherwise, a new `Component` is created to manage the existing DOM element.
+ * @param el - The HTMLElement to wrap.
+ * @returns A Component instance managing the provided HTMLElement.
+ */
+
+export function wrapDOM( el: HTMLElement ): Component {
+	const com = componentFromDOM(el);
+	if( com ) {
+		return com;
+	}
+
+	return new Component( { existingDOM: el } );
+}
+
+
+// :: Special components ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+/**
+ * A basic component class that provides flexible sizing, typically used in flex layouts.
+ * Automatically generates CSS class: `x4flex`.
+ */
+
+export class Flex extends Component {
+	constructor( ) {
+		super({})
+	}
+}
+
+/**
+ * A simple spacer component used for creating empty space, often in flex containers.
+ * @example
+ * ```ts
+ * new Space(); // default spacer
+ * new Space(10); // 10px wide spacer
+ * new Space("1em", "my-spacer-class");
+ * ```
+ */
+
+export class Space extends Component {
+	constructor( width?: number|string, cls?: string ) {
+		super( { width, cls } )
+	}
+}
+
+
+// :: HIGH LEVEL BASIC EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+
+/**
+ * Click Event
+ * click event do not have any additional parameters
+ */
+
+export interface EvClick extends ComponentEvent {
+	repeat?: number;
+}
+
+/**
+ * Change Event
+ * value is the the element value
+ */
+
+export interface EvChange extends ComponentEvent {
+	readonly value: any;
+}
+
+/**
+ * Focus event
+ */
+
+export interface EvFocus extends ComponentEvent {
+	readonly focus_out: boolean;
+}
+
+/**
+ * Selection Event
+ * value is the new selection or null
+ */
+
+type ISelection = number | string | any;
+
+export interface EvSelectionChange extends ComponentEvent {
+	readonly selection: ISelection[];
+	readonly empty: boolean;
+}
+
+
+/**
+ * ContextMenu Event
+ */
+
+export interface EvContextMenu extends ComponentEvent {
+	uievent: MouseEvent;	// UI event that fire this event
+}
+
+/**
+ * Drag/Drop event
+ */
+
+export interface EvDrag extends ComponentEvent {
+	element: unknown;
+	data: any;
+}
+
+/**
+ * Errors
+ */
+
+export interface EvError extends ComponentEvent {
+	code: number;
+	message: string;
+}
+
+/**
+ * DblClick Event
+ */
+
+export interface EvDblClick extends ComponentEvent {
+}
+