verstak 0.24.268 → 0.24.270

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

@@ -1,10 +1,5 @@
-import { RxNode, BaseDriver } from "reactronic";
+import { RxNode, BaseDriver, Transaction } 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 +7,34 @@ 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["centerWidth"] = 5] = "centerWidth";
+    Align[Align["centerX"] = 5] = "centerX";
     Align[Align["right"] = 6] = "right";
-    Align[Align["stretchWidth"] = 7] = "stretchWidth";
+    Align[Align["stretchX"] = 7] = "stretchX";
     Align[Align["top"] = 32] = "top";
-    Align[Align["centerHeight"] = 40] = "centerHeight";
+    Align[Align["centerY"] = 40] = "centerY";
     Align[Align["bottom"] = 48] = "bottom";
-    Align[Align["stretchHeight"] = 56] = "stretchHeight";
-    Align[Align["center"] = 45] = "center";
-    Align[Align["stretch"] = 63] = "stretch";
+    Align[Align["stretchY"] = 56] = "stretchY";
+    Align[Align["centerXY"] = 45] = "centerXY";
+    Align[Align["stretchXY"] = 63] = "stretchXY";
 })(Align || (Align = {}));
+export var SplitView;
+(function (SplitView) {
+    SplitView[SplitView["horizontal"] = 0] = "horizontal";
+    SplitView[SplitView["vertical"] = 1] = "vertical";
+})(SplitView || (SplitView = {}));
+export class ElDriver extends BaseDriver {
+    allocate(node) {
+        return new ElImpl(node);
+    }
+}
 export class ElImpl {
     constructor(node) {
         this.node = node;
@@ -40,20 +46,22 @@ export class ElImpl {
         this._kind = ElKind.part;
         this._area = undefined;
         this._coords = UndefinedElCoords;
-        this._width = { min: "", max: "" };
-        this._height = { min: "", max: "" };
+        this._width = { raw: { min: "", max: "" }, minPx: 0, maxPx: Number.POSITIVE_INFINITY };
+        this._height = { raw: { min: "", max: "" }, minPx: 0, maxPx: Number.POSITIVE_INFINITY };
         this._alignment = Align.default;
-        this._extraAlignment = Align.default;
+        this._alignmentInside = Align.default;
         this._stretchingStrengthX = undefined;
         this._stretchingStrengthY = undefined;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
+        this._splitView = undefined;
         this._hasStylingPresets = false;
     }
     prepareForUpdate() {
         this._area = undefined;
         this._hasStylingPresets = false;
     }
+    get index() { return this.node.seat.index; }
     get isSection() { return this.kind === ElKind.section; }
     get isTable() { return this.kind === ElKind.table; }
     get isAuxiliary() { return this.kind > ElKind.note; }
@@ -61,7 +69,7 @@ export class ElImpl {
     set kind(value) {
         if (value !== this._kind || this.node.stamp >= Number.MAX_SAFE_INTEGER - 1) {
             if (this.native !== undefined)
-                Apply.kind(this, value);
+                ElImpl.applyKind(this, value);
             this._kind = value;
         }
     }
@@ -80,7 +88,7 @@ export class ElImpl {
             const coords = getElCoordsAndAdjustLayoutInfo(!isCursorElement, value, ownerEl.maxColumnCount, ownerEl.maxRowCount, prevElLayoutInfo, layoutInfo);
             if (!equalElCoords(coords, this._coords)) {
                 if (this.native !== undefined)
-                    Apply.coords(this, coords);
+                    ElImpl.applyCoords(this, coords);
                 this._coords = coords;
             }
             this._area = value !== null && value !== void 0 ? value : {};
@@ -88,85 +96,104 @@ 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) {
-            Apply.minWidth(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
-            updated = true;
-        }
-        if (value.max !== w.max) {
-            Apply.maxWidth(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;
         }
-        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 height() { return this._height.raw; }
     set height(value) {
-        var _a, _b;
-        const w = this._height;
-        let updated = false;
-        if (value.min !== w.min) {
-            Apply.minHeight(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
-            updated = true;
-        }
-        if (value.max !== w.max) {
-            Apply.maxHeight(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;
         }
-        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 alignment() { return this._alignment; }
     set alignment(value) {
-        if (value !== this._alignment) {
-            Apply.alignment(this, value, this._extraAlignment, this._stretchingStrengthX, this._stretchingStrengthY);
+        const existing = this._alignment;
+        if (value !== existing) {
+            ElImpl.applyAlignment(this, existing, value, this._alignmentInside, this._alignmentInside, this._stretchingStrengthX, this._stretchingStrengthY);
             this._alignment = value;
         }
     }
-    get extraAlignment() { return this._extraAlignment; }
-    set extraAlignment(value) {
-        if (value !== this._extraAlignment) {
-            Apply.alignment(this, this._alignment, value, this._stretchingStrengthX, this._stretchingStrengthY);
-            this._extraAlignment = 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._stretchingStrengthY);
+            this._alignmentInside = value;
         }
     }
     get stretchingStrengthX() { return this._stretchingStrengthX; }
     set stretchingStrengthX(value) {
-        if (value !== this._stretchingStrengthX) {
-            Apply.stretchingStrengthX(this, value !== null && value !== void 0 ? value : 0);
+        const existing = this._stretchingStrengthX;
+        if (value !== existing) {
+            ElImpl.applyStretchingStrengthX(this, existing, value);
             this._stretchingStrengthX = value;
         }
     }
     get stretchingStrengthY() { return this._stretchingStrengthY; }
     set stretchingStrengthY(value) {
-        if (value !== this._stretchingStrengthY) {
-            Apply.stretchingStrengthY(this, value !== null && value !== void 0 ? value : 0);
+        const existing = this._stretchingStrengthY;
+        if (value !== existing) {
+            ElImpl.applyStretchingStrengthY(this, existing, value);
             this._stretchingStrengthY = value;
         }
     }
     get contentWrapping() { return this._contentWrapping; }
     set contentWrapping(value) {
         if (value !== this._contentWrapping) {
-            Apply.contentWrapping(this, value);
+            ElImpl.applyContentWrapping(this, value);
             this._contentWrapping = value;
         }
     }
     get overlayVisible() { return this._overlayVisible; }
     set overlayVisible(value) {
         if (value !== this._overlayVisible) {
-            Apply.overlayVisible(this, value);
+            ElImpl.applyOverlayVisible(this, value);
             this._overlayVisible = value;
         }
     }
+    get splitView() { return this._splitView; }
+    set splitView(value) {
+        if (value !== this._splitView) {
+            ElImpl.applySplitView(this, value);
+            this._splitView = value;
+        }
+    }
     get style() { return this.native.style; }
     useStylingPreset(stylingPresetName, enabled) {
-        Apply.stylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
+        ElImpl.applyStylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
         this._hasStylingPresets = true;
     }
+    *children(onlyAfter) {
+        const after = onlyAfter === null || onlyAfter === void 0 ? void 0 : onlyAfter.node.seat;
+        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;
@@ -176,14 +203,344 @@ export class ElImpl {
         layoutInfo.x = 1;
         layoutInfo.y = layoutInfo.runningMaxY + 1;
     }
+    static applyKind(element, value) {
+        const kind = Constants.layouts[value];
+        kind && element.native.setAttribute(Constants.kindAttrName, kind);
+        VerstakDriversByLayout[value](element);
+    }
+    static applyCoords(element, value) {
+        const s = element.style;
+        if (value) {
+            const x1 = value.x1 || 1;
+            const y1 = value.y1 || 1;
+            const x2 = value.x2 || x1;
+            const y2 = value.y2 || y1;
+            s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
+        }
+        else
+            s.gridArea = "";
+    }
+    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 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, oldInside, newInside, strengthX, strengthY) {
+        var _a;
+        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 (newInside === Align.default)
+            newInside = newPrimary;
+        let isEffectiveAlignerX = false;
+        if (hostLayout) {
+            const isAligner = alignedX(newPrimary, Align.centerX) ||
+                alignedX(newPrimary, Align.right);
+            isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
+                element.index <= hostLayout.alignerX.index);
+            if (hostLayout.alignerX === element) {
+                if (!isEffectiveAlignerX) {
+                    css.marginLeft = "";
+                    throw new Error("changing alignment leader is not implemented yet");
+                }
+            }
+            else {
+                if (isEffectiveAlignerX) {
+                    const existingAlignerCss = (_a = hostLayout.alignerX) === null || _a === void 0 ? void 0 : _a.style;
+                    if (existingAlignerCss)
+                        existingAlignerCss.marginLeft = "";
+                    hostLayout.alignerX = element;
+                }
+            }
+        }
+        switch (newPrimary & 0b00000111) {
+            default:
+            case Align.left:
+                css.justifySelf = "start";
+                if (alignedX(oldPrimary, Align.centerX)) {
+                    css.marginLeft = "";
+                    css.marginRight = "";
+                }
+                else if ((oldPrimary & Align.right) === Align.right)
+                    css.marginLeft = "";
+                break;
+            case Align.centerX:
+                css.justifySelf = "center";
+                if (hostLayout)
+                    css.marginLeft = isEffectiveAlignerX ? "auto" : "";
+                css.marginRight = "auto";
+                break;
+            case Align.right:
+                css.justifySelf = "end";
+                if (hostLayout)
+                    css.marginLeft = isEffectiveAlignerX ? "auto" : "";
+                if (alignedX(oldPrimary, Align.centerX))
+                    css.marginRight = "";
+                break;
+            case Align.stretchX:
+                css.justifySelf = "stretch";
+                if (alignedX(oldPrimary, Align.centerX)) {
+                    css.marginLeft = "";
+                    css.marginRight = "";
+                }
+                else if (alignedX(oldPrimary, Align.right))
+                    css.marginLeft = "";
+                break;
+        }
+        switch (newInside & 0b00000111) {
+            default:
+            case Align.left:
+                css.alignItems = "start";
+                css.textAlign = "left";
+                break;
+            case Align.centerX:
+                css.alignItems = "center";
+                css.textAlign = "center";
+                break;
+            case Align.right:
+                css.alignItems = "end";
+                css.textAlign = "right";
+                break;
+            case Align.stretchX:
+                css.alignItems = "stretch";
+                css.textAlign = "justify";
+                break;
+        }
+        let isEffectiveAlignerY = false;
+        if (hostLayout) {
+            const isAligner = alignedY(newPrimary, Align.centerY) ||
+                alignedY(newPrimary, Align.bottom);
+            isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
+                !alignedY(hostLayout.alignerY.alignment, Align.centerY));
+            if (hostLayout.alignerY === element) {
+                if (!isEffectiveAlignerY) {
+                    hostCss.marginTop = "";
+                }
+            }
+            else {
+                if (isEffectiveAlignerY) {
+                    hostCss.marginTop = "auto";
+                    hostLayout.alignerY = element;
+                }
+            }
+        }
+        switch (newPrimary & 0b00111000) {
+            default:
+            case Align.top:
+                css.alignSelf = "start";
+                break;
+            case Align.centerY:
+                css.alignSelf = "center";
+                break;
+            case Align.bottom:
+                css.alignSelf = "end";
+                break;
+            case Align.stretchY:
+                css.alignSelf = "stretch";
+                break;
+        }
+        switch (newInside & 0b00111000) {
+            default:
+            case Align.top:
+                css.justifyContent = "start";
+                break;
+            case Align.centerY:
+                css.justifyContent = "center";
+                break;
+            case Align.bottom:
+                css.justifyContent = "end";
+                break;
+            case Align.stretchY:
+                css.justifyContent = "stretch";
+                break;
+        }
+        if (alignedX(newPrimary, Align.stretchX) && strengthX === undefined)
+            ElImpl.applyStretchingStrengthX(element, 0, 1);
+        if (alignedY(newPrimary, Align.stretchY) && strengthY === undefined)
+            ElImpl.applyStretchingStrengthY(element, 0, 1);
+    }
+    static applyStretchingStrengthX(element, existing, value) {
+        var _a;
+        const s = element.style;
+        const host = element.node.host;
+        if (host.driver.isPartition && element.splitView === undefined) {
+            const hostEl = host.element;
+            hostEl._stretchingStrengthX = value;
+            let delta = 0;
+            existing !== null && existing !== void 0 ? existing : (existing = 0);
+            value !== null && value !== void 0 ? value : (value = 0);
+            if (existing === 0) {
+                if (value !== 0)
+                    delta = 1;
+            }
+            else if (value === 0) {
+                if (existing !== 0)
+                    delta = -1;
+            }
+            if (delta !== 0) {
+                const count = (_a = hostEl._stretchingStrengthX) !== null && _a !== void 0 ? _a : 0 + delta;
+                if (count === 1)
+                    s.alignSelf = "stretch";
+                else if (count === 0)
+                    s.alignSelf = "";
+            }
+        }
+        value !== null && value !== void 0 ? value : (value = 0);
+        if (value > 0) {
+            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 && 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;
+            }
+            else if (value === 0) {
+                if (existing !== 0)
+                    delta = -1;
+            }
+            if (delta !== 0) {
+                const count = (_a = hostElement._stretchingStrengthY) !== null && _a !== void 0 ? _a : 0 + delta;
+                const s = hostElement.style;
+                if (count === 1)
+                    s.flexGrow = `${value}`;
+                else if (count === 0)
+                    s.flexGrow = "";
+            }
+        }
+    }
+    static applyContentWrapping(element, value) {
+        const s = element.style;
+        if (value) {
+            s.flexFlow = "wrap";
+            s.overflow = "";
+            s.textOverflow = "";
+            s.whiteSpace = "";
+        }
+        else {
+            s.flexFlow = "";
+            s.overflow = "hidden";
+            s.textOverflow = "ellipsis";
+            s.whiteSpace = "nowrap";
+        }
+    }
+    static applyOverlayVisible(element, value) {
+        const s = element.style;
+        const host = RxNode.findMatchingHost(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
+        const nativeHost = host === null || host === void 0 ? void 0 : host.element.native;
+        if (value === true) {
+            const doc = document.body;
+            const rect = nativeHost.getBoundingClientRect();
+            if (doc.offsetWidth - rect.left > rect.right)
+                s.left = "0", s.right = "";
+            else
+                s.left = "", s.right = "0";
+            if (doc.clientHeight - rect.top > rect.bottom)
+                s.top = "100%", s.bottom = "";
+            else
+                s.top = "", s.bottom = "100%";
+            s.display = "";
+            s.position = "absolute";
+            s.minWidth = "100%";
+            s.boxSizing = "border-box";
+            nativeHost.style.position = "relative";
+        }
+        else {
+            nativeHost.style.position = "";
+            if (value === false)
+                s.display = "none";
+            else
+                s.position = s.display = s.left = s.right = s.top = s.bottom = "";
+        }
+    }
+    static applySplitView(element, value) {
+        const e = element.native;
+        if (e instanceof HTMLElement) {
+            const s = e.style;
+            if (value !== undefined) {
+                s.display = "flex";
+                s.position = "relative";
+                if (value === SplitView.horizontal) {
+                    s.flexDirection = "row";
+                    s.overflow = "scroll hidden";
+                }
+                else {
+                    s.flexDirection = "column";
+                    s.overflow = "hidden scroll";
+                }
+            }
+            else {
+                s.display = "";
+                s.position = "";
+                s.overflow = "";
+            }
+            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);
+        if (secondary)
+            native.classList.toggle(styleName, enabled);
+        else
+            native.className = enabled ? styleName : "";
+    }
 }
-class ElLayoutInfo {
+export class ElLayoutInfo {
     constructor(prev) {
         this.x = prev.x;
         this.y = prev.y;
         this.runningMaxX = prev.runningMaxX;
         this.runningMaxY = prev.runningMaxY;
+        this.alignerX = undefined;
+        this.alignerY = undefined;
         this.flags = prev.flags & ~ElLayoutInfoFlags.ownCursorPosition;
+        this.effectiveSizePx = 0;
+        this.offsetXpx = 0;
+        this.offsetYpx = 0;
+        this.containerSizeXpx = 0;
+        this.containerSizeYpx = 0;
     }
 }
 var ElLayoutInfoFlags;
@@ -192,9 +549,10 @@ var ElLayoutInfoFlags;
     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, containerSizeXpx: 0, containerSizeYpx: 0 }));
 function getElCoordsAndAdjustLayoutInfo(isRegularElement, area, maxX, maxY, prevElLayoutInfo, layoutInfo) {
     var _a, _b;
     let result;
@@ -303,219 +661,89 @@ export class CursorCommandDriver extends ElDriver {
         super("cursor", false, el => el.kind = ElKind.cursor);
     }
 }
-export class Apply {
-    static kind(element, value) {
-        const kind = Constants.layouts[value];
-        kind && element.native.setAttribute(Constants.kindAttrName, kind);
-        VerstakDriversByLayout[value](element);
-    }
-    static coords(element, value) {
-        if (element.native instanceof HTMLElement) {
-            const s = element.native.style;
-            if (value) {
-                const x1 = value.x1 || 1;
-                const y1 = value.y1 || 1;
-                const x2 = value.x2 || x1;
-                const y2 = value.y2 || y1;
-                s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
-            }
-            else
-                s.gridArea = "";
-        }
-    }
-    static minWidth(element, value) {
-        if (element.native instanceof HTMLElement)
-            element.native.style.minWidth = `${value}`;
-    }
-    static maxWidth(element, value) {
-        if (element.native instanceof HTMLElement)
-            element.native.style.maxWidth = `${value}`;
-    }
-    static minHeight(element, value) {
-        if (element.native instanceof HTMLElement)
-            element.native.style.minHeight = `${value}`;
-    }
-    static maxHeight(element, value) {
-        if (element.native instanceof HTMLElement)
-            element.native.style.maxHeight = `${value}`;
-    }
-    static alignment(element, primary, extra, strengthX, strengthY) {
-        if (element.native instanceof HTMLElement) {
-            const s = element.native.style;
-            let v1 = "";
-            let h1 = "";
-            let t1 = "";
-            if (primary !== Align.default) {
-                v1 = AlignToCss[(primary >> 3) & 0b11];
-                h1 = AlignToCss[primary & 0b11];
-                t1 = TextAlignCss[primary & 0b11];
-            }
-            s.alignSelf = v1;
-            s.justifySelf = h1;
-            if ((primary & Align.left) !== 0 && strengthX === undefined)
-                Apply.stretchingStrengthX(element, 1);
-            if ((primary & Align.top) !== 0 && strengthY === undefined)
-                Apply.stretchingStrengthY(element, 1);
-            let v2 = "";
-            let h2 = "";
-            let t2 = "";
-            if (extra !== Align.default) {
-                v2 = AlignToCss[(extra >> 3) & 0b11];
-                h2 = AlignToCss[extra & 0b11];
-                t2 = TextAlignCss[extra & 0b11];
-            }
-            else {
-                v2 = v1;
-                h2 = h1;
-                t2 = t1;
-            }
-            s.justifyContent = v2;
-            s.alignItems = h2;
-            s.textAlign = t2;
-        }
-    }
-    static stretchingStrengthX(element, value) {
-        if (element.native instanceof HTMLElement) {
-            const s = element.native.style;
-            if (value > 0) {
-                s.flexGrow = `${value}`;
-                s.flexBasis = "0";
-            }
-            else {
-                s.flexGrow = "";
-                s.flexBasis = "";
-            }
-        }
-    }
-    static stretchingStrengthY(element, value) {
-        const bNode = element.node;
-        const driver = bNode.driver;
-        if (driver.isPartition) {
-            if (element.native instanceof HTMLElement) {
-                const s = element.native.style;
-                if (value > 0)
-                    s.flexGrow = `${value}`;
-                else
-                    s.flexGrow = "";
-            }
-        }
-        else {
-            const hostDriver = bNode.host.driver;
-            if (hostDriver.isPartition) {
-                const host = bNode.host.seat.instance;
-                Apply.alignment(host.element, Align.stretchHeight, Align.default, undefined, undefined);
-                Apply.stretchingStrengthY(host.element, value);
-            }
-        }
-    }
-    static contentWrapping(element, value) {
-        if (element.native instanceof HTMLElement) {
-            const s = element.native.style;
-            if (value) {
-                s.flexFlow = "wrap";
-                s.overflow = "";
-                s.textOverflow = "";
-                s.whiteSpace = "";
-            }
-            else {
-                s.flexFlow = "";
-                s.overflow = "hidden";
-                s.textOverflow = "ellipsis";
-                s.whiteSpace = "nowrap";
-            }
-        }
-    }
-    static overlayVisible(element, value) {
-        const e = element.native;
-        if (e instanceof HTMLElement) {
-            const s = e.style;
-            const host = RxNode.findMatchingHost(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
-            const nativeHost = host === null || host === void 0 ? void 0 : host.element.native;
-            if (value === true) {
-                const doc = document.body;
-                const rect = nativeHost.getBoundingClientRect();
-                if (doc.offsetWidth - rect.left > rect.right)
-                    s.left = "0", s.right = "";
-                else
-                    s.left = "", s.right = "0";
-                if (doc.clientHeight - rect.top > rect.bottom)
-                    s.top = "100%", s.bottom = "";
-                else
-                    s.top = "", s.bottom = "100%";
-                s.display = "";
-                s.position = "absolute";
-                s.minWidth = "100%";
-                s.boxSizing = "border-box";
-                nativeHost.style.position = "relative";
-            }
-            else {
-                nativeHost.style.position = "";
-                if (value === false)
-                    s.display = "none";
-                else
-                    s.position = s.display = s.left = s.right = s.top = s.bottom = "";
-            }
-        }
-    }
-    static stylingPreset(element, secondary, styleName, enabled) {
-        const native = element.native;
-        enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
-        if (secondary)
-            native.classList.toggle(styleName, enabled);
-        else
-            native.className = enabled ? styleName : "";
-    }
-}
 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}`;
+        s.backgroundColor = "#00BB00";
+        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 => {
     },
 ];
-const AlignToCss = ["start", "center", "end", "stretch"];
-const TextAlignCss = ["left", "center", "right", "justify"];
+function alignedX(align, like) {
+    return (align & 0b00000011) == (like & 0b00000011);
+}
+function alignedY(align, like) {
+    return (align & 0b00011000) == (like & 0b00011000);
+}