verstak 0.23.125 → 0.24.107

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

@@ -0,0 +1,508 @@
+import { RxTree, BaseDriver } from "reactronic";
+import { equalElCoords, parseElCoords } from "./ElUtils.js";
+export class ElDriver extends BaseDriver {
+    allocate(node) {
+        return new ElImpl(node);
+    }
+}
+export var ElKind;
+(function (ElKind) {
+    ElKind[ElKind["Section"] = 0] = "Section";
+    ElKind[ElKind["Table"] = 1] = "Table";
+    ElKind[ElKind["Note"] = 2] = "Note";
+    ElKind[ElKind["Group"] = 3] = "Group";
+    ElKind[ElKind["Part"] = 4] = "Part";
+    ElKind[ElKind["Cursor"] = 5] = "Cursor";
+    ElKind[ElKind["Native"] = 6] = "Native";
+})(ElKind || (ElKind = {}));
+export var Align;
+(function (Align) {
+    Align[Align["Default"] = 16] = "Default";
+    Align[Align["ToBounds"] = 0] = "ToBounds";
+    Align[Align["ToLeft"] = 1] = "ToLeft";
+    Align[Align["ToCenterX"] = 2] = "ToCenterX";
+    Align[Align["ToRight"] = 3] = "ToRight";
+    Align[Align["ToTop"] = 4] = "ToTop";
+    Align[Align["ToCenterY"] = 8] = "ToCenterY";
+    Align[Align["ToBottom"] = 12] = "ToBottom";
+    Align[Align["ToCenter"] = 10] = "ToCenter";
+})(Align || (Align = {}));
+export class ElImpl {
+    constructor(node) {
+        this.node = node;
+        this.maxColumnCount = 0;
+        this.maxRowCount = 0;
+        this.cursorPosition = undefined;
+        this.native = undefined;
+        this.model = undefined;
+        this.controller = undefined;
+        this._kind = ElKind.Part;
+        this._area = undefined;
+        this._coords = UndefinedElCoords;
+        this._widthGrowth = 0;
+        this._minWidth = "";
+        this._maxWidth = "";
+        this._heightGrowth = 0;
+        this._minHeight = "";
+        this._maxHeight = "";
+        this._contentAlignment = Align.Default;
+        this._elementAlignment = Align.Default;
+        this._contentWrapping = true;
+        this._overlayVisible = undefined;
+        this._hasStyles = false;
+    }
+    prepareForUpdate() {
+        this._area = undefined;
+        this._hasStyles = false;
+    }
+    get isSection() { return this.kind === ElKind.Section; }
+    get isTable() { return this.kind === ElKind.Table; }
+    get isAuxiliary() { return this.kind > ElKind.Note; }
+    get kind() { return this._kind; }
+    set kind(value) {
+        if (value !== this._kind || this.node.stamp >= Number.MAX_SAFE_INTEGER - 1) {
+            if (this.native !== undefined)
+                Apply.kind(this, value);
+            this._kind = value;
+        }
+    }
+    get area() { return this._area; }
+    set area(value) {
+        var _a, _b;
+        const node = this.node;
+        const driver = node.driver;
+        if (!driver.isPartitionSeparator) {
+            const owner = node.owner;
+            const ownerEl = owner.element;
+            const prevEl = (_a = node.slot.prev) === null || _a === void 0 ? void 0 : _a.instance.element;
+            const cursorPosition = (_b = prevEl === null || prevEl === void 0 ? void 0 : prevEl.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)) {
+                if (this.native !== undefined)
+                    Apply.coords(this, coords);
+                this._coords = coords;
+            }
+            this._area = value !== null && value !== void 0 ? value : {};
+        }
+        else
+            this.rowBreak();
+    }
+    get widthGrowth() { return this._widthGrowth; }
+    set widthGrowth(value) {
+        if (value !== this._widthGrowth) {
+            Apply.widthGrowth(this, value);
+            this._widthGrowth = value;
+        }
+    }
+    get minWidth() { return this._minWidth; }
+    set minWidth(value) {
+        if (value !== this._minWidth) {
+            Apply.minWidth(this, value);
+            this._minWidth = value;
+        }
+    }
+    get maxWidth() { return this._maxWidth; }
+    set maxWidth(value) {
+        if (value !== this._maxWidth) {
+            Apply.applyMaxWidth(this, value);
+            this._maxWidth = value;
+        }
+    }
+    get heightGrowth() { return this._heightGrowth; }
+    set heightGrowth(value) {
+        if (value !== this._heightGrowth) {
+            Apply.heightGrowth(this, value);
+            this._heightGrowth = value;
+        }
+    }
+    get minHeight() { return this._minHeight; }
+    set minHeight(value) {
+        if (value !== this._minHeight) {
+            Apply.minHeight(this, value);
+            this._minHeight = value;
+        }
+    }
+    get maxHeight() { return this._maxHeight; }
+    set maxHeight(value) {
+        if (value !== this._maxHeight) {
+            Apply.maxHeight(this, value);
+            this._maxHeight = value;
+        }
+    }
+    get contentAlignment() { return this._contentAlignment; }
+    set contentAlignment(value) {
+        if (value !== this._contentAlignment) {
+            Apply.contentAlignment(this, value);
+            this._contentAlignment = value;
+        }
+    }
+    get elementAlignment() { return this._elementAlignment; }
+    set elementAlignment(value) {
+        if (value !== this._elementAlignment) {
+            Apply.elementAlignment(this, value);
+            this._elementAlignment = value;
+        }
+    }
+    get contentWrapping() { return this._contentWrapping; }
+    set contentWrapping(value) {
+        if (value !== this._contentWrapping) {
+            Apply.contentWrapping(this, value);
+            this._contentWrapping = value;
+        }
+    }
+    get overlayVisible() { return this._overlayVisible; }
+    set overlayVisible(value) {
+        if (value !== this._overlayVisible) {
+            Apply.overlayVisible(this, value);
+            this._overlayVisible = value;
+        }
+    }
+    useStyle(styleName, enabled) {
+        Apply.style(this, this._hasStyles, styleName, enabled);
+        this._hasStyles = true;
+    }
+    rowBreak() {
+        var _a, _b;
+        const node = this.node;
+        const prevEl = (_a = node.slot.prev) === null || _a === void 0 ? void 0 : _a.instance.element;
+        const cursorPosition = (_b = prevEl === null || prevEl === void 0 ? void 0 : prevEl.cursorPosition) !== null && _b !== void 0 ? _b : InitialCursorPosition;
+        const newCursorPosition = this.cursorPosition = new CursorPosition(cursorPosition);
+        newCursorPosition.x = 1;
+        newCursorPosition.y = newCursorPosition.runningMaxY + 1;
+    }
+}
+class CursorPosition {
+    constructor(prev) {
+        this.x = prev.x;
+        this.y = prev.y;
+        this.runningMaxX = prev.runningMaxX;
+        this.runningMaxY = prev.runningMaxY;
+        this.flags = prev.flags & ~CursorFlags.OwnCursorPosition;
+    }
+}
+var CursorFlags;
+(function (CursorFlags) {
+    CursorFlags[CursorFlags["None"] = 0] = "None";
+    CursorFlags[CursorFlags["OwnCursorPosition"] = 1] = "OwnCursorPosition";
+    CursorFlags[CursorFlags["UsesRunningColumnCount"] = 2] = "UsesRunningColumnCount";
+    CursorFlags[CursorFlags["UsesRunningRowCount"] = 4] = "UsesRunningRowCount";
+})(CursorFlags || (CursorFlags = {}));
+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 }));
+function getEffectiveElCoords(isRegularElement, area, maxX, maxY, cursorPosition, newCursorPosition) {
+    var _a, _b;
+    let result;
+    if (typeof (area) === "string") {
+        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 = isRegularElement ? result.x2 + 1 : result.x1;
+            newCursorPosition.y = result.y1;
+            newCursorPosition.flags = CursorFlags.OwnCursorPosition;
+        }
+    }
+    else if (newCursorPosition) {
+        let dx;
+        let dy;
+        if (area) {
+            dx = (_a = area.cellsOverWidth) !== null && _a !== void 0 ? _a : 1;
+            dy = (_b = area.cellsOverHeight) !== null && _b !== void 0 ? _b : 1;
+        }
+        else
+            dx = dy = 1;
+        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 && isRegularElement) {
+            dx = runningX || 1;
+            newCursorPosition.flags = CursorFlags.UsesRunningColumnCount;
+        }
+        if (dx >= 0) {
+            if (isRegularElement) {
+                result.x1 = cursorPosition.x;
+                result.x2 = absolutizePosition(result.x1 + dx - 1, 0, maxX || Infinity);
+                newCursorPosition.x = result.x2 + 1;
+            }
+            else {
+                result.x1 = result.x2 = cursorPosition.x + dx;
+                newCursorPosition.x = result.x2;
+            }
+        }
+        else {
+            if (isRegularElement) {
+                result.x1 = Math.max(cursorPosition.x + dx, 1);
+                result.x2 = cursorPosition.x;
+                newCursorPosition.x = result.x2 + 1;
+            }
+            else {
+                result.x1 = result.x2 = cursorPosition.x + dx;
+                newCursorPosition.x = result.x2;
+            }
+        }
+        if (dy === 0 && isRegularElement) {
+            dy = runningY || 1;
+            newCursorPosition.flags |= CursorFlags.UsesRunningRowCount;
+        }
+        if (dy >= 0) {
+            if (isRegularElement) {
+                result.y1 = cursorPosition.y;
+                result.y2 = absolutizePosition(result.y1 + dy - 1, 0, maxY || Infinity);
+                if (result.y2 > newCursorPosition.runningMaxY)
+                    newCursorPosition.runningMaxY = result.y2;
+            }
+            else
+                result.y1 = result.y2 = cursorPosition.y + dy;
+        }
+        else {
+            if (isRegularElement) {
+                result.y1 = Math.max(cursorPosition.y + dy, 1);
+                result.y2 = cursorPosition.y;
+            }
+            else
+                result.y1 = result.y2 = cursorPosition.y + dy;
+        }
+    }
+    else
+        throw new Error("relative layout requires sequential children");
+    return 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)
+        result.x1 = x1, result.x2 = x2;
+    else
+        result.x1 = x2, result.x2 = x1;
+    const y1 = absolutizePosition(area.y1, cursorY, maxHeight);
+    const y2 = absolutizePosition(area.y2, y1, maxHeight);
+    if (y1 <= y2)
+        result.y1 = y1, result.y2 = y2;
+    else
+        result.y1 = y2, result.y2 = y1;
+    return result;
+}
+function absolutizePosition(pos, cursor, max) {
+    if (pos === 0)
+        pos = cursor;
+    else if (pos < 0)
+        pos = Math.max(max + pos, 1);
+    else
+        pos = Math.min(pos, max);
+    return pos;
+}
+export class CursorCommand {
+}
+export class CursorCommandDriver extends ElDriver {
+    constructor() {
+        super("cursor", false, el => el.kind = ElKind.Cursor);
+    }
+}
+export class Apply {
+    static kind(element, value) {
+        const kind = Constants.layouts[value];
+        kind && element.native.setAttribute(Constants.kindAttrName, kind);
+        VerstakDriversByLayout[value](element);
+    }
+    static coords(element, value) {
+        if (element.native instanceof HTMLElement) {
+            const s = element.native.style;
+            if (value) {
+                const x1 = value.x1 || 1;
+                const y1 = value.y1 || 1;
+                const x2 = value.x2 || x1;
+                const y2 = value.y2 || y1;
+                s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
+            }
+            else
+                s.gridArea = "";
+        }
+    }
+    static widthGrowth(element, value) {
+        if (element.native instanceof HTMLElement) {
+            const s = element.native.style;
+            if (value > 0) {
+                s.flexGrow = `${value}`;
+                s.flexBasis = "0";
+            }
+            else {
+                s.flexGrow = "";
+                s.flexBasis = "";
+            }
+        }
+    }
+    static minWidth(element, value) {
+        if (element.native instanceof HTMLElement)
+            element.native.style.minWidth = `${value}`;
+    }
+    static applyMaxWidth(element, value) {
+        if (element.native instanceof HTMLElement)
+            element.native.style.maxWidth = `${value}`;
+    }
+    static heightGrowth(element, value) {
+        const bNode = element.node;
+        const driver = bNode.driver;
+        if (driver.isPartitionSeparator) {
+            if (element.native instanceof HTMLElement) {
+                const s = element.native.style;
+                if (value > 0)
+                    s.flexGrow = `${value}`;
+                else
+                    s.flexGrow = "";
+            }
+        }
+        else {
+            const hostDriver = bNode.host.driver;
+            if (hostDriver.isPartitionSeparator) {
+                Apply.elementAlignment(element, Align.ToBounds);
+                Apply.heightGrowth(bNode.host.slot.instance.element, value);
+            }
+        }
+    }
+    static minHeight(element, value) {
+        if (element.native instanceof HTMLElement)
+            element.native.style.minHeight = `${value}`;
+    }
+    static maxHeight(element, value) {
+        if (element.native instanceof HTMLElement)
+            element.native.style.maxHeight = `${value}`;
+    }
+    static contentAlignment(element, value) {
+        if (element.native instanceof HTMLElement) {
+            const s = element.native.style;
+            if ((value & Align.Default) === 0) {
+                const v = AlignToCss[(value >> 2) & 0b11];
+                const h = AlignToCss[value & 0b11];
+                const t = TextAlignCss[value & 0b11];
+                s.justifyContent = v;
+                s.alignItems = h;
+                s.textAlign = t;
+            }
+            else
+                s.justifyContent = s.alignContent = s.textAlign = "";
+        }
+    }
+    static elementAlignment(element, value) {
+        if (element.native instanceof HTMLElement) {
+            const s = element.native.style;
+            if ((value & Align.Default) === 0) {
+                const v = AlignToCss[(value >> 2) & 0b11];
+                const h = AlignToCss[value & 0b11];
+                s.alignSelf = v;
+                s.justifySelf = h;
+            }
+            else
+                s.alignSelf = s.justifySelf = "";
+        }
+    }
+    static contentWrapping(element, value) {
+        if (element.native instanceof HTMLElement) {
+            const s = element.native.style;
+            if (value) {
+                s.flexFlow = "wrap";
+                s.overflow = "";
+                s.textOverflow = "";
+                s.whiteSpace = "";
+            }
+            else {
+                s.flexFlow = "";
+                s.overflow = "hidden";
+                s.textOverflow = "ellipsis";
+                s.whiteSpace = "nowrap";
+            }
+        }
+    }
+    static overlayVisible(element, value) {
+        const e = element.native;
+        if (e instanceof HTMLElement) {
+            const s = e.style;
+            const host = RxTree.findMatchingHost(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
+            const nativeHost = host === null || host === void 0 ? void 0 : host.element.native;
+            if (value === true) {
+                const doc = document.body;
+                const rect = nativeHost.getBoundingClientRect();
+                if (doc.offsetWidth - rect.left > rect.right)
+                    s.left = "0", s.right = "";
+                else
+                    s.left = "", s.right = "0";
+                if (doc.clientHeight - rect.top > rect.bottom)
+                    s.top = "100%", s.bottom = "";
+                else
+                    s.top = "", s.bottom = "100%";
+                s.display = "";
+                s.position = "absolute";
+                s.minWidth = "100%";
+                s.boxSizing = "border-box";
+                nativeHost.style.position = "relative";
+            }
+            else {
+                nativeHost.style.position = "";
+                if (value === false)
+                    s.display = "none";
+                else
+                    s.position = s.display = s.left = s.right = s.top = s.bottom = "";
+            }
+        }
+    }
+    static style(element, secondary, styleName, enabled) {
+        const native = element.native;
+        enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
+        if (secondary)
+            native.classList.toggle(styleName, enabled);
+        else
+            native.className = enabled ? styleName : "";
+    }
+}
+export const Constants = {
+    element: "element",
+    partition: "partition",
+    layouts: ["section", "table", "note", "group", "", ""],
+    keyAttrName: "key",
+    kindAttrName: "kind",
+};
+const VerstakDriversByLayout = [
+    el => {
+        const owner = el.node.owner.element;
+        const s = el.native.style;
+        s.display = "flex";
+        s.flexDirection = "column";
+        s.alignSelf = owner.isTable ? "stretch" : "center";
+        s.textAlign = "initial";
+        s.flexShrink = "1";
+        s.minWidth = "0";
+    },
+    el => {
+        const owner = el.node.owner.element;
+        const s = el.native.style;
+        s.alignSelf = owner.isTable ? "stretch" : "center";
+        s.display = "grid";
+        s.flexBasis = "0";
+        s.gridAutoRows = "minmax(min-content, 1fr)";
+        s.gridAutoColumns = "minmax(min-content, 1fr)";
+        s.textAlign = "initial";
+    },
+    el => {
+        const owner = el.node.owner.element;
+        const s = el.native.style;
+        s.alignSelf = owner.isTable ? "stretch" : "center";
+        s.display = "inline-grid";
+        s.flexShrink = "1";
+    },
+    el => {
+        const s = el.native.style;
+        s.display = "contents";
+    },
+    el => {
+        const owner = el.node.owner.element;
+        const s = el.native.style;
+        s.display = owner.isTable ? "contents" : "flex";
+        s.flexDirection = "row";
+    },
+    el => {
+    },
+    el => {
+    },
+];
+const AlignToCss = ["stretch", "start", "center", "end"];
+const TextAlignCss = ["justify", "left", "center", "right"];

package/build/dist/source/{core/Utils.d.ts → html/ElUtils.d.ts}

@@ -1,8 +1,7 @@
-import { ElCoords } from "./Interfaces.js";
+import { ElCoords } from "./El.js";
+export declare function objectHasMember<T>(obj: any, member: string): obj is T;
+export declare function emitLetters(n: number): string;
 export declare function parseElCoords(text: string, result: ElCoords): ElCoords;
 export declare function emitElCoords(value: ElCoords): string;
-export declare function emitLetters(n: number): string;
 export declare function emitCellPosition(x: number, y: number): string;
 export declare function equalElCoords(a: ElCoords, b: ElCoords): boolean;
-export declare function objectHasMember<T>(obj: any, member: string): obj is T;
-export declare function getCallerInfo(prefix: string): string;

package/build/dist/source/{core/Utils.js → html/ElUtils.js}

@@ -1,3 +1,17 @@
+export function objectHasMember(obj, member) {
+    return obj === Object(obj) && !Array.isArray(obj) && member in obj;
+}
+export function emitLetters(n) {
+    if (n < 0)
+        throw new Error(`emitLetters: argument (${n}) should not be negative or zero`);
+    let result = "";
+    while (n >= 0) {
+        const r = n % 26;
+        n = Math.floor(n / 26) - 1;
+        result = String.fromCharCode(65 + r) + result;
+    }
+    return result;
+}
 export function parseElCoords(text, result) {
     let i = 0;
     let value = 0;
@@ -134,17 +148,6 @@ export function emitElCoords(value) {
     const p2 = emitCellPosition(value.x2, value.y2);
     return `${p1}${p2 !== "" ? `:${p2}` : ""}`;
 }
-export function emitLetters(n) {
-    if (n < 0)
-        throw new Error(`emitLetters: argument (${n}) should not be negative or zero`);
-    let result = "";
-    while (n >= 0) {
-        const r = n % 26;
-        n = Math.floor(n / 26) - 1;
-        result = String.fromCharCode(65 + r) + result;
-    }
-    return result;
-}
 export function emitCellPosition(x, y) {
     let result = "";
     if (x > 0 && y > 0)
@@ -174,38 +177,3 @@ function isCapitalLetter(ch) {
 function isLowercaseLetter(ch) {
     return 97 <= ch && ch <= 122;
 }
-export function objectHasMember(obj, member) {
-    return obj === Object(obj) && !Array.isArray(obj) && member in obj;
-}
-export function getCallerInfo(prefix) {
-    const restore = Error.stackTraceLimit = 20;
-    const error = new Error();
-    const stack = error.stack || "";
-    Error.stackTraceLimit = restore;
-    const lines = stack.split("\n");
-    let i = lines.findIndex(x => x.indexOf(".specify") >= 0);
-    i = i >= 0 ? i + 2 : 5;
-    let caller = extractFunctionAndLocation(lines[i]);
-    let location = caller;
-    if (caller.func.endsWith(".update")) {
-        i = i - 1;
-        caller = extractFunctionAndLocation(lines[i]);
-        location = extractFunctionAndLocation(lines[i + 1]);
-    }
-    else {
-        while (!caller.func && i > 0) {
-            i = i - 1;
-            caller = extractFunctionAndLocation(lines[i]);
-        }
-        location = extractFunctionAndLocation(lines[i + 1]);
-    }
-    const result = `${prefix}·${caller.func}@${location.file}`;
-    return result;
-}
-function extractFunctionAndLocation(s) {
-    const match = s.match(/(?:\s*at\s+)?(?:(\S+)\s\()?(?:.*?)([^\/\(\):]+)(?:(:|\d)*\)?)$/);
-    return {
-        func: (match === null || match === void 0 ? void 0 : match[1]) || "",
-        file: (match === null || match === void 0 ? void 0 : match[2]) || "",
-    };
-}

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

@@ -1,27 +1,15 @@
-import { El, ElKind, RxNodeSpec, Align, ElCoords, ElArea } from "../core/api.js";
+import { RxNodeDecl } from "reactronic";
+import { El, ElArea } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export declare function Section<M = unknown, R = void>(spec?: RxNodeSpec<El<HTMLElement, M, R>>, base?: RxNodeSpec<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
-export declare function Table<M = unknown, R = void>(spec?: RxNodeSpec<El<HTMLElement, M, R>>, base?: RxNodeSpec<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
+export declare function Section<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M, R>>, preset?: RxNodeDecl<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
+export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M, R>>, preset?: RxNodeDecl<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
 export declare function startNewRow(shiftCursorDown?: number): void;
 export declare function cursor(areaParams: ElArea): void;
-export declare function Note(content: string, spec?: RxNodeSpec<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
-export declare function HtmlNote(content: string, spec?: RxNodeSpec<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
-export declare function Group<M = unknown, R = void>(spec?: RxNodeSpec<El<HTMLElement, M, R>>, base?: RxNodeSpec<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
-export declare function Fragment<M = unknown, R = void>(spec?: RxNodeSpec<El<void, M, R>>, base?: RxNodeSpec<El<void, M, R>>): El<void, M, R>;
+export declare function Note(content: string, declaration?: RxNodeDecl<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
+export declare function HtmlNote(content: string, declaration?: RxNodeDecl<El<HTMLElement, void, void>>): El<HTMLElement, void, void>;
+export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M, R>>, preset?: RxNodeDecl<El<HTMLElement, M, R>>): El<HTMLElement, M, R>;
+export declare function Fragment<M = unknown, R = void>(declaration?: RxNodeDecl<El<void, M, R>>, preset?: RxNodeDecl<El<void, M, R>>): El<void, M, R>;
 export declare class VerstakHtmlDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    applyKind(element: El<T, any, any>, value: ElKind): void;
-    applyCoords(element: El<T>, value: ElCoords | undefined): void;
-    applyWidthGrowth(element: El<T>, value: number): void;
-    applyMinWidth(element: El<T>, value: string): void;
-    applyMaxWidth(element: El<T>, value: string): void;
-    applyHeightGrowth(element: El<T>, value: number): void;
-    applyMinHeight(element: El<T>, value: string): void;
-    applyMaxHeight(element: El<T>, value: string): void;
-    applyContentAlignment(element: El<T>, value: Align): void;
-    applyElementAlignment(element: El<T>, value: Align): void;
-    applyContentWrapping(element: El<T>, value: boolean): void;
-    applyOverlayVisible(element: El<T>, value: boolean | undefined): void;
-    applyStyle(element: El<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
     update(element: El<T>): void | Promise<void>;
 }