verstak 0.24.502 → 0.91.25002

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;
+        },
+        script: el => {
+            const m = el.model;
+            const theme = Theme.current.field;
+            el.useStylingPreset(theme.main);
+            if (m.icon)
+                Icon(m.icon, {
+                    script: (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();
+        },
+        script: 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,
+        script: 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 },
+        script: 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 }));
+        },
+        script: 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());
+        },
+        script: 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 : "",
+    });
+}

package/build/dist/source/express/Theme.d.ts

@@ -0,0 +1,34 @@
+import { AbstractTheme } from "./theme/Styling.js";
+import { ButtonStyling, DefaultButtonStyling } from "./theme/Button.s.js";
+import { FieldStyling, DefaultFieldStyling } from "./theme/Field.s.js";
+import { IconStyling, DefaultIconStyling } from "./theme/Icon.s.js";
+import { ToggleStyling, DefaultToggleStyling } from "./theme/Toggle.s.js";
+export { type ButtonStyling, type DefaultButtonStyling } from "./theme/Button.s.js";
+export { type FieldStyling, type DefaultFieldStyling } from "./theme/Field.s.js";
+export { type IconStyling, type DefaultIconStyling } from "./theme/Icon.s.js";
+export { type ToggleStyling, type DefaultToggleStyling } from "./theme/Toggle.s.js";
+export type VerstakExpressTheme = AbstractTheme & {
+    readonly button: ButtonStyling;
+    readonly field: FieldStyling;
+    readonly icon: IconStyling;
+    readonly toggle: ToggleStyling;
+};
+export declare class Theme implements VerstakExpressTheme {
+    private static readonly gCurrent;
+    static get current(): VerstakExpressTheme;
+    static set current(value: VerstakExpressTheme);
+    name: string;
+    fillColor: string;
+    textColor: string;
+    positiveColor: string;
+    negativeColor: string;
+    borderRadius: string;
+    outlineWidth: string;
+    outlineColor: string;
+    outlinePadding: string;
+    shadow: string;
+    button: DefaultButtonStyling;
+    field: DefaultFieldStyling;
+    icon: DefaultIconStyling;
+    toggle: DefaultToggleStyling;
+}

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

@@ -0,0 +1,30 @@
+import { Transaction, 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";
+import { DefaultToggleStyling } from "./theme/Toggle.s.js";
+export class Theme {
+    constructor() {
+        this.name = "Default Gost Theme";
+        this.fillColor = "white";
+        this.textColor = "black";
+        this.positiveColor = "green";
+        this.negativeColor = "red";
+        this.borderRadius = "0.35rem";
+        this.outlineWidth = "1px";
+        this.outlineColor = "rgba(127, 127, 127, 0.5)";
+        this.outlinePadding = "0.25em";
+        this.shadow = "0.1rem 0.1rem 0.5rem 0 rgba(127, 127, 127, 0.5)";
+        this.button = new DefaultButtonStyling(this);
+        this.field = new DefaultFieldStyling(this);
+        this.icon = new DefaultIconStyling(this);
+        this.toggle = new DefaultToggleStyling(this);
+    }
+    static get current() {
+        return Theme.gCurrent.value;
+    }
+    static set current(value) {
+        Theme.gCurrent.value = value;
+    }
+}
+Theme.gCurrent = new ReactiveNodeVariable(Transaction.run({ isolation: Isolation.disjoinFromOuterTransaction }, () => new Theme()));

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

@@ -0,0 +1,8 @@
+import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
+import { El } from "verstak";
+export type ToggleModel = {
+    label?: string;
+    checked?: boolean;
+    color?: string;
+};
+export declare function Toggle(declaration?: ReactiveNodeDecl<El<HTMLElement, ToggleModel>>): ReactiveNode<El<HTMLElement, ToggleModel>>;

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

@@ -0,0 +1,40 @@
+import { Transaction, Mode, ReactiveNode } from "reactronic";
+import { Panel, Note } from "verstak";
+import { observableModel } from "./common/Utils.js";
+import { Theme } from "./Theme.js";
+import { Icon } from "./Icon.v.js";
+export function Toggle(declaration) {
+    return (Panel(ReactiveNode.withBasis(declaration, {
+        mode: Mode.autonomous,
+        preparation: el => {
+            var _a;
+            (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({
+                label: ReactiveNode.key,
+                checked: true,
+                color: "green"
+            }));
+            el.native.onclick = () => Transaction.run(null, () => el.model.checked = !el.model.checked);
+        },
+        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"}`, {
+                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)
+                Note(m.label, false, {
+                    script: (el, base) => {
+                        base();
+                        el.useStylingPreset(toggleTheme.label);
+                    },
+                });
+        },
+    })));
+}

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

@@ -0,0 +1,9 @@
+export * from "./Button.v.js";
+export * from "./Field.v.js";
+export * from "./Icon.v.js";
+export * from "./Image.v.js";
+export * from "./Spinner.v.js";
+export * from "./Toggle.v.js";
+export * from "./Markdown.v.js";
+export * from "./Theme.js";
+export { observableModel } from "./common/Utils.js";

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

@@ -0,0 +1,9 @@
+export * from "./Button.v.js";
+export * from "./Field.v.js";
+export * from "./Icon.v.js";
+export * from "./Image.v.js";
+export * from "./Spinner.v.js";
+export * from "./Toggle.v.js";
+export * from "./Markdown.v.js";
+export * from "./Theme.js";
+export { observableModel } from "./common/Utils.js";

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

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

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

@@ -0,0 +1,26 @@
+import { ObservableObject, Ref, Transaction, Isolation } from "reactronic";
+export function observableModel(modelProps) {
+    return Transaction.run({ isolation: Isolation.disjoinFromOuterTransaction }, () => new ObservableComposition(modelProps));
+}
+class ObservableComposition extends ObservableObject {
+    constructor(composition) {
+        super();
+        convertValuesToFieldsAndRefsToGetSet(this, composition);
+    }
+}
+function convertValuesToFieldsAndRefsToGetSet(target, composition) {
+    for (const key in composition) {
+        const x = composition[key];
+        if (x instanceof Ref) {
+            Object.defineProperty(target, key, {
+                get() { return x.variable; },
+                set(v) { x.variable = v; return true; },
+                enumerable: true,
+            });
+        }
+        else {
+            const t = target;
+            t[key] = x;
+        }
+    }
+}

package/build/dist/source/express/theme/Button.s.d.ts

@@ -0,0 +1,11 @@
+import { Styling } from "./Styling.js";
+export type ButtonStyling = {
+    main: string;
+    icon: string;
+    label: string;
+};
+export declare class DefaultButtonStyling extends Styling implements ButtonStyling {
+    get main(): string;
+    get icon(): string;
+    get label(): string;
+}

package/build/dist/source/express/theme/Button.s.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { css } from "@emotion/css";
+import { Styling } from "./Styling.js";
+export class DefaultButtonStyling extends Styling {
+    get main() {
+        return css `
+    cursor: pointer;
+    border-radius: ${this.$.borderRadius};
+    user-select: none;
+  `;
+    }
+    get icon() {
+        return css `
+    min-width: auto;
+    margin-left: ${this.$.outlinePadding};
+    margin-right: ${this.$.outlinePadding};
+  `;
+    }
+    get label() {
+        return css `
+    margin-left: ${this.$.outlinePadding};
+    margin-right: ${this.$.outlinePadding};
+  `;
+    }
+}
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultButtonStyling.prototype, "main", null);
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultButtonStyling.prototype, "icon", null);
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultButtonStyling.prototype, "label", null);

package/build/dist/source/express/theme/Field.s.d.ts

@@ -0,0 +1,13 @@
+import { Styling } from "./Styling.js";
+export type FieldStyling = {
+    main: string;
+    icon: string;
+    input: string;
+    popup: string;
+};
+export declare class DefaultFieldStyling extends Styling implements FieldStyling {
+    get main(): string;
+    get icon(): string;
+    get input(): string;
+    get popup(): string;
+}

package/build/dist/source/express/theme/Field.s.js

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { css } from "@emotion/css";
+import { Styling } from "./Styling.js";
+export class DefaultFieldStyling extends Styling {
+    get main() {
+        return css `
+    border-radius: ${this.$.borderRadius};
+    outline: ${this.$.outlineWidth} solid ${this.$.outlineColor};
+    outline-offset: -${this.$.outlineWidth};
+  `;
+    }
+    get icon() {
+        return css `
+    margin-left: ${this.$.outlinePadding};
+    min-width: 1.25em;
+    text-align: center;
+    color: ${this.$.outlineColor};
+  `;
+    }
+    get input() {
+        return css `
+    padding: ${this.$.outlinePadding};
+  `;
+    }
+    get popup() {
+        return css `
+    border-radius: ${this.$.borderRadius};
+    outline: ${this.$.outlineWidth} solid ${this.$.outlineColor};
+    outline-offset: -${this.$.outlineWidth};
+    padding: ${this.$.outlinePadding};
+    background-color: ${this.$.fillColor};
+    margin-top: -${this.$.outlineWidth};
+    margin-bottom: -${this.$.outlineWidth};
+    box-shadow: ${this.$.shadow};
+    overflow: scroll;
+    height: 4rem;
+  `;
+    }
+}
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultFieldStyling.prototype, "main", null);
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultFieldStyling.prototype, "icon", null);
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultFieldStyling.prototype, "input", null);
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultFieldStyling.prototype, "popup", null);

package/build/dist/source/express/theme/Icon.s.d.ts

@@ -0,0 +1,7 @@
+import { Styling } from "./Styling.js";
+export type IconStyling = {
+    main: string;
+};
+export declare class DefaultIconStyling extends Styling implements IconStyling {
+    get main(): string;
+}

package/build/dist/source/express/theme/Icon.s.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { css } from "@emotion/css";
+import { Styling } from "./Styling.js";
+export class DefaultIconStyling extends Styling {
+    get main() {
+        return css `
+    min-width: 1.25em;
+    min-height: auto;
+    text-align: center;
+  `;
+    }
+}
+__decorate([
+    cached,
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], DefaultIconStyling.prototype, "main", null);

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

@@ -0,0 +1,16 @@
+import { ObservableObject } from "reactronic";
+export type AbstractTheme = {
+    fillColor: string;
+    textColor: string;
+    positiveColor: string;
+    negativeColor: string;
+    borderRadius: string;
+    outlineWidth: string;
+    outlineColor: string;
+    outlinePadding: string;
+    shadow: string;
+};
+export declare class Styling extends ObservableObject {
+    protected readonly $: AbstractTheme;
+    constructor($: AbstractTheme);
+}

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

@@ -0,0 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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";
+export class Styling extends ObservableObject {
+    constructor($) {
+        super();
+        this.$ = $;
+    }
+}
+__decorate([
+    raw,
+    __metadata("design:type", Object)
+], Styling.prototype, "$", void 0);

package/build/dist/source/express/theme/Toggle.s.d.ts

@@ -0,0 +1,11 @@
+import { Styling } from "./Styling.js";
+export type ToggleStyling = {
+    main: string;
+    icon: string;
+    label: string;
+};
+export declare class DefaultToggleStyling extends Styling implements ToggleStyling {
+    get main(): string;
+    get icon(): string;
+    get label(): string;
+}