webssh2_client 2.0.0-alpha.1 → 2.0.0-alpha.11

package/README.md

@@ -60,11 +60,27 @@ For server setup instructions, refer to the [WebSSH2 server documentation](https
 ## Client Features
 
 - Web-based SSH client with xterm.js terminal emulation
+- **Terminal Search Functionality:**
+  - Real-time search with live match highlighting
+  - Case-sensitive and regex search options
+  - Whole word matching
+  - Match counter (current/total)
+  - OS-aware keyboard shortcuts (Ctrl+F on Windows/Linux, ⌘F on macOS)
+  - Navigation with Enter/Shift+Enter or arrow buttons
+  - F3/Shift+F3 for quick match navigation
+- **Advanced Clipboard Integration:**
+  - Auto-copy on selection (similar to terminals like tmux or PuTTY, configurable)
+  - Middle-click paste support (configurable)
+  - Keyboard shortcuts: Ctrl+Shift+C/V (Windows/Linux) or Cmd+Shift+C/V (macOS)
+  - Browser compatibility detection with fallback mechanisms
+  - Visual feedback with toast notifications
+  - All features can be toggled in Terminal Settings
 - Customizable terminal settings:
   - Font size and family
   - Color schemes
   - Cursor behavior
   - Scrollback buffer size
+  - Clipboard behavior controls
 - Session logging with download capability
 - Copy and paste functionality
 - Terminal mouse support
@@ -221,13 +237,20 @@ For backward compatibility, the original `headerBackground` parameter is still s
 
 ```
 # Solid Colors
-bg-red-600, bg-blue-500, bg-green-500, bg-yellow-500, bg-purple-500
-bg-slate-700, bg-gray-800
+bg-red-500, bg-red-600, bg-blue-500, bg-blue-600, bg-green-500, bg-yellow-500
+bg-purple-500, bg-pink-500, bg-indigo-500, bg-cyan-500, bg-emerald-500, bg-slate-700
 
-# Gradients (Direction + Colors)
-bg-gradient-to-r from-red-600 to-red-700
-bg-gradient-to-br from-purple-500 via-pink-500 to-yellow-400
-bg-gradient-to-tl from-blue-400 to-cyan-500
+# Gradients (All 8 Directions Available)
+bg-gradient-to-r, bg-gradient-to-l, bg-gradient-to-t, bg-gradient-to-b
+bg-gradient-to-tr, bg-gradient-to-tl, bg-gradient-to-br, bg-gradient-to-bl
+
+# Color Ranges (from/to/via)
+from-red-500 to from-red-700, from-blue-500 to from-blue-700
+from-green-500 to from-green-700, from-yellow-400 to from-yellow-500
+from-orange-400 to from-orange-500, from-purple-500 to from-purple-600
+from-indigo-500 to from-indigo-600, from-pink-500 to from-pink-600
+from-cyan-400 to from-cyan-500, from-emerald-500, from-teal-500, from-slate-700
+via-yellow-500, via-pink-500, via-purple-500, via-blue-500
 ```
 
 **📝 Text Styling**
@@ -235,7 +258,8 @@ bg-gradient-to-tl from-blue-400 to-cyan-500
 ```
 # Sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl
 # Weights: font-normal, font-medium, font-semibold, font-bold, font-black
-# Colors: text-white, text-black, text-yellow-100, text-red-100, text-blue-100
+# Colors: text-white, text-black, text-yellow-100, text-blue-100, text-red-100, text-green-100, text-gray-100
+# Alignment: text-center, text-left
 
 # Examples
 text-2xl font-bold text-white
@@ -249,6 +273,7 @@ text-4xl font-black text-yellow-100
 # Available: h-4, h-5, h-6, h-7, h-8, h-10, h-12, h-14, h-16
 # Default was h-6 (24px), now customizable
 
+h-5     # Very compact header
 h-8     # Compact header
 h-12    # Standard header
 h-16    # Prominent header
@@ -262,22 +287,26 @@ animate-pulse    # Pulsing effect for alerts
 animate-bounce   # Bouncing for urgent notifications
 
 # Shadows
-shadow-md, shadow-lg, shadow-xl
+shadow, shadow-md, shadow-lg, shadow-xl
 
 # Borders
-border-2 border-white border-dashed
-rounded-lg, rounded-xl
+border, border-2, border-4
+border-red-500, border-blue-500, border-white
+border-dashed, border-solid
+
+# Border Radius
+rounded, rounded-lg, rounded-xl
 ```
 
 **📍 Layout & Positioning**
 
 ```
 # Text Alignment
-text-left, text-center, text-right
+text-left, text-center
 
-# Spacing
-px-4, px-6 (horizontal padding)
-py-2, py-3 (vertical padding)
+# Spacing (Padding)
+px-2, px-4, px-6 (horizontal padding)
+py-1, py-2, py-3 (vertical padding)
 
 # Flexbox (for complex layouts)
 flex items-center justify-center
@@ -317,10 +346,10 @@ bg-purple-600 rounded-lg h-10 font-semibold
 
 **⚡ Quick Reference:**
 
-- **Colors**: red, blue, green, yellow, purple, pink, cyan, emerald, slate, gray
-- **Shades**: 400 (lighter), 500 (medium), 600 (darker), 700 (darkest common)
+- **Solid Colors**: red-500/600, blue-500/600, green-500, yellow-500, purple-500, pink-500, indigo-500, cyan-500, emerald-500, slate-700
+- **Gradient Colors**: Full range 400-700 for red/blue/green, 400-500 for yellow/orange, 500-600 for purple/indigo/pink, etc.
 - **Text sizes**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl
-- **Heights**: 4-16 (h-4 = 16px, h-16 = 64px)
+- **Heights**: 4, 5, 6, 7, 8, 10, 12, 14, 16 (h-4 = 16px, h-16 = 64px)
 - **Combine freely**: `bg-blue-500 h-12 text-xl font-bold animate-pulse shadow-lg`
 
 ##### Styling System Features
@@ -338,7 +367,7 @@ The system automatically detects whether you're using:
 - **Layout:** Heights, padding, margins, flexbox
 - **Borders:** Styles, colors, radius
 - **Effects:** Shadows, animations
-- **Bundle Optimized:** Curated safelist keeps CSS file size reasonable (~38KB)
+- **Bundle Optimized:** Curated safelist keeps CSS file size reasonable (~33KB)
 
 **Backward Compatibility:**
 
@@ -346,6 +375,53 @@ The system automatically detects whether you're using:
 - Mixed usage supported (header + headerBackground or headerStyle)
 - Graceful fallback to CSS for non-Tailwind values
 
+### Clipboard Settings
+
+The WebSSH2 client includes comprehensive clipboard integration. All clipboard features can be configured through the Terminal Settings modal (accessible from the menu) or via localStorage:
+
+#### Features
+
+1. **Auto-copy on Selection**: Automatically copies selected text to the system clipboard when you select text with your mouse (similar to tmux or PuTTY)
+2. **Middle-click Paste**: Paste clipboard contents by middle-clicking in the terminal
+3. **Keyboard Shortcuts**: Use Ctrl+Shift+C to copy and Ctrl+Shift+V to paste (Cmd+Shift+C/V on macOS)
+
+#### Configuration
+
+Clipboard settings are stored in localStorage under `webssh2.settings.global` and can be toggled via the Terminal Settings modal:
+
+- `clipboardAutoSelectToCopy` (default: `true`) - Enable/disable auto-copy on selection
+- `clipboardEnableMiddleClickPaste` (default: `true`) - Enable/disable middle-click paste
+- `clipboardEnableKeyboardShortcuts` (default: `true`) - Enable/disable keyboard shortcuts
+
+#### Browser Compatibility
+
+The clipboard integration includes:
+
+- Automatic detection of browser clipboard API support
+- Fallback mechanisms for older browsers
+- Security context validation (HTTPS/localhost required)
+- Browser-specific warnings and guidance
+- Visual feedback via toast notifications for clipboard operations
+
+#### Programmatic Configuration
+
+You can also configure clipboard settings programmatically:
+
+```javascript
+// Read current settings
+const settings = JSON.parse(
+  localStorage.getItem('webssh2.settings.global') || '{}'
+)
+
+// Update clipboard settings
+settings.clipboardAutoSelectToCopy = false // Disable auto-copy
+settings.clipboardEnableMiddleClickPaste = true // Enable middle-click
+settings.clipboardEnableKeyboardShortcuts = true // Enable shortcuts
+
+// Save settings
+localStorage.setItem('webssh2.settings.global', JSON.stringify(settings))
+```
+
 ### Configuration Object
 
 You can configure the client by setting `window.webssh2Config`:

package/client/index.js

@@ -1,12 +1,14 @@
 // client
 // client/index.ts
-import path from 'path';
-import { readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const packageJson = JSON.parse(readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+import path from 'path'
+import { readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const packageJson = JSON.parse(
+  readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')
+)
 export default {
-    getPublicPath: () => path.join(__dirname, 'public'),
-    version: packageJson.version
-};
+  getPublicPath: () => path.join(__dirname, 'public'),
+  version: packageJson.version
+}

package/client/public/client.htm

@@ -1,4 +1,4 @@
-<!-- Version Version 2.0.0-alpha.1 - 2025-09-07T02:20:37.207Z - 5a009ff -->
+<!-- Version Version 2.0.0-alpha.11 - 2025-09-14T11:14:13.216Z - 7b09a15 -->
 <!-- webssh2-client -->
 <!-- /client/src/client.htm -->
 <!DOCTYPE html>
@@ -14,6 +14,9 @@
         color: #f5f5f5 !important;
       }
     </style>
+    <script>
+      window.webssh2Config = null;
+    </script>
     <script type="module" crossorigin src="./webssh2.bundle.js"></script>
     <link rel="stylesheet" crossorigin href="./webssh2.css">
   </head>