verstak 0.96.26031 → 0.96.26040

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

@@ -1,8 +1,12 @@
-import { ReactiveTreeNode, ReactiveTreeNodeDecl } 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(declaration?: ReactiveTreeNodeDecl<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(declaration) {
-    return (Element(setBasis(declaration, {
-        preparation() {
+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, {
+        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(declaration) {
             }
             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 { ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
-export declare function Icon(name: string, declaration?: ReactiveTreeNodeDecl<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, declaration) {
-    return (Element(setBasis(declaration, {
+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 { ReactiveTreeNodeDecl } from "reactronic";
+import { ReactiveTreeNode, ReactiveTreeNodeDesc, Script, Mode, ScriptAsync } from "reactronic";
 import { El } from "verstak";
 export type ImageModel = {
     source?: string;
 };
-export declare function Image(declaration?: ReactiveTreeNodeDecl<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(declaration) {
-    return (Element(setBasis(declaration, {
-        preparation() {
+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, {
+        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 { ReactiveTreeNodeDecl } 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(declaration?: ReactiveTreeNodeDecl<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(declaration) {
-    return (Element(setBasis(declaration, {
-        preparation() {
+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, {
+        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 { ReactiveTreeNodeDecl } 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(declaration?: ReactiveTreeNodeDecl<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(declaration) {
-    return (Element(setBasis(declaration, {
-        preparation() {
+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, {
+        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, ReactiveTreeNodeDecl } 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(declaration?: ReactiveTreeNodeDecl<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(declaration) {
-    return (Element(setBasis(declaration, {
-        preparation() {
+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, {
+        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(declaration) {
                 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(declaration) {
             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>;
@@ -144,21 +145,7 @@ declare enum ElLayoutInfoFlags {
     childrenRelayoutIsNeeded = 8
 }
 export declare const InitialElLayoutInfo: ElLayoutInfo;
-export declare class CursorCommand {
-    absolute?: string;
-    columnShift?: number;
-    rowShift?: number;
-}
-export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
-    constructor();
-}
 export declare const Constants: {
-    element: string;
-    partition: string;
-    wrapper: string;
-    splitter: string;
-    group: string;
-    layouts: string[];
     keyAttrName: string;
     kindAttrName: string;
     ownReactiveTreeNodeKey: symbol;

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;
@@ -72,7 +73,7 @@ export class ElImpl {
             const prevEl = (_a = node.prev) === null || _a === void 0 ? void 0 : _a.element;
             const prevElLayoutInfo = (_b = prevEl === null || prevEl === void 0 ? void 0 : prevEl.layoutInfo) !== null && _b !== void 0 ? _b : InitialElLayoutInfo;
             const layoutInfo = this.layoutInfo = owner.children.isStrictOrder ? new ElLayoutInfo(prevElLayoutInfo) : undefined;
-            const isCursorElement = driver instanceof CursorCommandDriver;
+            const isCursorElement = this.kind === ElKind.cursor;
             const coords = getElCoordsAndAdjustLayoutInfo(!isCursorElement, value, ownerEl.maxColumnCount, ownerEl.maxRowCount, prevElLayoutInfo, layoutInfo);
             if (!equalElCoords(coords, this._coords)) {
                 if (this.native !== undefined)
@@ -352,6 +353,7 @@ export class ElImpl {
             el.classList.add(StylingClassNameByAlignmentVerticalRowWise[value]);
     }
     static applySelfAlignmentHorizontal(element, existing, value) {
+        var _a;
         const e = element.native;
         if (existing !== undefined) {
             e.classList.remove(StylingClassNameBySelfAlignmentHorizontal[existing]);
@@ -360,7 +362,7 @@ export class ElImpl {
         }
         if (value !== undefined) {
             e.classList.add(StylingClassNameBySelfAlignmentHorizontal[value]);
-            const grow = element.selfStretchingStrengthHorizontal;
+            const grow = (_a = element.selfStretchingStrengthHorizontal) !== null && _a !== void 0 ? _a : 1;
             if ((value === H.stretch || value === H.stretchAndFix) && grow !== undefined && grow !== 1)
                 element.style.flexGrow = `${grow}`;
             else
@@ -669,20 +671,7 @@ function absolutizePosition(pos, cursor, max) {
         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 const Constants = {
-    element: "el",
-    partition: "part",
-    wrapper: "wrapper",
-    splitter: "splitter",
-    group: "group",
-    layouts: ["element", "table", "group", "", "", ""],
     keyAttrName: "key",
     kindAttrName: "kind",
     ownReactiveTreeNodeKey: Symbol("own-reactive-tree-node"),

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

@@ -1,5 +1,5 @@
 import { DataForSensor } from "../core/sensors/DataForSensor.js";
-import { HtmlSensors } from "../core/sensors/HtmlSensors.js";
+import { HtmlSensors } from "../core/sensors/api.js";
 declare global {
     interface Element {
         sensors: HtmlSensors;

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

@@ -1,5 +1,5 @@
 import { SymDataForSensor, SymHtmlSensors, SymResizeObserver } from "../core/sensors/DataForSensor.js";
-import { HtmlSensors } from "../core/sensors/HtmlSensors.js";
+import { HtmlSensors } from "../core/sensors/api.js";
 const ElementType = Element !== null && Element !== void 0 ? Element : global.Element;
 if (ElementType !== undefined) {
     Object.defineProperty(ElementType.prototype, "sensors", {

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

@@ -1,6 +1,7 @@
 import { Direction } from "./El.js";
 import { clamp } from "./ElUtils.js";
-import { Drivers, isSplitViewPartition } from "./Elements.js";
+import { isSplitViewPartition } from "./elements/Splitter.js";
+import { SplitterDriver } from "./elements/Splitter.js";
 const DEBUG = false;
 const eps = 0.0001;
 export function equal(a, b) {
@@ -133,7 +134,7 @@ export function layout(splitViewNode) {
                 }
             }
         }
-        else if (child.driver === Drivers.splitter) {
+        else if (child.driver instanceof SplitterDriver) {
             const el = child.element;
             if (el.native !== undefined) {
                 el.style.display = isSplitterEnabled ? "block" : "none";

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;
@@ -17,12 +17,12 @@ export declare class WebDriver<T extends Element, M = unknown> extends ElDriver<
 }
 export declare class StaticDriver<T extends HTMLElement> extends WebDriver<T> {
     readonly native: T;
-    constructor(native: T, name: string, isPartition: boolean, initialize?: Handler<El<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;
 }