x4js 2.3.30 → 2.3.31

package/aicontext.md

@@ -42,7 +42,7 @@ CoreElement<E>                 named timers + event surface (no DOM)
   │     ├── SvgComponent → Chart
   │     ├── CSizer → HSizer / VSizer
   │     ├── FileDialog, ScrollView, Viewport, DockingView, Carousel, Flex, Space
-  │     ├── HBox-based: ColorInput, Rating, Switch, Tag, Keyboard, TextEdit → AutoComplete, Breadcrumbs
+  │     ├── HBox-based: ColorInput, Rating, Switch, Tag, Keyboard, MenuBar, TextEdit → AutoComplete, Breadcrumbs
   │     └── VBox-based: Calendar, ColorPicker, FileDrop, Panel, PropertyGrid, TextArea, SettingsView, SettingItem
   └── Application<E>           singleton, no DOM of its own
 
@@ -832,7 +832,10 @@ type TextEditProps = (TextInputProps | NumberProps | DateProps | TimeProps) & {
   labelWidth?: number; inputWidth?: number; inputId?: string
   inputGadgets?: Component[]; inputAttrs?: any
 }
-// style, tooltip, hidden, flex, stretch, height: on the box (label + field); dom_events: on the input
+// style, tooltip, hidden, flex, stretch, height: on the box (label + field); dom_events: on the input,
+//   set when it is made, before the handlers of Input and of the class (the keys of an AutoComplete): they run
+//   first, and see the state before the class reacts (Enter before the suggestion is chosen). To run after them:
+//   textEdit.getInput( ).addDOMEvent( "keydown", ... ) once the component is made
 class TextEdit extends HBox {
   getValue(): string; setValue(value: string): void; getInput(): Input
 }
@@ -886,6 +889,7 @@ interface CheckboxProps extends ComponentProps {
 // button: "button danger"); without the box, the input is still reached by Tab (--checkbox-button-*, -danger-*)
 // A toggle button is a Checkbox with cls "button": getCheck() tells whether it is pressed, change when it changes
 //   new Checkbox( { cls: "button", icon: icon_bold, tooltip: "Bold", change: ( ev ) => this.setBold( ev.value ) } )
+// its icon 24px: --checkbox-button-icon-size, set by a class of the application ( .small { --checkbox-button-icon-size: 16px } )
 // in a Form: without value (or a boolean one), a boolean; with one, the value when checked, null when not
 class Checkbox extends Component {
   getCheck(): boolean; setCheck(ck: boolean): void
@@ -911,6 +915,7 @@ class Radio extends Component {
 }
 // cls: "button" (a button; "button outline" rounded), "danger" (checked in red, its round or its button: "button
 // danger"). Without the round, the input is still reached by Tab.
+// its icon 24px: --radio-button-icon-size, set by a class of the application ( .small { --radio-button-icon-size: 16px } )
 ```
 
 ### `Switch`
@@ -1162,6 +1167,7 @@ interface TreeviewProps extends Omit<ComponentProps,"content"> {
   click?: EventCallback<EvClick>
   dblClick?: EventCallback<EvDblClick>
   selectionChange?: EventCallback<EvSelectionChange>
+  contextMenu?: EventCallback<EvContextMenu>  // as a Listbox: the item under the mouse selected, ev.context its id (null out of the items), no menu of the browser
 }
 // emptyMsg: as for a Listbox. Without it the text is _tr.global.empty_list ("Empty list").
 // There is no `renderer`: an item is drawn from its `text`, `iconId`, `cls` and `sub_cols`.
@@ -1194,6 +1200,7 @@ interface SpreadsheetColumn {               // GridColumn +
 interface EvCellChange { row; col /* index */; colId /* store key */; value /* writable */; oldValue }
 class Spreadsheet extends Component {
   getSelection(): /* cell */; navigate(sens: kbNav): boolean; lock(lock): void
+  clearSelection(notify = true): void               // no cell selected; notify: selectionChange, its selection empty
   editCell(row, col, clear = false): boolean         // cell must be visible
   stopEdit(commit = true): void;  isEditing(): boolean
 }
@@ -1266,13 +1273,33 @@ class PropertyGrid extends VBox {
 interface MenuItem {
   text: string | UnsafeHtml
   cls?: string; icon?: string; menu?: Menu; disabled?: boolean
+  checked?: boolean | (() => boolean)                // a check as icon when there is no icon
   click?: DOMEventHandler
+  shortcut?: string                                  // "Mod+S": shown at the right (shortcutText), not added: see addShortcut
 }
 type MenuElement = MenuItem | Component | string    // string "-" = title/separator
 interface MenuProps extends Omit<PopupProps,"content"> { items: MenuElement[] }
 class Menu extends Popup {}                          // displayAt/displayNear/displayCenter/close
 ```
 
+### `MenuBar`
+
+```ts
+interface MenuBarItem {
+  text: string; icon?: string; disabled?: boolean
+  items: MenuElement[] | (() => MenuElement[])       // its Menu, built at each opening; a function is called then
+}
+interface MenuBarProps extends Omit<BoxProps,"content"> { items: MenuBarItem[] }
+class MenuBar extends HBox {}
+// a click on a title opens its menu under it, a second one closes it; while a menu is open, the mouse
+// on another title opens that one. No keyboard. For a web application: a desktop application
+// (Electron...) should use the menu of the system, not a MenuBar
+new MenuBar({ items: [
+  { text: "File", items: [{ text: "Open…", shortcut: "Mod+O", click: open }, "-", { text: "Quit", click: quit }] },
+  { text: "Edit", items: () => [{ text: "Undo", disabled: !canUndo(), click: undo }] },
+] })
+```
+
 ### `BtnGroup`
 
 ```ts
@@ -1336,7 +1363,8 @@ class Tabs extends Box {
 ```ts
 interface PopupProps extends ComponentProps {
   autoClose?: boolean | string             // true, or a group name: closed by a press outside; while it is shown,
-                                           //   a wheel outside every popup is ignored (the page does not scroll)
+                                           //   a wheel outside every popup is ignored (the page does not scroll);
+                                           //   a press in a popup closes the other groups opened after it, not its own
   sizable?: boolean; movable?: boolean
 }
 class Popup extends Box {
@@ -1344,7 +1372,8 @@ class Popup extends Box {
   displayNear(rc: Rect, dst?: string, src?: string, offset?: {x,y}): void
   displayCenter(center?: boolean): void
   close(): void
-  dismiss(after?: boolean): void
+  dismiss(after?: boolean): void           // closes the popups of its autoClose group; after: only those opened
+                                           //   after it (none when it is no longer open)
   isOpen(): boolean
   // show()/hide() inherited from Component; show() routes to displayCenter()
 }
@@ -1386,6 +1415,10 @@ class MessageBox extends Dialog {
   static showAsync(msg: string|UnsafeHtml, buttons?: BtnGroupItem[], title?: string,
                    icon_type?: "error"|"question"): Promise<string>
 }
+// no icon_type: an error (its icon, the title _tr.global.error, the class "error"); its title bar and its buttons
+//   in the colours of the alerts: a filled button in --alert-*, an outline one with a red border when focused.
+//   The "!" of an error, the "?" of a question: white in the disc of the icon (--msgbox-icon-mark-color,
+//   --msgbox-question-icon-mark-color)
 class InputBox extends Dialog {
   getValue(): string
   // static showAsync(msg, value, title?, options?: {password?, trim?}): Promise<string>  (null if cancelled or closed)
@@ -1760,6 +1793,7 @@ new Button({ label: 'Paste', click: async () => {
 - The events go to the component that has the focus: give it a `tabindex`.
 - Out of an event, the browser may refuse, and there is no system clipboard on a page that is not served in https. What the application set last is then what `getClipboard` gives: copy and paste still work inside the application.
 - An image is written as a PNG; another format is converted. Files can be read in a `paste` event only, and cannot be written.
+- An image offered in several formats (Inkscape: a SVG, then a PNG) is read as the PNG, by `getClipboard` and `getEventClipboard`; else the first image.
 
 ---
 
@@ -1835,7 +1869,8 @@ by the browser, in its own locale, whatever this one.
 --color-primary-a0 … --color-primary-a100     /* the scale: a0 the background, a100 the text, the accent between */
 /* the globals the components use: --background-primary / -secondary / -ternary / -hover / -active / -input,
    --text-primary / -secondary / -ternary, --border / -light / -hover / -focus, --accent-background / -hover /
-   -focus / -active / -light, --accent-color (the text on the accent), --disabled-*, --icon-color / -active,
+   -focus / -active / -light, --accent-color (the text on the accent), --accent-text (the accent as a text on the
+   background: a button checked or focused; light in the dark theme), --disabled-*, --icon-color / -active,
    --alert-*, --warning-*, --success-*, --shadow-color (the shadow of what floats: dialog, list, notification, tooltip) */
 ```
 // The greys are mixes of a0 and a100: a theme that reverses the scale gets them light on dark.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.30",
+  "version": "2.3.31",
   "description": "A full TypeScript framework for web and desktop applications: components written as classes (layouts, inputs, lists, grids, dialogs, forms, charts...) and a command line to create, serve and build them.",
   "license": "MIT",
   "type": "module",

package/src/components/button/button.module.scss

@@ -47,7 +47,7 @@
 	--ol-button-icon-color: var( --text-primary );
 
 	--ol-button-border-focus: var( --accent-background-focus );
-	--ol-button-color-focus: var( --accent-background );
+	--ol-button-color-focus: var( --accent-text );
 }
 
 .x4button {

package/src/components/checkbox/checkbox.module.scss

@@ -29,9 +29,10 @@
 
 	--checkbox-button-border: var( --border );
 	--checkbox-button-color: var( --text-ternary );
-	--checkbox-button-color-checked: var( --accent-background-active );
+	--checkbox-button-color-checked: var( --accent-text );
 	--checkbox-button-background-checked: var( --background-secondary );
 	--checkbox-button-border-checked: var( --accent-background );
+	--checkbox-button-icon-size: 24px;		// set by a class of the application on a checkbox: it wins over :root
 
 	--checkbox-danger-color: var( --alert-background );
 	--checkbox-danger-background: var( --alert-background-light );
@@ -187,8 +188,8 @@
 		#icon {
 			color: var( --checkbox-ink );
 			fill: var( --checkbox-ink );
-			width: 24px;
-			height: 24px;
+			width: var( --checkbox-button-icon-size );
+			height: var( --checkbox-button-icon-size );
 		}
 	}
 

package/src/components/checkbox/checkbox.ts

@@ -54,6 +54,7 @@ interface CheckboxProps extends ComponentProps {
  * --checkbox-button-color-checked
  * --checkbox-button-background-checked
  * --checkbox-button-border-checked
+ * --checkbox-button-icon-size
  * --checkbox-danger-color
  * --checkbox-danger-background
  * ```

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

@@ -25,6 +25,15 @@
 	--menuitem-color-active: var( --accent-color-active );
 	--menuitem-background-hover: var( --accent-background-hover );
 	--menuitem-color-hover: var( --accent-color-hover );
+	--menuitem-shortcut-color: var( --text-secondary );
+
+	--menubar-background: var( --background-primary );
+	--menubar-border: var( --border );
+
+	--menubaritem-color: var( --text-primary );
+	--menubaritem-background-hover: var( --accent-background-hover );
+	--menubaritem-color-hover: var( --accent-color-hover );
+	--menubaritem-color-disabled: var( --disabled-color-dark );
 }
 
 .x4menu {
@@ -84,6 +93,20 @@
 			@extend %flex;
 		}
 
+		// the keys of the command: after the text, which takes the width, at the right
+		#shortcut {
+			color: var(--menuitem-shortcut-color);
+			padding-left: 16px;
+			white-space: nowrap;
+		}
+
+		// hovered, active, disabled: in the colour of the text
+		&:hover, &.opened, &:active, &[disabled] {
+			#shortcut {
+				color: inherit;
+			}
+		}
+
 		&.title {
 			color: var( --text-primary );
 			cursor: auto;
@@ -124,4 +147,40 @@
 		border-bottom: 1px solid var(--border);
 		margin-bottom: 4px;
 	}
+}
+
+.x4menubar {
+	padding: 0 4px;
+
+	background-color: var(--menubar-background);
+	border-bottom: 1px solid var(--menubar-border);
+
+	.x4cmenubaritem {
+		@extend %hbox;
+
+		gap: 6px;
+		padding: 4px 10px;
+		color: var(--menubaritem-color);
+		cursor: pointer;
+		user-select: none;
+
+		transition: background-color 0.1s;
+
+		#icon {
+			width: 16px;
+			height: 16px;
+		}
+
+		// hovered, or its menu open: as an item of the menu
+		&:hover:not([disabled]),
+		&.opened {
+			background-color: var(--menubaritem-background-hover);
+			color: var(--menubaritem-color-hover);
+		}
+
+		&[disabled] {
+			color: var(--menubaritem-color-disabled);
+			cursor: auto;
+		}
+	}
 }

package/src/components/menu/menu.ts

@@ -17,9 +17,11 @@
 import { Component } from "../../core/component"
 import { DOMEventHandler } from '../../core/core_dom';
 import { Timer, UnsafeHtml, isFunction, isString } from '../../core/core_tools';
+import { shortcutText } from '../../core/core_shortcuts';
 
 import { Popup, PopupProps } from '../popup/popup';
 import { Icon } from '../icon/icon';
+import { BoxProps, HBox } from '../boxes/boxes';
 
 import icons from "../assets/icons";
 import "./menu.module.scss"
@@ -38,6 +40,13 @@ export interface MenuItem {
 	disabled?: boolean;
 	checked?: boolean | ( () => boolean);
 	click?: DOMEventHandler;
+
+	/**
+	 * the keys of the command, shown at the right of the item: "Mod+S" is written
+	 * "Ctrl+S", "⌘S" on a Mac (shortcutText). Shown only: the shortcut itself
+	 * is added by Application.addShortcut or Component.addShortcut
+	 */
+	shortcut?: string;
 }
 
 export type MenuElement = MenuItem | Component | string;
@@ -56,6 +65,7 @@ export interface MenuProps extends Omit<PopupProps,"content"> {
  * --menuitem-color-active
  * --menuitem-background-hover
  * --menuitem-color-hover
+ * --menuitem-shortcut-color
  * ```
  */
 
@@ -97,6 +107,7 @@ class CMenuItem extends Component {
 		this.setContent( [
 			new Icon({ id:"icon", iconId }),
 			new Component( { id: "text", content: itm.text } ),
+			itm.shortcut ? new Component( { id: "shortcut", content: shortcutText( itm.shortcut ) } ) : null,
 			// a sub menu: a triangle at the right, in the colour of the text
 			itm.menu ? new Icon( { id: "sub", iconId: icons.caret } ) : null,
 		]);
@@ -207,3 +218,134 @@ export class Menu extends Popup {
 	}
 }
 
+/**
+ *
+ */
+
+export interface MenuBarItem {
+	text: string;
+	icon?: string;
+	disabled?: boolean;
+
+	/** its menu; a function is called at each opening: it gives the items of that time */
+	items: MenuElement[] | ( ( ) => MenuElement[] );
+}
+
+export interface MenuBarProps extends Omit<BoxProps,"content"> {
+	items: MenuBarItem[];
+}
+
+/**
+ * a title of the bar
+ */
+
+class CMenuBarItem extends Component {
+	static classPrefix = "x4";
+
+	constructor( itm: MenuBarItem ) {
+		super( { disabled: itm.disabled } );
+
+		this.setContent( [
+			itm.icon ? new Icon( { id: "icon", iconId: itm.icon } ) : null,
+			new Component( { id: "text", content: itm.text } ),
+		] );
+	}
+}
+
+/**
+ * A row of titles, each one opens its menu under it.
+ * A click on a title opens its menu, a second one closes it. While a menu is open, the
+ * mouse on another title opens the menu of that one.
+ *
+ * For a web application. A desktop application (Electron...) should not use it: the menu
+ * of the system is preferable, where the user expects it (the top of the screen on a Mac)
+ * and with the keyboard of the system.
+ *
+ * @example
+ * new MenuBar( { items: [
+ *     { text: "File", items: [ { text: "Open…", shortcut: "Mod+O", click: open }, "-", { text: "Quit", click: quit } ] },
+ *     { text: "Edit", items: ( ) => [ { text: "Undo", disabled: !canUndo( ), click: undo } ] },
+ * ] } );
+ *
+ * @cssvar
+ * ```
+ * --menubar-background
+ * --menubar-border
+ * --menubaritem-color
+ * --menubaritem-background-hover
+ * --menubaritem-color-hover
+ * --menubaritem-color-disabled
+ * ```
+ */
+
+export class MenuBar extends HBox<MenuBarProps> {
+	static classPrefix = "x4";
+
+	private _menu: Menu;				// the menu open, null when none
+	private _title: CMenuBarItem;		// the title of that menu
+	private _closed: CMenuBarItem;		// the title whose menu closed last
+	private _closedAt = -1;				// when (performance.now)
+
+	constructor( props: MenuBarProps ) {
+		super( props );
+
+		this.setContent( props.items.map( itm => {
+			const title = new CMenuBarItem( itm );
+
+			// The menu closes by itself as soon as the button goes down outside of it,
+			// before the title hears of it: it was the menu of this title if it closed
+			// since this very press began.
+			let wasOpen = false;
+
+			title.addDOMEvent( "pointerdown", ev => { wasOpen = this._closed===title && this._closedAt >= ev.timeStamp; } );
+			title.addDOMEvent( "click", ( ) => {
+				if( !wasOpen ) {
+					this._open( title, itm );
+				}
+			} );
+
+			title.addDOMEvent( "mouseenter", ( ) => {
+				if( this._menu && this._title!==title ) {
+					this._open( title, itm );
+				}
+			} );
+
+			return title;
+		} ) );
+	}
+
+	/**
+	 * closes the menu open, opens the one of the title under it
+	 */
+
+	private _open( title: CMenuBarItem, itm: MenuBarItem ) {
+		if( title.isDisabled( ) ) {
+			return;
+		}
+
+		if( this._menu ) {
+			this._menu.dismiss( );
+		}
+
+		const menu = new Menu( { items: isFunction( itm.items ) ? itm.items( ) : itm.items } );
+
+		menu.on( "closed", ( ) => {
+			title.removeClass( "opened" );
+
+			this._closed = title;
+			this._closedAt = performance.now( );
+
+			if( this._menu===menu ) {
+				this._menu = null;
+				this._title = null;
+			}
+		} );
+
+		this._menu = menu;
+		this._title = title;
+		title.addClass( "opened" );
+
+		menu.displayNear( title.getBoundingRect( ), "top left", "bottom left" );
+	}
+}
+

package/src/components/messages/circle-exclamation.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/><path class="mark" d="M256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

package/src/components/messages/circle-question.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576z"/><path class="mark" d="M320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>

package/src/components/messages/messages.module.scss

@@ -22,6 +22,10 @@
 	--msgbox-icon-color:  var( --alert-background );
 	--msgbox-question-icon-color: var( --accent-background );		// a question, an InputBox, a PromptBox
 
+	// the "!" and the "?" in the disc of the icon: as the text on the red, on the accent
+	--msgbox-icon-mark-color: var( --alert-color );
+	--msgbox-question-icon-mark-color: var( --accent-color );
+
 	--msgbox-log-background: var( --background-ternary );		// the lines of a ProgressionBox
 	--msgbox-log-border: var( --border );
 	--msgbox-log-border-focus: var( --border-focus );
@@ -44,6 +48,22 @@
 		}
 	}
 
+	// the buttons of an error in the red of its title bar: a filled one, the focus of an outline
+	// one (its text stays the one of the text: a red text is not read on a dark background)
+	&.error {
+		--button-background: var( --alert-background );
+		--button-background-hover: var( --alert-background-active );
+		--button-background-focus: var( --alert-background-active );
+		--button-background-active: var( --alert-background-active );
+		--button-color: var( --alert-color );
+		--button-color-hover: var( --alert-color );
+		--button-color-focus: var( --alert-color );
+		--button-color-active: var( --alert-color );
+
+		--ol-button-border-focus: var( --alert-background );
+		--ol-button-color-focus: var( --ol-button-color );
+	}
+
 	& .x4form {
 		min-width: 400px;
 
@@ -51,6 +71,10 @@
 		> .x4hbox > .x4icon {
 			color: var( --msgbox-icon-color );
 			height: 96px;
+
+			.mark {
+				fill: var( --msgbox-icon-mark-color );
+			}
 		}
 
 		.x4label {
@@ -61,6 +85,10 @@
 
 	&.question .x4form > .x4hbox > .x4icon {
 		color: var( --msgbox-question-icon-color );
+
+		.mark {
+			fill: var( --msgbox-question-icon-mark-color );
+		}
 	}
 }
 

package/src/components/messages/messages.ts

@@ -37,6 +37,8 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-caption-color
  * --msgbox-icon-color
  * --msgbox-question-icon-color
+ * --msgbox-icon-mark-color
+ * --msgbox-question-icon-mark-color
  * --msgbox-log-background
  * --msgbox-log-border
  * --msgbox-log-border-focus
@@ -47,7 +49,11 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-log-scrollbar
  * ```
  * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
- * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
+ * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color.
+ * The "!" of an error and the "?" of a question are drawn in the disc of their icon, in
+ * --msgbox-icon-mark-color and --msgbox-question-icon-mark-color.
+ * The buttons of an error are in the colours of the alerts (--alert-*): a filled one, the border
+ * of an outline one that has the focus
  */
 
 export class MessageBox extends Dialog<DialogProps>

package/src/components/notification/notification.module.scss

@@ -54,7 +54,10 @@
 		color: var( --notification-icon-default );
 	}
 	
+	// a box does not shrink (.x4box): this one does, down to the frame, its close button kept in it
 	.body {
+		flex-shrink: 1;
+
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;
@@ -64,6 +67,7 @@
 		.text {
 			padding: 3px 6px 6px 6px;
 			color: var( --notification-text-color );
+			overflow-wrap: anywhere;		// a long word, an address: cut at the edge
 		}
 	}
 

package/src/components/popup/popup.ts

@@ -49,17 +49,31 @@ function getRoot( ) {
 /**
  * on the document while the event goes down (capture): a press outside
  * every popup closes the group opened last, the others at the next presses.
+ * A press in a popup closes the groups opened after it, over it (a context
+ * menu, the picker of a ColorInput), not its own.
  * The event is left as it is, what is pressed handles it as usual.
  * One function for all the popups: it is removed by the one that empties the list.
  */
 
 function dismissLast( e: UIEvent ) {
-	if( autoclose_list.some( x => x.contains( e.target as Node ) ) ) {
+	const target = e.target as Node;
+
+	// the newest popup the press is in
+	let idx = autoclose_list.length-1;
+	while( idx>=0 && !autoclose_list[idx].contains( target ) ) {
+		idx--;
+	}
+
+	// outside every popup: the newest one; dismiss( ) closes its whole group (a menu and its sub-menus)
+	if( idx<0 ) {
+		autoclose_list[autoclose_list.length-1].dismiss( );
 		return;
 	}
 
-	// the newest popup: dismiss( ) closes its whole group (a menu and its sub-menus)
-	autoclose_list[autoclose_list.length-1].dismiss( );
+	// in a popup: the groups opened after it, not its own (a menu and its sub-menus)
+	const group = autoclose_list[idx].getData( "close" );
+	const over = autoclose_list.slice( idx+1 ).filter( x => x.getData( "close" )!==group );
+	over.reverse( ).forEach( x => x.dismiss( ) );
 }
 
 /**
@@ -395,6 +409,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		let aidx = -1;
 		if( after ) {
 			aidx = autoclose_list.indexOf( this );
+
+			// no longer open: none was opened after it
+			if( aidx<0 ) {
+				return;
+			}
 		}
 
 		autoclose_list.forEach( (x,idx) => {

package/src/components/radio/radio.module.scss

@@ -22,9 +22,10 @@
 
 	--radio-button-border: var( --border );
 	--radio-button-color: var( --text-ternary );
-	--radio-button-color-checked: var( --accent-background-active );
+	--radio-button-color-checked: var( --accent-text );
 	--radio-button-background-checked: var( --background-secondary );
 	--radio-button-border-checked: var( --accent-background );
+	--radio-button-icon-size: 24px;		// set by a class of the application on a radio: it wins over :root
 
 	--radio-danger-color: var( --alert-background );
 	--radio-danger-background: var( --alert-background-light );
@@ -132,8 +133,6 @@
 // square: its former name, kept for the code that has it (not documented)
 .x4radio.button,
 .x4radio.square {
-	--size: 24px;
-
 	&.outline {
 		border-radius: 22px;;
 	}
@@ -159,8 +158,8 @@
 		#icon {
 			fill: var( --radio-button-color );
 			color: var( --radio-button-color );
-			width: var( --size );
-			height: var( --size );
+			width: var( --radio-button-icon-size );
+			height: var( --radio-button-icon-size );
 		}
 	}
 

package/src/components/radio/radio.ts

@@ -62,6 +62,7 @@ interface RadioProps extends ComponentProps {
  * --radio-button-color-checked
  * --radio-button-background-checked
  * --radio-button-border-checked
+ * --radio-button-icon-size
  * --radio-danger-color
  * --radio-danger-background
  * ```

package/src/components/spreadsheet/spreadsheet.ts

@@ -388,22 +388,29 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 		})
 
+		// the cell of the data under the mouse; undefined out of them
 		const targetCell = (e: MouseEvent) => {
 			let el = e.target as Element;
 			while (el && !el.classList.contains("cell")) {
 				el = el.parentElement;
 			}
 
-			if (el) {
-				const cel = componentFromDOM(el);
-				return {
-					ref: cel.getIntData("ref"),
-					row: cel.getInternalData("row"),
-					col: cel.getInternalData("col"),
-				}
+			if (!el) {
+				return undefined;
 			}
 
-			return undefined;
+			// a cell of the header or of the footer (a title, the sizer of a column): no row
+			const cel = componentFromDOM(el);
+			const row = cel.getInternalData("row");
+			if (row === undefined) {
+				return undefined;
+			}
+
+			return {
+				ref: cel.getIntData("ref"),
+				row,
+				col: cel.getInternalData("col"),
+			}
 		}
 
 
@@ -416,11 +423,11 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			// click on another cell while editing:
 			// validate now, rows may be rebuilt before the click event (and the click lost)
 			const ref = targetCell(e);
-			if( ref && ref.row!==undefined ) {
+			if( ref ) {
 				this._endEdit( true, true );
 
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
+					this.clearSelection( false );
 					this._addSelection(ref.ref,true);
 				}
 
@@ -438,7 +445,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			if (ref) {
 				//TODO: multiselection
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
+					this.clearSelection( false );
 					this._addSelection(ref.ref,true);
 				}
 			}
@@ -454,7 +461,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			if (ref) {
 				//TODO: multiselection
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection(false);
+					this.clearSelection(false);
 					this._addSelection(ref.ref,true);
 				}
 
@@ -479,7 +486,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			if (ref) {
 				//TODO: multiselection
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
+					this.clearSelection( false );
 					this._addSelection(ref.ref, true );
 				}
 
@@ -638,7 +645,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 		if (sens == kbNav.first || sens == kbNav.last) {
 			let nline = sens == kbNav.first ? 0 : this._store.getRowCount() - 1;
-			this._clearSelection(false);
+			this.clearSelection(false);
 			this._addSelection(mkid(nline,0), true);
 			this._scrollToIndex(nline);
 			return true;
@@ -649,7 +656,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			let nline = sens == kbNav.next ? fline + 1 : fline - 1;
 			if (nline >= 0 && nline < this._store.getRowCount()) {
-				this._clearSelection(false);
+				this.clearSelection(false);
 				this._addSelection( mkid(nline,col), true);
 				this._scrollToIndex( nline );
 				return true;
@@ -670,7 +677,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 
 			if (nline != fline) {
-				this._clearSelection( false );
+				this.clearSelection( false );
 				this._addSelection(mkid(nline,col), true);
 
 				if (this._store.getRowCount() < SCROLL_LIMIT) {
@@ -686,7 +693,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			let ncol = sens == kbNav.right ? col+1 : col-1;
 			if (ncol >= 0 && ncol < this._columns.length ) {
-				this._clearSelection(false);
+				this.clearSelection(false);
 				this._addSelection( mkid(fline,ncol), true);
 
 				// fixed columns are always visible
@@ -1374,10 +1381,10 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		}
 	}
 	/**
-	 * 
+	 * no cell selected; notify: selectionChange is fired, its selection empty
 	 */
 
-	private _clearSelection(notify = true) {
+	clearSelection(notify = true) {
 		for (const ref of this._selection.keys()) {
 			const els = this.queryAll(`.cell[data-ref="${ref}"]`)
 			els.forEach(el => {
@@ -1433,7 +1440,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 	selectItem(row: number, col: number, append = false) {
 		if (!append) {
-			this._clearSelection(false);
+			this.clearSelection(false);
 		}
 
 		this._addSelection(mkid(row, col), true);
@@ -1745,7 +1752,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		}
 
 		if( this._selection.size!=1 || !this._selection.has(ref) ) {
-			this._clearSelection( false );
+			this.clearSelection( false );
 			this._addSelection( ref, true );
 		}
 

package/src/components/textedit/textedit.module.scss

@@ -59,6 +59,7 @@
 			@extend %flex;
 			outline: none;
 			margin: 0;
+			align-self: stretch;		// the height of the zone: its ground down to its line
 		}
 
 		.x4button {

package/src/components/textedit/textedit.ts

@@ -88,7 +88,10 @@ export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<
 
 	constructor( props: TextEditProps ) {
 		// dom_events are for the input (focus, blur, keydown...): not on the box too,
-		// where keydown would run a second time, and focus never (it does not bubble)
+		// where keydown would run a second time, and focus never (it does not bubble).
+		// They are set when the input is made, before the handlers of Input and of the class
+		// (the keys of an AutoComplete): they run first. To run after them, add a handler to
+		// getInput( ) once the component is made.
 		super( { ...props, dom_events: undefined } );
 
 		if( !props.inputId ) {

package/src/components/themes.scss

@@ -88,6 +88,9 @@ $color--dark-base: #2d6fa5;
 	--accent-color-focus: var(--color-primary-a0);
 	--accent-color-active: var(--color-primary-a0);
 
+	// the accent as the colour of a text, on the background: a button checked, focused
+	--accent-text: var(--accent-background-active);
+
 	// Borders
 	--border: color-mix(in srgb, var(--color-primary-a100) 11.8%, var(--color-primary-a0));			// #e1e1e1
 	--border-light: color-mix(in srgb, var(--color-primary-a100) 8.2%, var(--color-primary-a0));		// #eaeaea
@@ -162,6 +165,14 @@ html.x4theme-dark {
 	--accent-color-focus: #ffffff;
 	--accent-color-active: #ffffff;
 
+	// the accent as a text: the blues of the scale are dark, lost on the background; a light one (chosen)
+	--accent-text: #{color.adjust($color--dark-base, $lightness: 25%)};
+
+	// the edge of a button checked or focused, in that blue: the dark ones are lost on the background
+	--checkbox-button-border-checked: var( --accent-text );
+	--radio-button-border-checked: var( --accent-text );
+	--ol-button-border-focus: var( --accent-text );
+
 	// the title bar of a Dialog: the one of the window of VS Code
 	--color-dialog-caption: #181818;			// titleBar.activeBackground
 	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
@@ -177,5 +188,8 @@ html.x4theme-dark {
 	// the marks of the events out of the view of a Planner: the darkest blue (a90 is the text here)
 	--planner-edge-background: var( --accent-background-active );
 
+	// the icon of a tooltip: the dark blues are lost on its background; the colour of the descriptions
+	--tooltip-icon-color: var( --text-secondary );
+
 	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/treeview/treeview.ts

@@ -16,7 +16,7 @@
 
 import { asap } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label, SimpleText } from '../label/label';
@@ -59,12 +59,14 @@ export interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	selectionChange?: EventCallback<EvSelectionChange>;
 	dblClick?: EventCallback<EvDblClick>;
 	click?: EventCallback<EvClick>;
+	contextMenu?: EventCallback<EvContextMenu>;
 }
 
 export interface TreeviewEvents extends ComponentEvents {
 	selectionChange?: EvSelectionChange;
 	dblClick?: EvDblClick;
 	click?: EvClick;
+	contextMenu?: EvContextMenu;
 }
 
 /**
@@ -185,7 +187,15 @@ class CTreeViewItem extends Box {
 
 
 /**
- * 
+ * A tree of items, folders that open and close.
+ *
+ * A right click selects the item under the mouse, then fires contextMenu, its context the
+ * id of the item (null out of the items); the menu of the browser is not shown.
+ *
+ * @example
+ * new Treeview( { items, contextMenu: ( ev ) => {
+ *     new Menu( { items: [ { text: "Rename", click: ( ) => rename( ev.context ) } ] } ).displayAt( ev.uievent.clientX, ev.uievent.clientY );
+ * } } );
  */
 
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
@@ -199,7 +209,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	constructor( props: TreeviewProps ) {
 		super( props );
 
-		this.mapPropEvents( props, "selectionChange", "dblClick", "click" );
+		this.mapPropEvents( props, "selectionChange", "dblClick", "click", "contextMenu" );
 
 		const scroller = new ScrollView( { cls: "body" } );
 		this._view = scroller.getViewport( );
@@ -218,6 +228,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		this.setDOMEvents( {
 			click: ( ev ) => this._on_click( ev ),
 			dblclick: (e) => this._on_click(e),
+			contextmenu: ( ev ) => this._on_ctx_menu( ev ),
 			keydown: ( ev ) => this._onkey( ev ),
 		});
 
@@ -244,10 +255,18 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 	}
 
+	/**
+	 * the item of this tree an element is in, not one of a component around it; null when none
+	 */
+
+	private _itemOf( target: EventTarget ): Component {
+		const c = Component.closest( target as Element, ".item" );
+		return c && this.contains( c ) ? c : null;
+	}
+
 	private _on_click( ev: UIEvent ) {
-		// an item of this tree, not of a component around it
-		const c = Component.closest( ev.target as Element, ".item" );
-		if( c && this.contains( c ) ) {
+		const c = this._itemOf( ev.target );
+		if( c ) {
 			const id = c.getInternalData( "id" );
 
 			const fev: ComponentEvent = { context:id };
@@ -268,6 +287,25 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		this.clearSelection( );
 	}
 
+	/**
+	 * a right click: the item under the mouse selected, then contextMenu
+	 */
+
+	private _on_ctx_menu( ev: MouseEvent ) {
+		ev.preventDefault( );
+
+		const c = this._itemOf( ev.target );
+		if( c ) {
+			const id = c.getInternalData( "id" );
+
+			this._selectItem( id, c );
+			this.fire( "contextMenu", { uievent: ev, context: id } );
+			return;
+		}
+
+		this.fire( "contextMenu", { uievent: ev, context: null } );
+	}
+
 	private _onkey( ev: KeyboardEvent ) {
 		switch( ev.key ) {
 			case "ArrowDown": {

package/src/core/core_clipboard.ts

@@ -47,6 +47,19 @@ export interface ClipboardRead extends ClipboardContent {
 /** what the application set last */
 let kept: ClipboardContent = null;
 
+/**
+ * The image to read among the types of the clipboard: the PNG when there is one, every
+ * program reads it; else the first image (a program puts its own format first: a SVG).
+ */
+
+function imageTypeOf( types: readonly string[] ): string {
+	if( types.includes( "image/png" ) ) {
+		return "image/png";
+	}
+
+	return types.find( type => type.startsWith( "image/" ) );
+}
+
 function toPng( image: Blob ): Promise<Blob> {
 	return new Promise( ( resolve, reject ) => {
 		const url = URL.createObjectURL( image );
@@ -119,8 +132,9 @@ export async function setClipboard( data: ClipboardContent ): Promise<boolean> {
 /**
  * Read the clipboard, from a menu or a button.
  *
- * @returns what the system holds. When it refuses or cannot be asked, what
- * the application set last. Never files: see getEventClipboard.
+ * @returns what the system holds, its image as a PNG when it has one. When it
+ * refuses or cannot be asked, what the application set last. Never files: see
+ * getEventClipboard.
  *
  * @example
  * const data = await getClipboard( );
@@ -143,12 +157,14 @@ export async function getClipboard( ): Promise<ClipboardRead> {
 			const data: ClipboardRead = { files: [] };
 
 			for( const item of await system.read( ) ) {
+				const imageType = imageTypeOf( item.types );
+
 				for( const type of item.types ) {
 					if( type==="text/plain" && !data.text ) {
 						const blob = await item.getType( type );
 						data.text = ( await blob.text( ) ) || undefined;
 					}
-					else if( type.startsWith( "image/" ) && !data.image ) {
+					else if( type===imageType && !data.image ) {
 						data.image = await item.getType( type );
 					}
 				}
@@ -212,8 +228,9 @@ export function setEventClipboard( ev: ClipboardEvent, data: ClipboardContent ):
 }
 
 /**
- * Read the clipboard in a "paste" event. The default of the event is left
- * as it is: prevent it when what was read is used.
+ * Read the clipboard in a "paste" event, its image the PNG file when there is
+ * one. The default of the event is left as it is: prevent it when what was
+ * read is used.
  *
  * @example
  * this.addDOMEvent( "paste", ev => {
@@ -232,7 +249,9 @@ export function getEventClipboard( ev: ClipboardEvent ): ClipboardRead {
 	if( transfer ) {
 		data.text = transfer.getData( "text/plain" ) || undefined;
 		data.files = Array.from( transfer.files );
-		data.image = data.files.find( file => file.type.startsWith( "image/" ) );
+
+		const imageType = imageTypeOf( data.files.map( file => file.type ) );
+		data.image = data.files.find( file => file.type===imageType );
 	}
 
 	return data;