verstak 0.24.502 → 0.91.25002

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

@@ -1,2 +1,2 @@
 export * from "./core/api.js";
-export * from "./html/api.js";
+export * from "./sensors/api.js";

package/build/dist/source/api.js

@@ -1,2 +1,2 @@
 export * from "./core/api.js";
-export * from "./html/api.js";
+export * from "./sensors/api.js";

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

@@ -0,0 +1,78 @@
+import { ReactiveNode } from "reactronic";
+export type El<T = any, M = any> = {
+    readonly node: ReactiveNode<El<T, M>>;
+    readonly index: number;
+    native: T;
+    model: M;
+    kind: ElKind;
+    place: ElPlace;
+    width: Range;
+    height: Range;
+    horizontally: Horizontal | undefined;
+    contentHorizontally: Horizontal | undefined;
+    vertically: Vertical | undefined;
+    contentVertically: Vertical | undefined;
+    stretchingStrengthHorizontally: number | undefined;
+    stretchingStrengthVertically: number | undefined;
+    contentWrapping: boolean;
+    overlayVisible: boolean | undefined;
+    sealed: Direction | undefined;
+    splitView: Direction | undefined;
+    widthPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    heightPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    partitionSizeInSplitViewPx: number;
+    readonly style: CSSStyleDeclaration;
+    useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
+};
+export declare enum ElKind {
+    panel = 0,
+    table = 1,
+    note = 2,
+    group = 3,
+    part = 4,
+    splitter = 5,
+    cursor = 6,
+    native = 7
+}
+export type ElCoords = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export declare enum Horizontal {
+    left = 0,
+    center = 1,
+    right = 2,
+    stretch = 3,
+    stretchAndFix = 4
+}
+export declare enum Vertical {
+    top = 0,
+    center = 1,
+    bottom = 2,
+    stretch = 3,
+    stretchAndFix = 4
+}
+export type Range = {
+    readonly min?: string;
+    readonly max?: string;
+    preferred?: string;
+};
+export type MarkedRange = Range & {
+    readonly marker?: string;
+};
+export type ElPlace = undefined | string | {
+    cellsOverWidth?: number;
+    cellsOverHeight?: number;
+};
+export declare enum Direction {
+    horizontal = 0,
+    vertical = 1
+}

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

@@ -0,0 +1,32 @@
+export var ElKind;
+(function (ElKind) {
+    ElKind[ElKind["panel"] = 0] = "panel";
+    ElKind[ElKind["table"] = 1] = "table";
+    ElKind[ElKind["note"] = 2] = "note";
+    ElKind[ElKind["group"] = 3] = "group";
+    ElKind[ElKind["part"] = 4] = "part";
+    ElKind[ElKind["splitter"] = 5] = "splitter";
+    ElKind[ElKind["cursor"] = 6] = "cursor";
+    ElKind[ElKind["native"] = 7] = "native";
+})(ElKind || (ElKind = {}));
+export var Horizontal;
+(function (Horizontal) {
+    Horizontal[Horizontal["left"] = 0] = "left";
+    Horizontal[Horizontal["center"] = 1] = "center";
+    Horizontal[Horizontal["right"] = 2] = "right";
+    Horizontal[Horizontal["stretch"] = 3] = "stretch";
+    Horizontal[Horizontal["stretchAndFix"] = 4] = "stretchAndFix";
+})(Horizontal || (Horizontal = {}));
+export var Vertical;
+(function (Vertical) {
+    Vertical[Vertical["top"] = 0] = "top";
+    Vertical[Vertical["center"] = 1] = "center";
+    Vertical[Vertical["bottom"] = 2] = "bottom";
+    Vertical[Vertical["stretch"] = 3] = "stretch";
+    Vertical[Vertical["stretchAndFix"] = 4] = "stretchAndFix";
+})(Vertical || (Vertical = {}));
+export var Direction;
+(function (Direction) {
+    Direction[Direction["horizontal"] = 0] = "horizontal";
+    Direction[Direction["vertical"] = 1] = "vertical";
+})(Direction || (Direction = {}));

package/build/dist/source/{html/El.d.ts → core/ElDriver.d.ts}

@@ -1,81 +1,5 @@
 import { ReactiveNode, BaseDriver } from "reactronic";
-export type El<T = any, M = any> = {
-    readonly node: ReactiveNode<El<T, M>>;
-    readonly index: number;
-    native: T;
-    model: M;
-    kind: ElKind;
-    place: ElPlace;
-    width: Range;
-    height: Range;
-    horizontally: Horizontal | undefined;
-    contentHorizontally: Horizontal | undefined;
-    vertically: Vertical | undefined;
-    contentVertically: Vertical | undefined;
-    stretchingStrengthHorizontally: number | undefined;
-    stretchingStrengthVertically: number | undefined;
-    contentWrapping: boolean;
-    overlayVisible: boolean | undefined;
-    sealed: Direction | undefined;
-    splitView: Direction | undefined;
-    widthPx: {
-        minPx: number;
-        maxPx: number;
-    };
-    heightPx: {
-        minPx: number;
-        maxPx: number;
-    };
-    partitionSizeInSplitViewPx: number;
-    readonly style: CSSStyleDeclaration;
-    useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
-};
-export declare enum ElKind {
-    panel = 0,
-    table = 1,
-    note = 2,
-    group = 3,
-    part = 4,
-    splitter = 5,
-    cursor = 6,
-    native = 7
-}
-export type ElCoords = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};
-export declare enum Horizontal {
-    left = 0,
-    center = 1,
-    right = 2,
-    stretch = 3,
-    stretchAndFix = 4
-}
-export declare enum Vertical {
-    top = 0,
-    center = 1,
-    bottom = 2,
-    stretch = 3,
-    stretchAndFix = 4
-}
-export type Range = {
-    readonly min?: string;
-    readonly max?: string;
-    preferred?: string;
-};
-export type MarkedRange = Range & {
-    readonly marker?: string;
-};
-export type ElPlace = undefined | string | {
-    cellsOverWidth?: number;
-    cellsOverHeight?: number;
-};
-export declare enum Direction {
-    horizontal = 0,
-    vertical = 1
-}
+import { El, ElKind, Horizontal, Vertical, Range, ElPlace, Direction } from "./El.js";
 export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
     create(node: ReactiveNode<El<T, M>>): El<T, M>;
 }

package/build/dist/source/{html/El.js → core/ElDriver.js}

@@ -8,47 +8,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { ReactiveNode, BaseDriver, Transaction, obs, ObservableObject } from "reactronic";
+import { ElKind, Horizontal, Vertical, Direction } from "./El.js";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
-export var ElKind;
-(function (ElKind) {
-    ElKind[ElKind["panel"] = 0] = "panel";
-    ElKind[ElKind["table"] = 1] = "table";
-    ElKind[ElKind["note"] = 2] = "note";
-    ElKind[ElKind["group"] = 3] = "group";
-    ElKind[ElKind["part"] = 4] = "part";
-    ElKind[ElKind["splitter"] = 5] = "splitter";
-    ElKind[ElKind["cursor"] = 6] = "cursor";
-    ElKind[ElKind["native"] = 7] = "native";
-})(ElKind || (ElKind = {}));
-export var Horizontal;
-(function (Horizontal) {
-    Horizontal[Horizontal["left"] = 0] = "left";
-    Horizontal[Horizontal["center"] = 1] = "center";
-    Horizontal[Horizontal["right"] = 2] = "right";
-    Horizontal[Horizontal["stretch"] = 3] = "stretch";
-    Horizontal[Horizontal["stretchAndFix"] = 4] = "stretchAndFix";
-})(Horizontal || (Horizontal = {}));
-export var Vertical;
-(function (Vertical) {
-    Vertical[Vertical["top"] = 0] = "top";
-    Vertical[Vertical["center"] = 1] = "center";
-    Vertical[Vertical["bottom"] = 2] = "bottom";
-    Vertical[Vertical["stretch"] = 3] = "stretch";
-    Vertical[Vertical["stretchAndFix"] = 4] = "stretchAndFix";
-})(Vertical || (Vertical = {}));
-export var Direction;
-(function (Direction) {
-    Direction[Direction["horizontal"] = 0] = "horizontal";
-    Direction[Direction["vertical"] = 1] = "vertical";
-})(Direction || (Direction = {}));
-class Size extends ObservableObject {
-    constructor() {
-        super();
-        this.raw = { min: "", max: "" };
-        this.minPx = 0;
-        this.maxPx = Number.POSITIVE_INFINITY;
-    }
-}
 export class ElDriver extends BaseDriver {
     create(node) {
         return new ElImpl(node);
@@ -574,6 +535,14 @@ export class ElImpl {
             native.className = enabled ? styleName : "";
     }
 }
+class Size extends ObservableObject {
+    constructor() {
+        super();
+        this.raw = { min: "", max: "" };
+        this.minPx = 0;
+        this.maxPx = Number.POSITIVE_INFINITY;
+    }
+}
 export class ElLayoutInfo {
     constructor(prev) {
         this.x = prev.x;

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

@@ -0,0 +1,42 @@
+import { ReactiveNodeDecl, ReactiveNodeDriver, ReactiveNode, Script, Mode, MergedItem, ScriptAsync } from "reactronic";
+import { El, ElPlace } from "./El.js";
+import { CursorCommandDriver } from "./ElDriver.js";
+import { HtmlDriver } from "./WebDriver.js";
+export declare function Window(script?: Script<El<HTMLBodyElement>>, scriptAsync?: ScriptAsync<El<HTMLBodyElement>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLBodyElement>>, preparationAsync?: ScriptAsync<El<HTMLBodyElement>>, finalization?: Script<El<HTMLBodyElement>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLBodyElement>>): ReactiveNode<El<HTMLBodyElement>>;
+export declare function Window(declaration?: ReactiveNodeDecl<El<HTMLBodyElement>>): ReactiveNode<El<HTMLBodyElement>>;
+export declare function Panel<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationAsync?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationAsync?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
+export declare function Splitter<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationAsync?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function rowBreak(shiftCursorDown?: number): void;
+export declare function declareSplitter<T>(index: number, splitViewNode: ReactiveNode<El<T>>): ReactiveNode<El<HTMLElement>>;
+export declare function cursor(areaParams: ElPlace): void;
+export declare function Note(content: string, formatted?: boolean, declaration?: ReactiveNodeDecl<El<HTMLElement, void>>): ReactiveNode<El<HTMLElement, void>>;
+export declare function Group<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationAsync?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(declaration?: ReactiveNodeDecl<El<HTMLElement, M>>): ReactiveNode<El<HTMLElement, M>>;
+export declare function Handling<M = unknown>(script: Script<El<void, M>>): ReactiveNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(script?: Script<El<void, M>>, scriptAsync?: ScriptAsync<El<void, M>>, key?: string, mode?: Mode, preparation?: Script<El<void, M>>, preparationAsync?: ScriptAsync<El<void, M>>, finalization?: Script<El<void, M>>, triggers?: unknown, basis?: ReactiveNodeDecl<El<void, M>>): ReactiveNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(declaration?: ReactiveNodeDecl<El<void, M>>): ReactiveNode<El<void, M>>;
+export declare class PanelDriver<T extends HTMLElement> extends HtmlDriver<T> {
+    runScript(node: ReactiveNode<El<T>>): void | Promise<void>;
+    declareChild(ownerNode: ReactiveNode<El<T, any>>, childDriver: ReactiveNodeDriver<any>, childDeclaration?: ReactiveNodeDecl<any> | undefined, childBasis?: ReactiveNodeDecl<any> | undefined): MergedItem<ReactiveNode> | undefined;
+}
+export declare function isSplitViewPartition(childDriver: ReactiveNodeDriver): boolean;
+export declare class PartitionDriver<T extends HTMLElement> extends HtmlDriver<T> {
+    runScript(node: ReactiveNode<El<T>>): void | Promise<void>;
+    provideHost(node: ReactiveNode<El<T, any>>): ReactiveNode<El<T, any>>;
+}
+export declare const Drivers: {
+    panel: PanelDriver<HTMLElement>;
+    table: HtmlDriver<HTMLElement, any>;
+    note: HtmlDriver<HTMLElement, any>;
+    group: HtmlDriver<HTMLElement, any>;
+    partition: PartitionDriver<HTMLElement>;
+    wrapper: HtmlDriver<HTMLElement, any>;
+    splitter: HtmlDriver<HTMLElement, any>;
+    cursor: CursorCommandDriver;
+    synthetic: ReactiveNodeDriver<El<void, any>>;
+};

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

@@ -1,21 +1,26 @@
 import { ReactiveNode, Mode, unobs } from "reactronic";
-import { Constants, CursorCommandDriver, ElKind, ElDriver, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
+import { ElKind, Direction } from "./El.js";
+import { clamp } from "./ElUtils.js";
+import { Constants, CursorCommandDriver, ElDriver, ElLayoutInfo, InitialElLayoutInfo } from "./ElDriver.js";
 import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout, relayoutUsingSplitter } from "./SplitViewMath.js";
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
-import { HtmlDriver } from "./HtmlDriver.js";
-import { clamp } from "./ElUtils.js";
-export function Panel(contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
-    return ReactiveNode.declare(Drivers.panel, contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
+import { HtmlDriver, StaticDriver } from "./WebDriver.js";
+export function Window(scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
+    const driver = new StaticDriver(global.document.body, "Page", false, el => el.kind = ElKind.panel);
+    return ReactiveNode.declare(driver, scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
+}
+export function Panel(scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
+    return ReactiveNode.declare(Drivers.panel, scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
 }
-export function Table(contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
-    return ReactiveNode.declare(Drivers.table, contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
+export function Table(scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
+    return ReactiveNode.declare(Drivers.table, scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
 }
 export function row(builder, shiftCursorDown) {
     rowBreak(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
-export function Splitter(contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
-    return ReactiveNode.declare(Drivers.splitter, contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
+export function Splitter(scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
+    return ReactiveNode.declare(Drivers.splitter, scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
 }
 export function rowBreak(shiftCursorDown) {
     ReactiveNode.declare(Drivers.partition);
@@ -26,7 +31,7 @@ export function declareSplitter(index, splitViewNode) {
         key,
         mode: Mode.autonomous,
         preparation: el => el.native.className = `splitter ${key}`,
-        content: b => {
+        script: b => {
             const e = b.native;
             const model = b.model;
             const dataForSensor = e.dataForSensor;
@@ -75,14 +80,14 @@ export function declareSplitter(index, splitViewNode) {
 }
 export function cursor(areaParams) {
     ReactiveNode.declare(Drivers.cursor, {
-        content: el => {
+        script: el => {
             el.place = areaParams;
         },
     });
 }
 export function Note(content, formatted, declaration) {
     return ReactiveNode.declare(Drivers.note, ReactiveNode.withBasis(declaration, {
-        content: el => {
+        script: el => {
             if (formatted)
                 el.native.innerHTML = content;
             else
@@ -90,20 +95,20 @@ export function Note(content, formatted, declaration) {
         },
     }));
 }
-export function Group(contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
-    return ReactiveNode.declare(Drivers.group, contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
+export function Group(scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
+    return ReactiveNode.declare(Drivers.group, scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
 }
-export function Handling(content) {
-    return SyntheticElement({ mode: Mode.autonomous, content });
+export function Handling(script) {
+    return SyntheticElement({ mode: Mode.autonomous, script });
 }
-export function SyntheticElement(contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
-    return ReactiveNode.declare(Drivers.synthetic, contentOrDeclaration, contentAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
+export function SyntheticElement(scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis) {
+    return ReactiveNode.declare(Drivers.synthetic, scriptOrDeclaration, scriptAsync, key, mode, preparation, preparationAsync, finalization, triggers, basis);
 }
 export class PanelDriver extends HtmlDriver {
-    update(node) {
+    runScript(node) {
         rowBreak();
         const el = node.element;
-        const result = super.update(node);
+        const result = super.runScript(node);
         if (el.splitView !== undefined) {
             if (el.layoutInfo === undefined)
                 el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
@@ -123,7 +128,7 @@ export class PanelDriver extends HtmlDriver {
             });
             const relayoutEl = SyntheticElement({
                 mode: Mode.autonomous,
-                content: () => {
+                script: () => {
                     const native = el.native;
                     const isHorizontal = el.splitView === Direction.horizontal;
                     if (layoutInfo.isUpdateFinished) {
@@ -174,7 +179,7 @@ export class PanelDriver extends HtmlDriver {
         }
         return result;
     }
-    child(ownerNode, childDriver, childDeclaration, childBasis) {
+    declareChild(ownerNode, childDriver, childDeclaration, childBasis) {
         var _a;
         let result = undefined;
         const el = ownerNode.element;
@@ -190,7 +195,7 @@ export class PanelDriver extends HtmlDriver {
                     if (childDeclaration.triggers === undefined)
                         childDeclaration.triggers = {};
                     Object.defineProperty(childDeclaration.triggers, "index", { value: partCount });
-                    overrideMethod(childDeclaration, "content", el => {
+                    overrideMethod(childDeclaration, "script", el => {
                         if (isHorizontal)
                             el.style.gridColumn = `${partCount + 1}`;
                         else
@@ -221,13 +226,13 @@ function overrideMethod(declaration, method, func) {
         : (el, base) => { base(); func(el); };
 }
 export class PartitionDriver extends HtmlDriver {
-    update(node) {
-        const result = super.update(node);
+    runScript(node) {
+        const result = super.runScript(node);
         const ownerEl = node.owner.element;
         if (ownerEl.sealed !== undefined) {
             node.element.style.flexGrow = "1";
             ReactiveNode.declare(Drivers.wrapper, {
-                content: el => {
+                script: el => {
                     const ownerEl = el.node.owner.owner.element;
                     if (ownerEl.splitView !== undefined) {
                         el.style.display = "grid";

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

@@ -1,5 +1,5 @@
 import { MergeList, ReactiveNode } from "reactronic";
-import { ElImpl } from "./El.js";
+import { ElImpl } from "./ElDriver.js";
 export declare function equal(a: number, b: number): boolean;
 export declare function less(a: number, b: number): boolean;
 export declare function greater(a: number, b: number): boolean;

package/build/dist/source/{html/HtmlDriver.d.ts → core/WebDriver.d.ts}

@@ -1,11 +1,12 @@
 import { ReactiveNode, Handler } from "reactronic";
-import { El, ElDriver } from "./El.js";
+import { El } from "./El.js";
+import { ElDriver } from "./ElDriver.js";
 export declare class WebDriver<T extends Element, M = unknown> extends ElDriver<T, M> {
     setNativeElement(node: ReactiveNode<El<T, M>>): void;
-    prepare(node: ReactiveNode<El<T, M>>): void | Promise<void>;
-    finalize(node: ReactiveNode<El<T, M>>, isLeader: boolean): boolean;
-    mount(node: ReactiveNode<El<T, M>>): void;
-    update(node: ReactiveNode<El<T, M>>): void | Promise<void>;
+    runPreparation(node: ReactiveNode<El<T, M>>): void | Promise<void>;
+    runFinalization(node: ReactiveNode<El<T, M>>, isLeader: boolean): boolean;
+    runMount(node: ReactiveNode<El<T, M>>): void;
+    runScript(node: ReactiveNode<El<T, M>>): void | Promise<void>;
     static findBrotherlyHost<T, R>(node: ReactiveNode<El<T>>): ReactiveNode<El<R>> | undefined;
     static findBrotherlyPrevSibling<T, R>(node: ReactiveNode<El<T>>): ReactiveNode<El<R>> | undefined;
     static get blinkingEffectMarker(): string | undefined;

package/build/dist/source/{html/HtmlDriver.js → core/WebDriver.js}

@@ -1,19 +1,19 @@
 import { ReactiveSystem, ReactiveNode, proceedSyncOrAsync } from "reactronic";
-import { Constants, ElDriver, ElImpl } from "./El.js";
+import { Constants, ElDriver, ElImpl } from "./ElDriver.js";
 export class WebDriver extends ElDriver {
     setNativeElement(node) {
     }
-    prepare(node) {
+    runPreparation(node) {
         this.setNativeElement(node);
         const e = node.element.native;
         if (ReactiveSystem.isLogging && e !== undefined && !node.driver.isPartition)
             e.setAttribute(Constants.keyAttrName, node.key);
-        const result = super.prepare(node);
+        const result = super.runPreparation(node);
         if (e == undefined && ReactiveSystem.isLogging && !node.driver.isPartition)
             node.element.native.setAttribute(Constants.keyAttrName, node.key);
         return result;
     }
-    finalize(node, isLeader) {
+    runFinalization(node, isLeader) {
         var _a;
         const element = node.element;
         const native = element.native;
@@ -22,11 +22,11 @@ export class WebDriver extends ElDriver {
             if (isLeader)
                 native.remove();
         }
-        super.finalize(node, isLeader);
+        super.runFinalization(node, isLeader);
         element.native = null;
         return false;
     }
-    mount(node) {
+    runMount(node) {
         const element = node.element;
         const native = element.native;
         if (native) {
@@ -55,11 +55,11 @@ export class WebDriver extends ElDriver {
             }
         }
     }
-    update(node) {
+    runScript(node) {
         const element = node.element;
         if (element instanceof ElImpl)
             element.prepareForUpdate();
-        let result = super.update(node);
+        let result = super.runScript(node);
         result = proceedSyncOrAsync(result, v => {
             if (element.place === undefined) {
                 const oel = node.owner.element;

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

@@ -1 +1,8 @@
 export * from "./Restyler.js";
+export * from "./ElUtils.js";
+export * from "./El.js";
+export * from "./ElDriver.js";
+export * from "./WebDriver.js";
+export * from "./Sizes.js";
+export * from "./SplitViewMath.js";
+export * from "./Elements.js";

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

@@ -1 +1,8 @@
 export * from "./Restyler.js";
+export * from "./ElUtils.js";
+export * from "./El.js";
+export * from "./ElDriver.js";
+export * from "./WebDriver.js";
+export * from "./Sizes.js";
+export * from "./SplitViewMath.js";
+export * from "./Elements.js";

package/build/dist/source/express/Button.v.d.ts

@@ -0,0 +1,8 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { El } from "verstak";
+export type ButtonModel = {
+    icon?: string;
+    label?: string;
+    action?(): void;
+};
+export declare function Button(declaration?: ReactiveNodeDecl<El<HTMLElement, ButtonModel>>): ReactiveNode<El<HTMLElement, ButtonModel>>;

package/build/dist/source/express/Button.v.js

@@ -0,0 +1,39 @@
+import { Mode, ReactiveNode } from "reactronic";
+import { Panel, Note, OnClick } from "verstak";
+import { observableModel } from "./common/Utils.js";
+import { Theme } from "./Theme.js";
+import { Icon } from "./Icon.v.js";
+export function Button(declaration) {
+    return (Panel(ReactiveNode.withBasis(declaration, {
+        mode: Mode.autonomous,
+        preparation: el => {
+            var _a;
+            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({
+                icon: "fa-solid fa-square",
+                label: ReactiveNode.key,
+            }));
+        },
+        script: el => {
+            const m = el.model;
+            const theme = Theme.current.button;
+            el.useStylingPreset(theme.main);
+            if (m.icon) {
+                Icon(m.icon, {
+                    script: (el, base) => {
+                        base();
+                        el.useStylingPreset(theme.icon);
+                    },
+                });
+            }
+            if (m.label) {
+                Note(m.label, false, {
+                    script: (el, base) => {
+                        base();
+                        el.useStylingPreset(theme.label);
+                    },
+                });
+            }
+            OnClick(el.native, m.action);
+        },
+    })));
+}

package/build/dist/source/express/Field.v.d.ts

@@ -0,0 +1,16 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { FocusModel, El } from "verstak";
+import { ValuesOrRefs } from "./common/Utils.js";
+export type FieldModel<T = string> = FocusModel & {
+    icon?: string;
+    text: string;
+    options: Array<T>;
+    selected: T | undefined;
+    multiSelected: Set<T>;
+    position: number;
+    isMultiLineText: boolean;
+    isHotText: boolean;
+    inputStyle: string;
+};
+export declare function Field(declaration?: ReactiveNodeDecl<El<HTMLElement, FieldModel>>): ReactiveNode<El<HTMLElement, FieldModel<string>>>;
+export declare function composeFieldModel<T>(props?: Partial<ValuesOrRefs<FieldModel<T>>>): FieldModel<T>;