defuss-desktop 0.0.3 → 0.0.6

package/dist/index.mjs

@@ -1,26 +1,263 @@
-import { createRef, $ as $$1, dequery, CallChainImpl, createCall } from 'defuss';
+import { $ as $$1, createRef, dequery, CallChainImpl } from 'defuss';
 import { debounce, throttle } from 'defuss-runtime';
-import { jsx, jsxs } from 'defuss/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'defuss/jsx-runtime';
 import { access, transval, rule } from 'defuss-transval';
 
-function Button({
-  onClick = () => {
-  },
-  disabled = false,
-  children,
-  ref = createRef()
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      onClick: disabled ? void 0 : onClick,
-      disabled,
-      children
+class DesktopShellManager {
+  constructor(apps = []) {
+    this.apps = apps;
+  }
+  addApp(app) {
+    this.apps.push(app);
+    console.log(`App added: ${app.config.name}`);
+  }
+  async registerAppBundle(bundle) {
+    const { DefussApp } = await Promise.resolve().then(function () { return app; });
+    return DefussApp.fromBundle(bundle);
+  }
+  /** Find a registered app by executable name (e.g. "notepad.exe") */
+  findApp(executable) {
+    return this.apps.find((app) => app.bundle?.executable === executable);
+  }
+  /** Run an app by executable name */
+  runApp(executable) {
+    const app = this.findApp(executable);
+    if (!app) {
+      console.error(`App not found: ${executable}`);
+      return;
     }
-  );
+    app.run();
+  }
+  /** Launch a bundled app by creating a window and passing the container */
+  launchApp(app) {
+    if (!app.bundle) return;
+    const event = new CustomEvent("defuss:launch-app", { detail: { app } });
+    document.dispatchEvent(event);
+  }
+}
+globalThis.__defussDesktopShellManager = globalThis.__defussDesktopShellManager || new DesktopShellManager();
+const desktopShell = globalThis.__defussDesktopShellManager;
+
+class SelectionModel {
+  constructor(options) {
+    this.options = options;
+  }
+  selectionDiv = null;
+  startX = 0;
+  startY = 0;
+  debounceTimer = null;
+  isSelecting = false;
+  debounceDelay = 1;
+  init() {
+    this.options.desktopElement.addEventListener("mousedown", this.onMouseDown);
+  }
+  destroy() {
+    this.options.desktopElement.removeEventListener("mousedown", this.onMouseDown);
+    this.removeSelectionDiv();
+    this.clearDebounce();
+    document.removeEventListener("mousemove", this.onMouseMove);
+    document.removeEventListener("mouseup", this.onMouseUp);
+    document.documentElement.removeEventListener("mouseleave", this.onMouseLeave);
+  }
+  onMouseDown = (e) => {
+    if (e.target.closest(".desktop-icon")) return;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.isSelecting = true;
+    this.createSelectionDiv();
+    document.addEventListener("mousemove", this.onMouseMove);
+    document.addEventListener("mouseup", this.onMouseUp);
+    document.documentElement.addEventListener("mouseleave", this.onMouseLeave);
+  };
+  onMouseMove = (e) => {
+    if (!this.isSelecting) return;
+    this.clearDebounce();
+    this.debounceTimer = window.setTimeout(() => {
+      this.updateSelectionDiv(e.clientX, e.clientY);
+      this.selectIcons();
+    }, this.debounceDelay);
+  };
+  onMouseUp = () => {
+    this.endSelection();
+  };
+  onMouseLeave = () => {
+    this.endSelection();
+  };
+  endSelection = () => {
+    if (!this.isSelecting) return;
+    this.isSelecting = false;
+    this.clearDebounce();
+    this.selectIcons();
+    this.removeSelectionDiv();
+    document.removeEventListener("mousemove", this.onMouseMove);
+    document.removeEventListener("mouseup", this.onMouseUp);
+    document.documentElement.removeEventListener("mouseleave", this.onMouseLeave);
+  };
+  createSelectionDiv() {
+    this.selectionDiv = document.createElement("div");
+    this.selectionDiv.className = "selection-model";
+    this.selectionDiv.style.left = `${this.startX}px`;
+    this.selectionDiv.style.top = `${this.startY}px`;
+    this.selectionDiv.style.width = "0px";
+    this.selectionDiv.style.height = "0px";
+    document.body.appendChild(this.selectionDiv);
+  }
+  updateSelectionDiv(endX, endY) {
+    if (!this.selectionDiv) return;
+    const left = Math.min(this.startX, endX);
+    const top = Math.min(this.startY, endY);
+    const width = Math.abs(endX - this.startX);
+    const height = Math.abs(endY - this.startY);
+    this.selectionDiv.style.left = `${left}px`;
+    this.selectionDiv.style.top = `${top}px`;
+    this.selectionDiv.style.width = `${width}px`;
+    this.selectionDiv.style.height = `${height}px`;
+  }
+  selectIcons() {
+    const icons = this.options.iconsContainer.querySelectorAll(".desktop-icon");
+    if (!this.selectionDiv) return;
+    const selRect = this.selectionDiv.getBoundingClientRect();
+    icons.forEach((icon) => {
+      const iconRect = icon.getBoundingClientRect();
+      const intersects = !(iconRect.right < selRect.left || iconRect.left > selRect.right || iconRect.bottom < selRect.top || iconRect.top > selRect.bottom);
+      if (intersects) {
+        icon.classList.add("icon-selected");
+      } else {
+        icon.classList.remove("icon-selected");
+      }
+    });
+  }
+  removeSelectionDiv() {
+    if (this.selectionDiv) {
+      this.selectionDiv.remove();
+      this.selectionDiv = null;
+    }
+  }
+  clearDebounce() {
+    if (this.debounceTimer !== null) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
+}
+
+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",
@@ -42,6 +279,18 @@ const defaultWindowOptions = {
 };
 class WindowManager {
   windows = [];
+  listeners = /* @__PURE__ */ new Set();
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  emitChanged() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
   constructor() {
     $$1(() => {
       if (desktopManager?.onResize) {
@@ -88,6 +337,7 @@ class WindowManager {
       });
       this.windows.push(window);
       this.renderWindowsActivationState();
+      this.emitChanged();
     }
   }
   renderWindowsActivationState() {
@@ -137,6 +387,7 @@ class WindowManager {
       state.y = activeWindow.y + 20;
     }
     this.windows.push(state);
+    this.emitChanged();
     return state;
   }
   updateWindow(id, options) {
@@ -160,6 +411,7 @@ class WindowManager {
         ...updatedWindow
       } : win2
     );
+    this.emitChanged();
     return updatedWindow;
   }
   closeWindow(id) {
@@ -168,6 +420,7 @@ class WindowManager {
     $$1(win.el).remove();
     this.windows = this.windows.filter((win2) => win2.id !== id);
     this.renderWindowsActivationState();
+    this.emitChanged();
     win.ref.state?.onClose?.();
   }
   maximizeWindow(id) {
@@ -209,6 +462,7 @@ class WindowManager {
       top: isMaximized ? "-3px" : `${win.y}px`
     });
     this.toggleTitleBarMaximizedButtonState(id);
+    this.emitChanged();
     if (isMaximized) {
       win.ref.state?.onMaximize?.();
     }
@@ -216,31 +470,33 @@ class WindowManager {
   minimizeWindow(id) {
     let win = this.getWindow(id);
     if (!win) return;
-    win = this.updateWindow(id, { prevX: win.x, prevY: win.y });
-    const isMinimized = !win.minimized;
+    if (win.minimized) {
+      this.restoreWindow(id);
+      return;
+    }
+    const actualWidth = win.el.offsetWidth || win.width;
+    const actualHeight = win.el.offsetHeight || win.height;
     win = this.updateWindow(id, {
-      minimized: isMinimized,
-      width: isMinimized ? 0 : win.width,
-      height: isMinimized ? 0 : win.height,
-      x: isMinimized ? -1e4 : win.x,
-      // Move off-screen when minimized
-      y: isMinimized ? -1e4 : win.y
+      prevX: win.x,
+      prevY: win.y,
+      prevWidth: actualWidth,
+      prevHeight: actualHeight,
+      minimized: true
     });
     const $win = $$1(win.el);
     $win.css({
-      width: isMinimized ? "0px" : `${win.width}px`,
-      height: isMinimized ? "0px" : `${win.height}px`,
-      left: isMinimized ? "-10000px" : `${win.x}px`,
-      top: isMinimized ? "-10000px" : `${win.y}px`
+      left: "-10000px",
+      top: "-10000px"
     });
-    if (isMinimized) {
-      win.ref.state?.onMinimize?.();
-    }
+    this.renderWindowsActivationState();
+    this.emitChanged();
+    win.ref.state?.onMinimize?.();
   }
   restoreWindow(id) {
     let win = this.getWindow(id);
     if (!win) return;
     win = this.updateWindow(id, {
+      minimized: false,
       maximized: false,
       width: win.prevWidth || 800,
       // Use stored previous width
@@ -257,6 +513,8 @@ class WindowManager {
       top: `${win.y}px`
     });
     this.toggleTitleBarMaximizedButtonState(id);
+    this.setActiveWindow(id);
+    this.emitChanged();
   }
   toggleTitleBarMaximizedButtonState(id) {
     const win = this.getWindow(id);
@@ -289,12 +547,20 @@ function Window({
   onMaximize = () => {
   }
 }) {
+  const MIN_WINDOW_WIDTH = 240;
+  const MIN_WINDOW_HEIGHT = 160;
   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;
+  let isResizing = false;
+  let resizePointerId = null;
+  let resizeDirection = null;
+  let capturedResizeHandle = null;
+  let resizeStartMouse = { x: 0, y: 0 };
+  let resizeStartWin = { x, y, width, height };
   const initialWindowState = windowManager.addWindow({
     id,
     title,
@@ -358,7 +624,33 @@ function Window({
     capturedTitleBar = null;
     windowManager.updateWindow(initialWindowState.id, { x: lastWin.x, y: lastWin.y });
   };
+  const stopResizing = (event) => {
+    if (!isResizing) return;
+    if (event && capturedResizeHandle && typeof capturedResizeHandle.releasePointerCapture === "function" && resizePointerId === event.pointerId) {
+      try {
+        capturedResizeHandle.releasePointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    isResizing = false;
+    resizePointerId = null;
+    resizeDirection = null;
+    capturedResizeHandle = null;
+    const el = ref.current;
+    if (!el) return;
+    const left = Number.parseFloat(el.style.left);
+    const top = Number.parseFloat(el.style.top);
+    const width2 = Number.parseFloat(el.style.width);
+    const height2 = Number.parseFloat(el.style.height);
+    windowManager.updateWindow(initialWindowState.id, {
+      x: Number.isFinite(left) ? left : lastWin.x,
+      y: Number.isFinite(top) ? top : lastWin.y,
+      width: Number.isFinite(width2) ? width2 : el.offsetWidth,
+      height: Number.isFinite(height2) ? height2 : el.offsetHeight
+    });
+  };
   const onTitlePointerDown = (event) => {
+    if (isResizing) return;
     if (event.pointerType === "mouse" && event.button !== 0) return;
     const target = event.target;
     if (target?.tagName === "BUTTON") return;
@@ -375,6 +667,85 @@ function Window({
     }
     event.preventDefault();
   };
+  const onResizePointerDown = (event) => {
+    if (!resizable) return;
+    if (isDragging) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const currentState = windowManager.getWindow(initialWindowState.id);
+    if (currentState?.maximized) return;
+    const target = event.target;
+    const handle = target?.closest?.(".window-resize-handle");
+    const direction = handle?.getAttribute("data-dir");
+    if (!handle || !direction) return;
+    const currentPos = getCurrentWinPos();
+    const el = ref.current;
+    if (!el) return;
+    isResizing = true;
+    resizePointerId = event.pointerId;
+    resizeDirection = direction;
+    capturedResizeHandle = handle;
+    resizeStartMouse = { x: event.clientX, y: event.clientY };
+    resizeStartWin = {
+      x: currentPos.x,
+      y: currentPos.y,
+      width: el.offsetWidth,
+      height: el.offsetHeight
+    };
+    if (typeof handle.setPointerCapture === "function") {
+      handle.setPointerCapture(event.pointerId);
+    }
+    windowManager.setActiveWindow(initialWindowState.id);
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const onResizePointerMove = (event) => {
+    if (!isResizing) return;
+    if (resizePointerId !== null && event.pointerId !== resizePointerId) return;
+    if (!resizeDirection) return;
+    const el = ref.current;
+    if (!el) return;
+    const deltaX = event.clientX - resizeStartMouse.x;
+    const deltaY = event.clientY - resizeStartMouse.y;
+    let newX = resizeStartWin.x;
+    let newY = resizeStartWin.y;
+    let newWidth = resizeStartWin.width;
+    let newHeight = resizeStartWin.height;
+    if (resizeDirection.includes("e")) {
+      newWidth = Math.max(MIN_WINDOW_WIDTH, resizeStartWin.width + deltaX);
+    }
+    if (resizeDirection.includes("s")) {
+      newHeight = Math.max(MIN_WINDOW_HEIGHT, resizeStartWin.height + deltaY);
+    }
+    if (resizeDirection.includes("w")) {
+      const tentativeWidth = resizeStartWin.width - deltaX;
+      newWidth = Math.max(MIN_WINDOW_WIDTH, tentativeWidth);
+      newX = resizeStartWin.x + (resizeStartWin.width - newWidth);
+    }
+    if (resizeDirection.includes("n")) {
+      const tentativeHeight = resizeStartWin.height - deltaY;
+      newHeight = Math.max(MIN_WINDOW_HEIGHT, tentativeHeight);
+      newY = resizeStartWin.y + (resizeStartWin.height - newHeight);
+    }
+    lastWin = { x: newX, y: newY };
+    el.style.left = `${newX}px`;
+    el.style.top = `${newY}px`;
+    el.style.width = `${newWidth}px`;
+    el.style.height = `${newHeight}px`;
+    updateWindowState({
+      x: newX,
+      y: newY,
+      width: newWidth,
+      height: newHeight
+    });
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const onResizePointerUp = (event) => {
+    stopResizing(event);
+  };
+  const onResizePointerCancel = (event) => {
+    stopResizing(event);
+  };
   const onTitlePointerMove = (event) => {
     if (!isDragging) return;
     if (dragPointerId !== null && event.pointerId !== dragPointerId) return;
@@ -403,7 +774,10 @@ function Window({
     windowManager.setActiveWindow(initialWindowState.id);
     $$1(document).on("blur", () => stopDragging());
     $$1(document).on("visibilitychange", () => {
-      if (document.hidden) stopDragging();
+      if (document.hidden) {
+        stopDragging();
+        stopResizing();
+      }
     });
   };
   const onCloseClick = () => windowManager.closeWindow(initialWindowState.id);
@@ -420,6 +794,7 @@ function Window({
     {
       class: "window crt",
       ref,
+      "data-resizable": String(resizable),
       onMouseDown: onWindowMouseDown,
       style: {
         width,
@@ -450,68 +825,230 @@ function Window({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { class: "window-body", children })
+        /* @__PURE__ */ jsx("div", { class: "window-body", children }),
+        resizable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--n",
+              "data-dir": "n",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--e",
+              "data-dir": "e",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--s",
+              "data-dir": "s",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--w",
+              "data-dir": "w",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--ne",
+              "data-dir": "ne",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--se",
+              "data-dir": "se",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--sw",
+              "data-dir": "sw",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "window-resize-handle window-resize-handle--nw",
+              "data-dir": "nw",
+              onPointerDown: onResizePointerDown,
+              onPointerMove: onResizePointerMove,
+              onPointerUp: onResizePointerUp,
+              onPointerCancel: onResizePointerCancel
+            }
+          )
+        ] })
       ]
     }
   );
 }
 
+function DesktopIcon({ app }) {
+  const bundle = app.bundle;
+  const iconSrc = bundle?.icon ?? app.config.icon;
+  const label = bundle?.displayName ?? app.config.name;
+  const onClick = (e) => {
+    if (e.detail > 1) return;
+    const allIcons = document.querySelectorAll(".desktop-icon");
+    allIcons.forEach((icon) => icon.classList.remove("icon-selected"));
+    const target = e.target.closest(".desktop-icon");
+    if (target) {
+      target.classList.add("icon-selected");
+    }
+  };
+  const onDblClick = () => {
+    app.run();
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "desktop-icon", onClick, onDblClick, children: [
+    /* @__PURE__ */ jsx("div", { class: "desktop-icon__image", style: { "--icon-src": `url(${iconSrc})` }, children: /* @__PURE__ */ jsx("img", { src: iconSrc, alt: label, draggable: false }) }),
+    /* @__PURE__ */ jsx("span", { class: "desktop-icon__label", children: label })
+  ] }, bundle?.executable ?? label);
+}
+
 function Desktop({ ref }) {
-  $$1(() => {
-    console.log("Desktop mounted");
-  });
-  const onOpenWindow = async () => {
+  const appIconsRef = createRef();
+  const onLaunchApp = (event) => {
+    const customEvent = event;
+    const app = customEvent.detail?.app;
+    if (!app?.bundle) return;
+    void runBundledApp(app);
+  };
+  const resolveAppMain = async (app) => {
+    const bundle = app.bundle;
+    if (!bundle) return void 0;
+    if (bundle.main) {
+      return bundle.main;
+    }
+    if (bundle.load) {
+      const loaded = await bundle.load();
+      return loaded.main;
+    }
+    return void 0;
+  };
+  const runBundledApp = async (app) => {
+    const bundle = app.bundle;
+    if (!bundle) return;
+    const main = await resolveAppMain(app);
+    if (!main) {
+      console.error(`No app main() available for ${bundle.executable}`);
+      return;
+    }
+    const appRootRef = createRef();
     const winRef = createRef();
     await $$1(ref).append(
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         Window,
         {
-          width: 300,
-          height: 200,
-          title: "Test Window",
+          width: bundle.width ?? 720,
+          height: bundle.height ?? 480,
+          title: bundle.displayName,
+          id: bundle.executable,
           ref: winRef,
           onClose: () => {
-            console.log("I WAS CLOSED!");
-          },
-          onMaximize: () => {
-            console.log("I WAS MAXIMIZED!");
+            console.log(`${bundle.executable} was closed`);
           },
-          onMinimize: () => {
-            console.log("I WAS MINIMIZED!");
-          },
-          children: [
-            /* @__PURE__ */ jsx("p", { children: "Hello, world!" }),
-            /* @__PURE__ */ jsxs("section", { class: "field-row", style: "justify-content: space-between;", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    console.log("Cancel clicked");
-                    winRef.state?.close();
-                  },
-                  children: "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx(Button, { onClick: onOpenWindow, children: "Open Window" }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    console.log("OK clicked");
-                    winRef.state?.close();
-                  },
-                  children: "OK"
-                }
-              )
-            ] })
-          ]
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "defuss-app-root",
+              ref: appRootRef,
+              onMount: () => {
+                void main({ app, container: appRootRef.current });
+              }
+            }
+          )
         }
       )
     );
   };
-  return /* @__PURE__ */ jsx("div", { class: "defuss-desktop-panel crt", ref, children: /* @__PURE__ */ jsx(Button, { onClick: onOpenWindow, children: "Open Window" }) });
+  const renderDesktopIcons = async () => {
+    const appIcons = desktopShell.apps.filter((app) => app.bundle);
+    await $$1(appIconsRef).update(
+      /* @__PURE__ */ jsx(Fragment, { children: appIcons.map((app) => /* @__PURE__ */ jsx(DesktopIcon, { app }, app.bundle.executable)) })
+    );
+  };
+  let selectionModel = null;
+  const onMountDesktop = () => {
+    void renderDesktopIcons();
+    document.addEventListener("defuss:launch-app", onLaunchApp);
+    selectionModel = new SelectionModel({
+      desktopElement: ref.current,
+      iconsContainer: appIconsRef.current
+    });
+    selectionModel.init();
+  };
+  const onUnmountDesktop = () => {
+    document.removeEventListener("defuss:launch-app", onLaunchApp);
+    selectionModel?.destroy();
+    selectionModel = null;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "defuss-desktop-panel crt",
+      ref,
+      onMount: onMountDesktop,
+      onUnmount: onUnmountDesktop,
+      children: /* @__PURE__ */ jsx("div", { class: "desktop-icons-grid", ref: appIconsRef })
+    }
+  );
+}
+
+function Button({
+  onClick = () => {
+  },
+  disabled = false,
+  children,
+  ref = createRef()
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      children
+    }
+  );
 }
 
 const LogonScreen = ({
@@ -631,146 +1168,67 @@ 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 = () => {
+  const bundledApps = desktopShell.apps.filter((app) => app.bundle);
   return /* @__PURE__ */ jsxs("div", { class: "slide-open crt", children: [
     /* @__PURE__ */ jsx("div", { class: "top", children: /* @__PURE__ */ jsx("h1", { children: "Aron Homberg" }) }),
     /* @__PURE__ */ jsxs("div", { class: "menu", children: [
-      /* @__PURE__ */ jsx("div", { class: "programs", children: /* @__PURE__ */ jsxs("ul", { children: [
-        /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { class: "program-image", href: "#", children: /* @__PURE__ */ jsx("img", { src: "/icons/ie.png", alt: "" }) }),
-          /* @__PURE__ */ jsx("a", { href: "#", children: "Internet Explorer" })
-        ] }),
-        /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { class: "program-image", href: "#", children: /* @__PURE__ */ jsx("img", { src: "/icons/paint.png", alt: "" }) }),
-          /* @__PURE__ */ jsx("a", { href: "#", children: "Paint" })
-        ] }),
-        /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { class: "program-image", href: "#", children: /* @__PURE__ */ jsx("img", { src: "/icons/media-player.png", alt: "" }) }),
-          /* @__PURE__ */ jsx("a", { href: "#", children: "Windows Media Player" })
-        ] }),
-        /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { class: "program-image", href: "#", children: /* @__PURE__ */ jsx("img", { src: "/icons/outlook-express.jpg", alt: "" }) }),
-          /* @__PURE__ */ jsx("a", { href: "#", children: "E-mail" })
-        ] })
-      ] }) }),
+      /* @__PURE__ */ jsx("div", { class: "programs", children: /* @__PURE__ */ jsx("ul", { children: bundledApps.map((app) => /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            class: "program-image",
+            href: "#",
+            onClick: (event) => {
+              event.preventDefault();
+              desktopShell.runApp(app.bundle.executable);
+            },
+            children: /* @__PURE__ */ jsx("img", { src: app.bundle.icon, alt: "" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "#",
+            onClick: (event) => {
+              event.preventDefault();
+              desktopShell.runApp(app.bundle.executable);
+            },
+            children: app.bundle.displayName
+          }
+        )
+      ] }, app.bundle.executable)) }) }),
       /* @__PURE__ */ jsx("div", { class: "system", children: /* @__PURE__ */ jsxs("ul", { children: [
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/documents.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/documents.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "My Documents" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/pictures.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/pictures.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "My Pictures" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/music.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/music.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "My Music" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/computer.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/computer.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "My Computer" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/control-panel.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/control-panel.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "Control Panel" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/support-help.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/support-help.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "Help and Support" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/search.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/search.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "Search" })
         ] }),
         /* @__PURE__ */ jsxs("li", { tabindex: "-1", children: [
-          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/icons/run.png", alt: "" }) }),
+          /* @__PURE__ */ jsx("a", { href: "#", class: "program-image", children: /* @__PURE__ */ jsx("img", { src: "/desktop/run.png", alt: "" }) }),
           /* @__PURE__ */ jsx("a", { href: "#", children: "Run..." })
         ] })
       ] }) })
@@ -795,11 +1253,63 @@ const StartButton = () => {
 };
 
 const Taskbar = () => {
-  return /* @__PURE__ */ jsxs("div", { class: "bar crt", children: [
+  const taskbarListRef = createRef();
+  const clockRef = createRef();
+  const renderTasks = async () => {
+    const windows = [...windowManager.windows];
+    const activeWindow = windowManager.getActiveWindow();
+    await $$1(taskbarListRef).update(
+      /* @__PURE__ */ jsx(Fragment, { children: windows.map((win) => /* @__PURE__ */ jsx("li", { class: activeWindow?.id === win.id && !win.minimized ? "active" : "", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          class: "taskbar__task-btn",
+          onClick: () => {
+            const current = windowManager.getWindow(win.id);
+            if (!current) return;
+            if (current.minimized) {
+              windowManager.restoreWindow(current.id);
+              return;
+            }
+            const active = windowManager.getActiveWindow();
+            if (active?.id === current.id) {
+              windowManager.minimizeWindow(current.id);
+              return;
+            }
+            windowManager.setActiveWindow(current.id);
+          },
+          children: /* @__PURE__ */ jsxs("div", { class: "cell", children: [
+            win.icon ? /* @__PURE__ */ jsx("img", { src: win.icon, alt: "" }) : null,
+            /* @__PURE__ */ jsx("span", { class: "cell-name", children: win.title })
+          ] })
+        }
+      ) }, win.id)) })
+    );
+  };
+  const renderClock = () => {
+    const now = /* @__PURE__ */ new Date();
+    const value = now.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+    $$1(clockRef).text(value);
+  };
+  const onMount = () => {
+    void renderTasks();
+    renderClock();
+    const unsubscribe = windowManager.subscribe(() => {
+      void renderTasks();
+    });
+    const interval = setInterval(renderClock, 3e4);
+    clockRef.state = { unsubscribe, interval };
+  };
+  const onUnmount = () => {
+    const state = clockRef.state;
+    state?.unsubscribe?.();
+    if (state?.interval) clearInterval(state.interval);
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "bar crt", onMount, onUnmount, children: [
     /* @__PURE__ */ jsx(StartButton, {}),
-    /* @__PURE__ */ jsx("ul", { class: "taskbar" }),
+    /* @__PURE__ */ jsx("ul", { class: "taskbar", ref: taskbarListRef }),
     /* @__PURE__ */ jsx("div", { class: "tray-toggle", children: /* @__PURE__ */ jsx("div", { class: "arrow" }) }),
-    /* @__PURE__ */ jsx("div", { class: "taskbar__clock", children: /* @__PURE__ */ jsx("span", { children: "7:02 AM" }) })
+    /* @__PURE__ */ jsx("div", { class: "taskbar__clock", children: /* @__PURE__ */ jsx("span", { ref: clockRef, children: "--:--" }) })
   ] });
 };
 
@@ -821,29 +1331,37 @@ function Shell({
   ] });
 }
 
-class DesktopShellManager {
-  constructor(apps = []) {
-    this.apps = apps;
-  }
-  addApp(app) {
-    this.apps.push(app);
-    console.log(`App added: ${app.config.name}`);
-  }
-}
-globalThis.__defussDesktopShellManager = globalThis.__defussDesktopShellManager || new DesktopShellManager();
-const desktopShell = globalThis.__defussDesktopShellManager;
-
 class DefussApp {
   constructor(config) {
     this.config = config;
     desktopShell.addApp(this);
   }
+  bundle;
+  static fromBundle(bundle) {
+    const app = new DefussApp({
+      name: bundle.displayName,
+      icon: bundle.icon,
+      main: () => {
+      }
+    });
+    app.bundle = bundle;
+    return app;
+  }
   run() {
     console.log(`Running app: ${this.config.name}`);
-    this.config.main(this, ...this.config.argv || []);
+    if (this.bundle) {
+      desktopShell.launchApp(this);
+    } else {
+      this.config.main(this, ...this.config.argv || []);
+    }
   }
 }
 
+var app = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DefussApp: DefussApp
+});
+
 class DequeryWithWindowManager extends CallChainImpl {
   /*
   // create a window from any element (not necessarily identifier as an App)
@@ -855,15 +1373,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, [
@@ -872,37 +1387,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",
@@ -1031,4 +1515,22 @@ class SoundManager {
 globalThis.__defussSoundManager = globalThis.__defussSoundManager || new SoundManager();
 const soundManager = globalThis.__defussSoundManager;
 
-export { $, Button, DefussApp, DefussDesktopAppIcon, DequeryWithWindowManager, Desktop, DesktopManager, DesktopShellManager, LogonScreen, Shell, SoundManager, StartButton, StartMenu, Taskbar, TaskbarManager, WindowManager, defaultDesktopOptions, defaultSystemSoundFilePaths, defaultTaskbarOptions, defaultWindowOptions, desktopManager, desktopShell, soundManager, taskbarManager, windowManager };
+const notepadAppBundle = {
+  executable: "notepad.exe",
+  displayName: "Notepad",
+  icon: "/desktop/documents.png",
+  width: 760,
+  height: 520,
+  load: () => import('./notepad-Cwg2fv8c.mjs')
+};
+
+const internetExplorerAppBundle = {
+  executable: "explorer.exe",
+  displayName: "Internet Explorer",
+  icon: "/desktop/internet-explorer.png",
+  width: 980,
+  height: 680,
+  load: () => import('./internet-explorer-CAgm9-7A.mjs')
+};
+
+export { $, Button, DefussApp, DefussDesktopAppIcon, DequeryWithWindowManager, Desktop, DesktopIcon, DesktopManager, DesktopShellManager, LogonScreen, SelectionModel, Shell, SoundManager, StartButton, StartMenu, Taskbar, TaskbarManager, WindowManager, defaultDesktopOptions, defaultSystemSoundFilePaths, defaultTaskbarOptions, defaultWindowOptions, desktopManager, desktopShell, internetExplorerAppBundle, notepadAppBundle, soundManager, taskbarManager, windowManager };