x4js 2.0.26 → 2.0.30

package/src/components/keyboard/keyboard.ts

@@ -121,14 +121,14 @@ export class Keyboard extends HBox<KeyboardProps>
 		this.hide( );
 
 		this.addDOMEvent( "mousedown", (e) => {
-			this.handleKey( e ); 	
+			this.handleKeyEvent( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
 
 		// for rapid people
 		this.addDOMEvent( "dblclick", (e) => {
-			this.handleKey( e ); 	
+			this.handleKeyEvent( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
@@ -148,7 +148,7 @@ export class Keyboard extends HBox<KeyboardProps>
 	 * 
 	 */
 
-    private handleKey( e: UIEvent ) {
+    private handleKeyEvent( e: UIEvent ) {
         let target = e.target as HTMLElement;
         let key;
 
@@ -165,6 +165,10 @@ export class Keyboard extends HBox<KeyboardProps>
 			return;
 		}
 
+		this._handleKey( key );
+	}
+
+	private _handleKey( key: number ) {
         switch( key ) {
             // bk space
             case 2: {
@@ -326,11 +330,16 @@ export class Keyboard extends HBox<KeyboardProps>
     private handleFocus( target: Element, enter: boolean ) {
 		
         if( enter ) {
-            if( target.tagName=='INPUT' && !(target as HTMLInputElement).readOnly ) {
-                this.input = target as HTMLInputElement;
-                this.visible = true;
-				this.setTimeout( "vis", 200, this._updateVis );
-				return;
+            if( target.tagName=='INPUT' ) {
+				const input = target as HTMLInputElement;
+				if( !input.readOnly && 
+					input.type!='checkbox' && input.type!='radio' && 
+					input.type!='range' && input.type!='file' ) {
+					this.input = input;
+					this.visible = true;
+					this.setTimeout( "vis", 200, this._updateVis );
+					return;
+				}
             }
 		}
 		
@@ -430,6 +439,7 @@ export class Keyboard extends HBox<KeyboardProps>
                 let content = line[i];
                 let key;
 				let icon = null;
+				let repeat = false;
 
                 if( content.length>2 && content[0]=='{' && content[content.length-1]=='}') {
                     
@@ -452,6 +462,7 @@ export class Keyboard extends HBox<KeyboardProps>
 
 						case 2:
 						{
+							repeat = true;
 							content = undefined;
 							icon = icon_bksp;
 							cls += ' cdel'; 
@@ -516,7 +527,18 @@ export class Keyboard extends HBox<KeyboardProps>
                     key = line[i].charCodeAt(0);
                 }
 
-                let el = new Button( { cls, label: content, attrs: {'data-key': key}, icon } );
+                let el = new Button( { 
+					cls, 
+					label: content, 
+					attrs: {'data-key': key}, 
+					icon, 
+					autorepeat: repeat, 
+					click: ( e ) => {
+						if( e.repeat ) {
+							this._handleKey( key )
+						}
+					}
+				} );
                 tl.push( el );
             }
 

package/src/components/label/label.module.scss

@@ -30,16 +30,25 @@
 	background-color: var( --label-background );
 	gap: 0.2em;
 
+	&.al-right
 	&.right  {
 		text-align: right;
 		justify-content: end;
 	}
 
+	&.al-center,
 	&.center {
 		text-align: center;
 		justify-content: center;
 	}
 
+	&.al-right {
+		padding-left: 8px;
+		#icon {
+			order: 2;
+		}
+	}
+
 	#text {
 		&:empty {
 			display: none;

package/src/components/label/label.ts

@@ -24,6 +24,7 @@ export interface LabelProps extends ComponentProps {
 	text?: string | UnsafeHtml;
 	icon?: string;
 	labelFor?: string;
+	align?: "left" | "center" | "right";
 }
 
 /**
@@ -32,29 +33,32 @@ export interface LabelProps extends ComponentProps {
 
 @class_ns( "x4" )
 export class Label extends Component<LabelProps> {
-	#text: Component;
 	
 	constructor( p: LabelProps ) {
 		super( { ...p, content: null } );
 
 		this.setContent( [
 			new Icon( { id:"icon", iconId: this.props.icon } ),
-			this.#text = new Component( { tag: 'span', id: 'text' } )
+			new Component( { tag: 'span', id: 'text' } )
 		] );
 
 		// small hack for react:
 		//	p.content may be the text
-		const text = this.props.text;
-		this.setText( text );
+		this.setText( this.props.text );
 	
 		if( p.labelFor ) {
 			this.setAttribute( "for", p.labelFor );
 		}
+
+		if( p.align ) {
+			this.addClass( "al-"+p.align );
+		}
 	}
 
 	setText( text: string | UnsafeHtml ) {
-		this.#text.setContent( text );
-		this.#text.setClass( "empty", !text );
+		const lab = this.query<Icon>( "#text" );
+		lab.setContent( text );
+		lab.setClass( "empty", !text );
 	}
 
 	setIcon( icon: string ) {

package/src/components/link/link.module.scss

@@ -0,0 +1,44 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file link.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2026 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.
+ **/
+
+.x4link {
+	cursor: pointer;		
+
+	#text {
+		text-decoration: underline;
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+		border-color: var( --border );
+		color: var( --listbox-item-color-disabled );
+
+		&>.body {
+			.x4viewport {
+				pointer-events: none;
+				.x4item {
+					&.selected {
+						background-color: var( --listbox-item-color-sel-disabled );
+					}
+				}
+			}
+		}
+	}
+
+	&:focus-within {
+		border-color: var( --listbox-border-focus );
+	}
+}

package/src/components/link/link.ts

@@ -19,6 +19,7 @@ import { EventCallback } from '../../core/core_events';
 import { class_ns, UnsafeHtml } from '../../core/core_tools';
 import { Label } from '../label/label';
 
+import "./link.module.scss"
 
 /**
  * Link events
@@ -36,6 +37,7 @@ interface LinkProps extends ComponentProps {
 	href: string;
 	text?: string | UnsafeHtml;	// you can also use content for complexe content
 	icon?: string;
+	align?: "left" | "center" | "right";
 	click?: EventCallback<EvClick>;
 }
 
@@ -44,12 +46,16 @@ export class Link extends Component<LinkProps,LinkEvents> {
 	constructor( props: LinkProps ) {
 		super( { tag: "a", ...props} );
 
-		this.setAttribute( "href", props.href );
+		if( props.href ) {
+			this.setAttribute( "href", props.href );
+		}
+
 		this.mapPropEvents( props, "click" );
 
 		this.setContent( new Label( {
 			text: props.text,
 			icon: props.icon,
+			align: props.align,
 		} ) );
 
 		this.addDOMEvent('click', (e) => this._on_click(e));

package/src/components/listbox/listbox.module.scss

@@ -39,16 +39,20 @@
 	border: 1px solid var( --listbox-border );
 	background-color: var( --listbox-background );
 
-	&:focus-within {
-		border-color: var( --listbox-border-focus );
-	}
-
 	outline: none;
 
 	&>.x4header {
 		border-bottom: 1px solid var( --border );
 	}
 
+	&>.title {
+	    background: white;
+		padding: 4px;
+		font-weight: bold;
+		color: black;
+		border-bottom: 1px solid var(--border);
+	}
+
 	&>.body {
 		width: 100%;
 		flex-basis: 0;
@@ -94,6 +98,12 @@
 				}
 			}
 
+			.ref-c1 { width: var( --ref-c1-width); }
+			.ref-c2 { width: var( --ref-c2-width); }
+			.ref-c3 { width: var( --ref-c3-width); }
+			.ref-c4 { width: var( --ref-c4-width); }
+			.ref-c5 { width: var( --ref-c5-width); }
+
 			//&:active{
 				//background-color: var( --color-80 );
 				//color: var(--color-0);
@@ -162,4 +172,8 @@
 			}
 		}
 	}
+
+	&:focus-within {
+		border-color: var( --listbox-border-focus );
+	}
 }

package/src/components/listbox/listbox.ts

@@ -42,8 +42,7 @@ export interface ListItem {
  * 
  */
 
-interface ListboxEvents extends ComponentEvents {
-	//change: EvChange;
+export interface ListboxEvents extends ComponentEvents {
 	click?: EvClick;
 	dblClick?: EvDblClick;
 	contextMenu?: EvContextMenu;
@@ -54,9 +53,11 @@ interface ListboxEvents extends ComponentEvents {
  * 
  */
 
-interface ListboxProps extends Omit<ComponentProps,'content'> {
+export interface ListboxProps extends Omit<ComponentProps,'content'> {
 	items?: ListItem[];
 	renderer?: ( item: ListItem ) => Component;
+	title?: string;
+	icon?: string;
 	header?: Header;
 	footer?: Component,
 	checkable?: true,
@@ -105,6 +106,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 
 		this.setContent( [
+			(props.title || props.icon) ? new Label( { cls: 'title', text: props.title, icon: props.icon }) : null,
 			props.header ? props.header : null,
 			scroller,
 			props.footer,
@@ -118,7 +120,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		} );
 
 		if( props.items ) {
-			this.setItems( props.items );
+			this.setItems( props.items, false );
 		}
 	}
 
@@ -192,8 +194,15 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 		else {
 			const selitem = this._itemWithID( this._lastsel );
-			let nel = sens==kbNav.next ? selitem.nextElement() : selitem.prevElement();
-			nel = next_visible( nel, sens==kbNav.next );
+
+			let nel;
+			if( selitem ) {
+				nel = sens==kbNav.next ? selitem.nextElement() : selitem.prevElement();
+				nel = next_visible( nel, sens==kbNav.next );
+			}
+			else {
+				nel = sens==kbNav.next ? this._view.firstChild() : this._view.lastChild( );
+			}
 
 			if( nel ) {
 				const id = nel.getInternalData( "id" );
@@ -407,10 +416,12 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		this._multisel.clear( );
 	}
 
-	clearSelection( ) {
+	clearSelection( fireEvent = true ) {
 		if( this._multisel.size ) {
 			this._clearSelection( );
-			this.fire( "selectionChange", { selection: [], empty: true } );
+			if( fireEvent ) {
+				this.fire( "selectionChange", { selection: [], empty: true } );
+			}
 		}
 	}
 	
@@ -426,24 +437,21 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		this._view.clearContent( );
 		this._items = items ?? [];
 
-		let upsel = false;
+		let update_sel = false;
 
 		if( this._items.length ) {
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
 
-			if( keepSel ) {
+			if( keepSel && oldSel.length>0 ) {
 				this.select( oldSel );
 			}
-			else {
-				upsel = true;
-			}
 		}
 		else {
-			upsel = true;
+			update_sel = oldSel.length>0;
 		}
 		
-		if( upsel ) {
+		if( update_sel ) {
 			this.setTimeout( "sel", 100, ( ) => {
 				this.fire( "selectionChange", { selection: [], empty: true } );
 			} );
@@ -574,4 +582,15 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	getSelection( ) {
 		return Array.from( this._multisel );
 	}
+
+	ensureSelectionVisible( ) {
+		const sels = Array.from( this._multisel.values() );
+		if( sels.length) {
+			const item = this._itemWithID( sels[0] );
+			item?.scrollIntoView( {
+				behavior: "instant",
+				block: "nearest"
+			} )
+		}
+	}
 }

package/src/components/menu/menu.module.scss

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 :root {
-	--menu-background: var( --background-primary );
+	--menu-background: var( --background-ternary );
 	--menu-border: var( --border-hover );
 
 	--menuitem-color: var( --text-ternary );;
@@ -28,7 +28,7 @@
 }
 
 .x4menu {
-	@extend .shadow-lg;
+	@extend .shadow-xxl;
 
 	position: absolute;
 	overflow-y: auto;
@@ -39,6 +39,7 @@
 	
 	background-color: var(--menu-background);
 	border: 1px solid var(--menu-border);
+	border-left: 4px solid var( --accent-background );
 
 	max-height: calc( 100vh - 32px );
 	
@@ -69,6 +70,17 @@
 			}
 		}
 
+		&.danger #icon {
+			.fa-primary {
+				fill: var( --color-danger-a50 );
+			}
+
+			.fa-secondary {
+				fill: var( --color-danger-a30 );
+				opacity: 1;
+			}
+		}
+
 		#text {
 			@extend .flex;
 		}

package/src/components/menu/menu.ts

@@ -34,7 +34,7 @@ export interface MenuItem {
 	icon?: string;
 	text: string | UnsafeHtml;
 	menu?: Menu;
-	disabled?: true;
+	disabled?: boolean;
 	click?: DOMEventHandler;
 }
 

package/src/components/messages/messages.ts

@@ -98,6 +98,11 @@ export class MessageBox extends Dialog<DialogProps>
 }
 
 
+interface InputOptions {
+	password?: boolean;
+	trim?: boolean;
+}
+
 @class_ns( "x4" )
 export class InputBox extends Dialog<DialogProps>
 {
@@ -110,7 +115,10 @@ export class InputBox extends Dialog<DialogProps>
 		return input.getValue( );
 	}
 
-	private static _create( msg: string | UnsafeHtml, value: string, title: string ) {
+	private static _create( msg: string | UnsafeHtml, value: string, title: string, options?: InputOptions ) {
+
+		options = {trim: true, password: false, ...options };
+
 		const box = new InputBox({ 
 			modal: true,
 			title,
@@ -122,7 +130,7 @@ export class InputBox extends Dialog<DialogProps>
 							new Icon( { iconId: pen_icon }),
 							new VBox( { flex: 1, content: [
 								new Label( { text: msg } ),
-								new Input( { value, type: "text" } )
+								new Input( { value, type: options.password ? "password" : "text", trim: options.trim } )
 							]})
 						]
 					}),
@@ -138,11 +146,11 @@ export class InputBox extends Dialog<DialogProps>
 	 * idem with promise
 	 */
 
-	static async showAsync( msg: string | UnsafeHtml, value: string, title?: string ) : Promise<string> {
+	static async showAsync( msg: string | UnsafeHtml, value: string, title?: string, options?: InputOptions ) : Promise<string> {
 
-		return new Promise( (resolve, reject ) => {
+		return new Promise( (resolve, _reject ) => {
 
-			const box = this._create( msg, value, title );
+			const box = this._create( msg, value, title, options );
 		
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {

package/src/components/panel/panel.module.scss

@@ -51,10 +51,17 @@
 	border: none;
 	border-top: 1px solid var( --border );
 	margin-top: 1.5em;
+	border-radius: 0;
+	
+	padding: 0;
 
 	legend {
 		background: none;
 		top: -1.4em;
 		left: 0;
 	}
+
+	& >.body {
+		padding: 0;
+	}
 }

package/src/components/popup/popup.ts

@@ -21,6 +21,7 @@ import { Rect, Point, class_ns, asap } from '../../core/core_tools';
 import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
+import { getGlobalZoom, getScrollbarSize } from '../../core/core_tools.js';
 
 export interface PopupEvents extends ComponentEvents {
 	closed: ComponentEvent;
@@ -143,24 +144,27 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	 */
 
 	displayAt( x: number, y: number ) {
+		const zm = getGlobalZoom( );
+		
 		//TODO: check is already visible
 		this.setStyle( {
-			left: x+"px",
-			top: y+"px",
+			left: (x/zm)+"px",
+			top: (y/zm)+"px",
 		})
 
 		this._do_show( );	// to compute size
 
-		const rc = this.getBoundingRect( );
-		const width = window.innerWidth - 16;
-		const height = window.innerHeight - 16;
-		
-		if( rc.right>width ) {
-			this.setStyleValue( "left", width-rc.width );
+		const rc = this.getBoundingRect( ).scale( 1/zm );
+		const sbw = getScrollbarSize( );
+
+		const screen_width  = window.innerWidth - sbw;
+		if( rc.right>screen_width ) {
+			this.setStyleValue( "left", screen_width-rc.width );
 		}
 
-		if( rc.bottom>height ) {
-			this.setStyleValue( "top", height-rc.height );
+		const screen_height = window.innerHeight - sbw;
+		if( rc.bottom>screen_height ) {
+			this.setStyleValue( "top", screen_height-rc.height );
 		}
 	}
 

package/src/components/propgrid/propgrid.ts

@@ -73,7 +73,7 @@ export class PropertyGrid extends VBox {
 		if( props.groups ) {
 			this.setItems( props.groups );
 		}
-	};
+	}
 
 	/**
 	 * 
@@ -125,8 +125,13 @@ export class PropertyGrid extends VBox {
 			}
 		}
 
+		let cls = "group";
+		if( g.cls ) {
+			cls += ' '+g.cls;
+		}
+
 		const tr = new HBox({
-			cls: 'group',
+			cls,
 			content: [
 				g.icon ? new Icon({ id: "icon", iconId: g.icon }) : null,
 				new VBox( { content: [
@@ -240,9 +245,14 @@ export class PropertyGrid extends VBox {
 				}
 			});
 		}
+		
+		let cls = 'row';
+		if( item.cls ) {
+			cls += ' ' + item.cls;
+		}
 
 		return new HBox({
-			cls: 'row',
+			cls,
 			content: [
 				use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
 				new Component({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content: editor })

package/src/components/shared.scss

@@ -75,6 +75,10 @@
 	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+.shadow-xxl {
+	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+}
+
 
 @keyframes rotating {
 	from {