verstak 0.22.508 → 0.22.510

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

@@ -17,13 +17,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { reactive, nonreactive, Transaction, options, Reentrance, Rx, Collection, ObservableObject, raw } from "reactronic";
-import { Allocator, To } from "./Allocator";
+import { equalCellRanges } from "./CellRange";
+import { Cursor, Align } from "./Cursor";
 export var Priority;
 (function (Priority) {
     Priority[Priority["SyncP0"] = 0] = "SyncP0";
     Priority[Priority["AsyncP1"] = 1] = "AsyncP1";
     Priority[Priority["AsyncP2"] = 2] = "AsyncP2";
 })(Priority || (Priority = {}));
+export function asComponent(outer, base) {
+    const result = Object.assign(Object.assign(Object.assign({}, base), outer), { initialize: via(outer === null || outer === void 0 ? void 0 : outer.initialize, base.initialize), render: via(outer === null || outer === void 0 ? void 0 : outer.render, base.render), finalize: via(outer === null || outer === void 0 ? void 0 : outer.finalize, base.finalize) });
+    return result;
+}
+function via(outer, base) {
+    const inherited = base !== null && base !== void 0 ? base : NOP;
+    return outer ? (e, b) => outer(e, b, () => inherited(e, b)) : inherited;
+}
 export function setContext(type, context) {
     return VBlockImpl.setContext(type, context);
 }
@@ -31,9 +40,6 @@ export function use(type) {
     return VBlockImpl.use(type);
 }
 export class VBlock {
-    render() {
-        return invokeRenderFunction(this);
-    }
     get isInitialRendering() {
         return this.stamp === 2;
     }
@@ -50,7 +56,7 @@ export class VBlock {
     static runForAllBlocks(action) {
         forEachChildRecursively(gSysRoot, action);
     }
-    static claim(name, args, driver) {
+    static claim(name, driver, args) {
         var _a, _b;
         let result;
         const owner = gCurrent.instance;
@@ -58,7 +64,7 @@ export class VBlock {
         let ex = undefined;
         driver !== null && driver !== void 0 ? driver : (driver = AbstractDriver.group);
         name || (name = `${++owner.numerator}`);
-        if (driver.isPart) {
+        if (driver.isRow) {
             const last = children.lastClaimedItem();
             if (((_a = last === null || last === void 0 ? void 0 : last.instance) === null || _a === void 0 ? void 0 : _a.driver) === driver)
                 ex = last;
@@ -97,84 +103,66 @@ export var LayoutKind;
 (function (LayoutKind) {
     LayoutKind[LayoutKind["Block"] = 0] = "Block";
     LayoutKind[LayoutKind["Grid"] = 1] = "Grid";
-    LayoutKind[LayoutKind["Part"] = 2] = "Part";
+    LayoutKind[LayoutKind["Row"] = 2] = "Row";
     LayoutKind[LayoutKind["Group"] = 3] = "Group";
     LayoutKind[LayoutKind["Text"] = 4] = "Text";
 })(LayoutKind || (LayoutKind = {}));
-const createDefaultAllocator = () => new Allocator();
+const createDefaultCursor = () => new Cursor();
 export class AbstractDriver {
-    constructor(name, layout, createAllocator) {
+    constructor(name, layout, createCursor) {
         this.name = name;
         this.layout = layout;
-        this.createAllocator = createAllocator !== null && createAllocator !== void 0 ? createAllocator : createDefaultAllocator;
+        this.createCursor = createCursor !== null && createCursor !== void 0 ? createCursor : createDefaultCursor;
     }
     get isSequential() { return (this.layout & 1) === 0; }
     get isAuxiliary() { return (this.layout & 2) === 2; }
     get isBlock() { return this.layout === LayoutKind.Block; }
     get isGrid() { return this.layout === LayoutKind.Grid; }
-    get isPart() { return this.layout === LayoutKind.Part; }
+    get isRow() { return this.layout === LayoutKind.Row; }
     initialize(block, native) {
-        var _a;
+        var _a, _b;
         const b = block;
         b.native = native;
-        const initialize = (_a = block.args) === null || _a === void 0 ? void 0 : _a.initialize;
-        if (initialize) {
-            if (Array.isArray(initialize))
-                for (const init of initialize)
-                    init(native, block);
-            else
-                initialize(native, block);
-        }
+        (_b = (_a = block.args).initialize) === null || _b === void 0 ? void 0 : _b.call(_a, native, block, NOP);
     }
     finalize(block, isLeader) {
-        var _a;
+        var _a, _b;
         const b = block;
-        const finalize = (_a = block.args) === null || _a === void 0 ? void 0 : _a.finalize;
-        if (finalize) {
-            const native = block.native;
-            if (Array.isArray(finalize))
-                for (const fin of finalize)
-                    fin(native, block);
-            else
-                finalize(native, block);
-        }
+        const native = block.native;
+        (_b = (_a = block.args).finalize) === null || _b === void 0 ? void 0 : _b.call(_a, native, block, NOP);
         b.native = undefined;
         return isLeader;
     }
     deploy(block, sequential) {
     }
-    arrange(block, place, heightGrowth) {
-        var _a, _b, _c;
-        const b = block;
-        if (heightGrowth === undefined) {
-            b.place = place;
-            const host = b.host;
-            if (host.driver.isPart) {
-                const growth = (_a = place === null || place === void 0 ? void 0 : place.heightGrowth) !== null && _a !== void 0 ? _a : 0;
-                if (growth > 0 && ((_c = (_b = host.place) === null || _b === void 0 ? void 0 : _b.heightGrowth) !== null && _c !== void 0 ? _c : 0) < growth)
-                    host.driver.arrange(host, undefined, growth);
-            }
-        }
-        else if (heightGrowth > 0) {
-            if (b.place === undefined)
-                b.place = {
-                    exact: undefined,
-                    widthMin: "", widthMax: "", widthGrowth: 0,
-                    heightMin: "", heightMax: "", heightGrowth,
-                    alignContent: To.Default,
-                    alignFrame: To.Default,
-                    flowWrap: false,
-                };
-            else
-                b.place.heightGrowth = heightGrowth;
-        }
+    applyCellRange(block, cellRange) {
+    }
+    applyWidthGrowth(block, widthGrowth) {
+    }
+    applyWidthMin(block, widthMin) {
+    }
+    applyWidthMax(block, widthMax) {
+    }
+    applyHeightGrowth(block, heightGrowth) {
+    }
+    applyHeightMin(block, heightMin) {
+    }
+    applyHeightMax(block, heightMax) {
+    }
+    applyAlignContent(block, alignContent) {
+    }
+    applyAlignFrame(block, alignFrame) {
+    }
+    applyWrapping(block, wrapping) {
+    }
+    applyDangling(block, dangling) {
     }
     render(block) {
         var _a;
         let result;
         const override = (_a = block.args) === null || _a === void 0 ? void 0 : _a.override;
         if (override)
-            result = override(block.native, block);
+            result = override(block.native, block, NOP);
         else
             result = invokeRenderFunction(block);
         return result;
@@ -182,11 +170,13 @@ export class AbstractDriver {
 }
 AbstractDriver.group = new AbstractDriver("group", LayoutKind.Group);
 function invokeRenderFunction(block) {
-    return block.args.render(block.native, block);
+    var _a;
+    const r = (_a = block.args.render) !== null && _a !== void 0 ? _a : NOP;
+    return r(block.native, block, NOP);
 }
 export class StaticDriver extends AbstractDriver {
-    constructor(element, name, layout, createAllocator) {
-        super(name, layout, createAllocator);
+    constructor(element, name, layout, createCursor) {
+        super(name, layout, createCursor);
         this.element = element;
     }
     initialize(block, element) {
@@ -205,7 +195,7 @@ class VBlockContext extends ObservableObject {
 }
 __decorate([
     raw,
-    __metadata("design:type", Function)
+    __metadata("design:type", Object)
 ], VBlockContext.prototype, "type", void 0);
 class VBlockImpl extends VBlock {
     constructor(name, driver, owner, args) {
@@ -214,6 +204,18 @@ class VBlockImpl extends VBlock {
         this.driver = driver;
         this.args = args;
         this.model = undefined;
+        this.assignedCells = undefined;
+        this.appliedCellRange = Cursor.UndefinedCellRange;
+        this.appliedWidthGrowth = 0;
+        this.appliedWidthMin = "";
+        this.appliedWidthMax = "";
+        this.appliedHeightGrowth = 0;
+        this.appliedHeightMin = "";
+        this.appliedHeightMax = "";
+        this.appliedAlignContent = Align.Default;
+        this.appliedAlignFrame = Align.Default;
+        this.appliedWrapping = false;
+        this.appliedDangling = false;
         this.level = owner.level + 1;
         this.host = owner;
         this.children = new Collection(driver.isSequential, getBlockName);
@@ -221,14 +223,94 @@ class VBlockImpl extends VBlock {
         this.item = undefined;
         this.stamp = 0;
         this.native = undefined;
-        this.place = undefined;
-        this.allocator = driver.createAllocator();
+        this.cursor = driver.createCursor();
         this.senior = owner.context ? owner : owner.senior;
         this.context = undefined;
     }
     rerender(_triggers) {
         runRender(this.item);
     }
+    get cells() { return this.assignedCells; }
+    set cells(value) {
+        if (this.assignedCells !== undefined)
+            throw new Error("cells can be assigned only once during rendering");
+        const cellRange = this.host.cursor.onwards(value);
+        if (!equalCellRanges(cellRange, this.appliedCellRange)) {
+            this.driver.applyCellRange(this, cellRange);
+            this.appliedCellRange = cellRange;
+        }
+        this.assignedCells = value !== null && value !== void 0 ? value : {};
+    }
+    get widthGrowth() { return this.appliedWidthGrowth; }
+    set widthGrowth(value) {
+        if (value !== this.appliedWidthGrowth) {
+            this.driver.applyWidthGrowth(this, value);
+            this.appliedWidthGrowth = value;
+        }
+    }
+    get widthMin() { return this.appliedWidthMin; }
+    set widthMin(value) {
+        if (value !== this.appliedWidthMin) {
+            this.driver.applyWidthMin(this, value);
+            this.appliedWidthMin = value;
+        }
+    }
+    get widthMax() { return this.appliedWidthMax; }
+    set widthMax(value) {
+        if (value !== this.appliedWidthMax) {
+            this.driver.applyWidthMax(this, value);
+            this.appliedWidthMax = value;
+        }
+    }
+    get heightGrowth() { return this.appliedHeightGrowth; }
+    set heightGrowth(value) {
+        if (value !== this.appliedHeightGrowth) {
+            this.driver.applyHeightGrowth(this, value);
+            this.appliedHeightGrowth = value;
+        }
+    }
+    get heightMin() { return this.appliedHeightMin; }
+    set heightMin(value) {
+        if (value !== this.appliedWidthMin) {
+            this.driver.applyWidthMin(this, value);
+            this.appliedWidthMin = value;
+        }
+    }
+    get heightMax() { return this.appliedHeightMax; }
+    set heightMax(value) {
+        if (value !== this.appliedWidthMax) {
+            this.driver.applyWidthMax(this, value);
+            this.appliedWidthMax = value;
+        }
+    }
+    get alignContent() { return this.appliedAlignContent; }
+    set alignContent(value) {
+        if (value !== this.appliedAlignContent) {
+            this.driver.applyAlignContent(this, value);
+            this.appliedAlignContent = value;
+        }
+    }
+    get alignFrame() { return this.appliedAlignFrame; }
+    set alignFrame(value) {
+        if (value !== this.appliedAlignFrame) {
+            this.driver.applyAlignFrame(this, value);
+            this.appliedAlignFrame = value;
+        }
+    }
+    get wrapping() { return this.appliedWrapping; }
+    set wrapping(value) {
+        if (value !== this.appliedWrapping) {
+            this.driver.applyWrapping(this, value);
+            this.appliedWrapping = value;
+        }
+    }
+    get dangling() { return this.appliedDangling; }
+    set dangling(value) {
+        if (value !== this.appliedDangling) {
+            this.driver.applyDangling(this, value);
+            this.appliedDangling = value;
+        }
+    }
     static use(type) {
         var _a, _b;
         let b = gCurrent.instance;
@@ -291,25 +373,19 @@ function runRenderNestedTreesThenDo(error, action) {
             if (!error) {
                 const ownerIsBlock = owner.driver.isBlock;
                 const sequential = children.strict;
-                const allocator = owner.allocator;
-                allocator.reset();
+                const cursor = owner.cursor;
                 let p1 = undefined;
                 let p2 = undefined;
                 let redeploy = false;
                 let partHost = owner;
+                cursor.reset();
                 for (const item of children.items()) {
                     if (Transaction.isCanceled)
                         break;
                     const block = item.instance;
                     const driver = block.driver;
                     const opt = block.args;
-                    if (!driver.isPart) {
-                        const place = allocator.allocate(opt);
-                        driver.arrange(block, place, undefined);
-                    }
-                    else
-                        allocator.lineFeed();
-                    const host = driver.isPart ? owner : partHost;
+                    const host = driver.isRow ? owner : partHost;
                     redeploy = markToRedeployIfNecessary(redeploy, host, item, children, sequential);
                     const priority = (_a = opt === null || opt === void 0 ? void 0 : opt.priority) !== null && _a !== void 0 ? _a : Priority.SyncP0;
                     if (priority === Priority.SyncP0)
@@ -318,7 +394,7 @@ function runRenderNestedTreesThenDo(error, action) {
                         p1 = push(item, p1);
                     else
                         p2 = push(item, p2);
-                    if (ownerIsBlock && driver.isPart)
+                    if (ownerIsBlock && driver.isRow)
                         partHost = block;
                 }
                 if (!Transaction.isCanceled && (p1 !== undefined || p2 !== undefined))
@@ -419,7 +495,6 @@ function prepareRender(item, redeploy, sequential) {
             }
             driver.initialize(block, undefined);
             driver.deploy(block, sequential);
-            driver.arrange(block, block.place, undefined);
         });
     }
     else if (redeploy)
@@ -435,8 +510,13 @@ function runRender(item) {
             try {
                 block.stamp++;
                 block.numerator = 0;
+                block.assignedCells = undefined;
                 block.children.beginMerge();
                 result = block.driver.render(block);
+                if (block.driver.isRow)
+                    block.host.cursor.lineFeed();
+                else if (block.assignedCells === undefined)
+                    block.cells = undefined;
                 if (result instanceof Promise)
                     result.then(v => { runRenderNestedTreesThenDo(undefined, NOP); return v; }, e => { console.log(e); runRenderNestedTreesThenDo(e !== null && e !== void 0 ? e : new Error("unknown error"), NOP); });
                 else
@@ -560,7 +640,7 @@ function defaultReject(error) {
     throw error;
 }
 Promise.prototype.then = reactronicDomHookedThen;
-const NOP = () => { };
+const NOP = (...args) => { };
 const gSysDriver = new StaticDriver(null, "SYSTEM", LayoutKind.Group);
 const gSysRoot = Collection.createItem(new VBlockImpl("SYSTEM", gSysDriver, { level: 0 }, { reacting: true, render: NOP }));
 gSysRoot.instance.item = gSysRoot;

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

@@ -1,5 +1,5 @@
 export * from "./Utils";
 export * from "./CellRange";
-export * from "./Allocator";
+export * from "./Cursor";
 export * from "./Restyler";
 export * from "./VBlock";

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

@@ -1,5 +1,5 @@
 export * from "./Utils";
 export * from "./CellRange";
-export * from "./Allocator";
+export * from "./Cursor";
 export * from "./Restyler";
 export * from "./VBlock";

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

@@ -1,13 +1,23 @@
-import { VBlock, Place, BlockArgs } from "../core/api";
+import { VBlock, BlockArgs, Align, CellRange } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
 export declare function Block<M = unknown, R = void>(name: string, args: BlockArgs<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function PlainText(content: string, name?: string, args?: Partial<BlockArgs<HTMLElement, void, void>>): VBlock<HTMLElement, void, void>;
-export declare function HtmlText(content: string, name?: string, args?: Partial<BlockArgs<HTMLElement, void, void>>): VBlock<HTMLElement, void, void>;
+export declare function PlainText(content: string, name?: string, args?: BlockArgs<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
+export declare function HtmlText(content: string, name?: string, args?: BlockArgs<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
 export declare function Grid<M = unknown, R = void>(name: string, args: BlockArgs<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
 export declare function Line<T = void>(claim: (x: void) => T): VBlock<HTMLElement>;
 export declare function lineFeed(args?: BlockArgs<HTMLElement, void, void>, noCoalescing?: boolean): VBlock<HTMLElement>;
 export declare function Group<M = unknown, R = void>(name: string, args: BlockArgs<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
 export declare class VerstakDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    arrange(block: VBlock<T>, place: Place | undefined, heightGrowth: number | undefined): void;
+    applyCellRange(block: VBlock<T>, cellRange: CellRange | undefined): void;
+    applyWidthGrowth(block: VBlock<T>, widthGrowth: number): void;
+    applyWidthMin(block: VBlock<T>, widthMin: string): void;
+    applyWidthMax(block: VBlock<T>, widthMax: string): void;
+    applyHeightGrowth(block: VBlock<T>, heightGrowth: number): void;
+    applyHeightMin(block: VBlock<T>, heightMin: string): void;
+    applyHeightMax(block: VBlock<T>, heightMax: string): void;
+    applyAlignContent(block: VBlock<T>, alignContent: Align): void;
+    applyAlignFrame(block: VBlock<T>, alignFrame: Align): void;
+    applyWrapping(block: VBlock<T>, wrapping: boolean): void;
+    applyDangling(block: VBlock<T>, dangling: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }

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

@@ -1,131 +1,134 @@
-import { VBlock, LayoutKind, To, GridBasedAllocator } from "../core/api";
+import { VBlock, LayoutKind, Align, GridCursor, asComponent } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
 export function Block(name, args) {
-    return VBlock.claim(name, args, VerstakTags.block);
+    return VBlock.claim(name, VerstakTags.block, args);
 }
 export function PlainText(content, name, args) {
-    return VBlock.claim(name !== null && name !== void 0 ? name : "", Object.assign(Object.assign({}, args), { render(e) { e.innerText = content; } }), VerstakTags.text);
+    return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text, asComponent(args, {
+        render(e) {
+            e.innerText = content;
+        },
+    }));
 }
 export function HtmlText(content, name, args) {
-    return VBlock.claim(name !== null && name !== void 0 ? name : "", Object.assign(Object.assign({}, args), { render(e) { e.innerHTML = content; } }), VerstakTags.text);
+    return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text, asComponent(args, {
+        render(e) {
+            e.innerHTML = content;
+        },
+    }));
 }
 export function Grid(name, args) {
-    return VBlock.claim(name, args, VerstakTags.grid);
+    return VBlock.claim(name, VerstakTags.grid, args);
 }
 export function Line(claim) {
-    const result = VBlock.claim("", EMPTY_RENDER, VerstakTags.part);
+    const result = VBlock.claim("", VerstakTags.row, EMPTY_RENDER);
     claim();
-    VBlock.claim("", EMPTY_RENDER, VerstakTags.part);
+    VBlock.claim("", VerstakTags.row, EMPTY_RENDER);
     return result;
 }
 export function lineFeed(args, noCoalescing) {
-    return VBlock.claim("", args !== null && args !== void 0 ? args : EMPTY_RENDER, VerstakTags.part);
+    return VBlock.claim("", VerstakTags.row, args !== null && args !== void 0 ? args : EMPTY_RENDER);
 }
 export function Group(name, args) {
-    return VBlock.claim(name, args, VerstakTags.group);
+    return VBlock.claim(name, VerstakTags.group, args);
 }
 export class VerstakDriver extends HtmlDriver {
-    arrange(block, place, heightGrowth) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-        const native = block.native;
-        if (native) {
-            if (heightGrowth === undefined) {
-                const ex = block.stamp > 1 ? block.place : undefined;
-                if (place !== ex) {
-                    const css = native.style;
-                    const exact = place === null || place === void 0 ? void 0 : place.exact;
-                    if (exact !== (ex === null || ex === void 0 ? void 0 : ex.exact)) {
-                        if (exact) {
-                            const x1 = exact.x1 || 1;
-                            const y1 = exact.y1 || 1;
-                            const x2 = exact.x2 || x1;
-                            const y2 = exact.y2 || y1;
-                            css.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
-                        }
-                        else
-                            css.gridArea = "";
-                    }
-                    const widthGrowth = (_a = place === null || place === void 0 ? void 0 : place.widthGrowth) !== null && _a !== void 0 ? _a : 0;
-                    if (widthGrowth !== ((_b = ex === null || ex === void 0 ? void 0 : ex.widthGrowth) !== null && _b !== void 0 ? _b : 0)) {
-                        if (widthGrowth > 0) {
-                            css.flexGrow = `${widthGrowth}`;
-                            css.flexBasis = "0";
-                        }
-                        else {
-                            css.flexGrow = "";
-                            css.flexBasis = "";
-                        }
-                    }
-                    const widthMin = (_c = place === null || place === void 0 ? void 0 : place.widthMin) !== null && _c !== void 0 ? _c : "";
-                    if (widthMin !== ((_d = ex === null || ex === void 0 ? void 0 : ex.widthMin) !== null && _d !== void 0 ? _d : ""))
-                        css.minWidth = `${widthMin}`;
-                    const widthMax = (_e = place === null || place === void 0 ? void 0 : place.widthMax) !== null && _e !== void 0 ? _e : "";
-                    if (widthMax !== ((_f = ex === null || ex === void 0 ? void 0 : ex.widthMax) !== null && _f !== void 0 ? _f : ""))
-                        css.maxWidth = `${widthMax}`;
-                    const heightMin = (_g = place === null || place === void 0 ? void 0 : place.heightMin) !== null && _g !== void 0 ? _g : "";
-                    if (heightMin !== ((_h = ex === null || ex === void 0 ? void 0 : ex.heightMin) !== null && _h !== void 0 ? _h : ""))
-                        css.minHeight = `${heightMin}`;
-                    const heightMax = (_j = place === null || place === void 0 ? void 0 : place.heightMax) !== null && _j !== void 0 ? _j : "";
-                    if (heightMax !== ((_k = ex === null || ex === void 0 ? void 0 : ex.heightMax) !== null && _k !== void 0 ? _k : ""))
-                        css.maxHeight = `${heightMax}`;
-                    const alignContent = (_l = place === null || place === void 0 ? void 0 : place.alignContent) !== null && _l !== void 0 ? _l : To.Default;
-                    if (alignContent !== ((_m = ex === null || ex === void 0 ? void 0 : ex.alignContent) !== null && _m !== void 0 ? _m : To.Default)) {
-                        if ((alignContent & To.Default) === 0) {
-                            const v = AlignToCss[(alignContent >> 2) & 0b11];
-                            const h = AlignToCss[alignContent & 0b11];
-                            const t = TextAlignCss[alignContent & 0b11];
-                            css.justifyContent = v;
-                            css.alignContent = h;
-                            css.textAlign = t;
-                        }
-                        else
-                            css.justifyContent = css.alignContent = css.textAlign = "";
-                    }
-                    const heightGrowth = (_o = place === null || place === void 0 ? void 0 : place.heightGrowth) !== null && _o !== void 0 ? _o : 0;
-                    const alignFrame = (_p = place === null || place === void 0 ? void 0 : place.alignFrame) !== null && _p !== void 0 ? _p : To.Default;
-                    if (alignFrame !== ((_q = ex === null || ex === void 0 ? void 0 : ex.alignFrame) !== null && _q !== void 0 ? _q : To.Default) ||
-                        heightGrowth !== ((_r = ex === null || ex === void 0 ? void 0 : ex.heightGrowth) !== null && _r !== void 0 ? _r : 0)) {
-                        if ((alignFrame & To.Default) === 0) {
-                            const v = AlignToCss[(alignFrame >> 2) & 0b11];
-                            const h = AlignToCss[alignFrame & 0b11];
-                            css.alignSelf = v;
-                            css.justifySelf = h;
-                        }
-                        else if (heightGrowth > 0) {
-                            css.alignSelf = AlignToCss[To.Fit];
-                        }
-                        else
-                            css.alignSelf = css.justifySelf = "";
-                    }
-                    const flowWrap = (_s = place === null || place === void 0 ? void 0 : place.flowWrap) !== null && _s !== void 0 ? _s : false;
-                    if (flowWrap !== ((_t = ex === null || ex === void 0 ? void 0 : ex.flowWrap) !== null && _t !== void 0 ? _t : false)) {
-                        if (flowWrap)
-                            native.setAttribute("wrapping", "true");
-                        else
-                            native.removeAttribute("wrapping");
-                    }
-                }
-            }
-            else {
-                if (heightGrowth > 0)
-                    block.native.style.flexGrow = `${heightGrowth}`;
-                else
-                    block.native.style.flexGrow = "";
-            }
+    applyCellRange(block, cellRange) {
+        const css = block.native.style;
+        if (cellRange) {
+            const x1 = cellRange.x1 || 1;
+            const y1 = cellRange.y1 || 1;
+            const x2 = cellRange.x2 || x1;
+            const y2 = cellRange.y2 || y1;
+            css.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
         }
-        super.arrange(block, place, heightGrowth);
+        else
+            css.gridArea = "";
+        super.applyCellRange(block, cellRange);
+    }
+    applyWidthGrowth(block, widthGrowth) {
+        const css = block.native.style;
+        if (widthGrowth > 0) {
+            css.flexGrow = `${widthGrowth}`;
+            css.flexBasis = "0";
+        }
+        else {
+            css.flexGrow = "";
+            css.flexBasis = "";
+        }
+    }
+    applyWidthMin(block, widthMin) {
+        block.native.style.minWidth = `${widthMin}`;
+    }
+    applyWidthMax(block, widthMax) {
+        block.native.style.maxWidth = `${widthMax}`;
+    }
+    applyHeightGrowth(block, heightGrowth) {
+        if (block.driver.isRow) {
+            const css = block.native.style;
+            if (heightGrowth > 0)
+                css.flexGrow = `${heightGrowth}`;
+            else
+                css.flexGrow = "";
+        }
+        else if (block.host.driver.isRow) {
+            block.driver.applyAlignFrame(block, Align.Stretch);
+            block.host.driver.applyHeightGrowth(block.host, heightGrowth);
+        }
+    }
+    applyHeightMin(block, heightMin) {
+        block.native.style.minHeight = `${heightMin}`;
+    }
+    applyHeightMax(block, heightMax) {
+        block.native.style.maxHeight = `${heightMax}`;
+    }
+    applyAlignContent(block, alignContent) {
+        const css = block.native.style;
+        if ((alignContent & Align.Default) === 0) {
+            const v = AlignToCss[(alignContent >> 2) & 0b11];
+            const h = AlignToCss[alignContent & 0b11];
+            const t = TextAlignCss[alignContent & 0b11];
+            css.justifyContent = v;
+            css.alignItems = h;
+            css.textAlign = t;
+        }
+        else
+            css.justifyContent = css.alignContent = css.textAlign = "";
+    }
+    applyAlignFrame(block, alignFrame) {
+        const css = block.native.style;
+        if ((alignFrame & Align.Default) === 0) {
+            const v = AlignToCss[(alignFrame >> 2) & 0b11];
+            const h = AlignToCss[alignFrame & 0b11];
+            css.alignSelf = v;
+            css.justifySelf = h;
+        }
+        else
+            css.alignSelf = css.justifySelf = "";
+    }
+    applyWrapping(block, wrapping) {
+        if (wrapping)
+            block.native.setAttribute("wrapping", "true");
+        else
+            block.native.removeAttribute("wrapping");
+    }
+    applyDangling(block, dangling) {
+        if (dangling)
+            block.native.setAttribute("dangling", "true");
+        else
+            block.native.removeAttribute("dangling");
     }
     render(block) {
-        if (!block.driver.isPart)
-            VBlock.claim("", EMPTY_RENDER, VerstakTags.part);
+        if (block.driver.layout < LayoutKind.Row)
+            VBlock.claim("", VerstakTags.row, EMPTY_RENDER);
         return super.render(block);
     }
 }
 const VerstakTags = {
     block: new VerstakDriver("v-block", LayoutKind.Block),
     text: new VerstakDriver("v-text", LayoutKind.Text),
-    grid: new VerstakDriver("v-grid", LayoutKind.Grid, () => new GridBasedAllocator()),
-    part: new VerstakDriver("v-part", LayoutKind.Part),
+    grid: new VerstakDriver("v-grid", LayoutKind.Grid, () => new GridCursor()),
+    row: new VerstakDriver("v-row", LayoutKind.Row),
     group: new VerstakDriver("v-group", LayoutKind.Group),
 };
 const EMPTY_RENDER = { render() { } };