@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

npm install @System-UI/base

Quick Start

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

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

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 file for details.

Contributing

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

Repository

https://github.com/System-UI/base