verstak 0.95.25046 → 0.95.25048

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

@@ -1,39 +1,39 @@
 import { ReactiveTreeNode, Mode, derivative } from "reactronic";
 import { Block, JustText, OnClick } from "verstak";
-import { sxModel } from "./common/Utils.js";
+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: el => {
+        preparation() {
             var _a;
-            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = sxModel({
+            (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({
                 icon: "fa-solid fa-square",
                 label: ReactiveTreeNode.current.key,
             }));
         },
-        script: el => {
-            const m = el.model;
+        script() {
+            const m = this.model;
             const theme = Theme.current.button;
-            el.useStylingPreset(theme.main);
+            this.useStylingPreset(theme.main);
             if (m.icon) {
                 Icon(m.icon, {
-                    script: (el, base) => {
+                    script(el, base) {
                         base();
-                        el.useStylingPreset(theme.icon);
+                        this.useStylingPreset(theme.icon);
                     },
                 });
             }
             if (m.label) {
                 JustText(m.label, false, {
-                    script: (el, base) => {
+                    script(el, base) {
                         base();
-                        el.useStylingPreset(theme.label);
+                        this.useStylingPreset(theme.label);
                     },
                 });
             }
-            OnClick(el.native, m.action);
+            OnClick(this.native, m.action);
         },
     })));
 }

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

@@ -4,11 +4,11 @@ import { Theme } from "./Theme.js";
 export function Icon(name, declaration) {
     return (Block(derivative(declaration, {
         mode: Mode.autonomous,
-        triggers: { name },
-        script: el => {
+        signalArgs: { name },
+        script() {
             const theme = Theme.current.icon;
-            el.useStylingPreset(name);
-            el.useStylingPreset(theme.main);
+            this.useStylingPreset(name);
+            this.useStylingPreset(theme.main);
         },
     })));
 }

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

@@ -1,18 +1,18 @@
 import { Mode, derivative } from "reactronic";
 import { Block } from "verstak";
-import { sxModel } from "./common/Utils.js";
+import { rxModel } from "./common/Utils.js";
 export function Image(declaration) {
     return (Block(derivative(declaration, {
         mode: Mode.autonomous,
-        preparation: el => {
+        preparation() {
             var _a;
-            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = sxModel({ source: undefined }));
+            (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({ source: undefined }));
         },
-        script: el => {
-            const m = el.model;
-            el.style.backgroundImage = `url(${m.source})`;
-            el.style.backgroundSize = "contain";
-            el.style.backgroundRepeat = "no-repeat";
+        script() {
+            const m = this.model;
+            this.style.backgroundImage = `url(${m.source})`;
+            this.style.backgroundSize = "contain";
+            this.style.backgroundRepeat = "no-repeat";
         },
     })));
 }

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

@@ -1,25 +1,25 @@
 import { Mode, derivative } from "reactronic";
 import { Block, JustText, OnFocus, rowBreak, Fragment, KeyboardModifiers, Horizontal, Vertical } from "verstak";
-import { sxModel } from "./common/Utils.js";
+import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Input(declaration) {
     return (Block(derivative(declaration, {
         mode: Mode.autonomous,
-        preparation: el => {
+        preparation() {
             var _a;
-            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeInputModel());
-            el.native.dataForSensor.focus = el.model;
+            (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeInputModel());
+            this.native.dataForSensor.focus = this.model;
         },
-        script: el => {
-            const m = el.model;
+        script() {
+            const m = this.model;
             const theme = Theme.current.input;
-            el.useStylingPreset(theme.main);
+            this.useStylingPreset(theme.main);
             if (m.icon)
                 Icon(m.icon, {
-                    script: (el, base) => {
+                    script(el, base) {
                         base();
-                        el.useStylingPreset(theme.icon);
+                        this.useStylingPreset(theme.icon);
                     },
                 });
             InputField(m, theme);
@@ -29,7 +29,7 @@ export function Input(declaration) {
 }
 export function composeInputModel(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return sxModel({
+    return rxModel({
         icon: props === null || props === void 0 ? void 0 : props.icon,
         text: (_a = props === null || props === void 0 ? void 0 : props.text) !== null && _a !== void 0 ? _a : "",
         options: (_b = props === null || props === void 0 ? void 0 : props.options) !== null && _b !== void 0 ? _b : [],
@@ -45,18 +45,18 @@ export function composeInputModel(props) {
 function InputField(model, styling) {
     return (JustText(model.text, false, {
         key: InputField.name,
-        preparation: (el, base) => {
-            const e = el.native;
-            el.useStylingPreset(styling.field);
-            el.horizontally = Horizontal.stretch;
-            el.vertically = Vertical.stretch;
+        preparation(el, base) {
+            const e = this.native;
+            this.useStylingPreset(styling.field);
+            this.horizontally = Horizontal.stretch;
+            this.vertically = Vertical.stretch;
             e.tabIndex = 0;
             e.contentEditable = "true";
             e.dataForSensor.focus = model;
             base();
         },
-        script: el => {
-            const e = el.native;
+        script() {
+            const e = this.native;
             if (!model.isEditMode)
                 e.innerText = model.text;
             Fragment(() => {
@@ -81,10 +81,10 @@ function InputField(model, styling) {
 function InputPopup(model, styling) {
     return (Block({
         key: InputPopup.name,
-        script: el => {
-            el.useStylingPreset(styling.popup);
-            Fragment(() => model.position = el.native.sensors.scroll.y);
-            const visible = el.overlayVisible = model.isEditMode;
+        script() {
+            this.useStylingPreset(styling.popup);
+            Fragment(() => model.position = this.native.sensors.scroll.y);
+            const visible = this.overlayVisible = model.isEditMode;
             if (visible) {
                 const options = model.options;
                 if (options.length > 0) {
@@ -92,8 +92,8 @@ function InputPopup(model, styling) {
                         rowBreak();
                         JustText(x, false, {
                             key: x,
-                            preparation: el => {
-                                el.contentWrapping = false;
+                            preparation() {
+                                this.contentWrapping = false;
                             },
                         });
                     }

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

@@ -3,8 +3,8 @@ import Md from "markdown-it";
 import * as prism from "prismjs";
 export function Markdown(content) {
     return (JustText(md.render(content), true, {
-        preparation: (el, base) => {
-            el.contentWrapping = true;
+        preparation(el, base) {
+            this.contentWrapping = true;
             base();
         },
     }));

package/build/dist/source/components/RealTimeClock.d.ts

@@ -1,5 +1,5 @@
-import { SxObject } from "reactronic";
-export declare class RealTimeClock extends SxObject {
+import { RxObject } from "reactronic";
+export declare class RealTimeClock extends RxObject {
     hour: number;
     minute: number;
     second: number;

package/build/dist/source/components/RealTimeClock.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { SxObject, transaction, reaction } from "reactronic";
-export class RealTimeClock extends SxObject {
+import { RxObject, transaction, reaction } from "reactronic";
+export class RealTimeClock extends RxObject {
     constructor(interval = 1000) {
         super();
         this.hour = 0;

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

@@ -1,22 +1,22 @@
 import { Mode, derivative } from "reactronic";
 import { Block, JustText } from "verstak";
-import { sxModel } from "./common/Utils.js";
+import { rxModel } from "./common/Utils.js";
 export function Spinner(declaration) {
     return (Block(derivative(declaration, {
         mode: Mode.autonomous,
-        preparation: el => {
+        preparation() {
             var _a;
-            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeSpinnerModel());
+            (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeSpinnerModel());
         },
-        script: el => {
-            const m = el.model;
+        script() {
+            const m = this.model;
             m.active && JustText("loading...");
         },
     })));
 }
 export function composeSpinnerModel(props) {
     var _a, _b;
-    return sxModel({
+    return rxModel({
         active: (_a = props === null || props === void 0 ? void 0 : props.active) !== null && _a !== void 0 ? _a : false,
         color: (_b = props === null || props === void 0 ? void 0 : props.color) !== null && _b !== void 0 ? _b : "",
     });

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

@@ -1,42 +1,42 @@
 import { ReactiveTreeNode, Mode, derivative } from "reactronic";
 import { Block, JustText, OnClick } from "verstak";
-import { sxModel } from "./common/Utils.js";
+import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Toggle(declaration) {
     return (Block(derivative(declaration, {
         mode: Mode.autonomous,
-        preparation: el => {
+        preparation() {
             var _a;
-            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = sxModel({
+            (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({
                 label: ReactiveTreeNode.current.key,
                 checked: true,
                 color: "green"
             }));
         },
-        script: el => {
-            const m = el.model;
+        script() {
+            const m = this.model;
             const theme = Theme.current;
             const toggleTheme = theme.toggle;
-            el.useStylingPreset(toggleTheme.main);
+            this.useStylingPreset(toggleTheme.main);
             Icon(`fa-solid fa-toggle-${m.checked ? "on" : "off"}`, {
-                script: (el, base) => {
+                script(el, base) {
                     var _a;
                     base();
-                    el.useStylingPreset(toggleTheme.icon);
-                    el.style.color = m.checked ? ((_a = theme.positiveColor) !== null && _a !== void 0 ? _a : "") : "";
+                    this.useStylingPreset(toggleTheme.icon);
+                    this.style.color = m.checked ? ((_a = theme.positiveColor) !== null && _a !== void 0 ? _a : "") : "";
                 },
             });
             if (m.label) {
                 JustText(m.label, false, {
-                    script: (el, base) => {
+                    script(el, base) {
                         base();
-                        el.useStylingPreset(toggleTheme.label);
+                        this.useStylingPreset(toggleTheme.label);
                     },
                 });
             }
-            OnClick(el.native, () => {
-                el.model.checked = !el.model.checked;
+            OnClick(this.native, () => {
+                this.model.checked = !this.model.checked;
             });
         },
     })));

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

@@ -6,5 +6,5 @@ export * from "./Spinner.v.js";
 export * from "./Toggle.v.js";
 export * from "./Markdown.v.js";
 export * from "./Theme.js";
-export { sxModel } from "./common/Utils.js";
+export { rxModel } from "./common/Utils.js";
 export { RealTimeClock } from "./RealTimeClock.js";

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

@@ -6,5 +6,5 @@ export * from "./Spinner.v.js";
 export * from "./Toggle.v.js";
 export * from "./Markdown.v.js";
 export * from "./Theme.js";
-export { sxModel } from "./common/Utils.js";
+export { rxModel } from "./common/Utils.js";
 export { RealTimeClock } from "./RealTimeClock.js";

package/build/dist/source/components/common/Utils.d.ts

@@ -2,4 +2,4 @@ import { Ref } from "reactronic";
 export type ValuesOrRefs<T> = {
     [K in keyof T]: T[K] | Ref<T[K]>;
 };
-export declare function sxModel<T extends Object>(modelProps: ValuesOrRefs<T>): T;
+export declare function rxModel<T extends Object>(modelProps: ValuesOrRefs<T>): T;

package/build/dist/source/components/common/Utils.js

@@ -1,8 +1,8 @@
-import { SxObject, Ref, runTransactional, Isolation } from "reactronic";
-export function sxModel(modelProps) {
-    return runTransactional({ isolation: Isolation.disjoinFromOuterTransaction }, () => new SxComposition(modelProps));
+import { RxObject, Ref, runTransactional, Isolation } from "reactronic";
+export function rxModel(modelProps) {
+    return runTransactional({ isolation: Isolation.disjoinFromOuterTransaction }, () => new RxComposition(modelProps));
 }
-class SxComposition extends SxObject {
+class RxComposition extends RxObject {
     constructor(composition) {
         super();
         convertValuesToFieldsAndRefsToGetSet(this, composition);

package/build/dist/source/components/theme/Styling.d.ts

@@ -1,4 +1,4 @@
-import { SxObject } from "reactronic";
+import { RxObject } from "reactronic";
 export type BasicAbstractTheme = {
     fillColor: string;
     textColor: string;
@@ -10,7 +10,7 @@ export type BasicAbstractTheme = {
     outlinePadding: string;
     shadow: string;
 };
-export declare class Styling extends SxObject {
+export declare class Styling extends RxObject {
     protected readonly $: BasicAbstractTheme;
     constructor($: BasicAbstractTheme);
 }

package/build/dist/source/components/theme/Styling.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { SxObject, signal } from "reactronic";
-export class Styling extends SxObject {
+import { RxObject, signal } from "reactronic";
+export class Styling extends RxObject {
     constructor($) {
         super();
         this.$ = $;

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { ReactiveTreeNode, BaseDriver, Transaction, signal, SxObject } from "reactronic";
+import { ReactiveTreeNode, BaseDriver, Transaction, signal, RxObject } from "reactronic";
 import { ElKind, Horizontal, Vertical, Direction } from "./El.js";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
 export class ElDriver extends BaseDriver {
@@ -535,7 +535,7 @@ export class ElImpl {
             native.className = enabled ? styleName : "";
     }
 }
-class Size extends SxObject {
+class Size extends RxObject {
     constructor() {
         super();
         this.raw = { min: "", max: "" };

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

@@ -30,10 +30,12 @@ export function declareSplitter(index, splitViewNode) {
     return (Splitter({
         key,
         mode: Mode.autonomous,
-        preparation: el => el.native.className = `splitter ${key}`,
-        script: b => {
-            const e = b.native;
-            const model = b.model;
+        preparation() {
+            this.native.className = `splitter ${key}`;
+        },
+        script() {
+            const e = this.native;
+            const model = this.model;
             const dataForSensor = e.dataForSensor;
             dataForSensor.draggable = key;
             dataForSensor.drag = key;
@@ -80,18 +82,18 @@ export function declareSplitter(index, splitViewNode) {
 }
 export function cursor(place) {
     declare(Drivers.cursor, {
-        script: el => {
-            el.place = place;
+        script() {
+            this.place = place;
         },
     });
 }
 export function JustText(content, formatted, declaration) {
     return declare(Drivers.text, derivative(declaration, {
-        script: el => {
+        script() {
             if (formatted)
-                el.native.innerHTML = content;
+                this.native.innerHTML = content;
             else
-                el.native.innerText = content;
+                this.native.innerText = content;
         },
     }));
 }
@@ -128,7 +130,7 @@ export class BlockDriver extends HtmlDriver {
             });
             const relayoutEl = PseudoElement({
                 mode: Mode.autonomous,
-                script: () => {
+                script() {
                     const native = el.native;
                     const isHorizontal = el.splitView === Direction.horizontal;
                     if (layoutInfo.isUpdateFinished) {
@@ -192,9 +194,9 @@ export class BlockDriver extends HtmlDriver {
                 }
                 const isHorizontal = el.splitView === Direction.horizontal;
                 if (childDeclaration !== undefined) {
-                    if (childDeclaration.triggers === undefined)
-                        childDeclaration.triggers = {};
-                    Object.defineProperty(childDeclaration.triggers, "index", { value: partCount });
+                    if (childDeclaration.signalArgs === undefined)
+                        childDeclaration.signalArgs = {};
+                    Object.defineProperty(childDeclaration.signalArgs, "index", { value: partCount });
                     overrideMethod(childDeclaration, "script", el => {
                         if (isHorizontal)
                             el.style.gridColumn = `${partCount + 1}`;
@@ -232,26 +234,26 @@ export class PartitionDriver extends HtmlDriver {
         if (ownerEl.sealed !== undefined) {
             node.element.style.flexGrow = "1";
             declare(Drivers.wrapper, {
-                script: el => {
-                    const ownerEl = el.node.owner.owner.element;
+                script() {
+                    const ownerEl = this.node.owner.owner.element;
                     if (ownerEl.splitView !== undefined) {
-                        el.style.display = "grid";
-                        el.style.flexDirection = "";
+                        this.style.display = "grid";
+                        this.style.flexDirection = "";
                     }
                     else {
                         if (ownerEl.isTable) {
-                            el.style.display = "contents";
-                            el.style.flexDirection = "";
+                            this.style.display = "contents";
+                            this.style.flexDirection = "";
                         }
                         else {
-                            el.style.display = "flex";
-                            el.style.flexDirection = "row";
+                            this.style.display = "flex";
+                            this.style.flexDirection = "row";
                         }
                     }
-                    el.style.position = "absolute";
-                    el.style.inset = "0";
-                    el.style.overflow = "auto";
-                    el.style.gap = "inherit";
+                    this.style.position = "absolute";
+                    this.style.inset = "0";
+                    this.style.overflow = "auto";
+                    this.style.gap = "inherit";
                 },
             });
         }

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

@@ -1,5 +1,5 @@
-export declare function restyler<T>(restyle: () => T): SxStyles<T>;
-export declare class SxStyles<T> {
+export declare function restyler<T>(restyle: () => T): RxStyles<T>;
+export declare class RxStyles<T> {
     private readonly restyle;
     constructor(restyle: () => T);
     protected cache(): T;

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

@@ -9,9 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { cache, runTransactional } from "reactronic";
 export function restyler(restyle) {
-    return runTransactional(() => new SxStyles(restyle));
+    return runTransactional(() => new RxStyles(restyle));
 }
-export class SxStyles {
+export class RxStyles {
     constructor(restyle) {
         this.restyle = restyle;
     }
@@ -27,4 +27,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Object)
-], SxStyles.prototype, "cache", null);
+], RxStyles.prototype, "cache", null);

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

@@ -14,8 +14,8 @@ export function OnClick(target, action, key) {
         PseudoElement({
             key,
             mode: Mode.autonomous,
-            triggers: { target },
-            script: el => {
+            signalArgs: { target },
+            script() {
                 const pointer = target.sensors.pointer;
                 if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
                     if (action instanceof Function) {
@@ -34,18 +34,20 @@ export function OnClickAsync(target, action, key) {
         PseudoElement({
             key,
             mode: Mode.autonomous,
-            triggers: { target },
-            scriptAsync: (el) => __awaiter(this, void 0, void 0, function* () {
-                const pointer = target.sensors.pointer;
-                if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
-                    if (action instanceof Function) {
-                        yield runNonReactive(() => action(pointer));
+            signalArgs: { target },
+            scriptAsync() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const pointer = target.sensors.pointer;
+                    if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
+                        if (action instanceof Function) {
+                            yield runNonReactive(() => action(pointer));
+                        }
+                        else if (action instanceof ToggleRef) {
+                            runNonReactive(() => action.toggle());
+                        }
                     }
-                    else if (action instanceof ToggleRef) {
-                        runNonReactive(() => action.toggle());
-                    }
-                }
-            }),
+                });
+            },
         });
     }
 }
@@ -54,8 +56,8 @@ export function OnResize(target, action, key) {
         PseudoElement({
             key,
             mode: Mode.autonomous,
-            triggers: { target },
-            script: el => {
+            signalArgs: { target },
+            script() {
                 const resize = target.sensors.resize;
                 resize.resizedElements.forEach(x => {
                     action(x);
@@ -68,11 +70,11 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
     PseudoElement({
         key,
         mode: Mode.autonomous,
-        triggers: { target, model },
-        preparation: el => {
-            el.node.configureReactivity({ throttling: 0 });
+        signalArgs: { target, model },
+        preparation() {
+            this.node.configureReactivity({ throttling: 0 });
         },
-        script: el => {
+        script() {
             if (switchEditMode === undefined && !(target instanceof HTMLInputElement || target.hasAttribute("tabindex")))
                 console.warn(`"${key !== null && key !== void 0 ? key : "noname"}" element must have "tabindex" attribute set in order to be focusable`);
             if (switchEditMode !== undefined) {

package/build/dist/source/core/sensors/Sensor.d.ts

@@ -1,5 +1,5 @@
-import { SxObject } from "reactronic";
-export declare class Sensor extends SxObject {
+import { RxObject } from "reactronic";
+export declare class Sensor extends RxObject {
     revision: number;
     elementDataList: unknown[];
     get topElementData(): unknown;

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

@@ -1,5 +1,5 @@
-import { SxObject } from "reactronic";
-export class Sensor extends SxObject {
+import { RxObject } from "reactronic";
+export class Sensor extends RxObject {
     constructor() {
         super(...arguments);
         this.revision = 0;

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

@@ -4,9 +4,9 @@ import { Fragment } from "../core/Elements.js";
 export function DraggableArea(draggingId, builder) {
     return (Div(derivative(builder, {
         mode: Mode.autonomous,
-        script: b => {
-            const e = b.native;
-            const model = b.model;
+        script() {
+            const e = this.native;
+            const model = this.model;
             const dataForSensor = e.dataForSensor;
             dataForSensor.draggable = draggingId;
             dataForSensor.drag = draggingId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.95.25046",
+  "version": "0.95.25048",
   "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.95.25046"
+    "reactronic": "^0.95.25048"
   },
   "devDependencies": {
     "@types/markdown-it": "14.1.2",