verstak 0.24.277 → 0.24.303

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)
@@ -345,8 +345,8 @@ export class RxDom {
             }
         }
     }
-    static renderIncrementally(parent, p1, p2, checkEveryN = 30, timeLimit = 12) {
-        return __awaiter(this, void 0, void 0, function* () {
+    static renderIncrementally(parent_1, p1_1, p2_1) {
+        return __awaiter(this, arguments, void 0, function* (parent, p1, p2, checkEveryN = 30, timeLimit = 12) {
             if (Transaction.isFrameOver(checkEveryN, timeLimit))
                 yield Transaction.requestNextFrame();
             if (!Transaction.isCanceled) {

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,28 +1,33 @@
-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>>;
-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 Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
-export declare function Splitter<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function rowBreak(shiftCursorDown?: number): void;
 export declare function declareSplitter<T>(index: number, splitViewNode: RxNode<El<T>>): RxNode<El<HTMLElement>>;
 export declare function cursor(areaParams: 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>(script: 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 function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, 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>>, basis?: 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;
+    child(ownerNode: RxNode<El<T, any>>, childDriver: RxNodeDriver<any>, childDeclaration?: RxNodeDecl<any> | undefined, childBasis?: 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

@@ -4,30 +4,21 @@ import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, r
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 import { clamp } from "./ElUtils.js";
-export function Panel(declaration, preset) {
-    return RxNode.declare(Drivers.panel, declaration, preset);
+export function Panel(declaration, basis) {
+    return RxNode.declare(Drivers.panel, declaration, basis);
 }
-export function Table(declaration, preset) {
-    return RxNode.declare(Drivers.table, declaration, preset);
+export function Table(declaration, basis) {
+    return RxNode.declare(Drivers.table, declaration, basis);
 }
 export function row(builder, shiftCursorDown) {
     rowBreak(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
-export function Splitter(declaration, preset) {
-    return RxNode.declare(Drivers.splitter, declaration, preset);
+export function Splitter(declaration, basis) {
+    return RxNode.declare(Drivers.splitter, declaration, basis);
 }
 export function rowBreak(shiftCursorDown) {
-    RxNode.declare(Drivers.partition, {
-        script: 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}`;
@@ -99,73 +90,45 @@ export function Note(content, formatted, declaration) {
         },
     });
 }
-export function Group(declaration, preset) {
-    return RxNode.declare(Drivers.group, declaration, preset);
+export function Group(declaration, basis) {
+    return RxNode.declare(Drivers.group, declaration, basis);
 }
 export function Handling(script) {
     return SyntheticElement({ mode: Mode.independentUpdate, script });
 }
-export function SyntheticElement(declaration, preset) {
-    return RxNode.declare(Drivers.synthetic, declaration, preset);
+export function SyntheticElement(declaration, basis) {
+    return RxNode.declare(Drivers.synthetic, declaration, basis);
 }
 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 },
                 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,10 +167,13 @@ export class PanelDriver extends HtmlDriver {
                     }
                 },
             });
+            RxNode.updateNestedNodesThenDo(() => {
+                layoutInfo.isUpdateFinished = true;
+            });
         }
         return result;
     }
-    child(ownerNode, childDriver, childDeclaration, childPreset) {
+    child(ownerNode, childDriver, childDeclaration, childBasis) {
         var _a;
         let result = undefined;
         const el = ownerNode.element;
@@ -260,12 +219,55 @@ function overrideMethod(declaration, method, func) {
         ? (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/HtmlDriver.d.ts

@@ -1,8 +1,8 @@
-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;
-    create(node: RxNode<El<T, M>>): void;
+    create(node: RxNode<El<T, M>>): void | Promise<void>;
     destroy(node: RxNode<El<T, M>>, isLeader: boolean): boolean;
     mount(node: RxNode<El<T, M>>): void;
     update(node: RxNode<El<T, M>>): void | Promise<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

@@ -1,4 +1,4 @@
-import { RxSystem, RxNode } from "reactronic";
+import { RxSystem, RxNode, proceedSyncOrAsync } from "reactronic";
 import { Constants, ElDriver, ElImpl } from "./El.js";
 export class WebDriver extends ElDriver {
     setNativeElement(node) {
@@ -8,9 +8,10 @@ export class WebDriver extends ElDriver {
         const e = node.element.native;
         if (RxSystem.isLogging && e !== undefined && !node.driver.isPartition)
             e.setAttribute(Constants.keyAttrName, node.key);
-        super.create(node);
+        const result = super.create(node);
         if (e == undefined && RxSystem.isLogging && !node.driver.isPartition)
             node.element.native.setAttribute(Constants.keyAttrName, node.key);
+        return result;
     }
     destroy(node, isLeader) {
         var _a;
@@ -31,7 +32,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);
@@ -56,14 +59,17 @@ export class WebDriver extends ElDriver {
         const element = node.element;
         if (element instanceof ElImpl)
             element.prepareForUpdate();
-        const result = super.update(node);
-        if (element.place === undefined) {
-            const oel = node.owner.element;
-            if (oel instanceof ElImpl && oel.isTable)
-                element.place = undefined;
-        }
-        if (gBlinkingEffectMarker)
-            blink(element.native, RxNode.currentUpdatePriority, node.stamp);
+        let result = super.update(node);
+        result = proceedSyncOrAsync(result, v => {
+            if (element.place === undefined) {
+                const oel = node.owner.element;
+                if (oel instanceof ElImpl && oel.isTable)
+                    element.place = undefined;
+            }
+            if (gBlinkingEffectMarker)
+                blink(element.native, RxNode.currentUpdatePriority, node.stamp);
+        }, e => {
+        });
         return result;
     }
     static findBrotherlyHost(node) {
@@ -80,8 +86,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) {