verstak 0.24.508 → 0.92.25003

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 { ReactiveNode, BaseDriver, Transaction, obs, ObservableObject } from "reactronic";
+import { ReactiveNode, BaseDriver, Transaction, observable, ObservableObject } from "reactronic";
 import { ElKind, Horizontal, Vertical, Direction } from "./El.js";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
 export class ElDriver extends BaseDriver {
@@ -561,27 +561,27 @@ export class ElLayoutInfo {
     }
 }
 __decorate([
-    obs,
+    observable,
     __metadata("design:type", Number)
 ], ElLayoutInfo.prototype, "effectiveSizePx", void 0);
 __decorate([
-    obs,
+    observable,
     __metadata("design:type", Number)
 ], ElLayoutInfo.prototype, "contentSizeXpx", void 0);
 __decorate([
-    obs,
+    observable,
     __metadata("design:type", Number)
 ], ElLayoutInfo.prototype, "contentSizeYpx", void 0);
 __decorate([
-    obs,
+    observable,
     __metadata("design:type", Number)
 ], ElLayoutInfo.prototype, "borderSizeYpx", void 0);
 __decorate([
-    obs,
+    observable,
     __metadata("design:type", Number)
 ], ElLayoutInfo.prototype, "borderSizeXpx", void 0);
 __decorate([
-    obs,
+    observable,
     __metadata("design:type", Boolean)
 ], ElLayoutInfo.prototype, "isUpdateFinished", void 0);
 var ElLayoutInfoFlags;

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

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

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

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

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

@@ -7,9 +7,9 @@ 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 { cached, Transaction } from "reactronic";
+import { cache, apply } from "reactronic";
 export function restyler(restyle) {
-    return Transaction.run(null, () => new ObservablesStyles(restyle));
+    return apply(() => new ObservablesStyles(restyle));
 }
 export class ObservablesStyles {
     constructor(restyle) {
@@ -23,7 +23,7 @@ export class ObservablesStyles {
     }
 }
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Object)

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

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

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

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

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

@@ -13,13 +13,13 @@ export function Button(declaration) {
                 label: ReactiveNode.key,
             }));
         },
-        content: el => {
+        script: el => {
             const m = el.model;
             const theme = Theme.current.button;
             el.useStylingPreset(theme.main);
             if (m.icon) {
                 Icon(m.icon, {
-                    content: (el, base) => {
+                    script: (el, base) => {
                         base();
                         el.useStylingPreset(theme.icon);
                     },
@@ -27,7 +27,7 @@ export function Button(declaration) {
             }
             if (m.label) {
                 Note(m.label, false, {
-                    content: (el, base) => {
+                    script: (el, base) => {
                         base();
                         el.useStylingPreset(theme.label);
                     },

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

@@ -11,13 +11,13 @@ export function Field(declaration) {
             (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeFieldModel());
             el.native.dataForSensor.focus = el.model;
         },
-        content: el => {
+        script: el => {
             const m = el.model;
             const theme = Theme.current.field;
             el.useStylingPreset(theme.main);
             if (m.icon)
                 Icon(m.icon, {
-                    content: (el, base) => {
+                    script: (el, base) => {
                         base();
                         el.useStylingPreset(theme.icon);
                     },
@@ -55,7 +55,7 @@ function FieldInput(model, s) {
             e.dataForSensor.focus = model;
             base();
         },
-        content: el => {
+        script: el => {
             const e = el.native;
             if (!model.isEditMode)
                 e.innerText = model.text;
@@ -81,7 +81,7 @@ function FieldInput(model, s) {
 function FieldPopup(model, s) {
     return (Panel({
         key: FieldPopup.name,
-        content: el => {
+        script: el => {
             el.useStylingPreset(s.popup);
             Handling(() => model.position = el.native.sensors.scroll.y);
             const visible = el.overlayVisible = model.isEditMode;

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

@@ -5,7 +5,7 @@ export function Icon(name, declaration) {
     return (Panel(ReactiveNode.withBasis(declaration, {
         mode: Mode.autonomous,
         triggers: { name },
-        content: el => {
+        script: el => {
             const theme = Theme.current.icon;
             el.useStylingPreset(name);
             el.useStylingPreset(theme.main);

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

@@ -8,7 +8,7 @@ export function Image(declaration) {
             var _a;
             (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({ source: undefined }));
         },
-        content: el => {
+        script: el => {
             const m = el.model;
             el.style.backgroundImage = `url(${m.source})`;
             el.style.backgroundSize = "contain";

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

@@ -8,7 +8,7 @@ export function Spinner(declaration) {
             var _a;
             (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeSpinnerModel());
         },
-        content: el => {
+        script: el => {
             const m = el.model;
             m.active && Note("loading...");
         },

package/build/dist/source/express/Theme.js

@@ -1,4 +1,4 @@
-import { Transaction, ReactiveNodeVariable, Isolation } from "reactronic";
+import { apply, ReactiveNodeVariable, Isolation } from "reactronic";
 import { DefaultButtonStyling } from "./theme/Button.s.js";
 import { DefaultFieldStyling } from "./theme/Field.s.js";
 import { DefaultIconStyling } from "./theme/Icon.s.js";
@@ -27,4 +27,4 @@ export class Theme {
         Theme.gCurrent.value = value;
     }
 }
-Theme.gCurrent = new ReactiveNodeVariable(Transaction.run({ isolation: Isolation.disjoinFromOuterTransaction }, () => new Theme()));
+Theme.gCurrent = new ReactiveNodeVariable(apply({ isolation: Isolation.disjoinFromOuterTransaction }, () => new Theme()));

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

@@ -1,5 +1,5 @@
-import { Transaction, Mode, ReactiveNode } from "reactronic";
-import { Panel, Note } from "verstak";
+import { Mode, ReactiveNode } from "reactronic";
+import { Panel, Note, OnClick } from "verstak";
 import { observableModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
@@ -13,28 +13,31 @@ export function Toggle(declaration) {
                 checked: true,
                 color: "green"
             }));
-            el.native.onclick = () => Transaction.run(null, () => el.model.checked = !el.model.checked);
         },
-        content: el => {
+        script: el => {
             const m = el.model;
             const theme = Theme.current;
             const toggleTheme = theme.toggle;
             el.useStylingPreset(toggleTheme.main);
             Icon(`fa-solid fa-toggle-${m.checked ? "on" : "off"}`, {
-                content: (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 : "") : "";
                 },
             });
-            if (m.label)
+            if (m.label) {
                 Note(m.label, false, {
-                    content: (el, base) => {
+                    script: (el, base) => {
                         base();
                         el.useStylingPreset(toggleTheme.label);
                     },
                 });
+            }
+            OnClick(el.native, () => {
+                el.model.checked = !el.model.checked;
+            });
         },
     })));
 }

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

@@ -1,6 +1,6 @@
-import { ObservableObject, Ref, Transaction, Isolation } from "reactronic";
+import { ObservableObject, Ref, apply, Isolation } from "reactronic";
 export function observableModel(modelProps) {
-    return Transaction.run({ isolation: Isolation.disjoinFromOuterTransaction }, () => new ObservableComposition(modelProps));
+    return apply({ isolation: Isolation.disjoinFromOuterTransaction }, () => new ObservableComposition(modelProps));
 }
 class ObservableComposition extends ObservableObject {
     constructor(composition) {

package/build/dist/source/express/theme/Button.s.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 { cached } from "reactronic";
+import { cache } from "reactronic";
 import { css } from "@emotion/css";
 import { Styling } from "./Styling.js";
 export class DefaultButtonStyling extends Styling {
@@ -33,17 +33,17 @@ export class DefaultButtonStyling extends Styling {
     }
 }
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultButtonStyling.prototype, "main", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultButtonStyling.prototype, "icon", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultButtonStyling.prototype, "label", null);

package/build/dist/source/express/theme/Field.s.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 { cached } from "reactronic";
+import { cache } from "reactronic";
 import { css } from "@emotion/css";
 import { Styling } from "./Styling.js";
 export class DefaultFieldStyling extends Styling {
@@ -47,22 +47,22 @@ export class DefaultFieldStyling extends Styling {
     }
 }
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultFieldStyling.prototype, "main", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultFieldStyling.prototype, "icon", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultFieldStyling.prototype, "input", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultFieldStyling.prototype, "popup", null);

package/build/dist/source/express/theme/Icon.s.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 { cached } from "reactronic";
+import { cache } from "reactronic";
 import { css } from "@emotion/css";
 import { Styling } from "./Styling.js";
 export class DefaultIconStyling extends Styling {
@@ -20,7 +20,7 @@ export class DefaultIconStyling extends Styling {
     }
 }
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultIconStyling.prototype, "main", null);

package/build/dist/source/express/theme/Styling.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 { ObservableObject, raw } from "reactronic";
+import { ObservableObject, unobservable } from "reactronic";
 export class Styling extends ObservableObject {
     constructor($) {
         super();
@@ -15,6 +15,6 @@ export class Styling extends ObservableObject {
     }
 }
 __decorate([
-    raw,
+    unobservable,
     __metadata("design:type", Object)
 ], Styling.prototype, "$", void 0);

package/build/dist/source/express/theme/Toggle.s.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 { cached } from "reactronic";
+import { cache } from "reactronic";
 import { css } from "@emotion/css";
 import { Styling } from "./Styling.js";
 export class DefaultToggleStyling extends Styling {
@@ -32,17 +32,17 @@ export class DefaultToggleStyling extends Styling {
     }
 }
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultToggleStyling.prototype, "main", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultToggleStyling.prototype, "icon", null);
 __decorate([
-    cached,
+    cache,
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], DefaultToggleStyling.prototype, "label", null);

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

@@ -4,7 +4,7 @@ import { Handling } from "../core/Elements.js";
 export function DraggableArea(draggingId, builder) {
     return (Div(ReactiveNode.withBasis(builder, {
         mode: Mode.autonomous,
-        content: b => {
+        script: b => {
             const e = b.native;
             const model = b.model;
             const dataForSensor = e.dataForSensor;