@seelen-ui/lib 2.4.9 → 2.4.10

package/script/src/state/theme/theming.js

@@ -1,6 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.startThemingTool = startThemingTool;
 exports.startDateCssVariables = startDateCssVariables;
+const ui_colors_js_1 = require("../../system_state/ui_colors.js");
+const DOM_js_1 = require("../../utils/DOM.js");
+const mod_js_1 = require("../settings/mod.js");
+const mod_js_2 = require("./mod.js");
+/**
+ * This will apply the active themes for this widget, and automatically update
+ * when the themes or settings change. Also will add the systehm ui colors to the document.
+ */
+async function startThemingTool() {
+    let settings = await mod_js_1.Settings.getAsync();
+    let themes = await mod_js_2.ThemeList.getAsync();
+    await mod_js_2.ThemeList.onChange((newThemes) => {
+        themes = newThemes;
+        themes.applyToDocument(settings.activeThemes, settings.byTheme);
+    });
+    await mod_js_1.Settings.onChange((newSettings) => {
+        settings = newSettings;
+        themes.applyToDocument(settings.activeThemes, settings.byTheme);
+    });
+    (await ui_colors_js_1.UIColors.getAsync()).setAsCssVariables();
+    await ui_colors_js_1.UIColors.onChange((colors) => colors.setAsCssVariables());
+    startDateCssVariables();
+    themes.applyToDocument(settings.activeThemes, settings.byTheme);
+}
 function startDateCssVariables() {
     // Set initial values immediately
     updateDateCssVariables();
@@ -20,43 +45,16 @@ function updateDateCssVariables() {
     const dayOfMonth = now.getDate(); // 1-31
     const monthNumber = now.getMonth() + 1; // 1-12
     const year = now.getFullYear(); // 2025, etc.
-    insertIntoStyleSheet({
-        // Time variables
-        "--date-hour": String(hour),
-        "--date-minute": String(minute),
-        // Date name variables (localized)
-        "--date-day-name": dayName,
-        "--date-month-name": monthName,
-        // Date numeric variables
-        "--date-day": String(dayOfMonth),
-        "--date-month": String(monthNumber),
-        "--date-year": String(year),
-    });
-}
-function getRuntimeStyleSheet() {
-    const styleId = "slu-lib-date-variables";
-    let styleElement = document.getElementById(styleId);
-    if (!styleElement) {
-        styleElement = document.createElement("style");
-        styleElement.id = styleId;
-        styleElement.textContent = ":root {\n}";
-        document.head.appendChild(styleElement);
-    }
-    return styleElement;
-}
-function insertIntoStyleSheet(obj) {
-    const sheet = getRuntimeStyleSheet();
-    const lines = sheet.textContent.split("\n");
-    lines.pop(); // remove the closing brace
-    for (const [key, value] of Object.entries(obj)) {
-        const old = lines.findIndex((line) => line.startsWith(key));
-        if (old !== -1) {
-            lines[old] = `${key}: ${value};`;
-        }
-        else {
-            lines.push(`${key}: ${value};`);
-        }
-    }
-    lines.push("}");
-    sheet.textContent = lines.join("\n");
+    const styleSheet = new DOM_js_1.RuntimeStyleSheet("@runtime/date-variables");
+    // Time variables
+    styleSheet.addVariable("--date-hour", String(hour));
+    styleSheet.addVariable("--date-minute", String(minute));
+    // Date name variables (localized)
+    styleSheet.addVariable("--date-day-name", dayName);
+    styleSheet.addVariable("--date-month-name", monthName);
+    // Date numeric variables
+    styleSheet.addVariable("--date-day", String(dayOfMonth));
+    styleSheet.addVariable("--date-month", String(monthNumber));
+    styleSheet.addVariable("--date-year", String(year));
+    styleSheet.applyToDocument();
 }

package/script/src/state/wallpaper/mod.d.ts

@@ -1,14 +1,16 @@
 import type { Wallpaper as IWallpaper, WallpaperInstanceSettings } from "../../../gen/types/mod.js";
 import { type UnSubscriber } from "../../handlers/mod.js";
 import { List } from "../../utils/List.js";
-import { Wrapper } from "../../utils/Wrapper.js";
 export declare const SUPPORTED_IMAGE_WALLPAPER_EXTENSIONS: string[];
 export declare const SUPPORTED_VIDEO_WALLPAPER_EXTENSIONS: string[];
 export declare class WallpaperList extends List<IWallpaper> {
     static getAsync(): Promise<WallpaperList>;
     static onChange(cb: (payload: WallpaperList) => void): Promise<UnSubscriber>;
 }
-export declare class WallpaperConfiguration extends Wrapper<WallpaperInstanceSettings> {
+export interface WallpaperConfiguration extends WallpaperInstanceSettings {
+}
+export declare class WallpaperConfiguration {
+    constructor(plain: WallpaperInstanceSettings);
     static default(): Promise<WallpaperConfiguration>;
 }
 //# sourceMappingURL=mod.d.ts.map

package/script/src/state/wallpaper/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/state/wallpaper/mod.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,UAAU,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEpG,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,eAAO,MAAM,oCAAoC,UAYhD,CAAC;AAEF,eAAO,MAAM,oCAAoC,UAQhD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI,CAAC,UAAU,CAAC;IACjD,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,aAAa,CAAC;IAIzC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;CAG7E;AAED,qBAAa,sBAAuB,SAAQ,OAAO,CAAC,yBAAyB,CAAC;IAC5E,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,sBAAsB,CAAC;CAGlD"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/state/wallpaper/mod.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,UAAU,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEpG,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAG3C,eAAO,MAAM,oCAAoC,UAYhD,CAAC;AAEF,eAAO,MAAM,oCAAoC,UAQhD,CAAC;AAEF,qBAAa,aAAc,SAAQ,IAAI,CAAC,UAAU,CAAC;IACjD,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,aAAa,CAAC;IAIzC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;CAG7E;AAED,MAAM,WAAW,sBAAuB,SAAQ,yBAAyB;CAAG;AAC5E,qBAAa,sBAAsB;gBACrB,KAAK,EAAE,yBAAyB;IAI5C,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,sBAAsB,CAAC;CAGlD"}

package/script/src/state/wallpaper/mod.js

@@ -4,7 +4,6 @@ exports.WallpaperConfiguration = exports.WallpaperList = exports.SUPPORTED_VIDEO
 const mod_js_1 = require("../../handlers/mod.js");
 const List_js_1 = require("../../utils/List.js");
 const State_js_1 = require("../../utils/State.js");
-const Wrapper_js_1 = require("../../utils/Wrapper.js");
 exports.SUPPORTED_IMAGE_WALLPAPER_EXTENSIONS = [
     "apng",
     "avif",
@@ -36,7 +35,10 @@ class WallpaperList extends List_js_1.List {
     }
 }
 exports.WallpaperList = WallpaperList;
-class WallpaperConfiguration extends Wrapper_js_1.Wrapper {
+class WallpaperConfiguration {
+    constructor(plain) {
+        Object.assign(this, plain);
+    }
     static default() {
         return (0, State_js_1.newFromInvoke)(this, mod_js_1.SeelenCommand.StateGetDefaultWallpaperSettings);
     }

package/script/src/state/widget/mod.d.ts

@@ -14,7 +14,7 @@ export declare class WidgetList extends List<IWidget> {
     static onChange(cb: (payload: WidgetList) => void): Promise<UnSubscriber>;
     findById(id: WidgetId): IWidget | undefined;
 }
-interface WidgetInformation {
+export interface WidgetInformation {
     /** decoded webview label */
     label: string;
     /** Will be present if the widget replicas is set to by monitor */
@@ -26,6 +26,20 @@ interface WidgetInformation {
         readonly [key in string]?: string;
     };
 }
+export interface InitWidgetOptions {
+    /**
+     * @default !widget.lazy
+     */
+    show?: boolean;
+    /**
+     * Will auto size the widget to the content size of the element
+     * @example
+     *  autoSizeByContent: document.body,
+     *  autoSizeByContent: document.getElementById("root"),
+     * @default undefined
+     */
+    autoSizeByContent?: HTMLElement | null;
+}
 /**
  * Represents the widget instance running in the current webview
  */
@@ -38,6 +52,9 @@ export declare class Widget {
     readonly decoded: WidgetInformation;
     /** current webview window */
     readonly webview: WebviewWindow;
+    private autoSizer?;
+    private initOptions;
+    private runtimeState;
     private constructor();
     private static getDecodedWebviewLabel;
     /** Will throw if the library is being used on a non Seelen UI environment */
@@ -55,17 +72,23 @@ export declare class Widget {
     /** Will apply the recommended settings for a popup widget */
     private applyPopupPreset;
     /**
-     * Will restore the saved position and size of the widget after that
-     * will store the position and size of the widget on change.
+     * Will restore the saved position and size of the widget on start,
+     * after that will store the position and size of the widget on change.
      */
     persistPositionAndSize(): Promise<void>;
-    autoSizeWebviewByElement(element?: HTMLElement): void;
     /**
-     * Will initialize the widget based on the preset, this function won't show the widget.
-     * You need to call `webview.show()` to show the widget.
+     * Will initialize the widget based on the preset and mark it as `pending`, this function won't show the widget.
+     * This should be called before any other action on the widget. After this you should call
+     * `ready` to mark the widget as ready and show it.
+     */
+    init(options?: InitWidgetOptions): Promise<void>;
+    /**
+     * Will mark the widget as `ready` and pool pending triggers.
+     *
+     * If the widget is not lazy this will inmediately show the widget.
+     * Lazy widget should be shown on trigger action.
      */
-    init(): Promise<void>;
+    ready(): Promise<void>;
     onTrigger(cb: (args: WidgetTriggerPayload) => void): void;
 }
-export {};
 //# sourceMappingURL=mod.d.ts.map

package/script/src/state/widget/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/mod.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,QAAQ,EAEb,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAyC,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAS5F,eAAO,MAAM,sBAAsB,EAAE,QAAyC,CAAC;AAC/E,eAAO,MAAM,mBAAmB,EAAE,QAAsC,CAAC;AACzE,eAAO,MAAM,iBAAiB,EAAE,QAAoC,CAAC;AACrE,eAAO,MAAM,qBAAqB,EAAE,QAA8C,CAAC;AACnF,eAAO,MAAM,2BAA2B,EAAE,QAA+C,CAAC;AAC1F,eAAO,MAAM,sBAAsB,EAAE,QAAyC,CAAC;AAC/E,eAAO,MAAM,kBAAkB,EAAE,QAAkD,CAAC;AAEpF,qBAAa,UAAW,SAAQ,IAAI,CAAC,OAAO,CAAC;IAC3C,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,UAAU,CAAC;IAItC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;IAIzE,QAAQ,CAAC,EAAE,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS;CAG5C;AAED,UAAU,iBAAiB;IACzB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gEAAgE;IAChE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,MAAM,EAAE;QAAE,QAAQ,EAAE,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM;KAAE,CAAC;CAC/C;AAED;;GAEG;AACH,qBAAa,MAAM;IACjB,gBAAgB;IAChB,SAAgB,EAAE,EAAE,QAAQ,CAAC;IAC7B,wBAAwB;IACxB,SAAgB,GAAG,EAAE,OAAO,CAAC;IAC7B,0CAA0C;IAC1C,SAAgB,OAAO,EAAE,iBAAiB,CAAC;IAC3C,6BAA6B;IAC7B,SAAgB,OAAO,EAAE,aAAa,CAAC;IAEvC,OAAO;IAiBP,OAAO,CAAC,MAAM,CAAC,sBAAsB;IAUrC,6EAA6E;IAC7E,MAAM,CAAC,kBAAkB,IAAI,QAAQ;IAIrC,6EAA6E;IAC7E,MAAM,CAAC,UAAU,IAAI,MAAM;IAU3B,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAUpC,kFAAkF;IAClF,gBAAgB,IAAI,wBAAwB;IAU5C,OAAO,CAAC,oBAAoB;IAa5B,+DAA+D;YACjD,kBAAkB;IAShC,gEAAgE;YAClD,kBAAkB;IAQhC,6DAA6D;YAC/C,gBAAgB;IAkC9B;;;OAGG;IACU,sBAAsB,IAAI,OAAO,CAAC,IAAI,CAAC;IAwC7C,wBAAwB,CAAC,OAAO,GAAE,WAA2B,GAAG,IAAI;IAI3E;;;OAGG;IACU,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAgB3B,SAAS,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,GAAG,IAAI;CAcjE"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/mod.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,QAAQ,EAGb,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAsC,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC9F,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAS5F,eAAO,MAAM,sBAAsB,EAAE,QAAyC,CAAC;AAC/E,eAAO,MAAM,mBAAmB,EAAE,QAAsC,CAAC;AACzE,eAAO,MAAM,iBAAiB,EAAE,QAAoC,CAAC;AACrE,eAAO,MAAM,qBAAqB,EAAE,QAA8C,CAAC;AACnF,eAAO,MAAM,2BAA2B,EAAE,QAA+C,CAAC;AAC1F,eAAO,MAAM,sBAAsB,EAAE,QAAyC,CAAC;AAC/E,eAAO,MAAM,kBAAkB,EAAE,QAAkD,CAAC;AAEpF,qBAAa,UAAW,SAAQ,IAAI,CAAC,OAAO,CAAC;IAC3C,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,UAAU,CAAC;IAItC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;IAIzE,QAAQ,CAAC,EAAE,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS;CAG5C;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gEAAgE;IAChE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,MAAM,EAAE;QAAE,QAAQ,EAAE,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM;KAAE,CAAC;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAOD;;GAEG;AACH,qBAAa,MAAM;IACjB,gBAAgB;IAChB,SAAgB,EAAE,EAAE,QAAQ,CAAC;IAC7B,wBAAwB;IACxB,SAAgB,GAAG,EAAE,OAAO,CAAC;IAC7B,0CAA0C;IAC1C,SAAgB,OAAO,EAAE,iBAAiB,CAAC;IAC3C,6BAA6B;IAC7B,SAAgB,OAAO,EAAE,aAAa,CAAC;IAEvC,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,WAAW,CAAyB;IAC5C,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO;IAiBP,OAAO,CAAC,MAAM,CAAC,sBAAsB;IAUrC,6EAA6E;IAC7E,MAAM,CAAC,kBAAkB,IAAI,QAAQ;IAIrC,6EAA6E;IAC7E,MAAM,CAAC,UAAU,IAAI,MAAM;IAU3B,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAUpC,kFAAkF;IAC3E,gBAAgB,IAAI,wBAAwB;IAUnD,OAAO,CAAC,oBAAoB;IAa5B,+DAA+D;YACjD,kBAAkB;IAShC,gEAAgE;YAClD,kBAAkB;IAShC,6DAA6D;YAC/C,gBAAgB;IA0C9B;;;OAGG;IACU,sBAAsB,IAAI,OAAO,CAAC,IAAI,CAAC;IAuCpD;;;;OAIG;IACU,IAAI,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC;IA8BjE;;;;;OAKG;IACU,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAqB5B,SAAS,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,GAAG,IAAI;CAOjE"}

package/script/src/state/widget/mod.js

@@ -46,6 +46,7 @@ const window_1 = require("@tauri-apps/api/window");
 const async_js_1 = require("../../utils/async.js");
 const sizing_js_1 = require("./sizing.js");
 const positioning_js_1 = require("./positioning.js");
+const theming_js_1 = require("../theme/theming.js");
 exports.SeelenSettingsWidgetId = "@seelen/settings";
 exports.SeelenPopupWidgetId = "@seelen/popup";
 exports.SeelenWegWidgetId = "@seelen/weg";
@@ -77,6 +78,12 @@ class Widget {
     decoded;
     /** current webview window */
     webview;
+    autoSizer;
+    initOptions = {};
+    runtimeState = {
+        initialized: false,
+        ready: false,
+    };
     constructor(widget) {
         this.def = widget;
         this.webview = (0, webviewWindow_1.getCurrentWebviewWindow)();
@@ -149,8 +156,8 @@ class Widget {
             ...this.applyInvisiblePreset(),
             // Desktop widgets are always on bottom
             this.webview.setAlwaysOnBottom(true),
+            this.persistPositionAndSize(),
         ]);
-        await this.persistPositionAndSize();
     }
     /** Will apply the recommended settings for an overlay widget */
     async applyOverlayPreset() {
@@ -158,25 +165,31 @@ class Widget {
             ...this.applyInvisiblePreset(),
             // Overlay widgets are always on top
             this.webview.setAlwaysOnTop(true),
+            this.persistPositionAndSize(),
         ]);
     }
     /** Will apply the recommended settings for a popup widget */
     async applyPopupPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.webview.setResizable(false)]);
-        // auto close on focus lost
+        await Promise.all([...this.applyInvisiblePreset()]);
+        // auto close after 1 minute when not in use to save resources
         const closeOnTimeout = (0, async_js_1.debounce)(() => {
-            // this.webview.close(); todo
-        }, 5000);
-        this.webview.onFocusChanged((e) => {
-            if (e.payload) {
-                closeOnTimeout.cancel();
+            this.webview.close();
+        }, 60_000);
+        const hideWebview = (0, async_js_1.debounce)(() => {
+            this.webview.hide();
+            closeOnTimeout();
+        }, 100);
+        this.webview.onFocusChanged(({ payload: focused }) => {
+            if (focused) {
+                hideWebview.cancel();
             }
             else {
-                this.webview.hide();
-                closeOnTimeout();
+                hideWebview();
             }
         });
         this.onTrigger(async ({ desiredPosition, alignX, alignY }) => {
+            // avoid flickering when clicking a button that triggers the widget
+            hideWebview.cancel();
             if (desiredPosition) {
                 const { width, height } = await this.webview.outerSize();
                 const pos = await (0, positioning_js_1.adjustPostionByPlacement)({
@@ -190,11 +203,12 @@ class Widget {
                 await this.webview.setPosition(new dpi_1.PhysicalPosition(pos.x, pos.y));
             }
             await this.webview.show();
+            await this.webview.setFocus();
         });
     }
     /**
-     * Will restore the saved position and size of the widget after that
-     * will store the position and size of the widget on change.
+     * Will restore the saved position and size of the widget on start,
+     * after that will store the position and size of the widget on change.
      */
     async persistPositionAndSize() {
         const storage = globalThis.window.localStorage;
@@ -225,15 +239,18 @@ class Widget {
             console.info(`Widget size saved: ${width} ${height}`);
         }, 500));
     }
-    // this will monitor the element and resize the webview accordingly
-    autoSizeWebviewByElement(element = document.body) {
-        (0, sizing_js_1.autoSizeWebviewBasedOnContent)(this.webview, element);
-    }
     /**
-     * Will initialize the widget based on the preset, this function won't show the widget.
-     * You need to call `webview.show()` to show the widget.
+     * Will initialize the widget based on the preset and mark it as `pending`, this function won't show the widget.
+     * This should be called before any other action on the widget. After this you should call
+     * `ready` to mark the widget as ready and show it.
      */
-    async init() {
+    async init(options = {}) {
+        if (this.runtimeState.initialized) {
+            console.warn(`Widget already initialized`);
+            return;
+        }
+        this.runtimeState.initialized = true;
+        this.initOptions = options;
         switch (this.def.preset) {
             case mod_js_1.WidgetPreset.None:
                 break;
@@ -247,18 +264,39 @@ class Widget {
                 await this.applyPopupPreset();
                 break;
         }
+        await (0, theming_js_1.startThemingTool)();
+        if (options.autoSizeByContent) {
+            this.autoSizer = new sizing_js_1.WidgetAutoSizer(this.webview, options.autoSizeByContent);
+        }
+    }
+    /**
+     * Will mark the widget as `ready` and pool pending triggers.
+     *
+     * If the widget is not lazy this will inmediately show the widget.
+     * Lazy widget should be shown on trigger action.
+     */
+    async ready() {
+        if (!this.runtimeState.initialized) {
+            throw new Error(`Widget was not initialized before ready`);
+        }
+        if (this.runtimeState.ready) {
+            console.warn(`Widget is already ready`);
+            return;
+        }
+        this.runtimeState.ready = true;
+        await this.autoSizer?.execute();
+        if (this.initOptions.show ?? !this.def.lazy) {
+            await this.webview.show();
+        }
+        // this will mark the widget as ready, and send pending trigger event if exists
+        await (0, mod_js_2.invoke)(mod_js_2.SeelenCommand.SetCurrentWidgetStatus, { status: mod_js_1.WidgetStatus.Ready });
     }
     onTrigger(cb) {
-        const fn = ({ payload }) => {
-            const { id, monitorId, instanceId } = payload;
-            if (id !== this.id ||
-                (monitorId && monitorId !== this.decoded.monitorId) ||
-                (instanceId && instanceId !== this.decoded.instanceId)) {
-                return;
-            }
+        this.webview.listen(mod_js_2.SeelenEvent.WidgetTriggered, ({ payload }) => {
+            // fix for cutted popups, ensure correct size on trigger.
+            // await this.autoSizer?.execute();
             cb(payload);
-        };
-        (0, mod_js_2.subscribe)(mod_js_2.SeelenEvent.WidgetTriggered, fn.bind(this));
+        });
     }
 }
 exports.Widget = Widget;

package/script/src/state/widget/sizing.d.ts

@@ -2,6 +2,11 @@ import type { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 export interface AutoSizeOptions {
     onResize?: () => void;
 }
-/** This function will update the size of the webview/window based on the size of the root element */
-export declare function autoSizeWebviewBasedOnContent(webview: WebviewWindow, element: HTMLElement, options?: AutoSizeOptions): () => void;
+export declare class WidgetAutoSizer {
+    private webview;
+    private element;
+    constructor(webview: WebviewWindow, element: HTMLElement);
+    private setup;
+    execute(): Promise<void>;
+}
 //# sourceMappingURL=sizing.d.ts.map

package/script/src/state/widget/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGnE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qGAAqG;AACrG,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,eAAoB,GAC5B,MAAM,IAAI,CA6CZ"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGnE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qBAAa,eAAe;IACd,OAAO,CAAC,OAAO;IAAiB,OAAO,CAAC,OAAO;gBAAvC,OAAO,EAAE,aAAa,EAAU,OAAO,EAAE,WAAW;IAKxE,OAAO,CAAC,KAAK;IAmBP,OAAO;CAkBd"}

package/script/src/state/widget/sizing.js

@@ -1,42 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.autoSizeWebviewBasedOnContent = autoSizeWebviewBasedOnContent;
+exports.WidgetAutoSizer = void 0;
 const dpi_1 = require("@tauri-apps/api/dpi");
-/** This function will update the size of the webview/window based on the size of the root element */
-function autoSizeWebviewBasedOnContent(webview, element, options = {}) {
-    const { onResize } = options;
-    const updateSize = async () => {
-        const contentWidth = Math.floor(element.scrollWidth);
-        const contentHeight = Math.floor(element.scrollHeight);
-        if (contentWidth > 0 && contentHeight > 0) {
-            const { width: currentWidth, height: currentHeight } = await webview.outerSize();
-            const currentWidthFloored = Math.floor(currentWidth);
-            const currentHeightFloored = Math.floor(currentHeight);
-            // Only update if the difference is more than 1px (avoid infinite loops from decimal differences)
-            if (Math.abs(contentWidth - currentWidthFloored) > 1 ||
-                Math.abs(contentHeight - currentHeightFloored) > 1) {
-                const size = new dpi_1.LogicalSize(contentWidth, contentHeight);
-                webview.setSize(size).catch((err) => {
-                    console.error("Failed to update webview size:", err);
-                });
-                onResize?.();
-            }
+class WidgetAutoSizer {
+    webview;
+    element;
+    constructor(webview, element) {
+        this.webview = webview;
+        this.element = element;
+        this.execute = this.execute.bind(this);
+        this.setup();
+    }
+    setup() {
+        // Disable resizing by the user
+        this.webview.setResizable(false);
+        // Update size when content changes
+        const observer = new MutationObserver(this.execute);
+        observer.observe(this.element, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+        // Cleanup function
+        return () => {
+            observer.disconnect();
+        };
+    }
+    async execute() {
+        const contentWidth = this.element.scrollWidth;
+        const contentHeight = this.element.scrollHeight;
+        if (contentWidth < 1 || contentHeight < 1) {
+            return;
         }
-    };
-    // Initial size update
-    updateSize();
-    // Update size when content changes
-    const observer = new MutationObserver(() => {
-        updateSize();
-    });
-    observer.observe(element, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
-    });
-    // Cleanup function
-    return () => {
-        observer.disconnect();
-    };
+        const { width: physicalWidth, height: physicalHeight } = await this.webview.outerSize();
+        const logicalWidth = physicalWidth * globalThis.window.devicePixelRatio;
+        const logicalHeight = physicalHeight * globalThis.window.devicePixelRatio;
+        // Only update if the difference is more than 1px (avoid infinite loops from decimal differences)
+        if (Math.abs(contentWidth - logicalWidth) > 1 || Math.abs(contentHeight - logicalHeight) > 1) {
+            const size = new dpi_1.LogicalSize(contentWidth, contentHeight);
+            await this.webview.setSize(size);
+        }
+    }
 }
+exports.WidgetAutoSizer = WidgetAutoSizer;

package/script/src/system_state/bluetooth/mod.d.ts

@@ -1,17 +1,11 @@
 import { type UnSubscriber } from "../../handlers/mod.js";
 import { List } from "../../utils/List.js";
-import type { BluetoothDevice, BluetoothDevicePairShowPinRequest } from "../../../gen/types/mod.js";
-import type { UnlistenFn } from "@tauri-apps/api/event";
+import type { BluetoothDevice } from "../../../gen/types/mod.js";
 export declare class BluetoothDevices extends List<BluetoothDevice> {
     static getAsync(): Promise<BluetoothDevices>;
     static onChange(cb: (payload: BluetoothDevices) => void): Promise<UnSubscriber>;
-    static onDiscoveredDevicesChange(cb: (payload: BluetoothDevices) => void): Promise<UnSubscriber>;
     static discover(): Promise<void>;
     static stopDiscovery(): Promise<void>;
-    static pairDevice(address: bigint): Promise<void>;
-    static forgetDevice(id: string): Promise<void>;
-    static confirmPair(accept: boolean, passphrase: string): Promise<void>;
-    static onPairRequest(cb: (param: BluetoothDevicePairShowPinRequest | null) => void): Promise<UnlistenFn>;
     static default(): BluetoothDevices;
 }
 //# sourceMappingURL=mod.d.ts.map

package/script/src/system_state/bluetooth/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/system_state/bluetooth/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC9F,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,iCAAiC,EAAE,MAAM,2BAA2B,CAAC;AACpG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,qBAAa,gBAAiB,SAAQ,IAAI,CAAC,eAAe,CAAC;IACzD,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,gBAAgB,CAAC;IAI5C,MAAM,CAAC,QAAQ,CACb,EAAE,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,GACtC,OAAO,CAAC,YAAY,CAAC;IAIxB,MAAM,CAAC,yBAAyB,CAC9B,EAAE,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,GACtC,OAAO,CAAC,YAAY,CAAC;WAIX,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;WAGzB,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;WAI9B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;WAG1C,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;WAGvC,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;WAO/D,aAAa,CACxB,EAAE,EAAE,CAAC,KAAK,EAAE,iCAAiC,GAAG,IAAI,KAAK,IAAI,GAC5D,OAAO,CAAC,UAAU,CAAC;IAiBtB,MAAM,CAAC,OAAO,IAAI,gBAAgB;CAGnC"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/system_state/bluetooth/mod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC9F,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGjE,qBAAa,gBAAiB,SAAQ,IAAI,CAAC,eAAe,CAAC;IACzD,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,gBAAgB,CAAC;IAI5C,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;WAIlE,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;WAIzB,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IAI3C,MAAM,CAAC,OAAO,IAAI,gBAAgB;CAGnC"}

package/script/src/system_state/bluetooth/mod.js

@@ -3,45 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BluetoothDevices = void 0;
 const mod_js_1 = require("../../handlers/mod.js");
 const List_js_1 = require("../../utils/List.js");
-const mod_js_2 = require("../../handlers/mod.js");
 const State_js_1 = require("../../utils/State.js");
 class BluetoothDevices extends List_js_1.List {
     static getAsync() {
-        return (0, State_js_1.newFromInvoke)(this, mod_js_1.SeelenCommand.GetConnectedBluetoothDevices);
+        return (0, State_js_1.newFromInvoke)(this, mod_js_1.SeelenCommand.GetBluetoothDevices);
     }
     static onChange(cb) {
         return (0, State_js_1.newOnEvent)(cb, this, mod_js_1.SeelenEvent.BluetoothDevicesChanged);
     }
-    static onDiscoveredDevicesChange(cb) {
-        return (0, State_js_1.newOnEvent)(cb, this, mod_js_1.SeelenEvent.BluetoothDiscoveredDevicesChanged);
-    }
     static async discover() {
         return await (0, mod_js_1.invoke)(mod_js_1.SeelenCommand.StartBluetoothScanning);
     }
     static async stopDiscovery() {
         return await (0, mod_js_1.invoke)(mod_js_1.SeelenCommand.StopBluetoothScanning);
     }
-    static async pairDevice(address) {
-        return await (0, mod_js_1.invoke)(mod_js_1.SeelenCommand.PairBluetoothDevice, { address });
-    }
-    static async forgetDevice(id) {
-        return await (0, mod_js_1.invoke)(mod_js_1.SeelenCommand.ForgetBluetoothDevice, { id });
-    }
-    static async confirmPair(accept, passphrase) {
-        return await (0, mod_js_1.invoke)(mod_js_1.SeelenCommand.ConfirmBluetoothDevicePair, {
-            accept,
-            passphrase,
-        });
-    }
-    static async onPairRequest(cb) {
-        //TODO(Eythaan): from here the process does not continues
-        const unlistenShowPin = await (0, mod_js_2.subscribe)(mod_js_1.SeelenEvent.BluetoothPairShowPin, (param) => cb(param.payload));
-        const unlistenRequestPin = await (0, mod_js_2.subscribe)(mod_js_1.SeelenEvent.BluetoothPairRequestPin, (param) => cb(param.payload));
-        return () => {
-            unlistenRequestPin();
-            unlistenShowPin();
-        };
-    }
     static default() {
         return new this([]);
     }

package/script/src/system_state/ui_colors.d.ts

@@ -8,14 +8,16 @@ export declare class UIColors {
     static default(): UIColors;
     setAsCssVariables(): void;
 }
+export interface Color extends IColor {
+}
 export declare class Color {
-    inner: IColor;
-    constructor(inner: IColor);
+    constructor(obj: IColor);
     /** generates a random solid color */
     static random(): Color;
+    static fromHex(hex: string): Color;
+    toHexString(): string;
     private getRuntimeStyleSheet;
     private insertIntoStyleSheet;
-    toHexString(): string;
     /**
      * @param name the name of the color
      * the name will be parsed to lower kebab case and remove non-alphanumeric characters
@@ -32,5 +34,6 @@ export declare class Color {
      * @returns a number between 0 and 255
      */
     calcLuminance(accuracy?: boolean): number;
+    complementary(): Color;
 }
 //# sourceMappingURL=ui_colors.d.ts.map

package/script/src/system_state/ui_colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui_colors.d.ts","sourceRoot":"","sources":["../../../src/src/system_state/ui_colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAErF,qBAAa,QAAQ;IACA,KAAK,EAAE,SAAS;gBAAhB,KAAK,EAAE,SAAS;IAEnC,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;IAIpC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;IAIvE,MAAM,CAAC,OAAO,IAAI,QAAQ;IAe1B,iBAAiB,IAAI,IAAI;CA6B1B;AAED,qBAAa,KAAK;IACG,KAAK,EAAE,MAAM;gBAAb,KAAK,EAAE,MAAM;IAEhC,qCAAqC;IACrC,MAAM,CAAC,MAAM,IAAI,KAAK;IAStB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,oBAAoB;IAkB5B,WAAW,IAAI,MAAM;IAUrB;;;;;;;OAOG;IACH,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAapC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM;CAY1C"}
+{"version":3,"file":"ui_colors.d.ts","sourceRoot":"","sources":["../../../src/src/system_state/ui_colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGnF,OAAO,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAErF,qBAAa,QAAQ;IACA,KAAK,EAAE,SAAS;gBAAhB,KAAK,EAAE,SAAS;IAEnC,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;IAIpC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC;IAIvE,MAAM,CAAC,OAAO,IAAI,QAAQ;IAe1B,iBAAiB,IAAI,IAAI;CAmC1B;AAED,MAAM,WAAW,KAAM,SAAQ,MAAM;CAAG;AAExC,qBAAa,KAAK;gBACJ,GAAG,EAAE,MAAM;IAOvB,qCAAqC;IACrC,MAAM,CAAC,MAAM,IAAI,KAAK;IAStB,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK;IAyBlC,WAAW,IAAI,MAAM;IAUrB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,oBAAoB;IAkB5B;;;;;;;OAOG;IACH,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAapC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM;IAYzC,aAAa,IAAI,KAAK;CAQvB"}