verstak 0.96.26031 → 0.96.26035

package/build/dist/source/components/Button.v.d.ts

@@ -1,8 +1,8 @@
-import { ReactiveTreeNode, ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc } from "reactronic";
 import { El } from "verstak";
 export type ButtonModel = {
     icon?: string;
     label?: string;
     action?(): void;
 };
-export declare function Button(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, ButtonModel>>): ReactiveTreeNode<El<HTMLElement, ButtonModel>>;
+export declare function Button(description?: ReactiveTreeNodeDesc<El<HTMLElement, ButtonModel>>): ReactiveTreeNode<El<HTMLElement, ButtonModel>>;

package/build/dist/source/components/Button.v.js

@@ -3,8 +3,8 @@ import { Element, OnClick } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
-export function Button(declaration) {
-    return (Element(setBasis(declaration, {
+export function Button(description) {
+    return (Element(setBasis(description, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({

package/build/dist/source/components/Icon.v.d.ts

@@ -1,3 +1,3 @@
-import { ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNodeDesc } from "reactronic";
 import { El } from "verstak";
-export declare function Icon(name: string, declaration?: ReactiveTreeNodeDecl<El<HTMLElement, void>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, void>>;
+export declare function Icon(name: string, description?: ReactiveTreeNodeDesc<El<HTMLElement, void>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, void>>;

package/build/dist/source/components/Icon.v.js

@@ -1,8 +1,8 @@
 import { setBasis } from "reactronic";
 import { Element } from "verstak";
 import { Theme } from "./Theme.js";
-export function Icon(name, declaration) {
-    return (Element(setBasis(declaration, {
+export function Icon(name, description) {
+    return (Element(setBasis(description, {
         signalArgs: { name },
         body() {
             const theme = Theme.current.icon;

package/build/dist/source/components/Image.v.d.ts

@@ -1,6 +1,6 @@
-import { ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNodeDesc } from "reactronic";
 import { El } from "verstak";
 export type ImageModel = {
     source?: string;
 };
-export declare function Image(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, ImageModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, ImageModel>>;
+export declare function Image(description?: ReactiveTreeNodeDesc<El<HTMLElement, ImageModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, ImageModel>>;

package/build/dist/source/components/Image.v.js

@@ -1,8 +1,8 @@
 import { setBasis } from "reactronic";
 import { Element } from "verstak";
 import { rxModel } from "./common/Utils.js";
-export function Image(declaration) {
-    return (Element(setBasis(declaration, {
+export function Image(description) {
+    return (Element(setBasis(description, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({ source: undefined }));

package/build/dist/source/components/Input.v.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNodeDesc } from "reactronic";
 import { FocusModel, El } from "verstak";
 import { ValuesOrRefs } from "./common/Utils.js";
 export type InputModel<T = string> = FocusModel & {
@@ -12,5 +12,5 @@ export type InputModel<T = string> = FocusModel & {
     isHotText: boolean;
     inputStyle: string;
 };
-export declare function Input(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, InputModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, InputModel<string>>>;
+export declare function Input(description?: ReactiveTreeNodeDesc<El<HTMLElement, InputModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, InputModel<string>>>;
 export declare function composeInputModel<T>(props?: Partial<ValuesOrRefs<InputModel<T>>>): InputModel<T>;

package/build/dist/source/components/Input.v.js

@@ -3,8 +3,8 @@ import { Element, OnFocus, rowBreak, Fragment, KeyboardModifiers, H, V } from "v
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
-export function Input(declaration) {
-    return (Element(setBasis(declaration, {
+export function Input(description) {
+    return (Element(setBasis(description, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeInputModel());

package/build/dist/source/components/Spinner.v.d.ts

@@ -1,9 +1,9 @@
-import { ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNodeDesc } from "reactronic";
 import { El } from "verstak";
 import { ValuesOrRefs } from "./common/Utils.js";
 export type SpinnerModel = {
     active: boolean;
     color: string;
 };
-export declare function Spinner(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, SpinnerModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, SpinnerModel>>;
+export declare function Spinner(description?: ReactiveTreeNodeDesc<El<HTMLElement, SpinnerModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, SpinnerModel>>;
 export declare function composeSpinnerModel<T>(props?: Partial<ValuesOrRefs<SpinnerModel>>): SpinnerModel;

package/build/dist/source/components/Spinner.v.js

@@ -1,8 +1,8 @@
 import { Mode, setBasis } from "reactronic";
 import { Element } from "verstak";
 import { rxModel } from "./common/Utils.js";
-export function Spinner(declaration) {
-    return (Element(setBasis(declaration, {
+export function Spinner(description) {
+    return (Element(setBasis(description, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeSpinnerModel());

package/build/dist/source/components/Toggle.v.d.ts

@@ -1,8 +1,8 @@
-import { ReactiveTreeNode, ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc } from "reactronic";
 import { El } from "verstak";
 export type ToggleModel = {
     label?: string;
     checked?: boolean;
     color?: string;
 };
-export declare function Toggle(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, ToggleModel>>): ReactiveTreeNode<El<HTMLElement, ToggleModel>>;
+export declare function Toggle(description?: ReactiveTreeNodeDesc<El<HTMLElement, ToggleModel>>): ReactiveTreeNode<El<HTMLElement, ToggleModel>>;

package/build/dist/source/components/Toggle.v.js

@@ -3,8 +3,8 @@ import { Element, OnClick } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
-export function Toggle(declaration) {
-    return (Element(setBasis(declaration, {
+export function Toggle(description) {
+    return (Element(setBasis(description, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({

package/build/dist/source/core/ElDriver.d.ts

@@ -144,21 +144,7 @@ declare enum ElLayoutInfoFlags {
     childrenRelayoutIsNeeded = 8
 }
 export declare const InitialElLayoutInfo: ElLayoutInfo;
-export declare class CursorCommand {
-    absolute?: string;
-    columnShift?: number;
-    rowShift?: number;
-}
-export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
-    constructor();
-}
 export declare const Constants: {
-    element: string;
-    partition: string;
-    wrapper: string;
-    splitter: string;
-    group: string;
-    layouts: string[];
     keyAttrName: string;
     kindAttrName: string;
     ownReactiveTreeNodeKey: symbol;

package/build/dist/source/core/ElDriver.js

@@ -72,7 +72,7 @@ export class ElImpl {
             const prevEl = (_a = node.prev) === null || _a === void 0 ? void 0 : _a.element;
             const prevElLayoutInfo = (_b = prevEl === null || prevEl === void 0 ? void 0 : prevEl.layoutInfo) !== null && _b !== void 0 ? _b : InitialElLayoutInfo;
             const layoutInfo = this.layoutInfo = owner.children.isStrictOrder ? new ElLayoutInfo(prevElLayoutInfo) : undefined;
-            const isCursorElement = driver instanceof CursorCommandDriver;
+            const isCursorElement = this.kind === ElKind.cursor;
             const coords = getElCoordsAndAdjustLayoutInfo(!isCursorElement, value, ownerEl.maxColumnCount, ownerEl.maxRowCount, prevElLayoutInfo, layoutInfo);
             if (!equalElCoords(coords, this._coords)) {
                 if (this.native !== undefined)
@@ -352,6 +352,7 @@ export class ElImpl {
             el.classList.add(StylingClassNameByAlignmentVerticalRowWise[value]);
     }
     static applySelfAlignmentHorizontal(element, existing, value) {
+        var _a;
         const e = element.native;
         if (existing !== undefined) {
             e.classList.remove(StylingClassNameBySelfAlignmentHorizontal[existing]);
@@ -360,7 +361,7 @@ export class ElImpl {
         }
         if (value !== undefined) {
             e.classList.add(StylingClassNameBySelfAlignmentHorizontal[value]);
-            const grow = element.selfStretchingStrengthHorizontal;
+            const grow = (_a = element.selfStretchingStrengthHorizontal) !== null && _a !== void 0 ? _a : 1;
             if ((value === H.stretch || value === H.stretchAndFix) && grow !== undefined && grow !== 1)
                 element.style.flexGrow = `${grow}`;
             else
@@ -669,20 +670,7 @@ function absolutizePosition(pos, cursor, max) {
         pos = Math.min(pos, max);
     return pos;
 }
-export class CursorCommand {
-}
-export class CursorCommandDriver extends ElDriver {
-    constructor() {
-        super("cursor", false, el => el.kind = ElKind.cursor);
-    }
-}
 export const Constants = {
-    element: "el",
-    partition: "part",
-    wrapper: "wrapper",
-    splitter: "splitter",
-    group: "group",
-    layouts: ["element", "table", "group", "", "", ""],
     keyAttrName: "key",
     kindAttrName: "kind",
     ownReactiveTreeNodeKey: Symbol("own-reactive-tree-node"),

package/build/dist/source/core/HtmlApiExt.d.ts

@@ -1,5 +1,5 @@
 import { DataForSensor } from "../core/sensors/DataForSensor.js";
-import { HtmlSensors } from "../core/sensors/HtmlSensors.js";
+import { HtmlSensors } from "../core/sensors/api.js";
 declare global {
     interface Element {
         sensors: HtmlSensors;

package/build/dist/source/core/HtmlApiExt.js

@@ -1,5 +1,5 @@
 import { SymDataForSensor, SymHtmlSensors, SymResizeObserver } from "../core/sensors/DataForSensor.js";
-import { HtmlSensors } from "../core/sensors/HtmlSensors.js";
+import { HtmlSensors } from "../core/sensors/api.js";
 const ElementType = Element !== null && Element !== void 0 ? Element : global.Element;
 if (ElementType !== undefined) {
     Object.defineProperty(ElementType.prototype, "sensors", {

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

@@ -1,6 +1,7 @@
 import { Direction } from "./El.js";
 import { clamp } from "./ElUtils.js";
-import { Drivers, isSplitViewPartition } from "./Elements.js";
+import { isSplitViewPartition } from "./elements/Splitter.js";
+import { SplitterDriver } from "./elements/Splitter.js";
 const DEBUG = false;
 const eps = 0.0001;
 export function equal(a, b) {
@@ -133,7 +134,7 @@ export function layout(splitViewNode) {
                 }
             }
         }
-        else if (child.driver === Drivers.splitter) {
+        else if (child.driver instanceof SplitterDriver) {
             const el = child.element;
             if (el.native !== undefined) {
                 el.style.display = isSplitterEnabled ? "block" : "none";

package/build/dist/source/core/WebDriver.d.ts

@@ -17,7 +17,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, isPartition: boolean, initialize?: Handler<El<T>>);
+    constructor(native: T, id: string, isPartition: boolean, initialize?: Handler<El<T>>);
     assignNativeElement(node: ReactiveTreeNode<El<T>>): void;
 }
 export declare class HtmlDriver<T extends HTMLElement, M = any> extends WebDriver<T, M> {

package/build/dist/source/core/WebDriver.js

@@ -105,8 +105,8 @@ export class WebDriver extends ElDriver {
     }
 }
 export class StaticDriver extends WebDriver {
-    constructor(native, name, isPartition, initialize) {
-        super(name, isPartition, initialize);
+    constructor(native, id, isPartition, initialize) {
+        super(id, isPartition, initialize);
         this.native = native;
     }
     assignNativeElement(node) {
@@ -115,12 +115,12 @@ export class StaticDriver extends WebDriver {
 }
 export class HtmlDriver extends WebDriver {
     assignNativeElement(node) {
-        node.element.native = document.createElement(node.driver.name);
+        node.element.native = document.createElement(node.driver.id);
     }
 }
 export class SvgDriver extends WebDriver {
     assignNativeElement(node) {
-        node.element.native = document.createElementNS("http://www.w3.org/2000/svg", node.driver.name);
+        node.element.native = document.createElementNS("http://www.w3.org/2000/svg", node.driver.id);
     }
 }
 function blink(element, priority, revision) {

package/build/dist/source/core/api.d.ts

@@ -5,7 +5,7 @@ export * from "./ElDriver.js";
 export * from "./WebDriver.js";
 export * from "./Sizes.js";
 export * from "./SplitViewMath.js";
-export * from "./Elements.js";
+export * from "./elements/api.js";
 export * from "./sensors/api.js";
 export * from "./HtmlApiExt.js";
 import "./HtmlApiExt.js";

package/build/dist/source/core/api.js

@@ -5,7 +5,7 @@ export * from "./ElDriver.js";
 export * from "./WebDriver.js";
 export * from "./Sizes.js";
 export * from "./SplitViewMath.js";
-export * from "./Elements.js";
+export * from "./elements/api.js";
 export * from "./sensors/api.js";
 export * from "./HtmlApiExt.js";
 import "./HtmlApiExt.js";

package/build/dist/source/core/elements/ApplicationWindow.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
+import { El } from "../El.js";
+import { ElementDriver } from "./Element.js";
+export declare function ApplicationWindow(body: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(key: string, body: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(mode: Mode, body: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(description: ReactiveTreeNodeDesc<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(key?: string, mode?: Mode, body?: Script<El<HTMLElement>>, bodyTask?: ScriptAsync<El<HTMLElement>>, preparation?: Script<El<HTMLElement>>, preparationTask?: ScriptAsync<El<HTMLElement>>, mounting?: Script<El<HTMLElement>>, finalization?: Script<El<HTMLElement>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare class ApplicationWindowDriver<T extends HTMLElement> extends ElementDriver<T> {
+    readonly native: T;
+    constructor(native: T);
+    assignNativeElement(node: ReactiveTreeNode<El<T>>): void;
+}

package/build/dist/source/core/elements/ApplicationWindow.js

@@ -0,0 +1,20 @@
+import { describe } from "reactronic";
+import { ElementDriver } from "./Element.js";
+import { acquireVerstakStyleSheet } from "./v5k.js";
+export function ApplicationWindow(bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis) {
+    acquireVerstakStyleSheet();
+    const page = (document !== null && document !== void 0 ? document : global.document).body;
+    const driver = new ApplicationWindowDriver(page);
+    page.classList.add("v5k-app");
+    page.classList.add("v5k-element");
+    return describe(driver, bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis);
+}
+export class ApplicationWindowDriver extends ElementDriver {
+    constructor(native) {
+        super();
+        this.native = native;
+    }
+    assignNativeElement(node) {
+        node.element.native = this.native;
+    }
+}

package/build/dist/source/core/elements/Cursor.d.ts

@@ -0,0 +1,13 @@
+import { ElPlace } from "../El.js";
+import { ElDriver } from "../ElDriver.js";
+export declare function cursor(place: ElPlace): void;
+export declare class CursorCommand {
+    absolute?: string;
+    columnShift?: number;
+    rowShift?: number;
+}
+export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
+    static readonly id = "cursor";
+    static readonly glob: CursorCommandDriver;
+    constructor();
+}

package/build/dist/source/core/elements/Cursor.js

@@ -0,0 +1,19 @@
+import { describe } from "reactronic";
+import { ElKind } from "../El.js";
+import { ElDriver } from "../ElDriver.js";
+export function cursor(place) {
+    describe(CursorCommandDriver.glob, {
+        body() {
+            this.place = place;
+        },
+    });
+}
+export class CursorCommand {
+}
+export class CursorCommandDriver extends ElDriver {
+    constructor() {
+        super(CursorCommandDriver.id, false, el => el.kind = ElKind.cursor);
+    }
+}
+CursorCommandDriver.id = "cursor";
+CursorCommandDriver.glob = new CursorCommandDriver();

package/build/dist/source/core/elements/Element.d.ts

@@ -0,0 +1,15 @@
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, ReactiveTreeNodeDriver, LinkedItem, Script, Mode, ScriptAsync } from "reactronic";
+import { El } from "../El.js";
+import { HtmlDriver } from "../WebDriver.js";
+export declare function Element<M = unknown>(body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Element<M = unknown>(key: string, body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Element<M = unknown>(mode: Mode, body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Element<M = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Element<M = unknown>(key?: string, mode?: Mode, body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare class ElementDriver<T extends HTMLElement> extends HtmlDriver<T> {
+    static readonly id: string;
+    static readonly glob: ElementDriver<HTMLElement>;
+    constructor();
+    rebuildBody(node: ReactiveTreeNode<El<T>>): void | Promise<void>;
+    describeChild(ownerNode: ReactiveTreeNode<El<T, any>>, childDriver: ReactiveTreeNodeDriver<any>, childDescription?: ReactiveTreeNodeDesc<any> | undefined, childBasis?: ReactiveTreeNodeDesc<any> | undefined): LinkedItem<ReactiveTreeNode> | undefined;
+}

package/build/dist/source/core/elements/Element.js

@@ -0,0 +1,136 @@
+import { ReactiveTreeNode, describe, runNonReactive } from "reactronic";
+import { Direction, ElKind } from "../El.js";
+import { clamp } from "../ElUtils.js";
+import { ElLayoutInfo, InitialElLayoutInfo } from "../ElDriver.js";
+import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout } from "../SplitViewMath.js";
+import { Axis, BodyFontSize, Dimension, toPx } from "../Sizes.js";
+import { HtmlDriver } from "../WebDriver.js";
+import { Fragment } from "./Fragment.js";
+import { PartitionDriver } from "./Partition.js";
+import { describeSplitter, isSplitViewPartition } from "./Splitter.js";
+export function Element(bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis) {
+    return describe(ElementDriver.glob, bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis);
+}
+export class ElementDriver extends HtmlDriver {
+    constructor() {
+        super(ElementDriver.id, false, el => el.kind = ElKind.element);
+    }
+    rebuildBody(node) {
+        const el = node.element;
+        const result = super.rebuildBody(node);
+        if (el.splitView !== undefined) {
+            if (el.layoutInfo === undefined)
+                el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+            const layoutInfo = el.layoutInfo;
+            layoutInfo.isUpdateFinished = false;
+            Fragment(h => {
+                const native = el.native;
+                const resize = native.sensors.resize;
+                for (const x of resize.resizedElements) {
+                    const borderBoxPx = x.borderBoxSize[0];
+                    const contentBoxPx = x.contentBoxSize[0];
+                    layoutInfo.borderSizeXpx = borderBoxPx.inlineSize;
+                    layoutInfo.borderSizeYpx = borderBoxPx.blockSize;
+                    layoutInfo.contentSizeXpx = contentBoxPx.inlineSize;
+                    layoutInfo.contentSizeYpx = contentBoxPx.blockSize;
+                }
+            });
+            const relayoutEl = Fragment({
+                body() {
+                    const native = el.native;
+                    const isHorizontal = el.splitView === Direction.horizontal;
+                    if (layoutInfo.isUpdateFinished) {
+                        const surroundingXpx = layoutInfo.borderSizeXpx - layoutInfo.contentSizeXpx;
+                        const surroundingYpx = layoutInfo.borderSizeYpx - layoutInfo.contentSizeYpx;
+                        let i = 0;
+                        const preferred = [];
+                        const sizesPx = [];
+                        for (const child of node.children.items()) {
+                            const partEl = child.element;
+                            if (isSplitViewPartition(child.driver) && partEl !== undefined) {
+                                const size = isHorizontal ? partEl.width : partEl.height;
+                                const options = {
+                                    axis: isHorizontal ? Axis.X : Axis.Y, lineSizePx: BodyFontSize, fontSizePx: BodyFontSize,
+                                    containerSizeXpx: native.scrollWidth - surroundingXpx, containerSizeYpx: native.scrollHeight - surroundingYpx,
+                                };
+                                const minPx = size.min ? toPx(Dimension.parse(size.min), options) : 0;
+                                let maxPx = size.max ? toPx(Dimension.parse(size.max), options) : Number.POSITIVE_INFINITY;
+                                maxPx = Math.max(minPx, maxPx);
+                                if (partEl.layoutInfo === undefined)
+                                    partEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+                                if (isHorizontal)
+                                    partEl.widthPx = { minPx, maxPx };
+                                else
+                                    partEl.heightPx = { minPx, maxPx };
+                                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);
+                                sizesPx.push({ node: child, sizePx });
+                                i++;
+                            }
+                        }
+                        const priorities = preferred.length > 0
+                            ? getPrioritiesForSizeChanging(isHorizontal, node.children, preferred)
+                            : getPrioritiesForEmptySpaceDistribution(isHorizontal, node.children);
+                        runNonReactive(() => relayout(node, priorities.resizable, priorities.manuallyResizable, sizesPx));
+                    }
+                },
+            });
+            ReactiveTreeNode.launchNestedNodesThenDo(() => {
+                layoutInfo.isUpdateFinished = true;
+                ReactiveTreeNode.rebuildBody(relayoutEl, { stamp: node.stamp });
+            });
+        }
+        return result;
+    }
+    describeChild(ownerNode, childDriver, childDescription, childBasis) {
+        let result = undefined;
+        const el = ownerNode.element;
+        if (el.splitView !== undefined) {
+            if (isSplitViewPartition(childDriver)) {
+                let partCount = 0;
+                for (const child of ownerNode.children.items()) {
+                    if (isSplitViewPartition(child.driver))
+                        partCount++;
+                }
+                const isHorizontal = el.splitView === Direction.horizontal;
+                if (childDescription !== undefined) {
+                    if (childDescription.signalArgs === undefined)
+                        childDescription.signalArgs = {};
+                    Object.defineProperty(childDescription.signalArgs, "index", { value: partCount });
+                    overrideMethod(childDescription, "body", el => {
+                        if (isHorizontal)
+                            el.style.gridColumn = `${partCount + 1}`;
+                        else
+                            el.style.gridRow = `${partCount + 1}`;
+                    });
+                }
+                if (partCount > 0)
+                    describeSplitter(partCount - 1, ownerNode);
+            }
+        }
+        else {
+            const last = ownerNode.children.lastItem;
+            if (childDriver.isPartition) {
+                if ((last === null || last === void 0 ? void 0 : last.driver) === childDriver)
+                    result = last;
+            }
+            else if (last === undefined) {
+                describe(PartitionDriver.glob, {});
+            }
+        }
+        return result;
+    }
+}
+ElementDriver.id = "el";
+ElementDriver.glob = new ElementDriver();
+function overrideMethod(description, method, func) {
+    const baseScript = description[method];
+    description[method] = baseScript !== undefined
+        ? (el, base) => { baseScript.call(el, el, base); func.call(el, el); }
+        : (el, base) => { base(); func.call(el, el); };
+}

package/build/dist/source/core/elements/Fragment.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, ReactiveTreeNodeDriver, Script, Mode, ScriptAsync } from "reactronic";
+import { El } from "../El.js";
+import { ElDriver } from "../ElDriver.js";
+export declare function Fragment<M = unknown>(body: Script<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare function Fragment<M = unknown>(key: string, body: Script<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare function Fragment<M = unknown>(mode: Mode, body: Script<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare function Fragment<M = unknown>(description: ReactiveTreeNodeDesc<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare function Fragment<M = unknown>(key?: string, mode?: Mode, body?: Script<El<void, M>>, bodyTask?: ScriptAsync<El<void, M>>, preparation?: Script<El<void, M>>, preparationTask?: ScriptAsync<El<void, M>>, mounting?: Script<El<void, M>>, finalization?: Script<El<void, M>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare class FragmentDriver extends ElDriver<HTMLElement> {
+    static readonly id = "fragment";
+    static readonly glob: ReactiveTreeNodeDriver<El<void, any>>;
+    constructor();
+}

package/build/dist/source/core/elements/Fragment.js

@@ -0,0 +1,16 @@
+import { Mode, args2desc, describe } from "reactronic";
+import { ElKind } from "../El.js";
+import { ElDriver } from "../ElDriver.js";
+export function Fragment(bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis) {
+    var _a;
+    const desc = args2desc(bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis);
+    desc.mode = ((_a = desc.mode) !== null && _a !== void 0 ? _a : Mode.default) | Mode.fragment;
+    return describe(FragmentDriver.glob, desc);
+}
+export class FragmentDriver extends ElDriver {
+    constructor() {
+        super(FragmentDriver.id, false, el => el.kind = ElKind.group);
+    }
+}
+FragmentDriver.id = "fragment";
+FragmentDriver.glob = new FragmentDriver();

package/build/dist/source/core/elements/Group.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
+import { El } from "../El.js";
+import { HtmlDriver } from "../WebDriver.js";
+export declare function Group<M = unknown>(body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(key: string, body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(mode: Mode, body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(key?: string, mode?: Mode, body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare class GroupDriver extends HtmlDriver<HTMLElement> {
+    static readonly id = "group";
+    static readonly glob: GroupDriver;
+    constructor();
+}

package/build/dist/source/core/elements/Group.js

@@ -0,0 +1,13 @@
+import { describe } from "reactronic";
+import { ElKind } from "../El.js";
+import { HtmlDriver } from "../WebDriver.js";
+export function Group(bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis) {
+    return describe(GroupDriver.glob, bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis);
+}
+export class GroupDriver extends HtmlDriver {
+    constructor() {
+        super(GroupDriver.id, false, el => el.kind = ElKind.group);
+    }
+}
+GroupDriver.id = "group";
+GroupDriver.glob = new GroupDriver();

package/build/dist/source/core/elements/Partition.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveTreeNode } from "reactronic";
+import { El } from "../El.js";
+import { HtmlDriver } from "../WebDriver.js";
+export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
+export declare function rowBreak(shiftCursorDown?: number): void;
+export declare class PartitionDriver<T extends HTMLElement> extends HtmlDriver<T> {
+    static readonly id = "part";
+    static readonly glob: PartitionDriver<HTMLElement>;
+    constructor();
+    rebuildBody(node: ReactiveTreeNode<El<T>>): void | Promise<void>;
+    provideHost(node: ReactiveTreeNode<El<T, any>>): ReactiveTreeNode<El<T, any>>;
+}
+export declare class WrapperDriver extends HtmlDriver<HTMLElement> {
+    static readonly id = "wrapper";
+    static readonly glob: WrapperDriver;
+    constructor();
+}