zOS Desktop Documentation

Features

🪟

Window Management

Draggable, resizable windows with familiar traffic light controls. Z-index management for proper layering.

🎯

Dock

macOS-style dock with hover animations, running indicators, and app icons.

📋

Menu Bar

System menu bar with app menus, status icons, and clock display.

🔍

Spotlight Search

Quick app launcher with keyboard shortcut (⌘+Space) and search filtering.

🔒

Lock Screen

Beautiful lock screen with time display and user authentication.

⚡

Boot Sequence

Animated boot sequence with progress bar and logo display.

Usage

Installation

npm install @z-os/desktop @z-os/ui @z-os/apps @z-os/sdk

Basic Setup

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ZDesktop, ZDock, ZMenuBar } from '@z-os/desktop';
import { BUNDLED_APPS } from '@z-os/apps';
import '@z-os/desktop/styles.css';

function App() {
  return (
    <ZDesktop
      apps={BUNDLED_APPS}
      wallpaper="gradient"
      showDock={true}
      showMenuBar={true}
    />
  );
}

createRoot(document.getElementById('root')!).render(<App />);

Custom Configuration

import { ZDesktop, BootSequence, LockScreen } from '@z-os/desktop';

function App() {
  const [booting, setBooting] = useState(true);
  const [locked, setLocked] = useState(false);

  if (booting) {
    return (
      <BootSequence
        onComplete={() => setBooting(false)}
        logo="🍎"
        version="4.2.0"
        duration={3000}
      />
    );
  }

  if (locked) {
    return (
      <LockScreen
        username="User"
        onUnlock={() => setLocked(false)}
        time={new Date()}
      />
    );
  }

  return <ZDesktop apps={BUNDLED_APPS} />;
}

Keyboard Shortcuts

Shortcut	Action
`⌘ + Space`	Open Spotlight Search
`⌘ + L`	Lock Screen
`⌘ + W`	Close Window
`⌘ + M`	Minimize Window
`⌘ + Q`	Quit App
`Escape`	Close Spotlight / Dialog

Running the Demo

# Clone the repository
git clone https://github.com/z-os4/desktop.git
cd desktop

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test