verstak 0.24.271 → 0.24.272

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

@@ -16,7 +16,8 @@ export type El<T = any, M = any> = {
     stretchingStrengthY: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
-    splitView: SplitView | undefined;
+    sealed: Direction | undefined;
+    splitView: Direction | undefined;
     widthPx: {
         minPx: number;
         maxPx: number;
@@ -69,7 +70,7 @@ export type ElArea = undefined | string | {
     cellsOverWidth?: number;
     cellsOverHeight?: number;
 };
-export declare enum SplitView {
+export declare enum Direction {
     horizontal = 0,
     vertical = 1
 }
@@ -96,6 +97,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _stretchingStrengthY;
     private _contentWrapping;
     private _overlayVisible;
+    private _sealed;
     private _splitView;
     private _hasStylingPresets;
     constructor(node: RxNode<El<T, M>>);
@@ -148,8 +150,10 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     set contentWrapping(value: boolean);
     get overlayVisible(): boolean | undefined;
     set overlayVisible(value: boolean | undefined);
-    get splitView(): SplitView | undefined;
-    set splitView(value: SplitView | undefined);
+    get sealed(): Direction | undefined;
+    set sealed(value: Direction | undefined);
+    get splitView(): Direction | undefined;
+    set splitView(value: Direction | undefined);
     get partitionSizeInSplitViewPx(): number;
     get style(): CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
@@ -166,7 +170,8 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private static applyStretchingStrengthY;
     private static applyContentWrapping;
     private static applyOverlayVisible;
-    static applySplitView<T extends Element>(element: El<T, any>, value: SplitView | undefined): void;
+    static applySealed<T extends Element>(element: El<T, any>, value: Direction | undefined): void;
+    static applySplitView<T extends Element>(element: El<T, any>, value: Direction | undefined): void;
     private static applyStylingPreset;
 }
 export declare class ElLayoutInfo {

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

@@ -34,11 +34,11 @@ export var VerticalAlignment;
     VerticalAlignment[VerticalAlignment["bottom"] = 2] = "bottom";
     VerticalAlignment[VerticalAlignment["stretch"] = 3] = "stretch";
 })(VerticalAlignment || (VerticalAlignment = {}));
-export var SplitView;
-(function (SplitView) {
-    SplitView[SplitView["horizontal"] = 0] = "horizontal";
-    SplitView[SplitView["vertical"] = 1] = "vertical";
-})(SplitView || (SplitView = {}));
+export var Direction;
+(function (Direction) {
+    Direction[Direction["horizontal"] = 0] = "horizontal";
+    Direction[Direction["vertical"] = 1] = "vertical";
+})(Direction || (Direction = {}));
 class Size extends ObservableObject {
     constructor() {
         super();
@@ -74,6 +74,7 @@ export class ElImpl {
         this._stretchingStrengthY = undefined;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
+        this._sealed = undefined;
         this._splitView = undefined;
         this._hasStylingPresets = false;
     }
@@ -224,6 +225,13 @@ export class ElImpl {
             this._overlayVisible = value;
         }
     }
+    get sealed() { return this._sealed; }
+    set sealed(value) {
+        if (value !== this._sealed) {
+            ElImpl.applySealed(this, value);
+            this._sealed = value;
+        }
+    }
     get splitView() { return this._splitView; }
     set splitView(value) {
         if (value !== this._splitView) {
@@ -282,7 +290,7 @@ export class ElImpl {
         const node = element.node;
         const owner = node.owner;
         const ownerEl = owner.element;
-        if (ownerEl.splitView === SplitView.horizontal) {
+        if (ownerEl.splitView === Direction.horizontal) {
         }
         else {
             s.minWidth = (_a = value.min) !== null && _a !== void 0 ? _a : "";
@@ -295,7 +303,7 @@ export class ElImpl {
         const node = element.node;
         const owner = node.owner;
         const ownerEl = owner.element;
-        if (ownerEl.splitView === SplitView.vertical) {
+        if (ownerEl.splitView === Direction.vertical) {
         }
         else {
             s.minHeight = (_a = value.min) !== null && _a !== void 0 ? _a : "";
@@ -303,7 +311,7 @@ export class ElImpl {
         }
     }
     static applyAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
-        var _a;
+        var _a, _b;
         oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Alignment.left);
         newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Alignment.left);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
@@ -330,7 +338,7 @@ export class ElImpl {
             }
             else {
                 if (isEffectiveAlignerX) {
-                    const existingAlignerCss = (_a = hostLayout.alignerX) === null || _a === void 0 ? void 0 : _a.style;
+                    const existingAlignerCss = (_b = (_a = hostLayout.alignerX) === null || _a === void 0 ? void 0 : _a.native) === null || _b === void 0 ? void 0 : _b.style;
                     if (existingAlignerCss)
                         existingAlignerCss.marginLeft = "";
                     hostLayout.alignerX = element;
@@ -460,30 +468,13 @@ export class ElImpl {
             ElImpl.applyStretchingStrengthY(element, 0, 1);
     }
     static applyStretchingStrengthX(element, existing, value) {
-        var _a;
         const s = element.style;
         const host = element.node.host;
-        if (host.driver.isPartition && element.splitView === undefined) {
+        if (host.driver.isPartition) {
             const hostEl = host.element;
             hostEl._stretchingStrengthX = value;
-            let delta = 0;
             existing !== null && existing !== void 0 ? existing : (existing = 0);
             value !== null && value !== void 0 ? value : (value = 0);
-            if (existing === 0) {
-                if (value !== 0)
-                    delta = 1;
-            }
-            else if (value === 0) {
-                if (existing !== 0)
-                    delta = -1;
-            }
-            if (delta !== 0) {
-                const count = (_a = hostEl._stretchingStrengthX) !== null && _a !== void 0 ? _a : 0 + delta;
-                if (count === 1)
-                    s.alignSelf = "stretch";
-                else if (count === 0)
-                    s.alignSelf = "";
-            }
         }
         value !== null && value !== void 0 ? value : (value = 0);
         if (value > 0) {
@@ -498,7 +489,7 @@ export class ElImpl {
     static applyStretchingStrengthY(element, existing, value) {
         var _a;
         const host = element.node.host;
-        if (host.driver.isPartition && element.splitView === undefined) {
+        if (host.driver.isPartition) {
             const hostElement = host.element;
             hostElement._stretchingStrengthY = value;
             let delta = 0;
@@ -566,11 +557,17 @@ export class ElImpl {
                 s.position = s.display = s.left = s.right = s.top = s.bottom = "";
         }
     }
+    static applySealed(element, value) {
+        const e = element.native;
+        if (e instanceof HTMLElement) {
+            Transaction.separate(() => e.sensors.resize.observeResizing(element, value !== undefined));
+        }
+    }
     static applySplitView(element, value) {
         const e = element.native;
         if (e instanceof HTMLElement) {
+            element.sealed = value;
             e.style.position = value !== undefined ? "relative" : "";
-            Transaction.separate(() => e.sensors.resize.observeResizing(element, value !== undefined));
         }
     }
     static applyStylingPreset(element, secondary, styleName, enabled) {
@@ -812,7 +809,7 @@ const VerstakDriversByLayout = [
         const owner = el.node.owner.element;
         s.position = "absolute";
         s.zIndex = `${Number.MAX_SAFE_INTEGER}`;
-        if (owner.splitView === SplitView.horizontal) {
+        if (owner.splitView === Direction.horizontal) {
             s.width = "4px";
             s.marginLeft = "-2px";
             s.top = s.bottom = "0";

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

@@ -1,8 +1,22 @@
 import { ElCoords } from "./El.js";
 export declare function objectHasMember<T>(obj: any, member: string): obj is T;
 export declare function clamp(value: number, min: number, max: number): number;
+export declare function parseLetters(value: string): number;
 export declare function emitLetters(n: number): string;
+export declare function parseSignedLetters(letters: string): number;
+export declare function emitSignedLetters(num: number): string;
+export declare function parseSignedNumber(number: string): number;
+export declare function emitSignedNumber(num: number): string;
+export declare function parseSign(value: string): {
+    sign: number;
+    value: string;
+};
+export declare function emitSign(sign: number, num: number | string): string;
 export declare function parseElCoords(text: string, result: ElCoords): ElCoords;
 export declare function emitElCoords(value: ElCoords): string;
 export declare function emitCellPosition(x: number, y: number): string;
 export declare function equalElCoords(a: ElCoords, b: ElCoords): boolean;
+export declare function isWhitespace(char: number): boolean;
+export declare function isDigit(input: number, index?: number): boolean;
+export declare function isCapitalLetter(ch: number): boolean;
+export declare function isLowercaseLetter(ch: number): boolean;

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

@@ -4,6 +4,9 @@ export function objectHasMember(obj, member) {
 export function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
 }
+export function parseLetters(value) {
+    return value.split("").reduce((p, c) => p * 26 + parseInt(c, 36) - 9, 0);
+}
 export function emitLetters(n) {
     if (n < 0)
         throw new Error(`emitLetters: argument (${n}) should not be negative or zero`);
@@ -15,6 +18,32 @@ export function emitLetters(n) {
     }
     return result;
 }
+export function parseSignedLetters(letters) {
+    const { sign, value } = parseSign(letters);
+    return sign * parseLetters(value);
+}
+export function emitSignedLetters(num) {
+    const letters = emitLetters(Math.abs(num) - 1);
+    return emitSign(Math.sign(num), letters);
+}
+export function parseSignedNumber(number) {
+    const { sign, value } = parseSign(number);
+    return sign * Number.parseInt(value);
+}
+export function emitSignedNumber(num) {
+    return emitSign(Math.sign(num), Math.abs(num));
+}
+export function parseSign(value) {
+    const openBraceIndex = value.indexOf("(");
+    const closeBraceIndex = value.indexOf(")");
+    const sign = ~openBraceIndex && ~closeBraceIndex ? -1 : 1;
+    if (sign < 0)
+        value = value.substring(openBraceIndex + 1, closeBraceIndex);
+    return { sign, value };
+}
+export function emitSign(sign, num) {
+    return sign < 0 ? `(${num})` : `${num}`;
+}
 export function parseElCoords(text, result) {
     let i = 0;
     let value = 0;
@@ -26,14 +55,14 @@ export function parseElCoords(text, result) {
             if (component % 2 === 0)
                 value = value * 26 + charCode - 64;
             else
-                console.error(`Digit is expected, but letter ('${text[i]}') was read`);
+                console.error(`Digit is expected, but letter ("${text[i]}") was read`);
         }
         else if (isLowercaseLetter(charCode)) {
             if (component % 2 === 0) {
                 value = value * 26 + charCode - 96;
             }
             else {
-                console.error(`Digit is expected, but letter ('${text[i]}') was read`);
+                console.error(`Digit is expected, but letter ("${text[i]}") was read`);
             }
         }
         else if (isDigit(charCode)) {
@@ -87,18 +116,18 @@ export function parseElCoords(text, result) {
         }
         else if (charCode === 58) {
             if (sign < 0)
-                console.error(`area '${text}': e1`);
+                console.error(`area "${text}": e1`);
             if (component === 1)
                 result.y1 = value * sign;
             else if (component !== 2)
-                console.error(`area '${text}': [e2] component = ${component}`);
+                console.error(`area "${text}": [e2] component = ${component}`);
             component = 2;
             value = 0;
         }
         else if (isWhitespace(charCode)) {
         }
         else {
-            console.error(`Unknown symbol '${text[i]}' in '${text}'`);
+            console.error(`Unknown symbol "${text[i]}" in "${text}"`);
         }
         i++;
     }
@@ -168,15 +197,15 @@ export function emitCellPosition(x, y) {
 export function equalElCoords(a, b) {
     return a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y1 === b.y2;
 }
-function isWhitespace(char) {
+export function isWhitespace(char) {
     return char === 32 || (char >= 9 && char <= 13) || char === 133 || char === 160;
 }
-function isDigit(input, index) {
+export function isDigit(input, index) {
     return 48 <= input && input <= 57;
 }
-function isCapitalLetter(ch) {
+export function isCapitalLetter(ch) {
     return 65 <= ch && ch <= 90;
 }
-function isLowercaseLetter(ch) {
+export function isLowercaseLetter(ch) {
     return 97 <= ch && ch <= 122;
 }

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

@@ -1,5 +1,5 @@
 import { RxNode, Mode, unobs } from "reactronic";
-import { Constants, CursorCommandDriver, ElKind, ElDriver, SplitView, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
+import { Constants, CursorCommandDriver, ElKind, ElDriver, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
 import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout, relayoutUsingSplitter } from "./SplitViewMath.js";
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
@@ -49,7 +49,7 @@ export function declareSplitter(index, splitViewNode) {
                         if (pointer.draggingOver) {
                             pointer.dropAllowed = true;
                             const initialSizesPx = pointer.getData();
-                            const deltaPx = Math.floor(splitViewNode.element.splitView === SplitView.horizontal
+                            const deltaPx = Math.floor(splitViewNode.element.splitView === Direction.horizontal
                                 ? pointer.positionX - pointer.startX : pointer.positionY - pointer.startY);
                             const clonedSizesPx = [];
                             for (const item of initialSizesPx) {
@@ -113,11 +113,12 @@ export class SectionDriver extends HtmlDriver {
         rowBreak();
         const result = super.update(node);
         const el = node.element;
-        if (el.splitView !== undefined) {
+        if (el.sealed !== undefined) {
             Handling(h => {
                 var _a, _b;
                 const native = el.native;
                 const resize = native.sensors.resize;
+                const isHorizontal = el.sealed === Direction.horizontal;
                 for (const x of resize.resizedElements) {
                     if (el.layoutInfo === undefined)
                         el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
@@ -131,7 +132,6 @@ export class SectionDriver extends HtmlDriver {
                     el.layoutInfo.contentSizeYpx = containerSizeYpx;
                     el.layoutInfo.borderSizeXpx = x.borderBoxSize[0].inlineSize;
                     el.layoutInfo.borderSizeYpx = x.borderBoxSize[0].blockSize;
-                    const isHorizontal = el.splitView === SplitView.horizontal;
                     const wrapper = (_a = node.children.firstMergedItem()) === null || _a === void 0 ? void 0 : _a.instance;
                     if (wrapper !== undefined) {
                         const wrapperEl = wrapper.element;
@@ -143,7 +143,6 @@ export class SectionDriver extends HtmlDriver {
                     }
                 }
                 if (h.node.stamp === 1) {
-                    const isHorizontal = el.splitView === SplitView.horizontal;
                     const wrapper = (_b = node.children.firstMergedItem()) === null || _b === void 0 ? void 0 : _b.instance;
                     if (wrapper !== undefined) {
                         const wrapperEl = wrapper.element;
@@ -154,57 +153,63 @@ export class SectionDriver extends HtmlDriver {
                     }
                 }
             });
-            Handling(() => {
-                const native = el.native;
-                const isHorizontal = el.splitView === SplitView.horizontal;
-                if (el.layoutInfo === undefined)
-                    el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
-                if (el.layoutInfo.isConstrained) {
-                    const surroundingXpx = el.layoutInfo.borderSizeXpx - el.layoutInfo.contentSizeXpx;
-                    const surroundingYpx = el.layoutInfo.borderSizeYpx - el.layoutInfo.contentSizeYpx;
-                    let i = 0;
-                    const preferred = [];
-                    const sizesPx = [];
-                    for (const child of node.children.items()) {
-                        const partEl = child.instance.element;
-                        if (isSplitViewPartition(child.instance.driver) && partEl !== undefined) {
-                            const size = isHorizontal ? partEl.width : partEl.height;
-                            const options = {
-                                axis: isHorizontal ? Axis.X : Axis.Y, lineSizePx: Dimension.lineSizePx, fontSizePx: BodyFontSize,
-                                containerSizeXpx: native.scrollWidth - surroundingXpx, containerSizeYpx: native.scrollHeight - surroundingYpx,
-                            };
-                            const minPx = size.min ? toPx(Dimension.parse(size.min), options) : 0;
-                            let maxPx = size.max ? toPx(Dimension.parse(size.max), options) : Number.POSITIVE_INFINITY;
-                            maxPx = Math.max(minPx, maxPx);
-                            if (partEl.layoutInfo === undefined)
-                                partEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
-                            if (isHorizontal)
-                                partEl.widthPx = { minPx, maxPx };
-                            else
-                                partEl.heightPx = { minPx, maxPx };
-                            const preferredUsed = isHorizontal ? partEl.preferredWidthUsed : partEl.preferredHeightUsed;
-                            let preferredPx = 0;
-                            if (!preferredUsed) {
-                                preferredPx = size.preferred ? toPx(Dimension.parse(size.preferred), options) : 0;
-                                if (preferredPx > 0) {
-                                    partEl.layoutInfo.effectiveSizePx = preferredPx;
-                                    preferred.push(i);
-                                }
+        }
+        if (el.splitView !== undefined) {
+            SyntheticElement({
+                mode: Mode.independentUpdate,
+                triggers: { count: el.node.stamp },
+                onChange: () => {
+                    const native = el.native;
+                    const isHorizontal = el.splitView === Direction.horizontal;
+                    if (el.layoutInfo === undefined)
+                        el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+                    if (el.layoutInfo.isConstrained) {
+                        const surroundingXpx = el.layoutInfo.borderSizeXpx - el.layoutInfo.contentSizeXpx;
+                        const surroundingYpx = el.layoutInfo.borderSizeYpx - el.layoutInfo.contentSizeYpx;
+                        let i = 0;
+                        const preferred = [];
+                        const sizesPx = [];
+                        for (const child of node.children.items()) {
+                            const partEl = child.instance.element;
+                            if (isSplitViewPartition(child.instance.driver) && partEl !== undefined) {
+                                const size = isHorizontal ? partEl.width : partEl.height;
+                                const options = {
+                                    axis: isHorizontal ? Axis.X : Axis.Y, lineSizePx: BodyFontSize, fontSizePx: BodyFontSize,
+                                    containerSizeXpx: native.scrollWidth - surroundingXpx, containerSizeYpx: native.scrollHeight - surroundingYpx,
+                                };
+                                const minPx = size.min ? toPx(Dimension.parse(size.min), options) : 0;
+                                let maxPx = size.max ? toPx(Dimension.parse(size.max), options) : Number.POSITIVE_INFINITY;
+                                maxPx = Math.max(minPx, maxPx);
+                                if (partEl.layoutInfo === undefined)
+                                    partEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
                                 if (isHorizontal)
-                                    partEl.preferredWidthUsed = true;
+                                    partEl.widthPx = { minPx, maxPx };
                                 else
-                                    partEl.preferredHeightUsed = true;
+                                    partEl.heightPx = { minPx, maxPx };
+                                const preferredUsed = isHorizontal ? partEl.preferredWidthUsed : partEl.preferredHeightUsed;
+                                let preferredPx = 0;
+                                if (!preferredUsed) {
+                                    preferredPx = size.preferred ? toPx(Dimension.parse(size.preferred), options) : 0;
+                                    if (preferredPx > 0) {
+                                        partEl.layoutInfo.effectiveSizePx = preferredPx;
+                                        preferred.push(i);
+                                    }
+                                    if (isHorizontal)
+                                        partEl.preferredWidthUsed = true;
+                                    else
+                                        partEl.preferredHeightUsed = true;
+                                }
+                                const sizePx = partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx);
+                                sizesPx.push({ node: child.instance, sizePx });
+                                i++;
                             }
-                            const sizePx = partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx);
-                            sizesPx.push({ node: child.instance, sizePx });
-                            i++;
                         }
+                        const priorities = preferred.length > 0
+                            ? getPrioritiesForSizeChanging(isHorizontal, node.children, preferred)
+                            : getPrioritiesForEmptySpaceDistribution(isHorizontal, node.children);
+                        unobs(() => relayout(node, priorities.resizable, priorities.manuallyResizable, sizesPx));
                     }
-                    const priorities = preferred.length > 0
-                        ? getPrioritiesForSizeChanging(isHorizontal, node.children, preferred)
-                        : getPrioritiesForEmptySpaceDistribution(isHorizontal, node.children);
-                    unobs(() => relayout(node, priorities.resizable, priorities.manuallyResizable, sizesPx));
-                }
+                },
             });
         }
         return result;
@@ -220,9 +225,12 @@ export class SectionDriver extends HtmlDriver {
                     if (isSplitViewPartition(child.instance.driver))
                         partCount++;
                 }
-                const isHorizontal = el.splitView === SplitView.horizontal;
+                const isHorizontal = el.splitView === Direction.horizontal;
                 if (childDeclaration !== undefined) {
-                    overrideOnCreate(childDeclaration, el => {
+                    if (childDeclaration.triggers === undefined)
+                        childDeclaration.triggers = {};
+                    Object.defineProperty(childDeclaration.triggers, "index", { value: partCount });
+                    overrideMethod(childDeclaration, "onChange", el => {
                         if (isHorizontal)
                             el.style.gridColumn = `${partCount + 1}`;
                         else
@@ -246,10 +254,10 @@ export class SectionDriver extends HtmlDriver {
 export function isSplitViewPartition(childDriver) {
     return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.synthetic;
 }
-function overrideOnCreate(declaration, func) {
-    const baseOnCreate = declaration.onCreate;
-    declaration.onCreate = baseOnCreate !== undefined
-        ? (el, base) => { baseOnCreate(el, base); func(el); }
+function overrideMethod(declaration, method, func) {
+    const baseOnChange = declaration[method];
+    declaration[method] = baseOnChange !== undefined
+        ? (el, base) => { baseOnChange(el, base); func(el); }
         : (el, base) => { base(); func(el); };
 }
 export const Drivers = {

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

@@ -44,6 +44,8 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
             el.node.configureReactronic({ throttling: 0 });
         },
         onChange: el => {
+            if (switchEditMode === undefined && !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/SplitViewMath.js

@@ -1,4 +1,4 @@
-import { ElLayoutInfo, InitialElLayoutInfo, SplitView } from "./El.js";
+import { ElLayoutInfo, InitialElLayoutInfo, Direction } from "./El.js";
 import { Drivers, isSplitViewPartition } from "./Elements.js";
 import { clamp } from "./ElUtils.js";
 const DEBUG = false;
@@ -17,7 +17,7 @@ export function relayoutUsingSplitter(splitViewNode, deltaPx, index, initialSize
     if (priorities === undefined) {
         priorities = getPrioritiesForSplitter(index + 1, initialSizesPx.length);
     }
-    const containerSizePx = splitViewNode.element.splitView === SplitView.horizontal
+    const containerSizePx = splitViewNode.element.splitView === Direction.horizontal
         ? (_b = (_a = splitViewNode.element.layoutInfo) === null || _a === void 0 ? void 0 : _a.contentSizeXpx) !== null && _b !== void 0 ? _b : 0
         : (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.contentSizeYpx) !== null && _d !== void 0 ? _d : 0;
     DEBUG && console.log(`(splitter) delta = ${deltaPx}, container = ${containerSizePx}, size = ${initialSizesPx.reduce((p, c) => p + c.sizePx, 0)}, index = ${index}`);
@@ -26,7 +26,7 @@ export function relayoutUsingSplitter(splitViewNode, deltaPx, index, initialSize
 }
 export function relayout(splitViewNode, priorities, manuallyResizablePriorities, sizesPx) {
     var _a, _b, _c, _d;
-    const containerSizePx = splitViewNode.element.splitView === SplitView.horizontal
+    const containerSizePx = splitViewNode.element.splitView === Direction.horizontal
         ? (_b = (_a = splitViewNode.element.layoutInfo) === null || _a === void 0 ? void 0 : _a.contentSizeXpx) !== null && _b !== void 0 ? _b : 0
         : (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.contentSizeYpx) !== null && _d !== void 0 ? _d : 0;
     const totalSizePx = sizesPx.reduce((p, c) => p + c.sizePx, 0);
@@ -42,7 +42,7 @@ export function relayout(splitViewNode, priorities, manuallyResizablePriorities,
     layout(splitViewNode);
 }
 export function resizeUsingDelta(splitViewNode, deltaPx, index, priorities, sizesPx, force = false) {
-    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    const isHorizontal = splitViewNode.element.splitView === Direction.horizontal;
     let beforeDeltaPx = 0;
     if (sizesPx.length > 0 && deltaPx !== 0) {
         let minBeforeDeltaPx = 0;
@@ -86,7 +86,7 @@ export function resizeUsingDelta(splitViewNode, deltaPx, index, priorities, size
 }
 export function layout(splitViewNode) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    const isHorizontal = splitViewNode.element.splitView === Direction.horizontal;
     let posPx = 0;
     let shrinkBefore = false;
     let growBefore = false;

package/build/dist/source/html/sensors/BasePointerSensor.d.ts

@@ -1,4 +1,3 @@
-import { FocusSensor } from "./FocusSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { KeyboardModifiers } from "./KeyboardSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
@@ -12,7 +11,7 @@ export declare class BasePointerSensor extends HtmlElementSensor {
     positionX: number;
     positionY: number;
     modifiers: KeyboardModifiers;
-    constructor(element: HTMLElement | SVGElement, focusSensor?: FocusSensor, windowSensor?: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor?: WindowSensor);
 }
 export declare function extractPointerButton(e: MouseEvent): PointerButton;
 export declare function isPointerButtonDown(button: PointerButton, buttonsMask: number): boolean;

package/build/dist/source/html/sensors/BasePointerSensor.js

@@ -8,8 +8,8 @@ export var PointerButton;
     PointerButton[PointerButton["middle"] = 4] = "middle";
 })(PointerButton || (PointerButton = {}));
 export class BasePointerSensor extends HtmlElementSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.positionX = Infinity;
         this.positionY = Infinity;
         this.modifiers = KeyboardModifiers.none;

package/build/dist/source/html/sensors/ButtonSensor.d.ts

@@ -1,5 +1,4 @@
 import { PointerButton, BasePointerSensor } from "./BasePointerSensor.js";
-import { FocusSensor } from "./FocusSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export declare enum ButtonState {
     pressed = 0,
@@ -15,7 +14,7 @@ export declare class ButtonSensor extends BasePointerSensor {
     selectedX: number;
     selectedY: number;
     selected: boolean;
-    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor: WindowSensor);
     listen(enabled?: boolean): void;
     protected onPointerDown(e: PointerEvent): void;
     protected onPointerMove(e: PointerEvent): void;

package/build/dist/source/html/sensors/ButtonSensor.js

@@ -19,8 +19,8 @@ export var ButtonState;
     ButtonState[ButtonState["released"] = 3] = "released";
 })(ButtonState || (ButtonState = {}));
 export class ButtonSensor extends BasePointerSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.state = ButtonState.released;
         this.pointerButton = PointerButton.none;
         this.originData = undefined;

package/build/dist/source/html/sensors/DataForSensor.d.ts

@@ -2,6 +2,7 @@ export type DataForSensor = {
     context?: unknown;
     window?: unknown;
     focus?: unknown;
+    catchChildrenFocus?: boolean;
     hover?: unknown;
     keyboard?: unknown;
     click?: unknown;

package/build/dist/source/html/sensors/DataForSensor.js

@@ -43,8 +43,8 @@ export function grabElementDataList(targetPath, sym, payloadKey, existing, ignor
         if (candidateData !== undefined) {
             if (!ignoreWindow) {
                 if (window === undefined)
-                    window = candidateData["window"];
-                else if (window !== candidateData["window"])
+                    window = candidateData.window;
+                else if (window !== candidateData.window)
                     break;
             }
             payload = candidateData[payloadKey];
@@ -62,7 +62,7 @@ export function grabElementDataList(targetPath, sym, payloadKey, existing, ignor
                 }
             }
         }
-        if (activeData === undefined && predicate(candidate)) {
+        if (payloadKey === "focus" && activeData === undefined && (predicate(candidate) || (candidateData === null || candidateData === void 0 ? void 0 : candidateData.catchChildrenFocus))) {
             activeData = payload;
         }
         i++;

package/build/dist/source/html/sensors/FocusSensor.js

@@ -13,7 +13,7 @@ import { grabElementDataList, SymDataForSensor } from "./DataForSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 export class FocusSensor extends HtmlElementSensor {
     constructor(element, windowSensor) {
-        super(element, undefined, windowSensor);
+        super(element, windowSensor);
         this.activeData = undefined;
         this.oldActiveData = undefined;
         this.contextElementDataList = [];

package/build/dist/source/html/sensors/HtmlDragSensor.d.ts

@@ -1,4 +1,3 @@
-import { FocusSensor } from "./FocusSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { KeyboardModifiers } from "./KeyboardSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
@@ -33,7 +32,7 @@ export declare class HtmlDragSensor extends HtmlElementSensor {
     immediatePositionX: number;
     immediatePositionY: number;
     immediateModifiers: KeyboardModifiers;
-    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor: WindowSensor);
     getData(format: string): unknown;
     setData(format: string, value: unknown): void;
     clearData(format?: string): void;

package/build/dist/source/html/sensors/HtmlDragSensor.js

@@ -12,8 +12,8 @@ import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
 export class HtmlDragSensor extends HtmlElementSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.draggable = undefined;
         this.dragSource = undefined;
         this.dragTarget = undefined;

package/build/dist/source/html/sensors/HtmlElementSensor.d.ts

@@ -3,11 +3,10 @@ import { Sensor } from "./Sensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export declare class HtmlElementSensor extends Sensor {
     readonly sourceElement: HTMLElement | SVGElement;
-    readonly focusSensor?: any;
     readonly windowSensor?: WindowSensor;
     preventDefault: boolean;
     stopPropagation: boolean;
-    constructor(sourceElement: HTMLElement | SVGElement, focusSensor?: any, windowSensor?: WindowSensor);
+    constructor(sourceElement: HTMLElement | SVGElement, windowSensor?: WindowSensor);
     protected getDefaultSensorData(): DataForSensor;
     protected setPreventDefaultAndStopPropagation(e: Event): void;
 }

package/build/dist/source/html/sensors/HtmlElementSensor.js

@@ -12,10 +12,9 @@ import { SymDataForSensor } from "./DataForSensor.js";
 import { Sensor } from "./Sensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export class HtmlElementSensor extends Sensor {
-    constructor(sourceElement, focusSensor, windowSensor) {
+    constructor(sourceElement, windowSensor) {
         super();
         this.sourceElement = sourceElement;
-        this.focusSensor = focusSensor;
         this.windowSensor = windowSensor;
         this.preventDefault = false;
         this.stopPropagation = false;
@@ -38,10 +37,6 @@ __decorate([
     raw,
     __metadata("design:type", Object)
 ], HtmlElementSensor.prototype, "sourceElement", void 0);
-__decorate([
-    raw,
-    __metadata("design:type", Object)
-], HtmlElementSensor.prototype, "focusSensor", void 0);
 __decorate([
     raw,
     __metadata("design:type", WindowSensor)

package/build/dist/source/html/sensors/HtmlSensors.js

@@ -58,21 +58,21 @@ export class HtmlSensors {
     }
     get htmlDrag() {
         if (this._htmlDrag === undefined) {
-            this._htmlDrag = new HtmlDragSensor(this._element, this.focus, this.window);
+            this._htmlDrag = new HtmlDragSensor(this._element, this.window);
             this._htmlDrag.listen();
         }
         return this._htmlDrag;
     }
     get button() {
         if (this._button === undefined) {
-            this._button = new ButtonSensor(this._element, this.focus, this.window);
+            this._button = new ButtonSensor(this._element, this.window);
             this._button.listen();
         }
         return this._button;
     }
     get pointer() {
         if (this._pointer === undefined) {
-            this._pointer = new PointerSensor(this._element, this.focus, this.window);
+            this._pointer = new PointerSensor(this._element, this.window);
             this._pointer.listen();
         }
         return this._pointer;

package/build/dist/source/html/sensors/PointerSensor.d.ts

@@ -1,5 +1,4 @@
 import { PointerButton, BasePointerSensor } from "./BasePointerSensor.js";
-import { FocusSensor } from "./FocusSensor.js";
 import { KeyboardModifiers } from "./KeyboardSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export declare class PointerSensor extends BasePointerSensor {
@@ -34,7 +33,7 @@ export declare class PointerSensor extends BasePointerSensor {
     immediatePositionY: number;
     immediateModifiers: KeyboardModifiers;
     static readonly DraggingThreshold = 4;
-    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor: WindowSensor);
     getData(): unknown;
     setData(value: unknown): void;
     listen(enabled?: boolean): void;

package/build/dist/source/html/sensors/PointerSensor.js

@@ -12,8 +12,8 @@ import { extractPointerButton, isPointerButtonDown, PointerButton, BasePointerSe
 import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
 import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
 export class PointerSensor extends BasePointerSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.hotPositionX = Infinity;
         this.hotPositionY = Infinity;
         this.pointerButton = PointerButton.none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.271",
+  "version": "0.24.272",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",