x4js 2.0.12 → 2.0.14

package/lib/types/x4js.d.ts

@@ -12,7 +12,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  *
  * AUTOGENERATED CODE, DO NOT MODIFY
- * generated on Fri Oct 04 2024
+ * generated on Tue Apr 22 2025
  */
 
 
@@ -55,6 +55,16 @@ declare module 'x4js' {
 		constructor( l: number, t: number, w: number, h: number );
 		constructor( l: Rect );
 		constructor( l: number | IRect, t: number, w: number, h: number );
+		contains( pt: Point ): boolean;
+		contains( rc: Rect ): boolean;
+		contains( arg: any ): boolean;
+		touches( rc: Rect ): boolean;
+		normalize(  ): this;
+	}
+
+	export interface Size  {
+		w: number;
+		h: number;
 	}
 
 	export interface Point  {
@@ -62,12 +72,26 @@ declare module 'x4js' {
 		y: number;
 	}
 
+	export interface Size  {
+		w: number;
+		h: number;
+	}
+
 	export interface IComponentInterface  {
 	}
 
 	export interface IFormElement extends IComponentInterface {
 		getRawValue(  ): any;
 		setRawValue( v: any ): void;
+		isValid(  ): boolean;
+	}
+
+	export interface ITabHandler extends IComponentInterface {
+		focusNext( next: boolean ): boolean;
+	}
+
+	export interface ITipHandler extends IComponentInterface {
+		getTip(  ): string;
 	}
 
 	interface Features  {
@@ -75,7 +99,7 @@ declare module 'x4js' {
 	}
 
 	export class Timer  {
-		_timers: Map<string,any>;
+		_timers: Map<string, any>;
 		setTimeout( name: string, time: number, callback: Function ): void;
 		clearTimeout( name: string ): void;
 		setInterval( name: string, time: number, callback: Function ): void;
@@ -83,6 +107,15 @@ declare module 'x4js' {
 		clearAllTimeouts(  ): void;
 	}
 
+	enum kbNav {
+		first,
+		prev,
+		pgdn,
+		pgup,
+		next,
+		last,
+	}
+
 	// ---------------------------------------
 	// from /src/core/core_events.ts
 
@@ -106,6 +139,7 @@ declare module 'x4js' {
 		_registry: Map<string,EventCallback[]>;
 		constructor( source: unknown );
 		addListener<K extends keyof E>( name: K, callback: ( ev: E[K] ) => void, capturing: any ): void;
+		removeListener<K extends keyof E>( name: K, callback: (ev: E[K]) => any ): void;
 		fire<K extends keyof E>( name: K, evx: E[K] ): void;
 	}
 
@@ -123,6 +157,7 @@ declare module 'x4js' {
 		clearInterval( name: string ): void;
 		clearTimeouts(  ): void;
 		on<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ): void;
+		off<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ): void;
 		fire<K extends keyof E>( name: K, ev: E[K] ): void;
 	}
 
@@ -259,7 +294,7 @@ declare module 'x4js' {
 
 	type ComponentAttributes = Record<string,string|number|boolean>;
 
-	type ComponentContent = Component | string | UnsafeHtml | number | boolean | Component[];
+	type ComponentContent = Component | Component[] | string | string[] | UnsafeHtml | UnsafeHtml[] | number | boolean;
 
 	export interface ComponentProps  {
 		tag?: string;
@@ -275,6 +310,7 @@ declare module 'x4js' {
 		height?: string | number;
 		disabled?: true;
 		hidden?: true;
+		flex?: boolean | number;
 		tooltip?: string;
 		existingDOM?: HTMLElement;
 	}
@@ -285,20 +321,23 @@ declare module 'x4js' {
 	export interface ComponentEvents extends EventMap {
 	}
 
-	export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> extends CoreElement<E> {
+	@class_ns( "x4" ) export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> extends CoreElement<E> {
 		dom: Element;
 		props: P;
-		store: Map<string|Symbol,any>;
+		clsprefix: string;
+		#store: Map<string|Symbol,any>;
 		constructor( props: P );
 		hasClass( cls: string ): void;
 		addClass( cls: string ): void;
 		removeClass( cls: string ): void;
+		removeClassEx( re: RegExp ): void;
 		toggleClass( cls: string ): void;
 		setClass( cls: string, set: boolean ): void;
 		setAttributes( attrs: ComponentAttributes ): void;
 		setAttribute( name: string, value: string | number | boolean ): void;
 		getAttribute( name: string ): string;
 		getData( name: string ): string;
+		getIntData( name: string ): number;
 		setData( name: string, value: string ): void;
 		setInternalData( name: string|Symbol, value: any ): this;
 		getInternalData( name: string|Symbol ): any;
@@ -323,18 +362,20 @@ declare module 'x4js' {
 		getComputedStyle(  ): void;
 		setCapture( pointerId: number ): void;
 		releaseCapture( pointerId: number ): void;
-		getBoundingRect(  ): Rect;
-		focus(  ): void;
+		getBoundingRect(  ): IRect;
+		focus(  ): this;
+		hasFocus(  ): void;
 		scrollIntoView( arg: boolean | ScrollIntoViewOptions ): void;
 		isVisible(  ): void;
-		show( vis: any ): void;
-		hide(  ): void;
-		enable( ena: any ): void;
-		disable(  ): void;
+		show( vis: any ): this;
+		hide(  ): this;
+		enable( ena: any ): this;
+		disable(  ): this;
 		isDisabled(  ): void;
 		nextElement<T extends Component = Component>(  ): T;
 		prevElement<T extends Component = Component>(  ): T;
 		parentElement<T extends Component>( cls: Constructor<T> ): T;
+		parentElement<T extends Component>( dom: Node, cls: Constructor<T> ): T;
 		firstChild<T extends Component = Component>(  ): T;
 		lastChild<T extends Component = Component>(  ): T;
 		enumChildComponents( recursive: boolean ): void;
@@ -353,6 +394,10 @@ declare module 'x4js' {
 		constructor(  );
 	}
 
+	export class Space extends Component {
+		constructor( width: number|string, cls: string );
+	}
+
 	export interface EvClick extends ComponentEvent {
 	}
 
@@ -360,11 +405,16 @@ declare module 'x4js' {
 		value: any;
 	}
 
+	export interface EvFocus extends ComponentEvent {
+		focus_out: boolean;
+	}
+
 	interface ISelection  {
 	}
 
 	export interface EvSelectionChange extends ComponentEvent {
 		selection: ISelection;
+		empty: boolean;
 	}
 
 	export interface EvContextMenu extends ComponentEvent {
@@ -434,7 +484,7 @@ declare module 'x4js' {
 
 	type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
 
-	type FilterCallback = ( el: Component ) => boolean;
+	type FilterCallback = ( el: Component, data: DataTransfer ) => boolean;
 
 	 class DragManager  {
 		dragSource: Component;
@@ -465,6 +515,7 @@ declare module 'x4js' {
 	}
 
 	interface RouterEvents extends EventMap {
+		change: EvChange;
 		error: EvError;
 	}
 
@@ -486,6 +537,7 @@ declare module 'x4js' {
 		_dom: SVGElement;
 		constructor( tag: string );
 		getDom(  ): void;
+		reset(  ): void;
 		stroke( color: string, width: number ): this;
 		strokeWidth( width: number ): this;
 		strokeCap( cap: "butt" | "round" | "sqaure" ): void;
@@ -493,11 +545,15 @@ declare module 'x4js' {
 		antiAlias( set: boolean ): void;
 		fill( color: string ): this;
 		no_fill(  ): this;
+		getAttr( name: string ): string;
+		getNumAttr( name: string ): void;
 		setAttr( name: string, value: string ): this;
 		setStyle<K extends keyof CSSStyleDeclaration>( name: K, value: string | number ): this;
-		addClass( cls: string ): void;
+		addClass( cls: string ): this;
+		removeClass( cls: string ): this;
 		clip( id: string ): this;
 		transform( tr: string ): this;
+		clear_transform(  ): void;
 		rotate( deg: number, cx: number, cy: number ): this;
 		translate( dx: number, dy: number ): this;
 		scale( x: number ): this;
@@ -508,10 +564,12 @@ declare module 'x4js' {
 		_path: string;
 		constructor(  );
 		_update(  ): this;
+		reset(  ): void;
 		moveTo( x: number, y: number ): this;
 		lineTo( x: number, y: number ): this;
+		curveTo( x1: number, y1: number, x2: number, y2: number, x3: number, y3: number ): void;
 		closePath(  ): this;
-		arc( x: number, y: number, r: number, start: number, end: number ): this;
+		arc( x: number, y: number, r: number, start: number, end: number, clockwise: any ): this;
 	}
 
 	export class SvgText extends SvgItem {
@@ -523,6 +581,10 @@ declare module 'x4js' {
 		verticalAlign( align: 'top' | 'center' | 'bottom' | 'baseline' ): this;
 	}
 
+	export class SvgIcon extends SvgItem {
+		constructor( svg: string );
+	}
+
 	export class SvgShape extends SvgItem {
 		constructor( tag: string );
 	}
@@ -540,49 +602,59 @@ declare module 'x4js' {
 	export class SvgGroup extends SvgItem {
 		constructor( tag: any );
 		append<K extends SvgItem>( item: K ): K;
+		appendItems<K extends SvgItem>( items: K[] ): void;
 		path(  ): SvgPath;
 		text( x: number, y: number, txt: string ): void;
-		ellipse( x: number, y: number, r1: number, r2: any ): SvgShape;
+		ellipse( x: number, y: number, r1: number, r2: number ): SvgShape;
+		circle( x: number, y: number, r1: number ): SvgShape;
+		icon( svg: string, x: number, y: number, w: number, h: number ): SvgIcon;
 		rect( x: number, y: number, w: number, h: number ): SvgShape;
-		group(  ): void;
+		group( id: string ): void;
 		linear_gradient( x1: number_or_perc, y1: number_or_perc, x2: number_or_perc, y2: number_or_perc ): void;
 		clear(  ): void;
 	}
 
 	export class SvgBuilder extends SvgGroup {
 		g_clip_id: any;
+		g_pat_id: any;
 		constructor(  );
 		addClip( x: number, y: number, w: number, h: number ): void;
+		addPattern( x: number, y: number, w: number, h: number ): void;
 	}
 
 	interface SvgProps extends ComponentProps {
 		viewbox?: string;
-		svg?: SvgBuilder;
+		svg: SvgBuilder;
 	}
 
 	export class SvgComponent<P extends SvgProps = SvgProps> extends Component<P> {
 		constructor( props: P );
+		setSvg( bld: SvgBuilder ): void;
+		addItems( items: SvgItem[] ): void;
 	}
 
 	// ---------------------------------------
 	// from /src/components/boxes/boxes.ts
 
 	export interface BoxProps extends ComponentProps {
+		tag?: string;
 	}
 
-	export class Box<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+	@class_ns( "x4" ) export class Box<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
 	}
 
-	export class HBox<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	@class_ns( "x4" ) export class HBox<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
 	}
 
-	export class VBox<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	@class_ns( "x4" ) export class VBox<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
 		constructor( p: P );
 	}
 
+	type ContentBuilder = ( ) => Component;
+
 	interface StackItem  {
 		name: string;
-		content: Component;
+		content: Component | ContentBuilder;
 	}
 
 	interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
@@ -590,15 +662,66 @@ declare module 'x4js' {
 		items: StackItem[];
 	}
 
-	interface _StackItem extends StackItem {
+	interface StackItemEx extends StackItem {
 		page: Component;
 	}
 
-	export class StackBox extends Box<StackedLayoutProps> {
-		_items: _StackItem[];
+	@class_ns( "x4" ) export class StackBox extends Box<StackedLayoutProps> {
+		_items: StackItemEx[];
 		constructor( props: StackedLayoutProps );
+		addItem( item: StackItem ): void;
 		select( name: string ): void;
-		_createPage( page: _StackItem ): void;
+		_createPage( page: StackItemEx ): void;
+		getPage( name: string ): void;
+	}
+
+	export interface GridboxProps extends BoxProps {
+		rows?: number | string | string[];
+		columns?: number | string | string[];
+	}
+
+	@class_ns("x4") export class GridBox<P extends GridboxProps=GridboxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+		constructor( props: P );
+		setRows( r: number | string | string[] ): void;
+		setCols( r: number | string | string[] ): void;
+		setRowCount( n: number ): void;
+		setColCount( n: number ): void;
+		setTemplate( t: string[] ): void;
+	}
+
+	interface MasonryProps extends Omit<BoxProps,"content"> {
+		items: Component[];
+	}
+
+	@class_ns("x4") export class MasonryBox extends Box<MasonryProps> {
+		constructor( props: MasonryProps );
+		resizeItem( item: Component ): void;
+		resizeAllItems(  ): void;
+		setItems( items: Component[] ): void;
+	}
+
+	// ---------------------------------------
+	// from /src/components/breadcrumb/breadcrumb.ts
+
+	interface BreadcrumbEvents extends ComponentEvents {
+		click: EvClick;
+	}
+
+	interface BreadcrumbElement  {
+		name?: string;
+		icon?: string;
+		label: string;
+		click?: ( name: string ) => void;
+	}
+
+	interface BreadcrumbsProps extends BoxProps {
+		items: BreadcrumbElement[];
+		click?: EventCallback<EvClick>;
+	}
+
+	@class_ns( "x4" ) export class Breadcrumbs extends HBox<BreadcrumbsProps,BreadcrumbEvents> {
+		constructor( props: BreadcrumbsProps );
+		setItems( elements: BreadcrumbElement[ ] ): void;
 	}
 
 	// ---------------------------------------
@@ -618,7 +741,7 @@ declare module 'x4js' {
 		iconId?: string;
 	}
 
-	export class Icon extends Component<IconProps> {
+	@class_ns( "x4" ) export class Icon extends Component<IconProps> {
 		constructor( props: IconProps );
 		setIcon( iconId: string ): void;
 	}
@@ -633,12 +756,18 @@ declare module 'x4js' {
 	export interface ButtonProps extends ComponentProps {
 		label?: string;
 		icon?: string;
+		tabindex?: boolean | number;
+		autorepeat?: number | boolean;
 		click?: EventCallback<EvClick>;
 	}
 
-	export class Button extends Component<ButtonProps,ButtonEvents> {
+	@class_ns( "x4" ) export class Button extends Component<ButtonProps,ButtonEvents> {
+		#text: Component;
 		constructor( props: ButtonProps );
 		_on_click( ev: MouseEvent ): void;
+		_on_mouse( e: PointerEvent ): void;
+		click(  ): void;
+		_on_keydown( e: KeyboardEvent ): void;
 		setText( text: string | UnsafeHtml ): void;
 		setIcon( icon: string ): void;
 	}
@@ -646,28 +775,49 @@ declare module 'x4js' {
 	// ---------------------------------------
 	// from /src/components/label/label.ts
 
-	interface LabelProps extends ComponentProps {
+	export interface LabelProps extends ComponentProps {
 		text?: string | UnsafeHtml;
 		icon?: string;
 		labelFor?: string;
 	}
 
-	export class Label extends Component<LabelProps> {
+	@class_ns( "x4" ) export class Label extends Component<LabelProps> {
+		#text: Component;
 		constructor( p: LabelProps );
 		setText( text: string | UnsafeHtml ): void;
 		setIcon( icon: string ): void;
 	}
 
+	export interface SimpleTextProps extends ComponentProps {
+		text: string | UnsafeHtml;
+		align?: "left" | "center" | "right";
+	}
+
+	@class_ns( "x4" ) export class SimpleText extends Component<SimpleTextProps> {
+		constructor( p: SimpleTextProps );
+		setText( text: string | UnsafeHtml ): void;
+	}
+
 	// ---------------------------------------
 	// from /src/components/form/form.ts
 
-	type FormValue = string | number | boolean;
+	type FormValues = Record<string,string>;
 
-	type FormValues = Record<string,FormValue>;
+	export interface FormProps extends BoxProps {
+		autoComplete?: boolean;
+	}
 
-	export class Form extends Box {
+	type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
+
+	@class_ns( "x4" ) export class Form<P extends FormProps = FormProps> extends Box<P> {
+		validator: ValidationFn;
+		constructor( props: P );
+		_get_inputs(  ): void;
 		setValues( values: FormValues ): void;
 		getValues(  ): FormValues;
+		setAutoComplete( on: any ): void;
+		setValidator( validator: ValidationFn ): void;
+		validate(  ): FormValues;
 	}
 
 	// ---------------------------------------
@@ -679,13 +829,17 @@ declare module 'x4js' {
 
 	interface CSizerEvent extends ComponentEvents {
 		resize: EvSizeChange;
+		start: ComponentEvent;
+		stop: ComponentEvent;
 	}
 
-	export class CSizer extends Component<ComponentProps,CSizerEvent> {
-		_type: string;
+	type SizerType = "left" | "top" | "right" | "bottom";
+
+	@class_ns( "x4" ) export class CSizer extends Component<ComponentProps,CSizerEvent> {
+		_type: SizerType;
 		_ref: Component;
 		_delta: Point;
-		constructor( type: string, target: Component );
+		constructor( type: SizerType, target: Component );
 		_onMouseMove( e: PointerEvent ): void;
 	}
 
@@ -698,31 +852,35 @@ declare module 'x4js' {
 	}
 
 	export interface PopupProps extends ComponentProps {
-		modal?: boolean;
 		autoClose?: boolean | string;
 		sizable?: boolean;
 		movable?: boolean;
 	}
 
-	export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Component<P,E> {
-		_isopen: any;
+	@class_ns( "x4" ) export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Box<P,E> {
 		_isshown: any;
+		_ismodal: any;
 		constructor( props: P );
 		displayNear( rc: Rect, dst: any, src: any, offset: any ): void;
 		displayCenter(  ): void;
 		displayAt( x: number, y: number ): void;
-		_show(  ): void;
-		show( show: any ): void;
 		isOpen(  ): void;
+		_do_hide(  ): void;
+		_do_show(  ): void;
+		__show(  ): void;
+		__hide(  ): void;
+		__append(  ): void;
+		__remove(  ): void;
+		show( show: any ): this;
 		close(  ): void;
 		_dismiss: any;
 		dismiss( after: any ): void;
-		_showModalMask(  ): void;
-		_updateModalMask(  ): void;
 		_createSizers(  ): void;
+		_showModalMask(  ): void;
+		_hideModalMask(  ): void;
 	}
 
-	 class CMover  {
+	export class CMover  {
 		ref: Component;
 		delta: Point;
 		self: boolean;
@@ -736,9 +894,11 @@ declare module 'x4js' {
 	export interface DialogProps extends PopupProps {
 		icon?: string;
 		title: string;
-		form: Form;
+		form?: Form;
 		buttons: BtnGroupItem[];
-		closable?: boolean;
+		closable?: boolean | string;
+		modal?: boolean;
+		btnclick?: EventCallback<EvBtnClick>;
 	}
 
 	export interface EvBtnClick extends CoreEvent {
@@ -750,18 +910,23 @@ declare module 'x4js' {
 		close: ComponentEvent;
 	}
 
-	export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P,E> {
+	@class_ns("x4") export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
+		form: Form;
 		constructor( props: P );
-		display(  ): void;
-		close(  ): void;
+		focusNext( next: boolean ): boolean;
+		setContent( form: Form ): void;
+		getForm(  ): void;
+		getValues(  ): void;
+		getButton( name: string ): void;
+		queryInterface<T extends IComponentInterface>( name: string ): T;
 	}
 
 	// ---------------------------------------
 	// from /src/components/btngroup/btngroup.ts
 
-	type predefined = "ok" | "cancel" | "yes" | "no" | "retry" | "abort" | "-";
+	type predefined = `ok${ "" | `.${string}`}` | `cancel${ "" | `.${string}`}` | `yes${ "" | `.${string}`}` | `no${ "" | `.${string}`}` | `retry${ "" | `.${string}`}` | `abort${ "" | `.${string}`}` | "-" | ">>" | "~";
 
-	type BtnGroupItem = predefined | Button | Label;
+	type BtnGroupItem = predefined | Button | Label | Input;
 
 	interface BtnGroupEvents extends ComponentEvents {
 		btnclick: EvBtnClick;
@@ -775,9 +940,10 @@ declare module 'x4js' {
 		btnclick?: EventCallback<EvBtnClick>;
 	}
 
-	export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
+	@class_ns( "x4" ) export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 		constructor( props: BtnGroupProps );
 		setButtons( btns: BtnGroupItem[] ): void;
+		getButton( id: string ): void;
 	}
 
 	// ---------------------------------------
@@ -798,11 +964,11 @@ declare module 'x4js' {
 		items: MenuElement[];
 	}
 
-	 class CMenuSep extends Component {
+	@class_ns( "x4" ) class CMenuSep extends Component {
 		constructor(  );
 	}
 
-	 class CMenuItem extends Component {
+	@class_ns( "x4" ) class CMenuItem extends Component {
 		menu: Menu;
 		constructor( itm: MenuItem );
 		dismiss( after: boolean ): void;
@@ -810,7 +976,7 @@ declare module 'x4js' {
 		closeSub(  ): void;
 	}
 
-	export class Menu extends Popup {
+	@class_ns( "x4" ) export class Menu extends Popup {
 		constructor( props: MenuProps );
 	}
 
@@ -828,7 +994,7 @@ declare module 'x4js' {
 		change?: EventCallback<EvChange>;
 	}
 
-	export class Calendar extends VBox<CalendarProps, CalendarEventMap> {
+	@class_ns( "x4" ) export class Calendar extends VBox<CalendarProps, CalendarEventMap> {
 		m_date: Date;
 		constructor( props: CalendarProps );
 		_update(  ): void;
@@ -844,6 +1010,9 @@ declare module 'x4js' {
 
 	export interface BaseProps extends ComponentProps {
 		name?: string;
+		autofocus?: boolean;
+		focus?: EventCallback<EvFocus>;
+		change?: EventCallback<EvChange>;
 	}
 
 	interface CheckboxProps extends BaseProps {
@@ -889,27 +1058,39 @@ declare module 'x4js' {
 	}
 
 	export interface TextInputProps extends BaseProps {
-		type: "text" | "email" | "password";
+		type: "text" | "email" | "password" | "date" | "number";
 		readonly?: boolean;
 		required?: boolean;
 		pattern?: string;
-		value: string | number;
+		value?: string | number;
 		placeholder?: string;
 		spellcheck?: boolean;
+		minlength?: number;
+		maxlength?: number;
 	}
 
 	type InputProps = CheckboxProps | RadioProps | TextInputProps | RangeProps | DateProps | NumberProps | FileProps;
 
-	export class Input extends Component<InputProps> {
+	interface InputEvents extends ComponentEvent {
+		focus: EvFocus;
+		change: EvChange;
+	}
+
+	@class_ns( "x4" ) export class Input extends Component<InputProps,InputEvents> {
 		constructor( props: InputProps );
+		on_focus( ev: FocusEvent, focus_out: boolean ): void;
+		on_change( ev: InputEvent ): void;
 		getValue(  ): void;
 		setValue( value: string ): void;
 		getNumValue(  ): void;
-		setNumValue( value: number ): void;
+		setNumValue( value: number, ndec: any ): void;
+		getCheck(  ): void;
+		setCheck( ck: boolean ): void;
 		setReadOnly( ro: boolean ): void;
 		selectAll(  ): void;
 		select( start: number, length: number ): void;
 		getSelection(  ): void;
+		isValid(  ): void;
 		queryInterface<T extends IComponentInterface>( name: string ): T;
 	}
 
@@ -924,12 +1105,14 @@ declare module 'x4js' {
 		label: string;
 		checked?: boolean;
 		value?: boolean | number | string;
+		name?: string;
 		change?: EventCallback<EvChange>;
 	}
 
-	export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
+	@class_ns( "x4" ) export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 		_input: Input;
 		constructor( props: CheckboxProps );
+		_on_click( ev: MouseEvent ): void;
 		_on_change(  ): void;
 		getCheck(  ): void;
 		setCheck( ck: boolean ): void;
@@ -944,7 +1127,8 @@ declare module 'x4js' {
 		color: Color | string;
 	}
 
-	export class ColorInput extends HBox<ColorInputProps> {
+	@class_ns( "x4" ) export class ColorInput extends HBox<ColorInputProps> {
+		"$cls-ns": any;
 		constructor( props: ColorInputProps );
 	}
 
@@ -974,7 +1158,7 @@ declare module 'x4js' {
 		sat_change: SatChangeEvent;
 	}
 
-	export class Saturation extends Box<BoxProps,CommonEvents> {
+	@class_ns( "x4" ) export class Saturation extends Box<BoxProps,CommonEvents> {
 		mdown: any;
 		irect: Rect;
 		hsv: Hsv;
@@ -989,7 +1173,7 @@ declare module 'x4js' {
 		move( sens: string, delta: number ): void;
 	}
 
-	 class HueSlider extends Box<BoxProps,CommonEvents> {
+	@class_ns( "x4" ) class HueSlider extends Box<BoxProps,CommonEvents> {
 		thumb: Component;
 		hsv: Hsv;
 		mdown: any;
@@ -1002,7 +1186,7 @@ declare module 'x4js' {
 		move( delta: number ): void;
 	}
 
-	 class AlphaSlider extends Box<BoxProps,CommonEvents> {
+	@class_ns( "x4" ) class AlphaSlider extends Box<BoxProps,CommonEvents> {
 		thumb: Component;
 		color: Component;
 		hsv: Hsv;
@@ -1026,7 +1210,7 @@ declare module 'x4js' {
 		change: ChangeEvent;
 	}
 
-	export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
+	@class_ns( "x4" ) export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
 		_base: Color;
 		_sat: Saturation;
 		_swatch: Component;
@@ -1039,11 +1223,11 @@ declare module 'x4js' {
 	// ---------------------------------------
 	// from /src/components/viewport/viewport.ts
 
-	export class Viewport extends Component {
+	@class_ns( "x4" ) export class Viewport extends Component {
 		constructor( props: ComponentProps );
 	}
 
-	export class ScrollView extends Component {
+	@class_ns( "x4" ) export class ScrollView extends Component {
 		constructor( props: ComponentProps );
 		getViewport(  ): void;
 	}
@@ -1051,18 +1235,11 @@ declare module 'x4js' {
 	// ---------------------------------------
 	// from /src/components/listbox/listbox.ts
 
-	enum kbNav {
-		first,
-		prev,
-		next,
-		last,
-	}
-
 	type ListboxID = number | string;
 
 	export interface ListItem  {
 		id: ListboxID;
-		text: string;
+		text: string | UnsafeHtml;
 		iconId?: string;
 		data?: any;
 		cls?: string;
@@ -1079,30 +1256,39 @@ declare module 'x4js' {
 	interface ListboxProps extends Omit<ComponentProps,'content'> {
 		items?: ListItem[];
 		renderer?: ( item: ListItem ) => Component;
+		footer?: Component;
 		checkable?: true;
+		multisel?: true;
+		dblClick?: EventCallback<EvDblClick>;
+		selectionChange?: EventCallback<EvSelectionChange>;
+		contextMenu?: EventCallback<EvContextMenu>;
 	}
 
-	export class Listbox extends Component<ListboxProps,ListboxEvents> {
+	@class_ns( "x4" ) export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		_view: Viewport;
-		_selection: ListboxID;
-		_selitem: Component;
+		_lastsel: ListboxID;
+		_multisel: Set<ListboxID>;
 		_items: ListItem[];
 		preventFocus: any;
 		constructor( props: ListboxProps );
 		_on_key( ev: KeyboardEvent ): void;
 		navigate( sens: kbNav ): void;
-		_on_click( ev: UIEvent ): void;
+		_itemWithID( id: ListboxID ): void;
+		_on_click( ev: MouseEvent ): void;
 		_on_ctx_menu( ev: MouseEvent ): void;
-		_selectItem( id: ListboxID, item: Component ): void;
-		_findItem( id: ListboxID ): void;
+		_selectItem( id: ListboxID, item: Component, mode: "single" | "toggle" ): void;
+		getItem( id: ListboxID ): ListItem;
+		select( ids: ListboxID | ListboxID[], notify: any ): void;
 		_findItemIndex( id: ListboxID ): void;
+		_clearSelection(  ): void;
 		clearSelection(  ): void;
-		setItems( items: ListItem[] ): void;
+		setItems( items: ListItem[], keepSel: any ): void;
 		renderItem( item: ListItem ): void;
 		defaultRenderer( item: ListItem ): Component;
 		filter( filter: string ): void;
 		appendItem( item: ListItem, prepend: any, select: any ): void;
 		updateItem( id: any, item: ListItem ): void;
+		getSelection(  ): void;
 	}
 
 	// ---------------------------------------
@@ -1116,22 +1302,29 @@ declare module 'x4js' {
 		items: ListItem[];
 	}
 
-	 class Dropdown extends Popup<DropdownProps,DropdownEvents> {
+	@class_ns( "x4" ) export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 		_list: Listbox;
 		constructor( props: DropdownProps, content: ListItem[] );
 		getList(  ): void;
 	}
 
+	interface ComboboxEvents extends ComponentEvents {
+		selectionChange: EvSelectionChange;
+	}
+
 	interface ComboboxProps extends Omit<ComponentProps,"content"> {
 		label?: string;
+		name?: string;
+		value?: string;
 		labelWidth?: number | string;
 		readonly?: boolean;
+		required?: boolean;
 		items: ListItem[];
+		selectionChange?: EventCallback<EvSelectionChange>;
 	}
 
-	export class Combobox extends Component<ComboboxProps> {
-		_dropdown: Dropdown;
-		_label: Label;
+	@class_ns( "x4" ) export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
+		_popup: DropdownList;
 		_input: Input;
 		_button: Button;
 		_prevent_close: any;
@@ -1142,6 +1335,349 @@ declare module 'x4js' {
 		_on_focusout(  ): void;
 		_on_click(  ): void;
 		showDropDown(  ): void;
+		setItems( items: ListItem[] ): void;
+		getValue(  ): void;
+		setValue( value: string ): void;
+		selectItem( index: ListboxID ): void;
+		getSelection(  ): void;
+		_getList(  ): void;
+		queryInterface<T extends IComponentInterface>( name: string ): T;
+	}
+
+	// ---------------------------------------
+	// from /src/components/filedrop/filedrop.ts
+
+	type LoadCallback = ( files: FileList ) => void;
+
+	interface FileDialogProps extends ComponentProps {
+		accept: string;
+		multiple?: boolean;
+		callback: LoadCallback;
+	}
+
+	export class FileDialog extends Component {
+		constructor( props: FileDialogProps );
+		showDialog(  ): void;
+	}
+
+	export interface EvDropChange extends CoreEvent {
+		files: FileList;
+	}
+
+	interface FileDropEvents extends ComponentEvents {
+		change: EvDropChange;
+	}
+
+	interface FileDropProps extends ComponentProps {
+		label?: string | UnsafeHtml;
+		icon?: string;
+		multiple?: boolean;
+		accept: string;
+		change: EventCallback<EvDropChange>;
+	}
+
+	@class_ns( "x4" ) export class FileDrop extends VBox<FileDropProps,FileDropEvents> {
+		constructor( props: FileDropProps );
+	}
+
+	// ---------------------------------------
+	// from /src/core/core_data.ts
+
+	type DataRecordID = any;
+
+	type DataFieldValue = string | Date | number | boolean;
+
+	type ChangeCallback = (type: string, id?: DataRecordID) => void;
+
+	type CalcCallback = () => string;
+
+	type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' | 'object' | 'any' | 'calc';
+
+	type DataIndex = Uint32Array;
+
+	export interface EvDataChange extends CoreEvent {
+		change_type: 'create' | 'update' | 'delete' | 'data' | 'change';
+		id?: DataRecordID;
+	}
+
+	export interface MetaData  {
+		type?: FieldType;
+		prec?: number;
+		required?: boolean;
+		calc?: (rec: DataRecord) => any;
+		model?: DataModel;
+	}
+
+	export interface FieldInfo extends MetaData {
+		name: string;
+	}
+
+	 class MetaInfos  {
+		name: string;
+		id: string;
+		fields: FieldInfo[];
+		constructor( name: string );
+	}
+
+	interface ModelConstructor  {
+	}
+
+	export class DataModel  {
+		getFields(  ): FieldInfo[];
+		validate( record: DataRecord ): Error[];
+		getFieldIndex( name: string ): number;
+		serialize( input: DataRecord ): any;
+		unSerialize( data: any, id: DataRecordID ): DataRecord;
+		_convertField( field: FieldInfo, input: any ): any;
+		getID( rec: DataRecord ): any;
+		getRaw( name: string | number, rec: DataRecord ): any;
+		getField( name: string, rec: DataRecord ): string;
+	}
+
+	export class DataRecord  {
+	}
+
+	interface DataEventMap extends EventMap {
+		change?: EvChange;
+	}
+
+	type DataSolver = ( data: any ) => DataRecord[];
+
+	export interface DataProxyProps  {
+		url: string;
+		params?: string[];
+		solver?: DataSolver;
+	}
+
+	export class DataProxy extends CoreElement<DataEventMap> {
+		m_props: DataProxyProps;
+		constructor( props: DataProxyProps );
+		load( url: string ): void;
+	}
+
+	interface DataStoreProps  {
+		model: DataModel;
+		data?: any[];
+		url?: string;
+		autoload?: false;
+		solver?: DataSolver;
+	}
+
+	interface DataStoreEventMap extends EventMap {
+		data_change: EvDataChange;
+	}
+
+	export class DataStore extends EventSource<DataStoreEventMap> {
+		m_model: DataModel;
+		m_fields: FieldInfo[];
+		m_records: DataRecord[];
+		m_proxy: DataProxy;
+		m_rec_index: DataIndex;
+		constructor( props: DataStoreProps );
+		load( url: string ): void;
+		reload(  ): void;
+		setData( records: any[] ): void;
+		setRawData( records: DataRecord[] ): void;
+		_rebuildIndex(  ): void;
+		update( rec: DataRecord ): void;
+		append( rec: DataRecord | any ): void;
+		getMaxId(  ): void;
+		delete( id: DataRecordID ): boolean;
+		indexOfId( id: DataRecordID ): number;
+		getById( id: DataRecordID ): DataRecord;
+		getByIndex( index: number ): DataRecord;
+		_getRecord( index: number ): DataRecord;
+		moveTo( other: DataStore ): void;
+		createView( opts: DataViewProps ): DataView;
+		createIndex( filter: FilterInfo ): DataIndex;
+		sortIndex( index: DataIndex, sort: SortProp[] ): void;
+		forEach( cb: ( rec: DataRecord, index: number ) => any ): void;
+		export(  ): void;
+		changed(  ): void;
+		getModel(  ): void;
+	}
+
+	export interface EvViewChange extends CoreEvent {
+		change_type: "change" | "filter" | "sort";
+	}
+
+	interface DataViewEventMap extends EventMap {
+		view_change: EvViewChange;
+	}
+
+	interface DataViewProps  {
+		store?: DataStore;
+		filter?: FilterInfo;
+		order?: string | SortProp[] | SortProp;
+	}
+
+	type FilterFunc = ( rec: DataRecord ) => boolean;
+
+	export interface FilterInfo  {
+		op: '<' | '<=' | '=' | '>=' | '>' | '<>' | 'empty-result' | FilterFunc;
+		field?: string;
+		value?: string | RegExp;
+		caseSensitive?: boolean;
+	}
+
+	export interface SortProp  {
+		field: string;
+		ascending: boolean;
+		numeric?: boolean;
+	}
+
+	export class DataView extends CoreElement<DataViewEventMap> {
+		m_index: DataIndex;
+		m_store: DataStore;
+		m_model: DataModel;
+		m_sort: SortProp[];
+		m_filter: FilterInfo;
+		m_props: DataViewProps;
+		constructor( props: DataViewProps );
+		_storeChange( ev: EvDataChange ): void;
+		filter( filter: FilterInfo ): number;
+		_filter( filter: FilterInfo, notify: boolean ): number;
+		sort( props: SortProp[] ): void;
+		_sort( props: SortProp[], notify: boolean ): void;
+		getStore(  ): void;
+		getCount(  ): void;
+		indexOfId( id: DataRecordID ): number;
+		getByIndex( index: number ): DataRecord;
+		getIdByIndex( index: number ): DataRecordID;
+		getRecId( rec: DataRecord ): DataRecordID;
+		getById( id: DataRecordID ): DataRecord;
+		getModel(  ): void;
+		changed(  ): void;
+		forEach( cb: ( rec: DataRecord, index: number ) => any ): void;
+	}
+
+	// ---------------------------------------
+	// from /src/components/image/image.ts
+
+	interface ImageEvents extends ComponentEvents {
+		change: EvDropChange;
+		clear: CoreEvent;
+	}
+
+	export interface ImageProps extends ComponentProps {
+		src: string;
+		fit?: "contain" | "cover" | "fill" | "scale-down";
+		position?: string;
+		lazy?: boolean;
+		alt?: string;
+		draggable?: boolean;
+		candrop?: boolean;
+		accept?: string;
+		change?: EventCallback<EvDropChange>;
+		clear?: EventCallback<CoreEvent>;
+	}
+
+	@class_ns( "x4" ) export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
+		_img: Component;
+		constructor( props: P );
+		setImage( src: string ): void;
+		setBase64( mime: string, base64: string ): void;
+		clear(  ): void;
+	}
+
+	// ---------------------------------------
+	// from /src/components/gridview/gridview.ts
+
+	type CellRenderer = (rec: DataRecord) => Component;
+
+	type CellClassifier = (data: any, rec: DataRecord, col: string ) => string;
+
+	type ColType = "number" | "money" | "checkbox" | "date" | "string" | "image" | "percent" | "icon";
+
+	interface GridColumn  {
+		id: any;
+		title: string;
+		width: number;
+		fixed?: boolean;
+		flex?: number;
+		align?: 'left' | 'center' | 'right';
+		header_align?: 'left' | 'center' | 'right';
+		renderer?: CellRenderer;
+		formatter?: (input: any) => string;
+		type?: ColType;
+		cls?: string;
+		sortable?: boolean;
+		footer_val?: string;
+		classifier?: CellClassifier;
+	}
+
+	interface GridColumnEx extends GridColumn {
+		sens?: "up" | "dn";
+	}
+
+	export interface GridviewEvents extends ComponentEvents {
+		click?: EvClick;
+		dblClick?: EvDblClick;
+		contextMenu?: EvContextMenu;
+		selectionChange?: EvSelectionChange;
+	}
+
+	export interface GridviewProps extends ComponentProps {
+		footer?: boolean;
+		store: DataStore;
+		columns: GridColumn[];
+		click?: EventCallback<EvClick>;
+		dblClick?: EventCallback<EvDblClick>;
+		contextMenu?: EventCallback<EvContextMenu>;
+		selectionChange?: EventCallback<EvSelectionChange>;
+	}
+
+	@class_ns("x4") export class Gridview<P extends GridviewProps = GridviewProps, E extends GridviewEvents = GridviewEvents> extends Component<P,E> {
+		_dataview: DataView;
+		_datamodel: DataModel;
+		_columns: GridColumnEx[];
+		_lock: number;
+		_dirty: number;
+		_row_height: number;
+		_left: number;
+		_top: number;
+		_body: Component;
+		_viewport: Component;
+		_fheader: Box;
+		_hheader: Box;
+		_vheader: Box;
+		_ffooter: Box;
+		_footer: Box;
+		_vis_rows: Map<number, { h: Component, r: Component }>;
+		_start: number;
+		_end: number;
+		_selection: Set<number>;
+		_num_fmt: any;
+		_mny_fmt: any;
+		_dte_fmt: any;
+		_has_fixed: boolean;
+		_has_footer: boolean;
+		constructor( props: P );
+		_on_key( ev: KeyboardEvent ): void;
+		navigate( sens: kbNav ): void;
+		_scrollToIndex( index: number, block: any ): void;
+		setStore( store: DataStore ): void;
+		getView(  ): DataView;
+		lock( lock: boolean ): void;
+		_getColCount(  ): void;
+		_getCol( index: number ): void;
+		_buildColHeader( fixed: boolean ): void;
+		_buildColFooter( fixed: boolean ): void;
+		_sortCol( col: number, ascending: boolean ): void;
+		sortCol( colIdx: any, ascending: boolean ): void;
+		_renderCell( rec: DataRecord, column: GridColumnEx, extra_cls: string[] ): ComponentContent;
+		_buildRow( rowid: number, rec: DataRecord, top: number ): void;
+		_buildRowHeader( rowid: number, rec: DataRecord, top: number ): void;
+		_updateFlexs(  ): void;
+		_computeFullSize(  ): void;
+		_init(  ): void;
+		_on_dblclk( e: UIEvent, row: number ): void;
+		_update( force: any ): void;
+		_clearSelection(  ): void;
+		_addSelection( rowid: number ): void;
+		getSelection(  ): void;
+		getFirstSel(  ): void;
+		selectItem( id: any ): void;
 	}
 
 	// ---------------------------------------
@@ -1158,7 +1694,7 @@ declare module 'x4js' {
 		items: HeaderItem[];
 	}
 
-	export class Header extends HBox<HeaderProps> {
+	@class_ns( "x4" ) export class Header extends HBox<HeaderProps> {
 		_els: Component[];
 		_vwp: Component;
 		constructor( props: HeaderProps );
@@ -1167,21 +1703,52 @@ declare module 'x4js' {
 	}
 
 	// ---------------------------------------
-	// from /src/components/image/image.ts
+	// from /src/components/keyboard/keyboard.ts
+
+	interface KeyboardProps extends BoxProps {
+	}
+
+	@class_ns( "x4" ) export class Keyboard extends HBox<KeyboardProps> {
+		mode: "lower" | "upper" | "number" | "date";
+		locale: string;
+		keyboard: Box;
+		visible: boolean;
+		input: HTMLInputElement;
+		constructor( props: KeyboardProps );
+		handleKey( e: UIEvent ): void;
+		_focusNext(  ): void;
+		_switchMode( m: "lower" | "upper" | "number" | "date" ): void;
+		_redraw(  ): void;
+		_scrollIntoView( el: HTMLElement ): void;
+		_updateVis: any;
+		showOn( el: Component ): void;
+		handleFocus( target: Element, enter: boolean ): void;
+		_insertChar( caret: any, text: string, ch: string ): void;
+		_backspace( caret: any, text: string ): void;
+		_getCaret(  ): void;
+		_restoreCaretPos( caret: any ): void;
+		fireKey( key: number, cb: Function ): void;
+		_createContent(  ): void;
+	}
 
-	export interface ImageProps extends ComponentProps {
-		src: string;
-		fit?: "contain" | "cover" | "fill" | "scale-down";
-		position?: string;
-		lazy?: boolean;
-		alt?: string;
-		draggable?: boolean;
+	// ---------------------------------------
+	// from /src/components/link/link.ts
+
+	interface LinkEvents extends ComponentEvents {
+		click: EvClick;
 	}
 
-	export class Image extends Component<ImageProps> {
-		_img: Component;
-		constructor( props: ImageProps );
-		setImage( src: string ): void;
+	interface LinkProps extends ComponentProps {
+		href: string;
+		text?: string | UnsafeHtml;
+		icon?: string;
+		click?: EventCallback<EvClick>;
+	}
+
+	@class_ns( "x4" ) export class Link extends Component<LinkProps,LinkEvents> {
+		constructor( props: LinkProps );
+		setText( text: string | UnsafeHtml ): void;
+		_on_click( ev: MouseEvent ): void;
 	}
 
 	// ---------------------------------------
@@ -1192,11 +1759,24 @@ declare module 'x4js' {
 		click: (button: string) => void;
 	}
 
-	export class MessageBox extends Dialog<DialogProps> {
-		m_label: Label;
+	@class_ns( "x4" ) export class MessageBox extends Dialog<DialogProps> {
+		constructor( props: DialogProps );
+		_create( msg: string | UnsafeHtml, buttons: BtnGroupItem[], title: string ): void;
+		show( msg: string | UnsafeHtml, buttons: BtnGroupItem[], title: string ): MessageBox;
+		showAsync( msg: string | UnsafeHtml, buttons: BtnGroupItem[], title: string ): Promise<string>;
+	}
+
+	@class_ns( "x4" ) export class InputBox extends Dialog<DialogProps> {
+		constructor( props: DialogProps );
+		getValue(  ): void;
+		_create( msg: string | UnsafeHtml, value: string, title: string ): void;
+		showAsync( msg: string | UnsafeHtml, value: string, title: string ): Promise<string>;
+	}
+
+	@class_ns( "x4" ) export class PromptBox extends Dialog<DialogProps> {
 		constructor( props: DialogProps );
-		setText( txt: string | UnsafeHtml ): void;
-		show( msg: string | UnsafeHtml ): MessageBox;
+		_create( msg: string | UnsafeHtml, editor: Component, title: string ): void;
+		showAsync( msg: string | UnsafeHtml, editor: Component, title: string ): Promise<string>;
 	}
 
 	// ---------------------------------------
@@ -1211,7 +1791,7 @@ declare module 'x4js' {
 		text: string | UnsafeHtml;
 	}
 
-	export class Notification extends Popup {
+	@class_ns( "x4" ) export class Notification extends Popup {
 		constructor( props: NotificationProps );
 		close(  ): void;
 		display( time_in_s: any ): void;
@@ -1226,7 +1806,7 @@ declare module 'x4js' {
 		bodyModel?: Constructor<Component>;
 	}
 
-	export class Panel extends VBox<PanelProps> {
+	@class_ns( "x4" ) export class Panel extends VBox<PanelProps> {
 		_title: Component;
 		_body: Component;
 		constructor( props: PanelProps );
@@ -1243,12 +1823,109 @@ declare module 'x4js' {
 		max: number;
 	}
 
-	export class Progress extends Component<ProgressProps> {
+	@class_ns( "x4" ) export class Progress extends Component<ProgressProps> {
 		_bar: Component;
 		constructor( props: ProgressProps );
 		setValue( value: number ): void;
 	}
 
+	// ---------------------------------------
+	// from /src/components/select/select.ts
+
+	export interface SelectProps extends ComponentProps {
+		name?: string;
+		value: string;
+		items: ListItem[];
+		multiple?: boolean;
+		change?: EventCallback<EvChange>;
+		focus?: EventCallback<EvFocus>;
+	}
+
+	interface SelectEvents extends ComponentEvent {
+		focus: EvFocus;
+		change: EvChange;
+	}
+
+	@class_ns( "x4" ) export class Select extends Component<SelectProps,SelectEvents> {
+		constructor( props: SelectProps );
+		on_focus( ev: FocusEvent, focus_out: boolean ): void;
+		on_change( ev: InputEvent ): void;
+		setItems( items: ListItem[] ): void;
+		getValue(  ): void;
+		setValue( value: string ): void;
+	}
+
+	// ---------------------------------------
+	// from /src/components/propgrid/propgrid.ts
+
+	type IValue = boolean | number | string;
+
+	type IValueCB = ( name: string) => IValue;
+
+	export interface PropertyValue  {
+		type: 'boolean' | 'number' | 'string' | 'password' | 'options';
+		title?: string;
+		desc?: string;
+		name?: string;
+		value: IValue | IValueCB;
+		options?: ListItem[];
+		callback: ( name: string, value: any ) => void;
+		step?: number;
+		live?: boolean;
+		cls?: string;
+	}
+
+	export interface PropertyGroup  {
+		title: string;
+		desc?: string;
+		icon?: string;
+		cls?: string;
+		collapsible?: boolean;
+		items: PropertyValue[];
+	}
+
+	export interface PropertyProps extends ComponentProps {
+		groups: PropertyGroup[];
+	}
+
+	@class_ns( "x4" ) export class PropertyGrid extends VBox {
+		root: Component;
+		groups: PropertyGroup[];
+		constructor( props: PropertyProps );
+		setItems( _grps: PropertyGroup[] ): void;
+		makeGroupHeader( g: PropertyGroup ): void;
+		makePropertyRow( item: PropertyValue ): void;
+		setPropValue( name: string, value: any ): void;
+	}
+
+	// ---------------------------------------
+	// from /src/components/radio/radio.ts
+
+	interface RadioEvents extends ComponentEvents {
+		change?: EvChange;
+	}
+
+	interface RadioProps extends ComponentProps {
+		label: string;
+		icon?: string;
+		name: string;
+		value: number | string;
+		checked?: boolean;
+		change?: EventCallback<EvChange>;
+	}
+
+	@class_ns( "x4" ) export class Radio extends Component<RadioProps,RadioEvents> {
+		_check: HBox;
+		_input: Input;
+		_label: Label;
+		constructor( props: RadioProps );
+		_on_click( ev: MouseEvent ): void;
+		_on_change(  ): void;
+		setCheck( ck: boolean ): void;
+		setLabel( text: string ): void;
+		getValue(  ): void;
+	}
+
 	// ---------------------------------------
 	// from /src/components/rating/rating.ts
 
@@ -1264,7 +1941,7 @@ declare module 'x4js' {
 		change?: EventCallback<EvChange>;
 	}
 
-	export class Rating extends HBox<RatingProps,RatingEventMap> {
+	@class_ns( "x4" ) export class Rating extends HBox<RatingProps,RatingEventMap> {
 		m_els: Component[];
 		m_input: Input;
 		constructor( props: RatingProps );
@@ -1277,14 +1954,27 @@ declare module 'x4js' {
 	}
 
 	// ---------------------------------------
-	// from /src/components/slider/slider.ts
+	// from /src/components/tickline/tickline.ts
 
-	interface ChangeEvent extends ComponentEvent {
-		value: number;
+	interface TickLineProps extends ComponentProps {
+		values: number[];
+		min?: number;
+		max?: number;
+		color?: Color;
+		background?: Color;
+		type: "bars" | "line";
 	}
 
+	export class TickLine extends Component<TickLineProps> {
+		constructor( props: TickLineProps );
+		update(  ): void;
+	}
+
+	// ---------------------------------------
+	// from /src/components/slider/slider.ts
+
 	interface SliderEvents extends ComponentEvents {
-		change: ChangeEvent;
+		change: EvChange;
 	}
 
 	interface SliderProps extends ComponentProps {
@@ -1292,9 +1982,11 @@ declare module 'x4js' {
 		min: number;
 		max: number;
 		step?: number;
+		vertical?: boolean;
+		change?: EventCallback<EvChange>;
 	}
 
-	export class Slider extends Component<SliderProps,SliderEvents> {
+	@class_ns( "x4" ) export class Slider extends Component<SliderProps,SliderEvents> {
 		_mdown: any;
 		_irect: Rect;
 		_thumb: Component;
@@ -1302,10 +1994,14 @@ declare module 'x4js' {
 		_range: Input;
 		constructor( props: SliderProps );
 		_on_mousedown( ev: PointerEvent ): void;
+		_getMinMax(  ): void;
 		_on_mousemove( ev: PointerEvent ): void;
 		_update(  ): void;
 		_on_mouseup( ev: PointerEvent ): void;
 		_on_key( ev: KeyboardEvent ): void;
+		setMin( min: number ): void;
+		setMax( max: number ): void;
+		setValue( v: number ): void;
 	}
 
 	// ---------------------------------------
@@ -1317,7 +2013,7 @@ declare module 'x4js' {
 		value?: string;
 	}
 
-	export class Switch extends HBox<SwitchProps> {
+	@class_ns( "x4" ) export class Switch extends HBox<SwitchProps> {
 		constructor( props: SwitchProps );
 	}
 
@@ -1328,10 +2024,10 @@ declare module 'x4js' {
 		name: string;
 		title: string;
 		icon?: string;
-		tab: Component;
+		content: Component;
 	}
 
-	 class CTab extends Button {
+	@class_ns( "x4" ) class CTab extends Button {
 		constructor( props: ButtonProps, item: TabItem );
 	}
 
@@ -1347,12 +2043,14 @@ declare module 'x4js' {
 		click: TablistClickEvent;
 	}
 
-	 class CTabList extends HBox<TablistProps,TablistEvents> {
+	@class_ns( "x4" ) class CTabList extends HBox<TablistProps,TablistEvents> {
 		_selitem: Button;
-		_selection: string;
-		constructor( props: TablistProps, content: TabItem[] );
+		constructor( props: TablistProps, items: TabItem[] );
 		_on_click( ev: EvClick ): void;
 		select( name: string ): void;
+		setItems( items: TabItem[ ] ): void;
+		addItem( tab: TabItem ): void;
+		getTabCount(  ): void;
 	}
 
 	interface TabsProps extends Omit<ComponentProps,"content"> {
@@ -1360,12 +2058,14 @@ declare module 'x4js' {
 		items: TabItem[];
 	}
 
-	export class Tabs extends VBox<TabsProps> {
+	@class_ns( "x4" ) export class Tabs extends VBox<TabsProps> {
 		_list: CTabList;
 		_stack: StackBox;
 		constructor( props: TabsProps );
 		selectTab( name: string ): void;
 		_onclick( ev: TablistClickEvent ): void;
+		getTab( name: string ): void;
+		addTab( item: TabItem ): void;
 	}
 
 	// ---------------------------------------
@@ -1375,11 +2075,22 @@ declare module 'x4js' {
 		label?: string;
 		value?: string;
 		resize?: boolean;
+		readonly?: boolean;
+	}
+
+	 class SimpleTextArea extends Component {
+		constructor( props: TextAreaProps );
+		setText( text: string ): void;
+		getText(  ): void;
+		queryInterface<T>( name: string ): T;
 	}
 
-	export class TextArea extends VBox {
-		_input: Component;
+	@class_ns( "x4" ) export class TextArea extends VBox {
+		_input: SimpleTextArea;
 		constructor( props: TextAreaProps );
+		setText( text: string ): void;
+		getText(  ): void;
+		queryInterface<T>( name: string ): T;
 	}
 
 	// ---------------------------------------
@@ -1389,22 +2100,31 @@ declare module 'x4js' {
 		label: string | UnsafeHtml;
 		labelWidth?: number;
 		inputId?: string;
-		type?: "text" | "email" | "password";
+		type?: "text" | "email" | "password" | "date" | "number";
+		name?: string;
 		readonly?: boolean;
 		required?: boolean;
 		value: string | number;
 		placeholder?: string;
+		autofocus?: boolean;
 		inputGadgets?: Component[];
+		inputAttrs?: any;
+		focus?: EventCallback<EvFocus>;
+		change?: EventCallback<EvChange>;
 	}
 
-	export class TextEdit extends HBox {
+	@class_ns( "x4" ) export class TextEdit extends HBox {
+		input: Input;
 		constructor( props: TextEditProps );
+		getValue(  ): void;
+		setValue( value: string ): void;
+		getInput(  ): void;
 	}
 
 	// ---------------------------------------
 	// from /src/components/tooltips/tooltips.ts
 
-	 class Tooltip extends Popup {
+	@class_ns( "x4" ) class Tooltip extends Popup {
 		constructor( props: PopupProps );
 		setText( text: string|UnsafeHtml ): void;
 	}
@@ -1431,6 +2151,7 @@ declare module 'x4js' {
 
 	interface TreeviewProps extends Omit<ComponentProps,"content"> {
 		items: TreeItem[];
+		footer?: Component;
 	}
 
 	interface ChangeEvent extends ComponentEvent {
@@ -1438,10 +2159,10 @@ declare module 'x4js' {
 	}
 
 	interface TreeviewEvents extends ComponentEvents {
-		change: ChangeEvent;
+		selectionChange?: EvSelectionChange;
 	}
 
-	 class CTreeViewItem extends Box {
+	@class_ns( "x4" ) class CTreeViewItem extends Box {
 		_item: TreeItem;
 		_label: Component;
 		_icon: Icon;
@@ -1452,7 +2173,8 @@ declare module 'x4js' {
 		setItems( items: TreeItem[ ] ): void;
 	}
 
-	export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+	@class_ns( "x4" ) export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+		_view: Viewport;
 		_selection: ListboxID;
 		_selitem: Component;
 		_items: TreeItem[];
@@ -1466,7 +2188,11 @@ declare module 'x4js' {
 		_selectItem( id: ListboxID, item: Component ): void;
 		_findItem( id: ListboxID ): void;
 		clearSelection(  ): void;
+		getSelection(  ): void;
 	}
 
+	// ---------------------------------------
+	// from /src/components/components.ts
+
 }