phase 1 & 2 add text mark

package.json

@@ -13,6 +13,7 @@
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.6.0",
     "autoprefixer": "^10.4.23",
+    "lucide-vue-next": "^0.562.0",
     "pinia": "^3.0.4",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.23
         version: 10.4.23(postcss@8.5.6)
+      lucide-vue-next:
+        specifier: ^0.562.0
+        version: 0.562.0(vue@3.5.26(typescript@5.6.3))
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(typescript@5.6.3)(vue@3.5.26(typescript@5.6.3))
@@ -782,6 +785,11 @@ packages:
     resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
     engines: {node: '>= 12.0.0'}
 
+  lucide-vue-next@0.562.0:
+    resolution: {integrity: sha512-LN0BLGKMFulv0lnfK29r14DcngRUhIqdcaL0zXTt2o0oS9odlrjCGaU3/X9hIihOjjN8l8e+Y9G/famcNYaI7Q==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -1524,6 +1532,10 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.30.2
       lightningcss-win32-x64-msvc: 1.30.2
 
+  lucide-vue-next@0.562.0(vue@3.5.26(typescript@5.6.3)):
+    dependencies:
+      vue: 3.5.26(typescript@5.6.3)
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

src-tauri/Cargo.lock

@@ -2,6 +2,22 @@
 # It is not intended for manual editing.
 version = 4
 
+[[package]]
+name = "ab_glyph"
+version = "0.2.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "01c0457472c38ea5bd1c3b5ada5e368271cb550be7a4ca4a0b4634e9913f6cc2"
+dependencies = [
+ "ab_glyph_rasterizer",
+ "owned_ttf_parser",
+]
+
+[[package]]
+name = "ab_glyph_rasterizer"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "366ffbaa4442f4684d91e2cd7c5ea7c4ed8add41959a31447066e279e432b618"
+
 [[package]]
 name = "adler2"
 version = "2.0.1"
@@ -65,6 +81,15 @@ version = "1.0.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"
 
+[[package]]
+name = "approx"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cab112f0a86d568ea0e627cc1d6be74a1e9cd55214684db5561995f6dad897c6"
+dependencies = [
+ "num-traits",
+]
+
 [[package]]
 name = "arbitrary"
 version = "1.4.2"
@@ -1175,8 +1200,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "wasi 0.11.1+wasi-snapshot-preview1",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1668,6 +1695,24 @@ dependencies = [
  "quick-error",
 ]
 
+[[package]]
+name = "imageproc"
+version = "0.25.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2393fb7808960751a52e8a154f67e7dd3f8a2ef9bd80d1553078a7b4e8ed3f0d"
+dependencies = [
+ "ab_glyph",
+ "approx",
+ "getrandom 0.2.17",
+ "image",
+ "itertools 0.12.1",
+ "nalgebra",
+ "num",
+ "rand 0.8.5",
+ "rand_distr",
+ "rayon",
+]
+
 [[package]]
 name = "imgref"
 version = "1.12.0"
@@ -1733,6 +1778,15 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "itertools"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba291022dbbd398a455acf126c1e341954079855bc60dfdda641363bd6922569"
+dependencies = [
+ "either",
+]
+
 [[package]]
 name = "itertools"
 version = "0.14.0"
@@ -1920,6 +1974,12 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "libm"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f9fbbcab51052fe104eb5e5d351cf728d30a5be1fe14d9be8a3b097481fb97de"
+
 [[package]]
 name = "libredox"
 version = "0.1.12"
@@ -1997,6 +2057,16 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5"
 
+[[package]]
+name = "matrixmultiply"
+version = "0.3.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a06de3016e9fae57a36fd14dba131fccf49f74b40b7fbdb472f96e361ec71a08"
+dependencies = [
+ "autocfg",
+ "rawpointer",
+]
+
 [[package]]
 name = "maybe-rayon"
 version = "0.1.1"
@@ -2080,6 +2150,21 @@ dependencies = [
  "windows-sys 0.60.2",
 ]
 
+[[package]]
+name = "nalgebra"
+version = "0.32.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7b5c17de023a86f59ed79891b2e5d5a94c705dbe904a5b5c9c952ea6221b03e4"
+dependencies = [
+ "approx",
+ "matrixmultiply",
+ "num-complex",
+ "num-rational",
+ "num-traits",
+ "simba",
+ "typenum",
+]
+
 [[package]]
 name = "ndk"
 version = "0.9.0"
@@ -2137,6 +2222,20 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0676bb32a98c1a483ce53e500a81ad9c3d5b3f7c920c28c24e9cb0980d0b5bc8"
 
+[[package]]
+name = "num"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "35bd024e8b2ff75562e5f34e7f4905839deb4b22955ef5e73d2fea1b9813cb23"
+dependencies = [
+ "num-bigint",
+ "num-complex",
+ "num-integer",
+ "num-iter",
+ "num-rational",
+ "num-traits",
+]
+
 [[package]]
 name = "num-bigint"
 version = "0.4.6"
@@ -2147,6 +2246,15 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "num-complex"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73f88a1307638156682bada9d7604135552957b7818057dcef22705b4d509495"
+dependencies = [
+ "num-traits",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.1.0"
@@ -2173,6 +2281,17 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "num-iter"
+version = "0.1.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1429034a0490724d0075ebb2bc9e875d6503c3cf69e235a8941aa757d83ef5bf"
+dependencies = [
+ "autocfg",
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-rational"
 version = "0.4.2"
@@ -2191,6 +2310,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
 dependencies = [
  "autocfg",
+ "libm",
 ]
 
 [[package]]
@@ -2439,6 +2559,15 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
 
+[[package]]
+name = "owned_ttf_parser"
+version = "0.25.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36820e9051aca1014ddc75770aab4d68bc1e9e632f0f5627c4086bc216fb583b"
+dependencies = [
+ "ttf-parser",
+]
+
 [[package]]
 name = "pango"
 version = "0.18.3"
@@ -2953,6 +3082,16 @@ dependencies = [
  "getrandom 0.3.4",
 ]
 
+[[package]]
+name = "rand_distr"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32cb0b9bc82b0a0876c2dd994a7e7a2683d3e7390ca40e6886785ef0c7e3ee31"
+dependencies = [
+ "num-traits",
+ "rand 0.8.5",
+]
+
 [[package]]
 name = "rand_hc"
 version = "0.2.0"
@@ -2987,7 +3126,7 @@ dependencies = [
  "built",
  "cfg-if",
  "interpolate_name",
- "itertools",
+ "itertools 0.14.0",
  "libc",
  "libfuzzer-sys",
  "log",
@@ -3027,6 +3166,12 @@ version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "20675572f6f24e9e76ef639bc5552774ed45f1c30e2951e1e99c59888861c539"
 
+[[package]]
+name = "rawpointer"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "60a357793950651c4ed0f3f52338f53b2f809f32d83a07f72909fa13e4c6c1e3"
+
 [[package]]
 name = "rayon"
 version = "1.11.0"
@@ -3202,6 +3347,15 @@ version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a50f4cf475b65d88e057964e0e9bb1f0aa9bbb2036dc65c64596b42932536984"
 
+[[package]]
+name = "safe_arch"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96b02de82ddbe1b636e6170c21be622223aea188ef2e139be0a5b219ec215323"
+dependencies = [
+ "bytemuck",
+]
+
 [[package]]
 name = "same-file"
 version = "1.0.6"
@@ -3483,6 +3637,19 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
 
+[[package]]
+name = "simba"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "061507c94fc6ab4ba1c9a0305018408e312e17c041eb63bef8aa726fa33aceae"
+dependencies = [
+ "approx",
+ "num-complex",
+ "num-traits",
+ "paste",
+ "wide",
+]
+
 [[package]]
 name = "simd-adler32"
 version = "0.3.8"
@@ -4334,6 +4501,12 @@ version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 
+[[package]]
+name = "ttf-parser"
+version = "0.25.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d2df906b07856748fa3f6e0ad0cbaa047052d4a7dd609e231c4f72cee8c36f31"
+
 [[package]]
 name = "typeid"
 version = "1.0.3"
@@ -4607,7 +4780,9 @@ dependencies = [
 name = "watermark-wizard"
 version = "0.1.0"
 dependencies = [
+ "ab_glyph",
  "image",
+ "imageproc",
  "rayon",
  "serde",
  "serde_json",
@@ -4712,6 +4887,16 @@ version = "0.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a28ac98ddc8b9274cb41bb4d9d4d5c425b6020c50c46f25559911905610b4a88"
 
+[[package]]
+name = "wide"
+version = "0.7.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ce5da8ecb62bcd8ec8b7ea19f69a51275e91299be594ea5cc6ef7819e16cd03"
+dependencies = [
+ "bytemuck",
+ "safe_arch",
+]
+
 [[package]]
 name = "winapi"
 version = "0.3.9"

src-tauri/Cargo.toml

@@ -21,7 +21,9 @@ tauri-build = { version = "2", features = [] }
 tauri = { version = "2", features = ["protocol-asset"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-image = "0.25"
+image = { version = "0.25", features = ["png", "jpeg", "webp"] }
 rayon = "1.10"
 tauri-plugin-dialog = "2"
+imageproc = "0.25"
+ab_glyph = "0.2.23"
 

src-tauri/src/lib.rs

@@ -34,6 +34,13 @@ fn scan_dir(path: String) -> Result<Vec<ImageItem>, String> {
 
 use image::GenericImageView;
 use image::Pixel;
+use rayon::prelude::*;
+use std::path::Path;
+use imageproc::drawing::draw_text_mut;
+use ab_glyph::{FontRef, PxScale, Font};
+
+// Embed the font to ensure it's always available without path issues
+const FONT_DATA: &[u8] = include_bytes!("../assets/fonts/Roboto-Regular.ttf");
 
 #[derive(serde::Serialize)]
 struct ZcaResult {
@@ -42,13 +49,132 @@ struct ZcaResult {
     zone: String, 
 }
 
+#[derive(serde::Deserialize)]
+struct ExportImageTask {
+    path: String,
+}
+
+#[derive(serde::Deserialize)]
+struct WatermarkSettings {
+    #[serde(rename = "type")]
+    _w_type: String, // 'text' (image is deprecated for now per user request, but keeping struct flexible)
+    text: String, // Was 'source'
+    color: String, // Hex code e.g. "#FFFFFF"
+    opacity: f64,
+    scale: f64, // Font size relative to image height (e.g., 0.05 = 5% of height)
+    manual_override: bool,
+    manual_position: ManualPosition,
+}
+
+#[derive(serde::Deserialize)]
+struct ManualPosition {
+    x: f64,
+    y: f64,
+}
+
+fn parse_hex_color(hex: &str) -> image::Rgba<u8> {
+    let hex = hex.trim_start_matches('#');
+    let r = u8::from_str_radix(&hex[0..2], 16).unwrap_or(255);
+    let g = u8::from_str_radix(&hex[2..4], 16).unwrap_or(255);
+    let b = u8::from_str_radix(&hex[4..6], 16).unwrap_or(255);
+    image::Rgba([r, g, b, 255])
+}
+
 #[tauri::command]
-fn get_zca_suggestion(path: String) -> Result<ZcaResult, String> {
+async fn export_batch(images: Vec<ExportImageTask>, watermark: WatermarkSettings, output_dir: String) -> Result<String, String> {
-    let img = image::open(&path).map_err(|e| e.to_string())?;
+    let font = FontRef::try_from_slice(FONT_DATA).map_err(|e| format!("Font error: {}", e))?;
+    let base_color = parse_hex_color(&watermark.color);
+    
+    // Calculate final color with opacity
+    // imageproc draws with the exact color given. To support opacity, we need to handle it.
+    // However, draw_text_mut blends. If we provide an Rgba with alpha < 255, it should blend.
+    let alpha = (watermark.opacity * 255.0) as u8;
+    let text_color = image::Rgba([base_color[0], base_color[1], base_color[2], alpha]);
+
+    let results: Vec<Result<(), String>> = images.par_iter().map(|task| {
+        let input_path = Path::new(&task.path);
+        let img_result = image::open(input_path);
+        
+        if let Ok(dynamic_img) = img_result {
+            let mut base_img = dynamic_img.to_rgba8();
+            let (width, height) = base_img.dimensions();
+
+            // 1. Calculate Font Scale
+            // watermark.scale is percentage of image height. e.g. 0.05
+            let mut scale_px = height as f32 * watermark.scale as f32;
+            
+            // 2. Measure Text
+            let scaled_font = PxScale::from(scale_px);
+            let (t_width, t_height) = imageproc::drawing::text_size(scaled_font, &font, &watermark.text);
+            
+            // 3. Ensure it fits width (Padding 5%)
+            let max_width = (width as f32 * 0.95) as u32;
+            if t_width > max_width {
+                 let ratio = max_width as f32 / t_width as f32;
+                 scale_px *= ratio;
+                 // Re-measure isn't strictly necessary for center calc if we assume linear scaling,
+                 // but let's be safe for variable width fonts? Actually text_size scales linearly.
+            }
+            let final_scale = PxScale::from(scale_px);
+            let (final_t_width, final_t_height) = imageproc::drawing::text_size(final_scale, &font, &watermark.text);
+
+            // 4. Determine Position
+            let (pos_x_pct, pos_y_pct) = if watermark.manual_override {
+                 (watermark.manual_position.x, watermark.manual_position.y)
+            } else {
+                 match calculate_zca_internal(&dynamic_img) {
+                     Ok(res) => (res.x, res.y),
+                     Err(_) => (0.5, 0.95),
+                 }
+            };
+
+            // Calculate top-left coordinate for draw_text_mut (it expects top-left, not center)
+            let center_x = width as f64 * pos_x_pct;
+            let center_y = height as f64 * pos_y_pct;
+
+            let x = (center_x - (final_t_width as f64 / 2.0)) as i32;
+            let y = (center_y - (final_t_height as f64 / 2.0)) as i32;
+            
+            // Clamp to be visible? imageproc handles out of bounds by clipping.
+            
+            // 5. Draw
+            draw_text_mut(
+                &mut base_img,
+                text_color,
+                x,
+                y,
+                final_scale,
+                &font,
+                &watermark.text,
+            );
+
+            // Save
+            let file_name = input_path.file_name().unwrap_or_default();
+            let output_path = Path::new(&output_dir).join(file_name);
+            base_img.save(output_path).map_err(|e| e.to_string())?;
+            Ok(())
+        } else {
+            Err(format!("Failed to open {}", task.path))
+        }
+    }).collect();
+
+    let failures: Vec<String> = results.into_iter().filter_map(|r| r.err()).collect();
+    
+    if failures.is_empty() {
+        Ok("All images processed successfully".to_string())
+    } else {
+        Err(format!("Completed with errors: {:?}", failures))
+    }
+}
+
+// Helper to reuse logic (adapted from command)
+fn calculate_zca_internal(img: &image::DynamicImage) -> Result<ZcaResult, String> {
     let (width, height) = img.dimensions();
+    
     let bottom_start_y = (height as f64 * 0.8) as u32;
     let zone_height = height - bottom_start_y;
     let zone_width = width / 3;
+
     let zones = [
         ("Left", 0, bottom_start_y),
         ("Center", zone_width, bottom_start_y),
@@ -57,10 +183,11 @@ fn get_zca_suggestion(path: String) -> Result<ZcaResult, String> {
 
     let mut min_std_dev = f64::MAX;
     let mut best_zone = "Center";
-    let mut best_pos = (0.5, 0.9); // Default center
+    let mut best_pos = (0.5, 0.95);
 
     for (name, start_x, start_y) in zones.iter() {
         let mut luma_values = Vec::with_capacity((zone_width * zone_height) as usize);
+        
         for y in *start_y..height {
             for x in *start_x..(*start_x + zone_width) {
                 if x >= width { continue; } 
@@ -82,8 +209,6 @@ fn get_zca_suggestion(path: String) -> Result<ZcaResult, String> {
             min_std_dev = std_dev;
             best_zone = name;
             let center_x_px = *start_x as f64 + (zone_width as f64 / 2.0);
-            // Position closer to bottom (75% of the zone height instead of 50%)
-            // Zone starts at 80%. Height is 20%. 0.8 + 0.2 * 0.75 = 0.95
             let center_y_px = *start_y as f64 + (zone_height as f64 * 0.75);
             best_pos = (center_x_px / width as f64, center_y_px / height as f64);
         }
@@ -96,12 +221,17 @@ fn get_zca_suggestion(path: String) -> Result<ZcaResult, String> {
     })
 }
 
+#[tauri::command]
+fn get_zca_suggestion(path: String) -> Result<ZcaResult, String> {
+    let img = image::open(&path).map_err(|e| e.to_string())?;
+    calculate_zca_internal(&img)
+}
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_dialog::init())
-        .invoke_handler(tauri::generate_handler![scan_dir, get_zca_suggestion])
+        .invoke_handler(tauri::generate_handler![scan_dir, get_zca_suggestion, export_batch])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src/App.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import HeroView from "./components/HeroView.vue";
 import ThumbnailStrip from "./components/ThumbnailStrip.vue";
+import SettingsPanel from "./components/SettingsPanel.vue";
 import { useGalleryStore } from "./stores/gallery";
 import { open } from '@tauri-apps/plugin-dialog';
 import { invoke } from '@tauri-apps/api/core';
+import { FolderOpen, Download } from 'lucide-vue-next';
+import { ref } from "vue";
 
 const store = useGalleryStore();
+const isExporting = ref(false);
 
 async function openFolder() {
     try {
@@ -25,26 +29,80 @@ async function openFolder() {
         console.error("Failed to open folder:", e);
     }
 }
+
+async function exportBatch() {
+    if (store.images.length === 0) return;
+    if (!store.watermarkSettings.text) {
+        alert("Please enter watermark text.");
+        return;
+    }
+
+    try {
+        const outputDir = await open({
+            directory: true,
+            multiple: false,
+            title: "Select Output Directory"
+        });
+
+        if (outputDir && typeof outputDir === 'string') {
+            isExporting.value = true;
+            await invoke('export_batch', {
+                images: store.images,
+                watermark: store.watermarkSettings,
+                outputDir: outputDir
+            });
+            alert("Batch export completed!");
+        }
+    } catch (e) {
+        console.error("Export failed:", e);
+        alert("Export failed: " + e);
+    } finally {
+        isExporting.value = false;
+    }
+}
 </script>
 
 <template>
   <div class="h-screen w-screen bg-gray-900 text-white overflow-hidden flex flex-col">
-      <header class="h-12 bg-gray-800 flex items-center justify-between px-4 border-b border-gray-700 shrink-0">
+      <header class="h-14 bg-gray-800 flex items-center justify-between px-6 border-b border-gray-700 shrink-0 shadow-md z-10">
-          <h1 class="text-sm font-bold tracking-wider">WATERMARK WIZARD</h1>
+          <div class="flex items-center gap-4">
+              <h1 class="text-lg font-bold tracking-wider bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">WATERMARK WIZARD</h1>
+          </div>
+          
+          <div class="flex items-center gap-3">
               <button 
                 @click="openFolder"
-            class="bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded text-sm transition-colors"
+                class="flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-md text-sm font-medium transition-all hover:shadow-lg"
               >
+                <FolderOpen class="w-4 h-4" />
                 Open Folder
               </button>
+              
+              <button 
+                @click="exportBatch"
+                :disabled="isExporting"
+                class="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-800 disabled:cursor-not-allowed text-white px-4 py-2 rounded-md text-sm font-medium transition-all hover:shadow-lg shadow-blue-900/20"
+              >
+                <Download class="w-4 h-4" v-if="!isExporting" />
+                <div v-else class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                {{ isExporting ? 'Exporting...' : 'Export Batch' }}
+              </button>
+          </div>
       </header>
       
-      <main class="flex-1 relative bg-black overflow-hidden">
+      <div class="flex-1 flex overflow-hidden">
+          <main class="flex-1 relative bg-black flex flex-col min-w-0">
+              <div class="flex-1 relative overflow-hidden">
                   <HeroView />
-      </main>
+              </div>
-      
+              <footer class="h-32 bg-gray-800 border-t border-gray-700 shrink-0 z-10">
-      <footer class="h-32 bg-gray-800 border-t border-gray-700 shrink-0">
                   <ThumbnailStrip />
               </footer>
+          </main>
+          
+          <aside class="w-80 shrink-0 h-full border-l border-gray-700">
+              <SettingsPanel />
+          </aside>
+      </div>
   </div>
 </template>

src/components/HeroView.vue

@@ -1,40 +1,147 @@
 <script setup lang="ts">
 import { useGalleryStore } from "../stores/gallery";
 import { convertFileSrc } from "@tauri-apps/api/core";
+import { ref, computed } from "vue";
 
 const store = useGalleryStore();
+const isDragging = ref(false);
+const dragStart = ref({ x: 0, y: 0 });
+
+// Use either manual position (if override is true) or ZCA suggestion
+const position = computed(() => {
+    if (store.watermarkSettings.manual_override) {
+        return store.watermarkSettings.manual_position;
+    }
+    return store.selectedImage?.zcaSuggestion ? { x: store.selectedImage.zcaSuggestion.x, y: store.selectedImage.zcaSuggestion.y } : { x: 0.5, y: 0.5 };
+});
+
+const onMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    isDragging.value = true;
+    dragStart.value = { x: e.clientX, y: e.clientY };
+};
+
+const onMouseMove = (e: MouseEvent) => {
+    if (!isDragging.value || !store.selectedImage) return;
+    
+    // Calculate delta in percentage relative to the image container
+    const container = (e.currentTarget as HTMLElement).closest('.image-container');
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const deltaX = (e.clientX - dragStart.value.x) / rect.width;
+    const deltaY = (e.clientY - dragStart.value.y) / rect.height;
+
+    // Update manual position
+    let newX = position.value.x + deltaX;
+    let newY = position.value.y + deltaY;
+    
+    // Clamp
+    newX = Math.max(0, Math.min(1, newX));
+    newY = Math.max(0, Math.min(1, newY));
+
+    // Set store to manual mode immediately
+    store.updateWatermarkSettings({
+        manual_override: true,
+        manual_position: { x: newX, y: newY }
+    });
+
+    dragStart.value = { x: e.clientX, y: e.clientY };
+};
+
+const onMouseUp = () => {
+    isDragging.value = false;
+};
+
+const onMouseLeave = () => {
+    isDragging.value = false;
+};
+
+// Calculate font size relative to current display image height
+// We need to know the rendered height of the image to approximate the visual effect
+// Backend uses "percentage of real image height". 
+// In CSS, if we use % of container height, it should match if container matches image aspect.
+// Since we use inline-flex and the img determines size, 100% height of parent refers to the image height.
 </script>
 
 <template>
-  <div class="w-full h-full flex items-center justify-center bg-black relative p-4 overflow-hidden">
+  <div 
-    <div v-if="store.selectedImage" class="relative inline-flex justify-center items-center" style="max-width: 100%; max-height: 100%;">
+    class="w-full h-full flex items-center justify-center bg-black relative p-4 overflow-hidden"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave"
+  >
+    <div 
+        v-if="store.selectedImage" 
+        class="relative inline-flex justify-center items-center image-container" 
+        style="max-width: 100%; max-height: 100%;"
+    >
       <img 
         :src="convertFileSrc(store.selectedImage.path)" 
-        class="max-w-full max-h-full w-auto h-auto block shadow-lg"
+        class="max-w-full max-h-full w-auto h-auto block shadow-lg select-none pointer-events-none"
         style="max-height: calc(100vh - 10rem);" 
         alt="Hero Image"
       />
-      <!-- Watermark Overlay Placeholder -->
+      
+      <!-- Text Watermark Overlay -->
       <div 
-        v-if="store.selectedImage.zcaSuggestion"
+        v-if="store.watermarkSettings.text"
-        class="absolute border-2 border-dashed border-green-400 text-green-400 px-4 py-2 bg-black/50 pointer-events-none transition-all duration-500"
+        class="absolute cursor-move select-none whitespace-nowrap font-sans font-medium"
         :style="{
-            left: (store.selectedImage.zcaSuggestion.x * 100) + '%',
+            left: (position.x * 100) + '%',
-            top: (store.selectedImage.zcaSuggestion.y * 100) + '%',
+            top: (position.y * 100) + '%',
-            transform: 'translate(-50%, -50%)'
+            transform: 'translate(-50%, -50%)',
+            opacity: store.watermarkSettings.opacity,
+            color: store.watermarkSettings.color,
+            fontSize: (store.watermarkSettings.scale * 100 * 1.5) + 'cqh', 
+            /* Using container query units or just % of height? 
+               Since container is the div wrapping img, its height IS the img height.
+               So height: 100% = img height.
+               fontSize: X% of height.
+            */
+            height: '0px', /* collapse container height so it doesn't affect layout, rely on overflow visible for text */
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
         }"
+        @mousedown="onMouseDown"
       >
-        Smart Watermark ({{ store.selectedImage.zcaSuggestion.zone }})
+        <span :style="{ fontSize: (store.watermarkSettings.scale * 1000) + '%' }"> 
-      </div>
+            <!-- This is tricky in CSS. Let's use viewport units approximation or just fix it 
-      <div 
+                 The simplest way to scale text with container height in Vue without ResizeObserver 
-        v-else
+                 is to use a computed style that relies on container size if we knew it.
-        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-2 border-dashed border-white text-white px-4 py-2 bg-black/50 pointer-events-none"
+                 Actually, since we are inside the container, we can use % of height for font-size? No, font-size % refers to parent font size.
-      >
+                 
-        Calculating...
+                 Hack: Viewport units are stable-ish.
+                 Better: Render text in SVG overlaid?
+                 
+                 Simple approach for MVP Preview:
+                 Use a fixed visual size or simple scale multiplier assuming 1080p screen.
+                 Real backend logic is exact.
+                 
+                 Alternative: Use CSS 'container-type: size' on the parent!
+            -->
+            {{ store.watermarkSettings.text }}
+        </span>
+        
+        <!-- Selection Ring when dragging -->
+        <div v-if="isDragging" class="absolute -inset-2 border border-blue-500 rounded-sm"></div>
       </div>
     </div>
-    <div v-else class="text-gray-500">
+    <div v-else class="text-gray-500 flex flex-col items-center">
-      No image selected
+      <p>No image selected</p>
     </div>
   </div>
 </template>
+
+<style scoped>
+.image-container {
+    container-type: size;
+}
+
+span {
+    /* Font size relative to container height (cqh) */
+    font-size: v-bind('(store.watermarkSettings.scale * 100) + "cqh"');
+    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+}
+</style>

src/components/SettingsPanel.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { useGalleryStore } from "../stores/gallery";
+import { Settings, CheckSquare, Type, Palette } from 'lucide-vue-next';
+
+const store = useGalleryStore();
+</script>
+
+<template>
+  <div class="h-full bg-gray-800 text-white p-4 flex flex-col gap-6 overflow-y-auto border-l border-gray-700 w-80">
+      <h2 class="text-lg font-bold flex items-center gap-2">
+          <Settings class="w-5 h-5" />
+          Watermark Settings
+      </h2>
+
+      <!-- Text Input -->
+      <div class="flex flex-col gap-2">
+          <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Content</label>
+          <div class="relative">
+              <Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
+              <input 
+                type="text"
+                v-model="store.watermarkSettings.text"
+                class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
+                placeholder="Enter text..."
+              />
+          </div>
+      </div>
+
+      <!-- Color Picker -->
+      <div class="flex flex-col gap-2">
+          <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Color</label>
+          <div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600">
+             <Palette class="w-4 h-4 text-gray-400" />
+             <input 
+                type="color" 
+                v-model="store.watermarkSettings.color"
+                class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
+             />
+             <span class="text-xs text-gray-300 font-mono">{{ store.watermarkSettings.color }}</span>
+          </div>
+      </div>
+
+      <!-- Controls -->
+      <div class="space-y-4">
+           <div>
+              <div class="flex justify-between mb-1">
+                  <label class="text-xs text-gray-400">Size (Scale)</label>
+                  <span class="text-xs text-gray-300">{{ (store.watermarkSettings.scale * 100).toFixed(1) }}%</span>
+              </div>
+              <input 
+                type="range" 
+                min="0.01" 
+                max="0.20" 
+                step="0.001" 
+                :value="store.watermarkSettings.scale"
+                @input="e => store.updateWatermarkSettings({ scale: parseFloat((e.target as HTMLInputElement).value) })"
+                class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
+              />
+              <p class="text-[10px] text-gray-500 mt-1">Relative to image height</p>
+          </div>
+
+           <div>
+              <div class="flex justify-between mb-1">
+                  <label class="text-xs text-gray-400">Opacity</label>
+                  <span class="text-xs text-gray-300">{{ (store.watermarkSettings.opacity * 100).toFixed(0) }}%</span>
+              </div>
+              <input 
+                type="range" 
+                min="0.1" 
+                max="1.0" 
+                step="0.01" 
+                :value="store.watermarkSettings.opacity"
+                @input="e => store.updateWatermarkSettings({ opacity: parseFloat((e.target as HTMLInputElement).value) })"
+                class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
+              />
+          </div>
+      </div>
+
+      <!-- Placement Mode -->
+       <div class="flex flex-col gap-2">
+          <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement</label>
+          <div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600">
+             <div class="p-1 rounded bg-green-500/20 text-green-400">
+                 <CheckSquare class="w-4 h-4" v-if="!store.watermarkSettings.manual_override" />
+                 <div class="w-4 h-4" v-else></div>
+             </div>
+             <div class="flex-1">
+                 <p class="text-sm font-medium text-gray-200">Smart Auto-Placement</p>
+                 <p class="text-xs text-gray-500">Uses ZCA algorithm for each image</p>
+             </div>
+          </div>
+          <p class="text-xs text-gray-500 mt-1 italic">
+              * Dragging the watermark in the preview will enable Manual Override for all images.
+          </p>
+      </div>
+  </div>
+</template>

src/stores/gallery.ts

@@ -11,9 +11,28 @@ export interface ImageItem {
   zcaSuggestion?: { x: number; y: number; zone: string };
 }
 
+export interface WatermarkSettings {
+    type: 'text'; // Fixed to text
+    text: string;
+    color: string; // Hex
+    opacity: number; // 0-1
+    scale: number; // 0.01 - 0.5 (relative to image height)
+    manual_override: boolean;
+    manual_position: { x: number, y: number };
+}
+
 export const useGalleryStore = defineStore("gallery", () => {
   const images = ref<ImageItem[]>([]);
   const selectedIndex = ref<number>(-1);
+  const watermarkSettings = ref<WatermarkSettings>({
+      type: 'text',
+      text: 'Watermark',
+      color: '#FFFFFF',
+      opacity: 0.8,
+      scale: 0.05, // 5% of height default
+      manual_override: false,
+      manual_position: { x: 0.5, y: 0.9 }
+  });
 
   const selectedImage = computed(() => {
     if (selectedIndex.value >= 0 && selectedIndex.value < images.value.length) {
@@ -27,6 +46,10 @@ export const useGalleryStore = defineStore("gallery", () => {
     selectedIndex.value = -1;
   }
   
+  function updateWatermarkSettings(settings: Partial<WatermarkSettings>) {
+      watermarkSettings.value = { ...watermarkSettings.value, ...settings };
+  }
+
   async function selectImage(index: number) {
     if (index < 0 || index >= images.value.length) return;
     selectedIndex.value = index;
@@ -35,8 +58,6 @@ export const useGalleryStore = defineStore("gallery", () => {
     if (!img.zcaSuggestion) {
         try {
             const suggestion = await invoke<{x: number, y: number, zone: string}>("get_zca_suggestion", { path: img.path });
-            // Update the item in the array
-            // Note: Directly modifying the object inside ref array is reactive in Vue 3
             img.zcaSuggestion = suggestion;
         } catch (e) {
             console.error("ZCA failed", e);
@@ -48,7 +69,9 @@ export const useGalleryStore = defineStore("gallery", () => {
     images,
     selectedIndex,
     selectedImage,
+    watermarkSettings,
     setImages,
     selectImage,
+    updateWatermarkSettings
   };
 });