verstak 0.24.272 → 0.24.274

package/build/dist/source/html/El.d.ts

@@ -5,15 +5,15 @@ export type El<T = any, M = any> = {
     native: T;
     model: M;
     kind: ElKind;
-    area: ElArea;
+    place: ElPlace;
     width: Range;
     height: Range;
-    alignment: Alignment | undefined;
-    alignmentInside: Alignment | undefined;
-    verticalAlignment: VerticalAlignment | undefined;
-    verticalAlignmentInside: VerticalAlignment | undefined;
-    stretchingStrengthX: number | undefined;
-    stretchingStrengthY: number | undefined;
+    horizontal: PosH | undefined;
+    contentHorizontal: PosH | undefined;
+    vertical: PosV | undefined;
+    contentVertical: PosV | undefined;
+    stretchingStrengthH: number | undefined;
+    stretchingStrengthV: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
     sealed: Direction | undefined;
@@ -31,7 +31,7 @@ export type El<T = any, M = any> = {
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
 };
 export declare enum ElKind {
-    section = 0,
+    panel = 0,
     table = 1,
     note = 2,
     group = 3,
@@ -46,17 +46,19 @@ export type ElCoords = {
     x2: number;
     y2: number;
 };
-export declare enum Alignment {
+export declare enum PosH {
     left = 0,
     center = 1,
     right = 2,
-    stretch = 3
+    stretch = 3,
+    stretchAndFix = 4
 }
-export declare enum VerticalAlignment {
+export declare enum PosV {
     top = 0,
     center = 1,
     bottom = 2,
-    stretch = 3
+    stretch = 3,
+    stretchAndFix = 4
 }
 export type Range = {
     readonly min?: string;
@@ -66,7 +68,7 @@ export type Range = {
 export type MarkedRange = Range & {
     readonly marker?: string;
 };
-export type ElArea = undefined | string | {
+export type ElPlace = undefined | string | {
     cellsOverWidth?: number;
     cellsOverHeight?: number;
 };
@@ -85,16 +87,16 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     native: T;
     model: M;
     private _kind;
-    private _area;
+    private _place;
     private _coords;
     private _width;
     private _height;
-    private _alignment;
-    private _verticalAlignment;
-    private _alignmentInside;
-    private _verticalAlignmentInside;
-    private _stretchingStrengthX;
-    private _stretchingStrengthY;
+    private _horizontal;
+    private _vertical;
+    private _contentHorizontal;
+    private _contentVertical;
+    private _stretchingStrengthH;
+    private _stretchingStrengthV;
     private _contentWrapping;
     private _overlayVisible;
     private _sealed;
@@ -103,13 +105,13 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     constructor(node: RxNode<El<T, M>>);
     prepareForUpdate(): void;
     get index(): number;
-    get isSection(): boolean;
+    get isPanel(): boolean;
     get isTable(): boolean;
     get isAuxiliary(): boolean;
     get kind(): ElKind;
     set kind(value: ElKind);
-    get area(): ElArea;
-    set area(value: ElArea);
+    get place(): ElPlace;
+    set place(value: ElPlace);
     get width(): Range;
     set width(value: Range);
     get widthPx(): {
@@ -134,18 +136,18 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     });
     get preferredHeightUsed(): boolean;
     set preferredHeightUsed(value: boolean);
-    get alignment(): Alignment | undefined;
-    set alignment(value: Alignment | undefined);
-    get verticalAlignment(): VerticalAlignment | undefined;
-    set verticalAlignment(value: VerticalAlignment | undefined);
-    get alignmentInside(): Alignment | undefined;
-    set alignmentInside(value: Alignment | undefined);
-    get verticalAlignmentInside(): VerticalAlignment | undefined;
-    set verticalAlignmentInside(value: VerticalAlignment | undefined);
-    get stretchingStrengthX(): number | undefined;
-    set stretchingStrengthX(value: number | undefined);
-    get stretchingStrengthY(): number | undefined;
-    set stretchingStrengthY(value: number | undefined);
+    get horizontal(): PosH | undefined;
+    set horizontal(value: PosH | undefined);
+    get vertical(): PosV | undefined;
+    set vertical(value: PosV | undefined);
+    get contentHorizontal(): PosH | undefined;
+    set contentHorizontal(value: PosH | undefined);
+    get contentVertical(): PosV | undefined;
+    set contentVertical(value: PosV | undefined);
+    get stretchingStrengthH(): number | undefined;
+    set stretchingStrengthH(value: number | undefined);
+    get stretchingStrengthV(): number | undefined;
+    set stretchingStrengthV(value: number | undefined);
     get contentWrapping(): boolean;
     set contentWrapping(value: boolean);
     get overlayVisible(): boolean | undefined;
@@ -164,10 +166,10 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private static applyCoords;
     private static applyWidth;
     private static applyHeight;
-    private static applyAlignment;
-    private static applyVerticalAlignment;
-    private static applyStretchingStrengthX;
-    private static applyStretchingStrengthY;
+    private static applyHorizontal;
+    private static applyVertical;
+    private static applyStretchingStrengthH;
+    private static applyStretchingStrengthV;
     private static applyContentWrapping;
     private static applyOverlayVisible;
     static applySealed<T extends Element>(element: El<T, any>, value: Direction | undefined): void;

package/build/dist/source/html/El.js

@@ -11,7 +11,7 @@ import { RxNode, BaseDriver, Transaction, obs, ObservableObject } from "reactron
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
 export var ElKind;
 (function (ElKind) {
-    ElKind[ElKind["section"] = 0] = "section";
+    ElKind[ElKind["panel"] = 0] = "panel";
     ElKind[ElKind["table"] = 1] = "table";
     ElKind[ElKind["note"] = 2] = "note";
     ElKind[ElKind["group"] = 3] = "group";
@@ -20,20 +20,22 @@ export var ElKind;
     ElKind[ElKind["cursor"] = 6] = "cursor";
     ElKind[ElKind["native"] = 7] = "native";
 })(ElKind || (ElKind = {}));
-export var Alignment;
-(function (Alignment) {
-    Alignment[Alignment["left"] = 0] = "left";
-    Alignment[Alignment["center"] = 1] = "center";
-    Alignment[Alignment["right"] = 2] = "right";
-    Alignment[Alignment["stretch"] = 3] = "stretch";
-})(Alignment || (Alignment = {}));
-export var VerticalAlignment;
-(function (VerticalAlignment) {
-    VerticalAlignment[VerticalAlignment["top"] = 0] = "top";
-    VerticalAlignment[VerticalAlignment["center"] = 1] = "center";
-    VerticalAlignment[VerticalAlignment["bottom"] = 2] = "bottom";
-    VerticalAlignment[VerticalAlignment["stretch"] = 3] = "stretch";
-})(VerticalAlignment || (VerticalAlignment = {}));
+export var PosH;
+(function (PosH) {
+    PosH[PosH["left"] = 0] = "left";
+    PosH[PosH["center"] = 1] = "center";
+    PosH[PosH["right"] = 2] = "right";
+    PosH[PosH["stretch"] = 3] = "stretch";
+    PosH[PosH["stretchAndFix"] = 4] = "stretchAndFix";
+})(PosH || (PosH = {}));
+export var PosV;
+(function (PosV) {
+    PosV[PosV["top"] = 0] = "top";
+    PosV[PosV["center"] = 1] = "center";
+    PosV[PosV["bottom"] = 2] = "bottom";
+    PosV[PosV["stretch"] = 3] = "stretch";
+    PosV[PosV["stretchAndFix"] = 4] = "stretchAndFix";
+})(PosV || (PosV = {}));
 export var Direction;
 (function (Direction) {
     Direction[Direction["horizontal"] = 0] = "horizontal";
@@ -62,16 +64,16 @@ export class ElImpl {
         this.native = undefined;
         this.model = undefined;
         this._kind = ElKind.part;
-        this._area = undefined;
+        this._place = undefined;
         this._coords = UndefinedElCoords;
         this._width = Transaction.separate(() => new Size());
         this._height = Transaction.separate(() => new Size());
-        this._alignment = undefined;
-        this._verticalAlignment = undefined;
-        this._alignmentInside = undefined;
-        this._verticalAlignmentInside = undefined;
-        this._stretchingStrengthX = undefined;
-        this._stretchingStrengthY = undefined;
+        this._horizontal = undefined;
+        this._vertical = undefined;
+        this._contentHorizontal = undefined;
+        this._contentVertical = undefined;
+        this._stretchingStrengthH = undefined;
+        this._stretchingStrengthV = undefined;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
         this._sealed = undefined;
@@ -79,11 +81,11 @@ export class ElImpl {
         this._hasStylingPresets = false;
     }
     prepareForUpdate() {
-        this._area = undefined;
+        this._place = undefined;
         this._hasStylingPresets = false;
     }
     get index() { return this.node.seat.index; }
-    get isSection() { return this.kind === ElKind.section; }
+    get isPanel() { return this.kind === ElKind.panel; }
     get isTable() { return this.kind === ElKind.table; }
     get isAuxiliary() { return this.kind > ElKind.note; }
     get kind() { return this._kind; }
@@ -94,8 +96,8 @@ export class ElImpl {
             this._kind = value;
         }
     }
-    get area() { return this._area; }
-    set area(value) {
+    get place() { return this._place; }
+    set place(value) {
         var _a, _b;
         const node = this.node;
         const driver = node.driver;
@@ -112,7 +114,7 @@ export class ElImpl {
                     ElImpl.applyCoords(this, coords);
                 this._coords = coords;
             }
-            this._area = value !== null && value !== void 0 ? value : {};
+            this._place = value !== null && value !== void 0 ? value : {};
         }
         else
             this.rowBreak();
@@ -120,7 +122,7 @@ export class ElImpl {
     get width() { return this._width.raw; }
     set width(value) {
         const w = this._width.raw;
-        if (value.min !== w.min || value.max !== w.max) {
+        if (value.min !== w.min || value.max !== w.max || value.preferred !== undefined) {
             ElImpl.applyWidth(this, value);
             this._width.raw = value;
             this._width.preferredUsed = false;
@@ -143,7 +145,7 @@ export class ElImpl {
     get height() { return this._height.raw; }
     set height(value) {
         const h = this._height.raw;
-        if (value.min !== h.min || value.max !== h.max) {
+        if (value.min !== h.min || value.max !== h.max || value.preferred !== undefined) {
             ElImpl.applyHeight(this, value);
             this._height.raw = value;
             this._height.preferredUsed = false;
@@ -163,52 +165,52 @@ export class ElImpl {
     set preferredHeightUsed(value) {
         this._height.preferredUsed = value;
     }
-    get alignment() { return this._alignment; }
-    set alignment(value) {
-        const existing = this._alignment;
+    get horizontal() { return this._horizontal; }
+    set horizontal(value) {
+        const existing = this._horizontal;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, existing, value, this._alignmentInside, this._alignmentInside, this._stretchingStrengthX);
-            this._alignment = value;
+            ElImpl.applyHorizontal(this, existing, value, this._contentHorizontal, this._contentHorizontal, this._stretchingStrengthH);
+            this._horizontal = value;
         }
     }
-    get verticalAlignment() { return this._verticalAlignment; }
-    set verticalAlignment(value) {
-        const existing = this._verticalAlignment;
+    get vertical() { return this._vertical; }
+    set vertical(value) {
+        const existing = this._vertical;
         if (value !== existing) {
-            ElImpl.applyVerticalAlignment(this, existing, value, this._verticalAlignmentInside, this._verticalAlignmentInside, this._stretchingStrengthY);
-            this._verticalAlignment = value;
+            ElImpl.applyVertical(this, existing, value, this._contentVertical, this._contentVertical, this._stretchingStrengthV);
+            this._vertical = value;
         }
     }
-    get alignmentInside() { return this._alignmentInside; }
-    set alignmentInside(value) {
-        const existing = this._alignmentInside;
+    get contentHorizontal() { return this._contentHorizontal; }
+    set contentHorizontal(value) {
+        const existing = this._contentHorizontal;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX);
-            this._alignmentInside = value;
+            ElImpl.applyHorizontal(this, this._horizontal, this._horizontal, existing, value, this._stretchingStrengthH);
+            this._contentHorizontal = value;
         }
     }
-    get verticalAlignmentInside() { return this._verticalAlignmentInside; }
-    set verticalAlignmentInside(value) {
-        const existing = this._verticalAlignmentInside;
+    get contentVertical() { return this._contentVertical; }
+    set contentVertical(value) {
+        const existing = this._contentVertical;
         if (value !== existing) {
-            ElImpl.applyVerticalAlignment(this, this._verticalAlignment, this._verticalAlignment, existing, value, this._stretchingStrengthY);
-            this._verticalAlignmentInside = value;
+            ElImpl.applyVertical(this, this._vertical, this._vertical, existing, value, this._stretchingStrengthV);
+            this._contentVertical = value;
         }
     }
-    get stretchingStrengthX() { return this._stretchingStrengthX; }
-    set stretchingStrengthX(value) {
-        const existing = this._stretchingStrengthX;
+    get stretchingStrengthH() { return this._stretchingStrengthH; }
+    set stretchingStrengthH(value) {
+        const existing = this._stretchingStrengthH;
         if (value !== existing) {
-            ElImpl.applyStretchingStrengthX(this, existing, value);
-            this._stretchingStrengthX = value;
+            ElImpl.applyStretchingStrengthH(this, existing, value);
+            this._stretchingStrengthH = value;
         }
     }
-    get stretchingStrengthY() { return this._stretchingStrengthY; }
-    set stretchingStrengthY(value) {
-        const existing = this._stretchingStrengthY;
+    get stretchingStrengthV() { return this._stretchingStrengthV; }
+    set stretchingStrengthV(value) {
+        const existing = this._stretchingStrengthV;
         if (value !== existing) {
-            ElImpl.applyStretchingStrengthY(this, existing, value);
-            this._stretchingStrengthY = value;
+            ElImpl.applyStretchingStrengthV(this, existing, value);
+            this._stretchingStrengthV = value;
         }
     }
     get contentWrapping() { return this._contentWrapping; }
@@ -310,10 +312,10 @@ export class ElImpl {
             s.maxHeight = (_b = value.max) !== null && _b !== void 0 ? _b : "";
         }
     }
-    static applyAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
+    static applyHorizontal(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
         var _a, _b;
-        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Alignment.left);
-        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Alignment.left);
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = PosH.left);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = PosH.left);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
         newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
@@ -326,8 +328,8 @@ export class ElImpl {
         }
         let isEffectiveAlignerX = false;
         if (hostLayout) {
-            const isAligner = newPrimary === Alignment.center ||
-                newPrimary === Alignment.right;
+            const isAligner = newPrimary === PosH.center ||
+                newPrimary === PosH.right;
             isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
                 element.index <= hostLayout.alignerX.index);
             if (hostLayout.alignerX === element) {
@@ -347,63 +349,65 @@ export class ElImpl {
         }
         switch (newPrimary) {
             default:
-            case Alignment.left:
+            case PosH.left:
                 css.justifySelf = "start";
-                if (oldPrimary === Alignment.center) {
+                if (oldPrimary === PosH.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (oldPrimary === Alignment.right)
+                else if (oldPrimary === PosH.right)
                     css.marginLeft = "";
                 break;
-            case Alignment.center:
+            case PosH.center:
                 css.justifySelf = "center";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
                 css.marginRight = "auto";
                 break;
-            case Alignment.right:
+            case PosH.right:
                 css.justifySelf = "end";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
-                if (oldPrimary === Alignment.center)
+                if (oldPrimary === PosH.center)
                     css.marginRight = "";
                 break;
-            case Alignment.stretch:
+            case PosH.stretch:
+            case PosH.stretchAndFix:
                 css.justifySelf = "stretch";
-                if (oldPrimary === Alignment.center) {
+                if (oldPrimary === PosH.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (oldPrimary === Alignment.right)
+                else if (oldPrimary === PosH.right)
                     css.marginLeft = "";
                 break;
         }
         switch (newInside) {
             default:
-            case Alignment.left:
+            case PosH.left:
                 css.alignItems = "start";
                 css.textAlign = "left";
                 break;
-            case Alignment.center:
+            case PosH.center:
                 css.alignItems = "center";
                 css.textAlign = "center";
                 break;
-            case Alignment.right:
+            case PosH.right:
                 css.alignItems = "end";
                 css.textAlign = "right";
                 break;
-            case Alignment.stretch:
+            case PosH.stretch:
+            case PosH.stretchAndFix:
                 css.alignItems = "stretch";
                 css.textAlign = "justify";
                 break;
         }
-        if (newPrimary === Alignment.stretch && strength === undefined)
-            ElImpl.applyStretchingStrengthX(element, 0, 1);
+        if (newPrimary >= PosH.stretch && strength === undefined)
+            ElImpl.applyStretchingStrengthH(element, 0, 1);
     }
-    static applyVerticalAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
-        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = VerticalAlignment.top);
-        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = VerticalAlignment.top);
+    static applyVertical(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = PosV.top);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = PosV.top);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
         newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
@@ -418,10 +422,10 @@ export class ElImpl {
         }
         let isEffectiveAlignerY = false;
         if (hostLayout) {
-            const isAligner = newPrimary === VerticalAlignment.center ||
-                newPrimary === VerticalAlignment.bottom;
+            const isAligner = newPrimary === PosV.center ||
+                newPrimary === PosV.bottom;
             isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
-                hostLayout.alignerY.verticalAlignment !== VerticalAlignment.center);
+                hostLayout.alignerY.vertical !== PosV.center);
             if (hostLayout.alignerY === element) {
                 if (!isEffectiveAlignerY) {
                     hostCss.marginTop = "";
@@ -436,43 +440,45 @@ export class ElImpl {
         }
         switch (newPrimary) {
             default:
-            case VerticalAlignment.top:
+            case PosV.top:
                 css.alignSelf = "start";
                 break;
-            case VerticalAlignment.center:
+            case PosV.center:
                 css.alignSelf = "center";
                 break;
-            case VerticalAlignment.bottom:
+            case PosV.bottom:
                 css.alignSelf = "end";
                 break;
-            case VerticalAlignment.stretch:
+            case PosV.stretch:
+            case PosV.stretchAndFix:
                 css.alignSelf = "stretch";
                 break;
         }
         switch (newInside) {
             default:
-            case VerticalAlignment.top:
+            case PosV.top:
                 css.justifyContent = "start";
                 break;
-            case VerticalAlignment.center:
+            case PosV.center:
                 css.justifyContent = "center";
                 break;
-            case VerticalAlignment.bottom:
+            case PosV.bottom:
                 css.justifyContent = "end";
                 break;
-            case VerticalAlignment.stretch:
+            case PosV.stretch:
+            case PosV.stretchAndFix:
                 css.justifyContent = "stretch";
                 break;
         }
-        if (newPrimary === VerticalAlignment.stretch && strength === undefined)
-            ElImpl.applyStretchingStrengthY(element, 0, 1);
+        if (newPrimary >= PosV.stretch && strength === undefined)
+            ElImpl.applyStretchingStrengthV(element, 0, 1);
     }
-    static applyStretchingStrengthX(element, existing, value) {
+    static applyStretchingStrengthH(element, existing, value) {
         const s = element.style;
         const host = element.node.host;
         if (host.driver.isPartition) {
             const hostEl = host.element;
-            hostEl._stretchingStrengthX = value;
+            hostEl._stretchingStrengthH = value;
             existing !== null && existing !== void 0 ? existing : (existing = 0);
             value !== null && value !== void 0 ? value : (value = 0);
         }
@@ -486,12 +492,12 @@ export class ElImpl {
             s.flexBasis = "";
         }
     }
-    static applyStretchingStrengthY(element, existing, value) {
+    static applyStretchingStrengthV(element, existing, value) {
         var _a;
         const host = element.node.host;
         if (host.driver.isPartition) {
             const hostElement = host.element;
-            hostElement._stretchingStrengthY = value;
+            hostElement._stretchingStrengthV = value;
             let delta = 0;
             existing !== null && existing !== void 0 ? existing : (existing = 0);
             value !== null && value !== void 0 ? value : (value = 0);
@@ -504,7 +510,7 @@ export class ElImpl {
                     delta = -1;
             }
             if (delta !== 0) {
-                const count = (_a = hostElement._stretchingStrengthY) !== null && _a !== void 0 ? _a : 0 + delta;
+                const count = (_a = hostElement._stretchingStrengthV) !== null && _a !== void 0 ? _a : 0 + delta;
                 const s = hostElement.style;
                 if (count === 1)
                     s.flexGrow = `${value}`;
@@ -640,11 +646,11 @@ var ElLayoutInfoFlags;
 })(ElLayoutInfoFlags || (ElLayoutInfoFlags = {}));
 const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
 export const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, offsetXpx: 0, offsetYpx: 0, contentSizeXpx: 0, contentSizeYpx: 0, borderSizeXpx: 0, borderSizeYpx: 0, isConstrained: false }));
-function getElCoordsAndAdjustLayoutInfo(isRegularElement, area, maxX, maxY, prevElLayoutInfo, layoutInfo) {
+function getElCoordsAndAdjustLayoutInfo(isRegularElement, place, maxX, maxY, prevElLayoutInfo, layoutInfo) {
     var _a, _b;
     let result;
-    if (typeof (area) === "string") {
-        result = parseElCoords(area, { x1: 0, y1: 0, x2: 0, y2: 0 });
+    if (typeof (place) === "string") {
+        result = parseElCoords(place, { x1: 0, y1: 0, x2: 0, y2: 0 });
         absolutizeElCoords(result, prevElLayoutInfo.x, prevElLayoutInfo.y, maxX || Infinity, maxY || Infinity, result);
         if (layoutInfo) {
             layoutInfo.x = isRegularElement ? result.x2 + 1 : result.x1;
@@ -655,9 +661,9 @@ function getElCoordsAndAdjustLayoutInfo(isRegularElement, area, maxX, maxY, prev
     else if (layoutInfo) {
         let dx;
         let dy;
-        if (area) {
-            dx = (_a = area.cellsOverWidth) !== null && _a !== void 0 ? _a : 1;
-            dy = (_b = area.cellsOverHeight) !== null && _b !== void 0 ? _b : 1;
+        if (place) {
+            dx = (_a = place.cellsOverWidth) !== null && _a !== void 0 ? _a : 1;
+            dy = (_b = place.cellsOverHeight) !== null && _b !== void 0 ? _b : 1;
         }
         else
             dx = dy = 1;
@@ -717,15 +723,15 @@ function getElCoordsAndAdjustLayoutInfo(isRegularElement, area, maxX, maxY, prev
         throw new Error("relative layout requires sequential children");
     return result;
 }
-function absolutizeElCoords(area, cursorX, cursorY, maxWidth, maxHeight, result) {
-    const x1 = absolutizePosition(area.x1, cursorX, maxWidth);
-    const x2 = absolutizePosition(area.x2, x1, maxWidth);
+function absolutizeElCoords(place, cursorX, cursorY, maxWidth, maxHeight, result) {
+    const x1 = absolutizePosition(place.x1, cursorX, maxWidth);
+    const x2 = absolutizePosition(place.x2, x1, maxWidth);
     if (x1 <= x2)
         result.x1 = x1, result.x2 = x2;
     else
         result.x1 = x2, result.x2 = x1;
-    const y1 = absolutizePosition(area.y1, cursorY, maxHeight);
-    const y2 = absolutizePosition(area.y2, y1, maxHeight);
+    const y1 = absolutizePosition(place.y1, cursorY, maxHeight);
+    const y2 = absolutizePosition(place.y2, y1, maxHeight);
     if (y1 <= y2)
         result.y1 = y1, result.y2 = y2;
     else

package/build/dist/source/html/Elements.d.ts

@@ -1,24 +1,24 @@
 import { RxNodeDecl, RxNodeDriver, RxNode, Delegate, MergedItem } from "reactronic";
-import { CursorCommandDriver, El, ElArea } from "./El.js";
+import { CursorCommandDriver, El, ElPlace } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export declare function Section<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
 export declare function Splitter<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function rowBreak(shiftCursorDown?: number): void;
 export declare function declareSplitter<T>(index: number, splitViewNode: RxNode<El<T>>): RxNode<El<HTMLElement>>;
-export declare function cursor(areaParams: ElArea): void;
+export declare function cursor(areaParams: ElPlace): void;
 export declare function Note(content: string, formatted?: boolean, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Handling<M = unknown>(onChange: Delegate<El<void, M>>): RxNode<El<void, M>>;
 export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
-export declare class SectionDriver<T extends HTMLElement> extends HtmlDriver<T> {
+export declare class PanelDriver<T extends HTMLElement> extends HtmlDriver<T> {
     update(node: RxNode<El<T>>): void | Promise<void>;
     child(ownerNode: RxNode<El<T, any>>, childDriver: RxNodeDriver<any>, childDeclaration?: RxNodeDecl<any> | undefined, childPreset?: RxNodeDecl<any> | undefined): MergedItem<RxNode> | undefined;
 }
 export declare function isSplitViewPartition(childDriver: RxNodeDriver): boolean;
 export declare const Drivers: {
-    section: SectionDriver<HTMLElement>;
+    panel: PanelDriver<HTMLElement>;
     table: HtmlDriver<HTMLElement, any>;
     note: HtmlDriver<HTMLElement, any>;
     group: HtmlDriver<HTMLElement, any>;

package/build/dist/source/html/Elements.js

@@ -4,8 +4,8 @@ import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, r
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 import { clamp } from "./ElUtils.js";
-export function Section(declaration, preset) {
-    return RxNode.declare(Drivers.section, declaration, preset);
+export function Panel(declaration, preset) {
+    return RxNode.declare(Drivers.panel, declaration, preset);
 }
 export function Table(declaration, preset) {
     return RxNode.declare(Drivers.table, declaration, preset);
@@ -85,7 +85,7 @@ export function declareSplitter(index, splitViewNode) {
 export function cursor(areaParams) {
     RxNode.declare(Drivers.cursor, {
         onChange: el => {
-            el.area = areaParams;
+            el.place = areaParams;
         },
     });
 }
@@ -108,7 +108,7 @@ export function Handling(onChange) {
 export function SyntheticElement(declaration, preset) {
     return RxNode.declare(Drivers.synthetic, declaration, preset);
 }
-export class SectionDriver extends HtmlDriver {
+export class PanelDriver extends HtmlDriver {
     update(node) {
         rowBreak();
         const result = super.update(node);
@@ -157,7 +157,7 @@ export class SectionDriver extends HtmlDriver {
         if (el.splitView !== undefined) {
             SyntheticElement({
                 mode: Mode.independentUpdate,
-                triggers: { count: el.node.stamp },
+                triggers: { stamp: el.node.stamp },
                 onChange: () => {
                     const native = el.native;
                     const isHorizontal = el.splitView === Direction.horizontal;
@@ -261,7 +261,7 @@ function overrideMethod(declaration, method, func) {
         : (el, base) => { base(); func(el); };
 }
 export const Drivers = {
-    section: new SectionDriver(Constants.element, false, el => el.kind = ElKind.section),
+    panel: new PanelDriver(Constants.element, false, el => el.kind = ElKind.panel),
     table: new HtmlDriver(Constants.element, false, el => el.kind = ElKind.table),
     note: new HtmlDriver(Constants.element, false, el => el.kind = ElKind.note),
     group: new HtmlDriver(Constants.group, false, el => el.kind = ElKind.group),

package/build/dist/source/html/Handlers.d.ts

@@ -1,6 +1,7 @@
 import { ToggleRef } from "reactronic";
 import { FocusModel } from "./sensors/FocusSensor.js";
 import { ResizedElement } from "./sensors/ResizeSensor.js";
-export declare function OnClick(target: HTMLElement, action: (() => void) | ToggleRef | undefined, key?: string): void;
+import { PointerSensor } from "./sensors/PointerSensor.js";
+export declare function OnClick(target: HTMLElement, action: ((pointer: PointerSensor) => void) | ToggleRef | undefined, key?: string): void;
 export declare function OnResize(target: HTMLElement, action: ((element: ResizedElement) => void) | undefined, key?: string): void;
 export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model: FocusModel) => void) | undefined, key?: string): void;

package/build/dist/source/html/Handlers.js

@@ -8,9 +8,9 @@ export function OnClick(target, action, key) {
             triggers: { target },
             onChange: el => {
                 const pointer = target.sensors.pointer;
-                if (pointer.clicked) {
+                if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
                     if (action instanceof Function) {
-                        unobs(() => action());
+                        unobs(() => action(pointer));
                     }
                     else if (action instanceof ToggleRef) {
                         unobs(() => action.toggle());
@@ -44,7 +44,7 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
             el.node.configureReactronic({ throttling: 0 });
         },
         onChange: el => {
-            if (switchEditMode === undefined && !target.hasAttribute("tabindex"))
+            if (switchEditMode === undefined && !(target instanceof HTMLInputElement || target.hasAttribute("tabindex")))
                 console.warn(`"${key !== null && key !== void 0 ? key : "noname"}" element must have "tabindex" attribute set in order to be focusable`);
             if (switchEditMode !== undefined) {
                 switchEditMode(model);

package/build/dist/source/html/HtmlDriver.js

@@ -57,10 +57,10 @@ export class WebDriver extends ElDriver {
         if (element instanceof ElImpl)
             element.prepareForUpdate();
         const result = super.update(node);
-        if (element.area === undefined) {
+        if (element.place === undefined) {
             const oel = node.owner.element;
             if (oel instanceof ElImpl && oel.isTable)
-                element.area = undefined;
+                element.place = undefined;
         }
         if (gBlinkingEffectMarker)
             blink(element.native, RxNode.currentUpdatePriority, node.stamp);

package/build/dist/source/html/HtmlElements.js

@@ -2,7 +2,7 @@ import { RxNode } from "reactronic";
 import { ElKind } from "./El.js";
 import { StaticDriver, HtmlDriver, SvgDriver } from "./HtmlDriver.js";
 export function Page(declaration, preset) {
-    const driver = new StaticDriver(global.document.body, "Page", false, el => el.kind = ElKind.section);
+    const driver = new StaticDriver(global.document.body, "Page", false, el => el.kind = ElKind.panel);
     return RxNode.declare(driver, declaration, preset);
 }
 export function A(declaration, preset) { return RxNode.declare(HtmlTags.a, declaration, preset); }

package/build/dist/source/html/SplitViewMath.js

@@ -181,9 +181,8 @@ export function getPrioritiesForSizeChanging(isHorizontal, children, indexes) {
     const manuallyResizable = [];
     const items = Array.from(children.items()).filter(x => isSplitViewPartition(x.instance.driver));
     for (let i = items.length - 1; i >= 0; i--) {
-        const item = items[i];
-        const el = item.instance.element;
-        const strength = (_a = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+        const el = items[i].instance.element;
+        const strength = (_a = (isHorizontal ? el.stretchingStrengthH : el.stretchingStrengthV)) !== null && _a !== void 0 ? _a : 1;
         if (!indexes.includes(i)) {
             if (strength > 0)
                 resizable.push(1 << i);
@@ -191,15 +190,20 @@ export function getPrioritiesForSizeChanging(isHorizontal, children, indexes) {
                 manuallyResizable.push(1 << i);
         }
     }
+    let r = 0;
+    let mr = 0;
     for (const i of indexes) {
-        const item = items[i];
-        const el = item.instance.element;
-        const strength = (_b = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _b !== void 0 ? _b : 1;
+        const el = items[i].instance.element;
+        const strength = (_b = (isHorizontal ? el.stretchingStrengthH : el.stretchingStrengthV)) !== null && _b !== void 0 ? _b : 1;
         if (strength > 0)
-            resizable.push(1 << i);
+            r |= 1 << i;
         else
-            manuallyResizable.push(1 << i);
+            mr |= 1 << i;
     }
+    if (r > 0)
+        resizable.push(r);
+    if (mr > 0)
+        manuallyResizable.push(mr);
     return { resizable, manuallyResizable };
 }
 export function getPrioritiesForEmptySpaceDistribution(isHorizontal, children) {
@@ -210,7 +214,7 @@ export function getPrioritiesForEmptySpaceDistribution(isHorizontal, children) {
     for (const child of children.items()) {
         if (isSplitViewPartition(child.instance.driver)) {
             const el = child.instance.element;
-            const strength = (_a = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+            const strength = (_a = (isHorizontal ? el.stretchingStrengthH : el.stretchingStrengthV)) !== null && _a !== void 0 ? _a : 1;
             if (strength > 0)
                 r |= 1 << i;
             else
@@ -224,7 +228,7 @@ function getFractionCount(isHorizontal, children, vector, index, force = false)
     var _a;
     let result = 0;
     for (const i of indexes(vector, index)) {
-        const growth = (_a = (isHorizontal ? children[i].element.stretchingStrengthX : children[i].element.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+        const growth = (_a = (isHorizontal ? children[i].element.stretchingStrengthH : children[i].element.stretchingStrengthV)) !== null && _a !== void 0 ? _a : 1;
         result += growth > 0 ? growth : (force ? 1 : 0);
     }
     return result;
@@ -269,7 +273,7 @@ function distribute(sign, deltaPx, index, priorities, sizesPx, isHorizontal, for
             for (const i of indexes(vector, sign * index)) {
                 const child = sizesPx[i].node;
                 const initialSizePx = sizesPx[i].sizePx;
-                const strength = isHorizontal ? ((_a = child.element.stretchingStrengthX) !== null && _a !== void 0 ? _a : 1) : ((_b = child.element.stretchingStrengthY) !== null && _b !== void 0 ? _b : 1);
+                const strength = isHorizontal ? ((_a = child.element.stretchingStrengthH) !== null && _a !== void 0 ? _a : 1) : ((_b = child.element.stretchingStrengthV) !== null && _b !== void 0 ? _b : 1);
                 const growth = strength > 0 ? strength : (force ? 1 : 0);
                 const newSizePx = initialSizePx + sign * (growth * fractionSizePx);
                 const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.272",
+  "version": "0.24.274",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
   "dependencies": {
-    "reactronic": "^0.24.270"
+    "reactronic": "^0.24.271"
   },
   "devDependencies": {
     "@types/node": "20.11.17",