verstak 0.24.125 → 0.24.128

package/build/dist/source/archive/RxDomV1.js

@@ -85,7 +85,7 @@ RxNodeInstanceImpl.gUuid = 0;
 __decorate([
     reactive,
     options({
-        reentrance: Reentrance.CancelPrevious,
+        reentrance: Reentrance.cancelPrevious,
         triggeringArgs: true,
         noSideEffects: true
     }),

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

@@ -2,12 +2,10 @@ import { RxNode, BaseDriver } from "reactronic";
 export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
     allocate(node: RxNode<El<T, M>>): El<T, M>;
 }
-export type BaseEl<T = any, M = any> = {
+export type El<T = any, M = any> = {
     readonly node: RxNode<El<T, M>>;
-    model: M;
-};
-export type El<T = any, M = any> = BaseEl<T, M> & {
     native: T;
+    model: M;
     kind: ElKind;
     area: ElArea;
     widthGrowth: number;
@@ -23,13 +21,13 @@ export type El<T = any, M = any> = BaseEl<T, M> & {
     useStyle(styleName: string, enabled?: boolean): void;
 };
 export declare enum ElKind {
-    Section = 0,
-    Table = 1,
-    Note = 2,
-    Group = 3,
-    Part = 4,
-    Cursor = 5,
-    Native = 6
+    section = 0,
+    table = 1,
+    note = 2,
+    group = 3,
+    part = 4,
+    cursor = 5,
+    native = 6
 }
 export type ElCoords = {
     x1: number;
@@ -38,15 +36,15 @@ export type ElCoords = {
     y2: number;
 };
 export declare enum Align {
-    Default = 16,
-    ToBounds = 0,
-    ToLeft = 1,
-    ToCenterX = 2,
-    ToRight = 3,
-    ToTop = 4,
-    ToCenterY = 8,
-    ToBottom = 12,
-    ToCenter = 10
+    default = 16,
+    toBounds = 0,
+    toLeft = 1,
+    toCenterX = 2,
+    toRight = 3,
+    toTop = 4,
+    toCenterY = 8,
+    toBottom = 12,
+    toCenter = 10
 }
 export type ElasticSize = {
     cells?: number;
@@ -123,10 +121,10 @@ declare class CursorPosition {
     constructor(prev: CursorPosition);
 }
 declare enum CursorFlags {
-    None = 0,
-    OwnCursorPosition = 1,
-    UsesRunningColumnCount = 2,
-    UsesRunningRowCount = 4
+    none = 0,
+    ownCursorPosition = 1,
+    usesRunningColumnCount = 2,
+    usesRunningRowCount = 4
 }
 export declare class CursorCommand {
     absolute?: string;

package/build/dist/source/html/El.js

@@ -7,25 +7,25 @@ export class ElDriver extends BaseDriver {
 }
 export var ElKind;
 (function (ElKind) {
-    ElKind[ElKind["Section"] = 0] = "Section";
-    ElKind[ElKind["Table"] = 1] = "Table";
-    ElKind[ElKind["Note"] = 2] = "Note";
-    ElKind[ElKind["Group"] = 3] = "Group";
-    ElKind[ElKind["Part"] = 4] = "Part";
-    ElKind[ElKind["Cursor"] = 5] = "Cursor";
-    ElKind[ElKind["Native"] = 6] = "Native";
+    ElKind[ElKind["section"] = 0] = "section";
+    ElKind[ElKind["table"] = 1] = "table";
+    ElKind[ElKind["note"] = 2] = "note";
+    ElKind[ElKind["group"] = 3] = "group";
+    ElKind[ElKind["part"] = 4] = "part";
+    ElKind[ElKind["cursor"] = 5] = "cursor";
+    ElKind[ElKind["native"] = 6] = "native";
 })(ElKind || (ElKind = {}));
 export var Align;
 (function (Align) {
-    Align[Align["Default"] = 16] = "Default";
-    Align[Align["ToBounds"] = 0] = "ToBounds";
-    Align[Align["ToLeft"] = 1] = "ToLeft";
-    Align[Align["ToCenterX"] = 2] = "ToCenterX";
-    Align[Align["ToRight"] = 3] = "ToRight";
-    Align[Align["ToTop"] = 4] = "ToTop";
-    Align[Align["ToCenterY"] = 8] = "ToCenterY";
-    Align[Align["ToBottom"] = 12] = "ToBottom";
-    Align[Align["ToCenter"] = 10] = "ToCenter";
+    Align[Align["default"] = 16] = "default";
+    Align[Align["toBounds"] = 0] = "toBounds";
+    Align[Align["toLeft"] = 1] = "toLeft";
+    Align[Align["toCenterX"] = 2] = "toCenterX";
+    Align[Align["toRight"] = 3] = "toRight";
+    Align[Align["toTop"] = 4] = "toTop";
+    Align[Align["toCenterY"] = 8] = "toCenterY";
+    Align[Align["toBottom"] = 12] = "toBottom";
+    Align[Align["toCenter"] = 10] = "toCenter";
 })(Align || (Align = {}));
 export class ElImpl {
     constructor(node) {
@@ -35,7 +35,7 @@ export class ElImpl {
         this.cursorPosition = undefined;
         this.native = undefined;
         this.model = undefined;
-        this._kind = ElKind.Part;
+        this._kind = ElKind.part;
         this._area = undefined;
         this._coords = UndefinedElCoords;
         this._widthGrowth = 0;
@@ -44,8 +44,8 @@ export class ElImpl {
         this._heightGrowth = 0;
         this._minHeight = "";
         this._maxHeight = "";
-        this._contentAlignment = Align.Default;
-        this._elementAlignment = Align.Default;
+        this._contentAlignment = Align.default;
+        this._elementAlignment = Align.default;
         this._contentWrapping = true;
         this._overlayVisible = undefined;
         this._hasStyles = false;
@@ -54,9 +54,9 @@ export class ElImpl {
         this._area = undefined;
         this._hasStyles = false;
     }
-    get isSection() { return this.kind === ElKind.Section; }
-    get isTable() { return this.kind === ElKind.Table; }
-    get isAuxiliary() { return this.kind > ElKind.Note; }
+    get isSection() { return this.kind === ElKind.section; }
+    get isTable() { return this.kind === ElKind.table; }
+    get isAuxiliary() { return this.kind > ElKind.note; }
     get kind() { return this._kind; }
     set kind(value) {
         if (value !== this._kind || this.node.stamp >= Number.MAX_SAFE_INTEGER - 1) {
@@ -178,18 +178,18 @@ class CursorPosition {
         this.y = prev.y;
         this.runningMaxX = prev.runningMaxX;
         this.runningMaxY = prev.runningMaxY;
-        this.flags = prev.flags & ~CursorFlags.OwnCursorPosition;
+        this.flags = prev.flags & ~CursorFlags.ownCursorPosition;
     }
 }
 var CursorFlags;
 (function (CursorFlags) {
-    CursorFlags[CursorFlags["None"] = 0] = "None";
-    CursorFlags[CursorFlags["OwnCursorPosition"] = 1] = "OwnCursorPosition";
-    CursorFlags[CursorFlags["UsesRunningColumnCount"] = 2] = "UsesRunningColumnCount";
-    CursorFlags[CursorFlags["UsesRunningRowCount"] = 4] = "UsesRunningRowCount";
+    CursorFlags[CursorFlags["none"] = 0] = "none";
+    CursorFlags[CursorFlags["ownCursorPosition"] = 1] = "ownCursorPosition";
+    CursorFlags[CursorFlags["usesRunningColumnCount"] = 2] = "usesRunningColumnCount";
+    CursorFlags[CursorFlags["usesRunningRowCount"] = 4] = "usesRunningRowCount";
 })(CursorFlags || (CursorFlags = {}));
 const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
-const InitialCursorPosition = Object.freeze(new CursorPosition({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: CursorFlags.None }));
+const InitialCursorPosition = Object.freeze(new CursorPosition({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: CursorFlags.none }));
 function getEffectiveElCoords(isRegularElement, area, maxX, maxY, cursorPosition, newCursorPosition) {
     var _a, _b;
     let result;
@@ -199,7 +199,7 @@ function getEffectiveElCoords(isRegularElement, area, maxX, maxY, cursorPosition
         if (newCursorPosition) {
             newCursorPosition.x = isRegularElement ? result.x2 + 1 : result.x1;
             newCursorPosition.y = result.y1;
-            newCursorPosition.flags = CursorFlags.OwnCursorPosition;
+            newCursorPosition.flags = CursorFlags.ownCursorPosition;
         }
     }
     else if (newCursorPosition) {
@@ -216,7 +216,7 @@ function getEffectiveElCoords(isRegularElement, area, maxX, maxY, cursorPosition
         result = { x1: 0, y1: 0, x2: 0, y2: 0 };
         if (dx === 0 && isRegularElement) {
             dx = runningX || 1;
-            newCursorPosition.flags = CursorFlags.UsesRunningColumnCount;
+            newCursorPosition.flags = CursorFlags.usesRunningColumnCount;
         }
         if (dx >= 0) {
             if (isRegularElement) {
@@ -242,7 +242,7 @@ function getEffectiveElCoords(isRegularElement, area, maxX, maxY, cursorPosition
         }
         if (dy === 0 && isRegularElement) {
             dy = runningY || 1;
-            newCursorPosition.flags |= CursorFlags.UsesRunningRowCount;
+            newCursorPosition.flags |= CursorFlags.usesRunningRowCount;
         }
         if (dy >= 0) {
             if (isRegularElement) {
@@ -295,7 +295,7 @@ export class CursorCommand {
 }
 export class CursorCommandDriver extends ElDriver {
     constructor() {
-        super("cursor", false, el => el.kind = ElKind.Cursor);
+        super("cursor", false, el => el.kind = ElKind.cursor);
     }
 }
 export class Apply {
@@ -355,7 +355,7 @@ export class Apply {
             const hostDriver = bNode.host.driver;
             if (hostDriver.isPartitionSeparator) {
                 const host = bNode.host.seat.instance;
-                Apply.elementAlignment(element, Align.ToBounds);
+                Apply.elementAlignment(element, Align.toBounds);
                 Apply.heightGrowth(host.element, value);
             }
         }
@@ -371,7 +371,7 @@ export class Apply {
     static contentAlignment(element, value) {
         if (element.native instanceof HTMLElement) {
             const s = element.native.style;
-            if ((value & Align.Default) === 0) {
+            if ((value & Align.default) === 0) {
                 const v = AlignToCss[(value >> 2) & 0b11];
                 const h = AlignToCss[value & 0b11];
                 const t = TextAlignCss[value & 0b11];
@@ -386,7 +386,7 @@ export class Apply {
     static elementAlignment(element, value) {
         if (element.native instanceof HTMLElement) {
             const s = element.native.style;
-            if ((value & Align.Default) === 0) {
+            if ((value & Align.default) === 0) {
                 const v = AlignToCss[(value >> 2) & 0b11];
                 const h = AlignToCss[value & 0b11];
                 s.alignSelf = v;

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

@@ -1,4 +1,4 @@
-import { RxNodeDecl, RxNode } from "reactronic";
+import { RxNodeDecl, RxNode, Delegate } from "reactronic";
 import { El, ElArea } from "./El.js";
 import { HtmlElementDriver } from "./HtmlDriver.js";
 export declare function Section<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
@@ -9,7 +9,8 @@ export declare function cursor(areaParams: ElArea): void;
 export declare function Note(content: string, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function HtmlNote(content: string, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function PseudoElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
+export declare function Handler<M = unknown>(update: Delegate<El<void, M>>): RxNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
 export declare class VerstakElementDriver<T extends HTMLElement> extends HtmlElementDriver<T> {
     update(node: RxNode<El<T>>): void | Promise<void>;
 }

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

@@ -1,4 +1,4 @@
-import { RxNode } from "reactronic";
+import { RxNode, Mode } from "reactronic";
 import { Constants, CursorCommandDriver, ElKind, ElDriver } from "./El.js";
 import { HtmlElementDriver } from "./HtmlDriver.js";
 export function Section(declaration, preset) {
@@ -38,23 +38,26 @@ export function HtmlNote(content, declaration) {
 export function Group(declaration, preset) {
     return RxNode.acquire(Drivers.group, declaration, preset);
 }
-export function PseudoElement(declaration, preset) {
+export function Handler(update) {
+    return SyntheticElement({ mode: Mode.independentUpdate, update });
+}
+export function SyntheticElement(declaration, preset) {
     return RxNode.acquire(Drivers.pseudo, declaration, preset);
 }
 export class VerstakElementDriver extends HtmlElementDriver {
     update(node) {
         const element = node.element;
-        if (element.kind === ElKind.Section)
+        if (element.kind === ElKind.section)
             startNewRow();
         return super.update(node);
     }
 }
 const Drivers = {
-    section: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.Section),
-    table: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.Table),
-    note: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.Note),
-    group: new VerstakElementDriver(Constants.group, false, el => el.kind = ElKind.Group),
-    partition: new VerstakElementDriver(Constants.partition, true, el => el.kind = ElKind.Part),
+    section: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.section),
+    table: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.table),
+    note: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.note),
+    group: new VerstakElementDriver(Constants.group, false, el => el.kind = ElKind.group),
+    partition: new VerstakElementDriver(Constants.partition, true, el => el.kind = ElKind.part),
     cursor: new CursorCommandDriver(),
-    pseudo: new ElDriver("pseudo", false, el => el.kind = ElKind.Group),
+    pseudo: new ElDriver("pseudo", false, el => el.kind = ElKind.group),
 };

package/build/dist/source/html/Handlers.d.ts

@@ -0,0 +1,6 @@
+import { ToggleRef } from "reactronic";
+import { FocusModel } from "./sensors/FocusSensor.js";
+import { ResizedElement } from "./sensors/ResizeSensor.js";
+export declare function OnClick(target: HTMLElement, action: (() => void) | ToggleRef | undefined, key?: string): void;
+export declare function OnResize(target: HTMLElement, action: ((element: ResizedElement) => void) | undefined, key?: string): void;
+export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model?: FocusModel) => void) | undefined, key?: string): void;

package/build/dist/source/html/Handlers.js

@@ -0,0 +1,55 @@
+import { Mode, ToggleRef, unobs } from "reactronic";
+import { SyntheticElement } from "./Elements.js";
+export function OnClick(target, action, key) {
+    if (action !== undefined) {
+        SyntheticElement({
+            key,
+            mode: Mode.independentUpdate,
+            triggers: { target },
+            update() {
+                const pointer = target.sensors.pointer;
+                if (pointer.clicked) {
+                    if (action instanceof Function) {
+                        unobs(() => action());
+                    }
+                    else if (action instanceof ToggleRef) {
+                        unobs(() => action.toggle());
+                    }
+                }
+            },
+        });
+    }
+}
+export function OnResize(target, action, key) {
+    if (action) {
+        SyntheticElement({
+            key,
+            mode: Mode.independentUpdate,
+            triggers: { target },
+            update() {
+                const resize = target.sensors.resize;
+                resize.resizedElements.forEach(x => {
+                    action(x);
+                });
+            },
+        });
+    }
+}
+export function OnFocus(target, model, switchEditMode = undefined, key) {
+    SyntheticElement({
+        key,
+        mode: Mode.independentUpdate,
+        triggers: { target, model },
+        initialize(b) {
+            b.node.configureReactronic({ throttling: 0 });
+        },
+        update() {
+            if (switchEditMode !== undefined) {
+                switchEditMode(model);
+            }
+            else {
+                model.isEditMode ? target.focus() : target.blur();
+            }
+        },
+    });
+}

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

@@ -1,6 +1,8 @@
 import { DataForSensor } from "./sensors/DataForSensor.js";
+import { HtmlSensors } from "./sensors/HtmlSensors.js";
 declare global {
     interface Element {
+        sensors: HtmlSensors;
         dataForSensor: DataForSensor;
         resizeObserver?: ResizeObserver;
     }

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

@@ -1,6 +1,16 @@
-import { SymDataForSensor, SymResizeObserver } from "./sensors/DataForSensor.js";
+import { SymDataForSensor, SymHtmlSensors, SymResizeObserver } from "./sensors/DataForSensor.js";
+import { HtmlSensors } from "./sensors/HtmlSensors.js";
 const ElementType = global.Element;
 if (ElementType !== undefined) {
+    Object.defineProperty(ElementType.prototype, "sensors", {
+        configurable: false, enumerable: false,
+        get() {
+            let result = this[SymHtmlSensors];
+            if (result === undefined)
+                result = this[SymHtmlSensors] = new HtmlSensors(this);
+            return result;
+        },
+    });
     Object.defineProperty(ElementType.prototype, "dataForSensor", {
         configurable: false, enumerable: false,
         get() {