v3.36.0

changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2026-01-12 - 3.36.0 - feat(eco-view-peripherals)
+encapsulate networkRanges as internal @state and add public getter/setter methods
+
+- Replaced @property({ type: Array }) with @state() for networkRanges to treat it as internal reactive state.
+- Added setNetworkRanges(ranges: INetworkRange[]) and getNetworkRanges(): INetworkRange[] to provide a controlled public API for updating and reading network ranges.
+- Methods use array spread to return/copy arrays, preventing external mutation of internal state.
+- Added JSDoc comments for the new methods.
+
+## 2026-01-12 - 3.35.0 - feat(peripherals)
+Add peripherals settings panel with network range management, network scanning, and manual device probe; update peripheral types and adjust UI/styling; overhaul README with expanded docs, quick start, and updated company/contact information
+
+- Add 'settings' peripheral category and new INetworkRange type; change IPeripheralDevice.type to exclude 'settings' to separate settings metadata from actual devices
+- Implement network range management UI: add/remove ranges, display network list, scan networks (with isScanning state) and related controls
+- Add "Add Device by IP" probe workflow and input UI to allow manual device discovery by IP
+- Introduce new styles and header/button UI (settings-section, icon-button, network-list/network-item, etc.) for eco-view-peripherals
+- Adjust categoryLabels type to exclude 'settings' to keep device grouping consistent
+- Major README rewrite: expanded features list, installation examples (pnpm/npm), quick start code samples, developer commands, and updated company information to Task Venture Capital GmbH with new contact email
+
 ## 2026-01-12 - 3.34.4 - fix(catalog)
 no changes (empty diff) — no files modified
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecobridge.xyz/catalog",
-  "version": "3.34.4",
+  "version": "3.36.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

readme.md

@@ -1,77 +1,434 @@
 # @ecobridge.xyz/catalog
 
-A web component catalog for building ecobridge application interfaces. Built on top of `@design.estate/dees-catalog` and extending it with specialized components for the ecobridge ecosystem.
+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.
 
-## Installation
+## Issue Reporting and Security
+
+For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://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/](https://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
 
 ```bash
 pnpm add @ecobridge.xyz/catalog
 ```
 
-## Components
+```bash
+npm install @ecobridge.xyz/catalog
+```
 
-### EcoApplauncher
+## 🚀 Quick Start
-
-The main application launcher component providing a complete desktop-like interface with:
-
-- Login view with customizable authentication
-- Home view with app grid
-- Top bar with date, search, notifications, and user info
-- Status bar with network, battery, sound, and keyboard indicators
-- Power menu with shutdown, restart, sleep, and lock options
 
 ```typescript
 import { EcoApplauncher } from '@ecobridge.xyz/catalog';
 
 const launcher = document.createElement('eco-applauncher');
-launcher.mode = 'login'; // or 'home'
+launcher.mode = 'home';
 launcher.apps = [
-  { name: 'Settings', icon: 'lucide:settings', action: () => openSettings() },
+  { name: 'Settings', icon: 'lucide:settings', action: () => console.log('Settings') },
-  { name: 'Files', icon: 'lucide:folder', action: () => openFiles() },
+  { name: 'Files', icon: 'lucide:folder', action: () => console.log('Files') },
+  { name: 'Terminal', icon: 'lucide:terminal', action: () => console.log('Terminal') },
 ];
 document.body.appendChild(launcher);
 ```
 
-### Sub-Components
+## 🧩 Components
 
-| Component | Description |
+### EcoApplauncher
-|-----------|-------------|
+
-| `EcoApplauncherWifimenu` | WiFi network selection menu |
+The main application launcher — a complete desktop-like interface with authentication, app grid, and system controls.
-| `EcoApplauncherBatterymenu` | Battery status and power mode menu |
+
-| `EcoApplauncherSoundmenu` | Audio device and volume control menu |
+```typescript
-| `EcoApplauncherKeyboard` | Virtual on-screen keyboard |
+import { EcoApplauncher, type IAppIcon, type ILoginConfig } from '@ecobridge.xyz/catalog';
-| `EcoApplauncherPowermenu` | Power actions menu (shutdown, restart, etc.) |
+
+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.
+
+```typescript
+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.
+
+```typescript
+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.
+
+```typescript
+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.
+
+```typescript
+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.
+
+```typescript
+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
 
-A subtle animated screensaver component with flowing geometric patterns.
+An elegant screensaver with a floating time display that changes color on bounce — reminiscent of classic DVD screensavers but with modern design sensibility.
 
 ```typescript
 import { EcoScreensaver } from '@ecobridge.xyz/catalog';
 
 // Show screensaver
-await EcoScreensaver.show();
+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);
 ```
 
-## Development
+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.
+
+```typescript
+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.
+
+```typescript
+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.
+
+```typescript
+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.
+
+```typescript
+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
+
+```css
+/* 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
 
 ```bash
 # Install dependencies
 pnpm install
 
-# Watch mode for development
+# Start development server with hot reload
 pnpm run watch
 
-# Build
+# 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](./LICENSE) file.
@@ -80,12 +437,15 @@ This repository contains open-source code licensed under the MIT License. A copy
 
 ### Trademarks
 
-This project is owned and maintained by Lossless GmbH. The names and logos associated with Lossless GmbH and any related products or services are trademarks of Lossless GmbH or third parties, and are not included within the scope of the MIT license granted herein.
+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
 
-Lossless GmbH
+Task Venture Capital GmbH
+Registered at District Court Bremen HRB 35230 HB, Germany
 
-For any legal inquiries or further information, please contact us via the official channels.
+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 Lossless GmbH of any derivative works.
+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.

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@ecobridge.xyz/catalog',
-  version: '3.34.4',
+  version: '3.36.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/views/eco-view-peripherals/eco-view-peripherals.ts

@@ -31,14 +31,15 @@ export type TPeripheralCategory =
   | 'power'
   | 'cameras'
   | 'streaming'
-  | 'usb';
+  | 'usb'
+  | 'settings';
 
 export type TConnectionType = 'network' | 'usb' | 'bluetooth';
 
 export interface IPeripheralDevice {
   id: string;
   name: string;
-  type: TPeripheralCategory;
+  type: Exclude<TPeripheralCategory, 'settings'>;
   connectionType: TConnectionType;
   status: 'online' | 'offline' | 'busy' | 'error';
   ip?: string;
@@ -47,6 +48,11 @@ export interface IPeripheralDevice {
   isDefault?: boolean;
 }
 
+export interface INetworkRange {
+  cidr: string;
+  label?: string;
+}
+
 @customElement('eco-view-peripherals')
 export class EcoViewPeripherals extends DeesElement {
   public static demo = demo;
@@ -339,15 +345,214 @@ export class EcoViewPeripherals extends DeesElement {
         background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 20%)')};
         color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
       }
+
+      /* Header buttons */
+      .header-buttons {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .icon-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        border-radius: 8px;
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .icon-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(240 5% 18%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(240 5% 35%)')};
+      }
+
+      /* Settings panel styles */
+      .settings-section {
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+        border-radius: 12px;
+        padding: 24px;
+        margin-bottom: 24px;
+      }
+
+      .settings-title {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+      }
+
+      .settings-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+        margin-bottom: 16px;
+      }
+
+      .network-input-group {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .network-input {
+        flex: 1;
+        padding: 10px 14px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+        font-size: 14px;
+        font-family: ui-monospace, monospace;
+      }
+
+      .network-input::placeholder {
+        color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 45%)')};
+      }
+
+      .network-input:focus {
+        outline: none;
+        border-color: hsl(217 91% 60%);
+      }
+
+      .add-button {
+        padding: 10px 16px;
+        background: hsl(217 91% 60%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        transition: background 0.15s ease;
+      }
+
+      .add-button:hover {
+        background: hsl(217 91% 55%);
+      }
+
+      .network-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .network-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
+        border-radius: 8px;
+      }
+
+      .network-item-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .network-item-icon {
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+
+      .network-item-cidr {
+        font-family: ui-monospace, monospace;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+      }
+
+      .network-item-label {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+      }
+
+      .remove-button {
+        padding: 6px;
+        background: transparent;
+        border: none;
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .remove-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 72% 95%)', 'hsl(0 72% 30% / 0.2)')};
+        color: hsl(0 72% 51%);
+      }
+
+      .scan-networks-button {
+        margin-top: 16px;
+        padding: 12px 20px;
+        background: hsl(142 71% 45%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: background 0.15s ease;
+      }
+
+      .scan-networks-button:hover {
+        background: hsl(142 71% 40%);
+      }
+
+      .scan-networks-button:disabled {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        cursor: not-allowed;
+      }
+
+      .empty-networks {
+        padding: 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
+        font-size: 14px;
+      }
     `,
   ];
 
   @property({ type: String })
   accessor activeCategory: TPeripheralCategory = 'all';
 
+  @state()
+  accessor networkRanges: INetworkRange[] = [];
+
   @state()
   accessor isScanning = false;
 
+  /**
+   * Set the initial network ranges (e.g., loaded from backend)
+   */
+  public setNetworkRanges(ranges: INetworkRange[]): void {
+    this.networkRanges = [...ranges];
+  }
+
+  /**
+   * Get the current network ranges
+   */
+  public getNetworkRanges(): INetworkRange[] {
+    return [...this.networkRanges];
+  }
+
+  @state()
+  accessor newNetworkInput = '';
+
+  @state()
+  accessor newDeviceIpInput = '';
+
   @state()
   accessor devices: IPeripheralDevice[] = [
     // Mock printers
@@ -577,6 +782,17 @@ export class EcoViewPeripherals extends DeesElement {
           },
         ],
       },
+      {
+        name: 'Configuration',
+        iconName: 'lucide:settings',
+        items: [
+          {
+            key: 'settings',
+            iconName: 'lucide:network',
+            action: () => this.activeCategory = 'settings',
+          },
+        ],
+      },
     ];
   }
 
@@ -609,6 +825,7 @@ export class EcoViewPeripherals extends DeesElement {
       cameras: 'Cameras',
       streaming: 'Streaming Devices',
       usb: 'USB Devices',
+      settings: 'Network Settings',
     };
     return titles[this.activeCategory];
   }
@@ -624,12 +841,13 @@ export class EcoViewPeripherals extends DeesElement {
       cameras: 'Webcams and security cameras',
       streaming: 'Apple TV, Chromecast, and streaming devices',
       usb: 'USB storage and connected devices',
+      settings: 'Configure network ranges and add devices manually',
     };
     return descriptions[this.activeCategory];
   }
 
   private getDeviceIcon(device: IPeripheralDevice): string {
-    const icons: Record<TPeripheralCategory, string> = {
+    const icons: Record<Exclude<TPeripheralCategory, 'settings'>, string> = {
       all: 'lucide:monitor',
       printers: 'lucide:printer',
       scanners: 'lucide:scan',
@@ -692,6 +910,74 @@ export class EcoViewPeripherals extends DeesElement {
     }));
   }
 
+  private handleAddNetwork(): void {
+    const cidr = this.newNetworkInput.trim();
+    if (!cidr) return;
+
+    // Validate CIDR format (basic validation)
+    const cidrRegex = /^(\d{1,3}\.){3}\d{1,3}\/\d{1,2}$/;
+    if (!cidrRegex.test(cidr)) {
+      // Could show error, for now just return
+      return;
+    }
+
+    // Check for duplicates
+    if (this.networkRanges.some(r => r.cidr === cidr)) {
+      this.newNetworkInput = '';
+      return;
+    }
+
+    this.networkRanges = [...this.networkRanges, { cidr }];
+    this.newNetworkInput = '';
+
+    this.dispatchEvent(new CustomEvent('networks-change', {
+      detail: { networks: this.networkRanges },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleRemoveNetwork(cidr: string): void {
+    this.networkRanges = this.networkRanges.filter(r => r.cidr !== cidr);
+
+    this.dispatchEvent(new CustomEvent('networks-change', {
+      detail: { networks: this.networkRanges },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleAddDeviceByIp(): void {
+    const ip = this.newDeviceIpInput.trim();
+    if (!ip) return;
+
+    // Validate IP format
+    const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
+    if (!ipRegex.test(ip)) {
+      return;
+    }
+
+    this.newDeviceIpInput = '';
+
+    // Dispatch event to scan this specific IP
+    this.dispatchEvent(new CustomEvent('scan-ip', {
+      detail: { ip },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleScanNetworks(): void {
+    if (this.isScanning || this.networkRanges.length === 0) return;
+
+    this.isScanning = true;
+    this.dispatchEvent(new CustomEvent('scan-networks', {
+      detail: { networks: this.networkRanges.map(r => r.cidr) },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="peripherals-container">
@@ -708,6 +994,10 @@ export class EcoViewPeripherals extends DeesElement {
   }
 
   private renderContent(): TemplateResult {
+    if (this.activeCategory === 'settings') {
+      return this.renderSettings();
+    }
+
     const devices = this.getFilteredDevices();
 
     return html`
@@ -716,14 +1006,23 @@ export class EcoViewPeripherals extends DeesElement {
           <div class="panel-title">${this.getCategoryTitle()}</div>
           <div class="panel-description">${this.getCategoryDescription()}</div>
         </div>
-        <button
+        <div class="header-buttons">
-          class="scan-button ${this.isScanning ? 'scanning' : ''}"
+          <button
-          @click=${this.handleScan}
+            class="icon-button"
-          ?disabled=${this.isScanning}
+            @click=${() => this.activeCategory = 'settings'}
-        >
+            title="Network Settings"
-          <dees-icon .icon=${this.isScanning ? 'lucide:loader2' : 'lucide:radar'} .iconSize=${16}></dees-icon>
+          >
-          ${this.isScanning ? 'Scanning...' : 'Scan for Devices'}
+            <dees-icon .icon=${'lucide:settings'} .iconSize=${18}></dees-icon>
-        </button>
+          </button>
+          <button
+            class="scan-button ${this.isScanning ? 'scanning' : ''}"
+            @click=${this.handleScan}
+            ?disabled=${this.isScanning}
+          >
+            <dees-icon .icon=${this.isScanning ? 'lucide:loader2' : 'lucide:radar'} .iconSize=${16}></dees-icon>
+            ${this.isScanning ? 'Scanning...' : 'Scan for Devices'}
+          </button>
+        </div>
       </div>
 
       ${this.activeCategory === 'all'
@@ -733,6 +1032,93 @@ export class EcoViewPeripherals extends DeesElement {
     `;
   }
 
+  private renderSettings(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-header-left">
+          <div class="panel-title">${this.getCategoryTitle()}</div>
+          <div class="panel-description">${this.getCategoryDescription()}</div>
+        </div>
+      </div>
+
+      <!-- Network Ranges Section -->
+      <div class="settings-section">
+        <div class="settings-title">Network Ranges</div>
+        <div class="settings-description">
+          Add network ranges in CIDR notation to scan for devices (e.g., 192.168.1.0/24)
+        </div>
+
+        <div class="network-input-group">
+          <input
+            type="text"
+            class="network-input"
+            placeholder="192.168.1.0/24"
+            .value=${this.newNetworkInput}
+            @input=${(e: InputEvent) => this.newNetworkInput = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleAddNetwork()}
+          />
+          <button class="add-button" @click=${this.handleAddNetwork}>
+            <dees-icon .icon=${'lucide:plus'} .iconSize=${16}></dees-icon>
+            Add
+          </button>
+        </div>
+
+        ${this.networkRanges.length > 0 ? html`
+          <div class="network-list">
+            ${this.networkRanges.map(range => html`
+              <div class="network-item">
+                <div class="network-item-info">
+                  <dees-icon class="network-item-icon" .icon=${'lucide:network'} .iconSize=${18}></dees-icon>
+                  <span class="network-item-cidr">${range.cidr}</span>
+                  ${range.label ? html`<span class="network-item-label">${range.label}</span>` : ''}
+                </div>
+                <button class="remove-button" @click=${() => this.handleRemoveNetwork(range.cidr)}>
+                  <dees-icon .icon=${'lucide:x'} .iconSize=${16}></dees-icon>
+                </button>
+              </div>
+            `)}
+          </div>
+
+          <button
+            class="scan-networks-button"
+            @click=${this.handleScanNetworks}
+            ?disabled=${this.isScanning}
+          >
+            <dees-icon .icon=${this.isScanning ? 'lucide:loader2' : 'lucide:radar'} .iconSize=${16}></dees-icon>
+            ${this.isScanning ? 'Scanning...' : 'Scan All Networks'}
+          </button>
+        ` : html`
+          <div class="empty-networks">
+            No network ranges configured. Add a range above to enable network scanning.
+          </div>
+        `}
+      </div>
+
+      <!-- Add Device by IP Section -->
+      <div class="settings-section">
+        <div class="settings-title">Add Device by IP</div>
+        <div class="settings-description">
+          Add a specific device by entering its IP address directly
+        </div>
+
+        <div class="network-input-group">
+          <input
+            type="text"
+            class="network-input"
+            placeholder="192.168.1.100"
+            .value=${this.newDeviceIpInput}
+            @input=${(e: InputEvent) => this.newDeviceIpInput = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleAddDeviceByIp()}
+          />
+          <button class="add-button" @click=${this.handleAddDeviceByIp}>
+            <dees-icon .icon=${'lucide:plus'} .iconSize=${16}></dees-icon>
+            Probe Device
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
   private renderGroupedDevices(devices: IPeripheralDevice[]): TemplateResult {
     const groups = new Map<TPeripheralCategory, IPeripheralDevice[]>();
 
@@ -742,7 +1128,7 @@ export class EcoViewPeripherals extends DeesElement {
       groups.set(device.type, existing);
     }
 
-    const categoryLabels: Record<TPeripheralCategory, string> = {
+    const categoryLabels: Record<Exclude<TPeripheralCategory, 'settings'>, string> = {
       all: 'All',
       printers: 'Printers',
       scanners: 'Scanners',