verstak 0.24.271 → 0.24.273

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.d.ts

@@ -1,7 +1,7 @@
 import { RxNodeDecl, RxNodeDriver, RxNode, Delegate, MergedItem } from "reactronic";
 import { CursorCommandDriver, El, ElArea } 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>>;
@@ -12,13 +12,13 @@ export declare function Note(content: string, formatted?: boolean, declaration?:
 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

@@ -1,11 +1,11 @@
 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";
 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);
@@ -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) {
@@ -108,16 +108,17 @@ 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);
         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: { stamp: 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,14 +254,14 @@ 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 = {
-    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,6 +44,8 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
             el.node.configureReactronic({ throttling: 0 });
         },
         onChange: el => {
+            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/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

@@ -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;
@@ -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/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;
 }