x4js 2.3.16 → 2.3.17

package/aicontext.md

@@ -265,7 +265,7 @@ interface EvDblClick extends ComponentEvent {}
 interface EvBtnClick extends CoreEvent { button: string }
 
 // Spacers
-class Flex extends Component    // CSS "x4flex"
+class Flex extends Component    // new Flex(), no argument; CSS "x4flex"
 class Space extends Component   // new Space(width?: number|string, cls?: string)
 ```
 
@@ -403,12 +403,14 @@ interface DockPanel {
   kind?: 'tool' | 'content'                // default 'tool'
   closable?: boolean                       // for this panel, instead of the view's
   floating?: boolean                       // idem; a content never floats
+  sides?: DockSide[]                       // a tool: the bands it may be docked in, instead of the view's
 }
 interface DockingViewProps extends ComponentProps {
   panels: DockPanel[]
   layout: DockLayout                       // where the panels are at first
   floating?: boolean                       // tools can float above the rest
   closable?: boolean                       // tools have a button that hides them
+  sides?: DockSide[]                       // the bands tools may be docked in; left and right when missing
   persist?: string                         // a name: the layout is remembered under it (application storage)
   layoutChange?: EventCallback<ComponentEvent>
 }
@@ -421,12 +423,14 @@ class DockingView extends Component {
 }
 
 interface DockLayout {
-  left: DockBand; right: DockBand          // the tools
+  left: DockBand; right: DockBand          // the tools, on the sides
+  top?: DockBand; bottom?: DockBand        // the tools above and under the contents, between left and right
   content: DockNode                        // the contents; null when there is none
   floats: DockFloat[]                      // floating tools: { panel, x, y, w, h }
   hidden: string[]                         // ids of the closed panels
 }
-interface DockBand { size: number; root: DockNode }            // size: width in px; root: null when empty
+interface DockBand { size: number; root: DockNode }            // size: width in px (height for top/bottom); root: null when empty
+type DockSide = 'left' | 'right' | 'top' | 'bottom'
 type DockNode  = DockStack | DockSplit
 interface DockStack { type: 'stack'; size: number; panels: string[]; active: string }    // one tab per panel
 interface DockSplit { type: 'split'; dir: 'row' | 'column'; size: number; children: DockNode[] }
@@ -455,7 +459,8 @@ const view = new DockingView({
 ```
 
 - A closed panel is hidden, not removed: `showPanel(id)` brings it back where it was. Offer it in a menu.
-- Tools only go in `left`, `right` or `floats`; contents only in `content`. A panel missing from the layout is added where its kind goes.
+- Tools only go in the bands or in `floats`; contents only in `content`. A panel missing from the layout is added where its kind goes.
+- A tool goes in `left` or `right` only, unless `sides` says otherwise (on the view, or on one panel): `sides: ['bottom']` for what is wide and low (a log, a list of results). It is never offered a place in a band it may not be in.
 - A content alone has no title bar; with several contents, each stack has tabs.
 - What a panel shows is built once (`content`) and moved as the layout changes: never rebuild it.
 - CSS variables: `--dock-line`, `--dock-accent`, `--dock-title-background`, `--dock-title-background-hover`, `--dock-title-color`, `--dock-title-color-active`, `--dock-float-background`, `--dock-float-shadow`.
@@ -535,14 +540,15 @@ class Image extends Component {
 ### `Progress`
 
 ```ts
-interface ProgressProps extends ComponentProps { /* min/max/value */ }
+interface ProgressProps extends ComponentProps { value: number; min?: number /* 0 */; max?: number /* 100 */ }
+// the bar is where value is between min (0%) and max (100%)
 class Progress extends Component { setValue(value: number): void }
 ```
 
 ### `Gauge`
 
 ```ts
-interface GaugeProps extends ComponentProps { min?: number; max?: number; colors?: string[] }
+interface GaugeProps extends ComponentProps { min?: number /* 0 */; max?: number /* 100 */; colors?: string[] }
 class Gauge extends Component {
   setRange(min: number, max: number): void
   setPos(pos: number): void
@@ -616,6 +622,11 @@ class TextEdit extends HBox {
 ### `TextArea`
 
 ```ts
+interface TextAreaProps extends BaseProps {      // BaseProps: see Input (name, readonly, placeholder...)
+  label?: string; value?: string
+  resize?: boolean | "none" | "vertical" | "horizontal" | "both"
+  trim?: boolean                           // getText() trims, unless false
+}
 class TextArea extends VBox { getText(): string; setText(text: string): void }
 ```
 
@@ -636,7 +647,13 @@ class Checkbox extends Component {
 ### `Radio`
 
 ```ts
-interface RadioProps extends ComponentProps { /* label, value, name, group */ }
+interface RadioProps extends ComponentProps {
+  label: string; icon?: string
+  name: string                             // required: the radios that have the same name are one group
+  value: number | string                   // required
+  checked?: boolean
+  change?: EventCallback<EvChange>
+}
 class Radio extends Component {
   getValue(): string; setCheck(ck: boolean): void
   setLabel(text: string): void
@@ -647,14 +664,19 @@ class Radio extends Component {
 ### `Switch`
 
 ```ts
-interface SwitchProps extends ComponentProps { /* label, checked, name */ }
+interface SwitchProps extends ComponentProps { label: string; checked?: boolean; name?: string }
+// with a name, a Form reads and writes it as a boolean
 class Switch extends HBox {}
 ```
 
 ### `Slider`
 
 ```ts
-interface SliderProps extends ComponentProps { /* min, max, value, step */ }
+interface SliderProps extends ComponentProps {
+  value: number; min: number; max: number  // required
+  step?: number; vertical?: boolean
+  change?: EventCallback<EvChange>
+}
 class Slider extends Component {
   setMin(min: number): void; setMax(max: number): void; setValue(v: number): void
 }
@@ -665,17 +687,29 @@ class Slider extends Component {
 ```ts
 interface SelectProps extends ComponentProps {
   items: ListItem[]                        // required
-  value: string                            // required
-  multiple?: boolean; name?: string
+  value?: ListboxID                        // the id of the item that is selected
+  multiple?: boolean; required?: boolean; name?: string
   change?: EventCallback<EvChange>; focus?: EventCallback<EvFocus>
 }
-class Select extends Component { getValue(): string; setValue(value: string): void; setItems(items: ListItem[]): void }
+class Select extends Component {
+  getValue(): ListboxID; setValue(value: ListboxID): void
+  getSelValues(): ListboxID[]; setSelValues(values: ListboxID[]): void   // multiple
+  setItems(items: ListItem[]): void
+}
 ```
 
 ### `Combobox` — input + dropdown list
 
 ```ts
-interface ComboboxProps extends ComponentProps { /* items, value, renderer... */ }
+interface ComboboxProps extends ComponentProps {
+  items: ListItem[]                        // required
+  value?: ListboxID                        // the id of the item that is selected
+  label?: string; labelWidth?: number | string
+  readonly?: boolean                       // true by default: the user picks, and cannot type. false to let him type
+  renderer?: (item: ListItem) => Component // draws an item of the list (the field still shows item.text)
+  required?: boolean; name?: string
+  selectionChange?: EventCallback<EvSelectionChange>
+}
 class Combobox extends Component {
   getValue(): string; setValue(value: string): void
   getInput(): Input
@@ -1025,7 +1059,14 @@ class ProgressionBox extends Dialog {
 ### `Notification`
 
 ```ts
-class Notification extends Popup { display(time_in_s?: number): void }
+interface NotificationProps extends ComponentProps {
+  title: string; text: string | UnsafeHtml
+  mode?: "success" | "danger"
+  loading?: boolean                        // a turning icon
+  iconId?: string
+  closable?: boolean                       // a button that closes it
+}
+class Notification extends Popup { display(time_in_s?: number): void }   // 0: until it is closed
 ```
 
 ---
@@ -1614,6 +1655,7 @@ Optional keys: `external`, `define`, `esbuild`, `dev` (`host`, `port`, `https`,
 - `Component` stores its instance on its DOM node. Use `componentFromDOM(el)` to retrieve a component from an `HTMLElement`.
 - Numbers passed to `setStyle`/`setStyleValue` are auto-suffixed with `"px"` except for unitless properties (see the `unitless` set: `zIndex`, `opacity`, `flexGrow`...).
 - `show(false)` / `hide()` toggle the `"x4hidden"` CSS class, not `display:none`.
+- x4 sets `user-select: none` on every element (`*`): text that must be selectable needs `user-select: text` on it and on its descendants.
 - `enable(false)` / `disable()` propagate the `disabled` state to child `<input>` and `<button>` elements.
 - `Application` is a strict singleton — one instance per page (an assertion fails otherwise).
 - `Popup.show()` routes to `displayCenter()`. To position, call `displayAt()` or `displayNear()` instead.

package/package.json

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

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

@@ -50,10 +50,10 @@
 			}
 		}
 
-		// props.nullable, no color: crossed out
+		// props.nullable, no color: the checkerboard that stands for what is transparent
 		&.none {
 			border: 1px solid var( --border );
-			background: linear-gradient( to top right, transparent 45%, #d04040 45%, #d04040 55%, transparent 55% );
+			background: repeating-conic-gradient( #c8c8c8 0% 25%, #ffffff 0% 50% ) 0 0 / 6px 6px;
 		}
 	}
 

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

@@ -147,9 +147,9 @@
 				border-color: var( --border-focus );
 			}
 
-			// no color: crossed out
+			// no color: the checkerboard that stands for what is transparent
 			&.none {
-				background: linear-gradient( to top right, transparent 45%, #d04040 45%, #d04040 55%, transparent 55% );
+				background: repeating-conic-gradient( #c8c8c8 0% 25%, #ffffff 0% 50% ) 0 0 / 6px 6px;
 			}
 		}
 	}

package/src/components/combobox/combobox.ts

@@ -87,6 +87,10 @@ interface ComboboxProps extends Omit<ComponentProps,"content"> {
 	readonly?: boolean;
 	required?: boolean;
 	items: ListItem[];
+
+	/** draws an item of the list, instead of its text. The field still shows the text of the item that is chosen. */
+	renderer?: ( item: ListItem ) => Component;
+
 	selectionChange?: EventCallback<EvSelectionChange>,
 }
 
@@ -139,7 +143,7 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			this.setAttribute( "required", true );
 		}
 
-		this._popup = new DropdownList( { items: props.items } );
+		this._popup = new DropdownList( { items: props.items, renderer: props.renderer } );
 		const list = this._popup.getList( );
 
 		const _select = ( sel: ListboxID ) => {

package/src/components/dockingview/dockingview.module.scss

@@ -34,9 +34,9 @@
 	// even in an HBox, which centers its children
 	align-self: stretch;
 
-	// The boxes of the layout: the band of the left, the room of the
-	// contents, the band of the right. The floating tools are placed from
-	// its top-left corner, which is the one of the box.
+	// The boxes of the layout: the band of the left, what is between the
+	// two, the band of the right. The floating tools are placed from its
+	// top-left corner, which is the one of the box.
 	> .dock-frame {
 		position: relative;
 		display: flex;
@@ -45,6 +45,17 @@
 		min-height: 0;
 	}
 
+	// Between the bands of the left and of the right, one above the other:
+	// the band of the top, the room of the contents, the band of the bottom.
+	.dock-middle {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 0;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+	}
+
 	// The tools of one side. Its width is given by the layout; it only
 	// gets narrower when the box has no room left.
 	.dock-band {
@@ -58,6 +69,13 @@
 		> .dock-stack {
 			flex: 1 1 0;
 		}
+
+		// the bands that lie flat: it is their height that the layout gives
+		&.top,
+		&.bottom {
+			min-width: 0;
+			min-height: 48px;
+		}
 	}
 
 	// the room of the contents: what the bands leave

package/src/components/dockingview/dockingview.ts

@@ -19,13 +19,13 @@ import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../.
 import { EventCallback } from '../../core/core_events';
 import { CSizer } from '../sizers/sizer';
 
-import { bandOf, dockActivate, dockBand, dockFloat, dockMove, dockRestore, dockShow, dropZone, floatOf, isShown, keepInside, sharesOf, shownPanel, sideRect, stackOf, stacksOf, visiblePanels } from './docklayout';
-import { DockFloat, DockKinds, DockLayout, DockNode, DockRect, DockStack } from './docklayout';
+import { bandOf, dockActivate, dockBand, dockFloat, dockMove, dockRestore, dockShow, dockSides, dropZone, floatOf, isFlat, isShown, keepInside, sharesOf, shownPanel, sideRect, stackOf, stacksOf, visiblePanels } from './docklayout';
+import { DockFloat, DockKinds, DockLayout, DockNode, DockRect, DockSide, DockStack } from './docklayout';
 
 import "./dockingview.module.scss";
 
 // the layout is given and read by the host: its types go with the component
-export type { DockLayout, DockBand, DockNode, DockSplit, DockStack, DockFloat } from './docklayout';
+export type { DockLayout, DockBand, DockNode, DockSplit, DockStack, DockFloat, DockSide } from './docklayout';
 
 /** under this distance, in pixels, a press on a title is a click, not a drag */
 const DRAG_SLOP = 4;
@@ -39,8 +39,12 @@ const MIN_SIZE = 48;
 /** what a sizer always leaves to the contents, between the two bands */
 const MIN_AREA = 80;
 
-/** width of a band whose layout gives none */
+/** width of a band whose layout gives none; height, for the band of the top or of the bottom */
 const BAND_SIZE = 200;
+const BAND_HEIGHT = 160;
+
+/** the bands, in the order they are looked at */
+const SIDES: DockSide[] = ["left", "right", "top", "bottom"];
 
 /** smallest size of a panel that starts to float */
 const FLOAT_MIN_W = 160;
@@ -68,6 +72,9 @@ export interface DockPanel {
 
 	/** a tool: instead of what the box says. A content never floats. */
 	floating?: boolean;
+
+	/** a tool: the bands it may be docked in, instead of what the box says */
+	sides?: DockSide[];
 }
 
 export interface DockingViewProps extends ComponentProps {
@@ -82,6 +89,14 @@ export interface DockingViewProps extends ComponentProps {
 	/** tools have a button that hides them (see showPanel) */
 	closable?: boolean;
 
+	/**
+	 * The bands tools may be docked in: "left", "right", "top", "bottom".
+	 * The left and the right ones when missing. A tool is never offered a
+	 * place in a band it may not be in, neither beside one of its tools nor
+	 * as one of their tabs.
+	 */
+	sides?: DockSide[];
+
 	/**
 	 * A name: the layout is then remembered under it, in the storage of
 	 * the application, and found again the next time.
@@ -142,6 +157,11 @@ interface Drag {
  * dropped anywhere else floats above the rest. With `closable`, its title
  * has a button that hides it; showPanel() brings it back.
  *
+ * With `sides`, a tool may also be docked above or under the contents, in
+ * a band that lies between those of the left and of the right: for what is
+ * wide and low (a log, a list of results, a timeline). `sides` says which
+ * bands a tool may be in, for all the tools or for one of them.
+ *
  * A content is what is worked on (a document, as the editors of an IDE).
  * Contents share the room between the bands: a title dragged to a side of
  * another content is put beside it, to its middle it becomes one of its
@@ -175,7 +195,7 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 
 	// the boxes of the layout as it is shown now
 	private nodes = new Map<DockNode, Component>( );
-	private bands = new Map<"left" | "right", Component>( );
+	private bands = new Map<DockSide, Component>( );
 	private floats = new Map<string, Component>( );
 	private area: Component;					// the room of the contents, between the bands
 
@@ -277,7 +297,23 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 
 	private kinds( ): DockKinds {
 		const ids = this.props.panels.map( panel => panel.id );
-		return { tools: ids.filter( id => this.isTool( id ) ), contents: ids.filter( id => !this.isTool( id ) ) };
+		const tools = ids.filter( id => this.isTool( id ) );
+
+		// what a tool says for itself, otherwise what the box says for all
+		const sides: Record<string, DockSide[]> = {};
+		for( const id of tools ) {
+			sides[id] = this.panel( id ).sides ?? this.props.sides;
+		}
+
+		return { tools, contents: ids.filter( id => !this.isTool( id ) ), sides };
+	}
+
+	/**
+	 * true when a tool may be docked in a band
+	 */
+
+	private mayDock( id: string, side: DockSide ): boolean {
+		return dockSides( this.kinds( ), id ).includes( side );
 	}
 
 	private mayFloat( id: string ): boolean {
@@ -316,8 +352,10 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 	// :: BUILDING ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	/**
-	 * Make the boxes of the layout again: the band of the left, the room
-	 * of the contents, the band of the right, and the floating tools.
+	 * Make the boxes of the layout again: the band of the left, then,
+	 * one above the other, the band of the top, the room of the contents
+	 * and the band of the bottom, then the band of the right; and the
+	 * floating tools.
 	 *
 	 * What the panels show is not built again: their pages are moved. They
 	 * go straight from a place in the document to another one, the park
@@ -346,9 +384,19 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 			content: content && isShown( content, hidden ) ? this.makeNode( content, titled ) : null,
 		} );
 
+		// between the bands of the sides, which take the whole height
+		const middle = new Component( {
+			cls: "dock-middle",
+			content: [
+				...this.makeBand( "top" ),
+				this.area,
+				...this.makeBand( "bottom" ),
+			],
+		} );
+
 		this.frame.setContent( [
 			...this.makeBand( "left" ),
-			this.area,
+			middle,
 			...this.makeBand( "right" ),
 			...floats.filter( float => !hidden.includes( float.panel ) ).map( float => this.makeFloat( float ) ),
 		] );
@@ -362,39 +410,58 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 	}
 
 	/**
-	 * A band and the sizer that changes its width, in the order they are
-	 * shown; nothing when none of its tools is shown.
+	 * A band and the sizer that changes its width (its height, for the
+	 * band of the top or of the bottom), in the order they are shown;
+	 * nothing when none of its tools is shown.
 	 */
 
-	private makeBand( side: "left" | "right" ): Component[] {
+	private makeBand( side: DockSide ): Component[] {
 		const band = this.layout[side];
 
-		if( !band.root || !isShown( band.root, this.layout.hidden ) ) {
+		if( !band?.root || !isShown( band.root, this.layout.hidden ) ) {
 			return [];
 		}
 
+		const flat = isFlat( side );
+
 		const box = new Component( {
 			cls: `dock-band ${side}`,
-			width: band.size || BAND_SIZE,
 			content: this.makeNode( band.root, true ),
 		} );
 
+		if( flat ) {
+			box.setHeight( band.size || BAND_HEIGHT );
+		}
+		else {
+			box.setWidth( band.size || BAND_SIZE );
+		}
+
 		this.bands.set( side, box );
 
-		// what the band gets is taken from the contents
-		const sign = side === "left" ? 1 : -1;
+		// what the band gets is taken from the contents: the sizer is on
+		// the side of the band that faces them
+		const first = side === "left" || side === "top";
+		const sign = first ? 1 : -1;
 		let size = 0;
 		let max = 0;
 
-		const sizer = this.makeSizer( true, ( ) => {
+		const sizer = this.makeSizer( !flat, ( ) => {
+			const room = this.area.getBoundingRect( );
+
 			size = band.size;
-			max = size + Math.max( 0, this.area.getBoundingRect( ).width - MIN_AREA );
+			max = size + Math.max( 0, ( flat ? room.height : room.width ) - MIN_AREA );
 		}, delta => {
 			band.size = Math.round( Math.max( MIN_SIZE, Math.min( size + delta * sign, max ) ) );
-			box.setWidth( band.size );
+
+			if( flat ) {
+				box.setHeight( band.size );
+			}
+			else {
+				box.setWidth( band.size );
+			}
 		} );
 
-		return side === "left" ? [box, sizer] : [sizer, box];
+		return first ? [box, sizer] : [sizer, box];
 	}
 
 	private makeNode( node: DockNode, titled: boolean ): Component {
@@ -588,12 +655,23 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 			visit( this.layout.content, null );
 		}
 
-		for( const side of ["left", "right"] as const ) {
+		for( const side of SIDES ) {
 			const band = this.layout[side];
-			const width = Math.round( this.bands.get( side )?.getBoundingRect( ).width ?? 0 );
+			if( !band ) {
+				continue;
+			}
+
+			// A band that is not shown has no box: its size stays what it
+			// was. Otherwise its width, or its height when it lies flat.
+			const box = this.bands.get( side );
+
+			if( box ) {
+				const rc = box.getBoundingRect( );
+				const size = Math.round( isFlat( side ) ? rc.height : rc.width );
 
-			if( width > 0 ) {
-				band.size = width;
+				if( size > 0 ) {
+					band.size = size;
+				}
 			}
 
 			if( band.root ) {
@@ -761,8 +839,11 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 	 *
 	 *   a side of a tool                        beside it, above or under it
 	 *   the middle of another tool              one of its tabs
-	 *   the left or the right of the contents   the band of that side, under its tools
+	 *   a side of the contents                  the band of that side, after its tools
 	 *   anywhere else                           it floats, if it may
+	 *
+	 * The first three only for a band the tool may be docked in (`sides`):
+	 * the left and the right ones, unless the host says otherwise.
 	 */
 
 	private dropTool( x: number, y: number ): Drop {
@@ -777,8 +858,10 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 
 		const inside = ( rect: DockRect ) => dropZone( rect, x, y, 1 ) !== null;
 
-		// the width the tool brings to a band: the one it has now, a third of the box at most
+		// the width the tool brings to a band: the one it has now, a third of the box at most;
+		// and its height, for a band that lies flat
 		const width = Math.round( Math.max( MIN_SIZE, Math.min( ( float?.w ?? page.w ) || BAND_SIZE, within.w / 3 ) ) );
+		const height = Math.round( Math.max( MIN_SIZE, Math.min( ( float?.h ?? page.h ) || BAND_HEIGHT, within.h / 3 ) ) );
 
 		const floating = ( ): Drop => {
 			if( !this.mayFloat( panel ) ) {
@@ -800,44 +883,52 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 			return floating( );
 		}
 
-		// a tool of a band
-		for( const stack of [...stacksOf( layout.left.root ), ...stacksOf( layout.right.root )] ) {
-			const box = this.nodes.get( stack );
-			const rect = box ? this.rectOf( box ) : null;
-			const zone = rect ? dropZone( rect, x, y, SIDE_BAND ) : null;
-
-			if( !zone ) {
+		// a tool of a band, when the one that is dragged may be in that band
+		for( const side of SIDES ) {
+			if( !this.mayDock( panel, side ) ) {
 				continue;
 			}
 
-			const panels = visiblePanels( stack, hidden );
+			for( const stack of stacksOf( layout[side]?.root ) ) {
+				const box = this.nodes.get( stack );
+				const rect = box ? this.rectOf( box ) : null;
+				const zone = rect ? dropZone( rect, x, y, SIDE_BAND ) : null;
 
-			if( zone === "center" ) {
-				// the middle of its own stack: it leaves it
-				return stack === own ? floating( ) : { rect, apply: ( ) => dockMove( layout, panel, panels[0], "tab" ) };
-			}
+				if( !zone ) {
+					continue;
+				}
 
-			// beside the stack it is alone in: it is already there
-			if( stack === own && panels.length === 1 ) {
-				return null;
-			}
+				const panels = visiblePanels( stack, hidden );
 
-			// Half of the stack is shown. On the left or on the right, the
-			// band gets wider instead: the two tools keep their width.
-			const half = ( zone === "left" || zone === "right" ? rect.w : rect.h ) / 2;
-			return { rect: sideRect( rect, zone, half ), apply: ( ) => dockMove( layout, panel, panels[0], zone, width ) };
+				if( zone === "center" ) {
+					// the middle of its own stack: it leaves it
+					return stack === own ? floating( ) : { rect, apply: ( ) => dockMove( layout, panel, panels[0], "tab" ) };
+				}
+
+				// beside the stack it is alone in: it is already there
+				if( stack === own && panels.length === 1 ) {
+					return null;
+				}
+
+				// Half of the stack is shown. On the left or on the right, the
+				// band gets wider instead: the two tools keep their width. In
+				// a band that lies flat, it is above and under, and its height.
+				const half = ( zone === "left" || zone === "right" ? rect.w : rect.h ) / 2;
+				return { rect: sideRect( rect, zone, half ), apply: ( ) => dockMove( layout, panel, panels[0], zone, isFlat( side ) ? height : width ) };
+			}
 		}
 
-		// the left or the right of the contents: the band of that side
+		// a side of the contents: the band of that side
 		const area = this.rectOf( this.area );
-		const side = x < area.x + SIDE_BAND ? "left" : x >= area.x + area.w - SIDE_BAND ? "right" : null;
+		const side = this.edgeOf( panel, area, x, y );
 
 		if( !side ) {
 			return floating( );
 		}
 
+		const flat = isFlat( side );
 		const band = this.bands.get( side );
-		const root = layout[side].root;
+		const root = layout[side]?.root;
 		const shown = stacksOf( root ).filter( stack => isShown( stack, hidden ) );
 
 		// the only tool of that band: it is already there
@@ -845,14 +936,60 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 			return null;
 		}
 
-		// A band that shows nothing is made beside the contents, as wide as
-		// the tool is now. Otherwise the tool goes under what the band
-		// holds: one more row of it, or its lower half.
-		const rows = root?.type === "split" && root.dir === "column" ? root.children.filter( child => isShown( child, hidden ) ).length : 1;
+		// A band that shows nothing is made beside the contents, as big as
+		// the tool is now. Otherwise the tool goes after what the band
+		// holds: one more row of it, or its lower half; one more column, or
+		// its right half, for a band that lies flat.
+		const size = flat ? height : width;
+		const count = root?.type === "split" && root.dir === ( flat ? "row" : "column" ) ? root.children.filter( child => isShown( child, hidden ) ).length : 1;
 		const bandRect = band ? this.rectOf( band ) : null;
-		const rect = bandRect ? sideRect( bandRect, "bottom", bandRect.h / ( rows + 1 ) ) : sideRect( area, side, width );
 
-		return { rect, apply: ( ) => dockBand( layout, panel, side, band ? 0 : width ) };
+		let rect: DockRect;
+
+		if( !bandRect ) {
+			rect = sideRect( area, side, size );
+		}
+		else if( flat ) {
+			rect = sideRect( bandRect, "right", bandRect.w / ( count + 1 ) );
+		}
+		else {
+			rect = sideRect( bandRect, "bottom", bandRect.h / ( count + 1 ) );
+		}
+
+		return { rect, apply: ( ) => dockBand( layout, panel, side, band ? 0 : size ) };
+	}
+
+	/**
+	 * The side of the contents a point is near, among those the band of
+	 * which a tool may be docked in; the nearest one, null for none.
+	 *
+	 * A point beyond the side counts too: it is between the contents and
+	 * the band. But it has to be along the side: over a band of another
+	 * side, it is not near this one.
+	 */
+
+	private edgeOf( panel: string, area: DockRect, x: number, y: number ): DockSide {
+		const along = ( side: DockSide ) => isFlat( side ) ? x >= area.x && x < area.x + area.w : y >= area.y && y < area.y + area.h;
+
+		// how deep the point is from each side: 0 on it, 1 where its zone ends
+		const depth = ( side: DockSide ): number => {
+			switch( side ) {
+				case "left":	return ( x - area.x ) / SIDE_BAND;
+				case "right":	return ( area.x + area.w - x ) / SIDE_BAND;
+				case "top":		return ( y - area.y ) / SIDE_BAND;
+				case "bottom":	return ( area.y + area.h - y ) / SIDE_BAND;
+			}
+		};
+
+		let nearest: DockSide = null;
+
+		for( const side of SIDES ) {
+			if( this.mayDock( panel, side ) && along( side ) && depth( side ) < 1 && ( nearest === null || depth( side ) < depth( nearest ) ) ) {
+				nearest = side;
+			}
+		}
+
+		return nearest;
 	}
 
 	/**

package/src/components/dockingview/docklayout.ts

@@ -19,16 +19,21 @@
  *
  * There are two kinds of panels, which never mix:
  *
- *   tools      docked in a band on the left or on the right: one above the
- *              other, side by side, or as tabs of the same stack; they
- *              can also float.
+ *   tools      docked in a band along a side of the contents: one above
+ *              the other, side by side, or as tabs of the same stack;
+ *              they can also float. Which bands a tool may be in is said
+ *              by the view (DockKinds.sides): the left and the right
+ *              ones, unless it says otherwise.
  *   contents   what is worked on (a document, as the editors of an IDE).
  *              They share the room between the bands: side by side, one
  *              above the other, or as tabs of the same stack.
  *
  * A layout is plain data, so that it can be saved as it is:
  *
- *   left, right   the two bands: a width, and a tree of tools.
+ *   left, right   the bands of the sides: a width, and a tree of tools.
+ *                 They take the whole height.
+ *   top, bottom   the bands above and under the contents, between those of
+ *                 the sides: a height, and a tree of tools.
  *   content       the tree of the contents.
  *
  *                 In a tree, a split puts its children side by side (row)
@@ -73,7 +78,10 @@ export interface DockStack {
 
 export type DockNode = DockSplit | DockStack;
 
-/** the tools docked on one side: `size` is its width in pixels, `root` is null when it has none */
+/**
+ * The tools docked on one side: `size` is its width in pixels (its height,
+ * for the band of the top or of the bottom), `root` is null when it has none.
+ */
 export interface DockBand {
 	size: number;
 	root: DockNode;
@@ -91,9 +99,16 @@ export interface DockFloat extends DockRect {
 	panel: string;
 }
 
+/**
+ * `top` and `bottom` may be missing: a band that is missing is an empty
+ * one. A layout that does not use them does not have them.
+ */
+
 export interface DockLayout {
 	left: DockBand;
 	right: DockBand;
+	top?: DockBand;
+	bottom?: DockBand;
 	content: DockNode;
 	floats: DockFloat[];
 	hidden: string[];
@@ -103,12 +118,47 @@ export interface DockLayout {
 export interface DockKinds {
 	tools: string[];
 	contents: string[];
+
+	/** the bands a tool may be docked in, by its id; the left and the right ones for a tool that is not there */
+	sides?: Record<string, DockSide[]>;
 }
 
+/** the bands, in the order they are looked at */
+const SIDES: DockSide[] = ["left", "right", "top", "bottom"];
+
+/** where a tool may be docked when nothing says it */
+const USUAL_SIDES: DockSide[] = ["left", "right"];
+
 function copy( layout: DockLayout ): DockLayout {
 	return structuredClone( layout );
 }
 
+/**
+ * true for the bands of the top and of the bottom: they lie flat. Their
+ * size is a height, and their tools are side by side where those of the
+ * left and of the right are one above the other.
+ */
+
+export function isFlat( side: DockSide ): boolean {
+	return side === "top" || side === "bottom";
+}
+
+/**
+ * The bands a tool may be docked in. A list that is empty counts as none
+ * given: a tool has to be somewhere when its layout is lost.
+ */
+
+export function dockSides( kinds: DockKinds, panel: string ): DockSide[] {
+	const given = kinds.sides ? kinds.sides[panel] : null;
+
+	if( !given ) {
+		return USUAL_SIDES;
+	}
+
+	const sides = given.filter( side => SIDES.includes( side ) );
+	return sides.length ? sides : USUAL_SIDES;
+}
+
 /**
  * the stacks of a tree, from left to right and from top to bottom
  */
@@ -122,7 +172,7 @@ export function stacksOf( node: DockNode ): DockStack[] {
 }
 
 function allStacks( layout: DockLayout ): DockStack[] {
-	return [...stacksOf( layout.left.root ), ...stacksOf( layout.right.root ), ...stacksOf( layout.content )];
+	return [...SIDES.flatMap( side => stacksOf( layout[side]?.root ) ), ...stacksOf( layout.content )];
 }
 
 function parentOf( root: DockNode, node: DockNode ): DockSplit {
@@ -179,8 +229,13 @@ function normalize( node: DockNode ): DockNode {
 
 function tidy( layout: DockLayout ): void {
 	layout.content = normalize( layout.content );
-	layout.left.root = normalize( layout.left.root );
-	layout.right.root = normalize( layout.right.root );
+
+	for( const side of SIDES ) {
+		const band = layout[side];
+		if( band ) {
+			band.root = normalize( band.root );
+		}
+	}
 }
 
 /**
@@ -189,10 +244,13 @@ function tidy( layout: DockLayout ): void {
 
 function detach( layout: DockLayout, panel: string ): void {
 	// A tool that was beside others, alone in its stack, takes its width
-	// with it: its band gets narrower by its share of the row.
-	for( const band of [layout.left, layout.right] ) {
-		const root = band.root;
-		const at = root?.type === "split" && root.dir === "row" ? root.children.findIndex( child => child.type === "stack" && child.panels.length === 1 && child.panels[0] === panel ) : -1;
+	// with it: its band gets narrower by its share of the row. In a band
+	// that lies flat it is its height, and its share of the column.
+	for( const side of SIDES ) {
+		const band = layout[side];
+		const root = band?.root;
+		const across = isFlat( side ) ? "column" : "row";
+		const at = root?.type === "split" && root.dir === across ? root.children.findIndex( child => child.type === "stack" && child.panels.length === 1 && child.panels[0] === panel ) : -1;
 
 		if( root?.type === "split" && at >= 0 ) {
 			const shares = sharesOf( root.children );
@@ -227,14 +285,8 @@ export function stackOf( layout: DockLayout, panel: string ): DockStack {
  * the band a panel is docked in, null when it is a content, floats or is unknown
  */
 
-export function bandOf( layout: DockLayout, panel: string ): "left" | "right" {
-	const holds = ( band: DockBand ) => stacksOf( band.root ).some( stack => stack.panels.includes( panel ) );
-
-	if( holds( layout.left ) ) {
-		return "left";
-	}
-
-	return holds( layout.right ) ? "right" : null;
+export function bandOf( layout: DockLayout, panel: string ): DockSide {
+	return SIDES.find( side => stacksOf( layout[side]?.root ).some( stack => stack.panels.includes( panel ) ) ) ?? null;
 }
 
 export function floatOf( layout: DockLayout, panel: string ): DockFloat {
@@ -286,6 +338,10 @@ export function sharesOf( nodes: DockNode[] ): number[] {
  * takes half of its room. But a tool put on the left or on the right of
  * another one does not make it narrower: with `width`, the band gets
  * wider by that much, which is what the tool gets.
+ *
+ * In a band that lies flat (top, bottom) it is the other way round: a
+ * tool put above or under another one makes the band higher, by `width`,
+ * which is then a height.
  */
 
 export function dockMove( layout: DockLayout, panel: string, target: string, where: DockWhere, width = 0 ): DockLayout {
@@ -319,7 +375,9 @@ export function dockMove( layout: DockLayout, panel: string, target: string, whe
 
 	const dir = where === "left" || where === "right" ? "row" : "column";
 	const before = where === "left" || where === "top";
-	const wider = !!band && dir === "row" && width > 0;
+
+	// across the band: the direction in which it grows
+	const wider = !!band && dir === ( isFlat( side ) ? "column" : "row" ) && width > 0;
 
 	const half = dest.size / 2;
 	const fresh: DockStack = { type: "stack", size: wider ? width : half, panels: [panel], active: panel };
@@ -357,17 +415,22 @@ export function dockMove( layout: DockLayout, panel: string, target: string, whe
 }
 
 /**
- * Dock a tool in a band, under the tools that are already there.
- * `size` is the width the band gets when it was empty.
+ * Dock a tool in a band, after the tools that are already there: under
+ * them on the left and on the right, on their right in a band that lies
+ * flat (top, bottom). `size` is the width the band gets when it was empty;
+ * its height, when it lies flat.
  */
 
-export function dockBand( layout: DockLayout, panel: string, side: "left" | "right", size = 0 ): DockLayout {
+export function dockBand( layout: DockLayout, panel: string, side: DockSide, size = 0 ): DockLayout {
 	const result = copy( layout );
-	const band = result[side];
+	const band = result[side] ??= { size: 0, root: null };
 
 	detach( result, panel );
 	tidy( result );
 
+	// along the band: the direction its tools follow each other in
+	const along = isFlat( side ) ? "row" : "column";
+
 	const fresh: DockStack = { type: "stack", size: 0, panels: [panel], active: panel };
 	const root = band.root;
 
@@ -378,15 +441,15 @@ export function dockBand( layout: DockLayout, panel: string, side: "left" | "rig
 			band.size = size;
 		}
 	}
-	else if( root.type === "split" && root.dir === "column" ) {
-		// as high as the others, on average
+	else if( root.type === "split" && root.dir === along ) {
+		// as big as the others, on average
 		fresh.size = sharesOf( root.children ).reduce( ( a, b ) => a + b ) / root.children.length;
 		root.children.push( fresh );
 	}
 	else {
-		// what was there and the tool share the height
+		// what was there and the tool share the band
 		root.size = 0;
-		band.root = { type: "split", dir: "column", size: 0, children: [root, fresh] };
+		band.root = { type: "split", dir: along, size: 0, children: [root, fresh] };
 	}
 
 	return result;
@@ -475,7 +538,7 @@ function sizeOf( from: Record<string, unknown>, name: string ): number {
  * A layout rebuilt from something that was saved, or null when it is not a
  * layout or holds no panel. Only what is understood is kept, and only the
  * panels that are known, each once and where its kind may be: a tool in a
- * band or floating, a content among the contents.
+ * band it may be docked in, or floating; a content among the contents.
  *
  * (a field is read only once it is known to be there: what was saved may be
  * a state of x4, which reports the reading of a missing property)
@@ -527,17 +590,21 @@ function sanitize( saved: unknown, kinds: DockKinds ): DockLayout {
 		return null;
 	};
 
-	const band = ( name: string ): DockBand => {
+	// a band only keeps the tools that may be docked in it
+	const band = ( name: DockSide ): DockBand => {
 		const from = name in saved ? saved[name] : null;
 		if( !isObject( from ) ) {
 			return { size: 0, root: null };
 		}
 
-		return { size: sizeOf( from, "size" ), root: normalize( "root" in from ? node( from.root, kinds.tools ) : null ) };
+		const allowed = kinds.tools.filter( id => dockSides( kinds, id ).includes( name ) );
+		return { size: sizeOf( from, "size" ), root: normalize( "root" in from ? node( from.root, allowed ) : null ) };
 	};
 
 	const left = band( "left" );
 	const right = band( "right" );
+	const top = band( "top" );
+	const bottom = band( "bottom" );
 	const content = normalize( "content" in saved ? node( saved.content, kinds.contents ) : null );
 
 	const floats: DockFloat[] = [];
@@ -561,7 +628,23 @@ function sanitize( saved: unknown, kinds: DockKinds ): DockLayout {
 	}
 
 	// nothing in it that is known: not worth more than no layout at all
-	return seen.size > 0 ? { left, right, content, floats, hidden } : null;
+	if( seen.size === 0 ) {
+		return null;
+	}
+
+	// the bands of the top and of the bottom are only there when they hold
+	// something: a layout that does not use them is as it always was
+	const layout: DockLayout = { left, right, content, floats, hidden };
+
+	if( top.root ) {
+		layout.top = top;
+	}
+
+	if( bottom.root ) {
+		layout.bottom = bottom;
+	}
+
+	return layout;
 }
 
 /**
@@ -570,7 +653,9 @@ function sanitize( saved: unknown, kinds: DockKinds ): DockLayout {
  *
  * `kinds` are the panels that exist today. A saved layout may be older
  * than the application: the panels it does not know are added where the
- * default layout has them, those that are gone are dropped.
+ * default layout has them, those that are gone are dropped. So is a tool
+ * that is in a band it may not be docked in anymore: it goes where the
+ * default layout has it.
  */
 
 export function dockRestore( saved: unknown, kinds: DockKinds, defaults: DockLayout ): DockLayout {
@@ -582,8 +667,10 @@ export function dockRestore( saved: unknown, kinds: DockKinds, defaults: DockLay
 			continue;
 		}
 
+		// where the default layout has it; otherwise on the right if it may, or in the first band it may be in
+		const allowed = dockSides( kinds, panel );
 		const float = floatOf( usual, panel );
-		const side = bandOf( usual, panel ) ?? "right";
+		const side = bandOf( usual, panel ) ?? ( allowed.includes( "right" ) ? "right" : allowed[0] );
 
 		if( kinds.contents.includes( panel ) ) {
 			layout = addContent( layout, panel );
@@ -592,7 +679,9 @@ export function dockRestore( saved: unknown, kinds: DockKinds, defaults: DockLay
 			layout = dockFloat( layout, panel, float );
 		}
 		else {
-			layout = dockBand( layout, panel, side, usual[side].size );
+			// as wide as the default layout has that band, when it has it
+			const band = usual[side];
+			layout = dockBand( layout, panel, side, band ? band.size : 0 );
 		}
 
 		if( usual.hidden.includes( panel ) ) {

package/src/components/gauge/gauge.ts

@@ -59,6 +59,10 @@ export class Gauge extends Component<GaugeProps> {
 	constructor( props: GaugeProps ) {
 		super( props );
 
+		// no range given: 0 to 100
+		this.props.min = props.min ?? 0;
+		this.props.max = props.max ?? 100;
+
 		this.pos = 70;
 		this.stops = [];
 

package/src/components/input/input.ts

@@ -410,7 +410,12 @@ export class Input extends Component<InputProps,InputEvents> {
      */
 
 	public setNumValue( value: number, ndec = -1 ) {
-		
+
+		// no number (a field that is not filled): the field is emptied
+		if( value===undefined || value===null || isNaN( value ) ) {
+			return this.setValue( "" );
+		}
+
 		if( ndec==-2 && this.props.type=='number' ) {
 			const p = this.props as NumberProps;
 

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

@@ -18,7 +18,11 @@
 
 :root {
 	--notification-border: var( --border );
-	--notification-background: white;
+	--notification-background: var( --background-primary );
+
+	--notification-title-color: var( --text-primary );
+	--notification-text-color: var( --text-ternary );
+	--notification-button-color: var( --text-ternary );
 
 	--notification-icon-default: var( --accent-background );
 	--notification-icon-success: var( --success-background );
@@ -54,11 +58,12 @@
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;
+			color: var( --notification-title-color );
 		}
 
 		.text {
 			padding: 3px 6px 6px 6px;
-			color: var( --color-gray-7 );
+			color: var( --notification-text-color );
 		}
 	}
 
@@ -81,7 +86,7 @@
 
 	.x4button {
 		height: 24px;
-		color: var( --color-gray-7 );
+		color: var( --notification-button-color );
 		border: none;
 
 		//&:hover {

package/src/components/notification/notification.ts

@@ -52,6 +52,9 @@ interface NotificationProps extends ComponentProps {
  * ```
  * --notification-border
  * --notification-background
+ * --notification-title-color
+ * --notification-text-color
+ * --notification-button-color
  * --notification-icon-default
  * --notification-icon-success
  * --notification-icon-danger

package/src/components/progress/progress.ts

@@ -21,8 +21,8 @@ import "./progress.module.scss";
 
 interface ProgressProps extends ComponentProps {
 	value: number;
-	min: number;
-	max: number;
+	min?: number;	// 0 when missing
+	max?: number;	// 100 when missing
 }
 
 /**
@@ -46,7 +46,11 @@ export class Progress extends Component<ProgressProps> {
 	}
 
 	setValue( value: number ) {
-		const perc = value / (this.props.max-this.props.min) * 100;
+		const min = this.props.min ?? 0;
+		const max = this.props.max ?? 100;
+
+		// where the value is between the two: min is 0%, max is 100%
+		const perc = (value-min) / (max-min) * 100;
 		this._bar.setStyleValue( "width", perc+"%" );
 	}
 }

package/src/components/switch/switch.ts

@@ -28,6 +28,7 @@ interface SwitchProps extends ComponentProps {
 	label: string;
 	checked?: boolean;
 	value?: string;
+	name?: string;	// with it, a Form reads and writes the switch (a boolean)
 }
 
 /**
@@ -52,7 +53,7 @@ export class Switch extends HBox<SwitchProps> {
 			new Component( {
 				cls: "switch",
 				content: [
-					new Input( { type: "checkbox", id: inputId, checked: props.checked } ),
+					new Input( { type: "checkbox", id: inputId, name: props.name, checked: props.checked } ),
 					new Component( { cls: "track" } ),
 					new Component( { cls: "thumb" } ),
 				]