defuss-desktop 0.0.2 → 0.0.4

package/README.md

@@ -92,10 +92,10 @@ Integrating `defuss-wm` in your project
 
 ```bash
 # install a decent package manager
-npm i -g pnpm@^9.13.2
+npm i -g bun@^1.3.9
 
 # from your project root folder, add defuss-wm to your dependencies
-pnpm install defuss-wm
+bun install defuss-wm
 ```
 
 #### 2. Set up your desktop environment:
@@ -198,8 +198,8 @@ All commands are run from the root of the project, from a terminal:
 
 | Command       | Action                                                                                                                                                                                                                           |
 | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `pnpm build`    | Build a new version of the window manager. |
-| `pnpm test`    | Run the test suite for `defuss-wm`. |
+| `bun build`    | Build a new version of the window manager. |
+| `bun test`    | Run the test suite for `defuss-wm`. |
 
 ---
 

package/dist/index.cjs

@@ -24,6 +24,124 @@ function Button({
   );
 }
 
+const defaultTaskbarOptions = {
+  position: "bottom",
+  stateful: false,
+  theme: "default",
+  size: "medium"
+};
+class TaskbarManager {
+  position;
+  theme;
+  // e.g., 'windows-xp', 'macos', etc.
+  size;
+  constructor(options = defaultTaskbarOptions) {
+    this.position = options.position || "bottom";
+    this.theme = options.theme || "default";
+    this.size = options.size || "medium";
+    if (options.stateful) ;
+  }
+  getDimensions() {
+    const el = document.querySelector(".taskbar");
+    if (!el) {
+      return { width: 0, height: 0 };
+    }
+    return {
+      width: el.clientWidth,
+      height: el.clientHeight
+    };
+  }
+}
+globalThis.__defussTaskbarManager = globalThis.__defussTaskbarManager || new TaskbarManager();
+const taskbarManager = globalThis.__defussTaskbarManager;
+
+class DefussDesktopAppIcon {
+  constructor(config) {
+    this.config = config;
+  }
+}
+const defaultDesktopOptions = {
+  icons: [],
+  backgroundColor: "#000"
+};
+class DesktopManager {
+  constructor(options = defaultDesktopOptions) {
+    this.options = options;
+  }
+  el;
+  state;
+  resizeObserver;
+  resizeCallbacks = /* @__PURE__ */ new Set();
+  init(el, options = this.options) {
+    this.options = options;
+    this.el = el;
+    this.state = this.state || {
+      icons: this.options.icons.map((icon) => icon.config)
+    };
+    this.setupResizeObserver();
+    this.render(el);
+  }
+  render(el) {
+    el.style.backgroundColor = this.options.backgroundColor;
+    if (this.options.backgroundImage) {
+      el.style.backgroundImage = `url(${this.options.backgroundImage})`;
+    }
+    if (this.options.backgroundImageSize) {
+      el.style.backgroundSize = this.options.backgroundImageSize || "cover";
+    }
+    if (this.options.backgroundRepeat) {
+      el.style.backgroundRepeat = this.options.backgroundRepeat || "no-repeat";
+    }
+    if (this.options.backgroundPosition) {
+      el.style.backgroundPosition = this.options.backgroundPosition || "center";
+    }
+  }
+  addIcon(icon) {
+    this.options.icons.push(icon);
+    console.log(`Icon added: ${icon.config.name}`);
+  }
+  getDimensions() {
+    if (!this.el) {
+      throw new Error("Desktop not initialized. Call init() first.");
+    }
+    return {
+      width: this.el.offsetWidth,
+      height: this.el.offsetHeight - taskbarManager.getDimensions().height
+      // destop is root element minus taskbar height
+    };
+  }
+  setupResizeObserver() {
+    if (!this.el) return;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      const dimensions = this.getDimensions();
+      this.resizeCallbacks.forEach((callback) => {
+        try {
+          callback(dimensions);
+        } catch (error) {
+          console.error("Error in desktop resize callback:", error);
+        }
+      });
+    });
+    this.resizeObserver.observe(this.el);
+  }
+  /**
+   * Register a callback for desktop resize events
+   * @param callback Function to call when desktop is resized
+   * @returns Unregister function to remove the callback
+   */
+  onResize(callback) {
+    this.resizeCallbacks.add(callback);
+    return () => {
+      this.resizeCallbacks.delete(callback);
+    };
+  }
+}
+globalThis.__defussDesktopManager = globalThis.__defussDesktopManager || new DesktopManager();
+const desktopManager = globalThis.__defussDesktopManager;
+
 const defaultWindowOptions = {
   title: "Untitled",
   resizable: true,
@@ -46,7 +164,9 @@ class WindowManager {
   windows = [];
   constructor() {
     defuss.$(() => {
-      desktopManager.onResize(defussRuntime.debounce(this.onDesktopResized.bind(this), 50));
+      if (desktopManager?.onResize) {
+        desktopManager.onResize(defussRuntime.debounce(this.onDesktopResized.bind(this), 50));
+      }
     });
   }
   onDesktopResized(dimensions) {
@@ -290,6 +410,11 @@ function Window({
   }
 }) {
   let isDragging = false;
+  let dragPointerId = null;
+  let dragStartMouse = { x: 0, y: 0 };
+  let dragStartWin = { x: 0, y: 0 };
+  let lastWin = { x, y };
+  let capturedTitleBar = null;
   const initialWindowState = windowManager.addWindow({
     id,
     title,
@@ -301,7 +426,7 @@ function Window({
     minimizable,
     maximizable
   });
-  let dragStart = { x: initialWindowState.x, y: initialWindowState.y };
+  lastWin = { x: initialWindowState.x, y: initialWindowState.y };
   ref.state = {
     onClose: () => {
       console.log("Window closed");
@@ -315,15 +440,9 @@ function Window({
       console.log("Window maximized");
       onMaximize();
     },
-    minimize: () => {
-      windowManager.minimizeWindow(initialWindowState.id);
-    },
-    maximize: () => {
-      windowManager.maximizeWindow(initialWindowState.id);
-    },
-    restore: () => {
-      windowManager.restoreWindow(initialWindowState.id);
-    },
+    minimize: () => windowManager.minimizeWindow(initialWindowState.id),
+    maximize: () => windowManager.maximizeWindow(initialWindowState.id),
+    restore: () => windowManager.restoreWindow(initialWindowState.id),
     close: () => {
       console.log("Closing window");
       windowManager.closeWindow(initialWindowState.id);
@@ -334,45 +453,67 @@ function Window({
       windowManager.updateWindow(initialWindowState.id, newState);
     },
     250
-    // 1/4 second throttle
   );
-  const onMouseMove = async (event) => {
+  const onWindowMouseDown = (_event) => windowManager.setActiveWindow(initialWindowState.id);
+  const getCurrentWinPos = () => {
+    const el = ref.current;
+    if (!el) return { x: lastWin.x, y: lastWin.y };
+    const left = Number.parseFloat(el.style.left);
+    const top = Number.parseFloat(el.style.top);
+    return {
+      x: Number.isFinite(left) ? left : el.offsetLeft,
+      y: Number.isFinite(top) ? top : el.offsetTop
+    };
+  };
+  const stopDragging = (event) => {
     if (!isDragging) return;
-    const mouseEvent = event;
-    const win = await defuss.$(ref);
-    const deltaX = mouseEvent.clientX - dragStart.x;
-    const deltaY = mouseEvent.clientY - dragStart.y;
-    const currentOffset = await win.offset();
-    if (currentOffset) {
-      const newX = currentOffset.left + deltaX;
-      const newY = currentOffset.top + deltaY;
-      updateWindowState({ x: newX, y: newY });
-      await win.css({
-        left: `${newX}px`,
-        top: `${newY}px`
-      });
+    if (event && capturedTitleBar && typeof capturedTitleBar.releasePointerCapture === "function" && dragPointerId === event.pointerId) {
+      try {
+        capturedTitleBar.releasePointerCapture(event.pointerId);
+      } catch {
+      }
     }
-    dragStart = { x: mouseEvent.clientX, y: mouseEvent.clientY };
+    isDragging = false;
+    dragPointerId = null;
+    capturedTitleBar = null;
+    windowManager.updateWindow(initialWindowState.id, { x: lastWin.x, y: lastWin.y });
   };
-  const onWindowMouseDown = (event) => windowManager.setActiveWindow(initialWindowState.id);
-  const onMouseDown = (event) => {
-    if (event.target.tagName === "BUTTON") {
-      isDragging = false;
-      return;
-    }
+  const onTitlePointerDown = (event) => {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const target = event.target;
+    if (target?.tagName === "BUTTON") return;
+    const titleBarEl = target?.closest?.(".title-bar");
+    if (!titleBarEl) return;
+    windowManager.setActiveWindow(initialWindowState.id);
     isDragging = true;
-    dragStart = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    defuss.$(document).on("mousemove", onMouseMove);
-    defuss.$(document).on("mouseup", onMouseUp);
+    dragPointerId = event.pointerId;
+    capturedTitleBar = titleBarEl;
+    dragStartMouse = { x: event.clientX, y: event.clientY };
+    dragStartWin = getCurrentWinPos();
+    if (typeof titleBarEl.setPointerCapture === "function") {
+      titleBarEl.setPointerCapture(event.pointerId);
+    }
     event.preventDefault();
   };
-  const onMouseUp = () => {
-    isDragging = false;
-    defuss.$(document).off("mousemove", onMouseMove);
-    defuss.$(document).off("mouseup", onMouseUp);
+  const onTitlePointerMove = (event) => {
+    if (!isDragging) return;
+    if (dragPointerId !== null && event.pointerId !== dragPointerId) return;
+    const newX = dragStartWin.x + (event.clientX - dragStartMouse.x);
+    const newY = dragStartWin.y + (event.clientY - dragStartMouse.y);
+    lastWin = { x: newX, y: newY };
+    const el = ref.current;
+    if (el) {
+      el.style.left = `${newX}px`;
+      el.style.top = `${newY}px`;
+    }
+    updateWindowState({ x: newX, y: newY });
+    event.preventDefault();
+  };
+  const onTitlePointerUp = (event) => {
+    stopDragging(event);
+  };
+  const onTitlePointerCancel = (event) => {
+    stopDragging(event);
   };
   const onWindowMounted = () => {
     windowManager.updateWindow(initialWindowState.id, {
@@ -380,17 +521,18 @@ function Window({
       ref
     });
     windowManager.setActiveWindow(initialWindowState.id);
+    defuss.$(document).on("blur", () => stopDragging());
+    defuss.$(document).on("visibilitychange", () => {
+      if (document.hidden) stopDragging();
+    });
   };
   const onCloseClick = () => windowManager.closeWindow(initialWindowState.id);
-  const onMaximizeClick = async () => {
+  const onMaximizeClick = () => {
     const currentState = windowManager.getWindow(initialWindowState.id);
-    if (currentState?.maximized) {
-      windowManager.restoreWindow(initialWindowState.id);
-    } else {
-      windowManager.maximizeWindow(initialWindowState.id);
-    }
+    if (currentState?.maximized) windowManager.restoreWindow(initialWindowState.id);
+    else windowManager.maximizeWindow(initialWindowState.id);
   };
-  const onMinimizeClick = async () => {
+  const onMinimizeClick = () => {
     windowManager.minimizeWindow(initialWindowState.id);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -412,36 +554,18 @@ function Window({
           {
             class: "title-bar",
             onMount: onWindowMounted,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
+            onPointerDown: onTitlePointerDown,
+            onPointerMove: onTitlePointerMove,
+            onPointerUp: onTitlePointerUp,
+            onPointerCancel: onTitlePointerCancel,
+            onDblClick: onMaximizeClick,
+            style: { touchAction: "none" },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { class: "title-bar-text", children: title }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "title-bar-controls", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Minimize",
-                    onClick: onMinimizeClick
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Maximize",
-                    onClick: onMaximizeClick
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Close",
-                    onClick: onCloseClick
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Minimize", onClick: onMinimizeClick }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Maximize", onClick: onMaximizeClick }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", onClick: onCloseClick })
               ] })
             ]
           }
@@ -627,93 +751,6 @@ const LogonScreen = ({
   ] });
 };
 
-class DefussDesktopAppIcon {
-  constructor(config) {
-    this.config = config;
-  }
-}
-const defaultDesktopOptions = {
-  icons: [],
-  backgroundColor: "#000"
-};
-class DesktopManager {
-  constructor(options = defaultDesktopOptions) {
-    this.options = options;
-  }
-  el;
-  state;
-  resizeObserver;
-  resizeCallbacks = /* @__PURE__ */ new Set();
-  init(el, options = this.options) {
-    this.options = options;
-    this.el = el;
-    this.state = this.state || {
-      icons: this.options.icons.map((icon) => icon.config)
-    };
-    this.setupResizeObserver();
-    this.render(el);
-  }
-  render(el) {
-    el.style.backgroundColor = this.options.backgroundColor;
-    if (this.options.backgroundImage) {
-      el.style.backgroundImage = `url(${this.options.backgroundImage})`;
-    }
-    if (this.options.backgroundImageSize) {
-      el.style.backgroundSize = this.options.backgroundImageSize || "cover";
-    }
-    if (this.options.backgroundRepeat) {
-      el.style.backgroundRepeat = this.options.backgroundRepeat || "no-repeat";
-    }
-    if (this.options.backgroundPosition) {
-      el.style.backgroundPosition = this.options.backgroundPosition || "center";
-    }
-  }
-  addIcon(icon) {
-    this.options.icons.push(icon);
-    console.log(`Icon added: ${icon.config.name}`);
-  }
-  getDimensions() {
-    if (!this.el) {
-      throw new Error("Desktop not initialized. Call init() first.");
-    }
-    return {
-      width: this.el.offsetWidth,
-      height: this.el.offsetHeight - taskbarManager.getDimensions().height
-      // destop is root element minus taskbar height
-    };
-  }
-  setupResizeObserver() {
-    if (!this.el) return;
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-    this.resizeObserver = new ResizeObserver(() => {
-      const dimensions = this.getDimensions();
-      this.resizeCallbacks.forEach((callback) => {
-        try {
-          callback(dimensions);
-        } catch (error) {
-          console.error("Error in desktop resize callback:", error);
-        }
-      });
-    });
-    this.resizeObserver.observe(this.el);
-  }
-  /**
-   * Register a callback for desktop resize events
-   * @param callback Function to call when desktop is resized
-   * @returns Unregister function to remove the callback
-   */
-  onResize(callback) {
-    this.resizeCallbacks.add(callback);
-    return () => {
-      this.resizeCallbacks.delete(callback);
-    };
-  }
-}
-globalThis.__defussDesktopManager = globalThis.__defussDesktopManager || new DesktopManager();
-const desktopManager = globalThis.__defussDesktopManager;
-
 const StartMenu = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "slide-open crt", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { class: "top", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Aron Homberg" }) }),
@@ -851,15 +888,12 @@ class DequeryWithWindowManager extends defuss.CallChainImpl {
   */
   // register an app to the desktop shell
   createDesktopApp(options) {
-    return defuss.createCall(this, "createDesktopApp", async () => {
-      return new DefussApp(options);
-    });
+    new DefussApp(options);
+    return this;
   }
   // create a desktop app icon
   createDesktopAppIcon(options) {
-    return defuss.createCall(this, "createDesktopAppIcon", async () => {
-      return new DefussDesktopAppIcon(options);
-    });
+    return this;
   }
 }
 const $ = defuss.dequery.extend(DequeryWithWindowManager, [
@@ -868,37 +902,6 @@ const $ = defuss.dequery.extend(DequeryWithWindowManager, [
   "createDesktopAppIcon"
 ]);
 
-const defaultTaskbarOptions = {
-  position: "bottom",
-  stateful: false,
-  theme: "default",
-  size: "medium"
-};
-class TaskbarManager {
-  position;
-  theme;
-  // e.g., 'windows-xp', 'macos', etc.
-  size;
-  constructor(options = defaultTaskbarOptions) {
-    this.position = options.position || "bottom";
-    this.theme = options.theme || "default";
-    this.size = options.size || "medium";
-    if (options.stateful) ;
-  }
-  getDimensions() {
-    const el = document.querySelector(".taskbar");
-    if (!el) {
-      return { width: 0, height: 0 };
-    }
-    return {
-      width: el.clientWidth,
-      height: el.clientHeight
-    };
-  }
-}
-globalThis.__defussTaskbarManager = globalThis.__defussTaskbarManager || new TaskbarManager();
-const taskbarManager = globalThis.__defussTaskbarManager;
-
 const defaultSystemSoundFilePaths = [
   "/sounds/balloon.ogg",
   "/sounds/batterycritical.ogg",

package/dist/index.d.cts

@@ -1,15 +1,15 @@
 import * as defuss from 'defuss';
-import { Props, CallChainImpl, Dequery, NodeType, Ref } from 'defuss';
+import { Props, CallChainImpl, Dequery, Ref } from 'defuss';
 
-declare function Desktop({ ref }: Props): any;
+declare function Desktop({ ref }: Props<HTMLDivElement>): JSX.Element;
 
-interface ButtonProps extends Props {
+interface ButtonProps extends Props<HTMLButtonElement> {
     onClick?: () => void;
     disabled?: boolean;
 }
-declare function Button({ onClick, disabled, children, ref, }: ButtonProps): any;
+declare function Button({ onClick, disabled, children, ref, }: ButtonProps): JSX.Element;
 
-interface LogonScreenProps extends Props {
+interface LogonScreenProps extends Props<HTMLDivElement> {
     cDriveBasePath?: string;
     showGuestUser?: boolean;
     onTurnOffComputer?: () => void;
@@ -20,7 +20,7 @@ type LoginForm = {
     username: string;
     password: string;
 };
-declare const LogonScreen: ({ cDriveBasePath, showGuestUser, onTurnOffComputer, onGuestLogon, onUserLogonSubmit, ref, }: LogonScreenProps) => any;
+declare const LogonScreen: ({ cDriveBasePath, showGuestUser, onTurnOffComputer, onGuestLogon, onUserLogonSubmit, ref, }: LogonScreenProps) => JSX.Element;
 
 interface DefussAppConfig {
     name: string;
@@ -85,20 +85,20 @@ declare class DesktopManager {
 }
 declare const desktopManager: DesktopManager;
 
-interface ShellProps extends Props {
+interface ShellProps extends Props<HTMLDivElement> {
     desktopConfig: CreateDesktopOptions;
 }
-declare function Shell({ ref, desktopConfig, }: ShellProps): any;
+declare function Shell({ ref, desktopConfig, }: ShellProps): JSX.Element;
 
-declare const Taskbar: () => any;
+declare const Taskbar: () => JSX.Element;
 
-declare const StartButton: () => any;
+declare const StartButton: () => JSX.Element;
 
-declare const StartMenu: () => any;
+declare const StartMenu: () => JSX.Element;
 
 declare class DequeryWithWindowManager<NT> extends CallChainImpl<NT, DequeryWithWindowManager<NT> & Dequery<NT>> {
-    createDesktopApp(options: DefussAppConfig): PromiseLike<DefussApp>;
-    createDesktopAppIcon(options: DesktopIconConfig): PromiseLike<DefussDesktopAppIcon>;
+    createDesktopApp(options: DefussAppConfig): this & Dequery<NT>;
+    createDesktopAppIcon(options: DesktopIconConfig): this & Dequery<NT>;
 }
 /**
  * Extended dequery function with window management capabilities.
@@ -107,7 +107,7 @@ declare class DequeryWithWindowManager<NT> extends CallChainImpl<NT, DequeryWith
  * @param options - Optional dequery options
  * @returns Extended dequery instance with createWindow and createTaskbar methods
  */
-declare const $: <NT = defuss.DequerySyncMethodReturnType>(selectorRefOrEl: string | NodeType | defuss.Ref<any, NodeType> | defuss.RenderInput | Function, options?: (defuss.DequeryOptions<NT> & JSX.HTMLAttributesLowerCase & {
+declare const $: <NT = defuss.NodeType>(selectorRefOrEl: string | defuss.NodeType | defuss.Ref<defuss.NodeType, any> | defuss.RenderInput | Function, options?: (defuss.DequeryOptions<NT> & JSX.HTMLAttributesLowerCase<defuss.DOMElement> & JSX.HTMLAttributesLowerCase<defuss.DOMElement> & {
     html?: string;
     text?: string;
 }) | undefined) => DequeryWithWindowManager<unknown>;
@@ -142,7 +142,7 @@ interface CreateWindowOptions {
 interface WindowState {
     id: string;
     el: HTMLElement;
-    ref: Ref<WindowRefState>;
+    ref: Ref<HTMLElement, WindowRefState>;
     title: string;
     icon: string;
     width: number;

package/dist/index.d.mts

@@ -1,15 +1,15 @@
 import * as defuss from 'defuss';
-import { Props, CallChainImpl, Dequery, NodeType, Ref } from 'defuss';
+import { Props, CallChainImpl, Dequery, Ref } from 'defuss';
 
-declare function Desktop({ ref }: Props): any;
+declare function Desktop({ ref }: Props<HTMLDivElement>): JSX.Element;
 
-interface ButtonProps extends Props {
+interface ButtonProps extends Props<HTMLButtonElement> {
     onClick?: () => void;
     disabled?: boolean;
 }
-declare function Button({ onClick, disabled, children, ref, }: ButtonProps): any;
+declare function Button({ onClick, disabled, children, ref, }: ButtonProps): JSX.Element;
 
-interface LogonScreenProps extends Props {
+interface LogonScreenProps extends Props<HTMLDivElement> {
     cDriveBasePath?: string;
     showGuestUser?: boolean;
     onTurnOffComputer?: () => void;
@@ -20,7 +20,7 @@ type LoginForm = {
     username: string;
     password: string;
 };
-declare const LogonScreen: ({ cDriveBasePath, showGuestUser, onTurnOffComputer, onGuestLogon, onUserLogonSubmit, ref, }: LogonScreenProps) => any;
+declare const LogonScreen: ({ cDriveBasePath, showGuestUser, onTurnOffComputer, onGuestLogon, onUserLogonSubmit, ref, }: LogonScreenProps) => JSX.Element;
 
 interface DefussAppConfig {
     name: string;
@@ -85,20 +85,20 @@ declare class DesktopManager {
 }
 declare const desktopManager: DesktopManager;
 
-interface ShellProps extends Props {
+interface ShellProps extends Props<HTMLDivElement> {
     desktopConfig: CreateDesktopOptions;
 }
-declare function Shell({ ref, desktopConfig, }: ShellProps): any;
+declare function Shell({ ref, desktopConfig, }: ShellProps): JSX.Element;
 
-declare const Taskbar: () => any;
+declare const Taskbar: () => JSX.Element;
 
-declare const StartButton: () => any;
+declare const StartButton: () => JSX.Element;
 
-declare const StartMenu: () => any;
+declare const StartMenu: () => JSX.Element;
 
 declare class DequeryWithWindowManager<NT> extends CallChainImpl<NT, DequeryWithWindowManager<NT> & Dequery<NT>> {
-    createDesktopApp(options: DefussAppConfig): PromiseLike<DefussApp>;
-    createDesktopAppIcon(options: DesktopIconConfig): PromiseLike<DefussDesktopAppIcon>;
+    createDesktopApp(options: DefussAppConfig): this & Dequery<NT>;
+    createDesktopAppIcon(options: DesktopIconConfig): this & Dequery<NT>;
 }
 /**
  * Extended dequery function with window management capabilities.
@@ -107,7 +107,7 @@ declare class DequeryWithWindowManager<NT> extends CallChainImpl<NT, DequeryWith
  * @param options - Optional dequery options
  * @returns Extended dequery instance with createWindow and createTaskbar methods
  */
-declare const $: <NT = defuss.DequerySyncMethodReturnType>(selectorRefOrEl: string | NodeType | defuss.Ref<any, NodeType> | defuss.RenderInput | Function, options?: (defuss.DequeryOptions<NT> & JSX.HTMLAttributesLowerCase & {
+declare const $: <NT = defuss.NodeType>(selectorRefOrEl: string | defuss.NodeType | defuss.Ref<defuss.NodeType, any> | defuss.RenderInput | Function, options?: (defuss.DequeryOptions<NT> & JSX.HTMLAttributesLowerCase<defuss.DOMElement> & JSX.HTMLAttributesLowerCase<defuss.DOMElement> & {
     html?: string;
     text?: string;
 }) | undefined) => DequeryWithWindowManager<unknown>;
@@ -142,7 +142,7 @@ interface CreateWindowOptions {
 interface WindowState {
     id: string;
     el: HTMLElement;
-    ref: Ref<WindowRefState>;
+    ref: Ref<HTMLElement, WindowRefState>;
     title: string;
     icon: string;
     width: number;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createRef, $ as $$1, dequery, CallChainImpl, createCall } from 'defuss';
+import { createRef, $ as $$1, dequery, CallChainImpl } from 'defuss';
 import { debounce, throttle } from 'defuss-runtime';
 import { jsx, jsxs } from 'defuss/jsx-runtime';
 import { access, transval, rule } from 'defuss-transval';
@@ -22,6 +22,124 @@ function Button({
   );
 }
 
+const defaultTaskbarOptions = {
+  position: "bottom",
+  stateful: false,
+  theme: "default",
+  size: "medium"
+};
+class TaskbarManager {
+  position;
+  theme;
+  // e.g., 'windows-xp', 'macos', etc.
+  size;
+  constructor(options = defaultTaskbarOptions) {
+    this.position = options.position || "bottom";
+    this.theme = options.theme || "default";
+    this.size = options.size || "medium";
+    if (options.stateful) ;
+  }
+  getDimensions() {
+    const el = document.querySelector(".taskbar");
+    if (!el) {
+      return { width: 0, height: 0 };
+    }
+    return {
+      width: el.clientWidth,
+      height: el.clientHeight
+    };
+  }
+}
+globalThis.__defussTaskbarManager = globalThis.__defussTaskbarManager || new TaskbarManager();
+const taskbarManager = globalThis.__defussTaskbarManager;
+
+class DefussDesktopAppIcon {
+  constructor(config) {
+    this.config = config;
+  }
+}
+const defaultDesktopOptions = {
+  icons: [],
+  backgroundColor: "#000"
+};
+class DesktopManager {
+  constructor(options = defaultDesktopOptions) {
+    this.options = options;
+  }
+  el;
+  state;
+  resizeObserver;
+  resizeCallbacks = /* @__PURE__ */ new Set();
+  init(el, options = this.options) {
+    this.options = options;
+    this.el = el;
+    this.state = this.state || {
+      icons: this.options.icons.map((icon) => icon.config)
+    };
+    this.setupResizeObserver();
+    this.render(el);
+  }
+  render(el) {
+    el.style.backgroundColor = this.options.backgroundColor;
+    if (this.options.backgroundImage) {
+      el.style.backgroundImage = `url(${this.options.backgroundImage})`;
+    }
+    if (this.options.backgroundImageSize) {
+      el.style.backgroundSize = this.options.backgroundImageSize || "cover";
+    }
+    if (this.options.backgroundRepeat) {
+      el.style.backgroundRepeat = this.options.backgroundRepeat || "no-repeat";
+    }
+    if (this.options.backgroundPosition) {
+      el.style.backgroundPosition = this.options.backgroundPosition || "center";
+    }
+  }
+  addIcon(icon) {
+    this.options.icons.push(icon);
+    console.log(`Icon added: ${icon.config.name}`);
+  }
+  getDimensions() {
+    if (!this.el) {
+      throw new Error("Desktop not initialized. Call init() first.");
+    }
+    return {
+      width: this.el.offsetWidth,
+      height: this.el.offsetHeight - taskbarManager.getDimensions().height
+      // destop is root element minus taskbar height
+    };
+  }
+  setupResizeObserver() {
+    if (!this.el) return;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      const dimensions = this.getDimensions();
+      this.resizeCallbacks.forEach((callback) => {
+        try {
+          callback(dimensions);
+        } catch (error) {
+          console.error("Error in desktop resize callback:", error);
+        }
+      });
+    });
+    this.resizeObserver.observe(this.el);
+  }
+  /**
+   * Register a callback for desktop resize events
+   * @param callback Function to call when desktop is resized
+   * @returns Unregister function to remove the callback
+   */
+  onResize(callback) {
+    this.resizeCallbacks.add(callback);
+    return () => {
+      this.resizeCallbacks.delete(callback);
+    };
+  }
+}
+globalThis.__defussDesktopManager = globalThis.__defussDesktopManager || new DesktopManager();
+const desktopManager = globalThis.__defussDesktopManager;
+
 const defaultWindowOptions = {
   title: "Untitled",
   resizable: true,
@@ -44,7 +162,9 @@ class WindowManager {
   windows = [];
   constructor() {
     $$1(() => {
-      desktopManager.onResize(debounce(this.onDesktopResized.bind(this), 50));
+      if (desktopManager?.onResize) {
+        desktopManager.onResize(debounce(this.onDesktopResized.bind(this), 50));
+      }
     });
   }
   onDesktopResized(dimensions) {
@@ -288,6 +408,11 @@ function Window({
   }
 }) {
   let isDragging = false;
+  let dragPointerId = null;
+  let dragStartMouse = { x: 0, y: 0 };
+  let dragStartWin = { x: 0, y: 0 };
+  let lastWin = { x, y };
+  let capturedTitleBar = null;
   const initialWindowState = windowManager.addWindow({
     id,
     title,
@@ -299,7 +424,7 @@ function Window({
     minimizable,
     maximizable
   });
-  let dragStart = { x: initialWindowState.x, y: initialWindowState.y };
+  lastWin = { x: initialWindowState.x, y: initialWindowState.y };
   ref.state = {
     onClose: () => {
       console.log("Window closed");
@@ -313,15 +438,9 @@ function Window({
       console.log("Window maximized");
       onMaximize();
     },
-    minimize: () => {
-      windowManager.minimizeWindow(initialWindowState.id);
-    },
-    maximize: () => {
-      windowManager.maximizeWindow(initialWindowState.id);
-    },
-    restore: () => {
-      windowManager.restoreWindow(initialWindowState.id);
-    },
+    minimize: () => windowManager.minimizeWindow(initialWindowState.id),
+    maximize: () => windowManager.maximizeWindow(initialWindowState.id),
+    restore: () => windowManager.restoreWindow(initialWindowState.id),
     close: () => {
       console.log("Closing window");
       windowManager.closeWindow(initialWindowState.id);
@@ -332,45 +451,67 @@ function Window({
       windowManager.updateWindow(initialWindowState.id, newState);
     },
     250
-    // 1/4 second throttle
   );
-  const onMouseMove = async (event) => {
+  const onWindowMouseDown = (_event) => windowManager.setActiveWindow(initialWindowState.id);
+  const getCurrentWinPos = () => {
+    const el = ref.current;
+    if (!el) return { x: lastWin.x, y: lastWin.y };
+    const left = Number.parseFloat(el.style.left);
+    const top = Number.parseFloat(el.style.top);
+    return {
+      x: Number.isFinite(left) ? left : el.offsetLeft,
+      y: Number.isFinite(top) ? top : el.offsetTop
+    };
+  };
+  const stopDragging = (event) => {
     if (!isDragging) return;
-    const mouseEvent = event;
-    const win = await $$1(ref);
-    const deltaX = mouseEvent.clientX - dragStart.x;
-    const deltaY = mouseEvent.clientY - dragStart.y;
-    const currentOffset = await win.offset();
-    if (currentOffset) {
-      const newX = currentOffset.left + deltaX;
-      const newY = currentOffset.top + deltaY;
-      updateWindowState({ x: newX, y: newY });
-      await win.css({
-        left: `${newX}px`,
-        top: `${newY}px`
-      });
+    if (event && capturedTitleBar && typeof capturedTitleBar.releasePointerCapture === "function" && dragPointerId === event.pointerId) {
+      try {
+        capturedTitleBar.releasePointerCapture(event.pointerId);
+      } catch {
+      }
     }
-    dragStart = { x: mouseEvent.clientX, y: mouseEvent.clientY };
+    isDragging = false;
+    dragPointerId = null;
+    capturedTitleBar = null;
+    windowManager.updateWindow(initialWindowState.id, { x: lastWin.x, y: lastWin.y });
   };
-  const onWindowMouseDown = (event) => windowManager.setActiveWindow(initialWindowState.id);
-  const onMouseDown = (event) => {
-    if (event.target.tagName === "BUTTON") {
-      isDragging = false;
-      return;
-    }
+  const onTitlePointerDown = (event) => {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const target = event.target;
+    if (target?.tagName === "BUTTON") return;
+    const titleBarEl = target?.closest?.(".title-bar");
+    if (!titleBarEl) return;
+    windowManager.setActiveWindow(initialWindowState.id);
     isDragging = true;
-    dragStart = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    $$1(document).on("mousemove", onMouseMove);
-    $$1(document).on("mouseup", onMouseUp);
+    dragPointerId = event.pointerId;
+    capturedTitleBar = titleBarEl;
+    dragStartMouse = { x: event.clientX, y: event.clientY };
+    dragStartWin = getCurrentWinPos();
+    if (typeof titleBarEl.setPointerCapture === "function") {
+      titleBarEl.setPointerCapture(event.pointerId);
+    }
     event.preventDefault();
   };
-  const onMouseUp = () => {
-    isDragging = false;
-    $$1(document).off("mousemove", onMouseMove);
-    $$1(document).off("mouseup", onMouseUp);
+  const onTitlePointerMove = (event) => {
+    if (!isDragging) return;
+    if (dragPointerId !== null && event.pointerId !== dragPointerId) return;
+    const newX = dragStartWin.x + (event.clientX - dragStartMouse.x);
+    const newY = dragStartWin.y + (event.clientY - dragStartMouse.y);
+    lastWin = { x: newX, y: newY };
+    const el = ref.current;
+    if (el) {
+      el.style.left = `${newX}px`;
+      el.style.top = `${newY}px`;
+    }
+    updateWindowState({ x: newX, y: newY });
+    event.preventDefault();
+  };
+  const onTitlePointerUp = (event) => {
+    stopDragging(event);
+  };
+  const onTitlePointerCancel = (event) => {
+    stopDragging(event);
   };
   const onWindowMounted = () => {
     windowManager.updateWindow(initialWindowState.id, {
@@ -378,17 +519,18 @@ function Window({
       ref
     });
     windowManager.setActiveWindow(initialWindowState.id);
+    $$1(document).on("blur", () => stopDragging());
+    $$1(document).on("visibilitychange", () => {
+      if (document.hidden) stopDragging();
+    });
   };
   const onCloseClick = () => windowManager.closeWindow(initialWindowState.id);
-  const onMaximizeClick = async () => {
+  const onMaximizeClick = () => {
     const currentState = windowManager.getWindow(initialWindowState.id);
-    if (currentState?.maximized) {
-      windowManager.restoreWindow(initialWindowState.id);
-    } else {
-      windowManager.maximizeWindow(initialWindowState.id);
-    }
+    if (currentState?.maximized) windowManager.restoreWindow(initialWindowState.id);
+    else windowManager.maximizeWindow(initialWindowState.id);
   };
-  const onMinimizeClick = async () => {
+  const onMinimizeClick = () => {
     windowManager.minimizeWindow(initialWindowState.id);
   };
   return /* @__PURE__ */ jsxs(
@@ -410,36 +552,18 @@ function Window({
           {
             class: "title-bar",
             onMount: onWindowMounted,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
+            onPointerDown: onTitlePointerDown,
+            onPointerMove: onTitlePointerMove,
+            onPointerUp: onTitlePointerUp,
+            onPointerCancel: onTitlePointerCancel,
+            onDblClick: onMaximizeClick,
+            style: { touchAction: "none" },
             children: [
               /* @__PURE__ */ jsx("div", { class: "title-bar-text", children: title }),
               /* @__PURE__ */ jsxs("div", { class: "title-bar-controls", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Minimize",
-                    onClick: onMinimizeClick
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Maximize",
-                    onClick: onMaximizeClick
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Close",
-                    onClick: onCloseClick
-                  }
-                )
+                /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Minimize", onClick: onMinimizeClick }),
+                /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Maximize", onClick: onMaximizeClick }),
+                /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onCloseClick })
               ] })
             ]
           }
@@ -625,93 +749,6 @@ const LogonScreen = ({
   ] });
 };
 
-class DefussDesktopAppIcon {
-  constructor(config) {
-    this.config = config;
-  }
-}
-const defaultDesktopOptions = {
-  icons: [],
-  backgroundColor: "#000"
-};
-class DesktopManager {
-  constructor(options = defaultDesktopOptions) {
-    this.options = options;
-  }
-  el;
-  state;
-  resizeObserver;
-  resizeCallbacks = /* @__PURE__ */ new Set();
-  init(el, options = this.options) {
-    this.options = options;
-    this.el = el;
-    this.state = this.state || {
-      icons: this.options.icons.map((icon) => icon.config)
-    };
-    this.setupResizeObserver();
-    this.render(el);
-  }
-  render(el) {
-    el.style.backgroundColor = this.options.backgroundColor;
-    if (this.options.backgroundImage) {
-      el.style.backgroundImage = `url(${this.options.backgroundImage})`;
-    }
-    if (this.options.backgroundImageSize) {
-      el.style.backgroundSize = this.options.backgroundImageSize || "cover";
-    }
-    if (this.options.backgroundRepeat) {
-      el.style.backgroundRepeat = this.options.backgroundRepeat || "no-repeat";
-    }
-    if (this.options.backgroundPosition) {
-      el.style.backgroundPosition = this.options.backgroundPosition || "center";
-    }
-  }
-  addIcon(icon) {
-    this.options.icons.push(icon);
-    console.log(`Icon added: ${icon.config.name}`);
-  }
-  getDimensions() {
-    if (!this.el) {
-      throw new Error("Desktop not initialized. Call init() first.");
-    }
-    return {
-      width: this.el.offsetWidth,
-      height: this.el.offsetHeight - taskbarManager.getDimensions().height
-      // destop is root element minus taskbar height
-    };
-  }
-  setupResizeObserver() {
-    if (!this.el) return;
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-    this.resizeObserver = new ResizeObserver(() => {
-      const dimensions = this.getDimensions();
-      this.resizeCallbacks.forEach((callback) => {
-        try {
-          callback(dimensions);
-        } catch (error) {
-          console.error("Error in desktop resize callback:", error);
-        }
-      });
-    });
-    this.resizeObserver.observe(this.el);
-  }
-  /**
-   * Register a callback for desktop resize events
-   * @param callback Function to call when desktop is resized
-   * @returns Unregister function to remove the callback
-   */
-  onResize(callback) {
-    this.resizeCallbacks.add(callback);
-    return () => {
-      this.resizeCallbacks.delete(callback);
-    };
-  }
-}
-globalThis.__defussDesktopManager = globalThis.__defussDesktopManager || new DesktopManager();
-const desktopManager = globalThis.__defussDesktopManager;
-
 const StartMenu = () => {
   return /* @__PURE__ */ jsxs("div", { class: "slide-open crt", children: [
     /* @__PURE__ */ jsx("div", { class: "top", children: /* @__PURE__ */ jsx("h1", { children: "Aron Homberg" }) }),
@@ -849,15 +886,12 @@ class DequeryWithWindowManager extends CallChainImpl {
   */
   // register an app to the desktop shell
   createDesktopApp(options) {
-    return createCall(this, "createDesktopApp", async () => {
-      return new DefussApp(options);
-    });
+    new DefussApp(options);
+    return this;
   }
   // create a desktop app icon
   createDesktopAppIcon(options) {
-    return createCall(this, "createDesktopAppIcon", async () => {
-      return new DefussDesktopAppIcon(options);
-    });
+    return this;
   }
 }
 const $ = dequery.extend(DequeryWithWindowManager, [
@@ -866,37 +900,6 @@ const $ = dequery.extend(DequeryWithWindowManager, [
   "createDesktopAppIcon"
 ]);
 
-const defaultTaskbarOptions = {
-  position: "bottom",
-  stateful: false,
-  theme: "default",
-  size: "medium"
-};
-class TaskbarManager {
-  position;
-  theme;
-  // e.g., 'windows-xp', 'macos', etc.
-  size;
-  constructor(options = defaultTaskbarOptions) {
-    this.position = options.position || "bottom";
-    this.theme = options.theme || "default";
-    this.size = options.size || "medium";
-    if (options.stateful) ;
-  }
-  getDimensions() {
-    const el = document.querySelector(".taskbar");
-    if (!el) {
-      return { width: 0, height: 0 };
-    }
-    return {
-      width: el.clientWidth,
-      height: el.clientHeight
-    };
-  }
-}
-globalThis.__defussTaskbarManager = globalThis.__defussTaskbarManager || new TaskbarManager();
-const taskbarManager = globalThis.__defussTaskbarManager;
-
 const defaultSystemSoundFilePaths = [
   "/sounds/balloon.ogg",
   "/sounds/batterycritical.ogg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "defuss-desktop",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -19,9 +19,9 @@
     "type": "git"
   },
   "scripts": {
-    "clean": "rm -rf ./dist && rm -rf ./node_modules/.pnpm",
-    "pretest": "pnpm run build",
-    "prebuild": "pnpm run clean",
+    "clean": "rm -rf ./dist && rm -rf ./node_modules/.bun",
+    "pretest": "bun run build",
+    "prebuild": "bun run clean",
     "build": "pkgroll",
     "postbuild": "npm run copy-scss",
     "copy-scss": "mkdir -p dist/scss dist/themes && cp index.scss dist/ && cp xp.scss dist/ && cp -r scss/* dist/scss/ && cp -r themes/* dist/themes/",
@@ -53,8 +53,8 @@
     "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
   },
   "dependencies": {
-    "defuss": "^2.1.10",
-    "defuss-runtime": "^1.2.1",
+    "defuss": "^3.4.0",
+    "defuss-runtime": "^1.3.1",
     "defuss-transval": "^1.3.0"
   },
   "devDependencies": {
@@ -65,4 +65,4 @@
     "typescript": "^5.9.3",
     "vitest": "^4.0.17"
   }
-}
+}