verstak 0.96.26016 → 0.96.26019

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

@@ -1,11 +1,10 @@
-import { ReactiveTreeNode, Mode, derivative } from "reactronic";
+import { ReactiveTreeNode, derivative } from "reactronic";
 import { Block, 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 (Block(derivative(declaration, {
-        mode: Mode.autonomous,
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({

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

@@ -1,9 +1,8 @@
-import { Mode, derivative } from "reactronic";
+import { derivative } from "reactronic";
 import { Block } from "verstak";
 import { Theme } from "./Theme.js";
 export function Icon(name, declaration) {
     return (Block(derivative(declaration, {
-        mode: Mode.autonomous,
         signalArgs: { name },
         body() {
             const theme = Theme.current.icon;

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

@@ -1,9 +1,8 @@
-import { Mode, derivative } from "reactronic";
+import { derivative } from "reactronic";
 import { Block } from "verstak";
 import { rxModel } from "./common/Utils.js";
 export function Image(declaration) {
     return (Block(derivative(declaration, {
-        mode: Mode.autonomous,
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({ source: undefined }));

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

@@ -5,7 +5,6 @@ import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Input(declaration) {
     return (Block(derivative(declaration, {
-        mode: Mode.autonomous,
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeInputModel());
@@ -45,6 +44,7 @@ export function composeInputModel(props) {
 function InputField(model, styling) {
     return (Block({
         key: InputField.name,
+        mode: Mode.primitive,
         preparation(el, base) {
             const e = this.native;
             this.useStylingPreset(styling.field);
@@ -81,6 +81,7 @@ function InputField(model, styling) {
 function InputPopup(model, styling) {
     return (Block({
         key: InputPopup.name,
+        mode: Mode.primitive,
         body() {
             this.useStylingPreset(styling.popup);
             Fragment(() => model.position = this.native.sensors.scroll.y);
@@ -92,6 +93,7 @@ function InputPopup(model, styling) {
                         rowBreak();
                         Block({
                             key: x,
+                            mode: Mode.primitive,
                             preparation() {
                                 this.text = x;
                                 this.contentWrapping = false;
@@ -102,6 +104,7 @@ function InputPopup(model, styling) {
                 else
                     Block({
                         key: "(nothing)",
+                        mode: Mode.primitive,
                         body() {
                             this.text = "(nothing)";
                         },

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

@@ -3,7 +3,6 @@ import { Block } from "verstak";
 import { rxModel } from "./common/Utils.js";
 export function Spinner(declaration) {
     return (Block(derivative(declaration, {
-        mode: Mode.autonomous,
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeSpinnerModel());
@@ -12,6 +11,7 @@ export function Spinner(declaration) {
             const m = this.model;
             if (m.active)
                 Block({
+                    mode: Mode.primitive,
                     body() {
                         this.text = "loading...";
                     },

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

@@ -5,7 +5,6 @@ import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Toggle(declaration) {
     return (Block(derivative(declaration, {
-        mode: Mode.autonomous,
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({
@@ -29,6 +28,7 @@ export function Toggle(declaration) {
             });
             if (m.label) {
                 Block({
+                    mode: Mode.primitive,
                     body(el, base) {
                         base();
                         this.text = m.label;

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

@@ -2,23 +2,23 @@ import { ReactiveTreeNode, ReactiveTreeNodeDecl, ReactiveTreeNodeDriver, Script,
 import { El, ElPlace } from "./El.js";
 import { CursorCommandDriver } from "./ElDriver.js";
 import { HtmlDriver } from "./WebDriver.js";
-export declare function Window(body?: Script<El<HTMLBodyElement>>, bodyTask?: ScriptAsync<El<HTMLBodyElement>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLBodyElement>>, preparationTask?: ScriptAsync<El<HTMLBodyElement>>, finalization?: Script<El<HTMLBodyElement>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLBodyElement>>): ReactiveTreeNode<El<HTMLBodyElement>>;
+export declare function Window(body?: Script<El<HTMLBodyElement>>, bodyTask?: ScriptAsync<El<HTMLBodyElement>>, key?: string, mode?: Mode, unmounted?: boolean, preparation?: Script<El<HTMLBodyElement>>, preparationTask?: ScriptAsync<El<HTMLBodyElement>>, mounting?: Script<El<HTMLBodyElement>>, finalization?: Script<El<HTMLBodyElement>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLBodyElement>>): ReactiveTreeNode<El<HTMLBodyElement>>;
 export declare function Window(declaration?: ReactiveTreeNodeDecl<El<HTMLBodyElement>>): ReactiveTreeNode<El<HTMLBodyElement>>;
-export declare function Block<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Block<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, unmounted?: boolean, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function Block<M = unknown>(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
-export declare function Table<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, unmounted?: boolean, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function Table<M = unknown>(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
-export declare function Splitter<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, unmounted?: boolean, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function Splitter<M = unknown>(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function rowBreak(shiftCursorDown?: number): void;
 export declare function declareSplitter<T>(index: number, splitViewNode: ReactiveTreeNode<El<T>>): ReactiveTreeNode<El<HTMLElement>>;
 export declare function cursor(place: ElPlace): void;
-export declare function Group<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(body?: Script<El<HTMLElement, M>>, bodyTask?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, unmounted?: boolean, preparation?: Script<El<HTMLElement, M>>, preparationTask?: ScriptAsync<El<HTMLElement, M>>, mounting?: Script<El<HTMLElement>>, finalization?: Script<El<HTMLElement, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function Group<M = unknown>(declaration?: ReactiveTreeNodeDecl<El<HTMLElement, M>>): ReactiveTreeNode<El<HTMLElement, M>>;
 export declare function Fragment<M = unknown>(body: Script<El<void, M>>): ReactiveTreeNode<El<void, M>>;
-export declare function PseudoElement<M = unknown>(body?: Script<El<void, M>>, bodyTask?: ScriptAsync<El<void, M>>, key?: string, mode?: Mode, preparation?: Script<El<void, M>>, preparationTask?: ScriptAsync<El<void, M>>, finalization?: Script<El<void, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<void, M>>): ReactiveTreeNode<El<void, M>>;
-export declare function PseudoElement<M = unknown>(declaration?: ReactiveTreeNodeDecl<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare function Intermediate<M = unknown>(body?: Script<El<void, M>>, bodyTask?: ScriptAsync<El<void, M>>, key?: string, mode?: Mode, unmounted?: boolean, preparation?: Script<El<void, M>>, preparationTask?: ScriptAsync<El<void, M>>, mounting?: Script<El<void>>, finalization?: Script<El<void, M>>, signalArgs?: unknown, basis?: ReactiveTreeNodeDecl<El<void, M>>): ReactiveTreeNode<El<void, M>>;
+export declare function Intermediate<M = unknown>(declaration?: ReactiveTreeNodeDecl<El<void, M>>): ReactiveTreeNode<El<void, M>>;
 export declare class BlockDriver<T extends HTMLElement> extends HtmlDriver<T> {
     rebuildBody(node: ReactiveTreeNode<El<T>>): void | Promise<void>;
     declareChild(ownerNode: ReactiveTreeNode<El<T, any>>, childDriver: ReactiveTreeNodeDriver<any>, childDeclaration?: ReactiveTreeNodeDecl<any> | undefined, childBasis?: ReactiveTreeNodeDecl<any> | undefined): LinkedItem<ReactiveTreeNode> | undefined;
@@ -36,5 +36,5 @@ export declare const Drivers: {
     wrapper: HtmlDriver<HTMLElement, any>;
     splitter: HtmlDriver<HTMLElement, any>;
     cursor: CursorCommandDriver;
-    pseudo: ReactiveTreeNodeDriver<El<void, any>>;
+    intermediate: ReactiveTreeNodeDriver<El<void, any>>;
 };

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

@@ -5,22 +5,22 @@ import { Constants, CursorCommandDriver, ElDriver, ElLayoutInfo, InitialElLayout
 import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout, relayoutUsingSplitter } from "./SplitViewMath.js";
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver, StaticDriver } from "./WebDriver.js";
-export function Window(bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis) {
+export function Window(bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis) {
     const driver = new StaticDriver(global.document.body, "Page", false, el => el.kind = ElKind.block);
-    return declare(driver, bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis);
+    return declare(driver, bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis);
 }
-export function Block(bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis) {
-    return declare(Drivers.block, bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis);
+export function Block(bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis) {
+    return declare(Drivers.block, bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis);
 }
-export function Table(bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis) {
-    return declare(Drivers.table, bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis);
+export function Table(bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis) {
+    return declare(Drivers.table, bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis);
 }
 export function row(builder, shiftCursorDown) {
     rowBreak(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
-export function Splitter(bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis) {
-    return declare(Drivers.splitter, bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis);
+export function Splitter(bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis) {
+    return declare(Drivers.splitter, bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis);
 }
 export function rowBreak(shiftCursorDown) {
     declare(Drivers.partition);
@@ -29,7 +29,6 @@ export function declareSplitter(index, splitViewNode) {
     const key = `splitter-${index}`;
     return (Splitter({
         key,
-        mode: Mode.autonomous,
         preparation() {
             this.native.className = `splitter ${key}`;
         },
@@ -86,14 +85,14 @@ export function cursor(place) {
         },
     });
 }
-export function Group(bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis) {
-    return declare(Drivers.group, bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis);
+export function Group(bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis) {
+    return declare(Drivers.group, bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis);
 }
 export function Fragment(body) {
-    return PseudoElement({ mode: Mode.autonomous, body });
+    return Intermediate({ mode: Mode.intermediate, body });
 }
-export function PseudoElement(bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis) {
-    return declare(Drivers.pseudo, bodyOrDeclaration, bodyTask, key, mode, preparation, preparationTask, finalization, signalArgs, basis);
+export function Intermediate(bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis) {
+    return declare(Drivers.intermediate, bodyOrDeclaration, bodyTask, key, mode, unmounted, preparation, preparationTask, mounting, finalization, signalArgs, basis);
 }
 export class BlockDriver extends HtmlDriver {
     rebuildBody(node) {
@@ -117,8 +116,7 @@ export class BlockDriver extends HtmlDriver {
                     layoutInfo.contentSizeYpx = contentBoxPx.blockSize;
                 }
             });
-            const relayoutEl = PseudoElement({
-                mode: Mode.autonomous,
+            const relayoutEl = Intermediate({
                 body() {
                     const native = el.native;
                     const isHorizontal = el.splitView === Direction.horizontal;
@@ -207,7 +205,7 @@ export class BlockDriver extends HtmlDriver {
     }
 }
 export function isSplitViewPartition(childDriver) {
-    return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.pseudo;
+    return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.intermediate;
 }
 function overrideMethod(declaration, method, func) {
     const baseScript = declaration[method];
@@ -265,5 +263,5 @@ export const Drivers = {
     wrapper: new HtmlDriver(Constants.wrapper, false, el => el.kind = ElKind.native),
     splitter: new HtmlDriver(Constants.splitter, false, el => el.kind = ElKind.splitter),
     cursor: new CursorCommandDriver(),
-    pseudo: new ElDriver("pseudo", false, el => el.kind = ElKind.group),
+    intermediate: new ElDriver("intermediate", false, el => el.kind = ElKind.group),
 };

package/build/dist/source/core/sensors/Handlers.js

@@ -8,12 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Mode, ToggleRef, runNonReactive } from "reactronic";
-import { PseudoElement } from "../Elements.js";
+import { Intermediate } from "../Elements.js";
 export function OnClick(target, action, key) {
     if (action !== undefined) {
-        PseudoElement({
+        Intermediate({
             key,
-            mode: Mode.autonomous,
+            mode: Mode.intermediate,
             signalArgs: { target },
             body() {
                 const pointer = target.sensors.pointer;
@@ -31,9 +31,9 @@ export function OnClick(target, action, key) {
 }
 export function OnClickAsync(target, action, key) {
     if (action !== undefined) {
-        PseudoElement({
+        Intermediate({
             key,
-            mode: Mode.autonomous,
+            mode: Mode.intermediate,
             signalArgs: { target },
             bodyTask() {
                 return __awaiter(this, void 0, void 0, function* () {
@@ -53,9 +53,9 @@ export function OnClickAsync(target, action, key) {
 }
 export function OnResize(target, action, key) {
     if (action) {
-        PseudoElement({
+        Intermediate({
             key,
-            mode: Mode.autonomous,
+            mode: Mode.intermediate,
             signalArgs: { target },
             body() {
                 const resize = target.sensors.resize;
@@ -67,9 +67,9 @@ export function OnResize(target, action, key) {
     }
 }
 export function OnFocus(target, model, switchEditMode = undefined, key) {
-    PseudoElement({
+    Intermediate({
         key,
-        mode: Mode.autonomous,
+        mode: Mode.intermediate,
         signalArgs: { target, model },
         preparation() {
             this.node.configureReactivity({ throttling: 0 });

package/build/dist/source/html/DraggableArea.view.js

@@ -1,9 +1,8 @@
-import { Mode, derivative } from "reactronic";
+import { derivative } from "reactronic";
 import { Div } from "./HtmlElements.js";
 import { Fragment } from "../core/Elements.js";
 export function DraggableArea(draggingId, builder) {
     return (Div(derivative(builder, {
-        mode: Mode.autonomous,
         body() {
             const e = this.native;
             const model = this.model;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.96.26016",
+  "version": "0.96.26019",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-prism": "^2.3.0",
     "prismjs": "^1.30.0",
-    "reactronic": "^0.96.26016"
+    "reactronic": "^0.96.26019"
   },
   "devDependencies": {
     "@types/markdown-it": "14.1.2",