pulp-image 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Changelog
+
+All notable changes to Pulp Image will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
+
+---
+
+## [Unreleased]
+
+See [Roadmap](ROADMAP.md) for upcoming features (v0.2.0: UI Redesign, Rotate, Flip, Grayscale, Auto-Orient).
+
+---
+
+## [0.1.8] - 2026-01-13
+
+### Changed
+- Streamlined README with quick links and features grid
+- Added public roadmap and changelog
+- Updated project slogan
+
+---
+
+## [0.1.7] - 2026-01-12
+
+### Added
+- Auto suffix option to add dimensions to filenames
+- Custom suffix support for output filenames
+- Rename patterns with tokens {name}, {ext}, {index} (UI only)
+
+### Fixed
+- Minor bug fixes and improvements
+
+---
+
+## [0.1.0] - Initial Release
+
+### Added
+- **CLI Tool**: Full command-line interface for image processing
+- **Browser UI**: Launch with `pulp ui`, works offline, no uploads
+- **Format Conversion**: PNG, JPG, WebP, AVIF, GIF, TIFF
+- **Resize**: By width, height, or exact dimensions
+- **Quality Control**: Compression quality 1-100
+- **Lossless Mode**: For WebP and AVIF
+- **Transparency Handling**: Flatten with custom background color
+- **Batch Processing**: Process entire folders
+- **Custom Output Directory**: Save files anywhere
+- **Overwrite Protection**: Skip or overwrite existing files
+- **Delete Originals**: Remove source files after processing (CLI only)
+
+---
+
+*For upcoming features, see the [Roadmap](ROADMAP.md).*

package/README.md

@@ -1,303 +1,92 @@
 # pulp-image
 
-A powerful, safety-first CLI tool for processing images with resize, format conversion, and optimization.
+Full-featured image processing CLI with a browser UI. 100% local.
 
 ![License](https://img.shields.io/badge/license-MIT-green)
 ![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)
 
-## Features
-
-- 🖼️ **Resize images** with aspect ratio preservation
-- 🔄 **Convert formats** (PNG, JPG, WebP, AVIF)
-- 📦 **Batch process** entire directories
-- 🛡️ **Safety-first** defaults (no overwrites, no accidental deletions)
-- 📊 **Detailed statistics** and summary reports
-- 🎨 **Transparency handling** with customizable backgrounds
-- ⚡ **Optimization** with quality and lossless options
-
-## Installation
+**[Website](https://pulp.run)** · **[CLI Docs](https://pulp.run/cli.html)** · **[UI Docs](https://pulp.run/ui.html)** · **[Roadmap](ROADMAP.md)** · **[Changelog](CHANGELOG.md)**
 
-Install pulp-image globally using npm:
+---
 
-```bash
-npm install -g pulp-image
-```
-
-This is a global CLI. Installing with `-g` makes the `pulp` command available system-wide.
-
-### Requirements
-
-- Node.js >= 18.0.0
-- npm (comes with Node.js)
-
-## Quick Start
+## Features
 
-```bash
-# Resize an image
-pulp image.png --width 800
+| | | |
+|:--|:--|:--|
+| 🖼️ **Resize** | 🔄 **Convert Formats** | 📦 **Batch Process** |
+| 🎨 **Transparency** | ⚡ **Quality Control** | 🛡️ **Safety-First** |
+| 🌐 **Browser UI** | 📁 **Custom Output** | 🏷️ **Auto Naming** |
 
-# Convert format
-pulp image.png --format webp
+---
 
-# Process all images in a directory
-pulp ./images --format webp --out ./output
-```
+## Installation
 
-## Usage
+### CLI (npm)
 
 ```bash
-pulp [input] [options]
+npm install -g pulp-image
 ```
 
-### Arguments
-
-- `[input]` - Input file or directory (required)
-
-### Common Options
-
-#### Resize
-- `-w, --width <number>` - Output width in pixels (preserves aspect ratio if height not specified)
-- `-h, --height <number>` - Output height in pixels (preserves aspect ratio if width not specified)
-
-#### Format
-- `-f, --format <format>` - Output format: `png`, `jpg`, `webp`, or `avif`
-
-#### Output
-- `-o, --out <dir>` - Output directory (default: `./pulp-image-results`)
-  - **Why use --out?** This keeps your original files safe and organizes processed images in a dedicated folder. The output directory is created automatically if it doesn't exist.
+Requires Node.js >= 18.0.0
 
-#### Quality
-- `--quality <number>` - Quality for lossy formats (1-100). Defaults: JPG=80, WebP=80, AVIF=50
-- `--lossless` - Use lossless compression where supported (PNG, WebP, AVIF)
+### Portable UI (No Install)
 
-**Compression Behavior:**
-- **PNG**: Always lossless (no quality setting available)
-- **JPG**: Always lossy, default quality 80 (does not support lossless)
-- **WebP**: Lossy by default (quality 80), can use `--lossless` for lossless compression
-- **AVIF**: Lossy by default (quality 50), can use `--lossless` for lossless compression
+Download the portable UI for your platform. No Node.js or npm required:
 
-**Note:** Resize operations do NOT affect compression. Resizing only changes image dimensions. Compression/quality is determined by the format and quality settings.
+**[Download Latest Release](https://github.com/rebelliongeeks/pulp-image/releases/latest)**
 
-#### Transparency
-- `--background <color>` - Background color for flattening transparency (hex format, default: `#ffffff`)
-- `--alpha-mode <mode>` - Alpha handling: `flatten` (default) or `error`
+---
 
-#### Safety
-- `--overwrite` - Overwrite existing output files (default: skip existing files)
-- `--delete-original` - Delete original files after successful processing (only if paths differ)
-
-#### Other
-- `-v, --verbose` - Show detailed per-file processing information
-- `--help` - Display help information
-- `--version` - Show version number
-
-## Examples
-
-### Resize Images
+## Quick Start
 
 ```bash
-# Resize by width (preserves aspect ratio)
+# Resize an image
 pulp image.png --width 800
 
-# Resize by height (preserves aspect ratio)
-pulp image.png --height 600
-
-# Resize to exact dimensions
-pulp image.png --width 800 --height 600
-```
-
-### Format Conversion
-
-```bash
-# Convert PNG to WebP (preserves transparency)
+# Convert to WebP
 pulp image.png --format webp
 
-# Convert PNG to JPG (flattens transparency to white)
-pulp image.png --format jpg
-
-# Convert with custom background color
-pulp image.png --format jpg --background "#ff0000"
-
-# Convert to lossless WebP
-pulp image.png --format webp --lossless
-```
-
-### Suffix Options
-
-```bash
-# Auto suffix (adds size to filename)
-pulp image.png --width 800 --auto-suffix
-# Output: image-800w.png
-
-# Custom suffix
-pulp image.png --suffix "optimized"
-# Output: image-optimized.png
-
-# Combined suffixes (auto first, custom second)
-pulp image.png --width 800 --auto-suffix --suffix "thumb"
-# Output: image-800w-thumb.png
-```
-
-### Batch Processing
-
-```bash
-# Process all images in a directory
-pulp ./images --format webp --out ./output
-
-# Resize all images with auto-suffix
-pulp ./images --width 800 --auto-suffix --out ./output
-
-# Verbose mode (shows per-file details)
-pulp ./images --format webp --out ./output --verbose
-
-# Overwrite existing files
-pulp ./images --format webp --out ./output --overwrite
-```
-
-### Safety Features
-
-```bash
-# Safe processing (output to separate directory)
-pulp image.png --format webp --out ./pulp-image-results
-
-# Overwrite existing output files
-pulp image.png --format webp --out ./pulp-image-results --overwrite
-
-# Delete original after successful processing
-pulp image.png --format webp --out ./pulp-image-results --delete-original
-```
-
-## Safety Features
-
-pulp-image is designed with safety in mind:
-
-- **No overwrites by default** - Existing output files are skipped unless `--overwrite` is used
-- **Delete original safety** - Only deletes after successful processing and only if input/output paths differ
-- **Same path protection** - Prevents accidental in-place overwrites
-- **Batch resilience** - Continues processing even if individual files fail
-- **Clear error messages** - Helpful guidance when something goes wrong
-
-## Output Directory (--out)
-
-The `--out` option specifies where processed images are saved. Here's why it's useful:
-
-- **Keeps originals safe** - Your source files remain untouched
-- **Organizes outputs** - All processed images in one place
-- **Prevents accidents** - No risk of overwriting originals
-- **Default location** - Uses `./pulp-image-results` if not specified
-- **Auto-creation** - Creates the directory if it doesn't exist
-
-Example:
-```bash
-# Process images and save to ./output directory
+# Batch process a folder
 pulp ./images --format webp --out ./output
 
-# Your originals in ./images remain safe
-# Processed images go to ./output
-```
-
-## Supported Formats
-
-### Input Formats
-- PNG
-- JPG/JPEG
-- WebP
-- AVIF
-
-### Output Formats
-- PNG
-- JPG
-- WebP
-- AVIF
-
-## Compression & Quality
-
-### Default Compression Behavior
-
-Each format has different default compression behavior:
-
-- **PNG**: Always lossless (no quality setting available)
-- **JPG**: Always lossy, default quality 80 (does not support lossless)
-- **WebP**: Lossy by default (quality 80), supports lossless with `--lossless`
-- **AVIF**: Lossy by default (quality 50), supports lossless with `--lossless`
-
-**Important:** Resize operations do NOT affect compression. Resizing only changes image dimensions. Compression/quality is determined by the format and quality settings.
-
-### Using Lossless Compression
+# High quality JPG
+pulp image.png --format jpg --quality 95
 
-```bash
 # Lossless WebP
 pulp image.png --format webp --lossless
-
-# Lossless AVIF
-pulp image.png --format avif --lossless
-
-# PNG is already lossless (no flag needed)
-pulp image.jpg --format png
 ```
 
-### Custom Quality Settings
+For all options, run `pulp --help` or see the [CLI documentation](https://pulp.run/cli.html).
 
-```bash
-# High quality JPG
-pulp image.png --format jpg --quality 95
-
-# Lower quality WebP (smaller file)
-pulp image.png --format webp --quality 60
-
-# Custom AVIF quality
-pulp image.png --format avif --quality 70
-```
-
-## Transparency Handling
+---
 
-When converting images with transparency to formats that don't support it (like JPG):
+## Browser UI
 
-- **Default behavior**: Flattens transparency onto white background
-- **Custom background**: Use `--background "#color"` to specify a color
-- **Error mode**: Use `--alpha-mode error` to fail instead of flattening
+Launch the browser-based interface:
 
-Example:
 ```bash
-# Flatten transparency to red background
-pulp image.png --format jpg --background "#ff0000"
-
-# Fail if transparency exists
-pulp image.png --format jpg --alpha-mode error
+pulp ui
 ```
 
-## Statistics and Reporting
+Opens at `http://localhost:3000`. All processing happens locally, no uploads.
 
-pulp-image provides detailed statistics:
+See the [UI documentation](https://pulp.run/ui.html) for details.
 
-- **Per-file stats**: Original size, final size, bytes saved, percent saved
-- **Batch summary**: Total files processed, total sizes, overall savings
-- **Skipped files**: Count and reasons (in verbose mode)
-- **Failed files**: Count and errors (in verbose mode)
+---
 
-Example output:
-```
-✓ Processed: 7 file(s)
-  Total original size: 10.07 MB
-  Total final size:    821.78 KB
-  Total saved:         9.26 MB (92.03%)
-```
+## Roadmap
 
-## Browser UI
-
-pulp-image includes a web-based interface for easy image processing:
+See the full [Roadmap](ROADMAP.md) for upcoming features.
 
-```bash
-pulp ui
-```
-
-This starts a local web server. Open your browser and navigate to:
-
-```
-http://localhost:3000
-```
+**Coming soon:**
+- UI Redesign with dark mode
+- Rotate, Flip, Grayscale
+- Blur, Sharpen, Normalize
+- Cropping & Visual Crop Tool
+- Watermarks
+- User Presets
 
-The browser UI provides a user-friendly interface for processing images with all the same features available in the CLI.
+---
 
 ## License
 
@@ -305,4 +94,4 @@ MIT
 
 ## Author
 
-Rebellion Geeks
+[Rebellion Geeks](https://github.com/rebelliongeeks)

package/ROADMAP.md

@@ -0,0 +1,133 @@
+# Roadmap
+
+> Full-featured image processing CLI with a browser UI. 100% local.
+
+---
+
+## ✅ v0.1.x (Current)
+
+| Feature | Description |
+|---------|-------------|
+| ~~**Format Conversion**~~ | ~~Convert between PNG, JPG, WebP, AVIF, GIF, TIFF~~ |
+| ~~**Resize**~~ | ~~Resize by width, height, or both with auto aspect ratio~~ |
+| ~~**Quality Control**~~ | ~~Adjust compression quality (1-100)~~ |
+| ~~**Lossless Mode**~~ | ~~Preserve full quality for WebP and AVIF~~ |
+| ~~**Transparency Handling**~~ | ~~Flatten transparent areas with custom background color~~ |
+| ~~**Custom Output Directory**~~ | ~~Save processed files to any folder~~ |
+| ~~**Auto Suffix**~~ | ~~Add dimensions to filename automatically~~ |
+| ~~**Rename Patterns**~~ | ~~Use tokens like {name}, {ext}, {index} for output names (UI)~~ |
+| ~~**Batch Processing**~~ | ~~Process entire folders at once~~ |
+| ~~**Delete Originals**~~ | ~~Remove source files after processing (CLI only)~~ |
+| ~~**Browser-Based UI**~~ | ~~Full-featured interface, works offline, no uploads~~ |
+
+---
+
+## 🚧 v0.2.0
+
+| Feature | Description |
+|---------|-------------|
+| **UI Redesign** | Modern tabbed interface with dark mode |
+| **Rotate** | Rotate images by 90°, 180°, 270°, or custom angle |
+| **Flip / Mirror** | Flip vertically or horizontally |
+| **Grayscale** | Convert images to black and white |
+| **Auto-Orient** | Fix photos that appear sideways or upside down |
+
+---
+
+## 📋 v0.3.0
+
+| Feature | Description |
+|---------|-------------|
+| **Blur** | Soften images with adjustable intensity |
+| **Sharpen** | Enhance detail and clarity |
+| **Normalize** | Auto-adjust contrast for better exposure |
+| **Brightness** | Adjust overall brightness |
+| **Saturation** | Adjust color intensity |
+| **Gamma Correction** | Adjust brightness curve |
+| **Hue Shift** | Rotate colors on the color wheel |
+| **Negate / Invert** | Invert all colors (negative effect) |
+| **Tint** | Apply color overlay |
+
+---
+
+## 📋 v0.4.0
+
+| Feature | Description |
+|---------|-------------|
+| **Trim Whitespace** | Auto-remove uniform borders from images |
+| **Crop by Coordinates** | Crop to specific pixel coordinates |
+| **Visual Crop Tool** | Drag-and-drop crop selection (UI) |
+| **Aspect Ratio Crop** | Crop to common ratios (16:9, 4:3, 1:1) |
+| **Blur Region** | Blur faces or sensitive areas for privacy |
+| **Pixelate Region** | Pixelate specific areas for censoring |
+
+---
+
+## 📋 v0.5.0
+
+| Feature | Description |
+|---------|-------------|
+| **Add Padding** | Add space around image with custom color |
+| **Add Border** | Add visible frame around image |
+
+---
+
+## 📋 v0.6.0
+
+| Feature | Description |
+|---------|-------------|
+| **Image Watermark** | Add logo or image overlay |
+| **Watermark Position** | Place in corners, center, or custom coordinates |
+| **Watermark Opacity** | Adjust transparency (0-100%) |
+| **Watermark Scale** | Size relative to image or absolute pixels |
+| **Watermark Tile** | Repeat watermark across entire image |
+
+---
+
+## 📋 v0.7.0
+
+| Feature | Description |
+|---------|-------------|
+| **Save Preset** | Save current settings as named preset |
+| **Load Preset** | Apply saved presets |
+| **Built-in Presets** | Ready-to-use presets (web, thumbnail, social media) |
+| **Export/Import Presets** | Share presets between devices or users |
+
+---
+
+## 📋 v0.8.0
+
+| Feature | Description |
+|---------|-------------|
+| **Multi-Format Export** | Export same image to multiple formats at once |
+| **Multi-Size Export** | Export same image at multiple sizes at once |
+| **Progressive JPEG** | Enable progressive loading (blurry to sharp) |
+| **PNG Compression** | Fine-tune PNG compression level |
+| **WebP/AVIF Effort** | Control encoding effort for smaller files |
+
+---
+
+## 🎯 v1.0.0 (Stable Release)
+
+- All features from v0.2.0 through v0.8.0 complete
+- Comprehensive documentation
+- Stable CLI (no breaking changes)
+
+---
+
+## 🔮 Future (v1.1.0+)
+
+These features may be added after the stable release:
+
+| Feature | Description |
+|---------|-------------|
+| **Preserve Metadata** | Keep original EXIF data instead of stripping |
+| **Custom ICC Profile** | Embed specific color profiles |
+| **Median Filter** | Reduce noise while preserving edges |
+| **Pure Black & White** | Convert to only black and white pixels (stencil effect) |
+| **Animated GIF/WebP** | Process animated images |
+| **Extract Frame** | Get single frame from animation |
+
+---
+
+*No fixed release dates. Features ship when ready.*

package/bin/pulp.js

@@ -26,7 +26,7 @@ const banner = getBanner(pkg.version);
 
 program
   .name('pulp')
-  .description('A CLI tool for processing images with resize, format conversion, and optimization')
+  .description('Full-featured image processing CLI with a browser UI. 100% local.')
   .version(pkg.version)  
   .addHelpText('before', chalk.cyan(banner))
   .argument('[input]', 'Input file or directory')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pulp-image",
-  "version": "0.1.7",
-  "description": "A CLI tool for processing images with resize, format conversion, and optimization",
+  "version": "0.1.8",
+  "description": "Full-featured image processing CLI with a browser UI. 100% local.",
   "type": "module",
   "main": "bin/pulp.js",
   "bin": {
@@ -15,7 +15,15 @@
     "resize",
     "convert",
     "optimize",
-    "cli"
+    "cli",
+    "ui",
+    "browser",
+    "local",
+    "batch",
+    "webp",
+    "avif",
+    "png",
+    "jpg"
   ],
   "author": "Rebellion Geeks",
   "license": "MIT",

package/ui/app.js

@@ -1222,28 +1222,49 @@ function setupHelpSubnav() {
   
   // Flag to temporarily disable scroll-based updates after click
   let isClickScrolling = false;
+  let clickedSectionId = null;
   
   // Navigation links - smooth scroll
   links.forEach(link => {
     link.addEventListener('click', (e) => {
       e.preventDefault();
+      
+      // IMMEDIATELY block scroll detection before anything else
+      isClickScrolling = true;
+      
       const targetId = link.getAttribute('href').slice(1);
       const target = document.getElementById(targetId);
       
       if (target) {
+        clickedSectionId = targetId;
+        
         // Set active immediately on click
         links.forEach(l => l.classList.remove('active'));
         link.classList.add('active');
         
-        // Disable scroll-based updates during animation
-        isClickScrolling = true;
-        
-        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        // Use requestAnimationFrame to ensure DOM update before scroll
+        requestAnimationFrame(() => {
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
         
         // Re-enable scroll updates after animation completes
         setTimeout(() => {
-          isClickScrolling = false;
-        }, 800);
+          // Force the clicked section to stay active after scroll settles
+          if (clickedSectionId) {
+            links.forEach(l => {
+              const id = l.getAttribute('href').slice(1);
+              l.classList.toggle('active', id === clickedSectionId);
+            });
+          }
+          // Small additional delay before allowing scroll detection again
+          setTimeout(() => {
+            isClickScrolling = false;
+            clickedSectionId = null;
+          }, 150);
+        }, 900);
+      } else {
+        // Reset if target not found
+        isClickScrolling = false;
       }
     });
   });
@@ -1256,21 +1277,32 @@ function setupHelpSubnav() {
     // Only track when help tab is visible
     if (!helpTab || !helpTab.classList.contains('active')) return;
     
-    // Update active nav link based on scroll position
+    // Find the section whose top is closest to (but not below) the viewport top
+    // This handles cases where sections can't scroll all the way to the top
     let currentSection = '';
-    const scrollOffset = 80; // Smaller offset for more accurate detection
+    let bestTop = -Infinity;
+    const threshold = 150; // How far below viewport top a section can be and still be "current"
     
     links.forEach(link => {
       const targetId = link.getAttribute('href').slice(1);
       const section = document.getElementById(targetId);
       if (section) {
         const rect = section.getBoundingClientRect();
-        if (rect.top <= scrollOffset) {
+        // Section is "in view" if its top is above the threshold
+        // Pick the one with the largest top value that's still <= threshold
+        // (i.e., the one closest to the top but still visible)
+        if (rect.top <= threshold && rect.top > bestTop) {
+          bestTop = rect.top;
           currentSection = targetId;
         }
       }
     });
     
+    // Fallback: if no section found, use first one
+    if (!currentSection && links.length > 0) {
+      currentSection = links[0].getAttribute('href').slice(1);
+    }
+    
     // Update active class
     if (currentSection) {
       links.forEach(link => {

package/ui/index.html

@@ -235,7 +235,8 @@
               <span class="toggle-text">Auto Suffix</span>
             </label>
             <div class="input-helper">
-              Automatically add size-based suffix: -800w (width), -600h (height), -800x600 (both).
+              Automatically add size-based suffix: -800w (width), -600h (height), -800x600 (both).<br>
+              <strong>Note:</strong> If using a rename pattern above, add dimensions directly there instead, this option won't apply.
             </div>
             <div id="auto-suffix-preview" class="preview-text"></div>
           </div>
@@ -294,11 +295,15 @@
           </nav>
 
           <!-- Welcome -->
-          <div class="help-card" style="background: var(--orange-bg-light); margin-bottom: 1.5rem;">
-            <h4 class="help-card-title" style="font-size: 1.1rem; color: var(--orange-text);">Welcome to Pulp Image</h4>
-            <p class="help-card-text">This browser UI works fully offline. The CLI is optional for automation, advanced workflows, or if you prefer the terminal.</p>
-            <p class="help-card-text" style="margin-top: 0.5rem;">If you downloaded this UI as a portable package from the Pulp website, you don't need to install the CLI — it's already included. If you want to use the CLI separately, see the <a href="#help-install" style="color: var(--orange-text); font-weight: 600;">installation guide</a>.</p>
-          </div>
+          <section id="help-welcome">
+            <h2>Welcome to Pulp Image UI</h2>
+            <p style="margin-bottom: 0.75rem; color: var(--text-secondary);">This browser-based UI includes all features of the CLI, except automatic deletion of original files, as browser security prevents file deletion. The CLI is optional and only needed for automation, advanced workflows, or if you prefer working in the terminal.</p>
+            
+            <p style="margin-bottom: 0.25rem;"><strong>Everything Happens Locally</strong></p>
+            <p style="margin-bottom: 0.75rem; color: var(--text-secondary);">All image processing runs directly on your computer. No files are uploaded to the internet. Your images stay private and processing remains fast. Pulp Image UI works fully offline, even if your browser shows upload notifications.</p>
+            
+            <p style="color: var(--text-secondary);">If you downloaded this UI as a portable package from the <a target="_blank" href="https://pulp.run">Pulp</a> website, you do not need to install the CLI. If you want to use the CLI separately, see the <a href="#help-install">installation guide</a>.</p>
+          </section>
 
           <!-- Compression Behavior -->
 
@@ -313,7 +318,7 @@
                 <tr><td><code>avif</code></td><td>✓ Yes</td><td>Lossy or lossless</td><td>50</td></tr>
               </tbody>
             </table>
-            <p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.9rem;"><em>Note: Resize does not affect compression — it only changes dimensions.</em></p>
+            <p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.9rem;"><em>Note: Resize does not affect compression, it only changes dimensions.</em></p>
           </section>
 
           <!-- UI Options Guide -->
@@ -361,8 +366,8 @@
               <h3 class="help-subsection-title">Alpha (Transparency)</h3>
               <p style="margin-bottom: 0.5rem;">When converting to JPG (no transparency):</p>
               <ul style="margin: 0 0 0 1.25rem; color: var(--text-secondary);">
-                <li><strong>Flatten</strong> — Fill transparent areas with background color</li>
-                <li><strong>Error</strong> — Fail if image has transparency</li>
+                <li><strong>Flatten</strong> = Fill transparent areas with background color</li>
+                <li><strong>Error</strong> = Fail if image has transparency</li>
               </ul>
             </div>
             
@@ -374,6 +379,7 @@
                 <li>Height 600 → <code>photo-600h.webp</code></li>
                 <li>Both → <code>photo-800x600.webp</code></li>
               </ul>
+              <p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted);"><em><strong>Note:</strong> If using a rename pattern, add dimensions directly in the pattern(auto suffix won't apply).</em></p>
             </div>
             
             <div class="help-subsection">
@@ -381,9 +387,9 @@
               <p style="margin-bottom: 0.5rem;">Flexible output filename generation. <em>CLI users already have shell tools for renaming that can be piped with Pulp.</em></p>
               <p style="margin-bottom: 0.5rem;"><strong>Supported Tokens:</strong></p>
               <ul style="margin: 0 0 1rem 1.25rem; color: var(--text-secondary);">
-                <li><code>{name}</code> — Original basename (without extension)</li>
-                <li><code>{ext}</code> — Output extension (without leading dot)</li>
-                <li><code>{index}</code> — 1-based index in batch</li>
+                <li><code>{name}</code> = Original basename (without extension)</li>
+                <li><code>{ext}</code> = Output extension (without leading dot)</li>
+                <li><code>{index}</code> = 1-based index in batch</li>
               </ul>
               <table class="help-table">
                 <thead><tr><th>Pattern</th><th>Result</th></tr></thead>
@@ -424,7 +430,7 @@
 
           <section id="help-install">
             <h2>Installing the CLI (Optional)</h2>
-            <p>The CLI is optional. Only install if you need automation, scripting, or CLI-only features like <code>--delete-original</code>.</p>
+            <p>The CLI is optional. Install it if you prefer working in the terminal, need automation or scripting, or want access to CLI-only features such as <code>--delete-original</code>.</p>
             
             <div class="terminal-example">
               <div class="terminal-example-header">
@@ -843,7 +849,6 @@
                   <li>You're new to the tool</li>
                   <li>You want visual feedback and guidance</li>
                   <li>You need to understand option combinations</li>
-                  <li>You want to keep originals safe (UI processes copies)</li>
                   <li>You prefer point-and-click interfaces</li>
                 </ul>
               </div>

package/ui/styles.css

@@ -794,6 +794,10 @@ body {
 }
 
 /* Help Tab */
+#help-welcome {
+  margin-top: 4rem;
+}
+
 .help-content {
   max-width: 800px;
 }