@seelen-ui/lib 2.5.3 → 2.5.8-next.2604111036

package/esm/src/state/icon_pack.js

@@ -161,7 +161,15 @@ export class IconPackManager {
             return null;
         }
         const lowerPath = path?.toLowerCase();
-        const extension = lowerPath?.split(".").pop();
+        // Extract extension only when there's an actual dot after the last path separator,
+        // to avoid treating directory names without dots as extensions.
+        const lastDot = lowerPath?.lastIndexOf(".");
+        const lastSlash = lowerPath?.lastIndexOf("\\") ?? -1;
+        const extension = (lastDot !== undefined && lastDot > lastSlash) ? lowerPath.slice(lastDot + 1) : undefined;
+        // Add the starting path to __seen so that direct A→B→A cycles are caught in 2 hops.
+        if (lowerPath) {
+            __seen.add(lowerPath);
+        }
         for (const pack of this.activeIconPacks) {
             let entry;
             if (umid) {
@@ -178,7 +186,8 @@ export class IconPackManager {
                     // only search for filename in case of executable files
                     if (extension === "exe") {
                         const filename = lowerPath.split("\\").pop();
-                        if (filename && e.path.endsWith(filename)) {
+                        // Use separator-aware check to avoid partial name matches (e.g. "mysteam.exe" != "steam.exe")
+                        if (filename && (e.path === filename || e.path.endsWith("\\" + filename))) {
                             return true;
                         }
                     }

package/esm/src/state/mod.d.ts

@@ -1,7 +1,5 @@
 export * from "./theme/mod.js";
 export * from "./settings/mod.js";
-export * from "./weg_items.js";
-export * from "./wm_layout.js";
 export * from "./icon_pack.js";
 export * from "./plugin/mod.js";
 export * from "./widget/mod.js";

package/esm/src/state/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/src/state/mod.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/src/state/mod.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/esm/src/state/mod.js

@@ -1,7 +1,5 @@
 export * from "./theme/mod.js";
 export * from "./settings/mod.js";
-export * from "./weg_items.js";
-export * from "./wm_layout.js";
 export * from "./icon_pack.js";
 export * from "./plugin/mod.js";
 export * from "./widget/mod.js";

package/esm/src/state/theme/theming.d.ts

@@ -3,5 +3,6 @@
  * when the themes or settings change. Also will add the systehm ui colors to the document.
  */
 export declare function startThemingTool(): Promise<void>;
+export declare function setPerformanceStyles(): void;
 export declare function startDateCssVariables(): void;
 //# sourceMappingURL=theming.d.ts.map

package/esm/src/state/theme/theming.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../../../src/src/state/theme/theming.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,CAoBtD;AAED,wBAAgB,qBAAqB,IAAI,IAAI,CAK5C"}
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../../../src/src/state/theme/theming.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,CAqBtD;AAiBD,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C;AAED,wBAAgB,qBAAqB,IAAI,IAAI,CAK5C"}

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

@@ -17,11 +17,31 @@ export async function startThemingTool() {
         settings = newSettings;
         themes.applyToDocument(settings.activeThemes, settings.byTheme);
     });
+    setPerformanceStyles();
+    startDateCssVariables();
     (await UIColors.getAsync()).setAsCssVariables();
     await UIColors.onChange((colors) => colors.setAsCssVariables());
-    startDateCssVariables();
     themes.applyToDocument(settings.activeThemes, settings.byTheme);
 }
+// Used by performance mode to reduce cpu/gpu usage
+const PERF_CSS = `
+html[data-animations-off] *,
+html[data-animations-off] *::before,
+html[data-animations-off] *::after {
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  animation-delay: 0s !important;
+
+  transition-duration: 0.001ms !important;
+  transition-delay: 0s !important;
+
+  scroll-behavior: auto !important;
+}`;
+export function setPerformanceStyles() {
+    const styleSheet = new RuntimeStyleSheet("@static/performance");
+    styleSheet.addStyle(PERF_CSS);
+    styleSheet.applyToDocument();
+}
 export function startDateCssVariables() {
     // Set initial values immediately
     updateDateCssVariables();

package/esm/src/state/widget/interfaces.d.ts

@@ -19,6 +19,17 @@ export interface InitWidgetOptions {
      * @default undefined
      */
     autoSizeByContent?: HTMLElement | null;
+    /**
+     * If autoSizeByContent is set, and this is true, will auto size the widget and
+     * adjusts the position to fit on screen
+     * @default true
+     */
+    autoSizeFitOnScreen?: boolean;
+    /**
+     * Will normalize the device pixel ratio to 1:1
+     * @default false
+     */
+    normalizeDevicePixelRatio?: boolean;
     /**
      * Will save the position and size of the widget on change.
      * This is intedeed to be used when the size and position of the widget is
@@ -27,6 +38,12 @@ export interface InitWidgetOptions {
      * @default widget.preset === "Desktop"
      */
     saveAndRestoreLastRect?: boolean;
+    /**
+     * Will disable the css animations on the widget when performace mode is set to Extreme
+     *
+     * @default true
+     */
+    disableCssAnimations?: boolean;
 }
 export interface ReadyWidgetOptions {
     /**

package/esm/src/state/widget/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/interfaces.ts"],"names":[],"mappings":"AAAA,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;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/interfaces.ts"],"names":[],"mappings":"AAAA,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;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

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

@@ -1,6 +1,7 @@
-import { type Frame, type Rect, type ThirdPartyWidgetSettings, type Widget as IWidget, type WidgetId, type WidgetTriggerPayload } from "../../../gen/types/mod.js";
-import { type WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { type Alignment, type Frame, type Rect, type ThirdPartyWidgetSettings, type Widget as IWidget, type WidgetId, type WidgetTriggerPayload } from "../../../gen/types/mod.js";
 import type { InitWidgetOptions, ReadyWidgetOptions, WidgetInformation } from "./interfaces.js";
+import { type Webview } from "@tauri-apps/api/webview";
+import { type Window } from "@tauri-apps/api/window";
 /**
  * Represents the widget instance running in the current webview
  */
@@ -18,18 +19,17 @@ export declare class Widget {
     readonly def: IWidget;
     /** decoded widget instance information */
     readonly decoded: WidgetInformation;
-    /** current webview window */
-    readonly webview: WebviewWindow;
+    /** current webview where the widget is running */
+    readonly webview: Webview;
+    /** current window where the widget is running */
+    readonly window: Window;
     private autoSizer?;
     private runtimeState;
     private constructor();
     /** Returns the current window id of the widget */
     get windowId(): number;
-    /** Returns the current position and size of the widget */
-    get frame(): Frame;
     /** Returns the default config of the widget, declared on the widget definition */
     getDefaultConfig(): ThirdPartyWidgetSettings;
-    private applyInvisiblePreset;
     /** Will apply the recommended settings for a desktop widget */
     private applyDesktopPreset;
     /** Will apply the recommended settings for an overlay widget */
@@ -40,7 +40,8 @@ export declare class Widget {
      * 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>;
+    private persistPositionAndSize;
+    private normalizeDevicePixelRatio;
     /**
      * 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
@@ -55,7 +56,12 @@ export declare class Widget {
      */
     ready(options?: ReadyWidgetOptions): Promise<void>;
     onTrigger(cb: (args: WidgetTriggerPayload) => void): void;
-    /** If animations are enabled this will animate the movement of the widget */
+    __unsafe_setPosition(rect: Rect, ref: Frame): Promise<void>;
+    /**
+     * This will adjust the position of the widget based on the current placement and alignX/alignY arguments.
+     * This makes the widget fit into the monitor where it was placed, avoiding monitor overflow.
+     */
+    adjustAndSetPosition(x: number, y: number, alignX?: Alignment | null, alignY?: Alignment | null): Promise<void>;
     setPosition(rect: Rect): Promise<void>;
     show(): Promise<void>;
     /** Will force foreground the widget */

package/esm/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,KAAK,EACV,KAAK,IAAI,EACT,KAAK,wBAAwB,EAC7B,KAAK,MAAM,IAAI,OAAO,EAEtB,KAAK,QAAQ,EAIb,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBhG;;GAEG;AACH,qBAAa,MAAM;IACjB;;;OAGG;IACH,MAAM,CAAC,UAAU,IAAI,MAAM;IAU3B,iCAAiC;IACjC,MAAM,KAAK,IAAI,IAAI,MAAM,CAExB;IAED,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;IAEpC,OAAO,CAAC,YAAY,CAalB;IAEF,OAAO;IAiBP,kDAAkD;IAClD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,0DAA0D;IAC1D,IAAI,KAAK,IAAI,KAAK,CAOjB;IAED,kFAAkF;IAC3E,gBAAgB,IAAI,wBAAwB;IAQnD,OAAO,CAAC,oBAAoB;IAa5B,+DAA+D;YACjD,kBAAkB;IAIhC,gEAAgE;YAClD,kBAAkB;IAIhC,6DAA6D;YAC/C,gBAAgB;IAiD9B;;;OAGG;IACU,sBAAsB,IAAI,OAAO,CAAC,IAAI,CAAC;IAwCpD;;;;OAIG;IACU,IAAI,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC;IA+CjE;;;;;OAKG;IACU,KAAK,CAAC,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC;IAwB5D,SAAS,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,GAAG,IAAI;IAMhE,6EAA6E;IACtE,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAgBhC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAKlC,uCAAuC;IAC1B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAU5B,IAAI,CAAC,oBAAoB,CAAC,EAAE,OAAO,GAAG,IAAI;CAMlD;AAWD,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,kBAAkB,EAAE,QAAkD,CAAC"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/mod.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,KAAK,EACV,KAAK,IAAI,EACT,KAAK,wBAAwB,EAC7B,KAAK,MAAM,IAAI,OAAO,EAEtB,KAAK,QAAQ,EAIb,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAOnC,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEhG,OAAO,EAAqB,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAoB,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASvE;;GAEG;AACH,qBAAa,MAAM;IACjB;;;OAGG;IACH,MAAM,CAAC,UAAU,IAAI,MAAM;IAU3B,iCAAiC;IACjC,MAAM,KAAK,IAAI,IAAI,MAAM,CAExB;IAED,gBAAgB;IAChB,SAAgB,EAAE,EAAE,QAAQ,CAAC;IAC7B,wBAAwB;IACxB,SAAgB,GAAG,EAAE,OAAO,CAAC;IAC7B,0CAA0C;IAC1C,SAAgB,OAAO,EAAE,iBAAiB,CAAC;IAC3C,kDAAkD;IAClD,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,iDAAiD;IACjD,SAAgB,MAAM,EAAE,MAAM,CAAC;IAE/B,OAAO,CAAC,SAAS,CAAC,CAAkB;IAEpC,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO;IAkBP,kDAAkD;IAClD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,kFAAkF;IAC3E,gBAAgB,IAAI,wBAAwB;IAQnD,+DAA+D;IAC/D,OAAO,CAAC,kBAAkB;IAE1B,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAE1B,6DAA6D;IAC7D,OAAO,CAAC,gBAAgB;IA0BxB;;;OAGG;YACW,sBAAsB;YAwCtB,yBAAyB;IAavC;;;;OAIG;IACU,IAAI,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC;IAmDjE;;;;;OAKG;IACU,KAAK,CAAC,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC;IAwB5D,SAAS,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,GAAG,IAAI;IAMnD,oBAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAiBxE;;;OAGG;IACU,oBAAoB,CAC/B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,EACzB,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,GACxB,OAAO,CAAC,IAAI,CAAC;IAyBH,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAMtC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAKlC,uCAAuC;IAC1B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAU5B,IAAI,CAAC,oBAAoB,CAAC,EAAE,OAAO,GAAG,IAAI;CAMlD;AAWD,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,kBAAkB,EAAE,QAAkD,CAAC"}

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

@@ -1,13 +1,14 @@
 import * as dntShim from "../../../_dnt.shims.js";
 import { WidgetPreset, WidgetStatus, } from "../../../gen/types/mod.js";
 import { invoke, SeelenCommand, SeelenEvent } from "../../handlers/mod.js";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { decodeBase64Url } from "../../../deps/jsr.io/@std/encoding/1.0.10/mod.js";
 import { debounce } from "../../utils/async.js";
-import { WidgetAutoSizer } from "./sizing.js";
+import { OPTIMISTIC_FRAME, WidgetAutoSizer } from "./sizing.js";
 import { adjustPositionByPlacement, fitIntoMonitor, initMonitorsState } from "./positioning.js";
 import { startThemingTool } from "../theme/theming.js";
+import { disableAnimationsOnPerformanceMode } from "./performance.js";
 import { getCurrentWebview } from "@tauri-apps/api/webview";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 /**
  * Represents the widget instance running in the current webview
  */
@@ -33,26 +34,21 @@ export class Widget {
     def;
     /** decoded widget instance information */
     decoded;
-    /** current webview window */
+    /** current webview where the widget is running */
     webview;
+    /** current window where the widget is running */
+    window;
     autoSizer;
     runtimeState = {
         hwnd: 0,
         initialized: false,
         ready: false,
-        position: {
-            x: 0,
-            y: 0,
-        },
-        size: {
-            width: 0,
-            height: 0,
-        },
         firstFocus: true,
     };
     constructor(widget) {
         this.def = widget;
-        this.webview = getCurrentWebviewWindow();
+        this.webview = getCurrentWebview();
+        this.window = getCurrentWindow();
         const [id, query] = getDecodedWebviewLabel();
         const params = new URLSearchParams(query);
         const paramsObj = Object.freeze(Object.fromEntries(params));
@@ -68,15 +64,6 @@ export class Widget {
     get windowId() {
         return this.runtimeState.hwnd;
     }
-    /** Returns the current position and size of the widget */
-    get frame() {
-        return {
-            x: this.runtimeState.position.x,
-            y: this.runtimeState.position.y,
-            width: this.runtimeState.size.width,
-            height: this.runtimeState.size.height,
-        };
-    }
     /** Returns the default config of the widget, declared on the widget definition */
     getDefaultConfig() {
         const config = { enabled: true };
@@ -85,64 +72,28 @@ export class Widget {
         }
         return config;
     }
-    applyInvisiblePreset() {
-        return [
-            this.webview.setDecorations(false), // no title bar
-            this.webview.setShadow(false), // no shadows
-            // hide from native shell
-            this.webview.setSkipTaskbar(true),
-            // as a (desktop/overlay) widget we don't wanna allow nothing of these
-            this.webview.setMinimizable(false),
-            this.webview.setMaximizable(false),
-            this.webview.setClosable(false),
-        ];
-    }
     /** Will apply the recommended settings for a desktop widget */
-    async applyDesktopPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.webview.setAlwaysOnBottom(true)]);
-    }
+    applyDesktopPreset() { }
     /** Will apply the recommended settings for an overlay widget */
-    async applyOverlayPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.webview.setAlwaysOnTop(true)]);
-    }
+    applyOverlayPreset() { }
     /** Will apply the recommended settings for a popup widget */
-    async applyPopupPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.webview.setAlwaysOnTop(true)]);
-        const hideWebview = debounce(() => {
+    applyPopupPreset() {
+        const hideWidget = debounce(() => {
             this.hide(true);
         }, 100);
-        this.webview.onFocusChanged(({ payload: focused }) => {
+        this.window.onFocusChanged(({ payload: focused }) => {
             if (focused) {
-                hideWebview.cancel();
+                hideWidget.cancel();
             }
             else {
-                hideWebview();
+                hideWidget();
             }
         });
         this.onTrigger(async ({ desiredPosition, alignX, alignY }) => {
             // avoid flickering when clicking a button that triggers the widget
-            hideWebview.cancel();
-            if (this.autoSizer && alignX && alignY) {
-                this.autoSizer.originX = alignX;
-                this.autoSizer.originY = alignY;
-            }
+            hideWidget.cancel();
             if (desiredPosition) {
-                const adjusted = adjustPositionByPlacement({
-                    frame: {
-                        x: desiredPosition.x,
-                        y: desiredPosition.y,
-                        width: this.runtimeState.size.width,
-                        height: this.runtimeState.size.height,
-                    },
-                    originX: alignX,
-                    originY: alignY,
-                });
-                await this.setPosition({
-                    left: adjusted.x,
-                    top: adjusted.y,
-                    right: adjusted.x + adjusted.width,
-                    bottom: adjusted.y + adjusted.height,
-                });
+                await this.adjustAndSetPosition(desiredPosition.x, desiredPosition.y, alignX, alignY);
             }
             await this.show();
             await this.focus();
@@ -170,19 +121,31 @@ export class Widget {
                 bottom: safeFrame.y + safeFrame.height,
             });
         }
-        this.webview.onMoved(debounce((e) => {
+        this.window.onMoved(debounce((e) => {
             const { x, y } = e.payload;
             storage.setItem(`x`, x.toString());
             storage.setItem(`y`, y.toString());
             console.info(`Widget position saved: ${x} ${y}`);
         }, 500));
-        this.webview.onResized(debounce((e) => {
+        this.window.onResized(debounce((e) => {
             const { width, height } = e.payload;
             storage.setItem(`width`, width.toString());
             storage.setItem(`height`, height.toString());
             console.info(`Widget size saved: ${width} ${height}`);
         }, 500));
     }
+    async normalizeDevicePixelRatio() {
+        // play with zoom level to reset device pixel ratio to 1:1
+        let oldDPR = globalThis.devicePixelRatio;
+        await this.webview.setZoom(1 / oldDPR);
+        this.window.onScaleChanged(() => {
+            if (globalThis.devicePixelRatio !== oldDPR) {
+                // when zoom was set dpr changed, so in case of change this is accomulative unit
+                oldDPR = oldDPR * globalThis.devicePixelRatio;
+                this.webview.setZoom(1 / (oldDPR * globalThis.devicePixelRatio));
+            }
+        });
+    }
     /**
      * 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
@@ -195,8 +158,11 @@ export class Widget {
         }
         this.runtimeState.hwnd = await invoke(SeelenCommand.GetSelfWindowId);
         this.runtimeState.initialized = true;
+        if (options.normalizeDevicePixelRatio) {
+            await this.normalizeDevicePixelRatio();
+        }
         if (options.autoSizeByContent) {
-            this.autoSizer = new WidgetAutoSizer(this, options.autoSizeByContent);
+            this.autoSizer = new WidgetAutoSizer(this, options.autoSizeByContent, options.autoSizeFitOnScreen ?? true);
         }
         else if (options.saveAndRestoreLastRect ?? this.def.preset === WidgetPreset.Desktop) {
             await this.persistPositionAndSize();
@@ -205,27 +171,25 @@ export class Widget {
             case WidgetPreset.None:
                 break;
             case WidgetPreset.Desktop:
-                await this.applyDesktopPreset();
+                this.applyDesktopPreset();
                 break;
             case WidgetPreset.Overlay:
-                await this.applyOverlayPreset();
+                this.applyOverlayPreset();
                 break;
             case WidgetPreset.Popup:
-                await this.applyPopupPreset();
+                this.applyPopupPreset();
                 break;
         }
         await startThemingTool();
         await initMonitorsState();
-        // state initialization
-        this.runtimeState.size = await this.webview.outerSize();
-        this.runtimeState.position = await this.webview.outerPosition();
-        this.webview.onResized((e) => {
-            this.runtimeState.size.width = e.payload.width;
-            this.runtimeState.size.height = e.payload.height;
-        });
-        this.webview.onMoved((e) => {
-            this.runtimeState.position.x = e.payload.x;
-            this.runtimeState.position.y = e.payload.y;
+        if (options.disableCssAnimations ?? true) {
+            await disableAnimationsOnPerformanceMode();
+        }
+        else {
+            console.trace("Animations won't be disabled because widget configuration");
+        }
+        await OPTIMISTIC_FRAME.runExclusive(async (state) => {
+            await state.init(this);
         });
     }
     /**
@@ -245,7 +209,7 @@ export class Widget {
         }
         this.runtimeState.ready = true;
         await this.autoSizer?.execute();
-        if (show && !(await this.webview.isVisible())) {
+        if (show && !(await this.window.isVisible())) {
             await this.show();
             await this.focus();
         }
@@ -257,13 +221,8 @@ export class Widget {
             cb(payload);
         });
     }
-    /** If animations are enabled this will animate the movement of the widget */
-    setPosition(rect) {
-        this.runtimeState.position.x = rect.left;
-        this.runtimeState.position.y = rect.top;
-        this.runtimeState.size.width = rect.right - rect.left;
-        this.runtimeState.size.height = rect.bottom - rect.top;
-        return invoke(SeelenCommand.SetSelfPosition, {
+    async __unsafe_setPosition(rect, ref) {
+        await invoke(SeelenCommand.SetSelfPosition, {
             rect: {
                 left: Math.round(rect.left),
                 top: Math.round(rect.top),
@@ -271,10 +230,44 @@ export class Widget {
                 bottom: Math.round(rect.bottom),
             },
         });
+        // optimistically update state, as arrived event after change is async
+        ref.x = rect.left;
+        ref.y = rect.top;
+        ref.width = rect.right - rect.left;
+        ref.height = rect.bottom - rect.top;
+    }
+    /**
+     * This will adjust the position of the widget based on the current placement and alignX/alignY arguments.
+     * This makes the widget fit into the monitor where it was placed, avoiding monitor overflow.
+     */
+    async adjustAndSetPosition(x, y, alignX, alignY) {
+        await OPTIMISTIC_FRAME.runExclusive(async (ref) => {
+            const adjusted = adjustPositionByPlacement({
+                frame: {
+                    x,
+                    y,
+                    width: ref.width,
+                    height: ref.height,
+                },
+                originX: alignX,
+                originY: alignY,
+            });
+            await Widget.self.__unsafe_setPosition({
+                left: adjusted.x,
+                top: adjusted.y,
+                right: adjusted.x + adjusted.width,
+                bottom: adjusted.y + adjusted.height,
+            }, ref);
+        });
+    }
+    async setPosition(rect) {
+        await OPTIMISTIC_FRAME.runExclusive(async (frame) => {
+            await this.__unsafe_setPosition(rect, frame);
+        });
     }
     async show() {
         debouncedClose.cancel();
-        await this.webview.show();
+        await this.window.show();
     }
     /** Will force foreground the widget */
     async focus() {
@@ -287,14 +280,14 @@ export class Widget {
         });
     }
     hide(closeAfterInactivity) {
-        Widget.self.webview.hide();
+        this.window.hide();
         if (closeAfterInactivity) {
             debouncedClose();
         }
     }
 }
 const debouncedClose = debounce(() => {
-    Widget.self.webview.close();
+    Widget.self.window.close();
 }, 30_000);
 export const SeelenSettingsWidgetId = "@seelen/settings";
 export const SeelenPopupWidgetId = "@seelen/popup";
@@ -303,7 +296,7 @@ export const SeelenToolbarWidgetId = "@seelen/fancy-toolbar";
 export const SeelenWindowManagerWidgetId = "@seelen/window-manager";
 export const SeelenWallWidgetId = "@seelen/wallpaper-manager";
 function getDecodedWebviewLabel() {
-    const encondedLabel = getCurrentWebviewWindow().label;
+    const encondedLabel = getCurrentWebview().label;
     const decodedLabel = new TextDecoder().decode(decodeBase64Url(encondedLabel));
     const [id, query] = decodedLabel.split("?");
     if (!id) {

package/esm/src/state/widget/performance.d.ts

@@ -0,0 +1,2 @@
+export declare function disableAnimationsOnPerformanceMode(): Promise<void>;
+//# sourceMappingURL=performance.d.ts.map

package/esm/src/state/widget/performance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/performance.ts"],"names":[],"mappings":"AAGA,wBAAsB,kCAAkC,IAAI,OAAO,CAAC,IAAI,CAAC,CAMxE"}

package/esm/src/state/widget/performance.js

@@ -0,0 +1,18 @@
+import { PerformanceMode } from "../../../gen/types/mod.js";
+import { invoke, SeelenCommand, SeelenEvent, subscribe } from "../../handlers/mod.js";
+export async function disableAnimationsOnPerformanceMode() {
+    const initial = await invoke(SeelenCommand.StateGetPerformanceMode);
+    setDisableAnimations(initial);
+    subscribe(SeelenEvent.StatePerformanceModeChanged, (e) => {
+        setDisableAnimations(e.payload);
+    });
+}
+function setDisableAnimations(mode) {
+    const root = document.documentElement;
+    if (mode === PerformanceMode.Extreme) {
+        root.setAttribute("data-animations-off", "");
+    }
+    else {
+        root.removeAttribute("data-animations-off");
+    }
+}

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

@@ -1,14 +1,25 @@
 import type { Widget } from "./mod.js";
 import { Alignment } from "../../../gen/types/mod.js";
+import { Mutex } from "../../utils/async.js";
+declare class OptimisiticFrame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    init(widget: Widget): Promise<void>;
+}
+export declare const OPTIMISTIC_FRAME: Mutex<OptimisiticFrame>;
 export declare class WidgetAutoSizer {
     private widget;
     private element;
+    private fitOnScreen;
     /** From which side the widget will grow */
-    originX: Alignment;
+    originX?: Alignment | null;
     /** From which side the widget will grow */
-    originY: Alignment;
-    constructor(widget: Widget, element: HTMLElement);
+    originY?: Alignment | null;
+    constructor(widget: Widget, element: HTMLElement, fitOnScreen: boolean);
     private setup;
     execute(): Promise<void>;
 }
+export {};
 //# sourceMappingURL=sizing.d.ts.map

package/esm/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":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,qBAAa,eAAe;IAOxB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,OAAO;IAPjB,2CAA2C;IAC3C,OAAO,EAAE,SAAS,CAAmB;IACrC,2CAA2C;IAC3C,OAAO,EAAE,SAAS,CAAmB;gBAG3B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW;IAM9B,OAAO,CAAC,KAAK;IAcP,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CA6C/B"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/src/state/widget/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,cAAM,gBAAgB;IACpB,CAAC,EAAE,MAAM,CAAK;IACd,CAAC,EAAE,MAAM,CAAK;IACd,KAAK,EAAE,MAAM,CAAK;IAClB,MAAM,EAAE,MAAM,CAAK;IAEb,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAuB1C;AAED,eAAO,MAAM,gBAAgB,yBAAoC,CAAC;AAElE,qBAAa,eAAe;IAOxB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,WAAW;IARrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;gBAGjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,OAAO;IAM9B,OAAO,CAAC,KAAK;IAqBP,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CAsD/B"}