verstak 0.96.26035 → 0.96.26041

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

@@ -1,8 +1,12 @@
-import { ReactiveTreeNode, ReactiveTreeNodeDesc } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
 export type ButtonModel = {
     icon?: string;
     label?: string;
     action?(): void;
 };
-export declare function Button(description?: ReactiveTreeNodeDesc<El<HTMLElement, ButtonModel>>): ReactiveTreeNode<El<HTMLElement, ButtonModel>>;
+export declare function Button<D = unknown>(setup: Script<El<HTMLElement, ButtonModel, D>>): ReactiveTreeNode<El<HTMLElement, ButtonModel, D>>;
+export declare function Button<D = unknown>(key: string, setup: Script<El<HTMLElement, ButtonModel, D>>): ReactiveTreeNode<El<HTMLElement, ButtonModel, D>>;
+export declare function Button<D = unknown>(mode: Mode, setup: Script<El<HTMLElement, ButtonModel, D>>): ReactiveTreeNode<El<HTMLElement, ButtonModel, D>>;
+export declare function Button<D = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, ButtonModel, D>>): ReactiveTreeNode<El<HTMLElement, ButtonModel, D>>;
+export declare function Button<D = unknown>(key?: string, mode?: Mode, setup?: Script<El<HTMLElement, ButtonModel, D>>, setupTask?: ScriptAsync<El<HTMLElement, ButtonModel, D>>, creation?: Script<El<HTMLElement, ButtonModel, D>>, creationTask?: ScriptAsync<El<HTMLElement, ButtonModel, D>>, mounting?: Script<El<HTMLElement, ButtonModel, D>>, destruction?: Script<El<HTMLElement, ButtonModel, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, ButtonModel, D>>): ReactiveTreeNode<El<HTMLElement, ButtonModel, D>>;

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

@@ -1,24 +1,25 @@
-import { ReactiveTreeNode, setBasis } from "reactronic";
+import { ReactiveTreeNode, args2desc, setBasis } from "reactronic";
 import { Element, OnClick } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
-export function Button(description) {
+export function Button(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
     return (Element(setBasis(description, {
-        preparation() {
+        creation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({
                 icon: "fa-solid fa-square",
                 label: ReactiveTreeNode.current.key,
             }));
         },
-        body() {
+        setup() {
             const m = this.model;
             const theme = Theme.current.button;
             this.useStylingPreset(theme.main);
             if (m.icon) {
                 Icon(m.icon, {
-                    body(el, base) {
+                    setup(el, base) {
                         base();
                         this.useStylingPreset(theme.icon);
                     },
@@ -26,7 +27,7 @@ export function Button(description) {
             }
             if (m.label) {
                 Element({
-                    body(el, base) {
+                    setup(el, base) {
                         base();
                         this.textIsFormatted = false;
                         this.text = m.label;

package/build/dist/source/components/Icon.v.d.ts

@@ -1,3 +1,7 @@
-import { ReactiveTreeNodeDesc } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
-export declare function Icon(name: string, description?: ReactiveTreeNodeDesc<El<HTMLElement, void>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, void>>;
+export declare function Icon<D = unknown>(name: string, setup: Script<El<HTMLElement, void, D>>): ReactiveTreeNode<El<HTMLElement, void, D>>;
+export declare function Icon<D = unknown>(name: string, key: string, setup: Script<El<HTMLElement, void, D>>): ReactiveTreeNode<El<HTMLElement, void, D>>;
+export declare function Icon<D = unknown>(name: string, mode: Mode, setup: Script<El<HTMLElement, void, D>>): ReactiveTreeNode<El<HTMLElement, void, D>>;
+export declare function Icon<D = unknown>(name: string, description: ReactiveTreeNodeDesc<El<HTMLElement, void, D>>): ReactiveTreeNode<El<HTMLElement, void, D>>;
+export declare function Icon<D = unknown>(name: string, key?: string, mode?: Mode, setup?: Script<El<HTMLElement, void, D>>, setupTask?: ScriptAsync<El<HTMLElement, void, D>>, creation?: Script<El<HTMLElement, void, D>>, creationTask?: ScriptAsync<El<HTMLElement, void, D>>, mounting?: Script<El<HTMLElement, void, D>>, destruction?: Script<El<HTMLElement, void, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, void, D>>): ReactiveTreeNode<El<HTMLElement, void, D>>;

package/build/dist/source/components/Icon.v.js

@@ -1,10 +1,11 @@
-import { setBasis } from "reactronic";
+import { args2desc, setBasis } from "reactronic";
 import { Element } from "verstak";
 import { Theme } from "./Theme.js";
-export function Icon(name, description) {
+export function Icon(name, setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
     return (Element(setBasis(description, {
         signalArgs: { name },
-        body() {
+        setup() {
             const theme = Theme.current.icon;
             this.useStylingPreset(name);
             this.useStylingPreset(theme.main);

package/build/dist/source/components/Image.v.d.ts

@@ -1,6 +1,10 @@
-import { ReactiveTreeNodeDesc } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
 export type ImageModel = {
     source?: string;
 };
-export declare function Image(description?: ReactiveTreeNodeDesc<El<HTMLElement, ImageModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, ImageModel>>;
+export declare function Image<D = unknown>(setup: Script<El<HTMLElement, ImageModel, D>>): ReactiveTreeNode<El<HTMLElement, ImageModel, D>>;
+export declare function Image<D = unknown>(key: string, setup: Script<El<HTMLElement, ImageModel, D>>): ReactiveTreeNode<El<HTMLElement, ImageModel, D>>;
+export declare function Image<D = unknown>(mode: Mode, setup: Script<El<HTMLElement, ImageModel, D>>): ReactiveTreeNode<El<HTMLElement, ImageModel, D>>;
+export declare function Image<D = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, ImageModel, D>>): ReactiveTreeNode<El<HTMLElement, ImageModel, D>>;
+export declare function Image<D = unknown>(key?: string, mode?: Mode, setup?: Script<El<HTMLElement, ImageModel, D>>, setupTask?: ScriptAsync<El<HTMLElement, ImageModel, D>>, creation?: Script<El<HTMLElement, ImageModel, D>>, creationTask?: ScriptAsync<El<HTMLElement, ImageModel, D>>, mounting?: Script<El<HTMLElement, ImageModel, D>>, destruction?: Script<El<HTMLElement, ImageModel, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, ImageModel, D>>): ReactiveTreeNode<El<HTMLElement, ImageModel, D>>;

package/build/dist/source/components/Image.v.js

@@ -1,13 +1,14 @@
-import { setBasis } from "reactronic";
+import { args2desc, setBasis } from "reactronic";
 import { Element } from "verstak";
 import { rxModel } from "./common/Utils.js";
-export function Image(description) {
+export function Image(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
     return (Element(setBasis(description, {
-        preparation() {
+        creation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({ source: undefined }));
         },
-        body() {
+        setup() {
             const m = this.model;
             this.style.backgroundImage = `url(${m.source})`;
             this.style.backgroundSize = "contain";

package/build/dist/source/components/Input.v.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveTreeNodeDesc } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { FocusModel, El } from "verstak";
 import { ValuesOrRefs } from "./common/Utils.js";
 export type InputModel<T = string> = FocusModel & {
@@ -12,5 +12,9 @@ export type InputModel<T = string> = FocusModel & {
     isHotText: boolean;
     inputStyle: string;
 };
-export declare function Input(description?: ReactiveTreeNodeDesc<El<HTMLElement, InputModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, InputModel<string>>>;
+export declare function Input<D = unknown>(setup: Script<El<HTMLElement, InputModel, D>>): ReactiveTreeNode<El<HTMLElement, InputModel, D>>;
+export declare function Input<D = unknown>(key: string, setup: Script<El<HTMLElement, InputModel, D>>): ReactiveTreeNode<El<HTMLElement, InputModel, D>>;
+export declare function Input<D = unknown>(mode: Mode, setup: Script<El<HTMLElement, InputModel, D>>): ReactiveTreeNode<El<HTMLElement, InputModel, D>>;
+export declare function Input<D = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, InputModel, D>>): ReactiveTreeNode<El<HTMLElement, InputModel, D>>;
+export declare function Input<D = unknown>(key?: string, mode?: Mode, setup?: Script<El<HTMLElement, InputModel, D>>, setupTask?: ScriptAsync<El<HTMLElement, InputModel, D>>, creation?: Script<El<HTMLElement, InputModel, D>>, creationTask?: ScriptAsync<El<HTMLElement, InputModel, D>>, mounting?: Script<El<HTMLElement, InputModel, D>>, destruction?: Script<El<HTMLElement, InputModel, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, InputModel, D>>): ReactiveTreeNode<El<HTMLElement, InputModel, D>>;
 export declare function composeInputModel<T>(props?: Partial<ValuesOrRefs<InputModel<T>>>): InputModel<T>;

package/build/dist/source/components/Input.v.js

@@ -1,22 +1,23 @@
-import { Mode, setBasis } from "reactronic";
+import { Mode, args2desc, setBasis } from "reactronic";
 import { Element, OnFocus, rowBreak, Fragment, KeyboardModifiers, H, V } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
-export function Input(description) {
+export function Input(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
     return (Element(setBasis(description, {
-        preparation() {
+        creation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeInputModel());
             this.native.dataForSensor.focus = this.model;
         },
-        body() {
+        setup() {
             const m = this.model;
             const theme = Theme.current.input;
             this.useStylingPreset(theme.main);
             if (m.icon)
                 Icon(m.icon, {
-                    body(el, base) {
+                    setup(el, base) {
                         base();
                         this.useStylingPreset(theme.icon);
                     },
@@ -45,7 +46,7 @@ function InputField(model, styling) {
     return (Element({
         key: InputField.name,
         mode: Mode.primitive,
-        preparation(el, base) {
+        creation(el, base) {
             const e = this.native;
             this.useStylingPreset(styling.field);
             this.selfAlignmentHorizontal = H.stretch;
@@ -55,7 +56,7 @@ function InputField(model, styling) {
             e.dataForSensor.focus = model;
             base();
         },
-        body() {
+        setup() {
             const e = this.native;
             if (!model.isEditMode)
                 this.text = model.text;
@@ -82,7 +83,7 @@ function InputPopup(model, styling) {
     return (Element({
         key: InputPopup.name,
         mode: Mode.primitive,
-        body() {
+        setup() {
             this.useStylingPreset(styling.popup);
             Fragment(() => model.position = this.native.sensors.scroll.y);
             const visible = this.overlayVisible = model.isEditMode;
@@ -94,7 +95,7 @@ function InputPopup(model, styling) {
                         Element({
                             key: x,
                             mode: Mode.primitive,
-                            preparation() {
+                            creation() {
                                 this.text = x;
                                 this.contentWrapping = false;
                             },
@@ -105,7 +106,7 @@ function InputPopup(model, styling) {
                     Element({
                         key: "(nothing)",
                         mode: Mode.primitive,
-                        body() {
+                        setup() {
                             this.text = "(nothing)";
                         },
                     });

package/build/dist/source/components/Markdown.v.d.ts

@@ -1 +1,7 @@
-export declare function Markdown(content: string): import("reactronic").ReactiveTreeNode<import("verstak").El<HTMLElement, unknown>>;
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
+import { El } from "verstak";
+export declare function Markdown<D = unknown>(content: string, setup: Script<El<HTMLElement, any, D>>): ReactiveTreeNode<El<HTMLElement, any, D>>;
+export declare function Markdown<D = unknown>(content: string, key: string, setup: Script<El<HTMLElement, any, D>>): ReactiveTreeNode<El<HTMLElement, any, D>>;
+export declare function Markdown<D = unknown>(content: string, mode: Mode, setup: Script<El<HTMLElement, any, D>>): ReactiveTreeNode<El<HTMLElement, any, D>>;
+export declare function Markdown<D = unknown>(content: string, description: ReactiveTreeNodeDesc<El<HTMLElement, any, D>>): ReactiveTreeNode<El<HTMLElement, any, D>>;
+export declare function Markdown<D = unknown>(content: string, key?: string, mode?: Mode, setup?: Script<El<HTMLElement, any, D>>, setupTask?: ScriptAsync<El<HTMLElement, any, D>>, creation?: Script<El<HTMLElement, any, D>>, creationTask?: ScriptAsync<El<HTMLElement, any, D>>, mounting?: Script<El<HTMLElement, any, D>>, destruction?: Script<El<HTMLElement, any, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, any, D>>): ReactiveTreeNode<El<HTMLElement, any, D>>;

package/build/dist/source/components/Markdown.v.js

@@ -1,17 +1,19 @@
+import { args2desc, setBasis } from "reactronic";
 import Md from "markdown-it";
 import * as prism from "prismjs";
 import { Element } from "verstak";
-export function Markdown(content) {
-    return (Element({
-        preparation(el, base) {
+export function Markdown(content, setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
+    return (Element(setBasis(description, {
+        creation(el, base) {
             this.contentWrapping = true;
             base();
         },
-        body() {
+        setup() {
             this.textIsFormatted = true;
             this.text = md.render(content);
         },
-    }));
+    })));
 }
 const md = new Md({
     html: true,

package/build/dist/source/components/Spinner.v.d.ts

@@ -1,9 +1,13 @@
-import { ReactiveTreeNodeDesc } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
 import { ValuesOrRefs } from "./common/Utils.js";
 export type SpinnerModel = {
     active: boolean;
     color: string;
 };
-export declare function Spinner(description?: ReactiveTreeNodeDesc<El<HTMLElement, SpinnerModel>>): import("reactronic").ReactiveTreeNode<El<HTMLElement, SpinnerModel>>;
+export declare function Spinner<D = unknown>(setup: Script<El<HTMLElement, SpinnerModel, D>>): ReactiveTreeNode<El<HTMLElement, SpinnerModel, D>>;
+export declare function Spinner<D = unknown>(key: string, setup: Script<El<HTMLElement, SpinnerModel, D>>): ReactiveTreeNode<El<HTMLElement, SpinnerModel, D>>;
+export declare function Spinner<D = unknown>(mode: Mode, setup: Script<El<HTMLElement, SpinnerModel, D>>): ReactiveTreeNode<El<HTMLElement, SpinnerModel, D>>;
+export declare function Spinner<D = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, SpinnerModel, D>>): ReactiveTreeNode<El<HTMLElement, SpinnerModel, D>>;
+export declare function Spinner<D = unknown>(key?: string, mode?: Mode, setup?: Script<El<HTMLElement, SpinnerModel, D>>, setupTask?: ScriptAsync<El<HTMLElement, SpinnerModel, D>>, creation?: Script<El<HTMLElement, SpinnerModel, D>>, creationTask?: ScriptAsync<El<HTMLElement, SpinnerModel, D>>, mounting?: Script<El<HTMLElement, SpinnerModel, D>>, destruction?: Script<El<HTMLElement, SpinnerModel, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, SpinnerModel, D>>): ReactiveTreeNode<El<HTMLElement, SpinnerModel, D>>;
 export declare function composeSpinnerModel<T>(props?: Partial<ValuesOrRefs<SpinnerModel>>): SpinnerModel;

package/build/dist/source/components/Spinner.v.js

@@ -1,18 +1,19 @@
-import { Mode, setBasis } from "reactronic";
+import { Mode, args2desc, setBasis } from "reactronic";
 import { Element } from "verstak";
 import { rxModel } from "./common/Utils.js";
-export function Spinner(description) {
+export function Spinner(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
     return (Element(setBasis(description, {
-        preparation() {
+        creation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeSpinnerModel());
         },
-        body() {
+        setup() {
             const m = this.model;
             if (m.active)
                 Element({
                     mode: Mode.primitive,
-                    body() {
+                    setup() {
                         this.text = "loading...";
                     },
                 });

package/build/dist/source/components/Toggle.v.d.ts

@@ -1,8 +1,12 @@
-import { ReactiveTreeNode, ReactiveTreeNodeDesc } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
 export type ToggleModel = {
     label?: string;
     checked?: boolean;
     color?: string;
 };
-export declare function Toggle(description?: ReactiveTreeNodeDesc<El<HTMLElement, ToggleModel>>): ReactiveTreeNode<El<HTMLElement, ToggleModel>>;
+export declare function Toggle<D = unknown>(setup: Script<El<HTMLElement, ToggleModel, D>>): ReactiveTreeNode<El<HTMLElement, ToggleModel, D>>;
+export declare function Toggle<D = unknown>(key: string, setup: Script<El<HTMLElement, ToggleModel, D>>): ReactiveTreeNode<El<HTMLElement, ToggleModel, D>>;
+export declare function Toggle<D = unknown>(mode: Mode, setup: Script<El<HTMLElement, ToggleModel, D>>): ReactiveTreeNode<El<HTMLElement, ToggleModel, D>>;
+export declare function Toggle<D = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, ToggleModel, D>>): ReactiveTreeNode<El<HTMLElement, ToggleModel, D>>;
+export declare function Toggle<D = unknown>(key?: string, mode?: Mode, setup?: Script<El<HTMLElement, ToggleModel, D>>, setupTask?: ScriptAsync<El<HTMLElement, ToggleModel, D>>, creation?: Script<El<HTMLElement, ToggleModel, D>>, creationTask?: ScriptAsync<El<HTMLElement, ToggleModel, D>>, mounting?: Script<El<HTMLElement, ToggleModel, D>>, destruction?: Script<El<HTMLElement, ToggleModel, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, ToggleModel, D>>): ReactiveTreeNode<El<HTMLElement, ToggleModel, D>>;

package/build/dist/source/components/Toggle.v.js

@@ -1,11 +1,12 @@
-import { ReactiveTreeNode, Mode, setBasis } from "reactronic";
+import { ReactiveTreeNode, Mode, args2desc, setBasis } from "reactronic";
 import { Element, OnClick } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
-export function Toggle(description) {
+export function Toggle(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
+    const description = args2desc(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
     return (Element(setBasis(description, {
-        preparation() {
+        creation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({
                 label: ReactiveTreeNode.current.key,
@@ -13,13 +14,13 @@ export function Toggle(description) {
                 color: "green"
             }));
         },
-        body() {
+        setup() {
             const m = this.model;
             const theme = Theme.current;
             const toggleTheme = theme.toggle;
             this.useStylingPreset(toggleTheme.main);
             Icon(`fa-solid fa-toggle-${m.checked ? "on" : "off"}`, {
-                body(el, base) {
+                setup(el, base) {
                     var _a;
                     base();
                     this.useStylingPreset(toggleTheme.icon);
@@ -29,7 +30,7 @@ export function Toggle(description) {
             if (m.label) {
                 Element({
                     mode: Mode.primitive,
-                    body(el, base) {
+                    setup(el, base) {
                         base();
                         this.text = m.label;
                         this.useStylingPreset(toggleTheme.label);

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

@@ -1,9 +1,10 @@
 import { Handler, ReactiveTreeNode } from "reactronic";
-export type El<T = any, M = any> = {
-    readonly node: ReactiveTreeNode<El<T, M>>;
+export type El<T = any, M = any, D = any> = {
+    readonly node: ReactiveTreeNode<El<T, M, D>>;
     readonly rank: number;
     native: T;
     model: M;
+    data: D;
     kind: ElKind;
     place: ElPlace;
     width: Range;
@@ -33,7 +34,7 @@ export type El<T = any, M = any> = {
     };
     partitionSizeInSplitViewPx: number;
     readonly style: CSSStyleDeclaration;
-    action: Handler<El<T, M>, void> | undefined;
+    action: Handler<El<T, M, D>, void> | undefined;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
 };
 export declare enum ElKind {

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

@@ -1,15 +1,16 @@
 import { ReactiveTreeNode, Handler, BaseDriver } from "reactronic";
 import { El, ElKind, H, V, Range, ElPlace, Direction } from "./El.js";
-export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
-    create(node: ReactiveTreeNode<El<T, M>>): El<T, M>;
+export declare class ElDriver<T extends Element, M = unknown, D = unknown> extends BaseDriver<El<T, M, D>> {
+    create(node: ReactiveTreeNode<El<T, M, D>>): El<T, M, D>;
 }
-export declare class ElImpl<T extends Element = any, M = any> implements El<T, M> {
-    readonly node: ReactiveTreeNode<El<T, M>>;
+export declare class ElImpl<T extends Element = any, M = any, D = any> implements El<T, M, D> {
+    readonly node: ReactiveTreeNode<El<T, M, D>>;
     maxColumnCount: number;
     maxRowCount: number;
     layoutInfo?: ElLayoutInfo;
     native: T;
     model: M;
+    data: D;
     private _kind;
     private _place;
     private _coords;
@@ -31,7 +32,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _sealed;
     private _splitView;
     private _hasStylingPresets;
-    constructor(node: ReactiveTreeNode<El<T, M>>);
+    constructor(node: ReactiveTreeNode<El<T, M, D>>);
     prepareForUpdate(): void;
     get rank(): number;
     get isElement(): boolean;
@@ -93,8 +94,8 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     set splitView(value: Direction | undefined);
     get partitionSizeInSplitViewPx(): number;
     get style(): CSSStyleDeclaration;
-    get action(): Handler<El<T, M>, void> | undefined;
-    set action(value: Handler<El<T, M>, void> | undefined);
+    get action(): Handler<El<T, M, D>, void> | undefined;
+    set action(value: Handler<El<T, M, D>, void> | undefined);
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
     protected children(onlyAfter?: ElImpl): Generator<ElImpl>;
     static childrenOf(node: ReactiveTreeNode<El>, onlyAfter?: El): Generator<ElImpl>;

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

@@ -23,6 +23,7 @@ export class ElImpl {
         this.layoutInfo = undefined;
         this.native = undefined;
         this.model = undefined;
+        this.data = undefined;
         this._kind = ElKind.partition;
         this._place = undefined;
         this._coords = UndefinedElCoords;

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

@@ -1,12 +1,12 @@
 import { ReactiveTreeNode, Handler } from "reactronic";
 import { El } from "./El.js";
 import { ElDriver } from "./ElDriver.js";
-export declare class WebDriver<T extends Element, M = unknown> extends ElDriver<T, M> {
-    assignNativeElement(node: ReactiveTreeNode<El<T, M>>): void;
-    runPreparation(node: ReactiveTreeNode<El<T, M>>): void | Promise<void>;
-    runFinalization(node: ReactiveTreeNode<El<T, M>>, isLeader: boolean): boolean;
-    runMount(node: ReactiveTreeNode<El<T, M>>): void;
-    rebuildBody(node: ReactiveTreeNode<El<T, M>>): void | Promise<void>;
+export declare class WebDriver<T extends Element, M = unknown, D = unknown> extends ElDriver<T, M, D> {
+    assignNativeElement(node: ReactiveTreeNode<El<T, M, D>>): void;
+    runCreation(node: ReactiveTreeNode<El<T, M, D>>): void | Promise<void>;
+    runDestruction(node: ReactiveTreeNode<El<T, M, D>>, isLeader: boolean): boolean;
+    runMount(node: ReactiveTreeNode<El<T, M, D>>): void;
+    runSetup(node: ReactiveTreeNode<El<T, M, D>>): void | Promise<void>;
     private assignExtraAttributesAndProperties;
     private clearExtraAttributesAndProperties;
     static getOwnNodeOfNativeElement<T extends Element>(element: T): ReactiveTreeNode<El<T>> | undefined;
@@ -20,9 +20,9 @@ export declare class StaticDriver<T extends HTMLElement> extends WebDriver<T> {
     constructor(native: T, id: string, isPartition: boolean, initialize?: Handler<El<T>>);
     assignNativeElement(node: ReactiveTreeNode<El<T>>): void;
 }
-export declare class HtmlDriver<T extends HTMLElement, M = any> extends WebDriver<T, M> {
-    assignNativeElement(node: ReactiveTreeNode<El<T, M>>): void;
+export declare class HtmlDriver<T extends HTMLElement, M = any, D = any> extends WebDriver<T, M, D> {
+    assignNativeElement(node: ReactiveTreeNode<El<T, M, D>>): void;
 }
-export declare class SvgDriver<T extends SVGElement, M = any> extends WebDriver<T, M> {
-    assignNativeElement(node: ReactiveTreeNode<El<T, M>>): void;
+export declare class SvgDriver<T extends SVGElement, M = any, D = any> extends WebDriver<T, M, D> {
+    assignNativeElement(node: ReactiveTreeNode<El<T, M, D>>): void;
 }

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

@@ -3,18 +3,18 @@ import { Constants, ElDriver, ElImpl } from "./ElDriver.js";
 export class WebDriver extends ElDriver {
     assignNativeElement(node) {
     }
-    runPreparation(node) {
+    runCreation(node) {
         this.assignNativeElement(node);
         const native = node.element.native;
         const isPartition = node.driver.isPartition;
         if (native !== undefined && !isPartition)
             this.assignExtraAttributesAndProperties(node);
-        const result = super.runPreparation(node);
+        const result = super.runCreation(node);
         if (native == undefined && node.element.native !== undefined && !isPartition)
             this.assignExtraAttributesAndProperties(node);
         return result;
     }
-    runFinalization(node, isLeader) {
+    runDestruction(node, isLeader) {
         var _a;
         const el = node.element;
         const native = el.native;
@@ -24,7 +24,7 @@ export class WebDriver extends ElDriver {
             if (isLeader)
                 native.remove();
         }
-        super.runFinalization(node, isLeader);
+        super.runDestruction(node, isLeader);
         el.native = null;
         return false;
     }
@@ -57,11 +57,11 @@ export class WebDriver extends ElDriver {
             }
         }
     }
-    rebuildBody(node) {
+    runSetup(node) {
         const el = node.element;
         if (el instanceof ElImpl)
             el.prepareForUpdate();
-        let result = super.rebuildBody(node);
+        let result = super.runSetup(node);
         result = proceedSyncOrAsync(result, v => {
             if (el.place === undefined) {
                 const oel = node.owner.element;
@@ -69,7 +69,7 @@ export class WebDriver extends ElDriver {
                     el.place = undefined;
             }
             if (gBlinkingEffect)
-                blink(el.native, ReactiveTreeNode.currentBodyPriority, node.stamp);
+                blink(el.native, ReactiveTreeNode.currentNodePriority, node.stamp);
         }, e => {
         });
         return result;

package/build/dist/source/core/elements/ApplicationWindow.d.ts

@@ -1,11 +1,11 @@
 import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "../El.js";
 import { ElementDriver } from "./Element.js";
-export declare function ApplicationWindow(body: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
-export declare function ApplicationWindow(key: string, body: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
-export declare function ApplicationWindow(mode: Mode, body: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(setup: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(key: string, setup: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(mode: Mode, setup: Script<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
 export declare function ApplicationWindow(description: ReactiveTreeNodeDesc<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
-export declare function ApplicationWindow(key?: string, mode?: Mode, body?: Script<El<HTMLElement>>, bodyTask?: ScriptAsync<El<HTMLElement>>, preparation?: Script<El<HTMLElement>>, preparationTask?: ScriptAsync<El<HTMLElement>>, mounting?: Script<El<HTMLElement>>, finalization?: Script<El<HTMLElement>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
+export declare function ApplicationWindow(key?: string, mode?: Mode, setup?: Script<El<HTMLElement>>, setupTask?: ScriptAsync<El<HTMLElement>>, creation?: Script<El<HTMLElement>>, creationTask?: ScriptAsync<El<HTMLElement>>, mounting?: Script<El<HTMLElement>>, destruction?: Script<El<HTMLElement>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement>>): ReactiveTreeNode<El<HTMLElement>>;
 export declare class ApplicationWindowDriver<T extends HTMLElement> extends ElementDriver<T> {
     readonly native: T;
     constructor(native: T);

package/build/dist/source/core/elements/ApplicationWindow.js

@@ -1,13 +1,13 @@
 import { describe } from "reactronic";
 import { ElementDriver } from "./Element.js";
 import { acquireVerstakStyleSheet } from "./v5k.js";
-export function ApplicationWindow(bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis) {
+export function ApplicationWindow(setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis) {
     acquireVerstakStyleSheet();
     const page = (document !== null && document !== void 0 ? document : global.document).body;
     const driver = new ApplicationWindowDriver(page);
     page.classList.add("v5k-app");
     page.classList.add("v5k-element");
-    return describe(driver, bodyOrKeyOrModeDescription, bodyOrMode, body, bodyTask, preparation, preparationTask, mounting, finalization, signalArgs, unmounted, basis);
+    return describe(ApplicationWindow.name, driver, setupOrKeyOrModeDescription, setupOrMode, setup, setupTask, creation, creationTask, mounting, destruction, signalArgs, unmounted, basis);
 }
 export class ApplicationWindowDriver extends ElementDriver {
     constructor(native) {

package/build/dist/source/core/elements/Cursor.js

@@ -2,8 +2,8 @@ import { describe } from "reactronic";
 import { ElKind } from "../El.js";
 import { ElDriver } from "../ElDriver.js";
 export function cursor(place) {
-    describe(CursorCommandDriver.glob, {
-        body() {
+    describe(cursor.name, CursorCommandDriver.glob, {
+        setup() {
             this.place = place;
         },
     });

package/build/dist/source/core/elements/Element.d.ts

@@ -1,15 +1,15 @@
 import { ReactiveTreeNode, ReactiveTreeNodeDesc, ReactiveTreeNodeDriver, LinkedItem, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "../El.js";
 import { HtmlDriver } from "../WebDriver.js";
-export declare function Element<M = unknown>(body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
-export declare function Element<M = unknown>(key: string, body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
-export declare function Element<M = unknown>(mode: Mode, body: Script<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
-export declare function Element<M = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
-export declare function Element<M = unknown>(key?: string, mode?: Mode, body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Element<M = unknown, D = unknown>(setup: Script<El<HTMLElement, M, D>>): ReactiveTreeNode<El<HTMLElement, M, D>>;
+export declare function Element<M = unknown, D = unknown>(key: string, setup: Script<El<HTMLElement, M, D>>): ReactiveTreeNode<El<HTMLElement, M, D>>;
+export declare function Element<M = unknown, D = unknown>(mode: Mode, setup: Script<El<HTMLElement, M, D>>): ReactiveTreeNode<El<HTMLElement, M, D>>;
+export declare function Element<M = unknown, D = unknown>(description: ReactiveTreeNodeDesc<El<HTMLElement, M, D>>): ReactiveTreeNode<El<HTMLElement, M, D>>;
+export declare function Element<M = unknown, D = unknown>(key?: string, mode?: Mode, setup?: Script<El<HTMLElement, M, D>>, setupTask?: ScriptAsync<El<HTMLElement, M, D>>, creation?: Script<El<HTMLElement, M, D>>, creationTask?: ScriptAsync<El<HTMLElement, M, D>>, mounting?: Script<El<HTMLElement, M, D>>, destruction?: Script<El<HTMLElement, M, D>>, signalArgs?: unknown, unmounted?: boolean, basis?: ReactiveTreeNodeDesc<El<HTMLElement, M, D>>): ReactiveTreeNode<El<HTMLElement, M, D>>;
 export declare class ElementDriver<T extends HTMLElement> extends HtmlDriver<T> {
     static readonly id: string;
     static readonly glob: ElementDriver<HTMLElement>;
     constructor();
-    rebuildBody(node: ReactiveTreeNode<El<T>>): void | Promise<void>;
+    runSetup(node: ReactiveTreeNode<El<T>>): void | Promise<void>;
     describeChild(ownerNode: ReactiveTreeNode<El<T, any>>, childDriver: ReactiveTreeNodeDriver<any>, childDescription?: ReactiveTreeNodeDesc<any> | undefined, childBasis?: ReactiveTreeNodeDesc<any> | undefined): LinkedItem<ReactiveTreeNode> | undefined;
 }