verstak 0.24.276 → 0.24.301

package/build/dist/source/archive/RxDomV1.js

@@ -56,7 +56,7 @@ export class BasicNodeType {
         if (inst) {
             inst.native = undefined;
             if (!node.inline && node.instance)
-                Transaction.separate(() => RxSystem.dispose(node.instance));
+                Transaction.isolate(() => RxSystem.dispose(node.instance));
             for (const x of inst.children)
                 tryToFinalize(x, initiator);
             for (const x of inst.guests)

package/build/dist/source/html/DraggableArea.view.js

@@ -4,7 +4,7 @@ import { Handling } from "./Elements.js";
 export function DraggableArea(draggingId, builder) {
     return (Div(builder, {
         mode: Mode.independentUpdate,
-        onChange: b => {
+        script: b => {
             const e = b.native;
             const model = b.model;
             const dataForSensor = e.dataForSensor;

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

@@ -63,7 +63,7 @@ export declare enum PosV {
 export type Range = {
     readonly min?: string;
     readonly max?: string;
-    readonly preferred?: string;
+    preferred?: string;
 };
 export type MarkedRange = Range & {
     readonly marker?: string;
@@ -122,8 +122,6 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
         minPx: number;
         maxPx: number;
     });
-    get preferredWidthUsed(): boolean;
-    set preferredWidthUsed(value: boolean);
     get height(): Range;
     set height(value: Range);
     get heightPx(): {
@@ -134,8 +132,6 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
         minPx: number;
         maxPx: number;
     });
-    get preferredHeightUsed(): boolean;
-    set preferredHeightUsed(value: boolean);
     get horizontal(): PosH | undefined;
     set horizontal(value: PosH | undefined);
     get vertical(): PosV | undefined;
@@ -185,13 +181,11 @@ export declare class ElLayoutInfo {
     alignerY?: ElImpl;
     flags: ElLayoutInfoFlags;
     effectiveSizePx: number;
-    offsetXpx: number;
-    offsetYpx: number;
     contentSizeXpx: number;
     contentSizeYpx: number;
     borderSizeYpx: number;
     borderSizeXpx: number;
-    isConstrained: boolean;
+    isUpdateFinished: boolean;
     constructor(prev: ElLayoutInfo);
 }
 declare enum ElLayoutInfoFlags {
@@ -213,6 +207,7 @@ export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
 export declare const Constants: {
     element: string;
     partition: string;
+    wrapper: string;
     splitter: string;
     group: string;
     layouts: string[];

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

@@ -47,7 +47,6 @@ class Size extends ObservableObject {
         this.raw = { min: "", max: "" };
         this.minPx = 0;
         this.maxPx = Number.POSITIVE_INFINITY;
-        this.preferredUsed = false;
     }
 }
 export class ElDriver extends BaseDriver {
@@ -66,8 +65,8 @@ export class ElImpl {
         this._kind = ElKind.part;
         this._place = undefined;
         this._coords = UndefinedElCoords;
-        this._width = Transaction.separate(() => new Size());
-        this._height = Transaction.separate(() => new Size());
+        this._width = Transaction.isolate(() => new Size());
+        this._height = Transaction.isolate(() => new Size());
         this._horizontal = undefined;
         this._vertical = undefined;
         this._contentHorizontal = undefined;
@@ -125,7 +124,6 @@ export class ElImpl {
         if (value.min !== w.min || value.max !== w.max || value.preferred !== undefined) {
             ElImpl.applyWidth(this, value);
             this._width.raw = value;
-            this._width.preferredUsed = false;
         }
     }
     get widthPx() { return this._width; }
@@ -136,19 +134,12 @@ export class ElImpl {
         if (value.maxPx !== w.maxPx)
             this._width.maxPx = value.maxPx;
     }
-    get preferredWidthUsed() {
-        return this._width.preferredUsed;
-    }
-    set preferredWidthUsed(value) {
-        this._width.preferredUsed = value;
-    }
     get height() { return this._height.raw; }
     set height(value) {
         const h = this._height.raw;
         if (value.min !== h.min || value.max !== h.max || value.preferred !== undefined) {
             ElImpl.applyHeight(this, value);
             this._height.raw = value;
-            this._height.preferredUsed = false;
         }
     }
     get heightPx() { return this._height; }
@@ -159,12 +150,6 @@ export class ElImpl {
         if (value.maxPx !== w.maxPx)
             this._height.maxPx = value.maxPx;
     }
-    get preferredHeightUsed() {
-        return this._height.preferredUsed;
-    }
-    set preferredHeightUsed(value) {
-        this._height.preferredUsed = value;
-    }
     get horizontal() { return this._horizontal; }
     set horizontal(value) {
         const existing = this._horizontal;
@@ -566,14 +551,13 @@ export class ElImpl {
     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.isolate(() => e.sensors.resize.observeResizing(element, value !== undefined));
         }
     }
     static applyStylingPreset(element, secondary, styleName, enabled) {
@@ -595,27 +579,17 @@ export class ElLayoutInfo {
         this.alignerY = undefined;
         this.flags = prev.flags & ~ElLayoutInfoFlags.ownCursorPosition;
         this.effectiveSizePx = 0;
-        this.offsetXpx = 0;
-        this.offsetYpx = 0;
         this.contentSizeXpx = 0;
         this.contentSizeYpx = 0;
         this.borderSizeXpx = 0;
         this.borderSizeYpx = 0;
-        this.isConstrained = false;
+        this.isUpdateFinished = false;
     }
 }
 __decorate([
     obs,
     __metadata("design:type", Number)
 ], ElLayoutInfo.prototype, "effectiveSizePx", void 0);
-__decorate([
-    obs,
-    __metadata("design:type", Number)
-], ElLayoutInfo.prototype, "offsetXpx", void 0);
-__decorate([
-    obs,
-    __metadata("design:type", Number)
-], ElLayoutInfo.prototype, "offsetYpx", void 0);
 __decorate([
     obs,
     __metadata("design:type", Number)
@@ -635,7 +609,7 @@ __decorate([
 __decorate([
     obs,
     __metadata("design:type", Boolean)
-], ElLayoutInfo.prototype, "isConstrained", void 0);
+], ElLayoutInfo.prototype, "isUpdateFinished", void 0);
 var ElLayoutInfoFlags;
 (function (ElLayoutInfoFlags) {
     ElLayoutInfoFlags[ElLayoutInfoFlags["none"] = 0] = "none";
@@ -645,7 +619,7 @@ var ElLayoutInfoFlags;
     ElLayoutInfoFlags[ElLayoutInfoFlags["childrenRelayoutIsNeeded"] = 8] = "childrenRelayoutIsNeeded";
 })(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 }));
+export const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, contentSizeXpx: 0, contentSizeYpx: 0, borderSizeXpx: 0, borderSizeYpx: 0, isUpdateFinished: false }));
 function getElCoordsAndAdjustLayoutInfo(isRegularElement, place, maxX, maxY, prevElLayoutInfo, layoutInfo) {
     var _a, _b;
     let result;
@@ -757,6 +731,7 @@ export class CursorCommandDriver extends ElDriver {
 export const Constants = {
     element: "el",
     partition: "part",
+    wrapper: "wrapper",
     splitter: "splitter",
     group: "group",
     layouts: ["panel", "table", "note", "group", "", "", ""],
@@ -773,10 +748,6 @@ const VerstakDriversByLayout = [
         s.textAlign = "initial";
         s.flexShrink = "1";
         s.minWidth = "0";
-        if (owner.splitView !== undefined) {
-            s.overflow = "hidden";
-            s.flexGrow = "1";
-        }
     },
     el => {
         const owner = el.node.owner.element;
@@ -787,10 +758,6 @@ const VerstakDriversByLayout = [
         s.gridAutoRows = "minmax(min-content, 1fr)";
         s.gridAutoColumns = "minmax(min-content, 1fr)";
         s.textAlign = "initial";
-        if (owner.splitView !== undefined) {
-            s.overflow = "hidden";
-            s.flexGrow = "1";
-        }
     },
     el => {
         const owner = el.node.owner.element;
@@ -810,6 +777,7 @@ const VerstakDriversByLayout = [
         s.flexDirection = "row";
         s.alignItems = "center";
         s.gap = "inherit";
+        s.position = owner.sealed !== undefined ? "relative" : "";
     },
     el => {
         const s = el.style;

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

@@ -1,4 +1,4 @@
-import { RxNodeDecl, RxNodeDriver, RxNode, Delegate, MergedItem } from "reactronic";
+import { RxNodeDecl, RxNodeDriver, RxNode, Script, MergedItem } from "reactronic";
 import { CursorCommandDriver, El, ElPlace } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 export declare function Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
@@ -10,19 +10,24 @@ export declare function declareSplitter<T>(index: number, splitViewNode: RxNode<
 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 Handling<M = unknown>(script: Script<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 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 class PartitionDriver<T extends HTMLElement> extends HtmlDriver<T> {
+    update(node: RxNode<El<T>>): void | Promise<void>;
+    getHost(node: RxNode<El<T, any>>): RxNode<El<T, any>>;
+}
 export declare const Drivers: {
     panel: PanelDriver<HTMLElement>;
     table: HtmlDriver<HTMLElement, any>;
     note: HtmlDriver<HTMLElement, any>;
     group: HtmlDriver<HTMLElement, any>;
-    partition: HtmlDriver<HTMLElement, any>;
+    partition: PartitionDriver<HTMLElement>;
+    wrapper: HtmlDriver<HTMLElement, any>;
     splitter: HtmlDriver<HTMLElement, any>;
     cursor: CursorCommandDriver;
     synthetic: RxNodeDriver<El<void, any>>;

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

@@ -18,24 +18,15 @@ export function Splitter(declaration, preset) {
     return RxNode.declare(Drivers.splitter, declaration, preset);
 }
 export function rowBreak(shiftCursorDown) {
-    RxNode.declare(Drivers.partition, {
-        onChange: el => {
-            const ownerEl = el.node.owner.element;
-            if (ownerEl.splitView !== undefined) {
-                el.style.display = "grid";
-            }
-            else {
-            }
-        },
-    });
+    RxNode.declare(Drivers.partition);
 }
 export function declareSplitter(index, splitViewNode) {
     const key = `splitter-${index}`;
     return (Splitter({
         key,
         mode: Mode.independentUpdate,
-        onCreate: el => el.native.className = `splitter ${key}`,
-        onChange: b => {
+        creation: el => el.native.className = `splitter ${key}`,
+        script: b => {
             const e = b.native;
             const model = b.model;
             const dataForSensor = e.dataForSensor;
@@ -84,14 +75,14 @@ export function declareSplitter(index, splitViewNode) {
 }
 export function cursor(areaParams) {
     RxNode.declare(Drivers.cursor, {
-        onChange: el => {
+        script: el => {
             el.place = areaParams;
         },
     });
 }
 export function Note(content, formatted, declaration) {
     return RxNode.declare(Drivers.note, declaration, {
-        onChange: el => {
+        script: el => {
             if (formatted)
                 el.native.innerHTML = content;
             else
@@ -102,8 +93,8 @@ export function Note(content, formatted, declaration) {
 export function Group(declaration, preset) {
     return RxNode.declare(Drivers.group, declaration, preset);
 }
-export function Handling(onChange) {
-    return SyntheticElement({ mode: Mode.independentUpdate, onChange });
+export function Handling(script) {
+    return SyntheticElement({ mode: Mode.independentUpdate, script });
 }
 export function SyntheticElement(declaration, preset) {
     return RxNode.declare(Drivers.synthetic, declaration, preset);
@@ -111,61 +102,33 @@ export function SyntheticElement(declaration, preset) {
 export class PanelDriver extends HtmlDriver {
     update(node) {
         rowBreak();
-        const result = super.update(node);
         const el = node.element;
-        if (el.sealed !== undefined) {
+        const result = super.update(node);
+        if (el.splitView !== undefined) {
+            if (el.layoutInfo === undefined)
+                el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+            const layoutInfo = el.layoutInfo;
+            layoutInfo.isUpdateFinished = false;
             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);
-                    const rect = x.contentRect;
+                    const borderBoxPx = x.borderBoxSize[0];
                     const contentBoxPx = x.contentBoxSize[0];
-                    const containerSizeXpx = contentBoxPx.inlineSize;
-                    const containerSizeYpx = contentBoxPx.blockSize;
-                    el.layoutInfo.offsetXpx = rect.left;
-                    el.layoutInfo.offsetYpx = rect.top;
-                    el.layoutInfo.contentSizeXpx = containerSizeXpx;
-                    el.layoutInfo.contentSizeYpx = containerSizeYpx;
-                    el.layoutInfo.borderSizeXpx = x.borderBoxSize[0].inlineSize;
-                    el.layoutInfo.borderSizeYpx = x.borderBoxSize[0].blockSize;
-                    const wrapper = (_a = node.children.firstMergedItem()) === null || _a === void 0 ? void 0 : _a.instance;
-                    if (wrapper !== undefined) {
-                        const wrapperEl = wrapper.element;
-                        el.layoutInfo.isConstrained = true;
-                        if (isHorizontal)
-                            wrapperEl.style.width = wrapperEl.style.maxWidth = `${containerSizeXpx}px`;
-                        else
-                            wrapperEl.style.height = wrapperEl.style.maxHeight = `${containerSizeYpx}px`;
-                    }
-                }
-                if (h.node.stamp === 1) {
-                    const wrapper = (_b = node.children.firstMergedItem()) === null || _b === void 0 ? void 0 : _b.instance;
-                    if (wrapper !== undefined) {
-                        const wrapperEl = wrapper.element;
-                        if (isHorizontal)
-                            wrapperEl.style.width = wrapperEl.style.maxWidth = "0px";
-                        else
-                            wrapperEl.style.height = wrapperEl.style.maxHeight = "0px";
-                    }
+                    layoutInfo.borderSizeXpx = borderBoxPx.inlineSize;
+                    layoutInfo.borderSizeYpx = borderBoxPx.blockSize;
+                    layoutInfo.contentSizeXpx = contentBoxPx.inlineSize;
+                    layoutInfo.contentSizeYpx = contentBoxPx.blockSize;
                 }
             });
-        }
-        if (el.splitView !== undefined) {
             SyntheticElement({
                 mode: Mode.independentUpdate,
-                triggers: { stamp: el.node.stamp },
-                onChange: () => {
+                script: () => {
                     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;
+                    if (layoutInfo.isUpdateFinished) {
+                        const surroundingXpx = layoutInfo.borderSizeXpx - layoutInfo.contentSizeXpx;
+                        const surroundingYpx = layoutInfo.borderSizeYpx - layoutInfo.contentSizeYpx;
                         let i = 0;
                         const preferred = [];
                         const sizesPx = [];
@@ -186,20 +149,13 @@ export class PanelDriver extends HtmlDriver {
                                     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 (isHorizontal)
-                                        partEl.preferredWidthUsed = true;
-                                    else
-                                        partEl.preferredHeightUsed = true;
+                                const preferredPx = size.preferred ? toPx(Dimension.parse(size.preferred), options) : 0;
+                                if (preferredPx > 0) {
+                                    partEl.layoutInfo.effectiveSizePx = preferredPx;
+                                    size.preferred = undefined;
+                                    preferred.push(i);
                                 }
-                                const sizePx = partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx);
+                                const sizePx = unobs(() => partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx));
                                 sizesPx.push({ node: child.instance, sizePx });
                                 i++;
                             }
@@ -211,6 +167,9 @@ export class PanelDriver extends HtmlDriver {
                     }
                 },
             });
+            RxNode.updateNestedNodesThenDo(() => {
+                layoutInfo.isUpdateFinished = true;
+            });
         }
         return result;
     }
@@ -230,7 +189,7 @@ export class PanelDriver extends HtmlDriver {
                     if (childDeclaration.triggers === undefined)
                         childDeclaration.triggers = {};
                     Object.defineProperty(childDeclaration.triggers, "index", { value: partCount });
-                    overrideMethod(childDeclaration, "onChange", el => {
+                    overrideMethod(childDeclaration, "script", el => {
                         if (isHorizontal)
                             el.style.gridColumn = `${partCount + 1}`;
                         else
@@ -255,17 +214,60 @@ export function isSplitViewPartition(childDriver) {
     return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.synthetic;
 }
 function overrideMethod(declaration, method, func) {
-    const baseOnChange = declaration[method];
-    declaration[method] = baseOnChange !== undefined
-        ? (el, base) => { baseOnChange(el, base); func(el); }
+    const baseScript = declaration[method];
+    declaration[method] = baseScript !== undefined
+        ? (el, base) => { baseScript(el, base); func(el); }
         : (el, base) => { base(); func(el); };
 }
+export class PartitionDriver extends HtmlDriver {
+    update(node) {
+        const result = super.update(node);
+        const ownerEl = node.owner.element;
+        if (ownerEl.sealed !== undefined) {
+            node.element.style.flexGrow = "1";
+            RxNode.declare(Drivers.wrapper, {
+                script: el => {
+                    const ownerEl = el.node.owner.owner.element;
+                    if (ownerEl.splitView !== undefined) {
+                        el.style.display = "grid";
+                        el.style.flexDirection = "";
+                    }
+                    else {
+                        if (ownerEl.isTable) {
+                            el.style.display = "contents";
+                            el.style.flexDirection = "";
+                        }
+                        else {
+                            el.style.display = "flex";
+                            el.style.flexDirection = "row";
+                        }
+                    }
+                    el.style.position = "absolute";
+                    el.style.inset = "0";
+                    el.style.overflow = "auto";
+                    el.style.gap = "inherit";
+                },
+            });
+        }
+        return result;
+    }
+    getHost(node) {
+        let host;
+        const ownerEl = node.owner.element;
+        if (ownerEl.sealed !== undefined)
+            host = node.children.firstMergedItem().instance;
+        else
+            host = node;
+        return host;
+    }
+}
 export const Drivers = {
     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),
-    partition: new HtmlDriver(Constants.partition, true, el => el.kind = ElKind.part),
+    partition: new PartitionDriver(Constants.partition, true, el => el.kind = ElKind.part),
+    wrapper: new HtmlDriver(Constants.wrapper, false, el => el.kind = ElKind.native),
     splitter: new HtmlDriver(Constants.splitter, false, el => el.kind = ElKind.splitter),
     cursor: new CursorCommandDriver(),
     synthetic: new ElDriver("synthetic", false, el => el.kind = ElKind.group),

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

@@ -6,7 +6,7 @@ export function OnClick(target, action, key) {
             key,
             mode: Mode.independentUpdate,
             triggers: { target },
-            onChange: el => {
+            script: el => {
                 const pointer = target.sensors.pointer;
                 if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
                     if (action instanceof Function) {
@@ -26,7 +26,7 @@ export function OnResize(target, action, key) {
             key,
             mode: Mode.independentUpdate,
             triggers: { target },
-            onChange: el => {
+            script: el => {
                 const resize = target.sensors.resize;
                 resize.resizedElements.forEach(x => {
                     action(x);
@@ -40,10 +40,10 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
         key,
         mode: Mode.independentUpdate,
         triggers: { target, model },
-        onCreate: el => {
+        creation: el => {
             el.node.configureReactronic({ throttling: 0 });
         },
-        onChange: el => {
+        script: 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) {

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

@@ -1,4 +1,4 @@
-import { RxNode, SimpleDelegate } from "reactronic";
+import { RxNode, Handler } from "reactronic";
 import { El, ElDriver } from "./El.js";
 export declare class WebDriver<T extends Element, M = unknown> extends ElDriver<T, M> {
     setNativeElement(node: RxNode<El<T, M>>): void;
@@ -13,7 +13,7 @@ export declare class WebDriver<T extends Element, M = unknown> extends ElDriver<
 }
 export declare class StaticDriver<T extends HTMLElement> extends WebDriver<T> {
     readonly native: T;
-    constructor(native: T, name: string, isRow: boolean, predefine?: SimpleDelegate<El<T>>);
+    constructor(native: T, name: string, isRow: boolean, initialize?: Handler<El<T>>);
     setNativeElement(node: RxNode<El<T>>): void;
 }
 export declare class HtmlDriver<T extends HTMLElement, M = any> extends WebDriver<T, M> {

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

@@ -31,7 +31,9 @@ export class WebDriver extends ElDriver {
         if (native) {
             const sequential = node.owner.children.isStrict;
             const automaticHost = RxNode.findMatchingHost(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
-            const automaticNativeHost = automaticHost === null || automaticHost === void 0 ? void 0 : automaticHost.element.native;
+            const automaticNativeHost = automaticHost !== node.owner
+                ? automaticHost === null || automaticHost === void 0 ? void 0 : automaticHost.driver.getHost(automaticHost).element.native
+                : automaticHost === null || automaticHost === void 0 ? void 0 : automaticHost.element.native;
             if (automaticNativeHost) {
                 if (sequential && !node.driver.isPartition) {
                     const after = RxNode.findMatchingPrevSibling(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
@@ -80,8 +82,8 @@ export class WebDriver extends ElDriver {
     }
 }
 export class StaticDriver extends WebDriver {
-    constructor(native, name, isRow, predefine) {
-        super(name, isRow, predefine);
+    constructor(native, name, isRow, initialize) {
+        super(name, isRow, initialize);
         this.native = native;
     }
     setNativeElement(node) {

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

@@ -1,4 +1,4 @@
-import { ElLayoutInfo, InitialElLayoutInfo, Direction } from "./El.js";
+import { Direction } from "./El.js";
 import { Drivers, isSplitViewPartition } from "./Elements.js";
 import { clamp } from "./ElUtils.js";
 const DEBUG = false;
@@ -20,26 +20,33 @@ export function relayoutUsingSplitter(splitViewNode, deltaPx, index, initialSize
     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}`);
-    resizeUsingDelta(splitViewNode, deltaPx, index + 1, priorities, initialSizesPx, true);
-    layout(splitViewNode);
+    if (containerSizePx > 0) {
+        DEBUG && console.group(`(splitter) delta = ${deltaPx}, container = ${containerSizePx}, size = ${initialSizesPx.reduce((p, c) => p + c.sizePx, 0)}, index = ${index}`);
+        resizeUsingDelta(splitViewNode, deltaPx, index + 1, priorities, initialSizesPx, true);
+        DEBUG && console.groupEnd();
+        layout(splitViewNode);
+    }
 }
 export function relayout(splitViewNode, priorities, manuallyResizablePriorities, sizesPx) {
     var _a, _b, _c, _d;
     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);
-    let deltaPx = containerSizePx - totalSizePx;
-    DEBUG && console.log(printPriorities(priorities, manuallyResizablePriorities), "color: grey", "color:", "color: grey", "color:");
-    DEBUG && console.log(`(relayout) ∆ = ${n(deltaPx)}px, container = ${n(containerSizePx)}px, total = ${totalSizePx}`);
-    deltaPx = resizeUsingDelta(splitViewNode, deltaPx, sizesPx.length, priorities, sizesPx);
-    DEBUG && console.log(`(relayout) ~∆ = ${n(deltaPx)}, container = ${n(containerSizePx, 3)}px, total = ${n(sizesPx.reduce((p, c) => p + c.sizePx, 0), 3)}px`);
-    if (deltaPx < -(1 / devicePixelRatio)) {
-        DEBUG && console.log(`%c${deltaPx}px`, "color: lime");
-        resizeUsingDelta(splitViewNode, deltaPx, sizesPx.length, manuallyResizablePriorities, sizesPx, true);
+    if (containerSizePx > 0) {
+        const totalSizePx = sizesPx.reduce((p, c) => p + c.sizePx, 0);
+        let deltaPx = containerSizePx - totalSizePx;
+        DEBUG && console.log(printPriorities(priorities, manuallyResizablePriorities), "color: grey", "color:", "color: grey", "color:");
+        DEBUG && console.group(`(relayout) ∆ = ${n(deltaPx)}px, container = ${n(containerSizePx)}px, total = ${totalSizePx}`);
+        deltaPx = resizeUsingDelta(splitViewNode, deltaPx, sizesPx.length, priorities, sizesPx);
+        DEBUG && console.groupEnd();
+        DEBUG && console.group(`(relayout) ~∆ = ${n(deltaPx)}, container = ${n(containerSizePx, 3)}px, total = ${n(sizesPx.reduce((p, c) => p + c.sizePx, 0), 3)}px`);
+        if (deltaPx < -(1 / devicePixelRatio)) {
+            DEBUG && console.log(`%c${deltaPx}px`, "color: lime");
+            resizeUsingDelta(splitViewNode, deltaPx, sizesPx.length, manuallyResizablePriorities, sizesPx, true);
+        }
+        DEBUG && console.groupEnd();
+        layout(splitViewNode);
     }
-    layout(splitViewNode);
 }
 export function resizeUsingDelta(splitViewNode, deltaPx, index, priorities, sizesPx, force = false) {
     const isHorizontal = splitViewNode.element.splitView === Direction.horizontal;
@@ -63,29 +70,31 @@ export function resizeUsingDelta(splitViewNode, deltaPx, index, priorities, size
         const minDeltaPx = Math.max(minBeforeDeltaPx, minAfterDeltaPx);
         const maxDeltaPx = Math.min(maxBeforeDeltaPx, maxAfterDeltaPx);
         const clampedDeltaPx = clamp(deltaPx, minDeltaPx, maxDeltaPx);
-        DEBUG && console.log(`%c${sizesPx.map((x, i) => {
+        DEBUG && console.log("Initial sizes:");
+        DEBUG && sizesPx.map((x, i) => {
             const size = isHorizontal ? x.node.element.widthPx : x.node.element.heightPx;
-            return `${i}: ${size.minPx}..${x.sizePx}..${size.maxPx} (px)`;
-        }).join("\n")}`, "color: skyblue");
-        DEBUG && console.log(`[%c${Array.from({ length: index }).map((x, i) => i).join(",")}%c | %c${Array.from({ length: Math.max(0, sizesPx.length - index) }).map((x, i) => index + i).join(",")}%c]\n∆ = ${n(minDeltaPx)}px..${n(deltaPx)}px -> %c${n(clampedDeltaPx)}px%c..${n(maxDeltaPx)}px`, "color: #00BB00", "color:", "color: orange", "color:", "color: yellow", "color:");
+            return console.log(`%c  ${i}: ${size.minPx}..${x.sizePx}..${size.maxPx} (px)`, "color: skyblue");
+        });
+        DEBUG && console.log(`[%c${Array.from({ length: index }).map((x, i) => i).join(",")}%c | %c${Array.from({ length: Math.max(0, sizesPx.length - index) }).map((x, i) => index + i).join(",")}%c] ∆ = ${n(minDeltaPx)}px..${n(deltaPx)}px -> %c${n(clampedDeltaPx)}px%c..${n(maxDeltaPx)}px`, "color: #00BB00", "color:", "color: #00BB00", "color:", "color: yellow", "color:");
         if (clampedDeltaPx !== 0) {
+            DEBUG && console.log("distribution: start");
             if (index > 0)
                 beforeDeltaPx = distribute(1, clampedDeltaPx, index, priorities, sizesPx, isHorizontal, force);
             if (hasAfter)
                 distribute(-1, clampedDeltaPx, index, priorities, sizesPx, isHorizontal, force);
+            DEBUG && console.log("distribution: end");
         }
     }
+    DEBUG && console.log("Set new sizes:");
     for (let i = 0; i < sizesPx.length; i++) {
         const el = sizesPx[i].node.element;
-        if (el.layoutInfo === undefined)
-            el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+        DEBUG && console.log(`%c  ${i}: ${n(el.layoutInfo.effectiveSizePx)} -> ${n(sizesPx[i].sizePx)} (px)`, "color: skyblue");
         el.layoutInfo.effectiveSizePx = sizesPx[i].sizePx;
-        DEBUG && console.log(`[${i}]: set size = ${n(sizesPx[i].sizePx)}px`);
     }
     return beforeDeltaPx;
 }
 export function layout(splitViewNode) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     const isHorizontal = splitViewNode.element.splitView === Direction.horizontal;
     let posPx = 0;
     let shrinkBefore = false;
@@ -93,8 +102,6 @@ export function layout(splitViewNode) {
     let isSplitterEnabled = false;
     const sizesPx = [];
     const layoutInfo = splitViewNode.element.layoutInfo;
-    const offsetXpx = (_a = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.offsetXpx) !== null && _a !== void 0 ? _a : 0;
-    const offsetYpx = (_b = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.offsetYpx) !== null && _b !== void 0 ? _b : 0;
     for (const item of splitViewNode.children.items()) {
         const child = item.instance;
         if (isSplitViewPartition(child.driver)) {
@@ -102,7 +109,7 @@ export function layout(splitViewNode) {
             if (el.native !== undefined) {
                 const current = item;
                 const sizePx = isHorizontal ? el.widthPx : el.heightPx;
-                const effectiveSizePx = (_d = (_c = el.layoutInfo) === null || _c === void 0 ? void 0 : _c.effectiveSizePx) !== null && _d !== void 0 ? _d : 0;
+                const effectiveSizePx = (_b = (_a = el.layoutInfo) === null || _a === void 0 ? void 0 : _a.effectiveSizePx) !== null && _b !== void 0 ? _b : 0;
                 posPx += effectiveSizePx;
                 sizesPx.push(effectiveSizePx);
                 el.native.setAttribute("rx-max", equal(effectiveSizePx, sizePx.maxPx) ? "true" : "false");
@@ -117,7 +124,7 @@ export function layout(splitViewNode) {
                         const el = child.element;
                         if (el.native !== undefined) {
                             const sizePx = isHorizontal ? el.widthPx : el.heightPx;
-                            const effectiveSizePx = (_f = (_e = el.layoutInfo) === null || _e === void 0 ? void 0 : _e.effectiveSizePx) !== null && _f !== void 0 ? _f : 0;
+                            const effectiveSizePx = (_d = (_c = el.layoutInfo) === null || _c === void 0 ? void 0 : _c.effectiveSizePx) !== null && _d !== void 0 ? _d : 0;
                             shrinkAfter || (shrinkAfter = greater(effectiveSizePx - sizePx.minPx, 0));
                             growAfter || (growAfter = greater(sizePx.maxPx - effectiveSizePx, 0));
                             isSplitterEnabled = growBefore && shrinkAfter || growAfter && shrinkBefore;
@@ -133,15 +140,15 @@ export function layout(splitViewNode) {
             if (el.native !== undefined) {
                 el.style.display = isSplitterEnabled ? "block" : "none";
                 if (isHorizontal)
-                    el.style.left = `${offsetXpx + posPx}px`;
+                    el.style.left = `${posPx}px`;
                 else
-                    el.style.top = `${offsetYpx + posPx}px`;
+                    el.style.top = `${posPx}px`;
             }
         }
     }
-    const containerSizePx = (_g = (isHorizontal ? layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.contentSizeXpx : layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.contentSizeYpx)) !== null && _g !== void 0 ? _g : 0;
+    const containerSizePx = (_e = (isHorizontal ? layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.contentSizeXpx : layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.contentSizeYpx)) !== null && _e !== void 0 ? _e : 0;
     const isOverflowing = greater(posPx, containerSizePx);
-    const wrapper = (_h = splitViewNode.children.firstMergedItem()) === null || _h === void 0 ? void 0 : _h.instance;
+    const wrapper = (_g = (_f = splitViewNode.children.firstMergedItem()) === null || _f === void 0 ? void 0 : _f.instance.children.firstMergedItem()) === null || _g === void 0 ? void 0 : _g.instance;
     if (wrapper !== undefined) {
         if (isHorizontal)
             wrapper.element.style.gridTemplateColumns = sizesPx.map(x => `${x}px`).join(" ");
@@ -149,12 +156,12 @@ export function layout(splitViewNode) {
             wrapper.element.style.gridTemplateRows = sizesPx.map(x => `${x}px`).join(" ");
         if (isOverflowing) {
             if (isHorizontal)
-                wrapper.element.style.overflow = "scroll hidden";
+                wrapper.element.style.overflow = "scroll visible";
             else
-                wrapper.element.style.overflow = "hidden scroll";
+                wrapper.element.style.overflow = "visible scroll";
         }
         else {
-            wrapper.element.style.overflow = "hidden";
+            wrapper.element.style.overflow = "visible";
         }
     }
 }
@@ -284,8 +291,8 @@ function distribute(sign, deltaPx, index, priorities, sizesPx, isHorizontal, for
                     fractionCount += growth;
                 }
             }
-        } while (Math.abs(deltaPx) > eps && fractionCount > 0);
-        if (Math.abs(deltaPx) <= eps) {
+        } while (!equal(deltaPx, 0) && fractionCount > 0);
+        if (equal(deltaPx, 0)) {
             break;
         }
     }
@@ -294,7 +301,7 @@ function distribute(sign, deltaPx, index, priorities, sizesPx, isHorizontal, for
 function printPriorities(priorities, manuallyResizablePriorities) {
     let text = "";
     if (priorities.length > 0) {
-        text += `Automatically Resizable:\n%c(${priorities.map(x => `0x${x.toString(2)}`).join(", ")})%c\n`;
+        text += `Automatically Resizable:\n%c(${priorities.map(x => `0b${x.toString(2)}`).join(", ")})%c\n`;
         for (let i = 0; i < priorities.length; i++) {
             let vector = priorities[i];
             const parts = [];
@@ -309,7 +316,7 @@ function printPriorities(priorities, manuallyResizablePriorities) {
         }
     }
     if (manuallyResizablePriorities.length > 0) {
-        text += `Manually Resizable:\n%c(${manuallyResizablePriorities.map(x => `0x${x.toString(2)}`).join(", ")})%c\n`;
+        text += `Manually Resizable:\n%c(${manuallyResizablePriorities.map(x => `0b${x.toString(2)}`).join(", ")})%c\n`;
         for (let i = 0; i < manuallyResizablePriorities.length; i++) {
             let vector = manuallyResizablePriorities[i];
             const parts = [];

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

@@ -107,7 +107,7 @@ export class ButtonSensor extends BasePointerSensor {
             this.positionY = e.clientY;
             this.revision++;
         }
-        Transaction.separate(() => {
+        Transaction.isolate(() => {
             var _a;
             (_a = this.windowSensor) === null || _a === void 0 ? void 0 : _a.setActiveWindow(window, "button");
         });

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

@@ -127,7 +127,7 @@ export class HtmlDragSensor extends HtmlElementSensor {
         this.dragTargetWindow = undefined;
         this.previousDragTarget = undefined;
         this.revision++;
-        Transaction.separate(() => {
+        Transaction.isolate(() => {
             var _a;
             (_a = this.windowSensor) === null || _a === void 0 ? void 0 : _a.setActiveWindow(window, "htmlDrag");
         });

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

@@ -154,7 +154,7 @@ export class PointerSensor extends BasePointerSensor {
             this.dragTarget = undefined;
             this.dragTargetWindow = undefined;
             this.previousDragTarget = undefined;
-            Transaction.separate(() => {
+            Transaction.isolate(() => {
                 var _a;
                 (_a = this.windowSensor) === null || _a === void 0 ? void 0 : _a.setActiveWindow(window, "pointer");
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.276",
+  "version": "0.24.301",
   "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.272"
+    "reactronic": "^0.24.301"
   },
   "devDependencies": {
     "@types/node": "20.11.17",