@vandenberghinc/volt 1.2.6 → 1.2.8

package/frontend/dist/frontend/src/ui/title.js

@@ -0,0 +1,272 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+// Title.
+const default_title_style = {
+    "margin": "0px 0px 0px 0px",
+    "color": "inherit",
+    "white-space": "wrap",
+    "text-align": "inherit",
+    "font-weight": "700", // for safari since it inherits HTMLElement only.
+};
+let TitleElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "TitleElement",
+            default_style: { ...default_title_style },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var TitleElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            TitleElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Constructor.
+        constructor(text = "") {
+            // Initialize base class.
+            super({
+                derived: TitleElement,
+            });
+            // Set text.
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return TitleElement = _classThis;
+})();
+export { TitleElement };
+export const Title = Elements.wrapper(TitleElement);
+export const NullTitle = Elements.create_null(TitleElement);
+// Subtitle.
+let SubtitleElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "SubtitleElement",
+            tag: "h2",
+            default_style: { ...default_title_style },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var SubtitleElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SubtitleElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Constructor.
+        constructor(text = "") {
+            // Initialize base class.
+            super({
+                derived: SubtitleElement,
+            });
+            // Set text.
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return SubtitleElement = _classThis;
+})();
+export { SubtitleElement };
+export const Subtitle = Elements.wrapper(SubtitleElement);
+export const NullSubtitle = Elements.create_null(SubtitleElement);
+/** A specific title ensured to use the `h1` html tag. */
+let H1Element = (() => {
+    let _classDecorators = [Elements.create({ name: "H1Element", tag: "h1", default_style: { ...default_title_style } })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var H1Element = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            H1Element = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(text = "") {
+            super({ derived: H1Element });
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return H1Element = _classThis;
+})();
+export { H1Element };
+export const H1 = Elements.wrapper(H1Element);
+export const NullH1 = Elements.create_null(H1Element);
+/** A specific title ensured to use the `h2` html tag. */
+let H2Element = (() => {
+    let _classDecorators = [Elements.create({ name: "H2Element", tag: "h2", default_style: { ...default_title_style } })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var H2Element = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            H2Element = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(text = "") {
+            super({ derived: H2Element });
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return H2Element = _classThis;
+})();
+export { H2Element };
+export const H2 = Elements.wrapper(H2Element);
+export const NullH2 = Elements.create_null(H2Element);
+/** A specific title ensured to use the `h3` html tag. */
+let H3Element = (() => {
+    let _classDecorators = [Elements.create({ name: "H3Element", tag: "h3", default_style: { ...default_title_style } })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var H3Element = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            H3Element = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(text = "") {
+            super({ derived: H3Element });
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return H3Element = _classThis;
+})();
+export { H3Element };
+export const H3 = Elements.wrapper(H3Element);
+export const NullH3 = Elements.create_null(H3Element);
+/** A specific title ensured to use the `h4` html tag. */
+let H4Element = (() => {
+    let _classDecorators = [Elements.create({ name: "H4Element", tag: "h4", default_style: { ...default_title_style } })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var H4Element = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            H4Element = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(text = "") {
+            super({ derived: H4Element });
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return H4Element = _classThis;
+})();
+export { H4Element };
+export const H4 = Elements.wrapper(H4Element);
+export const NullH4 = Elements.create_null(H4Element);
+/** A specific title ensured to use the `h5` html tag. */
+let H5Element = (() => {
+    let _classDecorators = [Elements.create({ name: "H5Element", tag: "h5", default_style: { ...default_title_style } })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var H5Element = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            H5Element = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(text = "") {
+            super({ derived: H5Element });
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return H5Element = _classThis;
+})();
+export { H5Element };
+export const H5 = Elements.wrapper(H5Element);
+export const NullH5 = Elements.create_null(H5Element);
+/** A specific title ensured to use the `h6` html tag. */
+let H6Element = (() => {
+    let _classDecorators = [Elements.create({ name: "H6Element", tag: "h6", default_style: { ...default_title_style } })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.h1;
+    var H6Element = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            H6Element = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(text = "") {
+            super({ derived: H6Element });
+            this.text(text); // do not use inner_html since the text might contain "<" etc.
+        }
+    };
+    return H6Element = _classThis;
+})();
+export { H6Element };
+export const H6 = Elements.wrapper(H6Element);
+export const NullH6 = Elements.create_null(H6Element);

package/frontend/dist/frontend/src/ui/ui.d.ts

@@ -0,0 +1,35 @@
+export * from "./span.js";
+export * from "./style.js";
+export * from "./button.js";
+export * from "./border_button.js";
+export * from "./canvas.js";
+export * from "./checkbox.js";
+export * from "./code.js";
+export * from "./context_menu.js";
+export * from "./css.js";
+export * from "./divider.js";
+export * from "./dropdown.js";
+export * from "./for_each.js";
+export * from "./form.js";
+export * from "./frame_modes.js";
+export * from "./google_map.js";
+export * from "./gradient.js";
+export * from "./image.js";
+export * from "./input.js";
+export * from "./link.js";
+export * from "./list.js";
+export * from "./loaders.js";
+export * from "./popup.js";
+export * from "./pseudo.js";
+export * from "./scroller.js";
+export * from "./slider.js";
+export * from "./spacer.js";
+export * from "./stack.js";
+export * from "./steps.js";
+export * from "./switch.js";
+export * from "./table.js";
+export * from "./tabs.js";
+export * from "./text.js";
+export * from "./title.js";
+export * from "./view.js";
+export type { AnyElement } from "./any_element.d.ts";

package/frontend/dist/frontend/src/ui/ui.js

@@ -0,0 +1,38 @@
+// VoltUI.
+export * from "./span.js";
+export * from "./style.js";
+export * from "./button.js";
+export * from "./border_button.js";
+export * from "./canvas.js";
+export * from "./checkbox.js";
+export * from "./code.js";
+export * from "./context_menu.js";
+export * from "./css.js";
+export * from "./divider.js";
+export * from "./dropdown.js";
+export * from "./for_each.js";
+export * from "./form.js";
+export * from "./frame_modes.js";
+export * from "./google_map.js";
+export * from "./gradient.js";
+export * from "./image.js";
+export * from "./input.js";
+export * from "./link.js";
+export * from "./list.js";
+export * from "./loaders.js";
+export * from "./popup.js";
+export * from "./pseudo.js";
+export * from "./scroller.js";
+export * from "./slider.js";
+export * from "./spacer.js";
+export * from "./stack.js";
+export * from "./steps.js";
+export * from "./switch.js";
+export * from "./table.js";
+export * from "./tabs.js";
+export * from "./text.js";
+export * from "./title.js";
+export * from "./view.js";
+// import type { AnyElement } from "./any_element.d.ts"
+// const X: Record<string, AnyElement> = {};
+// const y: number = X["test"]!.offsetTop;

package/frontend/dist/frontend/src/ui/view.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementTagMap, AppendType } from "../elements/module.js";
+export declare class ViewElement extends VElementTagMap.div {
+    constructor(...children: AppendType[]);
+}
+export declare const View: <Extensions extends object = {}>(...args: AppendType[]) => ViewElement & Extensions;
+export declare const NullView: <Extensions extends object = {}>() => ViewElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        ViewElement: ViewElement;
+    }
+}

package/frontend/dist/frontend/src/ui/view.js

@@ -0,0 +1,88 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+// Scroller.
+let ViewElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "ViewElement",
+            default_style: {
+                "position": "absolute",
+                "top": "0",
+                "right": "0",
+                "bottom": "0",
+                "left": "0",
+                "padding": "0px",
+                "overflow": "hidden",
+                "overflow-y": "none",
+                "background": "none",
+                "display": "flex", // to support vertical spacers.
+                // "text-align": "start",
+                "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+                "flex-direction": "column",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.div;
+    var ViewElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ViewElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Constructor.
+        constructor(...children) {
+            // Initialize base class.
+            super({
+                derived: ViewElement,
+            });
+            // Append children.
+            this.append(...children);
+        }
+    };
+    return ViewElement = _classThis;
+})();
+export { ViewElement };
+export const View = Elements.wrapper(ViewElement);
+export const NullView = Elements.create_null(ViewElement);

package/frontend/dist/frontend/src/volt.d.ts

@@ -0,0 +1,20 @@
+export declare const production: boolean;
+export * from "./modules/auth.js";
+export * from "./modules/color.js";
+export * from "./modules/compression.js";
+export * from "./modules/cookies.js";
+export * from "./modules/events.js";
+export * from "./modules/google.js";
+export * from "./modules/meta.js";
+export * from "./modules/paddle.js";
+export * from "./modules/statics.js";
+export * from "./modules/support.js";
+export * from "./modules/themes.js";
+export * from "./modules/user.js";
+export * from "./modules/utils.js";
+export * from "./modules/theme.js";
+export * from "./modules/request.js";
+export * from "./modules/attachment.js";
+export * from "./elements/module.js";
+export * from "./ui/ui.js";
+export * from "../../backend/src/status.js";

package/frontend/dist/frontend/src/volt.js

@@ -0,0 +1,27 @@
+// Vars.
+// @ts-ignore
+export const production = "{{PRODUCTION}}" === "true";
+// Modules.
+export * from "./modules/auth.js";
+export * from "./modules/color.js";
+// export * from "./modules/colors.js"
+export * from "./modules/compression.js";
+export * from "./modules/cookies.js";
+export * from "./modules/events.js";
+export * from "./modules/google.js";
+export * from "./modules/meta.js";
+export * from "./modules/paddle.js";
+export * from "./modules/statics.js";
+export * from "./modules/support.js";
+export * from "./modules/themes.js";
+export * from "./modules/user.js";
+export * from "./modules/utils.js";
+export * from "./modules/theme.js";
+export * from "./modules/request.js";
+export * from "./modules/attachment.js";
+// Elements.
+export * from "./elements/module.js";
+// VoltUI.
+export * from "./ui/ui.js";
+// Backend.
+export * from "../../backend/src/status.js";

package/frontend/examples/theme/theme.ts

@@ -0,0 +1,58 @@
+// @ts-nocheck
+
+// Imports.
+// import * as volt from "@vandenberghinc/volt/frontend";
+
+// ---------------------------------------------------------
+// Themes.	
+
+// Create theme from options.
+const create_theme = (opts: {
+    bg: string;
+    fg: string;
+    primary: string;
+}) => {
+    return {
+        /** 
+         * The relative value for font sizes, and the font size used for paragraphs.
+         * @warning work with a single fixed font size, and base all other font sizes on this font size using `Theme.multiply("font_size", 1.0)`.
+         */
+        font_size: 16,
+
+        /** Code fonts */
+        font: "'Mona Sans', sans-serif",
+        code_font: "'Menlo', 'Consolas', monospace",
+
+        /** Colors */
+        primary: opts.primary,
+        bg: opts.bg,
+        bg_0: opts.bg,
+        bg_1: new volt.Color(opts.bg).auto_darken_lighten(0.02).rgb(),
+        bg_2: new volt.Color(opts.bg).auto_darken_lighten(0.04).rgb(),
+        bg_3: new volt.Color(opts.bg).auto_darken_lighten(0.08).rgb(),
+        bg_hover: new volt.Color(opts.bg).auto_darken_lighten(0.02).rgb(),
+        div_bg: volt.Color.opposite_s(opts.bg).opacity(0.075).rgb(),
+        fg: opts.fg,
+        fg_0: opts.fg,
+        fg_1: new volt.Color(opts.bg).auto_darken_lighten(0.7).rgb(),
+        fg_2: new volt.Color(opts.bg).auto_darken_lighten(0.5).rgb(),
+
+        green: "#60B05B",
+        red: "#CA3140",
+        yellow: "#F1DA6C", //"#FFFC79",
+    }
+}
+
+// Initialize the theme.
+export const Theme = new volt.Theme("my_website", {
+    dark: create_theme({
+        bg: "#0B0E12",
+        fg: "#FFFFFF", // #F0F0F0
+        primary: `linear-gradient(110deg, #00FDF1, rgb(87, 149, 243) 7.5%, #B96593)`,
+    }),
+    light: create_theme({
+        bg: "#F0F0F0",
+        fg: "#0E1D32",
+        primary: `linear-gradient(110deg, #00FDF1, rgb(87, 149, 243) 7.5%, #B96593)`,
+    }),
+}) as volt.ExtendTheme<ReturnType<typeof create_theme>>;

package/frontend/tools/bundle_d_ts.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+/**
+ * Create a single bundle .d.ts file from multiple .d.ts files.
+ */
+
+import fs from 'fs/promises';
+import { glob } from 'glob';
+import { fileURLToPath } from 'url';
+import * as path from 'path';
+import * as vlib from "@vandenberghinc/vlib"
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function main() {
+    
+    const target = path.join(__dirname, '..', 'dist/frontend/');
+    const patterns = [target + '/**/*.d.ts'];
+    
+    console.log("Target directory:", target)
+    
+    const create_bundle = async (name = "lml_bundle.d.ts", exclude = undefined) => {
+        exclude ??= [];
+        exclude.push("**/lml_bundle*.d.ts");
+        const files = await glob(patterns, { nodir: true, ignore: exclude });
+        const bundle = [];
+        const out = path.join(target, name);
+        console.log("Creating bundle:", out)
+        const file_sizes = [];
+        for (const file of files) {
+            const rel_path = path.relative(target, file);
+            if (rel_path === name || (exclude != null && exclude.includes(rel_path))) continue; // Skip output file if re-running
+            console.log(" - included", rel_path)
+
+            // Load.
+            let code = await fs.readFile(file, 'utf8');
+
+            // Process `elements/base.d.ts`
+            if (rel_path === 'src/elements/base.d.ts') {
+                // only keep everything before the `extend()` function.
+                code = code.split("export declare function extend<")[0];
+            }
+
+            // Add to file sizes.
+            file_sizes.push({ file: rel_path, size: new vlib.Path(file).size });
+
+            // Add to file.
+            bundle.push(`// ---- ${path.relative(target, file)} ----\n` + code);
+        }
+
+        // Log file sizes
+        file_sizes.sort((a, b) => b.size - a.size);
+        console.log("Biggest files:");
+        for (const fs of file_sizes.slice(0, 10)) {
+            console.log(` - ${vlib.System.format_bytes(fs.size).padStart(10)}  ${fs.file}`);
+        }
+
+        // Write.
+        await fs.writeFile(out, bundle.join('\n\n'), 'utf8');
+        console.log(`Bundled ${files.length} .d.ts files into ${out} with a size of ${vlib.System.format_bytes(new vlib.Path(out).size)}.`);
+    }
+
+    await create_bundle("lml_bundle.d.ts");
+    await create_bundle("lml_bundle.ui.d.ts", ["src/modules/paddle.d.ts"]);
+}
+
+main().catch(err => {
+    console.error(err);
+    process.exit(1);
+});
+