x4js 2.3.13 → 2.3.14

package/aicontext.md

@@ -130,7 +130,7 @@ interface ComponentProps {
   ns?: string                                        // SVG/MathML namespace
   cls?: string                                       // extra CSS classes
   id?: string
-  style?: Partial<CSSStyleDeclaration>
+  style?: StyleProps                                 // numbers get "px" except unitless
   attrs?: Record<string, string | number | boolean>
   content?: ComponentContent
   dom_events?: GlobalDOMEvents
@@ -188,7 +188,7 @@ getInternalData<T>(name: string|symbol): T
 ### Styles
 
 ```ts
-setStyle(style: Partial<CSSStyleDeclaration>): this  // numbers auto-suffixed "px" except unitless
+setStyle(style: StyleProps): this  // numbers auto-suffixed "px" except unitless
 setStyleValue<K>(name: K, value): this
 getStyleValue<K>(name: K): CSSStyleDeclaration[K]
 setWidth(w: number|string): void
@@ -633,7 +633,20 @@ class AutoComplete extends TextEdit {
 ### `ColorInput`
 
 ```ts
-class ColorInput extends HBox {}           // queryInterface("form-element")
+interface ColorInputProps extends BoxProps {
+  color: Color | string                    // null: no color shown
+  name?: string
+  format?: "rgb" | "hex"                   // text of the field, "rgb" by default
+  picker?: boolean                         // a click on the swatch opens a ColorPicker
+  swatches?: (Color|string)[] | (() => (Color|string)[])   // a function is called each time the picker opens
+  nullable?: boolean                       // "no color" can be chosen
+  change?: EventCallback<EvColorChange>    // user changes only, not setColor
+}
+class ColorInput extends HBox {            // queryInterface("form-element"): "#rrggbb" or null
+  getColor(): Color; getValue(): string
+  setColor(color: Color | string): void; setSwatches(swatches): void
+}
+interface EvColorChange extends EvChange { color: Color; value: string }  // "#rrggbb" or "#rrggbbaa"; both null for "no color"
 ```
 
 ### `FileDrop` / `FileDialog`
@@ -796,6 +809,9 @@ class PropertyGrid extends VBox {
   setItems(groups: PropertyGroup[]): void
   setPropValue(name: string, value): void
 }
+// PropertyValue.type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'color' | 'label' | 'button'
+// 'color': the editor is a ColorInput (hex, with picker); swatches?: string[] | (() => string[]), nullable?: boolean,
+//          callback(name, value) receives "#rrggbb", or null for "no color"
 ```
 
 ---
@@ -978,7 +994,9 @@ class Video extends Box {
   set stream(stream: MediaStream)
 }
 class Calendar extends VBox { getDate(): Date; setDate(date: Date): void }
-class ColorPicker extends VBox             // queryInterface("form-element")
+class ColorPicker extends VBox {           // props: color, swatches?, nullable?; "change": EvColorChange, also fired once when built
+  getColor(): Color; setColor(color: Color | string): void; setSwatches(swatches): void
+}
 class Panel extends VBox { setTitle(title: string): void }
 class Breadcrumbs extends HBox { setItems(elements): void }
 class Keyboard extends HBox                // virtual keyboard

package/package.json

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

package/src/components/colorinput/colorinput.module.scss

@@ -17,7 +17,8 @@
 :root {
 	--colorinput-btn-background: inherit;
 	--colorinput-btn-color: var( --text-secondary );
-	--colorinput-btn-color-hover: var( --text-primary );	
+	--colorinput-btn-color-hover: var( --text-primary );
+	--colorinput-popup-background: var( --background-primary );
 }
 
 .x4colorinput {
@@ -33,6 +34,27 @@
 		margin: 4px;
 		width: 1rem;
 		height: 1rem;
+
+		// props.picker: a click opens the color picker. It is a button:
+		// wide enough to be aimed at.
+		&.picker {
+			flex-shrink: 0;
+			width: 2.4rem;
+			height: 1.4rem;
+			border: 1px solid var( --border );
+			border-radius: 3px;
+			cursor: pointer;
+
+			&:hover {
+				border-color: var( --border-focus );
+			}
+		}
+
+		// props.nullable, no color: crossed out
+		&.none {
+			border: 1px solid var( --border );
+			background: linear-gradient( to top right, transparent 45%, #d04040 45%, #d04040 55%, transparent 55% );
+		}
 	}
 
 	input {
@@ -42,14 +64,19 @@
 		flex-grow: 1;
 	}
 
+	// the eye dropper: as high as the field, and wide enough to be aimed at
 	.x4button {
+		flex-shrink: 0;
+		align-self: stretch;
 		margin: 0;
-		padding: 0;
+		padding: 0 6px;
 		outline: none;
 		background-color: var( --combobox-btn-background );
 		color: var( --colorinput-btn-color );
 
 		#icon {
+			width: 1.3em;
+			height: 1.3em;
 			color: var( --colorinput-btn-color );
 		}
 
@@ -62,4 +89,11 @@
 			//color: var( --color-10 );
 		}
 	}
+}
+
+// the color picker opened from the swatch (props.picker)
+.x4colorinput-popup {
+	background-color: var( --colorinput-popup-background );
+	border: 1px solid var( --border );
+	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.3 );
 }

package/src/components/colorinput/colorinput.ts

@@ -1,40 +1,70 @@
-/** 
+/**
  *  ___  ___ __
  *  \  \/  /  / _
  *   \    /  /_| |_
- *   /    \____   _|  
+ *   /    \____   _|
  *  /__/\__\   |_|
- * 
+ *
  * @file colorinput.ts
- * @author Etienne Cochard 
- * 
+ * @author Etienne Cochard
+ *
  * @copyright (c) 2026 R-libre ingenierie
  *
- * Use of this source code is governed by an MIT-style license 
+ * 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 { Component } from '../../core/component';
-import { isFeatureAvailable, class_ns } from '../../core/core_tools';
+import { Component, ComponentEvents } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { isFeatureAvailable, class_ns, isFunction, IComponentInterface, IFormElement } from '../../core/core_tools';
 import { Color } from '../../core/core_colors';
 
 import { BoxProps, HBox } from '../boxes/boxes';
 import { Input } from '../input/input';
 import { Button } from '../button/button';
+import { Popup } from '../popup/popup';
+import { ColorPicker, EvColorChange } from '../colorpicker/colorpicker';
 
 
 import "./colorinput.module.scss"
 import icon from "./crosshairs-simple-sharp-light.svg"
 
-//TODO: add swatches
 //TODO: better keyboard handling (selection after cursor)
 
+type Swatches = ( Color | string )[];
+
 /**
- * 
+ *
  */
 
-interface ColorInputProps extends BoxProps {
+export interface ColorInputProps extends BoxProps {
+	/** The color at start. null: no color is shown. */
 	color: Color | string;
+
+	/** Name of the field: with it, a Form reads and writes the color (as "#rrggbb"). */
+	name?: string;
+
+	/** How the field writes the color. "rgb" by default: rgb(r,g,b). "hex": #rrggbb. */
+	format?: "rgb" | "hex";
+
+	/** A click on the swatch opens a color picker. */
+	picker?: boolean;
+
+	/**
+	 * Colors offered in the picker. A function is called each time the
+	 * picker opens: the list may change with time.
+	 */
+	swatches?: Swatches | ( ( ) => Swatches );
+
+	/** The field may have no color: emptied, or "no color" picked. */
+	nullable?: boolean;
+
+	/** The user changed the color (not fired by setColor). */
+	change?: EventCallback<EvColorChange>;
+}
+
+interface ColorInputEvents extends ComponentEvents {
+	change: EvColorChange;
 }
 
 /**
@@ -43,56 +73,196 @@ interface ColorInputProps extends BoxProps {
  * --colorinput-btn-background
  * --colorinput-btn-color
  * --colorinput-btn-color-hover
+ * --colorinput-popup-background
  * ```
  */
 
 @class_ns( "x4" )
-export class ColorInput extends HBox<ColorInputProps> {
+export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 	static "$cls-ns" = "x4";
 
+	private _color: Color;				// null: no color
+	private _swatch: Component;
+	private _edit: Input;
+	private _swatches: Swatches | ( ( ) => Swatches );
+	private _popup: Popup;				// the color picker, once it was opened
+
 	constructor( props: ColorInputProps ) {
 		super( props );
 
-		let swatch: Component;
-		let edit: Input;
+		this.mapPropEvents( props, "change" );
+		this._swatches = props.swatches;
+
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
 
 		this.setContent( [
-			swatch = new Component( { cls: "swatch" } ),
-			edit = new Input( { type: "text", value: "", spellcheck: false } ),
+			this._swatch = new Component( { cls: "swatch" } ),
+			this._edit = new Input( { type: "text", value: "", spellcheck: false } ),
 
 			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
 				const eyeDropper = new (window as any).EyeDropper();
 				eyeDropper.open( ).then( ( result: any ) => {
-					color = new Color( result.sRGBHex );
-					updateColor( color );
+					this._changed( new Color( result.sRGBHex ) );
 				}).catch( (_: any ) => {
 					/* silence */
 				});
 			} } ) : null
 		])
 
-		edit.addDOMEvent( "input", ( ) => {
-			const txt = edit.getValue( );
+		this._edit.addDOMEvent( "input", ( ) => {
+			const txt = this._edit.getValue( );
+
+			if( this.props.nullable && txt.trim( )=="" ) {
+				this._changed( null, false );
+				return;
+			}
+
 			const clr = new Color( txt );
 			if( !clr.isInvalid() ) {
-				color = clr;
-				updateColor( color );
+				this._changed( clr );
 			}
 		});
 
-		const updateColor = ( clr: Color ) => {
-			swatch.setStyleValue( "backgroundColor", clr.toRgbString(false) );
-			edit.setValue( clr.toRgbString(false) );
+		if( props.picker ) {
+			// A click on the swatch opens the picker, a second one closes it.
+			// The picker closes by itself as soon as the button goes down
+			// outside of it: whether it was open is to be known before that.
+			let wasOpen = false;
+
+			this._swatch.addClass( "picker" );
+			this._swatch.addDOMEvent( "pointerdown", ( ) => { wasOpen = !!this._popup?.isOpen( ); } );
+			this._swatch.addDOMEvent( "click", ( ) => {
+				if( !wasOpen ) {
+					this._openPicker( );
+				}
+			} );
+		}
+
+		this._show( this._parse( props.color ) );
+	}
+
+	private _parse( color: Color | string ): Color {
+		if( color instanceof Color ) {
+			return color;
 		}
 
-		let color: Color;
-		if( props.color instanceof Color ) {
-			color = props.color;
+		// Nothing to show (a color that is not known, or several ones). Whether
+		// the user may choose "no color" is another matter: props.nullable.
+		if( color===null || color===undefined || color==="" ) {
+			return null;
+		}
+
+		return new Color( color );
+	}
+
+	private _format( color: Color ): string {
+		return this.props.format=="hex" ? color.toHexString( ) : color.toRgbString( false );
+	}
+
+	/**
+	 * show a color: swatch and text
+	 * @param text false while the user empties the field: the text is left alone
+	 */
+
+	private _show( color: Color, text = true ) {
+		this._color = color;
+
+		this._swatch.setClass( "none", !color );
+		this._swatch.setStyleValue( "backgroundColor", color ? color.toRgbString(false) : null );
+
+		if( text ) {
+			this._edit.setValue( color ? this._format( color ) : "" );
 		}
-		else {
-			color = new Color( props.color );
+	}
+
+	/**
+	 * the user changed the color
+	 */
+
+	private _changed( color: Color, text = true ) {
+		this._show( color, text );
+		this.fire( "change", { color, value: color ? color.toHexString( ) : null } );
+	}
+
+	/**
+	 * The color picker, with the swatches, under the field. It closes on
+	 * a click outside of it.
+	 */
+
+	private _openPicker( ) {
+		const swatches = isFunction( this._swatches ) ? this._swatches( ) : this._swatches;
+
+		// the picker works on its own color: it changes it in place
+		const picker = new ColorPicker( {
+			color: this._color ? new Color( this._color.toHexString( ) ) : new Color( 255, 255, 255 ),
+			swatches,
+			nullable: this.props.nullable,
+		} );
+
+		const popup = this._popup = new Popup( { cls: "x4colorinput-popup", autoClose: true, content: picker } );
+
+		// after the construction: the picker fires a first change when it is built
+		picker.on( "change", ev => {
+			this._changed( ev.color ? new Color( ev.value ) : null );
+
+			if( !ev.color ) {
+				popup.close( );
+			}
+		} );
+
+		popup.displayNear( this.getBoundingRect( ), "top left", "bottom left", { x: 0, y: 6 } );
+	}
+
+	/**
+	 * The current color, null when there is none.
+	 */
+
+	getColor( ): Color {
+		return this._color;
+	}
+
+	/**
+	 * The current color as "#rrggbb" ("#rrggbbaa" when it is not opaque),
+	 * null when there is none.
+	 */
+
+	getValue( ): string {
+		return this._color ? this._color.toHexString( ) : null;
+	}
+
+	/**
+	 * Shows another color, or none (null). Does not fire `change`.
+	 */
+
+	setColor( color: Color | string ) {
+		this._show( this._parse( color ) );
+	}
+
+	/**
+	 * Changes the colors offered in the picker (see props.swatches).
+	 */
+
+	setSwatches( swatches: Swatches | ( ( ) => Swatches ) ) {
+		this._swatches = swatches;
+	}
+
+	/**
+	 *
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getValue( ); },
+				setRawValue: ( v: any ) => { this.setColor( v ); },
+				isValid: ( ) => { return true; }
+			};
+
+			return i as unknown as T;
 		}
 
-		updateColor( color );
+		return super.queryInterface( name );
 	}
-}
+}

package/src/components/colorpicker/colorpicker.module.scss

@@ -130,4 +130,27 @@
 			}
 		}
 	}
+
+	// the colors offered under the sliders (props.swatches)
+	.swatches {
+		flex-wrap: wrap;
+		gap: 4px;
+
+		.item {
+			width: 18px;
+			height: 18px;
+			border: 1px solid var( --border );
+			border-radius: 3px;
+			cursor: pointer;
+
+			&:hover {
+				border-color: var( --border-focus );
+			}
+
+			// no color: crossed out
+			&.none {
+				background: linear-gradient( to top right, transparent 45%, #d04040 45%, #d04040 55%, transparent 55% );
+			}
+		}
+	}
 }

package/src/components/colorpicker/colorpicker.ts

@@ -17,13 +17,19 @@
 import { Color, Hsv } from '../../core/core_colors';
 import { Rect, clamp, class_ns, isFeatureAvailable } from '../../core/core_tools';
 
-import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
 
 import "./colorpicker.module.scss"
 
-interface ColorPickerProps extends ComponentProps {
+export interface ColorPickerProps extends ComponentProps {
 	color: string | Color;
+
+	/** Colors offered under the sliders, to be picked with a click. */
+	swatches?: ( string | Color )[];
+
+	/** Adds a "no color" swatch: picking it fires `change` with a null color. */
+	nullable?: boolean;
 }
 
 interface HueChangeEvent extends ComponentEvent {
@@ -127,6 +133,18 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
 		this.color.setStyleValue( "backgroundColor", base.toRgbString(false) );
 	}
 
+	/**
+	 * Shows another color: base color and thumb. Does not fire `sat_change`.
+	 */
+
+	setColor( hsv: Hsv ) {
+		this.hsv.saturation = hsv.saturation;
+		this.hsv.value = hsv.value;
+
+		this.updateBaseColor( hsv );
+		this.updateThumbMarker( );
+	}
+
 	move( sens: string, delta: number ) {
 		switch( sens ) {
 			case 'saturation': {
@@ -335,31 +353,41 @@ class AlphaSlider extends Box<BoxProps,CommonEvents> {
  * 
  */
 
-interface ChangeEvent extends ComponentEvent {
+/**
+ * Fired by ColorPicker and ColorInput when the user changes the color.
+ *
+ * `value` is the color as text: "#rrggbb", or "#rrggbbaa" when it is not
+ * opaque. Both are null when the user picked "no color" (`nullable`).
+ */
+
+export interface EvColorChange extends EvChange {
 	color: Color;
+	readonly value: string;
 }
 
 interface ColorPickerChangeEvents extends ComponentEvents {
-	change: ChangeEvent
+	change: EvColorChange
 }
 
 /**
- * 
+ *
  */
 
 @class_ns( "x4" )
 export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
 
 	private _base: Color;
+	private _hsv: Hsv;
 	private _sat: Saturation;
 	private _swatch: Component;
 	private _hue: HueSlider;
 	private _alpha: AlphaSlider;
+	private _swatches: HBox;
 
 
 	constructor( props: ColorPickerProps ) {
 		super( props );
-	
+
 		if( props.color instanceof Color ) {
 			this._base = props.color;
 		}
@@ -367,7 +395,7 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 			this._base = new Color( props.color );
 		}
 
-		let hsv = this._base.toHsv( );
+		const hsv = this._hsv = this._base.toHsv( );
 
 		this.setAttribute( "tabindex", 0 );
 
@@ -385,48 +413,34 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 						this._swatch = new Component( { cls: "overlay" } ),
 					] } )
 				]
-			})
+			}),
+			this._swatches = new HBox( { cls: "swatches" } ),
 		]);
 
 		this._sat.on( "sat_change", ( ev ) => {
-			hsv.saturation = ev.saturation;
-			hsv.value = ev.value;
-			updateColor( );
-			this._alpha.updateBaseColor( hsv );
+			this._hsv.saturation = ev.saturation;
+			this._hsv.value = ev.value;
+			this._changed( );
+			this._alpha.updateBaseColor( this._hsv );
 		} );
 
 		this._hue.on( 'hue_change', ( ev ) => {
-			hsv.hue = ev.hue;
-			this._sat.updateBaseColor( hsv );
-			this._alpha.updateBaseColor( hsv );
-			updateColor( );
+			this._hsv.hue = ev.hue;
+			this._sat.updateBaseColor( this._hsv );
+			this._alpha.updateBaseColor( this._hsv );
+			this._changed( );
 		} );
 
 		this._alpha.on( 'alpha_change', ( ev ) => {
-			hsv.alpha = ev.alpha;
-			updateColor( );
+			this._hsv.alpha = ev.alpha;
+			this._changed( );
 		} );
 
-		const updateColor = ( ) => {
-			this._base.setHsv( hsv.hue, hsv.saturation, hsv.value, hsv.alpha );
-			this._swatch.setStyleValue( "backgroundColor", this._base.toRgbString() );
-			this._swatch.setAttribute( "tooltip", this._base.toRgbString() );
-
-			this.fire( "change", { color: this._base } );
-		}
-
 		if( isFeatureAvailable("eyedropper") ) {
 			this._swatch.addDOMEvent( "click", ( e ) => {
 				const eyeDropper = new (window as any).EyeDropper();
 				eyeDropper.open( ).then( ( result: any ) => {
-					const color = new Color( result.sRGBHex );
-					hsv = color.toHsv( );
-
-					this._alpha.setColor( hsv );
-					
-					this._sat.updateBaseColor( hsv );
-					this._hue.updateHue( hsv );
-					updateColor( );
+					this._pick( new Color( result.sRGBHex ) );
 				}).catch( (_: any )=> {
 					/* silence */
 				} );
@@ -435,7 +449,107 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 
 		this.addDOMEvent( "keydown", ( ev ) => this._onkey( ev ) );
 
-		updateColor( );
+		this.setSwatches( props.swatches );
+		this._changed( );
+	}
+
+	/**
+	 * the sliders moved: compute the color, show it, tell it
+	 */
+
+	private _changed( ) {
+		const hsv = this._hsv;
+
+		this._base.setHsv( hsv.hue, hsv.saturation, hsv.value, hsv.alpha );
+		this._refresh( );
+		this._notify( );
+	}
+
+	private _refresh( ) {
+		this._swatch.setStyleValue( "backgroundColor", this._base.toRgbString() );
+		this._swatch.setAttribute( "tooltip", this._base.toRgbString() );
+	}
+
+	private _notify( ) {
+		this.fire( "change", { color: this._base, value: this._base.toHexString() } );
+	}
+
+	/**
+	 * the user took a color as a whole (eye dropper, swatch)
+	 */
+
+	private _pick( color: Color ) {
+		this.setColor( color );
+		this._notify( );
+	}
+
+	/**
+	 * The current color. It is the object the `change` event gives, and it
+	 * changes with the picker: copy it to keep a value.
+	 */
+
+	getColor( ): Color {
+		return this._base;
+	}
+
+	/**
+	 * Shows another color. Does not fire `change`.
+	 */
+
+	setColor( color: Color | string ) {
+		const rgb = ( color instanceof Color ? color : new Color( color ) ).toRgb( );
+
+		// the color itself is kept as given: going through hsv could shift it
+		this._base.setRgb( rgb.red, rgb.green, rgb.blue, rgb.alpha );
+
+		const hsv = this._base.toHsv( );
+		this._hsv.hue = hsv.hue;
+		this._hsv.saturation = hsv.saturation;
+		this._hsv.value = hsv.value;
+		this._hsv.alpha = hsv.alpha;
+
+		this._sat.setColor( this._hsv );
+		this._hue.updateHue( this._hsv );
+		this._alpha.setColor( this._hsv );
+
+		this._refresh( );
+	}
+
+	/**
+	 * Colors offered under the sliders. A click on one of them takes it
+	 * and fires `change`. Nothing is shown without swatches.
+	 */
+
+	setSwatches( swatches: ( string | Color )[] ) {
+		const items: Component[] = [];
+
+		if( this.props.nullable ) {
+			items.push( new Component( {
+				cls: "item none",
+				dom_events: {
+					click: ( ) => this.fire( "change", { color: null, value: null } ),
+				},
+			} ) );
+		}
+
+		for( const swatch of swatches ?? [] ) {
+			const color = swatch instanceof Color ? swatch : new Color( swatch );
+			if( color.isInvalid( ) ) {
+				continue;
+			}
+
+			items.push( new Component( {
+				cls: "item",
+				tooltip: color.toHexString( ),
+				style: { backgroundColor: color.toRgbString( ) },
+				dom_events: {
+					click: ( ) => this._pick( color ),
+				},
+			} ) );
+		}
+
+		this._swatches.setContent( items );
+		this._swatches.show( items.length>0 );
 	}
 
 	private _onkey( ev: KeyboardEvent ) {

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

@@ -12,8 +12,12 @@
 	--propertygrid-odd-background: var(--color-primary-a5);
 	--propertygrid-even-background: transparent;
 	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
+	--propertygrid-hover-background: var(--color-primary-a10);
+	--propertygrid-focus-background: var(--color-primary-a20);
+	--propertygrid-input-background: rgba(255,255,255,0.6);
 
     --propertygrid-group-background: var( --color-primary-a5 );
+    --propertygrid-group-color: var( --color-primary-a50 );
 }
 
 .x4propertygrid {
@@ -36,19 +40,23 @@
 		margin: 0;
 	}
 
+	// Two columns shared by all the rows: the titles, as wide as the longest
+	// of them but never more than half of the grid, and the editors, which
+	// take the rest.
 	.root {
 		display: grid;
-		grid-template-columns: 1fr;
+		grid-template-columns: fit-content( 50% ) 1fr;
 		grid-template-rows: auto;
 	}
 
 	.group {
+		grid-column: 1 / -1;
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
 		background-color: var( --propertygrid-group-background );
 		margin-bottom: 8px;
         box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
-        color: var(--color-primary-a50);
+        color: var( --propertygrid-group-color );
         display: flex;
 		align-items: center;
 		padding: 8px;
@@ -75,14 +83,14 @@
             
             &>.x4button {
                 background-color: transparent;
-                color: var(--color-primary-a50);
+                color: var( --propertygrid-group-color );
             }
-         
+
             &>.x4label {
                 .x4icon {
                     .fa-secondary,
                     .fa-primary {
-                        fill: var( --color-primary-a50 );
+                        fill: var( --propertygrid-group-color );
                     }
 
                     width: 1em;
@@ -103,52 +111,62 @@
 		}
 
 		&:not( :last-child ) {
-			border-bottom: 1px solid var(--color-primary-a50);
+			border-bottom: 1px solid var( --propertygrid-group-color );
 			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 	}
 
+	// A row has no box of its own: its two cells go straight on the columns
+	// of the grid, which is how all the titles get the same width. (A row is
+	// a fieldset: it cannot be a subgrid.) What a row looked like, background
+	// and bottom line, is carried by its cells.
 	.row {
-		border-bottom: 1px solid var( --border-light );
-		//border-top: none;
-		//border-left: 1px solid var(--color-primary-a50);
-		//border-right: 1px solid var(--color-primary-a50);
+		display: contents;
+
+		> .cell {
+			min-width: 0;
+	    	padding: 4px;
+			border-bottom: 1px solid var( --border-light );
+
+			input {
+				background: var( --propertygrid-input-background );
+			}
+		}
 
-		&.even:not(:disabled) {
+		&.even:not(:disabled) > .cell {
 			background-color: var(--propertygrid-even-background)
 		}
-		
-		&.odd:not(:disabled) {
+
+		&.odd:not(:disabled) > .cell {
 			background-color: var(--propertygrid-odd-background)
 		}
-		
-		&.odd:disabled {
+
+		&.odd:disabled > .cell {
 			background-color: var(--propertygrid-disabled-background)
 		}
-		
-		&:has(:focus) {
-			background-color: var(--color-primary-a20);
-		}
 
-		&:hover {
-			background-color: var(--color-primary-a10);
+		&:has(:focus) > .cell {
+			background-color: var( --propertygrid-focus-background );
 		}
-		
-		.cell {
-			flex-grow: 1;
-			flex-basis: 10px;
-	    	padding: 4px;
 
-			input {
-				background: rgba(255,255,255,0.6);
-			}
+		&:hover > .cell {
+			background-color: var( --propertygrid-hover-background );
 		}
 
-		.cell:first-child {
+		> .cell:first-child {
 			border-right: 1px solid var( --border );
 		}
 
-		.hdr {
+		// a row without title (a button): its editor takes the two columns
+		> .cell:only-child {
+			grid-column: 1 / -1;
+		}
+
+		// The title, centered in the height of the row. Wider than half of
+		// the grid, it is cut by the column and goes on several lines.
+		> .hdr {
+			display: flex;
+			align-items: center;
 			padding: 8px;
 			padding-left: 34px;
 		}

package/src/components/propgrid/propgrid.ts

@@ -23,6 +23,8 @@ import { ListboxID, ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
 import { asap, class_ns, isFunction, isNumber } from '../../core/core_tools';
 import { Icon, ScrollView } from '../components'
+import { ColorInput } from '../colorinput/colorinput'
+import { EvColorChange } from '../colorpicker/colorpicker'
 
 import icons from "../assets/icons"
 
@@ -32,12 +34,14 @@ type IValue = boolean | number | string;
 type IValueCB = ( name: string) => IValue;
 
 export interface PropertyValue {
-	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'label' | 'button';
+	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'color' | 'label' | 'button';
 	title?: string;
 	desc?: string;
 	name?: string;
 	value: IValue | IValueCB;
 	options?: ListItem[];
+	swatches?: string[] | ( ( ) => string[] );	// for colors: offered in the picker; a function is called when it opens
+	nullable?: boolean;	// for colors: "no color" can be chosen, the value is then null
 	callback?: ( name: string, value: any ) => void;
 	live?: boolean;	// for live update 
 	cls?: string;
@@ -67,6 +71,16 @@ export interface PropertyProps extends ComponentProps {
  * @cssvar
  * ```
  * --propertygrid-background
+ * --propertygrid-odd-background
+ * --propertygrid-even-background
+ * --propertygrid-disabled-background
+ * --propertygrid-hover-background
+ * --propertygrid-focus-background
+ * --propertygrid-input-background
+ * --propertygrid-group-background
+ * --propertygrid-group-color
+ * --propertygrid-gadget-background
+ * --propertygrid-gadget-color
  * ```
  */
 
@@ -260,10 +274,23 @@ export class PropertyGrid extends VBox {
 				}
 			});
 		}
+		else if (item.type === 'color') {
+			editor = new ColorInput({
+				id: item.name,
+				color: value as string,
+				format: "hex",
+				picker: true,
+				swatches: item.swatches,
+				nullable: item.nullable,
+				change: ( e: EvColorChange ) => {
+					item.callback?.( item.name, e.value );
+				}
+			});
+		}
 		else if (item.type === 'label') {
-			editor = new Label({ 
+			editor = new Label({
 				id: item.name,
-				text: value as string, 
+				text: value as string,
 			});
 		}
 		else if (item.type === 'button') {
@@ -347,6 +374,12 @@ export class PropertyGrid extends VBox {
 				editor.setNumValue( value as number, -2 );
 			}
 		}
+		else if (item.type === 'color') {
+			const editor = this.root.query<ColorInput>( '#'+item.name );
+			if( editor ) {
+				editor.setColor( value as string );
+			}
+		}
 		else if (item.type === 'label') {
 			const label = this.root.query<Label>( '#'+item.name );
 			if( label ) {

package/src/core/component.ts

@@ -70,6 +70,15 @@ export const makeUniqueComponentId = ( ) => {
 	return `x4-${gen_id++}`;
 }
 
+/**
+ * CSS properties. A number gets "px", except for the unitless properties
+ * (opacity, lineHeight, flexGrow...).
+ */
+
+export type StyleProps = {
+	[K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] | number;
+};
+
 /**
  * Base properties for all components.
  */
@@ -80,7 +89,7 @@ export interface ComponentProps {
 	/** Namespace for SVG/MathML elements. */
     ns?: string;
 	/** Inline CSS styles. */
-    style?: Partial<CSSStyleDeclaration>;
+    style?: StyleProps;
 	/** HTML attributes. */
     attrs?: Record<string,string|number|boolean>;
 	/** Child content (components, strings, or HTML). */
@@ -685,17 +694,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @returns The component instance for chaining.
      */
 
-	setStyle( style: Partial<CSSStyleDeclaration> ): this {
+	setStyle( style: StyleProps ): this {
 		const _style = (this.dom as HTMLElement).style;
 
 		for( const name in style ) {
-			
-			let value = style[name];
+
+			let value: any = style[name];
 			if( !unitless[name] && (isNumber(value) || RE_NUMBER.test(value)) ) {
 				value += "px";
 			}
 
-			_style[name] = value;
+			(_style as any)[name] = value;
 		}
 
 		return this;

package/src/core/core_tools.ts

@@ -264,7 +264,7 @@ export class Rect implements IRect {
 
     moveTo( x: number, y: number ) {
         this.left = x;
-        this.top = x;
+        this.top = y;
 
         return this;
     }