WindowManager: The NEX OS Kernel for Window Lifecycle

interface AppWindow {
  id: string;
  title: string;
  icon: ReactNode;
  content: ReactNode;
  desktopId: string;
  isOpen: boolean;
  isMinimized: boolean;
  isMaximized: boolean;
  snap?: 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
  zIndex: number;
  /** Size and position saved before maximising — enables precise restore */
  savedSize?: { width: number; height: number; x: number; y: number };
}

Window (HOC)
├── Drag — mouse-down on window-header triggers position tracking
├── Resize — 8 resize handles (n, s, e, w, ne, nw, se, sw)
├── Snap preview — ghost overlay rendered during drag to screen edges
├── Window controls — Minimise / Maximise / Close buttons (Fluent icons)
├── Snap layout menu — hover the maximise button to reveal a 4-layout grid
├── Backdrop blur — glassmorphism effect via CSS backdrop-filter
├── Focus ring — accent-coloured border and elevated shadow when focused
├── Framer Motion — spring-animated open/close/minimise transitions
└── ErrorBoundary — catches app-level crashes without taking down the OS

import { useWindowManager } from '../context/WindowManager';
import MyApp from './apps/MyApp';

export const LauncherButton = () => {
  const { openWindow, restoreWindow, windows } = useWindowManager();

  const handleClick = () => {
    const existing = windows.find(w => w.id === 'my-app');

    if (existing?.isMinimized) {
      // ✅ Brings the window back without remounting the app component
      restoreWindow('my-app');
    } else {
      // First launch — create the window fresh
      openWindow('my-app', 'My App', <span>🚀</span>, <MyApp />);
    }
  };

  return <button onClick={handleClick}>Open My App</button>;
};

const { maximizeWindow } = useWindowManager();

// Pass the current geometry so it can be saved for precise restore
const handleMaximize = () => {
  maximizeWindow(windowId, {
    width: size.width,
    height: size.height,
    x: position.x,
    y: position.y,
  });
};