verstak 0.24.309 → 0.24.311

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

@@ -16,7 +16,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { reactive, unobs, Transaction, RxSystem, options, Reentrance } from "reactronic";
+import { reactive, unobs, Transaction, ReactiveSystem, options, Reentrance } from "reactronic";
 import { RxNode } from "./RxDomV1.Types.js";
 export class BasicNodeType {
     constructor(name, sequential) {
@@ -25,7 +25,7 @@ export class BasicNodeType {
     }
     initialize(node) {
         if (!node.inline)
-            RxSystem.setLoggingHint(node, node.id);
+            ReactiveSystem.setLoggingHint(node, node.id);
     }
     render(node, args) {
         const inst = node.instance;
@@ -56,7 +56,7 @@ export class BasicNodeType {
         if (inst) {
             inst.native = undefined;
             if (!node.inline && node.instance)
-                Transaction.isolate(() => RxSystem.dispose(node.instance));
+                Transaction.isolate(() => ReactiveSystem.dispose(node.instance));
             for (const x of inst.children)
                 tryToFinalize(x, initiator);
             for (const x of inst.guests)
@@ -78,7 +78,7 @@ export class RxNodeInstanceImpl {
     }
     rerender(node) {
         invokeRender(node, node.args);
-        RxSystem.configureCurrentOperation({ order: this.level });
+        ReactiveSystem.configureCurrentOperation({ order: this.level });
     }
 }
 RxNodeInstanceImpl.gUuid = 0;
@@ -432,7 +432,7 @@ function tryToInitialize(node) {
     (_a = type.initialize) === null || _a === void 0 ? void 0 : _a.call(type, node);
     (_b = type.mount) === null || _b === void 0 ? void 0 : _b.call(type, node);
     if (!node.inline)
-        RxSystem.setLoggingHint(inst, node.id);
+        ReactiveSystem.setLoggingHint(inst, node.id);
     return inst;
 }
 function tryToFinalize(node, initiator) {

package/build/dist/source/html/DraggableArea.view.d.ts

@@ -1,4 +1,4 @@
-import { RxNodeDecl, RxNode } from "reactronic";
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
 import { El } from "./El.js";
 import { PointerSensor } from "./sensors/PointerSensor.js";
 export type DragAndDropHandler = (pointer: PointerSensor) => void;
@@ -8,4 +8,4 @@ export interface DraggableAreaModel {
     droppedAction?: DragAndDropHandler;
     dragFinishedAction?: DragAndDropHandler;
 }
-export declare function DraggableArea(draggingId: string, builder: RxNodeDecl<El<HTMLDivElement, DraggableAreaModel>>): RxNode<El<HTMLDivElement>>;
+export declare function DraggableArea(draggingId: string, builder: ReactiveNodeDecl<El<HTMLDivElement, DraggableAreaModel>>): ReactiveNode<El<HTMLDivElement>>;

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

@@ -1,8 +1,8 @@
-import { Mode, RxNode } from "reactronic";
+import { Mode, ReactiveNode } from "reactronic";
 import { Div } from "./HtmlElements.js";
 import { Handling } from "./Elements.js";
 export function DraggableArea(draggingId, builder) {
-    return (Div(RxNode.rebased(builder, {
+    return (Div(ReactiveNode.withBasis(builder, {
         mode: Mode.independentUpdate,
         script: b => {
             const e = b.native;

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

@@ -1,6 +1,6 @@
-import { RxNode, BaseDriver } from "reactronic";
+import { ReactiveNode, BaseDriver } from "reactronic";
 export type El<T = any, M = any> = {
-    readonly node: RxNode<El<T, M>>;
+    readonly node: ReactiveNode<El<T, M>>;
     readonly index: number;
     native: T;
     model: M;
@@ -8,12 +8,12 @@ export type El<T = any, M = any> = {
     place: ElPlace;
     width: Range;
     height: Range;
-    horizontal: PosH | undefined;
-    contentHorizontal: PosH | undefined;
-    vertical: PosV | undefined;
-    contentVertical: PosV | undefined;
-    stretchingStrengthH: number | undefined;
-    stretchingStrengthV: number | undefined;
+    horizontally: Horizontal | undefined;
+    contentHorizontally: Horizontal | undefined;
+    vertically: Vertical | undefined;
+    contentVertically: Vertical | undefined;
+    stretchingStrengthHorizontally: number | undefined;
+    stretchingStrengthVertically: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
     sealed: Direction | undefined;
@@ -46,14 +46,14 @@ export type ElCoords = {
     x2: number;
     y2: number;
 };
-export declare enum PosH {
+export declare enum Horizontal {
     left = 0,
     center = 1,
     right = 2,
     stretch = 3,
     stretchAndFix = 4
 }
-export declare enum PosV {
+export declare enum Vertical {
     top = 0,
     center = 1,
     bottom = 2,
@@ -77,10 +77,10 @@ export declare enum Direction {
     vertical = 1
 }
 export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
-    allocate(node: RxNode<El<T, M>>): El<T, M>;
+    allocate(node: ReactiveNode<El<T, M>>): El<T, M>;
 }
 export declare class ElImpl<T extends Element = any, M = any> implements El<T, M> {
-    readonly node: RxNode<El<T, M>>;
+    readonly node: ReactiveNode<El<T, M>>;
     maxColumnCount: number;
     maxRowCount: number;
     layoutInfo?: ElLayoutInfo;
@@ -102,7 +102,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _sealed;
     private _splitView;
     private _hasStylingPresets;
-    constructor(node: RxNode<El<T, M>>);
+    constructor(node: ReactiveNode<El<T, M>>);
     prepareForUpdate(): void;
     get index(): number;
     get isPanel(): boolean;
@@ -132,18 +132,18 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
         minPx: number;
         maxPx: number;
     });
-    get horizontal(): PosH | undefined;
-    set horizontal(value: PosH | undefined);
-    get vertical(): PosV | undefined;
-    set vertical(value: PosV | undefined);
-    get contentHorizontal(): PosH | undefined;
-    set contentHorizontal(value: PosH | undefined);
-    get contentVertical(): PosV | undefined;
-    set contentVertical(value: PosV | undefined);
-    get stretchingStrengthH(): number | undefined;
-    set stretchingStrengthH(value: number | undefined);
-    get stretchingStrengthV(): number | undefined;
-    set stretchingStrengthV(value: number | undefined);
+    get horizontally(): Horizontal | undefined;
+    set horizontally(value: Horizontal | undefined);
+    get vertically(): Vertical | undefined;
+    set vertically(value: Vertical | undefined);
+    get contentHorizontally(): Horizontal | undefined;
+    set contentHorizontally(value: Horizontal | undefined);
+    get contentVertically(): Vertical | undefined;
+    set contentVertically(value: Vertical | undefined);
+    get stretchingStrengthHorizontally(): number | undefined;
+    set stretchingStrengthHorizontally(value: number | undefined);
+    get stretchingStrengthVertically(): number | undefined;
+    set stretchingStrengthVertically(value: number | undefined);
     get contentWrapping(): boolean;
     set contentWrapping(value: boolean);
     get overlayVisible(): boolean | undefined;
@@ -156,7 +156,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     get style(): CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
     protected children(onlyAfter?: ElImpl): Generator<ElImpl>;
-    static childrenOf(node: RxNode<El>, onlyAfter?: El): Generator<ElImpl>;
+    static childrenOf(node: ReactiveNode<El>, onlyAfter?: El): Generator<ElImpl>;
     private rowBreak;
     private static applyKind;
     private static applyCoords;

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { ReactiveNode, BaseDriver, Transaction, obs, ObservableObject } from "reactronic";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
 export var ElKind;
 (function (ElKind) {
@@ -20,22 +20,22 @@ export var ElKind;
     ElKind[ElKind["cursor"] = 6] = "cursor";
     ElKind[ElKind["native"] = 7] = "native";
 })(ElKind || (ElKind = {}));
-export var PosH;
-(function (PosH) {
-    PosH[PosH["left"] = 0] = "left";
-    PosH[PosH["center"] = 1] = "center";
-    PosH[PosH["right"] = 2] = "right";
-    PosH[PosH["stretch"] = 3] = "stretch";
-    PosH[PosH["stretchAndFix"] = 4] = "stretchAndFix";
-})(PosH || (PosH = {}));
-export var PosV;
-(function (PosV) {
-    PosV[PosV["top"] = 0] = "top";
-    PosV[PosV["center"] = 1] = "center";
-    PosV[PosV["bottom"] = 2] = "bottom";
-    PosV[PosV["stretch"] = 3] = "stretch";
-    PosV[PosV["stretchAndFix"] = 4] = "stretchAndFix";
-})(PosV || (PosV = {}));
+export var Horizontal;
+(function (Horizontal) {
+    Horizontal[Horizontal["left"] = 0] = "left";
+    Horizontal[Horizontal["center"] = 1] = "center";
+    Horizontal[Horizontal["right"] = 2] = "right";
+    Horizontal[Horizontal["stretch"] = 3] = "stretch";
+    Horizontal[Horizontal["stretchAndFix"] = 4] = "stretchAndFix";
+})(Horizontal || (Horizontal = {}));
+export var Vertical;
+(function (Vertical) {
+    Vertical[Vertical["top"] = 0] = "top";
+    Vertical[Vertical["center"] = 1] = "center";
+    Vertical[Vertical["bottom"] = 2] = "bottom";
+    Vertical[Vertical["stretch"] = 3] = "stretch";
+    Vertical[Vertical["stretchAndFix"] = 4] = "stretchAndFix";
+})(Vertical || (Vertical = {}));
 export var Direction;
 (function (Direction) {
     Direction[Direction["horizontal"] = 0] = "horizontal";
@@ -150,48 +150,48 @@ export class ElImpl {
         if (value.maxPx !== w.maxPx)
             this._height.maxPx = value.maxPx;
     }
-    get horizontal() { return this._horizontal; }
-    set horizontal(value) {
+    get horizontally() { return this._horizontal; }
+    set horizontally(value) {
         const existing = this._horizontal;
         if (value !== existing) {
             ElImpl.applyHorizontal(this, existing, value, this._contentHorizontal, this._contentHorizontal, this._stretchingStrengthH);
             this._horizontal = value;
         }
     }
-    get vertical() { return this._vertical; }
-    set vertical(value) {
+    get vertically() { return this._vertical; }
+    set vertically(value) {
         const existing = this._vertical;
         if (value !== existing) {
             ElImpl.applyVertical(this, existing, value, this._contentVertical, this._contentVertical, this._stretchingStrengthV);
             this._vertical = value;
         }
     }
-    get contentHorizontal() { return this._contentHorizontal; }
-    set contentHorizontal(value) {
+    get contentHorizontally() { return this._contentHorizontal; }
+    set contentHorizontally(value) {
         const existing = this._contentHorizontal;
         if (value !== existing) {
             ElImpl.applyHorizontal(this, this._horizontal, this._horizontal, existing, value, this._stretchingStrengthH);
             this._contentHorizontal = value;
         }
     }
-    get contentVertical() { return this._contentVertical; }
-    set contentVertical(value) {
+    get contentVertically() { return this._contentVertical; }
+    set contentVertically(value) {
         const existing = this._contentVertical;
         if (value !== existing) {
             ElImpl.applyVertical(this, this._vertical, this._vertical, existing, value, this._stretchingStrengthV);
             this._contentVertical = value;
         }
     }
-    get stretchingStrengthH() { return this._stretchingStrengthH; }
-    set stretchingStrengthH(value) {
+    get stretchingStrengthHorizontally() { return this._stretchingStrengthH; }
+    set stretchingStrengthHorizontally(value) {
         const existing = this._stretchingStrengthH;
         if (value !== existing) {
             ElImpl.applyStretchingStrengthH(this, existing, value);
             this._stretchingStrengthH = value;
         }
     }
-    get stretchingStrengthV() { return this._stretchingStrengthV; }
-    set stretchingStrengthV(value) {
+    get stretchingStrengthVertically() { return this._stretchingStrengthV; }
+    set stretchingStrengthVertically(value) {
         const existing = this._stretchingStrengthV;
         if (value !== existing) {
             ElImpl.applyStretchingStrengthV(this, existing, value);
@@ -299,8 +299,8 @@ export class ElImpl {
     }
     static applyHorizontal(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
         var _a, _b;
-        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = PosH.left);
-        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = PosH.left);
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Horizontal.left);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Horizontal.left);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
         newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
@@ -313,8 +313,8 @@ export class ElImpl {
         }
         let isEffectiveAlignerX = false;
         if (hostLayout) {
-            const isAligner = newPrimary === PosH.center ||
-                newPrimary === PosH.right;
+            const isAligner = newPrimary === Horizontal.center ||
+                newPrimary === Horizontal.right;
             isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
                 element.index <= hostLayout.alignerX.index);
             if (hostLayout.alignerX === element) {
@@ -334,65 +334,65 @@ export class ElImpl {
         }
         switch (newPrimary) {
             default:
-            case PosH.left:
+            case Horizontal.left:
                 css.justifySelf = "start";
-                if (oldPrimary === PosH.center) {
+                if (oldPrimary === Horizontal.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (oldPrimary === PosH.right)
+                else if (oldPrimary === Horizontal.right)
                     css.marginLeft = "";
                 break;
-            case PosH.center:
+            case Horizontal.center:
                 css.justifySelf = "center";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
                 css.marginRight = "auto";
                 break;
-            case PosH.right:
+            case Horizontal.right:
                 css.justifySelf = "end";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
-                if (oldPrimary === PosH.center)
+                if (oldPrimary === Horizontal.center)
                     css.marginRight = "";
                 break;
-            case PosH.stretch:
-            case PosH.stretchAndFix:
+            case Horizontal.stretch:
+            case Horizontal.stretchAndFix:
                 css.justifySelf = "stretch";
-                if (oldPrimary === PosH.center) {
+                if (oldPrimary === Horizontal.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (oldPrimary === PosH.right)
+                else if (oldPrimary === Horizontal.right)
                     css.marginLeft = "";
                 break;
         }
         switch (newInside) {
             default:
-            case PosH.left:
+            case Horizontal.left:
                 css.alignItems = "start";
                 css.textAlign = "left";
                 break;
-            case PosH.center:
+            case Horizontal.center:
                 css.alignItems = "center";
                 css.textAlign = "center";
                 break;
-            case PosH.right:
+            case Horizontal.right:
                 css.alignItems = "end";
                 css.textAlign = "right";
                 break;
-            case PosH.stretch:
-            case PosH.stretchAndFix:
+            case Horizontal.stretch:
+            case Horizontal.stretchAndFix:
                 css.alignItems = "stretch";
                 css.textAlign = "justify";
                 break;
         }
-        if (newPrimary >= PosH.stretch && strength === undefined)
+        if (newPrimary >= Horizontal.stretch && strength === undefined)
             ElImpl.applyStretchingStrengthH(element, 0, 1);
     }
     static applyVertical(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
-        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = PosV.top);
-        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = PosV.top);
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Vertical.top);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Vertical.top);
         oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
         newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
@@ -407,10 +407,10 @@ export class ElImpl {
         }
         let isEffectiveAlignerY = false;
         if (hostLayout) {
-            const isAligner = newPrimary === PosV.center ||
-                newPrimary === PosV.bottom;
+            const isAligner = newPrimary === Vertical.center ||
+                newPrimary === Vertical.bottom;
             isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
-                hostLayout.alignerY.vertical !== PosV.center);
+                hostLayout.alignerY.vertically !== Vertical.center);
             if (hostLayout.alignerY === element) {
                 if (!isEffectiveAlignerY) {
                     hostCss.marginTop = "";
@@ -425,37 +425,37 @@ export class ElImpl {
         }
         switch (newPrimary) {
             default:
-            case PosV.top:
+            case Vertical.top:
                 css.alignSelf = "start";
                 break;
-            case PosV.center:
+            case Vertical.center:
                 css.alignSelf = "center";
                 break;
-            case PosV.bottom:
+            case Vertical.bottom:
                 css.alignSelf = "end";
                 break;
-            case PosV.stretch:
-            case PosV.stretchAndFix:
+            case Vertical.stretch:
+            case Vertical.stretchAndFix:
                 css.alignSelf = "stretch";
                 break;
         }
         switch (newInside) {
             default:
-            case PosV.top:
+            case Vertical.top:
                 css.justifyContent = "start";
                 break;
-            case PosV.center:
+            case Vertical.center:
                 css.justifyContent = "center";
                 break;
-            case PosV.bottom:
+            case Vertical.bottom:
                 css.justifyContent = "end";
                 break;
-            case PosV.stretch:
-            case PosV.stretchAndFix:
+            case Vertical.stretch:
+            case Vertical.stretchAndFix:
                 css.justifyContent = "stretch";
                 break;
         }
-        if (newPrimary >= PosV.stretch && strength === undefined)
+        if (newPrimary >= Vertical.stretch && strength === undefined)
             ElImpl.applyStretchingStrengthV(element, 0, 1);
     }
     static applyStretchingStrengthH(element, existing, value) {
@@ -521,7 +521,7 @@ export class ElImpl {
     }
     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 host = ReactiveNode.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;

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

@@ -1,30 +1,30 @@
-import { RxNodeDecl, RxNodeDriver, RxNode, Script, Mode, MergedItem, ScriptAsync } from "reactronic";
+import { ReactiveNodeDecl, ReactiveNodeDriver, ReactiveNode, Script, Mode, MergedItem, ScriptAsync } from "reactronic";
 import { CursorCommandDriver, El, ElPlace } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export declare function Panel<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Table<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Table<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
-export declare function Splitter<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Splitter<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
 export declare function rowBreak(shiftCursorDown?: number): void;
-export declare function declareSplitter<T>(index: number, splitViewNode: RxNode<El<T>>): RxNode<El<HTMLElement>>;
+export declare function declareSplitter<T>(index: number, splitViewNode: ReactiveNode<El<T>>): ReactiveNode<El<HTMLElement>>;
 export declare function cursor(areaParams: ElPlace): void;
-export declare function Note(content: string, formatted?: boolean, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
-export declare function Group<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Group<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Handling<M = unknown>(script: Script<El<void, M>>): RxNode<El<void, M>>;
-export declare function SyntheticElement<M = unknown>(script?: Script<El<void, M>>, scriptAsync?: ScriptAsync<El<void, M>>, key?: string, mode?: Mode, creation?: Script<El<void, M>>, creationAsync?: ScriptAsync<El<void, M>>, destruction?: Script<El<void, M>>, triggers?: unknown, basis?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
-export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
+export declare function Note(content: string, formatted?: boolean, declaration?: ReactiveNodeDecl<El<HTMLElement, void>>): ReactiveNode<El<HTMLElement, void>>;
+export declare function Group<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Handling<M = unknown>(script: Script<El<void, M>>): ReactiveNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(script?: Script<El<void, M>>, scriptAsync?: ScriptAsync<El<void, M>>, key?: string, mode?: Mode, creation?: Script<El<void, M>>, creationAsync?: ScriptAsync<El<void, M>>, destruction?: Script<El<void, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<void, M>>): ReactiveNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(declaration?: ReactiveNodeDecl<El<void, M>>): ReactiveNode<El<void, M>>;
 export declare class PanelDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    update(node: RxNode<El<T>>): void | Promise<void>;
-    child(ownerNode: RxNode<El<T, any>>, childDriver: RxNodeDriver<any>, childDeclaration?: RxNodeDecl<any> | undefined, childBasis?: RxNodeDecl<any> | undefined): MergedItem<RxNode> | undefined;
+    update(node: ReactiveNode<El<T>>): void | Promise<void>;
+    child(ownerNode: ReactiveNode<El<T, any>>, childDriver: ReactiveNodeDriver<any>, childDeclaration?: ReactiveNodeDecl<any> | undefined, childBasis?: ReactiveNodeDecl<any> | undefined): MergedItem<ReactiveNode> | undefined;
 }
-export declare function isSplitViewPartition(childDriver: RxNodeDriver): boolean;
+export declare function isSplitViewPartition(childDriver: ReactiveNodeDriver): boolean;
 export declare class PartitionDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    update(node: RxNode<El<T>>): void | Promise<void>;
-    getHost(node: RxNode<El<T, any>>): RxNode<El<T, any>>;
+    update(node: ReactiveNode<El<T>>): void | Promise<void>;
+    getHost(node: ReactiveNode<El<T, any>>): ReactiveNode<El<T, any>>;
 }
 export declare const Drivers: {
     panel: PanelDriver<HTMLElement>;
@@ -35,5 +35,5 @@ export declare const Drivers: {
     wrapper: HtmlDriver<HTMLElement, any>;
     splitter: HtmlDriver<HTMLElement, any>;
     cursor: CursorCommandDriver;
-    synthetic: RxNodeDriver<El<void, any>>;
+    synthetic: ReactiveNodeDriver<El<void, any>>;
 };

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

@@ -1,24 +1,24 @@
-import { RxNode, Mode, unobs } from "reactronic";
+import { ReactiveNode, Mode, unobs } from "reactronic";
 import { Constants, CursorCommandDriver, ElKind, ElDriver, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
 import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout, relayoutUsingSplitter } from "./SplitViewMath.js";
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 import { clamp } from "./ElUtils.js";
 export function Panel(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
-    return RxNode.declare(Drivers.panel, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
+    return ReactiveNode.declare(Drivers.panel, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function Table(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
-    return RxNode.declare(Drivers.table, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
+    return ReactiveNode.declare(Drivers.table, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function row(builder, shiftCursorDown) {
     rowBreak(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
 export function Splitter(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
-    return RxNode.declare(Drivers.splitter, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
+    return ReactiveNode.declare(Drivers.splitter, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function rowBreak(shiftCursorDown) {
-    RxNode.declare(Drivers.partition);
+    ReactiveNode.declare(Drivers.partition);
 }
 export function declareSplitter(index, splitViewNode) {
     const key = `splitter-${index}`;
@@ -74,14 +74,14 @@ export function declareSplitter(index, splitViewNode) {
     }));
 }
 export function cursor(areaParams) {
-    RxNode.declare(Drivers.cursor, {
+    ReactiveNode.declare(Drivers.cursor, {
         script: el => {
             el.place = areaParams;
         },
     });
 }
 export function Note(content, formatted, declaration) {
-    return RxNode.declare(Drivers.note, RxNode.rebased(declaration, {
+    return ReactiveNode.declare(Drivers.note, ReactiveNode.withBasis(declaration, {
         script: el => {
             if (formatted)
                 el.native.innerHTML = content;
@@ -91,13 +91,13 @@ export function Note(content, formatted, declaration) {
     }));
 }
 export function Group(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
-    return RxNode.declare(Drivers.group, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
+    return ReactiveNode.declare(Drivers.group, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function Handling(script) {
     return SyntheticElement({ mode: Mode.independentUpdate, script });
 }
 export function SyntheticElement(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
-    return RxNode.declare(Drivers.synthetic, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
+    return ReactiveNode.declare(Drivers.synthetic, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export class PanelDriver extends HtmlDriver {
     update(node) {
@@ -167,9 +167,9 @@ export class PanelDriver extends HtmlDriver {
                     }
                 },
             });
-            RxNode.updateNestedNodesThenDo(() => {
+            ReactiveNode.updateNestedNodesThenDo(() => {
                 layoutInfo.isUpdateFinished = true;
-                RxNode.triggerUpdate(relayoutEl, { stamp: node.stamp });
+                ReactiveNode.triggerUpdate(relayoutEl, { stamp: node.stamp });
             });
         }
         return result;
@@ -226,7 +226,7 @@ export class PartitionDriver extends HtmlDriver {
         const ownerEl = node.owner.element;
         if (ownerEl.sealed !== undefined) {
             node.element.style.flexGrow = "1";
-            RxNode.declare(Drivers.wrapper, {
+            ReactiveNode.declare(Drivers.wrapper, {
                 script: el => {
                     const ownerEl = el.node.owner.owner.element;
                     if (ownerEl.splitView !== undefined) {

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

@@ -6,3 +6,10 @@ export declare function OnClick(target: HTMLElement, action: ((pointer: PointerS
 export declare function OnClickAsync(target: HTMLElement, action: ((pointer: PointerSensor) => Promise<void>) | ToggleRef | undefined, key?: string): void;
 export declare function OnResize(target: HTMLElement, action: ((element: ResizedElement) => void) | undefined, key?: string): void;
 export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model: FocusModel) => void) | undefined, key?: string): void;
+export type ResizeCallback = (width: number, height: number) => void;
+export declare class ResizeData {
+    id: string;
+    handler?: ResizeCallback | undefined;
+    constructor(id: string, handler?: ResizeCallback | undefined);
+}
+export declare function prepareResizeHandler(action: ((width: number, height: number) => void) | ResizeData): (element: ResizedElement) => void;

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

@@ -84,3 +84,18 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
         },
     });
 }
+export class ResizeData {
+    constructor(id, handler) {
+        this.id = id;
+        this.handler = handler;
+    }
+}
+export function prepareResizeHandler(action) {
+    return (element) => {
+        const size = element.borderBoxSize[0];
+        if (action instanceof Function)
+            unobs(() => action(size.inlineSize, size.blockSize));
+        else if (action instanceof ResizeData && action.handler !== undefined)
+            unobs(() => action.handler(size.inlineSize, size.blockSize));
+    };
+}