x4js 2.3.20 → 2.3.22

package/aicontext.md

@@ -41,7 +41,7 @@ CoreElement<E>                 named timers + event surface (no DOM)
   │     ├── CSizer → HSizer / VSizer
   │     ├── FileDialog, ScrollView, Viewport, DockingView, Flex, Space
   │     ├── HBox-based: ColorInput, Rating, Switch, Tag, Keyboard, TextEdit → AutoComplete, Breadcrumbs
-  │     └── VBox-based: Calendar, ColorPicker, FileDrop, Panel, PropertyGrid, TextArea
+  │     └── VBox-based: Calendar, ColorPicker, FileDrop, Panel, PropertyGrid, TextArea, SettingsView, SettingItem
   └── Application<E>           singleton, no DOM of its own
 
 EventSource<E>                 standalone event registry
@@ -50,7 +50,7 @@ EventSource<E>                 standalone event registry
   └── StateManager<T>
 
 CoreElement-based (non-DOM): DataProxy, DataView, Store
-Standalone: Rect, Timer, Color, DataModel, Shortcuts, Stylesheet, ComputedStyle,
+Standalone: Rect, Timer, Color, DataModel, Shortcuts, Stylesheet (deprecated: CSS variables), ComputedStyle,
             SvgBuilder, X4PDFBuilder, x4_react, CMover, UnsafeHtml (extends String)
 ```
 
@@ -499,10 +499,11 @@ interface LinkProps extends ComponentProps {
   text?: string | UnsafeHtml
   icon?: string
   align?: "left" | "center" | "right"
-  click?: EventCallback<EvClick>
+  click?: EventCallback<EvClick>           // ev.context = href; the link is followed unless ev.preventDefault()
+  // content: the link is its content (no label: text, icon, align are not used)
 }
 interface LinkEvents extends ComponentEvents { click: EvClick }
-class Link extends Component { setText(text: string|UnsafeHtml): void }
+class Link extends Component { setText(text: string|UnsafeHtml): void }   // the text of its label: the icon stays
 ```
 
 ### `Icon`
@@ -510,9 +511,10 @@ class Link extends Component { setText(text: string|UnsafeHtml): void }
 ```ts
 interface IconProps extends ComponentProps { iconId?: string }
 class Icon extends Component { setIcon(iconId: string): void }
-// iconId resolution: "var:name" → CSS var | "data:image/svg+xml,<svg..." → inline
+// iconId resolution: "var:name" or "var:--name" → the variable --name set on <html> by the code
+//     (document.documentElement.style.setProperty("--name", svg); not one of a stylesheet) | "data:image/svg+xml,<svg..." → inline
 //   | "<svg..." → raw inline | "*.svg" → async load + cache | else → <img src>
-export const svgLoader: SvgLoader          // shared SVG cache
+export const svgLoader: SvgLoader          // shared SVG cache: load(url): Promise<string>; a file not found rejects, and is not asked again
 ```
 
 ### `Image`
@@ -647,12 +649,12 @@ interface SimpleTextAreaProps extends BaseProps {   // BaseProps: see Input (nam
 }
 interface TextAreaProps extends SimpleTextAreaProps { label?: string }
 
-class SimpleTextArea extends Component {    // the <textarea> alone
+class SimpleTextArea extends Component {    // the <textarea> alone; never smaller than one character (min-height/min-width, padding included)
   getText(): string; setText(text: string): void
   scrollToBottom(): void
   isValid(): boolean                       // false when it is required and empty
 }
-class TextArea extends VBox {               // a Label above a SimpleTextArea
+class TextArea extends VBox {               // a Label above a SimpleTextArea; without a height, the textarea has its 2 rows (and the height the handle gives); with one, it fills it
   getText(): string; setText(text: string): void
   scrollToBottom(): void
   isValid(): boolean
@@ -771,7 +773,7 @@ interface AutoCompleteProps extends TextEditProps {   // label, labelWidth, requ
   strict?: boolean                          // only a picked item (or empty) is accepted; default false
   itemValue?: "text" | "id"                 // what goes into the field when an item is picked; default "text"
   delay?: number                            // ms before search, default 250
-  minChars?: number                         // default 1
+  minChars?: number                         // default 1; ↓ searches whatever the length (ev.text may be "")
   renderer?: (item: ListItem) => Component
 }
 class AutoComplete extends TextEdit {
@@ -788,12 +790,15 @@ class AutoComplete extends TextEdit {
 interface ColorInputProps extends BoxProps {
   color: Color | string                    // null: no color shown
   name?: string
-  format?: "rgb" | "hex"                   // text of the field, "rgb" by default
+  format?: "rgb" | "hex"                   // text of the field, "rgb" by default; "rgba(...)" / "#rrggbbaa" when not opaque
   picker?: boolean                         // a click on the swatch opens a ColorPicker
   swatches?: (Color|string)[] | (() => (Color|string)[])   // a function is called each time the picker opens
   nullable?: boolean                       // "no color" can be chosen
+  alpha?: boolean                          // false: colors kept opaque, no alpha slider in the picker (default true)
+  placeholder?: string                     // text of the empty field
   change?: EventCallback<EvColorChange>    // user changes only, not setColor
 }
+// typing: the text is not rewritten while typed; on blur it is written from the color in the typed form (#... or rgb...)
 class ColorInput extends HBox {            // queryInterface("form-element"): "#rrggbb" or null
   getColor(): Color; getValue(): string
   setColor(color: Color | string): void; setSwatches(swatches): void
@@ -870,7 +875,7 @@ class Gridview extends Component {
   getView(): DataView
   getSelection(): DataRecord[]              // null when nothing is selected
   getFirstSel(): DataRecord                 // null when nothing is selected
-  selectItem(id, ensureVisible?: boolean): void
+  selectItem(id, ensureVisible?: boolean): void   // may be called before the grid is shown (then nothing is scrolled)
   clearSelection(): void
   selectAll(): void                         // multisel only; keeps the id of every record: costs memory on a very large view
   navigate(sens: kbNav): boolean
@@ -954,7 +959,7 @@ interface ChartProps extends SvgProps {
   type?: "line" | "area" | "bar" | "pie" | "donut"   // default "line"
   series: ChartSerie[]                      // required; pie & donut use the first serie
   labels?: string[]                         // default: 1, 2, 3...
-  xaxis?: ChartAxis;  yaxis?: ChartAxis     // { name?, ticks?, min?, max?, step? }, all computed by default
+  xaxis?: ChartAxis;  yaxis?: ChartAxis     // { name?, ticks?, min?, max?, step? }, all computed by default; on x: max = number of points, step = points between labels (>= 1), min not used
   legend?: boolean                          // default: shown when 2+ named series
   stacked?: boolean
   formatter?: (value: number) => string     // default: chartFormatUnit (1.5k, 2M...)
@@ -1077,6 +1082,7 @@ interface DialogProps extends PopupProps {
   title: string                            // required
   buttons: BtnGroupItem[]                  // required
   icon?: string; form?: Form
+  content?: ComponentContent                // without form: the content of its form
   closable?: boolean | string; modal?: boolean
   btnclick?: EventCallback<EvBtnClick>
 }
@@ -1087,6 +1093,7 @@ class Dialog extends Popup {
   getButton(name: string): Button
   getBtnBar(): BtnGroup
   setTitle(title: string): void
+  show(): this                             // each time: the focus on its first field
   showAsync(): Promise<string>             // the name of the clicked button; null when closed without a button (Escape, close box)
 }
 ```
@@ -1137,7 +1144,7 @@ interface FormProps extends BoxProps { autoComplete?: boolean }
 class Form extends Box {
   setValues(values: FormValues): void
   getValues<T extends FormValues>(): T
-  setAutoComplete(on?: boolean): void
+  setAutoComplete(on?: boolean): void      // attribute on the <form>: fields without their own follow it, added later too
   setValidator(validator: (values: FormValues, is_valid: boolean) => boolean): void   // a new call replaces the validator
   validate(): FormValues                   // null if invalid; the values the validator changes are written back in their fields (any element with the name, every radio of a group)
 }
@@ -1146,6 +1153,78 @@ class Form extends Box {
 
 ---
 
+## `SettingsView` — a page of settings, as the settings of VS Code
+
+The summary of the sections on the left, the sections on the right, one after the other, each a panel with its title on a band; in a section, each `SettingItem` with its name, what it does, then its controls. A click in the summary brings its section to the top; the summary follows the scroll and marks the section at the top of the view.
+
+```ts
+interface SettingItemProps extends BoxProps {
+  title: string
+  description?: string                     // under the name
+  content: Component | Component[]         // its controls, on a line that wraps
+}
+class SettingItem extends VBox {
+  getSearchText(): string                  // the title and the description: what a search looks in
+}
+// A SettingItem has no value of its own: its controls keep theirs. To read and write them together,
+// put the items in a Form (a section can hold a Form of SettingItem), give the controls a name,
+// and use getValues / setValues. The item is marked on its left while one of its controls has the focus.
+
+interface SettingsSection {
+  id: string
+  title: string
+  description?: string                     // under the title
+  content: Component[]                     // SettingItem, Form of SettingItem, or any component
+}
+interface SettingsViewProps extends BoxProps {
+  sections?: SettingsSection[]
+  searchable?: boolean                     // a search field above the sections
+  searchPlaceholder?: string               // _tr.global.settings.search when missing
+  noMatch?: string                         // shown when the search finds nothing; _tr.global.settings.nomatch when missing
+  sectionChange?: EventCallback<EvSectionChange>
+}
+interface EvSectionChange extends ComponentEvent { readonly section: string }   // the id of the section at the top
+class SettingsView<P extends SettingsViewProps = SettingsViewProps> extends VBox<P, SettingsViewEvents> {
+  setSections(sections: SettingsSection[]): void   // replaces the sections
+  showSection(id: string, smooth = true): void     // brings a section to the top
+  getSection(): string                             // the id of the section at the top
+}
+// Search: the words typed are looked for without case nor accents; an item is shown when its title or
+//   its description holds all of them. A section whose title or description holds them is shown whole;
+//   otherwise only its items that hold them, and what holds those items (a Form, a box). What holds no
+//   item (a table, a text) is shown with its whole section only. Escape empties the field.
+// The section marked in the summary is the last one whose top is above the top of the view (40px of
+//   margin); the first one while the view is hidden (in a tab not shown). The last section shown is at
+//   least as high as the view (class "last"): a click in the summary can bring any section to the top.
+// Classes: .x4settingsview > .search > .x4input, > .body > .toc (a Listbox), > .body > .sections;
+//   .section(.last) > .title, .description; .sections > .nomatch; .x4settingitem > .name, .description, .controls
+// CSS variables: --settingsview-toc-width, --settingsview-section-background,
+//   --settingsview-section-title-background, --settingsview-hover-background, --settingsview-marker
+```
+
+A page that builds its sections with references to its own components (`this.refs.x = ...`) cannot give them to `super()`: `this` is not there yet. It calls `setSections` after `super()`. `SettingsView` keeps its own parts in private fields, not in `refs`: `refs` is left to the classes that derive from it.
+
+```ts
+class MySettings extends SettingsView {
+  declare protected refs: { size: Input }
+
+  constructor(props: BoxProps) {
+    super({ ...props, searchable: true })
+
+    this.setSections([
+      { id: "editor", title: "Editor", content: [
+        new Form({ content: [
+          new SettingItem({ title: "Font size", description: "The size of the text, in pixels.",
+            content: this.refs.size = new Input({ type: "number", name: "fontSize", value: 14 }) }),
+        ] }),
+      ] },
+    ])
+  }
+}
+```
+
+---
+
 ## Sizers / viewport / misc
 
 ```ts
@@ -1162,8 +1241,9 @@ class VSizer extends CSizer                // vertical splitter
 class ScrollView extends Component { getViewport(): Component }
 class Viewport extends Component
 class Canvas extends Component { getContext(): CanvasRenderingContext2D; paint(): void }
-class Video extends Box {
-  play(); pause(); mute(set: boolean)
+class Video extends Box {                   // class x4video
+  play(): Promise<boolean>                 // false: could not start (a click of the user wanted, a source not playable); no source: waits for one
+  pause(); mute(set: boolean)
   get player(): HTMLVideoElement; get duration(): number; get paused(): boolean
   get volume(): number; get videoWidth(): number; get videoHeight(): number
   set stream(stream: MediaStream)
@@ -1171,12 +1251,15 @@ class Video extends Box {
 class Calendar extends VBox {               // props: date?, minDate?, maxDate? (days out of them cannot be chosen), change ("change": the day clicked)
   getDate(): Date; setDate(date: Date): void   // copies: the calendar keeps its own date
 }
-class ColorPicker extends VBox {           // props: color, swatches?, nullable?; "change": EvColorChange, also fired once when built
+class ColorPicker extends VBox {           // props: color, swatches?, nullable?, alpha? (false: no alpha slider, opaque colors); "change": EvColorChange, also fired once when built
   getColor(): Color; setColor(color: Color | string): void; setSwatches(swatches): void
 }
-class Panel extends VBox { setTitle(title: string): void }
+class Panel extends VBox { setTitle(title: string): void }   // the text of its title: its icon stays
 class Breadcrumbs extends HBox { setItems(elements): void }
-interface KeyboardProps extends BoxProps { locale?: string }   // "fr-FR" (default), "de-CH", "pl"...
+interface KeyboardProps extends BoxProps {
+  locale?: string      // "fr-FR" (default), "de-CH", "pl"...
+  numpadOnly?: boolean    // number or date field: the pad has no "abc" key back to the letters
+}
 class Keyboard extends HBox {               // virtual keyboard, shown while an <input> has the focus
   setLocale(locale: string): void
   setZoom(perc: number): void
@@ -1184,6 +1267,7 @@ class Keyboard extends HBox {               // virtual keyboard, shown while an
 }
 // languages: cs da de en es et fi fr ga hr hu it lt lv mt nl pl pt ro sk sl sv
 // bottom row: 123 (numeric pad), the letters of the language (éè, none in en), the signs (#+=); Abc comes back
+// a key acts on pointerdown; the keys that draw the keyboard again (shift, 123, abc, accents, signs) on the click
 class TickLine extends Component
 class Header extends HBox                  // resizable column header; updates target style "--{name}-width"
 ```
@@ -1287,7 +1371,7 @@ parseRoute(str: string|RegExp, loose?: boolean): Segment
 
 ## Shortcuts (`core_shortcuts`)
 
-Keyboard shortcuts. A sequence is written as it is read: `"Mod+C"`, `"Shift+Mod+Z"`, `"Delete"`, `"Alt+ArrowLeft"`.
+Keyboard shortcuts. A sequence is written as it is read: `"Mod+C"`, `"Shift+Mod+Z"`, `"Delete"`, `"Alt+ArrowLeft"`, `"Ctrl+Space"`.
 Modifiers: `Shift`, `Ctrl`, `Cmd`, `Alt`, and `Mod` = the key of the commands (Ctrl on Windows and Linux, Cmd on a Mac). Prefer `Mod`.
 
 ```ts
@@ -1393,7 +1477,7 @@ dragManager.registerDropTarget(column, (cmd, el, infos) => {
 
 - `registerDraggableElement`: while it is dragged, the component has the class `dragging`, and a copy of it with the class `dragged`, added to the body, follows the pointer. Nothing else is done: no data of the application goes with the drag, the target gets the component itself.
 - The callback of a target: `enter` and `leave` when the pointer comes over it and goes away, `drag` again and again while it is over it, `drop`. Only `drag` and `drop` have `infos`; `pt` is in the coordinates of the page.
-- `enter` and `leave` are found by a timer: they may come up to 300 ms late, and a `leave` also follows a `drop`. Between them the target has the class `drop-over`.
+- `enter` comes at once, before the first `drag`. `leave` is found by a timer: it comes up to 300 ms after the pointer went away (over the children of a target the browser sends dragleave and dragover in turn), and a `leave` also follows a `drop`. Between them the target has the class `drop-over`.
 - `el` in the callbacks is the dragged component, not the target. There is none for files that come from the desktop: read `infos.data.files`.
 - `Image` (`candrop`) and `FileDrop` already use it for files.
 
@@ -1401,13 +1485,15 @@ dragManager.registerDropTarget(column, (cmd, el, infos) => {
 
 ## i18n (`core_i18n`)
 
-Two built-in languages (`fr` default, and `en`).
+Four built-in languages: `fr` (default), `en` (based on `fr`), `es` and `de` (based on `en`). Dates: `D/M/Y` in fr and es, `M/D/Y` in en, `D.M.Y` in de.
 
 ```ts
 export let _tr                             // current translation object (proxy)
 createLanguage(name: string, base: string): void
-addTranslation(name: string, ...parts: any[]): void
+addTranslation(name: string, ...parts: any[]): void   // seen at once, the language being selected or not
 selectLanguage(name: string): typeof _tr
+// a key missing in a language is taken from its base (createLanguage), at the same path;
+// a key no language has: console.error "I18N error: unable to find _tr.x.y", undefined
 getCurrentLanguage(): string
 getAvailableLanguages(): string[]
 isLanguage(name: string): boolean
@@ -1416,7 +1502,8 @@ isLanguage(name: string): boolean
 //   search search_tip required_field invalid_format invalid_email invalid_number invalid_date
 //   empty_list err_403 property value copy cut paste filedrop
 //   diff_date_seconds/minutes/hours, date_input_formats, date_format, date_time_format,
-//   day_short[] day_long[] month_short[] month_long[], keyboard.{next,numeric,alpha}
+//   day_short[] day_long[] month_short[] month_long[], keyboard.{next,numeric,alpha},
+//   settings.{search,nomatch}
 ```
 
 ---
@@ -1426,7 +1513,7 @@ isLanguage(name: string): boolean
 ```ts
 class UnsafeHtml extends String            // raw, unescaped HTML marker
 unsafeHtml(x: string): UnsafeHtml
-unsafe(strings, ...values): UnsafeHtml     // template tag: unsafe`<b>${x}</b>`
+unsafe(strings, ...values): UnsafeHtml     // template tag: unsafe`<b>${x}</b>`; values escaped (an UnsafeHtml kept), null/undefined write nothing, 0 and false are written
 sanitizeHtml(input: string): string        // escape &<>"' for safe text insertion
 safeText(v: string | UnsafeHtml): string   // UnsafeHtml passes through; plain string is escaped
 
@@ -1443,10 +1530,12 @@ interface IRect { left; top; height; width: number }
 class Timer { setTimeout; clearTimeout; setInterval; clearInterval; clearAllTimeouts }
 
 class Color {
-  // new Color(value) | new Color(r,g,b,a?)
-  setValue(value): this; setRgb(r,g,b,a): this; setHsv(h,s,v,a?): this; setAlpha(a): this
-  getAlpha(): number; lighten(percent): this; isInvalid(): boolean
-  toHexString(): string; toRgbString(withAlpha?): string; toNumber(): number
+  // new Color(value) | new Color(r,g,b,a?)   a: 0..1, default 1
+  setValue(value): this; setRgb(r,g,b,a?): this; setHsv(h,s,v,a?): this; setAlpha(a): this
+  getAlpha(): number; lighten(percent): this
+  isInvalid(): boolean                     // the last setValue could not be read (the color is red); setRgb/setHsv make it valid
+  toHexString(): string; toNumber(): number
+  toRgbString(withAlpha = false): string   // "rgb(r,g,b)"; true: "rgba(r,g,b,0.500)" when not opaque, "rgb(...)" when opaque
   toRgb(): Rgb; toHsv(): Hsv
 }
 
@@ -1465,10 +1554,11 @@ pascalCase(s): string; camelCase(s): string; clamp<T>(v, min, max): T
 measureText(str, size, bold?): number      // width in Helvetica, from core_pdf (see PDF)
 
 // Dates
-date_format(date, options?): string
-date_diff(date1, date2, options?): string
+date_format(date, options?): string       // options not read yet: formatIntlDate(date)
+date_diff(date1, date2, options?): string   // "30 secondes", "5 minutes", "2 heures 5 minutes" (either order); options not read
 date_to_sql(date, withHours): string; date_sql_utc(date): Date
-date_hash(date): number; date_clone(date): Date; date_calc_weeknum(date): number
+date_hash(date): number; date_clone(date): Date
+date_calc_weeknum(date): number            // ISO 8601: weeks from monday, week 1 holds the first thursday (29/12/2025 → 1)
 parseIntlDate(value, fmts?): Date; formatIntlDate(date, fmt?, utc?): string
 calcAge(birth, ref?): number
 
@@ -1504,7 +1594,7 @@ const makeUniqueComponentId  // () => string, "x4-<n>" (exported as a value)
 
 ```
 d day (no zero)    D day (2 digits)     j short day (mon)   J long day (monday)
-w week number      W week (2 digits)    m month (no zero)   M month (2 digits)
+w week number (ISO 8601)      W week (2 digits)    m month (no zero)   M month (2 digits)
 o short month      O long month         y/Y year            h 24h hour
 H hour (2 digits)  i minutes            I minutes (2 dig)   s seconds
 S seconds (2 dig)  a am/pm              l ms                L ms (3 digits)
@@ -1526,6 +1616,9 @@ class SvgBuilder extends SvgGroup {
 }
 // Items: SvgGroup, SvgPath (moveTo/lineTo/curveTo/arc/closePath), SvgText (font/fontSize/textAlign),
 //        SvgShape, SvgIcon, SvgGradient (addStop)
+// arc(x, y, r, start, end): angles in degrees, 0 is the top, 90 the right; it starts a new subpath
+// addStop(offset, color): a number is a percentage (20 → "20%"), "50%" as it is
+// getNumAttr(name): 0 when not set; SvgIcon(svg): its svg needs xmlns="http://www.w3.org/2000/svg"
 ```
 
 ---
@@ -1793,6 +1886,8 @@ Optional keys: `external`, `define`, `esbuild`, `dev` (`host`, `port`, `https`,
 }
 ```
 
+`experimentalDecorators` is required: the decorators `@data.*` of a `DataModel` are written for it. Without it esbuild applies the standard JavaScript decorators, and the fields of a model are not declared.
+
 ### `src/index.html`
 
 ```html

package/package.json

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

package/src/components/autocomplete/autocomplete.ts

@@ -158,6 +158,9 @@ export class AutoComplete extends TextEdit<AutoCompleteEvents> {
 		if( text.length<this._min_chars ) {
 			this.clearTimeout( "search" );
 			this._popup.show( false );
+
+			// the suggestions were for another text: ↓ asks for new ones
+			this._count = 0;
 			return;
 		}
 

package/src/components/boxes/boxes.ts

@@ -508,7 +508,7 @@ export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEven
      */
 
 	setTemplate( t: string[] ) {
-		this.setAttribute( "grid-template-areas", t.map( x => '"' + x + '"' ).join(" ") );
+		this.setStyleValue( "gridTemplateAreas", t.map( x => '"' + x + '"' ).join(" ") );
 	}
 
 	/**

package/src/components/chart/chart.ts

@@ -31,7 +31,7 @@ export interface ChartTick {
 export interface ChartAxis {
 	name?: string;
 	ticks?: ChartTick[];
-	min?: number;
+	min?: number;		// not used on x axis
 	max?: number;		// on x axis: number of points
 	step?: number;		// on x axis: one label every 'step' points
 }
@@ -102,6 +102,11 @@ export function chartFormatUnit( value: number, decimals = 2 ) {
 
 function niceScale( min: number, max: number, maxTicks: number ) {
 
+	// a bound given beyond the values: an empty range at that bound
+	if( max<min ) {
+		max = min;
+	}
+
 	if( min==max ) {
 		if( min==0 ) 		{ max = 1; }
 		else if( min>0 ) 	{ min = 0; }
@@ -152,9 +157,12 @@ function computeStack( series: ChartSerie[], count: number ) {
 	const neg = new Array<number>( count ).fill( 0 );
 
 	return series.map( s => {
+		// a serie without values counts 0
+		const values = s.values || [];
+
 		const out: { lo: number, hi: number }[] = [];
 		for( let i=0; i<count; i++ ) {
-			const v = isNumber( s.values[i] ) ? s.values[i] : 0;
+			const v = isNumber( values[i] ) ? values[i] : 0;
 			const acc = v>=0 ? pos : neg;
 
 			out.push( { lo: acc[i], hi: acc[i]+v } );
@@ -591,7 +599,8 @@ export class Chart extends SvgComponent<ChartProps,ChartEvents> {
 			}
 
 			// too many labels: show one every n
-			const every = xaxis.step>0 ? Math.round( xaxis.step ) : Math.max( 1, Math.ceil( ( maxw+8 ) / ( xstep || plot.width ) ) );
+			// at least one point between two labels
+			const every = xaxis.step>0 ? Math.max( 1, Math.round( xaxis.step ) ) : Math.max( 1, Math.ceil( ( maxw+8 ) / ( xstep || plot.width ) ) );
 			for( let i=0; i<count; i+=every ) {
 				xticks.push( { value: i, text: this._label(i) } );
 			}

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

@@ -19,6 +19,7 @@
 	--colorinput-btn-color: var( --text-secondary );
 	--colorinput-btn-color-hover: var( --text-primary );
 	--colorinput-popup-background: var( --background-primary );
+	--colorinput-none: var( --alert-background );
 }
 
 .x4colorinput {
@@ -35,6 +36,10 @@
 		width: 1rem;
 		height: 1rem;
 
+		// its color over checkers: a color that is not opaque is seen as such
+		background: linear-gradient( var( --swatch-color ), var( --swatch-color ) ),
+			repeating-conic-gradient( #c8c8c8 0% 25%, #ffffff 0% 50% ) 0 0 / 6px 6px;
+
 		// props.picker: a click opens the color picker. It is a button:
 		// wide enough to be aimed at.
 		&.picker {
@@ -50,10 +55,14 @@
 			}
 		}
 
-		// props.nullable, no color: the checkerboard that stands for what is transparent
+		// no color: white, crossed out from bottom left to top right, the edges of the line
+		// blurred by 1px (smooth); checkers are for a transparent color
 		&.none {
 			border: 1px solid var( --border );
-			background: repeating-conic-gradient( #c8c8c8 0% 25%, #ffffff 0% 50% ) 0 0 / 6px 6px;
+			background: linear-gradient( to bottom right,
+					transparent calc( 50% - 1.5px ), var( --colorinput-none ) calc( 50% - 0.5px ),
+					var( --colorinput-none ) calc( 50% + 0.5px ), transparent calc( 50% + 1.5px ) ),
+				white;
 		}
 	}
 

package/src/components/colorinput/colorinput.ts

@@ -59,6 +59,12 @@ export interface ColorInputProps extends BoxProps {
 	/** The field may have no color: emptied, or "no color" picked. */
 	nullable?: boolean;
 
+	/** false: the colors are opaque, the picker has no alpha slider (default true). */
+	alpha?: boolean;
+
+	/** The text shown in the field while it is empty. */
+	placeholder?: string;
+
 	/** The user changed the color (not fired by setColor). */
 	change?: EventCallback<EvColorChange>;
 }
@@ -74,6 +80,7 @@ interface ColorInputEvents extends ComponentEvents {
  * --colorinput-btn-color
  * --colorinput-btn-color-hover
  * --colorinput-popup-background
+ * --colorinput-none
  * ```
  */
 
@@ -100,7 +107,7 @@ export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 
 		this.setContent( [
 			this._swatch = new Component( { cls: "swatch" } ),
-			this._edit = new Input( { type: "text", value: "", spellcheck: false } ),
+			this._edit = new Input( { type: "text", value: "", spellcheck: false, placeholder: props.placeholder } ),
 
 			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
 				const eyeDropper = new (window as any).EyeDropper();
@@ -112,6 +119,7 @@ export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 			} } ) : null
 		])
 
+		// while it is typed, the text is left alone: the color follows it
 		this._edit.addDOMEvent( "input", ( ) => {
 			const txt = this._edit.getValue( );
 
@@ -122,10 +130,16 @@ export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 
 			const clr = new Color( txt );
 			if( !clr.isInvalid() ) {
-				this._changed( clr );
+				this._changed( clr, false );
 			}
 		});
 
+		// the field is left: the text is written from the color, in the form that was typed
+		// (a text that could not be read shows the color that was kept)
+		this._edit.addDOMEvent( "change", ( ) => {
+			this._show( this._color );
+		});
+
 		if( props.picker ) {
 			// A click on the swatch opens the picker, a second one closes it.
 			// The picker closes by itself as soon as the button goes down
@@ -160,7 +174,19 @@ export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 	}
 
 	private _format( color: Color ): string {
-		return this.props.format=="hex" ? color.toHexString( ) : color.toRgbString( false );
+		// the form of the text in the field: "#..." or "rgb...", else props.format
+		const text = this._edit.getValue( ).trim( ).toLowerCase( );
+
+		let hex = this.props.format=="hex";
+		if( text.startsWith( "#" ) ) {
+			hex = true;
+		}
+		else if( text.startsWith( "rgb" ) ) {
+			hex = false;
+		}
+
+		// rgba / #rrggbbaa when the color is not opaque
+		return hex ? color.toHexString( ) : color.toRgbString( true );
 	}
 
 	/**
@@ -169,10 +195,16 @@ export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 	 */
 
 	private _show( color: Color, text = true ) {
+		// no alpha: every color shown is opaque, typed, picked or given
+		if( color && this.props.alpha===false ) {
+			color.setAlpha( 1 );
+		}
+
 		this._color = color;
 
 		this._swatch.setClass( "none", !color );
-		this._swatch.setStyleValue( "backgroundColor", color ? color.toRgbString(false) : null );
+		// the stylesheet draws it over checkers
+		this._swatch.setStyleVariable( "--swatch-color", color ? color.toRgbString( true ) : "" );
 
 		if( text ) {
 			this._edit.setValue( color ? this._format( color ) : "" );
@@ -201,6 +233,7 @@ export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
 			color: this._color ? new Color( this._color.toHexString( ) ) : new Color( 255, 255, 255 ),
 			swatches,
 			nullable: this.props.nullable,
+			alpha: this.props.alpha,
 		} );
 
 		const popup = this._popup = new Popup( { cls: "x4colorinput-popup", autoClose: true, content: picker } );

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

@@ -16,6 +16,10 @@
 
 @use "../shared.scss";
 
+:root {
+	--colorpicker-none: var( --alert-background );
+}
+
 @mixin overlay-shadow {
 	width: 12px;
 	height: 12px;
@@ -143,13 +147,21 @@
 			border-radius: 3px;
 			cursor: pointer;
 
+			// its color over checkers: a color that is not opaque is seen as such
+			background: linear-gradient( var( --swatch-color ), var( --swatch-color ) ),
+				repeating-conic-gradient( #c8c8c8 0% 25%, #ffffff 0% 50% ) 0 0 / 6px 6px;
+
 			&:hover {
 				border-color: var( --border-focus );
 			}
 
-			// no color: the checkerboard that stands for what is transparent
+			// no color: white, crossed out from bottom left to top right, the edges of the line
+			// blurred by 1px (smooth); checkers are for a transparent color
 			&.none {
-				background: repeating-conic-gradient( #c8c8c8 0% 25%, #ffffff 0% 50% ) 0 0 / 6px 6px;
+				background: linear-gradient( to bottom right,
+						transparent calc( 50% - 1.5px ), var( --colorpicker-none ) calc( 50% - 0.5px ),
+						var( --colorpicker-none ) calc( 50% + 0.5px ), transparent calc( 50% + 1.5px ) ),
+					white;
 			}
 		}
 	}