@libreapps/ui 5.4.1

package/dist/desktop/index.js

@@ -0,0 +1,686 @@
+"use client";
+'use strict';
+
+var React3 = require('react');
+var framerMotion = require('framer-motion');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var WindowControls = /* @__PURE__ */ __name(({
+  onClose,
+  onMinimize,
+  onMaximize,
+  isMaximized = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: "Close",
+        "aria-label": "Close window",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-2 h-2 text-red-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onMinimize,
+        className: "w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: "Minimize",
+        "aria-label": "Minimize window",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-2 h-2 text-yellow-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onMaximize,
+        className: "w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: isMaximized ? "Restore" : "Maximize",
+        "aria-label": isMaximized ? "Restore window" : "Maximize window",
+        children: isMaximized ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    )
+  ] });
+}, "WindowControls");
+var variantStyles = {
+  default: "bg-gray-900/95 border-white/10",
+  dark: "bg-black/95 border-white/5",
+  light: "bg-white/95 border-gray-200 text-gray-900",
+  transparent: "bg-gray-900/80 border-white/10"
+};
+var Window = React3__namespace.forwardRef(
+  ({
+    title,
+    icon,
+    children,
+    className,
+    onClose,
+    onMinimize,
+    onMaximize,
+    onFocus,
+    defaultWidth = 600,
+    defaultHeight = 400,
+    defaultX,
+    defaultY,
+    minWidth = 200,
+    minHeight = 100,
+    maxWidth,
+    maxHeight,
+    resizable = true,
+    draggable = true,
+    centered = true,
+    hideControls = false,
+    variant = "default"
+  }, ref) => {
+    const dragControls = framerMotion.useDragControls();
+    const [isMaximized, setIsMaximized] = React3__namespace.useState(false);
+    const [position, setPosition] = React3__namespace.useState(() => {
+      if (typeof window !== "undefined") {
+        const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+        const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+        return { x, y };
+      }
+      return { x: 100, y: 100 };
+    });
+    const [size, setSize] = React3__namespace.useState({ width: defaultWidth, height: defaultHeight });
+    const [preMaximizeState, setPreMaximizeState] = React3__namespace.useState(null);
+    const [initialMount, setInitialMount] = React3__namespace.useState(true);
+    React3__namespace.useEffect(() => {
+      if (initialMount) {
+        setInitialMount(false);
+        return;
+      }
+      if (typeof window !== "undefined") {
+        const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+        const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+        setPosition({ x, y });
+      }
+    }, [defaultX, defaultY, defaultWidth, defaultHeight, centered]);
+    const handleMaximize = /* @__PURE__ */ __name(() => {
+      if (isMaximized) {
+        if (preMaximizeState) {
+          setPosition(preMaximizeState.position);
+          setSize(preMaximizeState.size);
+        }
+        setIsMaximized(false);
+      } else {
+        setPreMaximizeState({ position, size });
+        setPosition({ x: 0, y: 28 });
+        setSize({
+          width: typeof window !== "undefined" ? window.innerWidth : defaultWidth,
+          height: typeof window !== "undefined" ? window.innerHeight - 28 : defaultHeight
+        });
+        setIsMaximized(true);
+      }
+      onMaximize?.();
+    }, "handleMaximize");
+    const handleDragEnd = /* @__PURE__ */ __name((_, info) => {
+      setPosition((prev) => ({
+        x: prev.x + info.offset.x,
+        y: prev.y + info.offset.y
+      }));
+    }, "handleDragEnd");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        ref,
+        role: "dialog",
+        "aria-labelledby": `window-title-${title.replace(/\s+/g, "-").toLowerCase()}`,
+        drag: draggable && !isMaximized,
+        dragControls,
+        dragMomentum: false,
+        dragListener: false,
+        onDragEnd: handleDragEnd,
+        initial: { opacity: 0, scale: 0.95, y: 10 },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          y: 0,
+          x: position.x,
+          width: size.width,
+          height: size.height
+        },
+        exit: { opacity: 0, scale: 0.95, y: 10 },
+        transition: { type: "spring", damping: 25, stiffness: 300 },
+        style: {
+          position: "fixed",
+          left: 0,
+          top: 0,
+          minWidth,
+          minHeight,
+          maxWidth: isMaximized ? void 0 : maxWidth,
+          maxHeight: isMaximized ? void 0 : maxHeight,
+          zIndex: 1e3
+        },
+        onClick: onFocus,
+        className: cn(
+          "flex flex-col rounded-xl border shadow-2xl backdrop-blur-xl overflow-hidden",
+          variantStyles[variant],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onPointerDown: (e) => {
+                if (draggable && !isMaximized) {
+                  dragControls.start(e);
+                }
+              },
+              onDoubleClick: handleMaximize,
+              className: cn(
+                "flex items-center justify-between h-10 px-3 select-none cursor-default shrink-0",
+                "border-b border-white/5 bg-gradient-to-b from-white/5 to-transparent"
+              ),
+              children: [
+                !hideControls && /* @__PURE__ */ jsxRuntime.jsx(
+                  WindowControls,
+                  {
+                    onClose,
+                    onMinimize,
+                    onMaximize: handleMaximize,
+                    isMaximized
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 absolute left-1/2 -translate-x-1/2", children: [
+                  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4", children: icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      id: `window-title-${title.replace(/\s+/g, "-").toLowerCase()}`,
+                      className: "text-sm font-medium text-white/90 truncate max-w-[200px]",
+                      children: title
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children }),
+          resizable && !isMaximized && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute bottom-0 right-0 w-4 h-4 cursor-se-resize opacity-0 hover:opacity-100 transition-opacity",
+              style: {
+                background: "linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.3) 50%)"
+              },
+              onPointerDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const startX = e.clientX;
+                const startY = e.clientY;
+                const startWidth = size.width;
+                const startHeight = size.height;
+                const handleMove = /* @__PURE__ */ __name((moveEvent) => {
+                  const deltaX = moveEvent.clientX - startX;
+                  const deltaY = moveEvent.clientY - startY;
+                  const newWidth = Math.max(minWidth, Math.min(startWidth + deltaX, maxWidth ?? Infinity));
+                  const newHeight = Math.max(minHeight, Math.min(startHeight + deltaY, maxHeight ?? Infinity));
+                  setSize({ width: newWidth, height: newHeight });
+                }, "handleMove");
+                const handleUp = /* @__PURE__ */ __name(() => {
+                  document.removeEventListener("pointermove", handleMove);
+                  document.removeEventListener("pointerup", handleUp);
+                }, "handleUp");
+                document.addEventListener("pointermove", handleMove);
+                document.addEventListener("pointerup", handleUp);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Window.displayName = "Window";
+var categoryIcons = {
+  "Applications": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "w-4 h-4" }),
+  "Files": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4" }),
+  "Settings": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "w-4 h-4" }),
+  "Actions": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "w-4 h-4" })
+};
+var Spotlight = /* @__PURE__ */ __name(({
+  isOpen,
+  onClose,
+  items = [],
+  onSelect,
+  placeholder = "Search...",
+  className,
+  maxResults = 8,
+  categories,
+  renderItem
+}) => {
+  const [query, setQuery] = React3__namespace.useState("");
+  const [selectedIndex, setSelectedIndex] = React3__namespace.useState(0);
+  const inputRef = React3__namespace.useRef(null);
+  const filteredItems = React3__namespace.useMemo(() => {
+    if (!query.trim()) {
+      return items.slice(0, maxResults);
+    }
+    const lowerQuery = query.toLowerCase();
+    return items.filter((item) => {
+      const matchesTitle = item.title.toLowerCase().includes(lowerQuery);
+      const matchesSubtitle = item.subtitle?.toLowerCase().includes(lowerQuery);
+      const matchesKeywords = item.keywords?.some((k) => k.toLowerCase().includes(lowerQuery));
+      const matchesCategory = item.category?.toLowerCase().includes(lowerQuery);
+      return matchesTitle || matchesSubtitle || matchesKeywords || matchesCategory;
+    }).slice(0, maxResults);
+  }, [items, query, maxResults]);
+  const groupedItems = React3__namespace.useMemo(() => {
+    const groups = {};
+    const orderedCategories = categories || [];
+    filteredItems.forEach((item) => {
+      const category = item.category || "Results";
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(item);
+    });
+    if (orderedCategories.length > 0) {
+      const sortedGroups = {};
+      orderedCategories.forEach((cat) => {
+        if (groups[cat]) {
+          sortedGroups[cat] = groups[cat];
+        }
+      });
+      Object.keys(groups).forEach((cat) => {
+        if (!sortedGroups[cat]) {
+          sortedGroups[cat] = groups[cat];
+        }
+      });
+      return sortedGroups;
+    }
+    return groups;
+  }, [filteredItems, categories]);
+  const flatItems = Object.values(groupedItems).flat();
+  React3__namespace.useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+  React3__namespace.useEffect(() => {
+    if (isOpen) {
+      setQuery("");
+      setSelectedIndex(0);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    }
+  }, [isOpen]);
+  React3__namespace.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = /* @__PURE__ */ __name((e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.min(prev + 1, flatItems.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          const selectedItem = flatItems[selectedIndex];
+          if (selectedItem) {
+            selectedItem.action?.();
+            onSelect?.(selectedItem);
+            onClose();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          break;
+      }
+    }, "handleKeyDown");
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, flatItems, selectedIndex, onSelect, onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        onClick: onClose,
+        className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95, y: -20 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: -20 },
+        transition: { type: "spring", damping: 25, stiffness: 300 },
+        className: cn(
+          "fixed left-1/2 top-[15%] -translate-x-1/2 w-full max-w-xl z-[10000]",
+          "bg-gray-900/95 border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl overflow-hidden",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-5 h-5 text-white/50" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder,
+                className: "flex-1 bg-transparent text-white text-lg outline-none placeholder:text-white/40"
+              }
+            ),
+            query && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setQuery(""),
+                className: "p-1 hover:bg-white/10 rounded transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 text-white/50" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-0.5 bg-white/10 rounded text-xs text-white/50", children: "ESC" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[50vh] overflow-y-auto", children: flatItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-8 text-center text-white/50", children: [
+            'No results found for "',
+            query,
+            '"'
+          ] }) : Object.entries(groupedItems).map(([category, categoryItems]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 text-xs font-medium text-white/40 uppercase tracking-wider bg-white/5", children: category }),
+            categoryItems.map((item) => {
+              const itemIndex = flatItems.indexOf(item);
+              const isSelected = itemIndex === selectedIndex;
+              if (renderItem) {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    onClick: () => {
+                      item.action?.();
+                      onSelect?.(item);
+                      onClose();
+                    },
+                    children: renderItem(item, isSelected)
+                  },
+                  item.id
+                );
+              }
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  onClick: () => {
+                    item.action?.();
+                    onSelect?.(item);
+                    onClose();
+                  },
+                  className: cn(
+                    "flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors",
+                    isSelected ? "bg-blue-500/20" : "hover:bg-white/5"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center", children: item.icon || categoryIcons[category] || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4 text-white/70" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-white truncate", children: item.title }),
+                      item.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/50 truncate", children: item.subtitle })
+                    ] }),
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-4 h-4 text-white/50" })
+                  ]
+                },
+                item.id
+              );
+            })
+          ] }, category)) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-white/10 text-xs text-white/40", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-1.5 py-0.5 bg-white/10 rounded", children: "\u2191" }),
+                /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-1.5 py-0.5 bg-white/10 rounded", children: "\u2193" }),
+                "to navigate"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-1.5 py-0.5 bg-white/10 rounded", children: "\u23CE" }),
+                "to select"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+ Space to open" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}, "Spotlight");
+function windowReducer(state, action) {
+  switch (action.type) {
+    case "OPEN":
+      return {
+        windows: { ...state.windows, [action.id]: true },
+        activeWindow: action.id
+      };
+    case "CLOSE":
+      return {
+        windows: { ...state.windows, [action.id]: false },
+        activeWindow: state.activeWindow === action.id ? null : state.activeWindow
+      };
+    case "TOGGLE":
+      const isOpen = state.windows[action.id];
+      return {
+        windows: { ...state.windows, [action.id]: !isOpen },
+        activeWindow: !isOpen ? action.id : state.activeWindow === action.id ? null : state.activeWindow
+      };
+    case "CLOSE_ALL":
+      return {
+        windows: Object.keys(state.windows).reduce((acc, key) => {
+          acc[key] = false;
+          return acc;
+        }, {}),
+        activeWindow: null
+      };
+    case "SET_ACTIVE":
+      return { ...state, activeWindow: action.id };
+    default:
+      return state;
+  }
+}
+__name(windowReducer, "windowReducer");
+function useWindowManager(initialWindows = []) {
+  const initialState = {
+    windows: initialWindows.reduce((acc, id) => {
+      acc[id] = false;
+      return acc;
+    }, {}),
+    activeWindow: null
+  };
+  const [state, dispatch] = React3__namespace.useReducer(windowReducer, initialState);
+  const openWindows = React3__namespace.useMemo(() => {
+    return Object.entries(state.windows).filter(([_, isOpen2]) => isOpen2).map(([id]) => id);
+  }, [state.windows]);
+  const openWindow = React3__namespace.useCallback((id) => {
+    dispatch({ type: "OPEN", id });
+  }, []);
+  const closeWindow = React3__namespace.useCallback((id) => {
+    dispatch({ type: "CLOSE", id });
+  }, []);
+  const toggleWindow = React3__namespace.useCallback((id) => {
+    dispatch({ type: "TOGGLE", id });
+  }, []);
+  const focusWindow = React3__namespace.useCallback((id) => {
+    dispatch({ type: "SET_ACTIVE", id });
+  }, []);
+  const closeAllWindows = React3__namespace.useCallback(() => {
+    dispatch({ type: "CLOSE_ALL" });
+  }, []);
+  const isOpen = React3__namespace.useCallback((id) => {
+    return state.windows[id] ?? false;
+  }, [state.windows]);
+  return {
+    windows: state.windows,
+    activeWindow: state.activeWindow,
+    openWindows,
+    openWindow,
+    closeWindow,
+    toggleWindow,
+    focusWindow,
+    closeAllWindows,
+    isOpen
+  };
+}
+__name(useWindowManager, "useWindowManager");
+var defaultSettings = {
+  theme: "default",
+  colorScheme: "dark",
+  backgroundImage: void 0,
+  backgroundColor: void 0,
+  dockPosition: "bottom",
+  dockSize: 64,
+  dockMagnification: true,
+  dockAutoHide: false,
+  windowTransparency: 20,
+  fontSize: "medium",
+  reducedMotion: false
+};
+var STORAGE_KEY = "desktop-settings";
+function loadSettings() {
+  if (typeof window === "undefined") return defaultSettings;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return { ...defaultSettings, ...JSON.parse(stored) };
+    }
+  } catch {
+  }
+  return defaultSettings;
+}
+__name(loadSettings, "loadSettings");
+function saveSettings(settings) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+  }
+}
+__name(saveSettings, "saveSettings");
+function useDesktopSettings() {
+  const [settings, setSettings] = React3__namespace.useState(loadSettings);
+  React3__namespace.useEffect(() => {
+    saveSettings(settings);
+  }, [settings]);
+  const updateSetting = /* @__PURE__ */ __name((key, value) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  }, "updateSetting");
+  return {
+    ...settings,
+    setTheme: /* @__PURE__ */ __name((theme) => updateSetting("theme", theme), "setTheme"),
+    setColorScheme: /* @__PURE__ */ __name((scheme) => updateSetting("colorScheme", scheme), "setColorScheme"),
+    setBackgroundImage: /* @__PURE__ */ __name((url) => updateSetting("backgroundImage", url), "setBackgroundImage"),
+    setBackgroundColor: /* @__PURE__ */ __name((color) => updateSetting("backgroundColor", color), "setBackgroundColor"),
+    setDockPosition: /* @__PURE__ */ __name((position) => updateSetting("dockPosition", position), "setDockPosition"),
+    setDockSize: /* @__PURE__ */ __name((size) => updateSetting("dockSize", size), "setDockSize"),
+    setDockMagnification: /* @__PURE__ */ __name((enabled) => updateSetting("dockMagnification", enabled), "setDockMagnification"),
+    setDockAutoHide: /* @__PURE__ */ __name((enabled) => updateSetting("dockAutoHide", enabled), "setDockAutoHide"),
+    setWindowTransparency: /* @__PURE__ */ __name((value) => updateSetting("windowTransparency", value), "setWindowTransparency"),
+    setFontSize: /* @__PURE__ */ __name((size) => updateSetting("fontSize", size), "setFontSize"),
+    setReducedMotion: /* @__PURE__ */ __name((enabled) => updateSetting("reducedMotion", enabled), "setReducedMotion"),
+    toggleDarkMode: /* @__PURE__ */ __name(() => {
+      setSettings((prev) => ({
+        ...prev,
+        colorScheme: prev.colorScheme === "dark" ? "light" : "dark"
+      }));
+    }, "toggleDarkMode"),
+    resetToDefaults: /* @__PURE__ */ __name(() => setSettings(defaultSettings), "resetToDefaults")
+  };
+}
+__name(useDesktopSettings, "useDesktopSettings");
+function useOverlayManager() {
+  const [overlays, setOverlays] = React3__namespace.useState({
+    spotlight: false,
+    contextMenu: false,
+    modal: false,
+    drawer: false
+  });
+  const isOpen = React3__namespace.useCallback((id) => overlays[id] ?? false, [overlays]);
+  const open = React3__namespace.useCallback((id) => {
+    setOverlays((prev) => ({ ...prev, [id]: true }));
+  }, []);
+  const close = React3__namespace.useCallback((id) => {
+    setOverlays((prev) => ({ ...prev, [id]: false }));
+  }, []);
+  const toggle = React3__namespace.useCallback((id) => {
+    setOverlays((prev) => ({ ...prev, [id]: !prev[id] }));
+  }, []);
+  const closeAll = React3__namespace.useCallback(() => {
+    setOverlays(
+      (prev) => Object.keys(prev).reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+      }, {})
+    );
+  }, []);
+  return { overlays, isOpen, open, close, toggle, closeAll };
+}
+__name(useOverlayManager, "useOverlayManager");
+function useKeyboardShortcuts(shortcuts) {
+  React3__namespace.useEffect(() => {
+    const handleKeyDown = /* @__PURE__ */ __name((e) => {
+      for (const shortcut of shortcuts) {
+        const metaMatch = shortcut.meta ? e.metaKey || e.ctrlKey : !e.metaKey;
+        const ctrlMatch = shortcut.ctrl ? e.ctrlKey : true;
+        const altMatch = shortcut.alt ? e.altKey : !e.altKey;
+        const shiftMatch = shortcut.shift ? e.shiftKey : !e.shiftKey;
+        const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase();
+        if (keyMatch && metaMatch && ctrlMatch && altMatch && shiftMatch) {
+          if (shortcut.preventDefault !== false) {
+            e.preventDefault();
+          }
+          shortcut.action();
+          return;
+        }
+      }
+    }, "handleKeyDown");
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [shortcuts]);
+}
+__name(useKeyboardShortcuts, "useKeyboardShortcuts");
+
+exports.Spotlight = Spotlight;
+exports.Window = Window;
+exports.WindowControls = WindowControls;
+exports.useDesktopSettings = useDesktopSettings;
+exports.useKeyboardShortcuts = useKeyboardShortcuts;
+exports.useOverlayManager = useOverlayManager;
+exports.useWindowManager = useWindowManager;