@ecobridge.xyz/catalog

A sophisticated web component library for building desktop-like application interfaces with modern web technologies. Built on @design.estate/dees-catalog, this catalog provides specialized components for the ecobridge ecosystem — featuring complete app launcher experiences, authentication flows, and system-level UI components.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

✨ Features

• 🖥️ Desktop-like UI — Full application launcher with top bar, status bar, and app grid
• 🔐 Flexible Authentication — PIN, password, and QR code login methods
• 🌓 Dark/Light Mode — Theme-aware components with automatic switching
• ⌨️ Virtual Keyboard — Touch-friendly on-screen keyboard
• 🔋 System Menus — WiFi, battery, sound, and power controls
• 📱 Responsive Design — Works on desktop and mobile
• 🎨 Consistent Design System — Unified theming with CSS custom properties
• ⚡ TypeScript First — Full type definitions for excellent DX

📦 Installation

pnpm add @ecobridge.xyz/catalog

npm install @ecobridge.xyz/catalog

🚀 Quick Start

import { EcoApplauncher } from '@ecobridge.xyz/catalog';

const launcher = document.createElement('eco-applauncher');
launcher.mode = 'home';
launcher.apps = [
  { name: 'Settings', icon: 'lucide:settings', action: () => console.log('Settings') },
  { name: 'Files', icon: 'lucide:folder', action: () => console.log('Files') },
  { name: 'Terminal', icon: 'lucide:terminal', action: () => console.log('Terminal') },
];
document.body.appendChild(launcher);

🧩 Components

EcoApplauncher

The main application launcher — a complete desktop-like interface with authentication, app grid, and system controls.

import { EcoApplauncher, type IAppIcon, type ILoginConfig } from '@ecobridge.xyz/catalog';

const launcher = document.createElement('eco-applauncher');

// Configure login
launcher.loginConfig = {
  allowedMethods: ['pin', 'password', 'qr'],
  pinLength: 6,
  welcomeMessage: 'Welcome Back',
  subtitle: 'Enter your credentials to continue',
  logoUrl: '/assets/logo.svg',
};

// Configure apps
launcher.apps = [
  {
    name: 'Dashboard',
    icon: 'lucide:layoutDashboard',
    action: () => openDashboard(),
  },
  {
    name: 'Settings',
    icon: 'lucide:settings',
    view: html`<eco-view-settings></eco-view-settings>`, // Embed view directly
  },
];

// Configure status bar
launcher.statusConfig = {
  showTime: true,
  showNetwork: true,
  showBattery: true,
  showSound: true,
  showKeyboard: true,
};

// Configure top bar
launcher.topBarConfig = {
  showSearch: true,
  showDate: true,
  showNotifications: true,
  showUser: true,
};

// Set status values
launcher.batteryLevel = 85;
launcher.networkStatus = 'online';
launcher.soundLevel = 70;
launcher.userName = 'John Doe';
launcher.notificationCount = 3;

// Handle events
launcher.addEventListener('login-attempt', (e) => {
  const { method, value } = e.detail;
  // Validate credentials
  if (validateCredentials(method, value)) {
    launcher.setLoginResult(true);
  } else {
    launcher.setLoginResult(false, 'Invalid credentials');
  }
});

launcher.addEventListener('app-click', (e) => {
  console.log('App clicked:', e.detail.app.name);
});

launcher.addEventListener('power-action', (e) => {
  console.log('Power action:', e.detail.action); // 'shutdown' | 'restart' | 'sleep' | 'lock'
});

document.body.appendChild(launcher);

Properties

Property	Type	Default	Description
mode	'login' | 'home'	'home'	Current view mode
loginConfig	ILoginConfig	{}	Login screen configuration
apps	IAppIcon[]	[]	Array of app icons to display
statusConfig	IStatusBarConfig	{}	Status bar visibility options
topBarConfig	ITopBarConfig	{}	Top bar visibility options
userName	string	'User'	Display name for user avatar
notificationCount	number	0	Number of notifications
batteryLevel	number | 'charging'	100	Battery percentage or charging state
networkStatus	'online' | 'offline' | 'connecting'	'online'	Network connection status
soundLevel	number	50	Volume level (0-100)

Events

Event	Detail	Description
login-attempt	{ method, value }	Fired when user attempts to log in
login-success	—	Fired after successful login
login-failure	{ error }	Fired after failed login
app-click	{ app }	Fired when an app icon is clicked
power-action	{ action }	Fired when power menu action is selected
volume-change	{ volume }	Fired when volume is adjusted
wifi-toggle	{ enabled }	Fired when WiFi is toggled
keyboard-toggle	{ visible }	Fired when virtual keyboard is toggled

---

System Menu Components

Interactive status bar menus for system controls.

EcoApplauncherWifimenu

WiFi network selection and management.

import { EcoApplauncherWifimenu, type IWifiNetwork } from '@ecobridge.xyz/catalog';

const wifiMenu = document.createElement('eco-applauncher-wifimenu');
wifiMenu.open = true;
wifiMenu.wifiEnabled = true;
wifiMenu.connectedNetwork = 'HomeNetwork';
wifiMenu.networks = [
  { ssid: 'HomeNetwork', strength: 4, secured: true },
  { ssid: 'OfficeWiFi', strength: 3, secured: true },
  { ssid: 'GuestNetwork', strength: 2, secured: false },
];

EcoApplauncherBatterymenu

Battery status and power mode settings.

import { EcoApplauncherBatterymenu } from '@ecobridge.xyz/catalog';

const batteryMenu = document.createElement('eco-applauncher-batterymenu');
batteryMenu.open = true;
batteryMenu.batteryLevel = 75;
batteryMenu.isCharging = false;
batteryMenu.batterySaverEnabled = false;
batteryMenu.timeRemaining = '3h 45m';

EcoApplauncherSoundmenu

Audio controls and device selection.

import { EcoApplauncherSoundmenu, type IAudioDevice } from '@ecobridge.xyz/catalog';

const soundMenu = document.createElement('eco-applauncher-soundmenu');
soundMenu.open = true;
soundMenu.volume = 70;
soundMenu.muted = false;
soundMenu.outputDevices = [
  { id: '1', name: 'Built-in Speakers', type: 'speaker' },
  { id: '2', name: 'AirPods Pro', type: 'headphones' },
];
soundMenu.activeDeviceId = '1';

EcoApplauncherPowermenu

Power actions menu.

import { EcoApplauncherPowermenu, type TPowerAction } from '@ecobridge.xyz/catalog';

const powerMenu = document.createElement('eco-applauncher-powermenu');
powerMenu.open = true;
powerMenu.addEventListener('power-action', (e) => {
  const action: TPowerAction = e.detail.action; // 'shutdown' | 'restart' | 'sleep' | 'lock'
  handlePowerAction(action);
});

EcoApplauncherKeyboard

Virtual on-screen keyboard for touch interfaces.

import { EcoApplauncherKeyboard } from '@ecobridge.xyz/catalog';

const keyboard = document.createElement('eco-applauncher-keyboard');
keyboard.visible = true;
keyboard.addEventListener('key-press', (e) => console.log('Key:', e.detail.key));
keyboard.addEventListener('backspace', () => console.log('Backspace'));
keyboard.addEventListener('enter', () => console.log('Enter'));
keyboard.addEventListener('space', () => console.log('Space'));

---

EcoScreensaver

An elegant screensaver with a floating time display that changes color on bounce — reminiscent of classic DVD screensavers but with modern design sensibility.

import { EcoScreensaver } from '@ecobridge.xyz/catalog';

// Show screensaver
const screensaver = await EcoScreensaver.show();

// Hide screensaver
EcoScreensaver.hide();

// Destroy instance completely
EcoScreensaver.destroy();

// With auto-activation delay (inactivity timer)
const screensaver = new EcoScreensaver();
screensaver.delay = 300000; // 5 minutes
document.body.appendChild(screensaver);

The screensaver features:

• 🕐 Floating time display with smooth animation
• 🎨 Color changes on boundary bounce
• 🔮 Click-to-dismiss with radial reveal animation
• 🌙 Elegant vignette effect
• ⏱️ Optional auto-activation after inactivity

---

Views

Pre-built view components for common screens.

EcoViewLogin

Standalone login view with PIN, password, and QR authentication.

import { EcoViewLogin, type ILoginConfig } from '@ecobridge.xyz/catalog';

const loginView = document.createElement('eco-view-login');
loginView.config = {
  allowedMethods: ['pin', 'password'],
  pinLength: 4,
  welcomeMessage: 'Welcome',
  subtitle: 'Sign in to continue',
  logoUrl: '/logo.svg',
};

loginView.addEventListener('login-attempt', (e) => {
  const { method, value } = e.detail;
  // Handle authentication
});

EcoViewHome

App grid view displaying application icons.

import { EcoViewHome } from '@ecobridge.xyz/catalog';

const homeView = document.createElement('eco-view-home');
homeView.apps = [
  { name: 'App 1', icon: 'lucide:box' },
  { name: 'App 2', icon: 'lucide:star' },
];

EcoViewSettings

Complete settings panel with categorized options.

import { EcoViewSettings } from '@ecobridge.xyz/catalog';

const settingsView = document.createElement('eco-view-settings');
settingsView.activePanel = 'general'; // 'general' | 'network' | 'display' | 'sound' | etc.

Settings panels include:

• General — Dark mode, text size, language, timezone
• Network — WiFi settings, available networks
• Bluetooth — Bluetooth toggle, device management
• Display — Brightness, Night Shift, resolution
• Sound — Volume, output device, sound effects
• Notifications — App notification settings
• Privacy — Location, camera, microphone permissions
• Accounts — User profile, connected accounts
• Apps — Default apps, installed applications
• Updates — Software update settings
• About — System information

Additional Views

• EcoViewPeripherals — Peripheral device management
• EcoViewSaasshare — SaaS sharing configuration
• EcoViewSystem — System-level settings

---

🎨 Theming

The library uses CSS custom properties for consistent theming. Import the theme defaults for access to spacing, radius, shadows, and transitions.

import { themeDefaultStyles, themeDefaults } from '@ecobridge.xyz/catalog';

// Use in your component styles
@customElement('my-component')
export class MyComponent extends DeesElement {
  static styles = [
    themeDefaultStyles, // Adds CSS custom properties
    css`
      .card {
        padding: var(--dees-spacing-lg);
        border-radius: var(--dees-radius-lg);
        box-shadow: var(--dees-shadow-md);
        transition: transform var(--dees-transition-default) ease;
      }
    `
  ];
}

Available CSS Custom Properties

/* Spacing */
--dees-spacing-xs: 4px;
--dees-spacing-sm: 8px;
--dees-spacing-md: 12px;
--dees-spacing-lg: 16px;
--dees-spacing-xl: 24px;
--dees-spacing-2xl: 32px;
--dees-spacing-3xl: 48px;

/* Border Radius */
--dees-radius-xs: 2px;
--dees-radius-sm: 4px;
--dees-radius-md: 6px;
--dees-radius-lg: 8px;
--dees-radius-xl: 12px;
--dees-radius-full: 999px;

/* Shadows */
--dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
--dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Transitions */
--dees-transition-fast: 0.1s;
--dees-transition-default: 0.15s;
--dees-transition-slow: 0.2s;
--dees-transition-slower: 0.3s;

/* Control Heights */
--dees-control-height-sm: 32px;
--dees-control-height-md: 36px;
--dees-control-height-lg: 40px;
--dees-control-height-xl: 48px;

---

🛠️ Development

# Install dependencies
pnpm install

# Start development server with hot reload
pnpm run watch

# Build for production
pnpm run build

# Run tests
pnpm test

📚 Dependencies

• @design.estate/dees-catalog — Base component library
• @design.estate/dees-element — Web component foundation (LitElement-based)
• @design.estate/dees-domtools — DOM utilities

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the LICENSE file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

Company Information

Task Venture Capital GmbH Registered at District Court Bremen HRB 35230 HB, Germany

For any legal inquiries or further information, please contact us via email at hello@task.vc.

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.