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

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startThemingTool = startThemingTool;
+exports.setPerformanceStyles = setPerformanceStyles;
 exports.startDateCssVariables = startDateCssVariables;
 const ui_colors_js_1 = require("../../system_state/ui_colors.js");
 const DOM_js_1 = require("../../utils/DOM.js");
@@ -21,11 +22,31 @@ async function startThemingTool() {
         settings = newSettings;
         themes.applyToDocument(settings.activeThemes, settings.byTheme);
     });
+    setPerformanceStyles();
+    startDateCssVariables();
     (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);
 }
+// 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;
+}`;
+function setPerformanceStyles() {
+    const styleSheet = new DOM_js_1.RuntimeStyleSheet("@static/performance");
+    styleSheet.addStyle(PERF_CSS);
+    styleSheet.applyToDocument();
+}
 function startDateCssVariables() {
     // Set initial values immediately
     updateDateCssVariables();

package/script/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

package/script/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;IACjC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;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/script/src/state/widget/mod.d.ts

@@ -1,4 +1,4 @@
-import { type Frame, type Rect, type ThirdPartyWidgetSettings, type Widget as IWidget, type WidgetId, type WidgetTriggerPayload } from "../../../gen/types/mod.js";
+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";
@@ -28,11 +28,8 @@ export declare class Widget {
     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 */
@@ -43,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
@@ -58,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/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,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;AAiBvE;;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,CAalB;IAEF,OAAO;IAkBP,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;IAqDjE;;;;;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/script/src/state/widget/mod.js

@@ -79,14 +79,6 @@ class Widget {
         hwnd: 0,
         initialized: false,
         ready: false,
-        position: {
-            x: 0,
-            y: 0,
-        },
-        size: {
-            width: 0,
-            height: 0,
-        },
         firstFocus: true,
     };
     constructor(widget) {
@@ -108,15 +100,6 @@ 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 };
@@ -125,29 +108,12 @@ class Widget {
         }
         return config;
     }
-    applyInvisiblePreset() {
-        return [
-            this.window.setDecorations(false), // no title bar
-            this.window.setShadow(false), // no shadows
-            // hide from native shell
-            this.window.setSkipTaskbar(true),
-            // as a (desktop/overlay) widget we don't wanna allow nothing of these
-            this.window.setMinimizable(false),
-            this.window.setMaximizable(false),
-            this.window.setClosable(false),
-        ];
-    }
     /** Will apply the recommended settings for a desktop widget */
-    async applyDesktopPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.window.setAlwaysOnBottom(true)]);
-    }
+    applyDesktopPreset() { }
     /** Will apply the recommended settings for an overlay widget */
-    async applyOverlayPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.window.setAlwaysOnTop(true)]);
-    }
+    applyOverlayPreset() { }
     /** Will apply the recommended settings for a popup widget */
-    async applyPopupPreset() {
-        await Promise.all([...this.applyInvisiblePreset(), this.window.setAlwaysOnTop(true)]);
+    applyPopupPreset() {
         const hideWidget = (0, async_js_1.debounce)(() => {
             this.hide(true);
         }, 100);
@@ -162,27 +128,8 @@ class Widget {
         this.onTrigger(async ({ desiredPosition, alignX, alignY }) => {
             // avoid flickering when clicking a button that triggers the widget
             hideWidget.cancel();
-            if (this.autoSizer && alignX && alignY) {
-                this.autoSizer.originX = alignX;
-                this.autoSizer.originY = alignY;
-            }
             if (desiredPosition) {
-                const adjusted = (0, positioning_js_1.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();
@@ -223,6 +170,18 @@ class Widget {
             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
@@ -235,8 +194,11 @@ class Widget {
         }
         this.runtimeState.hwnd = await (0, mod_js_2.invoke)(mod_js_2.SeelenCommand.GetSelfWindowId);
         this.runtimeState.initialized = true;
+        if (options.normalizeDevicePixelRatio) {
+            await this.normalizeDevicePixelRatio();
+        }
         if (options.autoSizeByContent) {
-            this.autoSizer = new sizing_js_1.WidgetAutoSizer(this, options.autoSizeByContent);
+            this.autoSizer = new sizing_js_1.WidgetAutoSizer(this, options.autoSizeByContent, options.autoSizeFitOnScreen ?? true);
         }
         else if (options.saveAndRestoreLastRect ?? this.def.preset === mod_js_1.WidgetPreset.Desktop) {
             await this.persistPositionAndSize();
@@ -245,13 +207,13 @@ class Widget {
             case mod_js_1.WidgetPreset.None:
                 break;
             case mod_js_1.WidgetPreset.Desktop:
-                await this.applyDesktopPreset();
+                this.applyDesktopPreset();
                 break;
             case mod_js_1.WidgetPreset.Overlay:
-                await this.applyOverlayPreset();
+                this.applyOverlayPreset();
                 break;
             case mod_js_1.WidgetPreset.Popup:
-                await this.applyPopupPreset();
+                this.applyPopupPreset();
                 break;
         }
         await (0, theming_js_1.startThemingTool)();
@@ -262,16 +224,8 @@ class Widget {
         else {
             console.trace("Animations won't be disabled because widget configuration");
         }
-        // state initialization
-        this.runtimeState.size = await this.window.outerSize();
-        this.runtimeState.position = await this.window.outerPosition();
-        this.window.onResized((e) => {
-            this.runtimeState.size.width = e.payload.width;
-            this.runtimeState.size.height = e.payload.height;
-        });
-        this.window.onMoved((e) => {
-            this.runtimeState.position.x = e.payload.x;
-            this.runtimeState.position.y = e.payload.y;
+        await sizing_js_1.OPTIMISTIC_FRAME.runExclusive(async (state) => {
+            await state.init(this);
         });
     }
     /**
@@ -303,13 +257,8 @@ 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 (0, mod_js_2.invoke)(mod_js_2.SeelenCommand.SetSelfPosition, {
+    async __unsafe_setPosition(rect, ref) {
+        await (0, mod_js_2.invoke)(mod_js_2.SeelenCommand.SetSelfPosition, {
             rect: {
                 left: Math.round(rect.left),
                 top: Math.round(rect.top),
@@ -317,6 +266,40 @@ 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 sizing_js_1.OPTIMISTIC_FRAME.runExclusive(async (ref) => {
+            const adjusted = (0, positioning_js_1.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 sizing_js_1.OPTIMISTIC_FRAME.runExclusive(async (frame) => {
+            await this.__unsafe_setPosition(rect, frame);
+        });
     }
     async show() {
         debouncedClose.cancel();

package/script/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/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":"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"}

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

@@ -1,24 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WidgetAutoSizer = void 0;
-const dpi_1 = require("@tauri-apps/api/dpi");
+exports.WidgetAutoSizer = exports.OPTIMISTIC_FRAME = void 0;
 const mod_js_1 = require("../../../gen/types/mod.js");
+const async_js_1 = require("../../utils/async.js");
+const positioning_js_1 = require("./positioning.js");
+class OptimisiticFrame {
+    x = 0;
+    y = 0;
+    width = 0;
+    height = 0;
+    async init(widget) {
+        const { width, height } = await widget.window.outerSize();
+        const { x, y } = await widget.window.outerPosition();
+        this.width = width;
+        this.height = height;
+        this.x = x;
+        this.y = y;
+        widget.window.onResized((e) => {
+            exports.OPTIMISTIC_FRAME.runExclusive((ref) => {
+                ref.width = e.payload.width;
+                ref.height = e.payload.height;
+            });
+        });
+        widget.window.onMoved((e) => {
+            exports.OPTIMISTIC_FRAME.runExclusive((ref) => {
+                ref.x = e.payload.x;
+                ref.y = e.payload.y;
+            });
+        });
+    }
+}
+exports.OPTIMISTIC_FRAME = new async_js_1.Mutex(new OptimisiticFrame());
 class WidgetAutoSizer {
     widget;
     element;
+    fitOnScreen;
     /** From which side the widget will grow */
-    originX = mod_js_1.Alignment.Start;
+    originX;
     /** From which side the widget will grow */
-    originY = mod_js_1.Alignment.Start;
-    constructor(widget, element) {
+    originY;
+    constructor(widget, element, fitOnScreen) {
         this.widget = widget;
         this.element = element;
+        this.fitOnScreen = fitOnScreen;
         this.execute = this.execute.bind(this);
         this.setup();
     }
     setup() {
         // Disable resizing by the user
         this.widget.window.setResizable(false);
+        this.widget.onTrigger(({ alignX, alignY }) => {
+            exports.OPTIMISTIC_FRAME.runExclusive(() => {
+                this.originX = alignX;
+                this.originY = alignY;
+            });
+        });
         const observer = new ResizeObserver(this.execute);
         observer.observe(this.element, {
             box: "border-box",
@@ -28,8 +64,9 @@ class WidgetAutoSizer {
         };
     }
     async execute() {
-        const { x, y, width, height } = this.widget.frame;
-        const frame = {
+        const guard = await exports.OPTIMISTIC_FRAME.acquire();
+        const { x, y, width, height } = guard.value;
+        let frame = {
             x,
             y,
             width: Math.ceil(this.element.scrollWidth * globalThis.window.devicePixelRatio),
@@ -39,9 +76,12 @@ class WidgetAutoSizer {
         const heightDiff = frame.height - height;
         // Only update if the difference is more than 1px (avoid infinite loops from decimal differences)
         if (widthDiff === 0 && heightDiff === 0) {
+            guard.release();
             return;
         }
-        console.trace(`Auto resize from ${width}x${height} to ${frame.width}x${frame.height}`);
+        /* console.debug(
+          `Auto resizing from ${width}x${height} to ${frame.width}x${frame.height} using ${this.originX}/${this.originY} origin`,
+        ); */
         if (this.originX === mod_js_1.Alignment.Center) {
             frame.x -= widthDiff / 2;
         }
@@ -54,17 +94,20 @@ class WidgetAutoSizer {
         else if (this.originY === mod_js_1.Alignment.End) {
             frame.y -= heightDiff;
         }
-        // only update size no position on this case
-        if (frame.x === x && frame.y === y) {
-            await this.widget.window.setSize(new dpi_1.PhysicalSize(frame.width, frame.height));
-            return;
+        if (this.fitOnScreen) {
+            frame = (0, positioning_js_1.fitIntoMonitor)(frame);
+        }
+        try {
+            await this.widget.__unsafe_setPosition({
+                left: frame.x,
+                top: frame.y,
+                right: frame.x + frame.width,
+                bottom: frame.y + frame.height,
+            }, guard.value);
+        }
+        finally {
+            guard.release();
         }
-        await this.widget.setPosition({
-            left: frame.x,
-            top: frame.y,
-            right: frame.x + frame.width,
-            bottom: frame.y + frame.height,
-        });
     }
 }
 exports.WidgetAutoSizer = WidgetAutoSizer;

package/script/src/utils/async.d.ts

@@ -5,4 +5,16 @@ export interface DebouncedFunction<T extends (...args: any[]) => any> {
     pending(): boolean;
 }
 export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): DebouncedFunction<T>;
+export declare class Mutex<T> {
+    private _rawValue;
+    constructor(_rawValue: T);
+    private lock;
+    acquire(): Promise<Guard<T>>;
+    runExclusive<U>(fn: (v: T) => U): Promise<U>;
+}
+export declare class Guard<T> {
+    value: T;
+    release: () => void;
+    constructor(value: T, release: () => void);
+}
 //# sourceMappingURL=async.d.ts.map

package/script/src/utils/async.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async.d.ts","sourceRoot":"","sources":["../../../src/src/utils/async.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG;IAClE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/B,MAAM,IAAI,IAAI,CAAC;IACf,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,OAAO,CAAC;CACpB;AAGD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,iBAAiB,CAAC,CAAC,CAAC,CA6CtB"}
+{"version":3,"file":"async.d.ts","sourceRoot":"","sources":["../../../src/src/utils/async.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG;IAClE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/B,MAAM,IAAI,IAAI,CAAC;IACf,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,OAAO,CAAC;CACpB;AAGD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,iBAAiB,CAAC,CAAC,CAAC,CA6CtB;AAED,qBAAa,KAAK,CAAC,CAAC;IACN,OAAO,CAAC,SAAS;gBAAT,SAAS,EAAE,CAAC;IAEhC,OAAO,CAAC,IAAI,CAII;IAEV,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IA0B5B,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;CAQnD;AAED,qBAAa,KAAK,CAAC,CAAC;IAET,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,MAAM,IAAI;gBADnB,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,MAAM,IAAI;CAE7B"}

package/script/src/utils/async.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Guard = exports.Mutex = void 0;
 exports.debounce = debounce;
 // deno-lint-ignore no-explicit-any
 function debounce(fn, delay) {
@@ -40,3 +41,51 @@ function debounce(fn, delay) {
     };
     return debounced;
 }
+class Mutex {
+    _rawValue;
+    constructor(_rawValue) {
+        this._rawValue = _rawValue;
+    }
+    lock = null;
+    async acquire() {
+        if (this.lock) {
+            await this.lock.__promise;
+        }
+        // deno-lint-ignore no-explicit-any
+        let __resolve;
+        // deno-lint-ignore no-explicit-any
+        let __reject;
+        const __promise = new Promise((resolve, reject) => {
+            __resolve = resolve;
+            __reject = reject;
+        });
+        this.lock = {
+            __promise,
+            __resolve,
+            __reject,
+        };
+        return new Guard(this._rawValue, () => {
+            this.lock = null;
+            __resolve();
+        });
+    }
+    async runExclusive(fn) {
+        const guard = await this.acquire();
+        try {
+            return await fn(guard.value);
+        }
+        finally {
+            guard.release();
+        }
+    }
+}
+exports.Mutex = Mutex;
+class Guard {
+    value;
+    release;
+    constructor(value, release) {
+        this.value = value;
+        this.release = release;
+    }
+}
+exports.Guard = Guard;

package/script/src/utils/mod.d.ts

@@ -4,4 +4,5 @@ export declare class Rect {
     right: number;
     bottom: number;
 }
+export declare function isSeelenUIRuntime(): boolean;
 //# sourceMappingURL=mod.d.ts.map

package/script/src/utils/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/src/utils/mod.ts"],"names":[],"mappings":"AAAA,qBAAa,IAAI;IACf,IAAI,SAAK;IACT,GAAG,SAAK;IACR,KAAK,SAAK;IACV,MAAM,SAAK;CACZ"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/src/utils/mod.ts"],"names":[],"mappings":"AAAA,qBAAa,IAAI;IACf,IAAI,SAAK;IACT,GAAG,SAAK;IACR,KAAK,SAAK;IACV,MAAM,SAAK;CACZ;AAED,wBAAgB,iBAAiB,IAAI,OAAO,CAG3C"}

package/script/src/utils/mod.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rect = void 0;
+exports.isSeelenUIRuntime = isSeelenUIRuntime;
 class Rect {
     left = 0;
     top = 0;
@@ -8,3 +9,7 @@ class Rect {
     bottom = 0;
 }
 exports.Rect = Rect;
+function isSeelenUIRuntime() {
+    // deno-lint-ignore no-explicit-any
+    return !!globalThis.window.__SLU_WIDGET;
+}