@system-ui-js/base/README.md

A comprehensive UI system library with window management, task bars, and draggable components

# @System-UI/base

A comprehensive UI system library with window management, task bars, and draggable components built with TypeScript.

## Features

- 🪟 **Window Management**: Create, manage, and control multiple windows
- 📊 **Task Bar**: Customizable task bar with window previews
- 🖱️ **Draggable Components**: Drag and drop functionality
- 📱 **Responsive Design**: Works across different screen sizes
- 🎨 **Customizable**: Easy to style and extend
- 📸 **Window Screenshots**: Capture window screenshots for previews
- 🔧 **TypeScript Support**: Full TypeScript support with type definitions

## Installation

```bash
npm install @System-UI/base
```

## Quick Start

```typescript
import { 
  initContainer, 
  SysUiWindow, 
  SysUiTaskBar, 
  windowManager 
} from '@System-UI/base';

// Initialize the container
const appElement = document.querySelector('#app');
const container = initContainer(appElement as HTMLElement);

// Create a window
const window = new SysUiWindow({
  titleBar: document.createElement('span')
}, {
  className: 'my-window'
}, {
  x: 100,
  y: 100
}, {
  x: 300,
  y: 200
});

// Add window to container
container.addComponent(window);

// Create a task bar
const taskBar = new SysUiTaskBar({
  center: document.createElement('div')
}, {
  position: 'top'
});

// Add task bar to container
container.addComponent(taskBar);
```

## API Reference

### SysUiContainer

The main container that manages all UI components.

#### `initContainer(element: HTMLElement): SysUiContainer`

Initialize a new container on the specified HTML element.

#### Methods

- `addComponent(component: SysUiComponents): void` - Add a component to the container
- `removeComponent(component: SysUiComponents): void` - Remove a component from the container

### SysUiWindow

A draggable and resizable window component.

#### Constructor

```typescript
new SysUiWindow(
  elements: WindowElements,
  options: WindowOptions,
  position: { x: number, y: number },
  size: { x: number, y: number }
)
```

#### Methods

- `focus(): void` - Bring window to front
- `close(): void` - Close the window
- `minimize(): void` - Minimize the window
- `alwaysToFront(): void` - Keep window always on top
- `getElement(): HTMLElement` - Get the window's DOM element

### SysUiTaskBar

A customizable task bar component.

#### Constructor

```typescript
new SysUiTaskBar(
  elements: TaskBarElements,
  options: TaskBarOptions
)
```

### WindowManager

Global window manager for handling multiple windows.

#### Methods

- `registerWindow(window: SysUiWindow): string` - Register a window
- `unregisterWindow(windowId: string): void` - Unregister a window
- `getWindow(windowId: string): SysUiWindow | undefined` - Get a window by ID
- `getAllWindows(): SysUiWindow[]` - Get all registered windows
- `getWindowCount(): number` - Get the number of windows
- `closeAllWindows(): void` - Close all windows
- `captureWindowScreenshot(windowId: string): Promise<string | null>` - Capture window screenshot
- `captureAllWindowScreenshots(): Promise<Map<string, string>>` - Capture all window screenshots

## Types

The library exports comprehensive TypeScript types:

- `SysUiComponents` - Union type of all UI components
- `Number2` - 2D coordinate/size type
- `WindowElements` - Window element configuration
- `WindowOptions` - Window configuration options
- `TaskBarElements` - Task bar element configuration
- `TaskBarOptions` - Task bar configuration options

## Styling

The library includes basic CSS styles. You can customize the appearance by overriding the CSS classes:

- `.sys-ui-container` - Main container
- `.sys-ui-window` - Window component
- `.sys-ui-taskbar` - Task bar component

## Browser Support

- Chrome/Edge 88+
- Firefox 85+
- Safari 14+

## License

MIT License - see [LICENSE](LICENSE) file for details.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Repository

[https://github.com/System-UI/base](https://github.com/System-UI/base)