defuss-desktop 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1028 @@
+import { createRef, $ as $$1, dequery, CallChainImpl, createCall } from 'defuss';
+import { debounce, throttle } from 'defuss-runtime';
+import { jsx, jsxs } 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
+    }
+  );
+}
+
+const defaultWindowOptions = {
+  title: "Untitled",
+  resizable: true,
+  minimized: false,
+  maximized: false,
+  minimizable: true,
+  maximizable: true,
+  width: 800,
+  height: 600,
+  x: 0,
+  y: 0,
+  onClose: () => {
+  },
+  onMinimize: () => {
+  },
+  onMaximize: () => {
+  }
+};
+class WindowManager {
+  windows = [];
+  constructor() {
+    $$1(() => {
+      desktopManager.onResize(debounce(this.onDesktopResized.bind(this), 50));
+    });
+  }
+  onDesktopResized(dimensions) {
+    this.windows.forEach((win) => {
+      if (win.maximized) {
+        this.updateWindow(win.id, {
+          width: dimensions.width,
+          height: dimensions.height
+        });
+        const $win = $$1(win.el);
+        $win.css({
+          width: `${dimensions.width + 6}px`,
+          height: `${dimensions.height + 9}px`,
+          left: "-3px",
+          top: "-3px"
+        });
+      }
+    });
+  }
+  getActiveWindow() {
+    for (let i = this.windows.length - 1; i >= 0; i--) {
+      if (!this.windows[i].minimized) {
+        return this.windows[i];
+      }
+    }
+    return void 0;
+  }
+  getWindow(id) {
+    return this.windows.find((win) => win.id === id);
+  }
+  setActiveWindow(id) {
+    const window = this.getWindow(id);
+    if (window) {
+      this.windows = this.windows.filter((win) => {
+        if (win.id !== id) {
+          return true;
+        }
+        return false;
+      });
+      this.windows.push(window);
+      this.renderWindowsActivationState();
+    }
+  }
+  renderWindowsActivationState() {
+    const activeWindow = this.getActiveWindow();
+    if (!activeWindow) return;
+    this.windows.forEach(async (win, index) => {
+      const $win = await $$1(win.el);
+      const $titleBar = await $$1(win.el).find(".title-bar");
+      await $win.css("z-index", index.toString());
+      const hasInactiveClass = async () => await $titleBar.hasClass("inactive");
+      if (!await hasInactiveClass()) {
+        await $win.addClass("inactive");
+        await $titleBar.addClass("inactive");
+      }
+      if (win.id === activeWindow.id) {
+        if (await hasInactiveClass()) {
+          await $win.removeClass("inactive");
+          await $titleBar.removeClass("inactive");
+        }
+      }
+    });
+  }
+  addWindow(options) {
+    const id = options.id || crypto.randomUUID();
+    const state = {
+      id,
+      title: options.title || defaultWindowOptions.title,
+      icon: options.icon || defaultWindowOptions.icon,
+      width: options.width || defaultWindowOptions.width,
+      height: options.height || defaultWindowOptions.height,
+      prevX: options.x || defaultWindowOptions.x,
+      prevY: options.y || defaultWindowOptions.y,
+      prevWidth: options.width || defaultWindowOptions.width,
+      prevHeight: options.height || defaultWindowOptions.height,
+      originalDimensionsStored: false,
+      x: options.x || defaultWindowOptions.x,
+      y: options.y || defaultWindowOptions.y,
+      resizable: options.resizable !== void 0 ? options.resizable : defaultWindowOptions.resizable,
+      minimizable: options.minimizable !== void 0 ? options.minimizable : defaultWindowOptions.minimizable,
+      maximizable: options.maximizable !== void 0 ? options.maximizable : defaultWindowOptions.maximizable,
+      minimized: options.minimized !== void 0 ? options.minimized : defaultWindowOptions.minimized,
+      maximized: options.maximized !== void 0 ? options.maximized : defaultWindowOptions.maximized
+    };
+    const activeWindow = this.getActiveWindow();
+    if (activeWindow) {
+      state.x = activeWindow.x + 20;
+      state.y = activeWindow.y + 20;
+    }
+    this.windows.push(state);
+    return state;
+  }
+  updateWindow(id, options) {
+    const win = this.getWindow(id);
+    if (!win) return void 0;
+    if (win.x) {
+      options.prevX = win.x;
+    }
+    if (win.y) {
+      options.prevY = win.y;
+    }
+    const updatedWindow = {
+      ...win,
+      ...options,
+      id: win.id
+      // ensure ID remains unchanged
+    };
+    this.windows = this.windows.map(
+      (win2) => win2.id === id ? {
+        ...win2,
+        ...updatedWindow
+      } : win2
+    );
+    return updatedWindow;
+  }
+  closeWindow(id) {
+    const win = this.getWindow(id);
+    if (!win) return;
+    $$1(win.el).remove();
+    this.windows = this.windows.filter((win2) => win2.id !== id);
+    this.renderWindowsActivationState();
+    win.ref.state?.onClose?.();
+  }
+  maximizeWindow(id) {
+    let win = this.getWindow(id);
+    if (!win) return;
+    const isMaximized = !win.maximized;
+    if (isMaximized) {
+      if (!win.originalDimensionsStored) {
+        const actualWidth = win.el.offsetWidth || win.width;
+        const actualHeight = win.el.offsetHeight || win.height;
+        win = this.updateWindow(id, {
+          prevX: win.x,
+          prevY: win.y,
+          prevWidth: actualWidth,
+          prevHeight: actualHeight,
+          originalDimensionsStored: true
+        });
+      } else {
+        win = this.updateWindow(id, {
+          prevX: win.x,
+          prevY: win.y
+        });
+      }
+    }
+    const desktopDimensions = desktopManager.getDimensions();
+    const freshWin = this.getWindow(id);
+    win = this.updateWindow(id, {
+      maximized: isMaximized,
+      width: isMaximized ? desktopDimensions.width : freshWin.prevWidth,
+      height: isMaximized ? desktopDimensions.height : freshWin.prevHeight,
+      x: isMaximized ? 0 : freshWin.prevX,
+      y: isMaximized ? 0 : freshWin.prevY
+    });
+    const $win = $$1(win.el);
+    $win.css({
+      width: isMaximized ? `${desktopDimensions.width + 6}px` : `${win.width}px`,
+      height: isMaximized ? `${desktopDimensions.height + 9}px` : `${win.height}px`,
+      left: isMaximized ? "-3px" : `${win.x}px`,
+      top: isMaximized ? "-3px" : `${win.y}px`
+    });
+    this.toggleTitleBarMaximizedButtonState(id);
+    if (isMaximized) {
+      win.ref.state?.onMaximize?.();
+    }
+  }
+  minimizeWindow(id) {
+    let win = this.getWindow(id);
+    if (!win) return;
+    win = this.updateWindow(id, { prevX: win.x, prevY: win.y });
+    const isMinimized = !win.minimized;
+    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
+    });
+    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`
+    });
+    if (isMinimized) {
+      win.ref.state?.onMinimize?.();
+    }
+  }
+  restoreWindow(id) {
+    let win = this.getWindow(id);
+    if (!win) return;
+    win = this.updateWindow(id, {
+      maximized: false,
+      width: win.prevWidth || 800,
+      // Use stored previous width
+      height: win.prevHeight || 600,
+      // Use stored previous height
+      x: win.prevX || 0,
+      y: win.prevY || 0
+    });
+    const $win = $$1(win.el);
+    $win.css({
+      width: `${win.width}px`,
+      height: `${win.height}px`,
+      left: `${win.x}px`,
+      top: `${win.y}px`
+    });
+    this.toggleTitleBarMaximizedButtonState(id);
+  }
+  toggleTitleBarMaximizedButtonState(id) {
+    const win = this.getWindow(id);
+    if (!win) return;
+    const isMaximized = !win.maximized;
+    $$1(win.el).query(
+      isMaximized ? "button[aria-label='Restore']" : "button[aria-label='Maximize']"
+    ).attr("aria-label", isMaximized ? "Maximize" : "Restore");
+  }
+}
+globalThis.__defussWindowManager = globalThis.__defussWindowManager || new WindowManager();
+const windowManager = globalThis.__defussWindowManager;
+
+function Window({
+  title = "Untitled",
+  height = 300,
+  width = 200,
+  x = 50,
+  y = 100,
+  children,
+  ref = createRef(),
+  resizable = true,
+  minimizable = true,
+  maximizable = true,
+  id = void 0,
+  onClose = () => {
+  },
+  onMinimize = () => {
+  },
+  onMaximize = () => {
+  }
+}) {
+  let isDragging = false;
+  const initialWindowState = windowManager.addWindow({
+    id,
+    title,
+    width,
+    height,
+    x,
+    y,
+    resizable,
+    minimizable,
+    maximizable
+  });
+  let dragStart = { x: initialWindowState.x, y: initialWindowState.y };
+  ref.state = {
+    onClose: () => {
+      console.log("Window closed");
+      onClose();
+    },
+    onMinimize: () => {
+      console.log("Window minimized");
+      onMinimize();
+    },
+    onMaximize: () => {
+      console.log("Window maximized");
+      onMaximize();
+    },
+    minimize: () => {
+      windowManager.minimizeWindow(initialWindowState.id);
+    },
+    maximize: () => {
+      windowManager.maximizeWindow(initialWindowState.id);
+    },
+    restore: () => {
+      windowManager.restoreWindow(initialWindowState.id);
+    },
+    close: () => {
+      console.log("Closing window");
+      windowManager.closeWindow(initialWindowState.id);
+    }
+  };
+  const updateWindowState = throttle(
+    (newState) => {
+      windowManager.updateWindow(initialWindowState.id, newState);
+    },
+    250
+    // 1/4 second throttle
+  );
+  const onMouseMove = async (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`
+      });
+    }
+    dragStart = { x: mouseEvent.clientX, y: mouseEvent.clientY };
+  };
+  const onWindowMouseDown = (event) => windowManager.setActiveWindow(initialWindowState.id);
+  const onMouseDown = (event) => {
+    if (event.target.tagName === "BUTTON") {
+      isDragging = false;
+      return;
+    }
+    isDragging = true;
+    dragStart = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    $$1(document).on("mousemove", onMouseMove);
+    $$1(document).on("mouseup", onMouseUp);
+    event.preventDefault();
+  };
+  const onMouseUp = () => {
+    isDragging = false;
+    $$1(document).off("mousemove", onMouseMove);
+    $$1(document).off("mouseup", onMouseUp);
+  };
+  const onWindowMounted = () => {
+    windowManager.updateWindow(initialWindowState.id, {
+      el: ref.current,
+      ref
+    });
+    windowManager.setActiveWindow(initialWindowState.id);
+  };
+  const onCloseClick = () => windowManager.closeWindow(initialWindowState.id);
+  const onMaximizeClick = async () => {
+    const currentState = windowManager.getWindow(initialWindowState.id);
+    if (currentState?.maximized) {
+      windowManager.restoreWindow(initialWindowState.id);
+    } else {
+      windowManager.maximizeWindow(initialWindowState.id);
+    }
+  };
+  const onMinimizeClick = async () => {
+    windowManager.minimizeWindow(initialWindowState.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: "window crt",
+      ref,
+      onMouseDown: onWindowMouseDown,
+      style: {
+        width,
+        height,
+        left: `${initialWindowState.x}px`,
+        top: `${initialWindowState.y}px`,
+        position: "absolute"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            class: "title-bar",
+            onMount: onWindowMounted,
+            onMouseDown,
+            onMouseUp,
+            onMouseMove,
+            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("div", { class: "window-body", children })
+      ]
+    }
+  );
+}
+
+function Desktop({ ref }) {
+  $$1(() => {
+    console.log("Desktop mounted");
+  });
+  const onOpenWindow = async () => {
+    const winRef = createRef();
+    await $$1(ref).append(
+      /* @__PURE__ */ jsxs(
+        Window,
+        {
+          width: 300,
+          height: 200,
+          title: "Test Window",
+          ref: winRef,
+          onClose: () => {
+            console.log("I WAS CLOSED!");
+          },
+          onMaximize: () => {
+            console.log("I WAS MAXIMIZED!");
+          },
+          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"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx("div", { class: "defuss-desktop-panel crt", ref, children: /* @__PURE__ */ jsx(Button, { onClick: onOpenWindow, children: "Open Window" }) });
+}
+
+const LogonScreen = ({
+  cDriveBasePath = "",
+  showGuestUser = true,
+  onTurnOffComputer,
+  onGuestLogon,
+  onUserLogonSubmit,
+  ref = createRef()
+}) => {
+  const userLoginFormRef = createRef();
+  $$1(userLoginFormRef).on("submit", async (event) => {
+    event.preventDefault();
+    const formData = await $$1(userLoginFormRef).form();
+    const loginForm = access();
+    console.log("Form submitted with data:", formData);
+    const { isValid, getMessages, getData, getField } = transval(
+      rule(loginForm.username).asString().isRequired(),
+      rule(loginForm.password).asString().isRequired()
+    );
+    if (!await isValid(formData)) {
+      console.error("Form validation failed:", getMessages());
+      return;
+    }
+    const loginFormData = getData();
+    const loginResult = await onUserLogonSubmit?.(
+      loginFormData.username,
+      loginFormData.password
+    );
+    console.log("Login result:", loginResult);
+  });
+  const onActivateAccountLogin = (evt) => {
+    $$1(evt.target).closest(".logon-screen__account").addClass("active");
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "logon-screen crt", ref, children: [
+    /* @__PURE__ */ jsx("div", { class: "logon-screen__top" }),
+    /* @__PURE__ */ jsxs("div", { class: "logon-screen__center", children: [
+      /* @__PURE__ */ jsxs("div", { class: "logon-screen__instructions", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `${cDriveBasePath}/defuss_xp_logo.webp`,
+            alt: "defuss XP logo"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: "To begin, click your user name" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { class: "logon-screen__accounts", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            tabindex: "-1",
+            class: "logon-screen__account",
+            onClick: onActivateAccountLogin,
+            children: [
+              /* @__PURE__ */ jsx("div", { class: "logon-screen__account-icon", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: `${cDriveBasePath}/icons/profile_picture_duck.webp`,
+                  alt: "duck"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { class: "logon-screen__account-details", children: [
+                /* @__PURE__ */ jsx("span", { class: "logon-screen__account-name", children: "Duck" }),
+                /* @__PURE__ */ jsxs("div", { class: "logon-screen__password", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Type your password" }),
+                  /* @__PURE__ */ jsxs("form", { ref: userLoginFormRef, children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "password",
+                        autoComplete: "new-password",
+                        name: "password"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("input", { type: "hidden", name: "username", value: "Duck" }),
+                    /* @__PURE__ */ jsx("button", { class: "logon-screen__submit", type: "submit", children: /* @__PURE__ */ jsx("span", {}) }),
+                    /* @__PURE__ */ jsx("button", { class: "logon-screen__question", type: "button", children: /* @__PURE__ */ jsx("span", { children: "?" }) })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        showGuestUser && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            tabindex: "-1",
+            class: "logon-screen__account",
+            onClick: onGuestLogon,
+            children: [
+              /* @__PURE__ */ jsx("div", { class: "logon-screen__account-icon", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: `${cDriveBasePath}/icons/profile_picture_chess.webp`,
+                  alt: "chess"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { class: "logon-screen__account-details", children: /* @__PURE__ */ jsx("span", { class: "logon-screen__account-name", children: "Guest" }) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { class: "logon-screen__bottom", children: [
+      /* @__PURE__ */ jsxs("div", { class: "logon-screen__turn-off", onClick: onTurnOffComputer, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", class: "logon-screen__turn-off-icon" }),
+        " ",
+        /* @__PURE__ */ jsx("span", { children: "Turn off computer" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { class: "logon-screen__logon-info", children: /* @__PURE__ */ jsxs("span", { children: [
+        "After you log on, you can add or change accounts.",
+        /* @__PURE__ */ jsx("br", {}),
+        "Just go to Control Panel and click User Accounts."
+      ] }) })
+    ] })
+  ] });
+};
+
+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" }) }),
+    /* @__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: "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: "#", 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: "#", 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: "#", 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: "#", 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: "#", 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: "#", 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: "#", 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: "#", children: "Run..." })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { class: "bottom" })
+  ] });
+};
+
+const StartButton = () => {
+  return /* @__PURE__ */ jsxs("ul", { class: "start-button", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        class: "start-button-icon",
+        src: "/defuss_xp_quad.webp",
+        alt: "Start Icon"
+      }
+    ),
+    /* @__PURE__ */ jsx("a", { href: "#", children: "Start " }),
+    /* @__PURE__ */ jsx(StartMenu, {})
+  ] });
+};
+
+const Taskbar = () => {
+  return /* @__PURE__ */ jsxs("div", { class: "bar crt", children: [
+    /* @__PURE__ */ jsx(StartButton, {}),
+    /* @__PURE__ */ jsx("ul", { class: "taskbar" }),
+    /* @__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" }) })
+  ] });
+};
+
+function Shell({
+  ref = createRef(),
+  desktopConfig = defaultDesktopOptions
+}) {
+  const desktopRef = createRef();
+  const taskbarRef = createRef();
+  const onMount = () => {
+    console.log("Shell mounted", ref.current);
+    console.log("Desktop mounted2", desktopRef.current);
+    desktopManager.init(desktopRef.current, desktopConfig);
+    console.log("Taskbar mounted", taskbarRef.current);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, onMount, children: [
+    /* @__PURE__ */ jsx(Desktop, { ref: desktopRef }),
+    /* @__PURE__ */ jsx(Taskbar, { ref: taskbarRef })
+  ] });
+}
+
+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);
+  }
+  run() {
+    console.log(`Running app: ${this.config.name}`);
+    this.config.main(this, ...this.config.argv || []);
+  }
+}
+
+class DequeryWithWindowManager extends CallChainImpl {
+  /*
+  // create a window from any element (not necessarily identifier as an App)
+  createDesktopWindow(options: CreateWindowOptions): PromiseLike<Window> {
+    return createCall(this, "createWindow", async () => {
+      return new WindowManager(options) as NT;
+    }) as unknown as PromiseLike<Window>;
+  }
+  */
+  // register an app to the desktop shell
+  createDesktopApp(options) {
+    return createCall(this, "createDesktopApp", async () => {
+      return new DefussApp(options);
+    });
+  }
+  // create a desktop app icon
+  createDesktopAppIcon(options) {
+    return createCall(this, "createDesktopAppIcon", async () => {
+      return new DefussDesktopAppIcon(options);
+    });
+  }
+}
+const $ = dequery.extend(DequeryWithWindowManager, [
+  "createDesktopApp",
+  "createWindow",
+  "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",
+  "/sounds/batterylow.ogg",
+  "/sounds/criticalstop.ogg",
+  "/sounds/ding.ogg",
+  "/sounds/error.ogg",
+  "/sounds/exclamation.ogg",
+  "/sounds/hardwarefail.ogg",
+  "/sounds/hardwareinsert.ogg",
+  "/sounds/logoffsound.ogg",
+  "/sounds/logonsound.ogg",
+  "/sounds/notify.ogg",
+  "/sounds/recycle.ogg",
+  "/sounds/shutdown.ogg",
+  "/sounds/start.ogg",
+  "/sounds/startup.ogg"
+];
+class SoundManager {
+  audioContext = null;
+  audioCacheBuffers = /* @__PURE__ */ new Map();
+  activeSources = /* @__PURE__ */ new Set();
+  async init() {
+    this.audioContext = new AudioContext();
+    if (this.audioContext.state === "suspended") {
+      await this.audioContext.resume();
+    }
+  }
+  preload(url) {
+    if (!Array.isArray(url)) {
+      url = [url];
+    }
+    if (!this.audioContext) {
+      return Promise.reject(new Error("AudioContext is not initialized"));
+    }
+    const loadPromises = url.map((singleUrl) => {
+      if (this.audioCacheBuffers.has(singleUrl)) {
+        return Promise.resolve(this.audioCacheBuffers.get(singleUrl));
+      }
+      return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.open("GET", singleUrl, true);
+        request.responseType = "arraybuffer";
+        request.onload = () => {
+          this.audioContext.decodeAudioData(
+            request.response,
+            (buffer) => {
+              this.audioCacheBuffers.set(singleUrl, buffer);
+              resolve(buffer);
+            },
+            (error) => reject(
+              new Error(
+                `Failed to decode audio data for ${singleUrl}: ${error}`
+              )
+            )
+          );
+        };
+        request.onerror = () => {
+          reject(new Error(`Failed to load audio file from ${singleUrl}`));
+        };
+        request.send();
+      });
+    });
+    return url.length === 1 ? loadPromises[0] : Promise.all(loadPromises);
+  }
+  async play(bufferOrBufferUrl, options) {
+    let buffer;
+    if (!this.audioContext) {
+      throw new Error("AudioContext is not initialized");
+    }
+    if (this.audioContext.state === "suspended") {
+      await this.audioContext.resume();
+    }
+    if (typeof bufferOrBufferUrl === "string") {
+      if (!this.audioCacheBuffers.has(bufferOrBufferUrl)) {
+        await this.preload(bufferOrBufferUrl);
+      }
+      buffer = this.audioCacheBuffers.get(bufferOrBufferUrl);
+      if (!buffer) {
+        throw new Error(
+          `Audio buffer for URL ${bufferOrBufferUrl} is not preloaded.`
+        );
+      }
+    } else if (bufferOrBufferUrl instanceof AudioBuffer) {
+      buffer = bufferOrBufferUrl;
+    } else {
+      throw new Error(
+        "Invalid argument: must be an AudioBuffer or a preloaded URL string."
+      );
+    }
+    const source = this.audioContext.createBufferSource();
+    source.buffer = buffer;
+    if (options?.volume !== void 0) {
+      const gainNode = this.audioContext.createGain();
+      gainNode.gain.value = options.volume;
+      source.connect(gainNode);
+      gainNode.connect(this.audioContext.destination);
+    } else {
+      source.connect(this.audioContext.destination);
+    }
+    if (options?.loop) {
+      source.loop = true;
+    }
+    this.activeSources.add(source);
+    source.onended = () => {
+      source.disconnect();
+      this.activeSources.delete(source);
+    };
+    source.start(0);
+    return source;
+  }
+  stopAllSounds() {
+    this.activeSources.forEach((source) => {
+      try {
+        source.stop();
+        source.disconnect();
+      } catch (e) {
+      }
+    });
+    this.activeSources.clear();
+  }
+  clearCache() {
+    this.audioCacheBuffers.clear();
+  }
+}
+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 };