verstak 0.24.269 → 0.24.271

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

@@ -1,10 +1,14 @@
-import { RxNode, BaseDriver } from "reactronic";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { RxNode, BaseDriver, Transaction, obs, ObservableObject } from "reactronic";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
-export class ElDriver extends BaseDriver {
-    allocate(node) {
-        return new ElImpl(node);
-    }
-}
 export var ElKind;
 (function (ElKind) {
     ElKind[ElKind["section"] = 0] = "section";
@@ -12,23 +16,43 @@ export var ElKind;
     ElKind[ElKind["note"] = 2] = "note";
     ElKind[ElKind["group"] = 3] = "group";
     ElKind[ElKind["part"] = 4] = "part";
-    ElKind[ElKind["cursor"] = 5] = "cursor";
-    ElKind[ElKind["native"] = 6] = "native";
+    ElKind[ElKind["splitter"] = 5] = "splitter";
+    ElKind[ElKind["cursor"] = 6] = "cursor";
+    ElKind[ElKind["native"] = 7] = "native";
 })(ElKind || (ElKind = {}));
-export var Align;
-(function (Align) {
-    Align[Align["default"] = 0] = "default";
-    Align[Align["left"] = 4] = "left";
-    Align[Align["centerX"] = 5] = "centerX";
-    Align[Align["right"] = 6] = "right";
-    Align[Align["stretchX"] = 7] = "stretchX";
-    Align[Align["top"] = 32] = "top";
-    Align[Align["centerY"] = 40] = "centerY";
-    Align[Align["bottom"] = 48] = "bottom";
-    Align[Align["stretchY"] = 56] = "stretchY";
-    Align[Align["centerXY"] = 45] = "centerXY";
-    Align[Align["stretchXY"] = 63] = "stretchXY";
-})(Align || (Align = {}));
+export var Alignment;
+(function (Alignment) {
+    Alignment[Alignment["left"] = 0] = "left";
+    Alignment[Alignment["center"] = 1] = "center";
+    Alignment[Alignment["right"] = 2] = "right";
+    Alignment[Alignment["stretch"] = 3] = "stretch";
+})(Alignment || (Alignment = {}));
+export var VerticalAlignment;
+(function (VerticalAlignment) {
+    VerticalAlignment[VerticalAlignment["top"] = 0] = "top";
+    VerticalAlignment[VerticalAlignment["center"] = 1] = "center";
+    VerticalAlignment[VerticalAlignment["bottom"] = 2] = "bottom";
+    VerticalAlignment[VerticalAlignment["stretch"] = 3] = "stretch";
+})(VerticalAlignment || (VerticalAlignment = {}));
+export var SplitView;
+(function (SplitView) {
+    SplitView[SplitView["horizontal"] = 0] = "horizontal";
+    SplitView[SplitView["vertical"] = 1] = "vertical";
+})(SplitView || (SplitView = {}));
+class Size extends ObservableObject {
+    constructor() {
+        super();
+        this.raw = { min: "", max: "" };
+        this.minPx = 0;
+        this.maxPx = Number.POSITIVE_INFINITY;
+        this.preferredUsed = false;
+    }
+}
+export class ElDriver extends BaseDriver {
+    allocate(node) {
+        return new ElImpl(node);
+    }
+}
 export class ElImpl {
     constructor(node) {
         this.node = node;
@@ -40,14 +64,17 @@ export class ElImpl {
         this._kind = ElKind.part;
         this._area = undefined;
         this._coords = UndefinedElCoords;
-        this._width = { min: "", max: "" };
-        this._height = { min: "", max: "" };
-        this._alignment = Align.default;
-        this._extraAlignment = Align.default;
+        this._width = Transaction.separate(() => new Size());
+        this._height = Transaction.separate(() => new Size());
+        this._alignment = undefined;
+        this._verticalAlignment = undefined;
+        this._alignmentInside = undefined;
+        this._verticalAlignmentInside = undefined;
         this._stretchingStrengthX = undefined;
         this._stretchingStrengthY = undefined;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
+        this._splitView = undefined;
         this._hasStylingPresets = false;
     }
     prepareForUpdate() {
@@ -89,59 +116,89 @@ export class ElImpl {
         else
             this.rowBreak();
     }
-    get width() { return this._width; }
+    get width() { return this._width.raw; }
     set width(value) {
-        var _a, _b;
-        const w = this._width;
-        let updated = false;
-        if (value.min !== w.min) {
-            ElImpl.applyMinWidth(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
-            updated = true;
-        }
-        if (value.max !== w.max) {
-            ElImpl.applyMaxWidth(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
-            updated = true;
+        const w = this._width.raw;
+        if (value.min !== w.min || value.max !== w.max) {
+            ElImpl.applyWidth(this, value);
+            this._width.raw = value;
+            this._width.preferredUsed = false;
         }
-        if (updated)
-            this._width = value;
     }
-    get height() { return this._height; }
+    get widthPx() { return this._width; }
+    set widthPx(value) {
+        const w = this._width;
+        if (value.minPx !== w.minPx)
+            this._width.minPx = value.minPx;
+        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) {
-        var _a, _b;
-        const w = this._height;
-        let updated = false;
-        if (value.min !== w.min) {
-            ElImpl.applyMinHeight(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
-            updated = true;
-        }
-        if (value.max !== w.max) {
-            ElImpl.applyMaxHeight(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
-            updated = true;
+        const h = this._height.raw;
+        if (value.min !== h.min || value.max !== h.max) {
+            ElImpl.applyHeight(this, value);
+            this._height.raw = value;
+            this._height.preferredUsed = false;
         }
-        if (updated)
-            this._height = value;
+    }
+    get heightPx() { return this._height; }
+    set heightPx(value) {
+        const w = this._height;
+        if (value.minPx !== w.minPx)
+            this._height.minPx = value.minPx;
+        if (value.maxPx !== w.maxPx)
+            this._height.maxPx = value.maxPx;
+    }
+    get preferredHeightUsed() {
+        return this._height.preferredUsed;
+    }
+    set preferredHeightUsed(value) {
+        this._height.preferredUsed = value;
     }
     get alignment() { return this._alignment; }
     set alignment(value) {
         const existing = this._alignment;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, existing, value, this._extraAlignment, this._extraAlignment, this._stretchingStrengthX, this._stretchingStrengthY);
+            ElImpl.applyAlignment(this, existing, value, this._alignmentInside, this._alignmentInside, this._stretchingStrengthX);
             this._alignment = value;
         }
     }
-    get extraAlignment() { return this._extraAlignment; }
-    set extraAlignment(value) {
-        const existing = this._extraAlignment;
+    get verticalAlignment() { return this._verticalAlignment; }
+    set verticalAlignment(value) {
+        const existing = this._verticalAlignment;
+        if (value !== existing) {
+            ElImpl.applyVerticalAlignment(this, existing, value, this._verticalAlignmentInside, this._verticalAlignmentInside, this._stretchingStrengthY);
+            this._verticalAlignment = value;
+        }
+    }
+    get alignmentInside() { return this._alignmentInside; }
+    set alignmentInside(value) {
+        const existing = this._alignmentInside;
+        if (value !== existing) {
+            ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX);
+            this._alignmentInside = value;
+        }
+    }
+    get verticalAlignmentInside() { return this._verticalAlignmentInside; }
+    set verticalAlignmentInside(value) {
+        const existing = this._verticalAlignmentInside;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX, this._stretchingStrengthY);
-            this._extraAlignment = value;
+            ElImpl.applyVerticalAlignment(this, this._verticalAlignment, this._verticalAlignment, existing, value, this._stretchingStrengthY);
+            this._verticalAlignmentInside = value;
         }
     }
     get stretchingStrengthX() { return this._stretchingStrengthX; }
     set stretchingStrengthX(value) {
         const existing = this._stretchingStrengthX;
         if (value !== existing) {
-            ElImpl.applyStretchingStrengthX(this, existing !== null && existing !== void 0 ? existing : 0, value !== null && value !== void 0 ? value : 0);
+            ElImpl.applyStretchingStrengthX(this, existing, value);
             this._stretchingStrengthX = value;
         }
     }
@@ -149,7 +206,7 @@ export class ElImpl {
     set stretchingStrengthY(value) {
         const existing = this._stretchingStrengthY;
         if (value !== existing) {
-            ElImpl.applyStretchingStrengthY(this, existing !== null && existing !== void 0 ? existing : 0, value !== null && value !== void 0 ? value : 0);
+            ElImpl.applyStretchingStrengthY(this, existing, value);
             this._stretchingStrengthY = value;
         }
     }
@@ -167,6 +224,19 @@ export class ElImpl {
             this._overlayVisible = value;
         }
     }
+    get splitView() { return this._splitView; }
+    set splitView(value) {
+        if (value !== this._splitView) {
+            ElImpl.applySplitView(this, value);
+            this._splitView = value;
+        }
+    }
+    get partitionSizeInSplitViewPx() {
+        var _a;
+        if (this.layoutInfo === undefined)
+            this.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+        return (_a = this.layoutInfo.effectiveSizePx) !== null && _a !== void 0 ? _a : 0;
+    }
     get style() { return this.native.style; }
     useStylingPreset(stylingPresetName, enabled) {
         ElImpl.applyStylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
@@ -177,6 +247,9 @@ export class ElImpl {
         for (const child of this.node.children.items(after))
             yield child.instance.element;
     }
+    static *childrenOf(node, onlyAfter) {
+        return node.element.children(onlyAfter);
+    }
     rowBreak() {
         var _a, _b;
         const node = this.node;
@@ -203,36 +276,50 @@ export class ElImpl {
         else
             s.gridArea = "";
     }
-    static applyMinWidth(element, value) {
-        element.style.minWidth = `${value}`;
-    }
-    static applyMaxWidth(element, value) {
-        element.style.maxWidth = `${value}`;
-    }
-    static applyMinHeight(element, value) {
-        element.style.minHeight = `${value}`;
+    static applyWidth(element, value) {
+        var _a, _b;
+        const s = element.style;
+        const node = element.node;
+        const owner = node.owner;
+        const ownerEl = owner.element;
+        if (ownerEl.splitView === SplitView.horizontal) {
+        }
+        else {
+            s.minWidth = (_a = value.min) !== null && _a !== void 0 ? _a : "";
+            s.maxWidth = (_b = value.max) !== null && _b !== void 0 ? _b : "";
+        }
     }
-    static applyMaxHeight(element, value) {
-        element.style.maxHeight = `${value}`;
+    static applyHeight(element, value) {
+        var _a, _b;
+        const s = element.style;
+        const node = element.node;
+        const owner = node.owner;
+        const ownerEl = owner.element;
+        if (ownerEl.splitView === SplitView.vertical) {
+        }
+        else {
+            s.minHeight = (_a = value.min) !== null && _a !== void 0 ? _a : "";
+            s.maxHeight = (_b = value.max) !== null && _b !== void 0 ? _b : "";
+        }
     }
-    static applyAlignment(element, oldPrimary, newPrimary, oldExtra, newExtra, strengthX, strengthY) {
+    static applyAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
         var _a;
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Alignment.left);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Alignment.left);
+        oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
+        newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
         let hostLayout = undefined;
-        let hostCss = undefined;
         if (element.node.host.driver.isPartition) {
             const hostEl = element.node.host.element;
-            hostCss = hostEl.style;
             hostLayout = hostEl.layoutInfo;
             if (hostLayout === undefined)
                 hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
         }
-        if (newExtra === Align.default)
-            newExtra = newPrimary;
         let isEffectiveAlignerX = false;
         if (hostLayout) {
-            const isAligner = alignIs(newPrimary, Align.centerX) ||
-                alignIs(newPrimary, Align.right);
+            const isAligner = newPrimary === Alignment.center ||
+                newPrimary === Alignment.right;
             isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
                 element.index <= hostLayout.alignerX.index);
             if (hostLayout.alignerX === element) {
@@ -250,69 +337,86 @@ export class ElImpl {
                 }
             }
         }
-        switch (newPrimary & 0b00000111) {
+        switch (newPrimary) {
             default:
-            case Align.left:
+            case Alignment.left:
                 css.justifySelf = "start";
-                if (alignIs(oldPrimary, Align.centerX)) {
+                if (oldPrimary === Alignment.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if ((oldPrimary & Align.right) === Align.right)
+                else if (oldPrimary === Alignment.right)
                     css.marginLeft = "";
                 break;
-            case Align.centerX:
+            case Alignment.center:
                 css.justifySelf = "center";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
                 css.marginRight = "auto";
                 break;
-            case Align.right:
+            case Alignment.right:
                 css.justifySelf = "end";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
-                if (alignIs(oldPrimary, Align.centerX))
+                if (oldPrimary === Alignment.center)
                     css.marginRight = "";
                 break;
-            case Align.stretchX:
+            case Alignment.stretch:
                 css.justifySelf = "stretch";
-                if (alignIs(oldPrimary, Align.centerX)) {
+                if (oldPrimary === Alignment.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (alignIs(oldPrimary, Align.right))
+                else if (oldPrimary === Alignment.right)
                     css.marginLeft = "";
                 break;
         }
-        switch (newExtra & 0b00000111) {
+        switch (newInside) {
             default:
-            case Align.left:
+            case Alignment.left:
                 css.alignItems = "start";
                 css.textAlign = "left";
                 break;
-            case Align.centerX:
+            case Alignment.center:
                 css.alignItems = "center";
                 css.textAlign = "center";
                 break;
-            case Align.right:
+            case Alignment.right:
                 css.alignItems = "end";
                 css.textAlign = "right";
                 break;
-            case Align.stretchX:
+            case Alignment.stretch:
                 css.alignItems = "stretch";
                 css.textAlign = "justify";
                 break;
         }
+        if (newPrimary === Alignment.stretch && strength === undefined)
+            ElImpl.applyStretchingStrengthX(element, 0, 1);
+    }
+    static applyVerticalAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = VerticalAlignment.top);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = VerticalAlignment.top);
+        oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
+        newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
+        const css = element.style;
+        let hostLayout = undefined;
+        let hostCss = undefined;
+        if (element.node.host.driver.isPartition) {
+            const hostEl = element.node.host.element;
+            hostCss = hostEl.style;
+            hostLayout = hostEl.layoutInfo;
+            if (hostLayout === undefined)
+                hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+        }
         let isEffectiveAlignerY = false;
         if (hostLayout) {
-            const isAligner = alignIs(newPrimary, Align.centerY) ||
-                alignIs(newPrimary, Align.bottom);
+            const isAligner = newPrimary === VerticalAlignment.center ||
+                newPrimary === VerticalAlignment.bottom;
             isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
-                !alignIs(hostLayout.alignerY.alignment, Align.centerY));
+                hostLayout.alignerY.verticalAlignment !== VerticalAlignment.center);
             if (hostLayout.alignerY === element) {
                 if (!isEffectiveAlignerY) {
                     hostCss.marginTop = "";
-                    throw new Error("changing alignment leader is not implemented yet");
                 }
             }
             else {
@@ -322,55 +426,49 @@ export class ElImpl {
                 }
             }
         }
-        switch (newPrimary & 0b00111000) {
+        switch (newPrimary) {
             default:
-            case Align.top:
+            case VerticalAlignment.top:
                 css.alignSelf = "start";
                 break;
-            case Align.centerY:
+            case VerticalAlignment.center:
                 css.alignSelf = "center";
                 break;
-            case Align.bottom:
+            case VerticalAlignment.bottom:
                 css.alignSelf = "end";
                 break;
-            case Align.stretchY:
+            case VerticalAlignment.stretch:
                 css.alignSelf = "stretch";
                 break;
         }
-        switch (newExtra & 0b00111000) {
+        switch (newInside) {
             default:
-            case Align.top:
+            case VerticalAlignment.top:
                 css.justifyContent = "start";
                 break;
-            case Align.centerY:
+            case VerticalAlignment.center:
                 css.justifyContent = "center";
                 break;
-            case Align.bottom:
+            case VerticalAlignment.bottom:
                 css.justifyContent = "end";
                 break;
-            case Align.stretchY:
+            case VerticalAlignment.stretch:
                 css.justifyContent = "stretch";
                 break;
         }
-        if (alignIs(newPrimary, Align.stretchX) && strengthX === undefined)
-            ElImpl.applyStretchingStrengthX(element, 0, 1);
-        if (alignIs(newPrimary, Align.stretchY) && strengthY === undefined)
+        if (newPrimary === VerticalAlignment.stretch && strength === undefined)
             ElImpl.applyStretchingStrengthY(element, 0, 1);
     }
     static applyStretchingStrengthX(element, existing, value) {
         var _a;
         const s = element.style;
-        if (value > 0) {
-            s.flexGrow = `${value}`;
-            s.flexBasis = "0";
-        }
-        else {
-            s.flexGrow = "";
-            s.flexBasis = "";
-        }
         const host = element.node.host;
-        if (host.driver.isPartition) {
+        if (host.driver.isPartition && element.splitView === undefined) {
+            const hostEl = host.element;
+            hostEl._stretchingStrengthX = value;
             let delta = 0;
+            existing !== null && existing !== void 0 ? existing : (existing = 0);
+            value !== null && value !== void 0 ? value : (value = 0);
             if (existing === 0) {
                 if (value !== 0)
                     delta = 1;
@@ -380,7 +478,6 @@ export class ElImpl {
                     delta = -1;
             }
             if (delta !== 0) {
-                const hostEl = host.element;
                 const count = (_a = hostEl._stretchingStrengthX) !== null && _a !== void 0 ? _a : 0 + delta;
                 if (count === 1)
                     s.alignSelf = "stretch";
@@ -388,12 +485,25 @@ export class ElImpl {
                     s.alignSelf = "";
             }
         }
+        value !== null && value !== void 0 ? value : (value = 0);
+        if (value > 0) {
+            s.flexGrow = `${value}`;
+            s.flexBasis = "0";
+        }
+        else {
+            s.flexGrow = "";
+            s.flexBasis = "";
+        }
     }
     static applyStretchingStrengthY(element, existing, value) {
         var _a;
         const host = element.node.host;
-        if (host.driver.isPartition) {
+        if (host.driver.isPartition && element.splitView === undefined) {
+            const hostElement = host.element;
+            hostElement._stretchingStrengthY = value;
             let delta = 0;
+            existing !== null && existing !== void 0 ? existing : (existing = 0);
+            value !== null && value !== void 0 ? value : (value = 0);
             if (existing === 0) {
                 if (value !== 0)
                     delta = 1;
@@ -403,7 +513,6 @@ export class ElImpl {
                     delta = -1;
             }
             if (delta !== 0) {
-                const hostElement = host.element;
                 const count = (_a = hostElement._stretchingStrengthY) !== null && _a !== void 0 ? _a : 0 + delta;
                 const s = hostElement.style;
                 if (count === 1)
@@ -457,6 +566,13 @@ export class ElImpl {
                 s.position = s.display = s.left = s.right = s.top = s.bottom = "";
         }
     }
+    static applySplitView(element, value) {
+        const e = element.native;
+        if (e instanceof HTMLElement) {
+            e.style.position = value !== undefined ? "relative" : "";
+            Transaction.separate(() => e.sensors.resize.observeResizing(element, value !== undefined));
+        }
+    }
     static applyStylingPreset(element, secondary, styleName, enabled) {
         const native = element.native;
         enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
@@ -466,7 +582,7 @@ export class ElImpl {
             native.className = enabled ? styleName : "";
     }
 }
-class ElLayoutInfo {
+export class ElLayoutInfo {
     constructor(prev) {
         this.x = prev.x;
         this.y = prev.y;
@@ -475,17 +591,58 @@ class ElLayoutInfo {
         this.alignerX = undefined;
         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;
     }
 }
+__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)
+], ElLayoutInfo.prototype, "contentSizeXpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "contentSizeYpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "borderSizeYpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "borderSizeXpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Boolean)
+], ElLayoutInfo.prototype, "isConstrained", void 0);
 var ElLayoutInfoFlags;
 (function (ElLayoutInfoFlags) {
     ElLayoutInfoFlags[ElLayoutInfoFlags["none"] = 0] = "none";
     ElLayoutInfoFlags[ElLayoutInfoFlags["ownCursorPosition"] = 1] = "ownCursorPosition";
     ElLayoutInfoFlags[ElLayoutInfoFlags["usesRunningColumnCount"] = 2] = "usesRunningColumnCount";
     ElLayoutInfoFlags[ElLayoutInfoFlags["usesRunningRowCount"] = 4] = "usesRunningRowCount";
+    ElLayoutInfoFlags[ElLayoutInfoFlags["childrenRelayoutIsNeeded"] = 8] = "childrenRelayoutIsNeeded";
 })(ElLayoutInfoFlags || (ElLayoutInfoFlags = {}));
 const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
-const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none }));
+export const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, offsetXpx: 0, offsetYpx: 0, contentSizeXpx: 0, contentSizeYpx: 0, borderSizeXpx: 0, borderSizeYpx: 0, isConstrained: false }));
 function getElCoordsAndAdjustLayoutInfo(isRegularElement, area, maxX, maxY, prevElLayoutInfo, layoutInfo) {
     var _a, _b;
     let result;
@@ -597,55 +754,79 @@ export class CursorCommandDriver extends ElDriver {
 export const Constants = {
     element: "el",
     partition: "part",
+    splitter: "splitter",
     group: "group",
-    layouts: ["section", "table", "note", "group", "", ""],
+    layouts: ["section", "table", "note", "group", "", "", ""],
     keyAttrName: "key",
     kindAttrName: "kind",
 };
 const VerstakDriversByLayout = [
     el => {
         const owner = el.node.owner.element;
-        const s = el.native.style;
+        const s = el.style;
         s.display = "flex";
         s.flexDirection = "column";
         s.alignSelf = owner.isTable ? "stretch" : "center";
         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;
-        const s = el.native.style;
+        const s = el.style;
         s.alignSelf = owner.isTable ? "stretch" : "center";
         s.display = "grid";
         s.flexBasis = "0";
         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;
-        const s = el.native.style;
+        const s = el.style;
         s.alignSelf = owner.isTable ? "stretch" : "center";
         s.display = "inline-grid";
         s.flexShrink = "1";
     },
     el => {
-        const s = el.native.style;
+        const s = el.style;
         s.display = "contents";
     },
     el => {
         const owner = el.node.owner.element;
-        const s = el.native.style;
+        const s = el.style;
         s.display = owner.isTable ? "contents" : "flex";
         s.flexDirection = "row";
         s.gap = "inherit";
     },
+    el => {
+        const s = el.style;
+        const owner = el.node.owner.element;
+        s.position = "absolute";
+        s.zIndex = `${Number.MAX_SAFE_INTEGER}`;
+        if (owner.splitView === SplitView.horizontal) {
+            s.width = "4px";
+            s.marginLeft = "-2px";
+            s.top = s.bottom = "0";
+            s.cursor = "col-resize";
+        }
+        else {
+            s.height = "4px";
+            s.marginTop = "-2px";
+            s.left = s.right = "0";
+            s.cursor = "row-resize";
+        }
+    },
     el => {
     },
     el => {
     },
 ];
-function alignIs(align, like) {
-    return (align & like) == like;
-}