verstak 0.23.121 → 0.23.123

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

@@ -17,70 +17,70 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { reactive, unobs, Transaction, options, Reentrance, Rx, MergeList, ObservableObject, raw } from "reactronic";
-import { BlockKind, Priority, Mode, Align } from "./Interfaces.js";
-import { emitLetters, equalBlockCoords, parseBlockCoords, getCallerInfo } from "./Utils.js";
+import { ElKind, Priority, Mode, Align } from "./Interfaces.js";
+import { emitLetters, equalElCoords, parseElCoords, getCallerInfo } from "./Utils.js";
 export class Verstak {
-    static claim(driver, builder, base) {
+    static specify(driver, spec, base) {
         var _a;
         let result;
-        if (builder)
-            builder.base = base;
+        if (spec)
+            spec.base = base;
         else
-            builder = base !== null && base !== void 0 ? base : {};
-        let key = builder.key;
+            spec = base !== null && base !== void 0 ? base : {};
+        let key = spec.key;
         const owner = gCurrent === null || gCurrent === void 0 ? void 0 : gCurrent.instance;
         if (owner) {
             let ex = undefined;
             const children = owner.node.children;
-            if (driver.isRow) {
-                const last = children.lastClaimedItem();
+            if (driver.isSeparator) {
+                const last = children.lastSpecifiedItem();
                 if (((_a = last === null || last === void 0 ? void 0 : last.instance) === null || _a === void 0 ? void 0 : _a.node.driver) === driver)
                     ex = last;
             }
-            ex !== null && ex !== void 0 ? ex : (ex = children.claim(key = key || generateKey(owner), undefined, "nested blocks can be declared inside update function only"));
+            ex !== null && ex !== void 0 ? ex : (ex = children.specify(key = key || generateKey(owner), undefined, "nested elements can be declared inside update function only"));
             if (ex) {
                 result = ex.instance;
                 const node = result.node;
                 if (node.driver !== driver && driver !== undefined)
-                    throw new Error(`changing block driver is not yet supported: "${result.node.driver.name}" -> "${driver === null || driver === void 0 ? void 0 : driver.name}"`);
-                const exTriggers = node.builder.triggers;
-                if (triggersAreEqual(builder.triggers, exTriggers))
-                    builder.triggers = exTriggers;
-                node.builder = builder;
+                    throw new Error(`changing element driver is not yet supported: "${result.node.driver.name}" -> "${driver === null || driver === void 0 ? void 0 : driver.name}"`);
+                const exTriggers = node.spec.triggers;
+                if (triggersAreEqual(spec.triggers, exTriggers))
+                    spec.triggers = exTriggers;
+                node.spec = spec;
             }
             else {
-                result = new BlockImpl(key || generateKey(owner), driver, owner, builder);
-                result.node.ties = children.add(result);
+                result = new ElImpl(key || generateKey(owner), driver, owner, spec);
+                result.node.slot = children.add(result);
             }
         }
         else {
-            result = new BlockImpl(key || "", driver, owner, builder);
-            result.node.ties = MergeList.createItem(result);
-            triggerUpdate(result.node.ties);
+            result = new ElImpl(key || "", driver, owner, spec);
+            result.node.slot = MergeList.createItem(result);
+            triggerUpdate(result.node.slot);
         }
         return result;
     }
-    static get block() {
+    static get element() {
         if (gCurrent === undefined)
-            throw new Error("current block is undefined");
+            throw new Error("current element is undefined");
         return gCurrent.instance;
     }
-    static triggerUpdate(block, triggers) {
-        const b = block;
-        const builder = b.node.builder;
-        if (!triggersAreEqual(triggers, builder.triggers)) {
-            builder.triggers = triggers;
-            triggerUpdate(b.node.ties);
+    static triggerUpdate(element, triggers) {
+        const el = element;
+        const spec = el.node.spec;
+        if (!triggersAreEqual(triggers, spec.triggers)) {
+            spec.triggers = triggers;
+            triggerUpdate(el.node.slot);
         }
     }
     static updateNestedTreesThenDo(action) {
         runUpdateNestedTreesThenDo(undefined, action);
     }
     static getDefaultLoggingOptions() {
-        return BlockImpl.logging;
+        return ElImpl.logging;
     }
     static setDefaultLoggingOptions(logging) {
-        BlockImpl.logging = logging;
+        ElImpl.logging = logging;
     }
 }
 Verstak.shortFrameDuration = 16;
@@ -88,49 +88,46 @@ Verstak.longFrameDuration = 300;
 Verstak.currentUpdatePriority = Priority.Realtime;
 Verstak.frameDuration = Verstak.longFrameDuration;
 export class BaseDriver {
-    constructor(name, isRow, preset) {
+    constructor(name, isSeparator, preset) {
         this.name = name;
-        this.isRow = isRow;
+        this.isSeparator = isSeparator;
         this.preset = preset;
     }
-    claim(block) {
-        const b = block;
-        chainedClaim(b, b.node.builder);
+    specify(element) {
+        chainedSpecify(element, element.node.spec);
     }
-    create(block, b) {
-        chainedCreate(block, block.node.builder);
+    create(element) {
+        chainedCreate(element, element.node.spec);
     }
-    initialize(block) {
+    initialize(element) {
         var _a;
-        const b = block;
-        (_a = this.preset) === null || _a === void 0 ? void 0 : _a.call(this, b);
-        chainedInitialize(b, b.node.builder);
+        (_a = this.preset) === null || _a === void 0 ? void 0 : _a.call(this, element);
+        chainedInitialize(element, element.node.spec);
     }
-    mount(block) {
+    mount(element) {
     }
-    update(block) {
-        chainedUpdated(block, block.node.builder);
+    update(element) {
+        chainedUpdated(element, element.node.spec);
     }
-    finalize(block, isLeader) {
-        const b = block;
-        chainedFinalize(b, b.node.builder);
+    finalize(element, isLeader) {
+        chainedFinalize(element, element.node.spec);
         return isLeader;
     }
-    applyKind(block, value) { }
-    applyCoords(block, value) { }
-    applyWidthGrowth(block, value) { }
-    applyMinWidth(block, value) { }
-    applyMaxWidth(block, value) { }
-    applyHeightGrowth(block, value) { }
-    applyMinHeight(block, value) { }
-    applyMaxHeight(block, value) { }
-    applyContentAlignment(block, value) { }
-    applyBlockAlignment(block, value) { }
-    applyContentWrapping(block, value) { }
-    applyOverlayVisible(block, value) { }
-    applyStyle(block, secondary, styleName, enabled) { }
-}
-BaseDriver.fragment = new BaseDriver("fragment", false, b => b.kind = BlockKind.Group);
+    applyKind(element, value) { }
+    applyCoords(element, value) { }
+    applyWidthGrowth(element, value) { }
+    applyMinWidth(element, value) { }
+    applyMaxWidth(element, value) { }
+    applyHeightGrowth(element, value) { }
+    applyMinHeight(element, value) { }
+    applyMaxHeight(element, value) { }
+    applyContentAlignment(element, value) { }
+    applyElementAlignment(element, value) { }
+    applyContentWrapping(element, value) { }
+    applyOverlayVisible(element, value) { }
+    applyStyle(element, secondary, styleName, enabled) { }
+}
+BaseDriver.fragment = new BaseDriver("fragment", false, el => el.kind = ElKind.Group);
 function generateKey(owner) {
     const n = owner.node.numerator++;
     const lettered = emitLetters(n);
@@ -145,64 +142,64 @@ function chainedMode(bb) {
     var _a;
     return (_a = bb === null || bb === void 0 ? void 0 : bb.mode) !== null && _a !== void 0 ? _a : ((bb === null || bb === void 0 ? void 0 : bb.base) ? chainedMode(bb === null || bb === void 0 ? void 0 : bb.base) : Mode.Default);
 }
-function chainedClaim(block, bb) {
-    const claim = bb.claim;
-    const base = bb.base;
-    if (claim)
-        claim(block, base ? () => chainedClaim(block, base) : NOP);
+function chainedSpecify(element, elb) {
+    const specify = elb.specify;
+    const base = elb.base;
+    if (specify)
+        specify(element, base ? () => chainedSpecify(element, base) : NOP);
     else if (base)
-        chainedClaim(block, base);
+        chainedSpecify(element, base);
 }
-function chainedCreate(block, bb) {
-    const create = bb.create;
-    const base = bb.base;
+function chainedCreate(element, elb) {
+    const create = elb.create;
+    const base = elb.base;
     if (create)
-        create(block, base ? () => chainedCreate(block, base) : NOP);
+        create(element, base ? () => chainedCreate(element, base) : NOP);
     else if (base)
-        chainedCreate(block, base);
+        chainedCreate(element, base);
 }
-function chainedInitialize(block, bb) {
-    const initialize = bb.initialize;
-    const base = bb.base;
+function chainedInitialize(element, elb) {
+    const initialize = elb.initialize;
+    const base = elb.base;
     if (initialize)
-        initialize(block, base ? () => chainedInitialize(block, base) : NOP);
+        initialize(element, base ? () => chainedInitialize(element, base) : NOP);
     else if (base)
-        chainedInitialize(block, base);
+        chainedInitialize(element, base);
 }
-function chainedUpdated(block, bb) {
-    const update = bb.update;
-    const base = bb.base;
+function chainedUpdated(element, elb) {
+    const update = elb.update;
+    const base = elb.base;
     if (update)
-        update(block, base ? () => chainedUpdated(block, base) : NOP);
+        update(element, base ? () => chainedUpdated(element, base) : NOP);
     else if (base)
-        chainedUpdated(block, base);
+        chainedUpdated(element, base);
 }
-function chainedFinalize(block, bb) {
-    const finalize = bb.finalize;
-    const base = bb.base;
+function chainedFinalize(element, elb) {
+    const finalize = elb.finalize;
+    const base = elb.base;
     if (finalize)
-        finalize(block, base ? () => chainedFinalize(block, base) : NOP);
+        finalize(element, base ? () => chainedFinalize(element, base) : NOP);
     else if (base)
-        chainedFinalize(block, base);
+        chainedFinalize(element, base);
 }
 export class StaticDriver extends BaseDriver {
-    constructor(element, name, isRow, preset) {
+    constructor(native, name, isRow, preset) {
         super(name, isRow, preset);
-        this.element = element;
+        this.native = native;
     }
-    create(block, b) {
-        b.native = this.element;
+    create(element) {
+        element.native = this.native;
     }
 }
 export class CursorCommand {
 }
 export class CursorCommandDriver extends BaseDriver {
     constructor() {
-        super("cursor", false, b => b.kind = BlockKind.Cursor);
+        super("cursor", false, el => el.kind = ElKind.Cursor);
     }
-    create(block, b) {
-        b.native = new CursorCommand();
-        super.create(block, b);
+    create(element) {
+        element.native = new CursorCommand();
+        super.create(element);
     }
 }
 export class SubTreeVariable {
@@ -210,13 +207,13 @@ export class SubTreeVariable {
         this.defaultValue = defaultValue;
     }
     set value(value) {
-        BlockImpl.setSubTreeVariableValue(this, value);
+        ElImpl.setSubTreeVariableValue(this, value);
     }
     get value() {
-        return BlockImpl.useSubTreeVariableValue(this);
+        return ElImpl.useSubTreeVariableValue(this);
     }
     get valueOrUndefined() {
-        return BlockImpl.tryUseSubTreeVariable(this);
+        return ElImpl.tryUseSubTreeVariable(this);
     }
 }
 class CursorPosition {
@@ -235,9 +232,9 @@ var CursorFlags;
     CursorFlags[CursorFlags["UsesRunningColumnCount"] = 2] = "UsesRunningColumnCount";
     CursorFlags[CursorFlags["UsesRunningRowCount"] = 4] = "UsesRunningRowCount";
 })(CursorFlags || (CursorFlags = {}));
-const UndefinedBlockCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
+const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
 const InitialCursorPosition = Object.freeze(new CursorPosition({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: CursorFlags.None }));
-class BlockCtxImpl extends ObservableObject {
+class RxNodeCtxImpl extends ObservableObject {
     constructor(variable, value) {
         super();
         this.next = undefined;
@@ -248,49 +245,75 @@ class BlockCtxImpl extends ObservableObject {
 __decorate([
     raw,
     __metadata("design:type", Object)
-], BlockCtxImpl.prototype, "next", void 0);
+], RxNodeCtxImpl.prototype, "next", void 0);
 __decorate([
     raw,
     __metadata("design:type", SubTreeVariable)
-], BlockCtxImpl.prototype, "variable", void 0);
-class BlockNodeImpl {
-    constructor(key, driver, builder, self, owner) {
-        this.maxColumnCount = 0;
-        this.maxRowCount = 0;
+], RxNodeCtxImpl.prototype, "variable", void 0);
+class RxNodeImpl {
+    constructor(key, driver, spec, element, owner) {
         this.key = key;
         this.driver = driver;
-        this.builder = builder;
+        this.spec = spec;
         if (owner) {
-            const node = owner.node;
+            const node = owner;
             this.level = node.level + 1;
             this.owner = owner;
             this.outer = node.context ? owner : node.outer;
         }
         else {
             this.level = 1;
-            this.owner = owner = self;
-            this.outer = self;
+            this.owner = owner = this;
+            this.outer = this;
         }
-        this.host = self;
-        this.children = new MergeList(getBlockKey, true);
-        this.ties = undefined;
-        this.stamp = 0;
+        this.host = this;
+        this.children = new MergeList(getNodeKey, true);
+        this.slot = undefined;
+        this.stamp = Number.MAX_SAFE_INTEGER;
         this.context = undefined;
         this.numerator = 0;
+        this.priority = Priority.Realtime;
+        this.childrenShuffling = false;
+        RxNodeImpl.grandNodeCount++;
+        if (this.has(Mode.PinpointUpdate))
+            RxNodeImpl.disposableNodeCount++;
+    }
+    get isInitialUpdate() { return this.stamp === 1; }
+    get strictOrder() { return this.children.isStrict; }
+    set strictOrder(value) { this.children.isStrict = value; }
+    get isMoved() { return this.owner.children.isMoved(this.slot); }
+    has(mode) {
+        return (chainedMode(this.spec) & mode) === mode;
+    }
+    update(_triggers) {
+        updateNow(this.slot);
+    }
+}
+RxNodeImpl.grandNodeCount = 0;
+RxNodeImpl.disposableNodeCount = 0;
+__decorate([
+    reactive,
+    options({
+        reentrance: Reentrance.CancelPrevious,
+        triggeringArgs: true,
+        noSideEffects: false,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], RxNodeImpl.prototype, "update", null);
+class ElImpl {
+    constructor(key, driver, owner, spec) {
+        this.node = new RxNodeImpl(key, driver, spec, this, owner === null || owner === void 0 ? void 0 : owner.node);
         this.maxColumnCount = 0;
         this.maxRowCount = 0;
         this.cursorPosition = undefined;
-    }
-}
-class BlockImpl {
-    constructor(key, driver, owner, builder) {
-        this.node = new BlockNodeImpl(key, driver, builder, this, owner);
         this.native = undefined;
         this.model = undefined;
         this.controller = undefined;
-        this._kind = BlockKind.Row;
+        this._kind = ElKind.Row;
         this._area = undefined;
-        this._coords = UndefinedBlockCoords;
+        this._coords = UndefinedElCoords;
         this._widthGrowth = 0;
         this._minWidth = "";
         this._maxWidth = "";
@@ -298,37 +321,21 @@ class BlockImpl {
         this._minHeight = "";
         this._maxHeight = "";
         this._contentAlignment = Align.Default;
-        this._blockAlignment = Align.Default;
+        this._elementAlignment = Align.Default;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
         this._hasStyles = false;
-        this.updatePriority = Priority.Realtime;
-        this.childrenShuffling = false;
-        BlockImpl.grandBlockCount++;
-        if (this.isOn(Mode.PinpointUpdate))
-            BlockImpl.disposableBlockCount++;
-    }
-    update(_triggers) {
-        updateNow(this.node.ties);
     }
     prepareForUpdate() {
         this._area = undefined;
         this._hasStyles = false;
     }
-    isOn(mode) {
-        return (chainedMode(this.node.builder) & mode) === mode;
-    }
-    get isInitialUpdate() { return this.node.stamp === 2; }
-    get isAuxiliary() { return this.kind > BlockKind.Note; }
-    get isSection() { return this.kind === BlockKind.Section; }
-    get isTable() { return this.kind === BlockKind.Table; }
-    get isAutoMountEnabled() { return !this.isOn(Mode.ManualMount) && this.node.host !== this; }
-    get isMoved() { return this.node.owner.node.children.isMoved(this.node.ties); }
-    get strictOrder() { return this.node.children.isStrict; }
-    set strictOrder(value) { this.node.children.isStrict = value; }
+    get isAuxiliary() { return this.kind > ElKind.Note; }
+    get isSection() { return this.kind === ElKind.Section; }
+    get isTable() { return this.kind === ElKind.Table; }
     get kind() { return this._kind; }
     set kind(value) {
-        if (value !== this._kind || this.node.stamp < 2) {
+        if (value !== this._kind || this.node.stamp >= Number.MAX_SAFE_INTEGER - 1) {
             this.node.driver.applyKind(this, value);
             this._kind = value;
         }
@@ -338,13 +345,14 @@ class BlockImpl {
         var _a, _b;
         const node = this.node;
         const driver = node.driver;
-        if (!driver.isRow) {
-            const owner = node.owner.node;
-            const cursorPosition = (_b = (_a = node.ties.prev) === null || _a === void 0 ? void 0 : _a.instance.node.cursorPosition) !== null && _b !== void 0 ? _b : InitialCursorPosition;
-            const newCursorPosition = node.cursorPosition = owner.children.isStrict ? new CursorPosition(cursorPosition) : undefined;
-            const isCursorBlock = driver instanceof CursorCommandDriver;
-            const coords = getEffectiveBlockCoords(!isCursorBlock, value, owner.maxColumnCount, owner.maxRowCount, cursorPosition, newCursorPosition);
-            if (!equalBlockCoords(coords, this._coords)) {
+        if (!driver.isSeparator) {
+            const owner = node.owner;
+            const ownerEl = owner.slot.instance;
+            const cursorPosition = (_b = (_a = node.slot.prev) === null || _a === void 0 ? void 0 : _a.instance.cursorPosition) !== null && _b !== void 0 ? _b : InitialCursorPosition;
+            const newCursorPosition = this.cursorPosition = owner.children.isStrict ? new CursorPosition(cursorPosition) : undefined;
+            const isCursorElement = driver instanceof CursorCommandDriver;
+            const coords = getEffectiveElCoords(!isCursorElement, value, ownerEl.maxColumnCount, ownerEl.maxRowCount, cursorPosition, newCursorPosition);
+            if (!equalElCoords(coords, this._coords)) {
                 driver.applyCoords(this, coords);
                 this._coords = coords;
             }
@@ -402,11 +410,11 @@ class BlockImpl {
             this._contentAlignment = value;
         }
     }
-    get blockAlignment() { return this._blockAlignment; }
-    set blockAlignment(value) {
-        if (value !== this._blockAlignment) {
-            this.node.driver.applyBlockAlignment(this, value);
-            this._blockAlignment = value;
+    get elementAlignment() { return this._elementAlignment; }
+    set elementAlignment(value) {
+        if (value !== this._elementAlignment) {
+            this.node.driver.applyElementAlignment(this, value);
+            this._elementAlignment = value;
         }
     }
     get contentWrapping() { return this._contentWrapping; }
@@ -428,39 +436,40 @@ class BlockImpl {
         this._hasStyles = true;
     }
     configureReactronic(options) {
-        if (this.node.stamp !== 1 || !this.isOn(Mode.PinpointUpdate))
-            throw new Error("reactronic can be configured only for blocks with separate reaction mode and only inside initialize");
-        return Rx.getReaction(this.update).configure(options);
+        const node = this.node;
+        if (node.stamp < Number.MAX_SAFE_INTEGER - 1 || !node.has(Mode.PinpointUpdate))
+            throw new Error("reactronic can be configured only for elements with pinpoint update mode and only inside initialize");
+        return Rx.getReaction(node.update).configure(options);
     }
     static get curr() {
         if (!gCurrent)
-            throw new Error("current block is undefined");
+            throw new Error("current element is undefined");
         return gCurrent;
     }
     static tryUseSubTreeVariable(variable) {
         var _a, _b;
-        let b = BlockImpl.curr.instance;
-        while (((_a = b.node.context) === null || _a === void 0 ? void 0 : _a.variable) !== variable && b.node.owner !== b)
-            b = b.node.outer;
-        return (_b = b.node.context) === null || _b === void 0 ? void 0 : _b.value;
+        let el = ElImpl.curr.instance;
+        while (((_a = el.node.context) === null || _a === void 0 ? void 0 : _a.variable) !== variable && el.node.owner !== el.node)
+            el = el.node.outer.slot.instance;
+        return (_b = el.node.context) === null || _b === void 0 ? void 0 : _b.value;
     }
     static useSubTreeVariableValue(variable) {
         var _a;
-        const result = (_a = BlockImpl.tryUseSubTreeVariable(variable)) !== null && _a !== void 0 ? _a : variable.defaultValue;
+        const result = (_a = ElImpl.tryUseSubTreeVariable(variable)) !== null && _a !== void 0 ? _a : variable.defaultValue;
         if (!result)
             throw new Error("context doesn't exist");
         return result;
     }
     static setSubTreeVariableValue(variable, value) {
-        const b = BlockImpl.curr.instance;
-        const node = b.node;
+        const el = ElImpl.curr.instance;
+        const node = el.node;
         const owner = node.owner;
-        const hostCtx = unobs(() => { var _a; return (_a = owner.node.context) === null || _a === void 0 ? void 0 : _a.value; });
+        const hostCtx = unobs(() => { var _a; return (_a = owner.context) === null || _a === void 0 ? void 0 : _a.value; });
         if (value && value !== hostCtx) {
             if (hostCtx)
                 node.outer = owner;
             else
-                node.outer = owner.node.outer;
+                node.outer = owner.outer;
             Transaction.run({ separation: true }, () => {
                 const ctx = node.context;
                 if (ctx) {
@@ -468,49 +477,36 @@ class BlockImpl {
                     ctx.value = value;
                 }
                 else
-                    node.context = new BlockCtxImpl(variable, value);
+                    node.context = new RxNodeCtxImpl(variable, value);
             });
         }
         else if (hostCtx)
             node.outer = owner;
         else
-            node.outer = owner.node.outer;
+            node.outer = owner.outer;
     }
     rowBreak() {
         var _a, _b;
         const node = this.node;
-        const cursorPosition = (_b = (_a = node.ties.prev) === null || _a === void 0 ? void 0 : _a.instance.node.cursorPosition) !== null && _b !== void 0 ? _b : InitialCursorPosition;
-        const newCursorPosition = this.node.cursorPosition = new CursorPosition(cursorPosition);
+        const cursorPosition = (_b = (_a = node.slot.prev) === null || _a === void 0 ? void 0 : _a.instance.cursorPosition) !== null && _b !== void 0 ? _b : InitialCursorPosition;
+        const newCursorPosition = this.cursorPosition = new CursorPosition(cursorPosition);
         newCursorPosition.x = 1;
         newCursorPosition.y = newCursorPosition.runningMaxY + 1;
     }
 }
-BlockImpl.grandBlockCount = 0;
-BlockImpl.disposableBlockCount = 0;
-BlockImpl.logging = undefined;
-__decorate([
-    reactive,
-    options({
-        reentrance: Reentrance.CancelPrevious,
-        triggeringArgs: true,
-        noSideEffects: false,
-    }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], BlockImpl.prototype, "update", null);
-function getBlockKey(block) {
-    const node = block.node;
+ElImpl.logging = undefined;
+function getNodeKey(element) {
+    const node = element.node;
     return node.stamp >= 0 ? node.key : undefined;
 }
-function getEffectiveBlockCoords(isRegularBlock, area, maxX, maxY, cursorPosition, newCursorPosition) {
+function getEffectiveElCoords(isRegularElement, area, maxX, maxY, cursorPosition, newCursorPosition) {
     var _a, _b;
     let result;
     if (typeof (area) === "string") {
-        result = parseBlockCoords(area, { x1: 0, y1: 0, x2: 0, y2: 0 });
-        absolutizeBlockCoords(result, cursorPosition.x, cursorPosition.y, maxX || Infinity, maxY || Infinity, result);
+        result = parseElCoords(area, { x1: 0, y1: 0, x2: 0, y2: 0 });
+        absolutizeElCoords(result, cursorPosition.x, cursorPosition.y, maxX || Infinity, maxY || Infinity, result);
         if (newCursorPosition) {
-            newCursorPosition.x = isRegularBlock ? result.x2 + 1 : result.x1;
+            newCursorPosition.x = isRegularElement ? result.x2 + 1 : result.x1;
             newCursorPosition.y = result.y1;
             newCursorPosition.flags = CursorFlags.OwnCursorPosition;
         }
@@ -527,12 +523,12 @@ function getEffectiveBlockCoords(isRegularBlock, area, maxX, maxY, cursorPositio
         const runningX = maxX !== 0 ? maxX : cursorPosition.runningMaxX;
         const runningY = maxY !== 0 ? maxY : cursorPosition.runningMaxY;
         result = { x1: 0, y1: 0, x2: 0, y2: 0 };
-        if (dx === 0 && isRegularBlock) {
+        if (dx === 0 && isRegularElement) {
             dx = runningX || 1;
             newCursorPosition.flags = CursorFlags.UsesRunningColumnCount;
         }
         if (dx >= 0) {
-            if (isRegularBlock) {
+            if (isRegularElement) {
                 result.x1 = cursorPosition.x;
                 result.x2 = absolutizePosition(result.x1 + dx - 1, 0, maxX || Infinity);
                 newCursorPosition.x = result.x2 + 1;
@@ -543,7 +539,7 @@ function getEffectiveBlockCoords(isRegularBlock, area, maxX, maxY, cursorPositio
             }
         }
         else {
-            if (isRegularBlock) {
+            if (isRegularElement) {
                 result.x1 = Math.max(cursorPosition.x + dx, 1);
                 result.x2 = cursorPosition.x;
                 newCursorPosition.x = result.x2 + 1;
@@ -553,12 +549,12 @@ function getEffectiveBlockCoords(isRegularBlock, area, maxX, maxY, cursorPositio
                 newCursorPosition.x = result.x2;
             }
         }
-        if (dy === 0 && isRegularBlock) {
+        if (dy === 0 && isRegularElement) {
             dy = runningY || 1;
             newCursorPosition.flags |= CursorFlags.UsesRunningRowCount;
         }
         if (dy >= 0) {
-            if (isRegularBlock) {
+            if (isRegularElement) {
                 result.y1 = cursorPosition.y;
                 result.y2 = absolutizePosition(result.y1 + dy - 1, 0, maxY || Infinity);
                 if (result.y2 > newCursorPosition.runningMaxY)
@@ -568,7 +564,7 @@ function getEffectiveBlockCoords(isRegularBlock, area, maxX, maxY, cursorPositio
                 result.y1 = result.y2 = cursorPosition.y + dy;
         }
         else {
-            if (isRegularBlock) {
+            if (isRegularElement) {
                 result.y1 = Math.max(cursorPosition.y + dy, 1);
                 result.y2 = cursorPosition.y;
             }
@@ -582,15 +578,15 @@ function getEffectiveBlockCoords(isRegularBlock, area, maxX, maxY, cursorPositio
 }
 function runUpdateNestedTreesThenDo(error, action) {
     var _a;
-    const curr = BlockImpl.curr;
+    const curr = ElImpl.curr;
     const owner = curr.instance;
     const children = owner.node.children;
     if (children.isMergeInProgress) {
         let promised = undefined;
         try {
             children.endMerge(error);
-            for (const item of children.removedItems(true))
-                triggerFinalization(item, true, true);
+            for (const slot of children.removedItems(true))
+                triggerFinalization(slot, true, true);
             if (!error) {
                 const ownerIsSection = owner.isSection;
                 const sequential = children.isStrict;
@@ -598,22 +594,22 @@ function runUpdateNestedTreesThenDo(error, action) {
                 let p2 = undefined;
                 let mounting = false;
                 let hostingRow = owner;
-                for (const item of children.items()) {
+                for (const slot of children.items()) {
                     if (Transaction.isCanceled)
                         break;
-                    const block = item.instance;
-                    const isRow = block.node.driver.isRow;
-                    const host = isRow ? owner : hostingRow;
-                    const p = (_a = block.updatePriority) !== null && _a !== void 0 ? _a : Priority.Realtime;
-                    mounting = markToMountIfNecessary(mounting, host, item, children, sequential);
+                    const el = slot.instance;
+                    const isSeparator = el.node.driver.isSeparator;
+                    const host = isSeparator ? owner : hostingRow;
+                    const p = (_a = el.node.priority) !== null && _a !== void 0 ? _a : Priority.Realtime;
+                    mounting = markToMountIfNecessary(mounting, host, slot, children, sequential);
                     if (p === Priority.Realtime)
-                        triggerUpdate(item);
+                        triggerUpdate(slot);
                     else if (p === Priority.Normal)
-                        p1 = push(item, p1);
+                        p1 = push(slot, p1);
                     else
-                        p2 = push(item, p2);
-                    if (ownerIsSection && isRow)
-                        hostingRow = block;
+                        p2 = push(slot, p2);
+                    if (ownerIsSection && isSeparator)
+                        hostingRow = el;
                 }
                 if (!Transaction.isCanceled && (p1 !== undefined || p2 !== undefined))
                     promised = startIncrementalUpdate(curr, children, p1, p2).then(() => action(error), e => action(e));
@@ -625,18 +621,18 @@ function runUpdateNestedTreesThenDo(error, action) {
         }
     }
 }
-function markToMountIfNecessary(mounting, host, ties, children, sequential) {
-    const b = ties.instance;
-    const node = b.node;
-    if (b.native && !b.isOn(Mode.ManualMount)) {
-        if (mounting || node.host !== host) {
-            children.markAsMoved(ties);
+function markToMountIfNecessary(mounting, host, slot, children, sequential) {
+    const el = slot.instance;
+    const node = el.node;
+    if (el.native && !node.has(Mode.ManualMount)) {
+        if (mounting || node.host !== host.node) {
+            children.markAsMoved(slot);
             mounting = false;
         }
     }
-    else if (sequential && children.isMoved(ties))
+    else if (sequential && children.isMoved(slot))
         mounting = true;
-    node.host = host;
+    node.host = host.node;
     return mounting;
 }
 function startIncrementalUpdate(owner, allChildren, priority1, priority2) {
@@ -651,12 +647,12 @@ function startIncrementalUpdate(owner, allChildren, priority1, priority2) {
 function updateIncrementally(owner, stamp, allChildren, items, priority) {
     return __awaiter(this, void 0, void 0, function* () {
         yield Transaction.requestNextFrame();
-        const block = owner.instance;
+        const el = owner.instance;
         if (!Transaction.isCanceled || !Transaction.isFrameOver(1, Verstak.shortFrameDuration / 3)) {
             let outerPriority = Verstak.currentUpdatePriority;
             Verstak.currentUpdatePriority = priority;
             try {
-                if (block.childrenShuffling)
+                if (el.node.childrenShuffling)
                     shuffle(items);
                 const frameDurationLimit = priority === Priority.Background ? Verstak.shortFrameDuration : Infinity;
                 let frameDuration = Math.min(frameDurationLimit, Math.max(Verstak.frameDuration / 4, Verstak.shortFrameDuration));
@@ -679,108 +675,114 @@ function updateIncrementally(owner, stamp, allChildren, items, priority) {
         }
     });
 }
-function triggerUpdate(ties) {
-    const b = ties.instance;
-    const node = b.node;
+function triggerUpdate(slot) {
+    const el = slot.instance;
+    const node = el.node;
     if (node.stamp >= 0) {
-        if (b.isOn(Mode.PinpointUpdate)) {
-            if (node.stamp === 0) {
+        if (node.has(Mode.PinpointUpdate)) {
+            if (node.stamp === Number.MAX_SAFE_INTEGER) {
                 Transaction.outside(() => {
                     if (Rx.isLogging)
-                        Rx.setLoggingHint(b, node.key);
-                    Rx.getReaction(b.update).configure({
+                        Rx.setLoggingHint(el, node.key);
+                    Rx.getReaction(node.update).configure({
                         order: node.level,
                     });
                 });
             }
-            unobs(b.update, node.builder.triggers);
+            unobs(node.update, node.spec.triggers);
         }
         else
-            updateNow(ties);
+            updateNow(slot);
     }
 }
-function mountIfNecessary(block) {
-    const node = block.node;
+function mountOrRemountIfNecessary(element) {
+    const node = element.node;
     const driver = node.driver;
-    if (node.stamp === 0) {
-        node.stamp = 1;
+    if (node.stamp === Number.MAX_SAFE_INTEGER) {
+        node.stamp = Number.MAX_SAFE_INTEGER - 1;
         unobs(() => {
-            driver.create(block, block);
-            driver.initialize(block);
-            if (block.isAutoMountEnabled)
-                driver.mount(block);
+            driver.create(element);
+            driver.initialize(element);
+            if (!node.has(Mode.ManualMount)) {
+                node.stamp = 0;
+                if (element.node.host !== element.node)
+                    driver.mount(element);
+            }
+            node.stamp = 0;
         });
     }
-    else if (block.isMoved && block.isAutoMountEnabled)
-        unobs(() => driver.mount(block));
+    else if (node.isMoved && !node.has(Mode.ManualMount) && element.node.host !== element.node)
+        unobs(() => driver.mount(element));
 }
-function updateNow(ties) {
-    const b = ties.instance;
-    const node = b.node;
+function updateNow(slot) {
+    const el = slot.instance;
+    const node = el.node;
     if (node.stamp >= 0) {
         let result = undefined;
-        runInside(ties, () => {
-            try {
-                mountIfNecessary(b);
-                node.stamp++;
-                node.numerator = 0;
-                b.prepareForUpdate();
-                node.children.beginMerge();
-                const driver = node.driver;
-                result = driver.update(b);
-                if (b.area === undefined && node.owner.isTable)
-                    b.area = undefined;
-                if (result instanceof Promise)
-                    result.then(v => { runUpdateNestedTreesThenDo(undefined, NOP); return v; }, e => { console.log(e); runUpdateNestedTreesThenDo(e !== null && e !== void 0 ? e : new Error("unknown error"), NOP); });
-                else
-                    runUpdateNestedTreesThenDo(undefined, NOP);
-            }
-            catch (e) {
-                runUpdateNestedTreesThenDo(e, NOP);
-                console.log(`Update failed: ${node.key}`);
-                console.log(`${e}`);
+        runInside(slot, () => {
+            mountOrRemountIfNecessary(el);
+            if (node.stamp < Number.MAX_SAFE_INTEGER - 1) {
+                try {
+                    node.stamp++;
+                    node.numerator = 0;
+                    el.prepareForUpdate();
+                    node.children.beginMerge();
+                    const driver = node.driver;
+                    result = driver.update(el);
+                    if (el.area === undefined && node.owner.slot.instance.isTable)
+                        el.area = undefined;
+                    if (result instanceof Promise)
+                        result.then(v => { runUpdateNestedTreesThenDo(undefined, NOP); return v; }, e => { console.log(e); runUpdateNestedTreesThenDo(e !== null && e !== void 0 ? e : new Error("unknown error"), NOP); });
+                    else
+                        runUpdateNestedTreesThenDo(undefined, NOP);
+                }
+                catch (e) {
+                    runUpdateNestedTreesThenDo(e, NOP);
+                    console.log(`Update failed: ${node.key}`);
+                    console.log(`${e}`);
+                }
             }
         });
     }
 }
-function triggerFinalization(ties, isLeader, individual) {
-    const b = ties.instance;
-    const node = b.node;
+function triggerFinalization(slot, isLeader, individual) {
+    const el = slot.instance;
+    const node = el.node;
     if (node.stamp >= 0) {
         const driver = node.driver;
-        if (individual && node.key !== node.builder.key && !driver.isRow)
-            console.log(`WARNING: it is recommended to assign explicit key for conditional block in order to avoid unexpected side effects: ${node.key}`);
+        if (individual && node.key !== node.spec.key && !driver.isSeparator)
+            console.log(`WARNING: it is recommended to assign explicit key for conditional element in order to avoid unexpected side effects: ${node.key}`);
         node.stamp = ~node.stamp;
-        const childrenAreLeaders = unobs(() => driver.finalize(b, isLeader));
-        b.native = null;
-        b.controller = null;
-        if (b.isOn(Mode.PinpointUpdate)) {
-            ties.aux = undefined;
+        const childrenAreLeaders = unobs(() => driver.finalize(el, isLeader));
+        el.native = null;
+        el.controller = null;
+        if (node.has(Mode.PinpointUpdate)) {
+            slot.aux = undefined;
             const last = gLastToDispose;
             if (last)
-                gLastToDispose = last.aux = ties;
+                gLastToDispose = last.aux = slot;
             else
-                gFirstToDispose = gLastToDispose = ties;
-            if (gFirstToDispose === ties)
-                Transaction.run({ separation: "disposal", hint: `runDisposalLoop(initiator=${ties.instance.node.key})` }, () => {
+                gFirstToDispose = gLastToDispose = slot;
+            if (gFirstToDispose === slot)
+                Transaction.run({ separation: "disposal", hint: `runDisposalLoop(initiator=${slot.instance.node.key})` }, () => {
                     void runDisposalLoop().then(NOP, error => console.log(error));
                 });
         }
-        for (const item of node.children.items())
-            triggerFinalization(item, childrenAreLeaders, false);
-        BlockImpl.grandBlockCount--;
+        for (const slot of node.children.items())
+            triggerFinalization(slot, childrenAreLeaders, false);
+        RxNodeImpl.grandNodeCount--;
     }
 }
 function runDisposalLoop() {
     return __awaiter(this, void 0, void 0, function* () {
         yield Transaction.requestNextFrame();
-        let item = gFirstToDispose;
-        while (item !== undefined) {
+        let slot = gFirstToDispose;
+        while (slot !== undefined) {
             if (Transaction.isFrameOver(500, 5))
                 yield Transaction.requestNextFrame();
-            Rx.dispose(item.instance);
-            item = item.aux;
-            BlockImpl.disposableBlockCount--;
+            Rx.dispose(slot.instance);
+            slot = slot.aux;
+            RxNodeImpl.disposableNodeCount--;
         }
         gFirstToDispose = gLastToDispose = undefined;
     });
@@ -796,10 +798,10 @@ function wrapToRunInside(func) {
         wrappedToRunInside = func;
     return wrappedToRunInside;
 }
-function runInside(ties, func, ...args) {
+function runInside(slot, func, ...args) {
     const outer = gCurrent;
     try {
-        gCurrent = ties;
+        gCurrent = slot;
         return func(...args);
     }
     finally {
@@ -824,7 +826,7 @@ function triggersAreEqual(a1, a2) {
     }
     return result;
 }
-function absolutizeBlockCoords(area, cursorX, cursorY, maxWidth, maxHeight, result) {
+function absolutizeElCoords(area, cursorX, cursorY, maxWidth, maxHeight, result) {
     const x1 = absolutizePosition(area.x1, cursorX, maxWidth);
     const x2 = absolutizePosition(area.x2, x1, maxWidth);
     if (x1 <= x2)