verstak 0.22.512 → 0.22.515

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

@@ -12,6 +12,7 @@ export declare const enum Priority {
 export declare type Type<T> = new (...args: any[]) => T;
 export declare type BlockBody<T = unknown, M = unknown, R = void> = Render<T, M, R> | BlockVmt<T, M, R>;
 export interface BlockVmt<T = unknown, M = unknown, R = void> {
+    key?: string;
     reacting?: boolean;
     triggers?: unknown;
     initialize?: Render<T, M, R>;
@@ -19,7 +20,7 @@ export interface BlockVmt<T = unknown, M = unknown, R = void> {
     render?: Render<T, M, R>;
     finalize?: Render<T, M, R>;
 }
-export declare function asComponent<T, M, R>(outer: BlockBody<T, M, R> | undefined, base: BlockBody<T, M, R>): BlockVmt<T, M, R>;
+export declare function asBaseFor<T, M, R>(outer: BlockBody<T, M, R> | undefined, base: BlockBody<T, M, R>): BlockVmt<T, M, R>;
 export declare function setContext<T extends Object>(type: Type<T>, context: T): void;
 export declare function use<T extends Object>(type: Type<T>): T;
 export declare abstract class VBlock<T = unknown, M = unknown, R = void> {
@@ -27,22 +28,22 @@ export declare abstract class VBlock<T = unknown, M = unknown, R = void> {
     static readonly longFrameDuration = 300;
     static currentRenderingPriority: Priority;
     static frameDuration: number;
-    abstract readonly name: string;
+    abstract readonly key: string;
     abstract readonly driver: AbstractDriver<T>;
     abstract readonly body: Readonly<BlockVmt<T, M, R>>;
     abstract model: M;
     abstract cells: Cells;
     abstract widthGrowth: number;
-    abstract widthMin: string;
-    abstract widthMax: string;
+    abstract minWidth: string;
+    abstract maxWidth: string;
     abstract heightGrowth: number;
-    abstract heightMin: string;
-    abstract heightMax: string;
-    abstract alignContent: Align;
-    abstract alignFrame: Align;
-    abstract wrapContent: boolean;
-    abstract dangling: boolean;
-    abstract shuffleChildren: boolean;
+    abstract minHeight: string;
+    abstract maxHeight: string;
+    abstract contentAlignment: Align;
+    abstract frameAlignment: Align;
+    abstract contentWrapping: boolean;
+    abstract floating: boolean;
+    abstract childrenShuffling: boolean;
     abstract renderingPriority?: Priority;
     abstract readonly level: number;
     abstract readonly host: VBlock;
@@ -56,7 +57,7 @@ export declare abstract class VBlock<T = unknown, M = unknown, R = void> {
     static get current(): VBlock;
     static renderNestedTreesThenDo(action: (error: unknown) => void): void;
     static runForAllBlocks<T>(action: (e: T) => void): void;
-    static claim<T = undefined, M = unknown, R = void>(name: string, driver: AbstractDriver<T> | undefined, body: BlockBody<T, M, R>): VBlock<T, M, R>;
+    static claim<T = undefined, M = unknown, R = void>(driver: AbstractDriver<T> | undefined, body: BlockBody<T, M, R>): VBlock<T, M, R>;
     static getDefaultLoggingOptions(): LoggingOptions | undefined;
     static setDefaultLoggingOptions(logging?: LoggingOptions): void;
 }
@@ -83,15 +84,15 @@ export declare class AbstractDriver<T> {
     deploy(block: VBlock<T>, sequential: boolean): void;
     applyCellRange(block: VBlock<T, any, any>, cellRange: CellRange | undefined): void;
     applyWidthGrowth(block: VBlock<T, any, any>, widthGrowth: number): void;
-    applyWidthMin(block: VBlock<T, any, any>, widthMin: string): void;
-    applyWidthMax(block: VBlock<T, any, any>, widthMax: string): void;
+    applyMinWidth(block: VBlock<T, any, any>, minWidth: string): void;
+    applyMaxWidth(block: VBlock<T, any, any>, maxWidth: string): void;
     applyHeightGrowth(block: VBlock<T, any, any>, heightGrowth: number): void;
-    applyHeightMin(block: VBlock<T, any, any>, heightMin: string): void;
-    applyHeightMax(block: VBlock<T, any, any>, heightMax: string): void;
-    applyAlignContent(block: VBlock<T, any, any>, alignContent: Align): void;
-    applyAlignFrame(block: VBlock<T, any, any>, alignFrame: Align): void;
-    applyWrapContent(block: VBlock<T, any, any>, wrapContent: boolean): void;
-    applyDangling(block: VBlock<T, any, any>, dangling: boolean): void;
+    applyMinHeight(block: VBlock<T, any, any>, minHeight: string): void;
+    applyMaxHeight(block: VBlock<T, any, any>, maxHeight: string): void;
+    applyContentAlignment(block: VBlock<T, any, any>, contentAlignment: Align): void;
+    applyFrameAlignment(block: VBlock<T, any, any>, frameAlignment: Align): void;
+    applyContentWrapping(block: VBlock<T, any, any>, contentWrapping: boolean): void;
+    applyFloating(block: VBlock<T, any, any>, floating: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }
 export declare class StaticDriver<T> extends AbstractDriver<T> {

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

@@ -25,7 +25,7 @@ export var Priority;
     Priority[Priority["AsyncP1"] = 1] = "AsyncP1";
     Priority[Priority["AsyncP2"] = 2] = "AsyncP2";
 })(Priority || (Priority = {}));
-export function asComponent(outer, base) {
+export function asBaseFor(outer, base) {
     if (outer instanceof Function)
         outer = { render: outer };
     if (base instanceof Function)
@@ -60,22 +60,22 @@ export class VBlock {
     static runForAllBlocks(action) {
         forEachChildRecursively(gSysRoot, action);
     }
-    static claim(name, driver, body) {
+    static claim(driver, body) {
         var _a, _b;
-        if (body instanceof Function)
-            body = { render: body };
         let result;
         const owner = gCurrent.instance;
         const children = owner.children;
         let ex = undefined;
         driver !== null && driver !== void 0 ? driver : (driver = AbstractDriver.group);
-        name || (name = `${++owner.numerator}`);
+        if (body instanceof Function)
+            body = { render: body };
+        let key = body.key;
         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;
         }
-        ex !== null && ex !== void 0 ? ex : (ex = children.claim(name, undefined, "nested blocks can be declared inside render function only"));
+        ex !== null && ex !== void 0 ? ex : (ex = children.claim(key = key || `${++owner.numerator}!`, undefined, "nested blocks can be declared inside render function only"));
         if (ex) {
             result = ex.instance;
             if (result.driver !== driver && driver !== undefined)
@@ -86,7 +86,7 @@ export class VBlock {
             result.body = body;
         }
         else {
-            result = new VBlockImpl(name, driver, owner, body);
+            result = new VBlockImpl(key || `${++owner.numerator}!`, driver, owner, body);
             result.item = children.add(result);
             VBlockImpl.grandCount++;
             if (body.reacting)
@@ -144,23 +144,23 @@ export class AbstractDriver {
     }
     applyWidthGrowth(block, widthGrowth) {
     }
-    applyWidthMin(block, widthMin) {
+    applyMinWidth(block, minWidth) {
     }
-    applyWidthMax(block, widthMax) {
+    applyMaxWidth(block, maxWidth) {
     }
     applyHeightGrowth(block, heightGrowth) {
     }
-    applyHeightMin(block, heightMin) {
+    applyMinHeight(block, minHeight) {
     }
-    applyHeightMax(block, heightMax) {
+    applyMaxHeight(block, maxHeight) {
     }
-    applyAlignContent(block, alignContent) {
+    applyContentAlignment(block, contentAlignment) {
     }
-    applyAlignFrame(block, alignFrame) {
+    applyFrameAlignment(block, frameAlignment) {
     }
-    applyWrapContent(block, wrapContent) {
+    applyContentWrapping(block, contentWrapping) {
     }
-    applyDangling(block, dangling) {
+    applyFloating(block, floating) {
     }
     render(block) {
         var _a;
@@ -188,8 +188,8 @@ export class StaticDriver extends AbstractDriver {
         super.initialize(block, this.element);
     }
 }
-function getBlockName(block) {
-    return block.stamp >= 0 ? block.name : undefined;
+function getBlockKey(block) {
+    return block.stamp >= 0 ? block.key : undefined;
 }
 class VBlockContext extends ObservableObject {
     constructor(type, instance) {
@@ -203,29 +203,29 @@ __decorate([
     __metadata("design:type", Object)
 ], VBlockContext.prototype, "type", void 0);
 class VBlockImpl extends VBlock {
-    constructor(name, driver, owner, body) {
+    constructor(key, driver, owner, body) {
         super();
-        this.name = name;
+        this.key = key;
         this.driver = driver;
         this.body = body;
         this.model = undefined;
         this.assignedCells = undefined;
         this.appliedCellRange = Cursor.UndefinedCellRange;
         this.appliedWidthGrowth = 0;
-        this.appliedWidthMin = "";
-        this.appliedWidthMax = "";
+        this.appliedMinWidth = "";
+        this.appliedMaxWidth = "";
         this.appliedHeightGrowth = 0;
-        this.appliedHeightMin = "";
-        this.appliedHeightMax = "";
-        this.appliedAlignContent = Align.Default;
-        this.appliedAlignFrame = Align.Default;
-        this.appliedWrapContent = false;
-        this.appliedDangling = false;
-        this.shuffleChildren = false;
+        this.appliedMinHeight = "";
+        this.appliedMaxHeight = "";
+        this.appliedContentAlignment = Align.Default;
+        this.appliedFrameAlignment = Align.Default;
+        this.appliedContentWrapping = false;
+        this.appliedFloating = false;
+        this.childrenShuffling = false;
         this.renderingPriority = Priority.SyncP0;
         this.level = owner.level + 1;
         this.host = owner;
-        this.children = new Collection(driver.isSequential, getBlockName);
+        this.children = new Collection(driver.isSequential, getBlockKey);
         this.numerator = 0;
         this.item = undefined;
         this.stamp = 0;
@@ -255,18 +255,18 @@ class VBlockImpl extends VBlock {
             this.appliedWidthGrowth = value;
         }
     }
-    get widthMin() { return this.appliedWidthMin; }
-    set widthMin(value) {
-        if (value !== this.appliedWidthMin) {
-            this.driver.applyWidthMin(this, value);
-            this.appliedWidthMin = value;
+    get minWidth() { return this.appliedMinWidth; }
+    set minWidth(value) {
+        if (value !== this.appliedMinWidth) {
+            this.driver.applyMinWidth(this, value);
+            this.appliedMinWidth = value;
         }
     }
-    get widthMax() { return this.appliedWidthMax; }
-    set widthMax(value) {
-        if (value !== this.appliedWidthMax) {
-            this.driver.applyWidthMax(this, value);
-            this.appliedWidthMax = value;
+    get maxWidth() { return this.appliedMaxWidth; }
+    set maxWidth(value) {
+        if (value !== this.appliedMaxWidth) {
+            this.driver.applyMaxWidth(this, value);
+            this.appliedMaxWidth = value;
         }
     }
     get heightGrowth() { return this.appliedHeightGrowth; }
@@ -276,46 +276,46 @@ class VBlockImpl extends VBlock {
             this.appliedHeightGrowth = value;
         }
     }
-    get heightMin() { return this.appliedHeightMin; }
-    set heightMin(value) {
-        if (value !== this.appliedWidthMin) {
-            this.driver.applyWidthMin(this, value);
-            this.appliedWidthMin = value;
+    get minHeight() { return this.appliedMinHeight; }
+    set minHeight(value) {
+        if (value !== this.appliedMinWidth) {
+            this.driver.applyMinWidth(this, value);
+            this.appliedMinWidth = value;
         }
     }
-    get heightMax() { return this.appliedHeightMax; }
-    set heightMax(value) {
-        if (value !== this.appliedWidthMax) {
-            this.driver.applyWidthMax(this, value);
-            this.appliedWidthMax = value;
+    get maxHeight() { return this.appliedMaxHeight; }
+    set maxHeight(value) {
+        if (value !== this.appliedMaxWidth) {
+            this.driver.applyMaxWidth(this, value);
+            this.appliedMaxWidth = value;
         }
     }
-    get alignContent() { return this.appliedAlignContent; }
-    set alignContent(value) {
-        if (value !== this.appliedAlignContent) {
-            this.driver.applyAlignContent(this, value);
-            this.appliedAlignContent = value;
+    get contentAlignment() { return this.appliedContentAlignment; }
+    set contentAlignment(value) {
+        if (value !== this.appliedContentAlignment) {
+            this.driver.applyContentAlignment(this, value);
+            this.appliedContentAlignment = value;
         }
     }
-    get alignFrame() { return this.appliedAlignFrame; }
-    set alignFrame(value) {
-        if (value !== this.appliedAlignFrame) {
-            this.driver.applyAlignFrame(this, value);
-            this.appliedAlignFrame = value;
+    get frameAlignment() { return this.appliedFrameAlignment; }
+    set frameAlignment(value) {
+        if (value !== this.appliedFrameAlignment) {
+            this.driver.applyFrameAlignment(this, value);
+            this.appliedFrameAlignment = value;
         }
     }
-    get wrapContent() { return this.appliedWrapContent; }
-    set wrapContent(value) {
-        if (value !== this.appliedWrapContent) {
-            this.driver.applyWrapContent(this, value);
-            this.appliedWrapContent = value;
+    get contentWrapping() { return this.appliedContentWrapping; }
+    set contentWrapping(value) {
+        if (value !== this.appliedContentWrapping) {
+            this.driver.applyContentWrapping(this, value);
+            this.appliedContentWrapping = value;
         }
     }
-    get dangling() { return this.appliedDangling; }
-    set dangling(value) {
-        if (value !== this.appliedDangling) {
-            this.driver.applyDangling(this, value);
-            this.appliedDangling = value;
+    get floating() { return this.appliedFloating; }
+    set floating(value) {
+        if (value !== this.appliedFloating) {
+            this.driver.applyFloating(this, value);
+            this.appliedFloating = value;
         }
     }
     configureReactronic(options) {
@@ -380,8 +380,12 @@ function runRenderNestedTreesThenDo(error, action) {
         let promised = undefined;
         try {
             children.endMerge(error);
-            for (const item of children.removedItems(true))
+            for (const item of children.removedItems(true)) {
+                const b = item.instance;
+                if (b.key !== b.body.key)
+                    console.warn(`every conditionally rendered block requires explicit key: ${b.key}, ${b.driver.name}`);
                 runFinalize(item, true);
+            }
             if (!error) {
                 const ownerIsBlock = owner.driver.isBlock;
                 const sequential = children.strict;
@@ -449,7 +453,7 @@ function renderIncrementally(owner, stamp, allChildren, items, priority) {
             VBlock.currentRenderingPriority = priority;
             try {
                 const sequential = block.children.strict;
-                if (block.shuffleChildren)
+                if (block.childrenShuffling)
                     shuffle(items);
                 const frameDurationLimit = priority === Priority.AsyncP2 ? VBlock.shortFrameDuration : Infinity;
                 let frameDuration = Math.min(frameDurationLimit, Math.max(VBlock.frameDuration / 4, VBlock.shortFrameDuration));
@@ -493,7 +497,7 @@ function prepareRender(item, redeploy, sequential) {
             if ((_a = block.body) === null || _a === void 0 ? void 0 : _a.reacting) {
                 Transaction.outside(() => {
                     if (Rx.isLogging)
-                        Rx.setLoggingHint(block, block.name);
+                        Rx.setLoggingHint(block, block.key);
                     Rx.getController(block.rerender).configure({
                         order: block.level,
                     });
@@ -530,7 +534,7 @@ function runRender(item) {
             }
             catch (e) {
                 runRenderNestedTreesThenDo(e, NOP);
-                console.log(`Rendering failed: ${block.name}`);
+                console.log(`Rendering failed: ${block.key}`);
                 console.log(`${e}`);
             }
         });
@@ -550,7 +554,7 @@ function runFinalize(item, isLeader) {
             else
                 gFirstToDispose = gLastToDispose = item;
             if (gFirstToDispose === item)
-                Transaction.run({ separation: "disposal", hint: `runDisposalLoop(initiator=${item.instance.name})` }, () => {
+                Transaction.run({ separation: "disposal", hint: `runDisposalLoop(initiator=${item.instance.key})` }, () => {
                     void runDisposalLoop().then(NOP, error => console.log(error));
                 });
         }
@@ -648,7 +652,7 @@ function defaultReject(error) {
 Promise.prototype.then = reactronicDomHookedThen;
 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 }));
+const gSysRoot = Collection.createItem(new VBlockImpl(gSysDriver.name, gSysDriver, { level: 0 }, { reacting: true, render: NOP }));
 gSysRoot.instance.item = gSysRoot;
 Object.defineProperty(gSysRoot.instance, "host", {
     value: gSysRoot.instance,

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

@@ -1,23 +1,23 @@
 import { VBlock, BlockBody, Align, CellRange } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export declare function Block<M = unknown, R = void>(name: string, args: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function PlainText(content: string, name?: string, args?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
-export declare function HtmlText(content: string, name?: string, args?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
-export declare function Grid<M = unknown, R = void>(name: string, body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function Line<T = void>(claim: (x: void) => T): VBlock<HTMLElement>;
-export declare function lineFeed(body?: BlockBody<HTMLElement, void, void>, noCoalescing?: boolean): VBlock<HTMLElement>;
-export declare function Group<M = unknown, R = void>(name: string, body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function Block<M = unknown, R = void>(body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function PlainText(content: string, body?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
+export declare function HtmlText(content: string, body?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
+export declare function Grid<M = unknown, R = void>(body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function Line<T = void>(body: (block: void) => T): void;
+export declare function lineFeed(noCoalescing?: boolean, key?: string): VBlock<HTMLElement>;
+export declare function Group<M = unknown, R = void>(body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
 export declare class VerstakDriver<T extends HTMLElement> extends HtmlDriver<T> {
     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;
+    applyMinWidth(block: VBlock<T>, minWidth: string): void;
+    applyMaxWidth(block: VBlock<T>, maxWidth: 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;
-    applyWrapContent(block: VBlock<T>, wrapContent: boolean): void;
-    applyDangling(block: VBlock<T>, dangling: boolean): void;
+    applyMinHeight(block: VBlock<T>, minHeight: string): void;
+    applyMaxHeight(block: VBlock<T>, maxHeight: string): void;
+    applyContentAlignment(block: VBlock<T>, contentAlign: Align): void;
+    applyFrameAlignment(block: VBlock<T>, frameAlign: Align): void;
+    applyContentWrapping(block: VBlock<T>, contentWrapping: boolean): void;
+    applyFloating(block: VBlock<T>, floating: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }

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

@@ -1,36 +1,35 @@
-import { VBlock, LayoutKind, Align, GridCursor, asComponent } from "../core/api";
+import { VBlock, LayoutKind, Align, GridCursor, asBaseFor } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export function Block(name, args) {
-    return VBlock.claim(name, VerstakTags.block, args);
+export function Block(body) {
+    return VBlock.claim(VerstakTags.block, body);
 }
-export function PlainText(content, name, args) {
-    return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text, asComponent(args, {
+export function PlainText(content, body) {
+    return VBlock.claim(VerstakTags.text, asBaseFor(body, {
         render(b) {
             b.native.innerText = content;
         },
     }));
 }
-export function HtmlText(content, name, args) {
-    return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text, asComponent(args, {
+export function HtmlText(content, body) {
+    return VBlock.claim(VerstakTags.text, asBaseFor(body, {
         render(b) {
             b.native.innerHTML = content;
         },
     }));
 }
-export function Grid(name, body) {
-    return VBlock.claim(name, VerstakTags.grid, body);
+export function Grid(body) {
+    return VBlock.claim(VerstakTags.grid, body);
 }
-export function Line(claim) {
-    const result = VBlock.claim("", VerstakTags.row, EMPTY_BLOCK_BODY);
-    claim();
-    VBlock.claim("", VerstakTags.row, EMPTY_BLOCK_BODY);
-    return result;
+export function Line(body) {
+    lineFeed();
+    body();
+    lineFeed();
 }
-export function lineFeed(body, noCoalescing) {
-    return VBlock.claim("", VerstakTags.row, body !== null && body !== void 0 ? body : EMPTY_BLOCK_BODY);
+export function lineFeed(noCoalescing, key) {
+    return VBlock.claim(VerstakTags.row, { key });
 }
-export function Group(name, body) {
-    return VBlock.claim(name, VerstakTags.group, body);
+export function Group(body) {
+    return VBlock.claim(VerstakTags.group, body);
 }
 export class VerstakDriver extends HtmlDriver {
     applyCellRange(block, cellRange) {
@@ -57,11 +56,11 @@ export class VerstakDriver extends HtmlDriver {
             css.flexBasis = "";
         }
     }
-    applyWidthMin(block, widthMin) {
-        block.native.style.minWidth = `${widthMin}`;
+    applyMinWidth(block, minWidth) {
+        block.native.style.minWidth = `${minWidth}`;
     }
-    applyWidthMax(block, widthMax) {
-        block.native.style.maxWidth = `${widthMax}`;
+    applyMaxWidth(block, maxWidth) {
+        block.native.style.maxWidth = `${maxWidth}`;
     }
     applyHeightGrowth(block, heightGrowth) {
         if (block.driver.isRow) {
@@ -72,22 +71,22 @@ export class VerstakDriver extends HtmlDriver {
                 css.flexGrow = "";
         }
         else if (block.host.driver.isRow) {
-            block.driver.applyAlignFrame(block, Align.Stretch);
+            block.driver.applyFrameAlignment(block, Align.Stretch);
             block.host.driver.applyHeightGrowth(block.host, heightGrowth);
         }
     }
-    applyHeightMin(block, heightMin) {
-        block.native.style.minHeight = `${heightMin}`;
+    applyMinHeight(block, minHeight) {
+        block.native.style.minHeight = `${minHeight}`;
     }
-    applyHeightMax(block, heightMax) {
-        block.native.style.maxHeight = `${heightMax}`;
+    applyMaxHeight(block, maxHeight) {
+        block.native.style.maxHeight = `${maxHeight}`;
     }
-    applyAlignContent(block, alignContent) {
+    applyContentAlignment(block, contentAlign) {
         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];
+        if ((contentAlign & Align.Default) === 0) {
+            const v = AlignToCss[(contentAlign >> 2) & 0b11];
+            const h = AlignToCss[contentAlign & 0b11];
+            const t = TextAlignCss[contentAlign & 0b11];
             css.justifyContent = v;
             css.alignItems = h;
             css.textAlign = t;
@@ -95,32 +94,32 @@ export class VerstakDriver extends HtmlDriver {
         else
             css.justifyContent = css.alignContent = css.textAlign = "";
     }
-    applyAlignFrame(block, alignFrame) {
+    applyFrameAlignment(block, frameAlign) {
         const css = block.native.style;
-        if ((alignFrame & Align.Default) === 0) {
-            const v = AlignToCss[(alignFrame >> 2) & 0b11];
-            const h = AlignToCss[alignFrame & 0b11];
+        if ((frameAlign & Align.Default) === 0) {
+            const v = AlignToCss[(frameAlign >> 2) & 0b11];
+            const h = AlignToCss[frameAlign & 0b11];
             css.alignSelf = v;
             css.justifySelf = h;
         }
         else
             css.alignSelf = css.justifySelf = "";
     }
-    applyWrapContent(block, wrapContent) {
-        if (wrapContent)
+    applyContentWrapping(block, contentWrapping) {
+        if (contentWrapping)
             block.native.setAttribute("wrapping", "true");
         else
             block.native.removeAttribute("wrapping");
     }
-    applyDangling(block, dangling) {
-        if (dangling)
-            block.native.setAttribute("dangling", "true");
+    applyFloating(block, floating) {
+        if (floating)
+            block.native.setAttribute("floating", "true");
         else
-            block.native.removeAttribute("dangling");
+            block.native.removeAttribute("floating");
     }
     render(block) {
         if (block.driver.layout < LayoutKind.Row)
-            VBlock.claim("", VerstakTags.row, EMPTY_BLOCK_BODY);
+            VBlock.claim(VerstakTags.row, {});
         return super.render(block);
     }
 }
@@ -131,6 +130,5 @@ const VerstakTags = {
     row: new VerstakDriver("v-row", LayoutKind.Row),
     group: new VerstakDriver("v-group", LayoutKind.Group),
 };
-const EMPTY_BLOCK_BODY = { render() { } };
 const AlignToCss = ["stretch", "start", "center", "end"];
 const TextAlignCss = ["justify", "left", "center", "right"];