verstak 0.24.501 → 0.24.508

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

@@ -1,2 +1,2 @@
 export * from "./core/api.js";
-export * from "./html/api.js";
+export * from "./sensors/api.js";

package/build/dist/source/api.js

@@ -1,2 +1,2 @@
 export * from "./core/api.js";
-export * from "./html/api.js";
+export * from "./sensors/api.js";

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

@@ -0,0 +1,78 @@
+import { ReactiveNode } from "reactronic";
+export type El<T = any, M = any> = {
+    readonly node: ReactiveNode<El<T, M>>;
+    readonly index: number;
+    native: T;
+    model: M;
+    kind: ElKind;
+    place: ElPlace;
+    width: Range;
+    height: Range;
+    horizontally: Horizontal | undefined;
+    contentHorizontally: Horizontal | undefined;
+    vertically: Vertical | undefined;
+    contentVertically: Vertical | undefined;
+    stretchingStrengthHorizontally: number | undefined;
+    stretchingStrengthVertically: number | undefined;
+    contentWrapping: boolean;
+    overlayVisible: boolean | undefined;
+    sealed: Direction | undefined;
+    splitView: Direction | undefined;
+    widthPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    heightPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    partitionSizeInSplitViewPx: number;
+    readonly style: CSSStyleDeclaration;
+    useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
+};
+export declare enum ElKind {
+    panel = 0,
+    table = 1,
+    note = 2,
+    group = 3,
+    part = 4,
+    splitter = 5,
+    cursor = 6,
+    native = 7
+}
+export type ElCoords = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export declare enum Horizontal {
+    left = 0,
+    center = 1,
+    right = 2,
+    stretch = 3,
+    stretchAndFix = 4
+}
+export declare enum Vertical {
+    top = 0,
+    center = 1,
+    bottom = 2,
+    stretch = 3,
+    stretchAndFix = 4
+}
+export type Range = {
+    readonly min?: string;
+    readonly max?: string;
+    preferred?: string;
+};
+export type MarkedRange = Range & {
+    readonly marker?: string;
+};
+export type ElPlace = undefined | string | {
+    cellsOverWidth?: number;
+    cellsOverHeight?: number;
+};
+export declare enum Direction {
+    horizontal = 0,
+    vertical = 1
+}

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

@@ -0,0 +1,32 @@
+export var ElKind;
+(function (ElKind) {
+    ElKind[ElKind["panel"] = 0] = "panel";
+    ElKind[ElKind["table"] = 1] = "table";
+    ElKind[ElKind["note"] = 2] = "note";
+    ElKind[ElKind["group"] = 3] = "group";
+    ElKind[ElKind["part"] = 4] = "part";
+    ElKind[ElKind["splitter"] = 5] = "splitter";
+    ElKind[ElKind["cursor"] = 6] = "cursor";
+    ElKind[ElKind["native"] = 7] = "native";
+})(ElKind || (ElKind = {}));
+export var Horizontal;
+(function (Horizontal) {
+    Horizontal[Horizontal["left"] = 0] = "left";
+    Horizontal[Horizontal["center"] = 1] = "center";
+    Horizontal[Horizontal["right"] = 2] = "right";
+    Horizontal[Horizontal["stretch"] = 3] = "stretch";
+    Horizontal[Horizontal["stretchAndFix"] = 4] = "stretchAndFix";
+})(Horizontal || (Horizontal = {}));
+export var Vertical;
+(function (Vertical) {
+    Vertical[Vertical["top"] = 0] = "top";
+    Vertical[Vertical["center"] = 1] = "center";
+    Vertical[Vertical["bottom"] = 2] = "bottom";
+    Vertical[Vertical["stretch"] = 3] = "stretch";
+    Vertical[Vertical["stretchAndFix"] = 4] = "stretchAndFix";
+})(Vertical || (Vertical = {}));
+export var Direction;
+(function (Direction) {
+    Direction[Direction["horizontal"] = 0] = "horizontal";
+    Direction[Direction["vertical"] = 1] = "vertical";
+})(Direction || (Direction = {}));

package/build/dist/source/{html/El.d.ts → core/ElDriver.d.ts}

@@ -1,83 +1,7 @@
 import { ReactiveNode, BaseDriver } from "reactronic";
-export type El<T = any, M = any> = {
-    readonly node: ReactiveNode<El<T, M>>;
-    readonly index: number;
-    native: T;
-    model: M;
-    kind: ElKind;
-    place: ElPlace;
-    width: Range;
-    height: Range;
-    horizontally: Horizontal | undefined;
-    contentHorizontally: Horizontal | undefined;
-    vertically: Vertical | undefined;
-    contentVertically: Vertical | undefined;
-    stretchingStrengthHorizontally: number | undefined;
-    stretchingStrengthVertically: number | undefined;
-    contentWrapping: boolean;
-    overlayVisible: boolean | undefined;
-    sealed: Direction | undefined;
-    splitView: Direction | undefined;
-    widthPx: {
-        minPx: number;
-        maxPx: number;
-    };
-    heightPx: {
-        minPx: number;
-        maxPx: number;
-    };
-    partitionSizeInSplitViewPx: number;
-    readonly style: CSSStyleDeclaration;
-    useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
-};
-export declare enum ElKind {
-    panel = 0,
-    table = 1,
-    note = 2,
-    group = 3,
-    part = 4,
-    splitter = 5,
-    cursor = 6,
-    native = 7
-}
-export type ElCoords = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};
-export declare enum Horizontal {
-    left = 0,
-    center = 1,
-    right = 2,
-    stretch = 3,
-    stretchAndFix = 4
-}
-export declare enum Vertical {
-    top = 0,
-    center = 1,
-    bottom = 2,
-    stretch = 3,
-    stretchAndFix = 4
-}
-export type Range = {
-    readonly min?: string;
-    readonly max?: string;
-    preferred?: string;
-};
-export type MarkedRange = Range & {
-    readonly marker?: string;
-};
-export type ElPlace = undefined | string | {
-    cellsOverWidth?: number;
-    cellsOverHeight?: number;
-};
-export declare enum Direction {
-    horizontal = 0,
-    vertical = 1
-}
+import { El, ElKind, Horizontal, Vertical, Range, ElPlace, Direction } from "./El.js";
 export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
-    allocate(node: ReactiveNode<El<T, M>>): El<T, M>;
+    create(node: ReactiveNode<El<T, M>>): El<T, M>;
 }
 export declare class ElImpl<T extends Element = any, M = any> implements El<T, M> {
     readonly node: ReactiveNode<El<T, M>>;

package/build/dist/source/{html/El.js → core/ElDriver.js}

@@ -8,49 +8,10 @@ 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 { ElKind, Horizontal, Vertical, Direction } from "./El.js";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
-export var ElKind;
-(function (ElKind) {
-    ElKind[ElKind["panel"] = 0] = "panel";
-    ElKind[ElKind["table"] = 1] = "table";
-    ElKind[ElKind["note"] = 2] = "note";
-    ElKind[ElKind["group"] = 3] = "group";
-    ElKind[ElKind["part"] = 4] = "part";
-    ElKind[ElKind["splitter"] = 5] = "splitter";
-    ElKind[ElKind["cursor"] = 6] = "cursor";
-    ElKind[ElKind["native"] = 7] = "native";
-})(ElKind || (ElKind = {}));
-export var Horizontal;
-(function (Horizontal) {
-    Horizontal[Horizontal["left"] = 0] = "left";
-    Horizontal[Horizontal["center"] = 1] = "center";
-    Horizontal[Horizontal["right"] = 2] = "right";
-    Horizontal[Horizontal["stretch"] = 3] = "stretch";
-    Horizontal[Horizontal["stretchAndFix"] = 4] = "stretchAndFix";
-})(Horizontal || (Horizontal = {}));
-export var Vertical;
-(function (Vertical) {
-    Vertical[Vertical["top"] = 0] = "top";
-    Vertical[Vertical["center"] = 1] = "center";
-    Vertical[Vertical["bottom"] = 2] = "bottom";
-    Vertical[Vertical["stretch"] = 3] = "stretch";
-    Vertical[Vertical["stretchAndFix"] = 4] = "stretchAndFix";
-})(Vertical || (Vertical = {}));
-export var Direction;
-(function (Direction) {
-    Direction[Direction["horizontal"] = 0] = "horizontal";
-    Direction[Direction["vertical"] = 1] = "vertical";
-})(Direction || (Direction = {}));
-class Size extends ObservableObject {
-    constructor() {
-        super();
-        this.raw = { min: "", max: "" };
-        this.minPx = 0;
-        this.maxPx = Number.POSITIVE_INFINITY;
-    }
-}
 export class ElDriver extends BaseDriver {
-    allocate(node) {
+    create(node) {
         return new ElImpl(node);
     }
 }
@@ -574,6 +535,14 @@ export class ElImpl {
             native.className = enabled ? styleName : "";
     }
 }
+class Size extends ObservableObject {
+    constructor() {
+        super();
+        this.raw = { min: "", max: "" };
+        this.minPx = 0;
+        this.maxPx = Number.POSITIVE_INFINITY;
+    }
+}
 export class ElLayoutInfo {
     constructor(prev) {
         this.x = prev.x;

package/build/dist/source/{html → core}/Elements.d.ts

@@ -1,6 +1,9 @@
 import { ReactiveNodeDecl, ReactiveNodeDriver, ReactiveNode, Script, Mode, MergedItem, ScriptAsync } from "reactronic";
-import { CursorCommandDriver, El, ElPlace } from "./El.js";
-import { HtmlDriver } from "./HtmlDriver.js";
+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(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>(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>>;

package/build/dist/source/{html → core}/Elements.js

@@ -1,9 +1,14 @@
 import { ReactiveNode, Mode, unobs } from "reactronic";
-import { Constants, CursorCommandDriver, ElKind, ElDriver, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
+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 } from "./HtmlDriver.js";
-import { clamp } from "./ElUtils.js";
+import { HtmlDriver, StaticDriver } from "./WebDriver.js";
+export function Window(contentOrDeclaration, contentAsync, 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);
+}
 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);
 }

package/build/dist/source/{html → core}/SplitViewMath.d.ts

@@ -1,5 +1,5 @@
 import { MergeList, ReactiveNode } from "reactronic";
-import { ElImpl } from "./El.js";
+import { ElImpl } from "./ElDriver.js";
 export declare function equal(a: number, b: number): boolean;
 export declare function less(a: number, b: number): boolean;
 export declare function greater(a: number, b: number): boolean;

package/build/dist/source/{html/HtmlDriver.d.ts → core/WebDriver.d.ts}

@@ -1,5 +1,6 @@
 import { ReactiveNode, Handler } from "reactronic";
-import { El, ElDriver } from "./El.js";
+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>;

package/build/dist/source/{html/HtmlDriver.js → core/WebDriver.js}

@@ -1,5 +1,5 @@
 import { ReactiveSystem, ReactiveNode, proceedSyncOrAsync } from "reactronic";
-import { Constants, ElDriver, ElImpl } from "./El.js";
+import { Constants, ElDriver, ElImpl } from "./ElDriver.js";
 export class WebDriver extends ElDriver {
     setNativeElement(node) {
     }

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

@@ -1 +1,8 @@
 export * from "./Restyler.js";
+export * from "./ElUtils.js";
+export * from "./El.js";
+export * from "./ElDriver.js";
+export * from "./WebDriver.js";
+export * from "./Sizes.js";
+export * from "./SplitViewMath.js";
+export * from "./Elements.js";

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

@@ -1 +1,8 @@
 export * from "./Restyler.js";
+export * from "./ElUtils.js";
+export * from "./El.js";
+export * from "./ElDriver.js";
+export * from "./WebDriver.js";
+export * from "./Sizes.js";
+export * from "./SplitViewMath.js";
+export * from "./Elements.js";

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

@@ -0,0 +1,8 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { El } from "verstak";
+export type ButtonModel = {
+    icon?: string;
+    label?: string;
+    action?(): void;
+};
+export declare function Button(declaration?: ReactiveNodeDecl<El<HTMLElement, ButtonModel>>): ReactiveNode<El<HTMLElement, ButtonModel>>;

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

@@ -0,0 +1,39 @@
+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";
+export function Button(declaration) {
+    return (Panel(ReactiveNode.withBasis(declaration, {
+        mode: Mode.autonomous,
+        preparation: el => {
+            var _a;
+            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({
+                icon: "fa-solid fa-square",
+                label: ReactiveNode.key,
+            }));
+        },
+        content: el => {
+            const m = el.model;
+            const theme = Theme.current.button;
+            el.useStylingPreset(theme.main);
+            if (m.icon) {
+                Icon(m.icon, {
+                    content: (el, base) => {
+                        base();
+                        el.useStylingPreset(theme.icon);
+                    },
+                });
+            }
+            if (m.label) {
+                Note(m.label, false, {
+                    content: (el, base) => {
+                        base();
+                        el.useStylingPreset(theme.label);
+                    },
+                });
+            }
+            OnClick(el.native, m.action);
+        },
+    })));
+}

package/build/dist/source/express/Field.v.d.ts

@@ -0,0 +1,16 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { FocusModel, El } from "verstak";
+import { ValuesOrRefs } from "./common/Utils.js";
+export type FieldModel<T = string> = FocusModel & {
+    icon?: string;
+    text: string;
+    options: Array<T>;
+    selected: T | undefined;
+    multiSelected: Set<T>;
+    position: number;
+    isMultiLineText: boolean;
+    isHotText: boolean;
+    inputStyle: string;
+};
+export declare function Field(declaration?: ReactiveNodeDecl<El<HTMLElement, FieldModel>>): ReactiveNode<El<HTMLElement, FieldModel<string>>>;
+export declare function composeFieldModel<T>(props?: Partial<ValuesOrRefs<FieldModel<T>>>): FieldModel<T>;

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

@@ -0,0 +1,118 @@
+import { Mode, ReactiveNode } from "reactronic";
+import { Panel, Note, OnFocus, rowBreak, Handling, KeyboardModifiers, Horizontal, Vertical } from "verstak";
+import { observableModel } from "./common/Utils.js";
+import { Theme } from "./Theme.js";
+import { Icon } from "./Icon.v.js";
+export function Field(declaration) {
+    return (Panel(ReactiveNode.withBasis(declaration, {
+        mode: Mode.autonomous,
+        preparation: el => {
+            var _a;
+            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeFieldModel());
+            el.native.dataForSensor.focus = el.model;
+        },
+        content: el => {
+            const m = el.model;
+            const theme = Theme.current.field;
+            el.useStylingPreset(theme.main);
+            if (m.icon)
+                Icon(m.icon, {
+                    content: (el, base) => {
+                        base();
+                        el.useStylingPreset(theme.icon);
+                    },
+                });
+            FieldInput(m, theme);
+            FieldPopup(m, theme);
+        },
+    })));
+}
+export function composeFieldModel(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return observableModel({
+        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 : [],
+        selected: props === null || props === void 0 ? void 0 : props.selected,
+        multiSelected: (_c = props === null || props === void 0 ? void 0 : props.multiSelected) !== null && _c !== void 0 ? _c : new Set(),
+        position: (_d = props === null || props === void 0 ? void 0 : props.position) !== null && _d !== void 0 ? _d : 0,
+        isMultiLineText: (_e = props === null || props === void 0 ? void 0 : props.isMultiLineText) !== null && _e !== void 0 ? _e : false,
+        isEditMode: (_f = props === null || props === void 0 ? void 0 : props.isEditMode) !== null && _f !== void 0 ? _f : false,
+        isHotText: (_g = props === null || props === void 0 ? void 0 : props.isHotText) !== null && _g !== void 0 ? _g : false,
+        inputStyle: (_h = props === null || props === void 0 ? void 0 : props.inputStyle) !== null && _h !== void 0 ? _h : "",
+    });
+}
+function FieldInput(model, s) {
+    return (Note(model.text, false, {
+        key: FieldInput.name,
+        preparation: (el, base) => {
+            const e = el.native;
+            el.useStylingPreset(s.input);
+            el.horizontally = Horizontal.stretch;
+            el.vertically = Vertical.stretch;
+            e.tabIndex = 0;
+            e.contentEditable = "true";
+            e.dataForSensor.focus = model;
+            base();
+        },
+        content: el => {
+            const e = el.native;
+            if (!model.isEditMode)
+                e.innerText = model.text;
+            Handling(() => {
+                const keyboard = e.sensors.keyboard;
+                if (keyboard.down) {
+                    if (isApplyKey(model, keyboard))
+                        selectAllAndPreventDefault(e, keyboard);
+                }
+                if (keyboard.up) {
+                    if (isApplyKey(model, keyboard)) {
+                        selectAllAndPreventDefault(e, keyboard);
+                        model.text = e.innerText;
+                    }
+                    else if (model.isHotText)
+                        model.text = e.innerText;
+                }
+            });
+            OnFocus(e, model);
+        },
+    }));
+}
+function FieldPopup(model, s) {
+    return (Panel({
+        key: FieldPopup.name,
+        content: el => {
+            el.useStylingPreset(s.popup);
+            Handling(() => model.position = el.native.sensors.scroll.y);
+            const visible = el.overlayVisible = model.isEditMode;
+            if (visible) {
+                const options = model.options;
+                if (options.length > 0) {
+                    for (const x of model.options) {
+                        rowBreak();
+                        Note(x, false, {
+                            key: x,
+                            preparation: el => {
+                                el.contentWrapping = false;
+                            },
+                        });
+                    }
+                }
+                else
+                    Note("(nothing)", false, { key: "(nothing)" });
+            }
+        },
+    }));
+}
+function isApplyKey(m, keyboard) {
+    const modifiers = keyboard.modifiers;
+    return keyboard.down === "Enter" && (!m.isMultiLineText || (modifiers & KeyboardModifiers.ctrlShiftMeta) > 0);
+}
+function selectAllAndPreventDefault(e, keyboard) {
+    const range = document.createRange();
+    range.selectNodeContents(e);
+    const sel = window.getSelection();
+    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+    sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+    keyboard.preventDefault = true;
+}

package/build/dist/source/express/Icon.v.d.ts

@@ -0,0 +1,3 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { El } from "verstak";
+export declare function Icon(name: string, declaration?: ReactiveNodeDecl<El<HTMLElement, void>>): ReactiveNode<El<HTMLElement, void>>;

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

@@ -0,0 +1,14 @@
+import { Mode, ReactiveNode } from "reactronic";
+import { Panel } from "verstak";
+import { Theme } from "./Theme.js";
+export function Icon(name, declaration) {
+    return (Panel(ReactiveNode.withBasis(declaration, {
+        mode: Mode.autonomous,
+        triggers: { name },
+        content: el => {
+            const theme = Theme.current.icon;
+            el.useStylingPreset(name);
+            el.useStylingPreset(theme.main);
+        },
+    })));
+}

package/build/dist/source/express/Image.v.d.ts

@@ -0,0 +1,6 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { El } from "verstak";
+export type ImageModel = {
+    source?: string;
+};
+export declare function Image(declaration?: ReactiveNodeDecl<El<HTMLElement, ImageModel>>): ReactiveNode<El<HTMLElement, ImageModel>>;

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

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

package/build/dist/source/express/Markdown.v.d.ts

@@ -0,0 +1 @@
+export declare function Markdown(content: string): import("reactronic").ReactiveNode<import("verstak").El<HTMLElement, void>>;

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

@@ -0,0 +1,18 @@
+import { Note } from "verstak";
+import Md from "markdown-it";
+import * as prism from "prismjs";
+export function Markdown(content) {
+    return (Note(md.render(content), true, {
+        preparation: (el, base) => {
+            el.contentWrapping = true;
+            base();
+        },
+    }));
+}
+const md = new Md({
+    html: true,
+    highlight: (str, lang, attrs) => {
+        const highlighted = prism.highlight(str, prism.languages[lang], lang);
+        return `<pre class="language-${lang}"><code>${highlighted}</code></pre>`;
+    },
+});

package/build/dist/source/express/Spinner.v.d.ts

@@ -0,0 +1,9 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { El } from "verstak";
+import { ValuesOrRefs } from "./common/Utils.js";
+export type SpinnerModel = {
+    active: boolean;
+    color: string;
+};
+export declare function Spinner(declaration?: ReactiveNodeDecl<El<HTMLElement, SpinnerModel>>): ReactiveNode<El<HTMLElement, SpinnerModel>>;
+export declare function composeSpinnerModel<T>(props?: Partial<ValuesOrRefs<SpinnerModel>>): SpinnerModel;

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

@@ -0,0 +1,23 @@
+import { Mode, ReactiveNode } from "reactronic";
+import { Panel, Note } from "verstak";
+import { observableModel } from "./common/Utils.js";
+export function Spinner(declaration) {
+    return (Panel(ReactiveNode.withBasis(declaration, {
+        mode: Mode.autonomous,
+        preparation: el => {
+            var _a;
+            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeSpinnerModel());
+        },
+        content: el => {
+            const m = el.model;
+            m.active && Note("loading...");
+        },
+    })));
+}
+export function composeSpinnerModel(props) {
+    var _a, _b;
+    return observableModel({
+        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 : "",
+    });
+}