verstak 0.22.516 → 0.23.101

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

@@ -22,35 +22,17 @@ import { emitLetters, 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["Realtime"] = 0] = "Realtime";
+    Priority[Priority["Normal"] = 1] = "Normal";
+    Priority[Priority["Background"] = 2] = "Background";
 })(Priority || (Priority = {}));
-export function asBaseFor(outer, base) {
-    if (outer instanceof Function)
-        outer = { render: outer };
-    if (base instanceof Function)
-        base = { render: 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 ? b => outer(b, () => inherited(b)) : inherited;
-}
-export function nestedContext(type, context) {
-    return VBlockImpl.setContext(type, context);
-}
-export function useContext(type) {
-    return VBlockImpl.use(type);
-}
 export class VBlock {
     get isInitialRendering() {
         return this.stamp === 2;
     }
     static root(render) {
         gSysRoot.instance.body.render = render;
-        prepareAndRunRender(gSysRoot, false, false);
+        triggerRendering(gSysRoot);
     }
     static get current() {
         return gCurrent.instance;
@@ -61,15 +43,17 @@ export class VBlock {
     static runForAllBlocks(action) {
         forEachChildRecursively(gSysRoot, action);
     }
-    static claim(driver, body) {
-        var _a, _b;
+    static claim(driver, body, base) {
+        var _a;
         let result;
         const owner = gCurrent.instance;
         const children = owner.children;
         let ex = undefined;
+        if (body)
+            body.base = base;
+        else
+            body = base !== null && base !== void 0 ? base : {};
         driver !== null && driver !== void 0 ? driver : (driver = AbstractDriver.group);
-        if (body instanceof Function)
-            body = { render: body };
         let key = body.key;
         if (driver.isLine) {
             const last = children.lastClaimedItem();
@@ -81,7 +65,7 @@ export class VBlock {
             result = ex.instance;
             if (result.driver !== driver && driver !== undefined)
                 throw new Error(`changing block driver is not yet supported: "${result.driver.name}" -> "${driver === null || driver === void 0 ? void 0 : driver.name}"`);
-            const exTriggers = (_b = result.body) === null || _b === void 0 ? void 0 : _b.triggers;
+            const exTriggers = result.body.triggers;
             if (triggersAreEqual(body.triggers, exTriggers))
                 body.triggers = exTriggers;
             result.body = body;
@@ -90,7 +74,7 @@ export class VBlock {
             result = new VBlockImpl(key || VBlock.generateKey(owner), driver, owner, body);
             result.item = children.add(result);
             VBlockImpl.grandCount++;
-            if (body.reacting)
+            if (isReaction(body))
                 VBlockImpl.disposableCount++;
         }
         return result;
@@ -100,9 +84,9 @@ export class VBlock {
         const lettered = emitLetters(n);
         let result;
         if (Rx.isLogging)
-            result = `[${getCallerInfo(lettered)}]`;
+            result = `·${getCallerInfo(lettered)}`;
         else
-            result = `[${lettered}]`;
+            result = `·${lettered}`;
         return result;
     }
     static getDefaultLoggingOptions() {
@@ -114,43 +98,44 @@ export class VBlock {
 }
 VBlock.shortFrameDuration = 16;
 VBlock.longFrameDuration = 300;
-VBlock.currentRenderingPriority = Priority.SyncP0;
+VBlock.currentRenderingPriority = Priority.Realtime;
 VBlock.frameDuration = VBlock.longFrameDuration;
 export var LayoutKind;
 (function (LayoutKind) {
     LayoutKind[LayoutKind["Block"] = 0] = "Block";
     LayoutKind[LayoutKind["Grid"] = 1] = "Grid";
     LayoutKind[LayoutKind["Line"] = 2] = "Line";
-    LayoutKind[LayoutKind["Group"] = 3] = "Group";
+    LayoutKind[LayoutKind["Fragment"] = 3] = "Fragment";
     LayoutKind[LayoutKind["Text"] = 4] = "Text";
 })(LayoutKind || (LayoutKind = {}));
 const createDefaultCursor = () => new Cursor();
 export class AbstractDriver {
-    constructor(name, layout, createCursor) {
-        this.name = name;
-        this.layout = layout;
-        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 isLine() { return this.layout === LayoutKind.Line; }
+    constructor(name, layout, createCursor) {
+        this.name = name;
+        this.layout = layout;
+        this.createCursor = createCursor !== null && createCursor !== void 0 ? createCursor : createDefaultCursor;
+    }
     initialize(block, native) {
-        var _a, _b;
         const b = block;
         b.native = native;
-        (_b = (_a = block.body).initialize) === null || _b === void 0 ? void 0 : _b.call(_a, block, NOP);
+        invokeInitializeChain(b, b.body);
+    }
+    deploy(block) {
+    }
+    render(block) {
+        invokeRenderChain(block, block.body);
     }
     finalize(block, isLeader) {
-        var _a, _b;
         const b = block;
-        (_b = (_a = block.body).finalize) === null || _b === void 0 ? void 0 : _b.call(_a, block, NOP);
+        invokeFinalizeChain(b, b.body);
         b.native = null;
         return isLeader;
     }
-    deploy(block, sequential) {
-    }
     applyCellRange(block, cellRange) {
     }
     applyWidthGrowth(block, widthGrowth) {
@@ -171,24 +156,39 @@ export class AbstractDriver {
     }
     applyContentWrapping(block, contentWrapping) {
     }
-    applyFloating(block, floating) {
+    applyOverlayVisible(block, overlayVisible) {
     }
-    render(block) {
-        var _a;
-        let result;
-        const override = (_a = block.body) === null || _a === void 0 ? void 0 : _a.override;
-        if (override)
-            result = override(block, NOP);
-        else
-            result = invokeRenderFunction(block);
-        return result;
+    applyStyling(block, secondary, styleName, enabled) {
     }
 }
-AbstractDriver.group = new AbstractDriver("group", LayoutKind.Group);
-function invokeRenderFunction(block) {
+AbstractDriver.group = new AbstractDriver("group", LayoutKind.Fragment);
+function isReaction(body) {
     var _a;
-    const r = (_a = block.body.render) !== null && _a !== void 0 ? _a : NOP;
-    return r(block, NOP);
+    return (_a = body === null || body === void 0 ? void 0 : body.reaction) !== null && _a !== void 0 ? _a : ((body === null || body === void 0 ? void 0 : body.base) ? isReaction(body === null || body === void 0 ? void 0 : body.base) : false);
+}
+function invokeInitializeChain(block, body) {
+    const initialize = body.initialize;
+    const base = body.base;
+    if (initialize)
+        initialize(block, base ? () => invokeInitializeChain(block, base) : NOP);
+    else if (base)
+        invokeInitializeChain(block, base);
+}
+function invokeRenderChain(block, body) {
+    const render = body.render;
+    const base = body.base;
+    if (render)
+        render(block, base ? () => invokeRenderChain(block, base) : NOP);
+    else if (base)
+        invokeRenderChain(block, base);
+}
+function invokeFinalizeChain(block, body) {
+    const finalize = body.finalize;
+    const base = body.base;
+    if (finalize)
+        finalize(block, base ? () => invokeFinalizeChain(block, base) : NOP);
+    else if (base)
+        invokeFinalizeChain(block, base);
 }
 export class StaticDriver extends AbstractDriver {
     constructor(element, name, layout, createCursor) {
@@ -199,20 +199,39 @@ export class StaticDriver extends AbstractDriver {
         super.initialize(block, this.element);
     }
 }
+export class ContextVariable {
+    constructor(defaultValue) {
+        this.defaultValue = defaultValue;
+    }
+    set value(value) {
+        VBlockImpl.setContextVariableValue(this, value);
+    }
+    get value() {
+        return VBlockImpl.useContextVariableValue(this);
+    }
+    get valueOrUndefined() {
+        return VBlockImpl.tryUseContextVariable(this);
+    }
+}
 function getBlockKey(block) {
     return block.stamp >= 0 ? block.key : undefined;
 }
 class VBlockContext extends ObservableObject {
-    constructor(type, instance) {
+    constructor(variable, value) {
         super();
-        this.type = type;
-        this.instance = instance;
+        this.next = undefined;
+        this.variable = variable;
+        this.value = value;
     }
 }
 __decorate([
     raw,
     __metadata("design:type", Object)
-], VBlockContext.prototype, "type", void 0);
+], VBlockContext.prototype, "next", void 0);
+__decorate([
+    raw,
+    __metadata("design:type", ContextVariable)
+], VBlockContext.prototype, "variable", void 0);
 class VBlockImpl extends VBlock {
     constructor(key, driver, owner, body) {
         super();
@@ -221,6 +240,7 @@ class VBlockImpl extends VBlock {
         this.body = body;
         this.model = undefined;
         this.assignedCells = undefined;
+        this.assignedStyle = false;
         this.appliedCellRange = Cursor.UndefinedCellRange;
         this.appliedWidthGrowth = 0;
         this.appliedMinWidth = "";
@@ -231,9 +251,9 @@ class VBlockImpl extends VBlock {
         this.appliedContentAlignment = Align.Default;
         this.appliedFrameAlignment = Align.Default;
         this.appliedContentWrapping = false;
-        this.appliedFloating = false;
+        this.appliedOverlayVisible = undefined;
         this.childrenShuffling = false;
-        this.renderingPriority = Priority.SyncP0;
+        this.renderingPriority = Priority.Realtime;
         this.level = owner.level + 1;
         this.host = owner;
         this.children = new Collection(driver.isSequential, getBlockKey);
@@ -242,11 +262,17 @@ class VBlockImpl extends VBlock {
         this.stamp = 0;
         this.native = undefined;
         this.cursor = driver.createCursor();
-        this.senior = owner.context ? owner : owner.senior;
+        this.outer = owner.context ? owner : owner.outer;
         this.context = undefined;
     }
-    rerender(_triggers) {
-        runRender(this.item);
+    get isMoved() {
+        let owner = this.host;
+        if (owner.driver.isLine)
+            owner = owner.host;
+        return owner.children.isMoved(this.item);
+    }
+    render(_triggers) {
+        renderNow(this.item);
     }
     get cells() { return this.assignedCells; }
     set cells(value) {
@@ -322,50 +348,59 @@ class VBlockImpl extends VBlock {
             this.appliedContentWrapping = value;
         }
     }
-    get floating() { return this.appliedFloating; }
-    set floating(value) {
-        if (value !== this.appliedFloating) {
-            this.driver.applyFloating(this, value);
-            this.appliedFloating = value;
+    get overlayVisible() { return this.appliedOverlayVisible; }
+    set overlayVisible(value) {
+        if (value !== this.appliedOverlayVisible) {
+            this.driver.applyOverlayVisible(this, value);
+            this.appliedOverlayVisible = value;
         }
     }
+    style(styleName, enabled) {
+        this.driver.applyStyling(this, this.assignedStyle, styleName, enabled);
+        this.assignedStyle = true;
+    }
     configureReactronic(options) {
-        if (this.stamp !== 1 || !this.body.reacting)
+        if (this.stamp !== 1 || !isReaction(this.body))
             throw new Error("reactronic can be configured only for reacting blocks and only inside initialize");
-        return Rx.getController(this.rerender).configure(options);
+        return Rx.getController(this.render).configure(options);
     }
-    static use(type) {
+    static tryUseContextVariable(variable) {
         var _a, _b;
         let b = gCurrent.instance;
-        while (((_a = b.context) === null || _a === void 0 ? void 0 : _a.type) !== type && b.host !== b)
-            b = b.senior;
-        if (b.host === b)
-            throw new Error(`${type.name} context doesn't exist`);
-        return (_b = b.context) === null || _b === void 0 ? void 0 : _b.instance;
+        while (((_a = b.context) === null || _a === void 0 ? void 0 : _a.variable) !== variable && b.host !== b)
+            b = b.outer;
+        return (_b = b.context) === null || _b === void 0 ? void 0 : _b.value;
+    }
+    static useContextVariableValue(variable) {
+        var _a;
+        const result = (_a = VBlockImpl.tryUseContextVariable(variable)) !== null && _a !== void 0 ? _a : variable.defaultValue;
+        if (!result)
+            throw new Error("context doesn't exist");
+        return result;
     }
-    static setContext(type, context) {
+    static setContextVariableValue(variable, value) {
         const block = gCurrent.instance;
         const host = block.host;
-        const hostCtx = nonreactive(() => { var _a; return (_a = host.context) === null || _a === void 0 ? void 0 : _a.instance; });
-        if (context && context !== hostCtx) {
+        const hostCtx = nonreactive(() => { var _a; return (_a = host.context) === null || _a === void 0 ? void 0 : _a.value; });
+        if (value && value !== hostCtx) {
             if (hostCtx)
-                block.senior = host;
+                block.outer = host;
             else
-                block.senior = host.senior;
+                block.outer = host.outer;
             Transaction.run({ separation: true }, () => {
                 const ctx = block.context;
                 if (ctx) {
-                    ctx.type = type;
-                    ctx.instance = context;
+                    ctx.variable = variable;
+                    ctx.value = value;
                 }
                 else
-                    block.context = new VBlockContext(type, context);
+                    block.context = new VBlockContext(variable, value);
             });
         }
         else if (hostCtx)
-            block.senior = host;
+            block.outer = host;
         else
-            block.senior = host.senior;
+            block.outer = host.outer;
     }
 }
 VBlockImpl.grandCount = 0;
@@ -381,7 +416,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], VBlockImpl.prototype, "rerender", null);
+], VBlockImpl.prototype, "render", null);
 function runRenderNestedTreesThenDo(error, action) {
     var _a;
     const current = gCurrent;
@@ -392,7 +427,7 @@ function runRenderNestedTreesThenDo(error, action) {
         try {
             children.endMerge(error);
             for (const item of children.removedItems(true)) {
-                runFinalize(item, true, true);
+                triggerFinalization(item, true, true);
             }
             if (!error) {
                 const ownerIsBlock = owner.driver.isBlock;
@@ -409,11 +444,11 @@ function runRenderNestedTreesThenDo(error, action) {
                     const block = item.instance;
                     const driver = block.driver;
                     const host = driver.isLine ? owner : partHost;
-                    const p = (_a = block.renderingPriority) !== null && _a !== void 0 ? _a : Priority.SyncP0;
+                    const p = (_a = block.renderingPriority) !== null && _a !== void 0 ? _a : Priority.Realtime;
                     redeploy = markToRedeployIfNecessary(redeploy, host, item, children, sequential);
-                    if (p === Priority.SyncP0)
-                        prepareAndRunRender(item, children.isMoved(item), sequential);
-                    else if (p === Priority.AsyncP1)
+                    if (p === Priority.Realtime)
+                        triggerRendering(item);
+                    else if (p === Priority.Normal)
                         p1 = push(item, p1);
                     else
                         p2 = push(item, p2);
@@ -447,9 +482,9 @@ function startIncrementalRendering(owner, allChildren, priority1, priority2) {
     return __awaiter(this, void 0, void 0, function* () {
         const stamp = owner.instance.stamp;
         if (priority1)
-            yield renderIncrementally(owner, stamp, allChildren, priority1, Priority.AsyncP1);
+            yield renderIncrementally(owner, stamp, allChildren, priority1, Priority.Normal);
         if (priority2)
-            yield renderIncrementally(owner, stamp, allChildren, priority2, Priority.AsyncP2);
+            yield renderIncrementally(owner, stamp, allChildren, priority2, Priority.Background);
     });
 }
 function renderIncrementally(owner, stamp, allChildren, items, priority) {
@@ -460,13 +495,12 @@ function renderIncrementally(owner, stamp, allChildren, items, priority) {
             let outerPriority = VBlock.currentRenderingPriority;
             VBlock.currentRenderingPriority = priority;
             try {
-                const sequential = block.children.strict;
                 if (block.childrenShuffling)
                     shuffle(items);
-                const frameDurationLimit = priority === Priority.AsyncP2 ? VBlock.shortFrameDuration : Infinity;
+                const frameDurationLimit = priority === Priority.Background ? VBlock.shortFrameDuration : Infinity;
                 let frameDuration = Math.min(frameDurationLimit, Math.max(VBlock.frameDuration / 4, VBlock.shortFrameDuration));
                 for (const child of items) {
-                    prepareAndRunRender(child, allChildren.isMoved(child), sequential);
+                    triggerRendering(child);
                     if (Transaction.isFrameOver(1, frameDuration)) {
                         VBlock.currentRenderingPriority = outerPriority;
                         yield Transaction.requestNextFrame(0);
@@ -484,51 +518,46 @@ function renderIncrementally(owner, stamp, allChildren, items, priority) {
         }
     });
 }
-function prepareAndRunRender(item, redeploy, sequential) {
-    var _a, _b;
+function triggerRendering(item) {
     const block = item.instance;
     if (block.stamp >= 0) {
-        prepareRender(item, redeploy, sequential);
-        if ((_a = block.body) === null || _a === void 0 ? void 0 : _a.reacting)
-            nonreactive(block.rerender, (_b = block.body) === null || _b === void 0 ? void 0 : _b.triggers);
-        else
-            runRender(item);
-    }
-}
-function prepareRender(item, redeploy, sequential) {
-    const block = item.instance;
-    const driver = block.driver;
-    if (block.stamp === 0) {
-        block.stamp = 1;
-        runUnder(item, () => {
-            var _a;
-            if ((_a = block.body) === null || _a === void 0 ? void 0 : _a.reacting) {
+        if (isReaction(block.body)) {
+            if (block.stamp === 0) {
                 Transaction.outside(() => {
                     if (Rx.isLogging)
                         Rx.setLoggingHint(block, block.key);
-                    Rx.getController(block.rerender).configure({
+                    Rx.getController(block.render).configure({
                         order: block.level,
                     });
                 });
             }
-            driver.initialize(block, undefined);
-            driver.deploy(block, sequential);
-        });
+            nonreactive(block.render, block.body.triggers);
+        }
+        else
+            renderNow(item);
     }
-    else if (redeploy)
-        runUnder(item, () => {
-            driver.deploy(block, sequential);
-        });
 }
-function runRender(item) {
+function redeployIfNecessary(block) {
+    const driver = block.driver;
+    if (block.stamp === 0) {
+        block.stamp = 1;
+        driver.initialize(block, undefined);
+        driver.deploy(block);
+    }
+    else if (block.isMoved)
+        driver.deploy(block);
+}
+function renderNow(item) {
     const block = item.instance;
     if (block.stamp >= 0) {
         let result = undefined;
         runUnder(item, () => {
             try {
+                redeployIfNecessary(block);
                 block.stamp++;
                 block.numerator = 0;
                 block.assignedCells = undefined;
+                block.assignedStyle = false;
                 block.children.beginMerge();
                 result = block.driver.render(block);
                 if (block.driver.isLine)
@@ -548,15 +577,14 @@ function runRender(item) {
         });
     }
 }
-function runFinalize(item, isLeader, individual) {
-    var _a;
+function triggerFinalization(item, isLeader, individual) {
     const block = item.instance;
     if (block.stamp >= 0) {
         if (individual && block.key !== block.body.key && !block.driver.isLine)
             console.log(`WARNING: it is recommended to assign explicit key for conditionally rendered block in order to avoid unexpected side effects: ${block.key}`);
         block.stamp = ~block.stamp;
         const childrenAreLeaders = block.driver.finalize(block, isLeader);
-        if ((_a = block.body) === null || _a === void 0 ? void 0 : _a.reacting) {
+        if (isReaction(block.body)) {
             item.aux = undefined;
             const last = gLastToDispose;
             if (last)
@@ -569,7 +597,7 @@ function runFinalize(item, isLeader, individual) {
                 });
         }
         for (const item of block.children.items())
-            runFinalize(item, childrenAreLeaders, false);
+            triggerFinalization(item, childrenAreLeaders, false);
         VBlockImpl.grandCount--;
     }
 }
@@ -661,8 +689,8 @@ function defaultReject(error) {
 }
 Promise.prototype.then = reactronicDomHookedThen;
 const NOP = (...args) => { };
-const gSysDriver = new StaticDriver(null, "SYSTEM", LayoutKind.Group);
-const gSysRoot = Collection.createItem(new VBlockImpl(gSysDriver.name, gSysDriver, { level: 0 }, { reacting: true, render: NOP }));
+const gSysDriver = new StaticDriver(null, "SYSTEM", LayoutKind.Fragment);
+const gSysRoot = Collection.createItem(new VBlockImpl(gSysDriver.name, gSysDriver, { level: 0 }, { reaction: true, render: NOP }));
 gSysRoot.instance.item = gSysRoot;
 Object.defineProperty(gSysRoot.instance, "host", {
     value: gSysRoot.instance,

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

@@ -1,12 +1,12 @@
 import { VBlock, BlockBody, Align, CellRange } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export declare function Block<M = unknown, R = void>(body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function Block<M = unknown, R = void>(body?: BlockBody<HTMLElement, M, R>, base?: 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 Grid<M = unknown, R = void>(body?: BlockBody<HTMLElement, M, R>, base?: 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 function Fragment<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;
@@ -18,6 +18,7 @@ export declare class VerstakDriver<T extends HTMLElement> extends HtmlDriver<T>
     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;
+    applyOverlayVisible(block: VBlock<T>, overlayVisible: boolean | undefined): void;
+    applyStyling(block: VBlock<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }

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

@@ -1,24 +1,24 @@
-import { VBlock, LayoutKind, Align, GridCursor, asBaseFor } from "../core/api";
+import { VBlock, LayoutKind, Align, GridCursor } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export function Block(body) {
-    return VBlock.claim(VerstakTags.block, body);
+export function Block(body, base) {
+    return VBlock.claim(VerstakTags.block, body, base);
 }
 export function PlainText(content, body) {
-    return VBlock.claim(VerstakTags.text, asBaseFor(body, {
+    return VBlock.claim(VerstakTags.text, body, {
         render(b) {
             b.native.innerText = content;
-        },
-    }));
+        }
+    });
 }
 export function HtmlText(content, body) {
-    return VBlock.claim(VerstakTags.text, asBaseFor(body, {
+    return VBlock.claim(VerstakTags.text, body, {
         render(b) {
             b.native.innerHTML = content;
-        },
-    }));
+        }
+    });
 }
-export function Grid(body) {
-    return VBlock.claim(VerstakTags.grid, body);
+export function Grid(body, base) {
+    return VBlock.claim(VerstakTags.grid, body, base);
 }
 export function line(body) {
     lineFeed();
@@ -27,8 +27,8 @@ export function line(body) {
 export function lineFeed(noCoalescing, key) {
     return VBlock.claim(VerstakTags.line, { key });
 }
-export function Group(body) {
-    return VBlock.claim(VerstakTags.group, body);
+export function Fragment(body) {
+    return VBlock.claim(VerstakTags.fragment, body);
 }
 export class VerstakDriver extends HtmlDriver {
     applyCellRange(block, cellRange) {
@@ -110,11 +110,32 @@ export class VerstakDriver extends HtmlDriver {
         else
             block.native.removeAttribute("wrapping");
     }
-    applyFloating(block, floating) {
-        if (floating)
-            block.native.setAttribute("floating", "true");
+    applyOverlayVisible(block, overlayVisible) {
+        const e = block.native;
+        const parent = HtmlDriver.findNearestParentHtmlBlock(block).native;
+        if (overlayVisible === true) {
+            const doc = document.body;
+            const rect = parent.getBoundingClientRect();
+            const h = doc.offsetWidth - rect.left > rect.right ? "rightward" : "leftward";
+            const v = doc.clientHeight - rect.top > rect.bottom ? "downward" : "upward";
+            e.setAttribute("overlay", `${h}-${v}`);
+            parent.setAttribute("stacking", "true");
+        }
+        else {
+            parent.removeAttribute("stacking");
+            if (overlayVisible === false)
+                e.setAttribute("overlay", "hidden");
+            else
+                e.removeAttribute("overlay");
+        }
+    }
+    applyStyling(block, secondary, styleName, enabled) {
+        const e = block.native;
+        enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
+        if (secondary)
+            e.classList.toggle(styleName, enabled);
         else
-            block.native.removeAttribute("floating");
+            e.className = enabled ? styleName : "";
     }
     render(block) {
         if (block.driver.layout < LayoutKind.Line)
@@ -127,7 +148,7 @@ const VerstakTags = {
     text: new VerstakDriver("v-text", LayoutKind.Text),
     grid: new VerstakDriver("v-grid", LayoutKind.Grid, () => new GridCursor()),
     line: new VerstakDriver("v-line", LayoutKind.Line),
-    group: new VerstakDriver("v-group", LayoutKind.Group),
+    fragment: new VerstakDriver("v-fragment", LayoutKind.Fragment),
 };
 const AlignToCss = ["stretch", "start", "center", "end"];
 const TextAlignCss = ["justify", "left", "center", "right"];