x4js 2.3.29 → 2.3.31

package/src/components/popup/popup.ts

@@ -49,17 +49,57 @@ 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( ) );
+}
+
+/**
+ * a wheel outside every popup is ignored: the page under them does not scroll, it would leave
+ * them where they were. In a popup (a long menu), it scrolls as usual
+ */
+
+function ignoreWheel( e: WheelEvent ) {
+	if( !autoclose_list.some( x => x.contains( e.target as Node ) ) ) {
+		e.preventDefault( );
+	}
+}
+
+/**
+ * the listeners of the document while a popup that closes by itself is shown
+ */
+
+function watchOutside( on: boolean ) {
+	if( on ) {
+		document.addEventListener( "pointerdown", dismissLast, true );
+		document.addEventListener( "wheel", ignoreWheel, { capture: true, passive: false } );
+	}
+	else {
+		document.removeEventListener( "pointerdown", dismissLast, true );
+		document.removeEventListener( "wheel", ignoreWheel, true );
+	}
 }
 
 /**
@@ -256,7 +296,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			if( idx>=0 ) {
 				autoclose_list.splice( idx, 1 );
 				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", dismissLast, true );
+					watchOutside( false );
 				}
 			}
 		}
@@ -295,7 +335,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
-				document.addEventListener( "pointerdown", dismissLast, true );
+				watchOutside( true );
 			}
 
 			autoclose_list.push( this );
@@ -369,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) => {
@@ -384,7 +429,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		const list = inc_group.reverse( );
 		autoclose_list = excl_group;
 		if( autoclose_list.length==0 ) {
-			document.removeEventListener( "pointerdown", dismissLast, true );
+			watchOutside( false );
 		}
 		
 		list.forEach( x => x.close() );

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/shared.scss

@@ -62,8 +62,9 @@
 	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
+// its colour from the theme (--shadow-color): darker on a dark background
 %shadow-xl {
-	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+	box-shadow: 0 20px 25px -5px var( --shadow-color ), 0 8px 10px -6px var( --shadow-color );
 }
 
 %shadow-xxl {

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

@@ -19,8 +19,9 @@
 $color--base: #569cd6;
 $color--interval: 8.4%;
 
-// the blues of the dark theme, from their own base
-$color--dark-base: #5796ca;
+// the blues of the dark theme, from their own base, with the intervals of the light one: its accent
+// (a60, the base less one interval) #245883
+$color--dark-base: #2d6fa5;
 
 :root {
 	--color-primary-a0: #ffffff;
@@ -87,12 +88,18 @@ $color--dark-base: #5796ca;
 	--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
 	--border-hover: color-mix(in srgb, var(--color-primary-a100) 23.9%, var(--color-primary-a0));		// #c2c2c2
 	--border-focus: var(--accent-background);
 
+	// the shadow of what floats over the page (%shadow-xl: a dialog, a list, a notification, a tooltip)
+	--shadow-color: rgb(0 0 0 / 0.1);
+
 	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
@@ -123,14 +130,14 @@ html.x4theme-dark {
 	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
 	--color-primary-a30: #3c3c3c;		// input.border
 
-	// the blues: from $color--dark-base (chosen); where VS Code has list.activeSelectionBackground,
-	// button.background and focusBorder, button.hoverBackground
-	--color-primary-a40: #{color.adjust($color--dark-base, $lightness: -35%)};		// a selection
-	--color-primary-a50: #{$color--dark-base};										// a button, the focus
-	--color-primary-a55: #{color.adjust($color--dark-base, $lightness: -5%)};		// a button hovered
-	--color-primary-a60: #{$color--dark-base};
-	--color-primary-a70: #{color.adjust($color--dark-base, $lightness: -5%)};
-	--color-primary-a80: #{color.adjust($color--dark-base, $lightness: -35%)};
+	// the blues: from $color--dark-base (chosen), as the light theme makes them; a40, a selection,
+	// where VS Code has list.activeSelectionBackground
+	--color-primary-a40: #{color.adjust($color--dark-base, $lightness: -19.4%)};						// a selection
+	--color-primary-a50: #{$color--dark-base};
+	--color-primary-a55: #{color.adjust($color--dark-base, $lightness: -5%)};							// the accent hovered
+	--color-primary-a60: #{color.adjust($color--dark-base, $lightness: -$color--interval)};				// the accent
+	--color-primary-a70: #{color.adjust($color--dark-base, $lightness: -$color--interval * 2)};			// focused
+	--color-primary-a80: #{color.adjust($color--dark-base, $lightness: -$color--interval * 3)};			// active
 
 	--color-primary-a90: #cccccc;
 	--color-primary-a100: #cccccc;		// foreground
@@ -158,10 +165,22 @@ 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
 	--color-dialog-background: #202020;			// editorWidget.background
+	--color-dialog-border: #313131;				// widget.border: its edge on the dark background
+
+	// a shadow seen on a dark background: darker
+	--shadow-color: rgb(0 0 0 / 0.5);
 
 	// the tiles of a MapView are light: turned dark, their colours kept
 	--mapview-tile-filter: invert( 1 ) hue-rotate( 180deg ) brightness( 0.95 ) contrast( 0.9 );
@@ -169,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/tooltips/tooltips.scss

@@ -27,6 +27,8 @@
 	--tooltip-color: var( --color-primary-a90 );
 	--tooltip-border: var( --color-primary-a20 );
 	--tooltip-image-background: var( --background-primary );
+
+	--tooltip-max-width: 30vw;		// a long text goes on the next line; none: the width of the text
 }
 
 .x4tooltip {
@@ -41,6 +43,12 @@
 	border: 1px solid var( --tooltip-border ); 
 	background-color: var( --tooltip-background );
     width: max-content;
+	max-width: var( --tooltip-max-width );
+
+	// its content (a Box: it does not shrink) as wide as the tooltip at most: the text goes on the next line
+	> .x4hbox {
+		flex-shrink: 1;
+	}
 
 	.x4icon {
 		padding: 2px 4px;

package/src/components/tooltips/tooltips.ts

@@ -72,6 +72,14 @@ export function initTooltips( ) {
 
 	}, true );
 
+	// a click: no tooltip, it would stay over what the click opens
+	document.addEventListener( "mousedown", ( ) => {
+		if( last_hit ) {
+			last_hit = null;
+			closeTT( );
+		}
+	}, true );
+
 	document.addEventListener( "mousemove", ( ev: MouseEvent ) => {
 		if( last_hit ) {
 			mouse_pos = { x:ev.pageX, y:ev.pageY }
@@ -85,6 +93,11 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 	}
 
 	timer.setTimeout( "update", 300, ( ) => {
+		// its element gone in the meantime
+		if( !last_hit || isGone( last_hit ) ) {
+			return;
+		}
+
 		tooltip.setText( unsafeHtml(text) );
 
 		let y = mouse_pos.y;
@@ -94,12 +107,29 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 
 		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
 		tooltip.displayAt( mouse_pos.x+17, y+5 );
+
+		// an element removed or hidden under the mouse has no mouseleave: it is checked every second
+		timer.setInterval( "check", 1000, ( ) => {
+			if( !last_hit || isGone( last_hit ) ) {
+				last_hit = null;
+				closeTT( );
+			}
+		} );
 	} );
 }
 
 function closeTT( ) {
 	tooltip.show( false );
 	timer.clearTimeout( "update" );
+	timer.clearInterval( "check" );
+}
+
+/**
+ * the element of the tooltip, not shown any more: removed from the page, or hidden
+ */
+
+function isGone( el: HTMLElement ) {
+	return !el.isConnected || el.getClientRects( ).length==0;
 }
 
 /**
@@ -114,6 +144,7 @@ function closeTT( ) {
  * --tooltip-color
  * --tooltip-border
  * --tooltip-image-background
+ * --tooltip-max-width
  * ```
  */
 

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;

package/src/components/menu/caret-right-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>