@seelen-ui/lib 2.5.8 → 2.6.6-next.2605170835

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

@@ -3,12 +3,13 @@ import { WidgetPreset, WidgetStatus, } from "../../../gen/types/mod.js";
 import { invoke, SeelenCommand, SeelenEvent } from "../../handlers/mod.js";
 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";
+import { subscribe } from "../../handlers/mod.js";
 /**
  * Represents the widget instance running in the current webview
  */
@@ -39,18 +40,11 @@ export class Widget {
     /** current window where the widget is running */
     window;
     autoSizer;
+    destroyOnHide = false;
     runtimeState = {
         hwnd: 0,
         initialized: false,
         ready: false,
-        position: {
-            x: 0,
-            y: 0,
-        },
-        size: {
-            width: 0,
-            height: 0,
-        },
         firstFocus: true,
     };
     constructor(widget) {
@@ -72,15 +66,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 };
@@ -89,69 +74,37 @@ export 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)]);
-        const hideWidget = debounce(() => {
-            this.hide(true);
-        }, 100);
-        this.window.onFocusChanged(({ payload: focused }) => {
-            if (focused) {
-                hideWidget.cancel();
-            }
-            else {
-                hideWidget();
-            }
-        });
+    applyPopupPreset() {
         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 = 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();
         });
     }
+    hideOnFocusLoss() {
+        let wasFocused = false;
+        const hideDelayed = debounce(() => {
+            this.hide();
+        }, 100);
+        subscribe(SeelenEvent.GlobalFocusChanged, ({ payload: focused }) => {
+            if (focused.hwnd !== this.runtimeState.hwnd && focused.ownerHwnd !== this.runtimeState.hwnd) {
+                if (wasFocused) {
+                    hideDelayed();
+                }
+                wasFocused = false;
+                return;
+            }
+            wasFocused = true;
+            hideDelayed.cancel();
+        });
+    }
     /**
      * 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.
@@ -187,6 +140,18 @@ export 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
@@ -199,23 +164,30 @@ export class Widget {
         }
         this.runtimeState.hwnd = await invoke(SeelenCommand.GetSelfWindowId);
         this.runtimeState.initialized = true;
+        this.destroyOnHide = options.closeOnHide ?? this.def.lazy;
+        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) {
+        if (options.saveAndRestoreLastRect ?? this.def.preset === WidgetPreset.Desktop) {
             await this.persistPositionAndSize();
         }
+        if (options.hideOnFocusLoss ?? this.def.preset === WidgetPreset.Popup) {
+            this.hideOnFocusLoss();
+        }
         switch (this.def.preset) {
             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();
@@ -226,16 +198,8 @@ export 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 OPTIMISTIC_FRAME.runExclusive(async (state) => {
+            await state.init(this);
         });
     }
     /**
@@ -257,7 +221,7 @@ export class Widget {
         await this.autoSizer?.execute();
         if (show && !(await this.window.isVisible())) {
             await this.show();
-            await this.focus();
+            // await this.focus();
         }
         // this will mark the widget as ready, and send pending trigger event if exists
         await invoke(SeelenCommand.SetCurrentWidgetStatus, { status: WidgetStatus.Ready });
@@ -267,13 +231,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),
@@ -281,6 +240,40 @@ 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();
@@ -292,13 +285,11 @@ export class Widget {
             await getCurrentWebview().setFocus();
             this.runtimeState.firstFocus = false;
         }
-        await invoke(SeelenCommand.RequestFocus, { hwnd: this.runtimeState.hwnd }).catch(() => {
-            console.warn(`Failed to focus widget: ${this.decoded.label}`);
-        });
+        await invoke(SeelenCommand.RequestFocus, { hwnd: this.runtimeState.hwnd }).catch(() => { });
     }
-    hide(closeAfterInactivity) {
+    hide() {
         this.window.hide();
-        if (closeAfterInactivity) {
+        if (this.destroyOnHide) {
             debouncedClose();
         }
     }

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

@@ -1,6 +1,6 @@
 import { Alignment } from "../../../gen/types/mod.js";
 import { invoke, subscribe } from "../../handlers/mod.js";
-import { SeelenCommand } from "../../lib.js";
+import { SeelenCommand } from "../../handlers/commands.js";
 import { SeelenEvent } from "../../handlers/events.js";
 const monitors = {
     value: [],

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"}

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

@@ -1,21 +1,57 @@
-import { PhysicalSize } from "@tauri-apps/api/dpi";
 import { Alignment } from "../../../gen/types/mod.js";
+import { Mutex } from "../../utils/async.js";
+import { fitIntoMonitor } from "./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) => {
+            OPTIMISTIC_FRAME.runExclusive((ref) => {
+                ref.width = e.payload.width;
+                ref.height = e.payload.height;
+            });
+        });
+        widget.window.onMoved((e) => {
+            OPTIMISTIC_FRAME.runExclusive((ref) => {
+                ref.x = e.payload.x;
+                ref.y = e.payload.y;
+            });
+        });
+    }
+}
+export const OPTIMISTIC_FRAME = new Mutex(new OptimisiticFrame());
 export class WidgetAutoSizer {
     widget;
     element;
+    fitOnScreen;
     /** From which side the widget will grow */
-    originX = Alignment.Start;
+    originX;
     /** From which side the widget will grow */
-    originY = 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 }) => {
+            OPTIMISTIC_FRAME.runExclusive(() => {
+                this.originX = alignX;
+                this.originY = alignY;
+            });
+        });
         const observer = new ResizeObserver(this.execute);
         observer.observe(this.element, {
             box: "border-box",
@@ -25,8 +61,9 @@ export class WidgetAutoSizer {
         };
     }
     async execute() {
-        const { x, y, width, height } = this.widget.frame;
-        const frame = {
+        const guard = await OPTIMISTIC_FRAME.acquire();
+        const { x, y, width, height } = guard.value;
+        let frame = {
             x,
             y,
             width: Math.ceil(this.element.scrollWidth * globalThis.window.devicePixelRatio),
@@ -36,9 +73,12 @@ export 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 === Alignment.Center) {
             frame.x -= widthDiff / 2;
         }
@@ -51,16 +91,19 @@ export class WidgetAutoSizer {
         else if (this.originY === 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 PhysicalSize(frame.width, frame.height));
-            return;
+        if (this.fitOnScreen) {
+            frame = 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,
-        });
     }
 }

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

@@ -5,7 +5,6 @@ export declare class UIColors {
     constructor(inner: IUIColors);
     static getAsync(): Promise<UIColors>;
     static onChange(cb: (payload: UIColors) => void): Promise<UnSubscriber>;
-    static default(): UIColors;
     setAsCssVariables(): void;
 }
 export interface Color extends IColor {

package/esm/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;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;CA2B1B;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;;;;;OAKG;IACH,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAWpC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM;IAYzC,aAAa,IAAI,KAAK;CAQvB"}
+{"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,iBAAiB,IAAI,IAAI;CAuB1B;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;;;;;OAKG;IACH,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAWpC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM;IAYzC,aAAa,IAAI,KAAK;CAQvB"}

package/esm/src/system_state/ui_colors.js

@@ -12,36 +12,19 @@ export class UIColors {
     static onChange(cb) {
         return newOnEvent(cb, this, SeelenEvent.ColorsChanged);
     }
-    static default() {
-        return new this({
-            background: "#ffffff",
-            foreground: "#000000",
-            accent_darkest: "#990000",
-            accent_darker: "#aa0000",
-            accent_dark: "#bb0000",
-            accent: "#cc0000",
-            accent_light: "#dd0000",
-            accent_lighter: "#ee0000",
-            accent_lightest: "#ff0000",
-            complement: null,
-        });
-    }
     setAsCssVariables() {
         const oldStyles = new RuntimeStyleSheet("@deprecated/system-colors");
         const newStyles = new RuntimeStyleSheet("@runtime/system-colors");
-        for (const [key, value] of Object.entries(this.inner)) {
-            if (typeof value !== "string") {
-                continue;
-            }
-            const color = Color.fromHex(value);
-            const { r, g, b } = color;
+        for (const [key, _color] of Object.entries(this.inner)) {
+            const color = new Color(_color);
+            const { r, g, b } = _color;
             // replace rust snake case with kebab case
             const name = key.replace("_", "-");
             // @deprecated old names
-            oldStyles.addVariable(`--config-${name}-color`, value.slice(0, 7));
+            oldStyles.addVariable(`--config-${name}-color`, color.toHexString());
             oldStyles.addVariable(`--config-${name}-color-rgb`, `${r}, ${g}, ${b}`);
             if (name.startsWith("accent")) {
-                newStyles.addVariable(`--system-${name}-color`, value.slice(0, 7));
+                newStyles.addVariable(`--system-${name}-color`, color.toHexString());
             }
         }
         oldStyles.applyToDocument();

package/esm/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/esm/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/esm/src/utils/async.js

@@ -37,3 +37,49 @@ export function debounce(fn, delay) {
     };
     return debounced;
 }
+export 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();
+        }
+    }
+}
+export class Guard {
+    value;
+    release;
+    constructor(value, release) {
+        this.value = value;
+        this.release = release;
+    }
+}

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

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

package/esm/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;AAED,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

package/esm/src/utils/mod.js

@@ -4,3 +4,8 @@ export class Rect {
     right = 0;
     bottom = 0;
 }
+export function isSeelenUIRuntime() {
+    // deno-lint-ignore no-explicit-any
+    return !!globalThis.window.__SLU_WIDGET;
+}
+export { RuntimeStyleSheet } from "./DOM.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seelen-ui/lib",
-  "version": "2.5.8",
+  "version": "2.6.6-next.2605170835",
   "description": "Seelen UI Library for Widgets",
   "repository": {
     "type": "git",
@@ -24,15 +24,16 @@
     "./tauri": {
       "import": "./esm/src/re-exports/tauri.js",
       "require": "./script/src/re-exports/tauri.js"
-    }
+    },
+    "./styles/*": "./styles/*"
   },
   "scripts": {},
   "dependencies": {
-    "@tauri-apps/api": "^2.10.1",
-    "@tauri-apps/plugin-dialog": "^2.6.0",
-    "@tauri-apps/plugin-fs": "^2.4.5",
+    "@tauri-apps/api": "^2.11.0",
+    "@tauri-apps/plugin-dialog": "^2.7.1",
+    "@tauri-apps/plugin-fs": "^2.5.1",
     "@tauri-apps/plugin-log": "^2.8.0",
     "@tauri-apps/plugin-process": "^2.3.1"
   },
   "_generatedBy": "dnt@dev"
-}
+}

package/script/gen/types/AppBarEdge.d.ts

@@ -0,0 +1,7 @@
+export declare enum AppBarEdge {
+    "Top" = "Top",
+    "Left" = "Left",
+    "Bottom" = "Bottom",
+    "Right" = "Right"
+}
+//# sourceMappingURL=AppBarEdge.d.ts.map

package/script/gen/types/AppBarEdge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarEdge.d.ts","sourceRoot":"","sources":["../../../src/gen/types/AppBarEdge.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU;IAAG,KAAK,QAAQ;IAAE,MAAM,SAAS;IAAE,QAAQ,WAAW;IAAE,OAAO,UAAU;CAAE"}

package/script/gen/types/AppBarEdge.js

@@ -0,0 +1,11 @@
+"use strict";
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBarEdge = void 0;
+var AppBarEdge;
+(function (AppBarEdge) {
+    AppBarEdge["Top"] = "Top";
+    AppBarEdge["Left"] = "Left";
+    AppBarEdge["Bottom"] = "Bottom";
+    AppBarEdge["Right"] = "Right";
+})(AppBarEdge || (exports.AppBarEdge = AppBarEdge = {}));