@ape-egg/vibe 1.3.2 → 1.6.0

package/compiler/src/compiler/compile.rs

@@ -6,6 +6,8 @@ use std::collections::{BTreeMap, HashSet, HashMap};
 use thiserror::Error;
 use colored::Colorize;
 use regex::Regex;
+use glob::Pattern;
+use rayon::prelude::*;
 
 use crate::config::Config;
 use crate::parser::HtmlParser;
@@ -18,6 +20,10 @@ use crate::parser::HtmlParser;
 // Future refactoring: Replace with configurable include/exclude patterns,
 // or a more sophisticated asset pipeline.
 // =============================================================================
+// FOUC prevention class/attribute name (matches runtime/constants.js)
+// Can be used as class (.vibe-fouc) or attribute ([vibe-fouc])
+const FOUC_CLASS_OR_ATTR: &str = "vibe-fouc";
+
 const MIRROR_EXTENSIONS: &[&str] = &[
     "css", "js",
     // Fonts
@@ -32,16 +38,78 @@ const MIRROR_EXTENSIONS: &[&str] = &[
     "json", "xml", "csv",
 ];
 
-// Directories to skip when walking source
-const SKIP_DIRECTORIES: &[&str] = &[
+// Files and directories to skip when walking source (supports glob patterns)
+// Note: Output directory is checked dynamically (not hardcoded here)
+pub const SKIP_FILES: &[&str] = &[
     ".git",
     ".claude",
-    "compiled",      // Don't copy output into itself
-    "target",        // Rust build artifacts
+    "target",            // Rust build artifacts
+    "tests",             // Test files
     "test-results",
     "playwright-report",
+    "node_modules",      // Skip node_modules during scanning
+    "**/*.test.js",      // Test files
+    "**/*.config.js",    // Config files
+    "**/*.test.ts",      // Test files
+    "**/*.config.ts",    // Config files
 ];
 
+/// Check if a path should be skipped based on SKIP_FILES patterns
+pub fn should_skip_path(path: &Path, name: &str) -> bool {
+    // Check exact name match (for directories and simple filenames)
+    if SKIP_FILES.contains(&name) {
+        return true;
+    }
+
+    // Check glob patterns (e.g., **/*.test.js)
+    for pattern_str in SKIP_FILES {
+        if pattern_str.contains('*') {
+            if let Ok(pattern) = Pattern::new(pattern_str) {
+                // Try matching against just the filename
+                if pattern.matches(name) {
+                    return true;
+                }
+                // Try matching against the full path
+                if let Some(path_str) = path.to_str() {
+                    if pattern.matches(path_str) {
+                        return true;
+                    }
+                }
+            }
+        }
+    }
+
+    false
+}
+
+/// Remove FOUC prevention class and/or attribute from compiled HTML
+/// Since HTML is pre-rendered, there's no need for FOUC prevention
+fn remove_fouc_prevention(html: String) -> String {
+    let mut result = html;
+
+    // Remove as class: class="vibe-fouc" or class="vibe-fouc other-class" or class="other-class vibe-fouc"
+    result = Regex::new(&format!(r#"\s+class="{}""#, FOUC_CLASS_OR_ATTR))
+        .unwrap()
+        .replace_all(&result, "")
+        .to_string();
+    result = Regex::new(&format!(r#"class="{}\s+"#, FOUC_CLASS_OR_ATTR))
+        .unwrap()
+        .replace_all(&result, r#"class=""#)
+        .to_string();
+    result = Regex::new(&format!(r#"class="([^"]*\s+){}(\s+[^"]*)""#, FOUC_CLASS_OR_ATTR))
+        .unwrap()
+        .replace_all(&result, r#"class="$1$2""#)
+        .to_string();
+
+    // Remove as attribute: vibe-fouc or vibe-fouc=""
+    result = Regex::new(&format!(r#"\s+{}(?:="[^"]*")?"#, FOUC_CLASS_OR_ATTR))
+        .unwrap()
+        .replace_all(&result, "")
+        .to_string();
+
+    result
+}
+
 #[derive(Error, Debug)]
 pub enum CompileError {
     #[error("Source directory not found: {0}")]
@@ -72,15 +140,11 @@ pub enum CompileError {
     CommandError(String),
     #[error("Package manager not found")]
     PackageManagerNotFound,
-    #[error("Component validation failed")]
-    ComponentValidationFailed(Vec<ComponentError>),
-}
-
-#[derive(Debug)]
-pub struct ComponentError {
-    pub component_src: String,
-    pub referenced_in: String,
-    pub error_message: String,
+    #[error("Component name '{component_name}' in '{file_path}' conflicts with reserved element. Component filenames cannot match standard HTML elements (case-insensitive). Use PascalCase (e.g., 'Nav.html' instead of 'nav.html') to avoid conflicts.")]
+    ReservedComponentName {
+        component_name: String,
+        file_path: String,
+    },
 }
 
 pub struct CompileStats {
@@ -353,8 +417,8 @@ pub struct Compiler {
     verbose: bool,
     logger: Option<VerboseLogger>,
     unique_components: HashSet<String>,
-    scanned_components: HashSet<String>,
-    external_component_cache: std::collections::HashMap<String, String>,
+    /// Cache for all components (both internal paths and external URLs)
+    component_cache: std::collections::HashMap<String, String>,
 }
 
 impl Compiler {
@@ -365,8 +429,7 @@ impl Compiler {
             verbose,
             logger,
             unique_components: HashSet::new(),
-            scanned_components: HashSet::new(),
-            external_component_cache: HashMap::new(),
+            component_cache: HashMap::new(),
         }
     }
 
@@ -395,21 +458,37 @@ impl Compiler {
             ));
         }
 
-        // Load components for HTML compilation (needed for validation)
+        // Load components for HTML compilation
         let mut parser = HtmlParser::new(self.config.components_path());
         parser.load_elements()?;
 
-        // Validate all components upfront (before creating output directory or touching filesystem)
-        // This happens AFTER parser.load_elements() so custom tags can be transformed to <component> tags
+        // Validate component names don't conflict with reserved elements
+        self.validate_component_names()?;
+
+        // Fetch and cache all components for inlining (when not components_as_is)
+        // This is separate from validation - we need component content for inlining regardless of validate flag
         if !self.config.components_as_is {
+            let fetch_start = Instant::now();
+            if self.verbose {
+                println!("\nFetching components for inlining...");
+            }
+            self.fetch_all_components(&parser)?;
+            stats.components_time_ms = fetch_start.elapsed().as_secs_f64() * 1000.0;
+            if self.verbose {
+                println!("  All components fetched successfully");
+            }
+        }
+
+        // Validate HTML syntax if requested (optional, controlled by validate flag)
+        if self.config.validate {
             let validation_start = Instant::now();
             if self.verbose {
-                println!("\nValidating components...");
+                println!("\nValidating HTML syntax...");
             }
-            self.validate_all_components(&parser)?;
+            self.validate_html_syntax()?;
             stats.validation_time_ms = Some(validation_start.elapsed().as_secs_f64() * 1000.0);
             if self.verbose {
-                println!("  All components validated successfully");
+                println!("  HTML validation completed successfully");
             }
         }
 
@@ -423,15 +502,18 @@ impl Compiler {
             }
         }
 
+        // Canonicalize output path once for reliable comparison
+        let canonical_output = self.config.output.canonicalize()
+            .unwrap_or_else(|_| self.config.output.clone());
 
         // Track compile and copy times separately
         let compile_start = Instant::now();
 
         // Process all HTML files in source (excluding components directory)
-        self.process_directory_html_only(&self.config.source.clone(), &parser, "", &mut stats)?;
+        self.process_directory_html_only(&self.config.source.clone(), &parser, "", &canonical_output, &mut stats)?;
 
         // Process source directory for assets (CSS, JS, images, etc.)
-        self.process_directory_assets_only(&self.config.source.clone(), "", &mut stats)?;
+        self.process_directory_assets_only(&self.config.source.clone(), "", &canonical_output, &mut stats)?;
 
         let process_time = compile_start.elapsed();
 
@@ -505,6 +587,190 @@ impl Compiler {
         Ok(stats)
     }
 
+    /// Compile specific HTML files (incremental compilation for watch mode)
+    pub fn compile_specific_html_files(
+        &mut self,
+        files: &[PathBuf],
+        parser: &HtmlParser,
+    ) -> Result<CompileStats, CompileError> {
+        let mut stats = CompileStats {
+            files_compiled: 0,
+            files_copied: 0,
+            internal_components_unique: 0,
+            external_components_unique: 0,
+            internal_components_total: 0,
+            external_components_total: 0,
+            compile_time_ms: 0.0,
+            copy_time_ms: 0.0,
+            components_time_ms: 0.0,
+            validation_time_ms: None,
+            node_modules_time_ms: None,
+            package_manager: None,
+            node_modules_copied_as_is: false,
+            components_as_is: self.config.components_as_is,
+        };
+
+        let start = Instant::now();
+
+        // Pre-fetch components needed by these specific files (only if not components_as_is)
+        if !self.config.components_as_is {
+            let fetch_start = Instant::now();
+            self.fetch_components_for_files(files, parser)?;
+            stats.components_time_ms = fetch_start.elapsed().as_secs_f64() * 1000.0;
+        }
+
+        for file_path in files {
+            // Calculate relative path
+            let relative_path = file_path
+                .strip_prefix(&self.config.source)
+                .map(|p| p.parent().unwrap_or(Path::new("")))
+                .unwrap_or(Path::new(""))
+                .to_str()
+                .unwrap_or("");
+
+            let (internal, external, component_srcs) = self.compile_html_file(file_path, parser, relative_path)?;
+            stats.files_compiled += 1;
+            stats.internal_components_total += internal;
+            stats.external_components_total += external;
+
+            // Track unique components
+            for src in &component_srcs {
+                self.unique_components.insert(src.clone());
+            }
+
+            if let Some(ref mut logger) = self.logger {
+                logger.log(file_path, FileOperation::Compiled, &self.config.source);
+                for src in component_srcs {
+                    logger.log_component_occurrence(src);
+                }
+            }
+        }
+
+        // Calculate unique components
+        let internal_unique = self.unique_components.iter()
+            .filter(|src| !src.starts_with("http://") && !src.starts_with("https://"))
+            .count();
+        let external_unique = self.unique_components.iter()
+            .filter(|src| src.starts_with("http://") || src.starts_with("https://"))
+            .count();
+
+        stats.internal_components_unique = internal_unique;
+        stats.external_components_unique = external_unique;
+
+        // Calculate compile time (excluding component fetch time which is already tracked)
+        let elapsed = start.elapsed().as_secs_f64() * 1000.0;
+        stats.compile_time_ms = elapsed - stats.components_time_ms;
+
+        Ok(stats)
+    }
+
+    /// Copy specific asset files (incremental compilation for watch mode)
+    pub fn copy_specific_asset_files(
+        &mut self,
+        files: &[PathBuf],
+    ) -> Result<CompileStats, CompileError> {
+        let mut stats = CompileStats {
+            files_compiled: 0,
+            files_copied: 0,
+            internal_components_unique: 0,
+            external_components_unique: 0,
+            internal_components_total: 0,
+            external_components_total: 0,
+            compile_time_ms: 0.0,
+            copy_time_ms: 0.0,
+            components_time_ms: 0.0,
+            validation_time_ms: None,
+            node_modules_time_ms: None,
+            package_manager: None,
+            node_modules_copied_as_is: false,
+            components_as_is: self.config.components_as_is,
+        };
+
+        let start = Instant::now();
+
+        for file_path in files {
+            // Calculate relative path for preserving directory structure
+            let relative_path = file_path
+                .strip_prefix(&self.config.source)
+                .map(|p| p.parent().unwrap_or(Path::new("")))
+                .unwrap_or(Path::new(""))
+                .to_str()
+                .unwrap_or("");
+
+            self.copy_file(file_path, relative_path)?;
+            stats.files_copied += 1;
+
+            if let Some(ref mut logger) = self.logger {
+                logger.log(file_path, FileOperation::Copied, &self.config.source);
+            }
+        }
+
+        let elapsed = start.elapsed().as_secs_f64() * 1000.0;
+        stats.copy_time_ms = elapsed;
+
+        Ok(stats)
+    }
+
+    /// Generate manifests for specific HTML files (incremental compilation for watch mode)
+    pub fn generate_manifests_for_files(&self, files: &[PathBuf]) -> Result<ManifestStats, CompileError> {
+        let start = Instant::now();
+        let mut pages_processed = 0;
+        let mut pages_skipped = 0;
+
+        for file_path in files {
+            // Convert source path to output path
+            let relative_path = file_path
+                .strip_prefix(&self.config.source)
+                .unwrap_or(file_path)
+                .to_str()
+                .unwrap();
+
+            let output_path = self.config.output.join(relative_path);
+
+            if !output_path.exists() {
+                pages_skipped += 1;
+                continue;
+            }
+
+            // Read compiled HTML from output
+            let html = fs::read_to_string(&output_path)
+                .map_err(|e| CompileError::ReadError {
+                    path: output_path.display().to_string(),
+                    source: e,
+                })?;
+
+            // Try to generate manifest for this file (skip on error)
+            match Self::generate_file_manifest(
+                &html,
+                &output_path,
+                &self.config.output,
+                relative_path,
+                self.verbose,
+                self.config.iterations_as_is,
+                self.config.components_as_is,
+                &self.config.source,
+            ) {
+                Ok(()) => {
+                    pages_processed += 1;
+                }
+                Err(e) => {
+                    pages_skipped += 1;
+                    if self.verbose {
+                        println!("  Skipped ({}): {}", e, relative_path);
+                    }
+                }
+            }
+        }
+
+        let total_time_ms = start.elapsed().as_millis() as f64;
+
+        Ok(ManifestStats {
+            pages_processed,
+            pages_skipped,
+            total_time_ms,
+        })
+    }
+
     /// Generate manifest for a single file
     fn generate_file_manifest(
         html: &str,
@@ -512,21 +778,30 @@ impl Compiler {
         output_dir: &Path,
         relative_path: &str,
         _verbose: bool,
+        iterations_as_is: bool,
+        components_as_is: bool,
+        source_root: &Path,
     ) -> Result<(), String> {
-        use crate::compiler::state_extractor::StateExtractor;
         use crate::compiler::manifest_builder::ManifestBuilder;
         use crate::compiler::value_stamper::ValueStamper;
+        use crate::compiler::component_tagger::ComponentTagger;
 
-        // Extract state
-        let state = StateExtractor::extract_from_html(html)?;
+        // Tag components with deterministic IDs and structure state
+        let tagged = ComponentTagger::tag_components(html, &source_root.to_path_buf())?;
+        let html = &tagged.html;  // Use modified HTML with data-vibe-component-id attributes
+        let state = tagged.state;
 
-        // Build manifest
+        // Build manifest from ORIGINAL HTML (before stamping, so templates have @[...] markers)
         let manifest_builder = ManifestBuilder::new();
-        let manifest = manifest_builder.build_from_html(html, &state)?;
+        let manifest = manifest_builder.build_from_html(html, &state, iterations_as_is)?;
 
-        // Stamp values (pre-render)
-        let stamper = ValueStamper::new(&state);
-        let pre_rendered = stamper.stamp_html(html.to_string())?;
+        // Stamp values (pre-render) AFTER building manifest
+        // When components_as_is is true, skip stamping inside component elements (runtime will handle them)
+        let stamper = ValueStamper::new(&state, components_as_is)?;
+        let mut pre_rendered = stamper.stamp_html(html.to_string())?;
+
+        // Remove FOUC prevention since HTML is pre-rendered
+        pre_rendered = remove_fouc_prevention(pre_rendered);
 
         // Write pre-rendered HTML
         fs::write(html_path, pre_rendered)
@@ -572,31 +847,46 @@ impl Compiler {
         // Find all HTML files in compiled output (excluding components directory)
         let html_files = self.find_all_html_files(&self.config.output)?;
 
-        for html_path in html_files {
-            let relative_path = html_path.strip_prefix(&self.config.output)
-                .unwrap()
-                .to_str()
-                .unwrap();
-
-            // Read compiled HTML
-            let html = fs::read_to_string(&html_path)
-                .map_err(|e| CompileError::ReadError {
-                    path: html_path.display().to_string(),
-                    source: e,
-                })?;
+        // Process manifests in parallel
+        let output_dir = self.config.output.clone();
+        let source_root = self.config.source.clone();
+        let verbose = self.verbose;
+        let iterations_as_is = self.config.iterations_as_is;
+        let components_as_is = self.config.components_as_is;
+
+        let results: Vec<_> = html_files
+            .par_iter()
+            .map(|html_path| {
+                let relative_path = html_path.strip_prefix(&output_dir)
+                    .unwrap()
+                    .to_str()
+                    .unwrap();
+
+                // Read compiled HTML
+                let html = match fs::read_to_string(html_path) {
+                    Ok(h) => h,
+                    Err(_) => return (false, Some(relative_path.to_string())),
+                };
 
-            // Try to generate manifest for this file (skip on error)
-            match Self::generate_file_manifest(&html, &html_path, &self.config.output, relative_path, self.verbose) {
-                Ok(()) => {
-                    pages_processed += 1;
-                }
-                Err(e) => {
-                    pages_skipped += 1;
-                    if self.verbose {
-                        println!("  Skipped ({}): {}", e, relative_path);
+                // Try to generate manifest for this file (skip on error)
+                match Self::generate_file_manifest(&html, html_path, &output_dir, relative_path, verbose, iterations_as_is, components_as_is, &source_root) {
+                    Ok(()) => (true, None),
+                    Err(e) => {
+                        if verbose {
+                            eprintln!("  Skipped ({}): {}", e, relative_path);
+                        }
+                        (false, Some(relative_path.to_string()))
                     }
-                    // Don't fail compilation, just skip this file's manifest
                 }
+            })
+            .collect();
+
+        // Count results
+        for (success, _) in results {
+            if success {
+                pages_processed += 1;
+            } else {
+                pages_skipped += 1;
             }
         }
 
@@ -615,6 +905,7 @@ impl Compiler {
         dir: &Path,
         parser: &HtmlParser,
         relative_path: &str,
+        canonical_output: &Path,
         stats: &mut CompileStats,
     ) -> Result<(), CompileError> {
         let entries = fs::read_dir(dir).map_err(|e| CompileError::ReadError {
@@ -627,8 +918,14 @@ impl Compiler {
             let file_name = path.file_name().unwrap().to_str().unwrap();
 
             if path.is_dir() {
+                // Skip output directory (dynamically check, not hardcoded "compiled")
+                let canonical_path = path.canonicalize().unwrap_or_else(|_| path.clone());
+                if canonical_path == *canonical_output || canonical_path.starts_with(canonical_output) {
+                    continue;
+                }
+
                 // Skip special directories
-                if SKIP_DIRECTORIES.contains(&file_name) {
+                if should_skip_path(&path, file_name) {
                     continue;
                 }
 
@@ -644,7 +941,7 @@ impl Compiler {
                     format!("{}/{}", relative_path, file_name)
                 };
 
-                self.process_directory_html_only(&path, parser, &new_relative, stats)?;
+                self.process_directory_html_only(&path, parser, &new_relative, canonical_output, stats)?;
             } else if path.extension().and_then(|e| e.to_str()) == Some("html") {
                 let (internal, external, component_srcs) = self.compile_html_file(&path, parser, relative_path)?;
                 stats.files_compiled += 1;
@@ -692,6 +989,7 @@ impl Compiler {
         &mut self,
         dir: &Path,
         relative_path: &str,
+        canonical_output: &Path,
         stats: &mut CompileStats,
     ) -> Result<(), CompileError> {
         let entries = fs::read_dir(dir).map_err(|e| CompileError::ReadError {
@@ -704,8 +1002,14 @@ impl Compiler {
             let file_name = path.file_name().unwrap().to_str().unwrap();
 
             if path.is_dir() {
+                // Skip output directory (dynamically check, not hardcoded "compiled")
+                let canonical_path = path.canonicalize().unwrap_or_else(|_| path.clone());
+                if canonical_path == *canonical_output || canonical_path.starts_with(canonical_output) {
+                    continue;
+                }
+
                 // Skip special directories
-                if SKIP_DIRECTORIES.contains(&file_name) {
+                if should_skip_path(&path, file_name) {
                     continue;
                 }
 
@@ -736,8 +1040,13 @@ impl Compiler {
                     format!("{}/{}", relative_path, file_name)
                 };
 
-                self.process_directory_assets_only(&path, &new_relative, stats)?;
+                self.process_directory_assets_only(&path, &new_relative, canonical_output, stats)?;
             } else if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
+                // Skip files matching skip patterns
+                if should_skip_path(&path, file_name) {
+                    continue;
+                }
+
                 // Only copy non-HTML assets
                 if ext != "html" && MIRROR_EXTENSIONS.contains(&ext) {
                     self.copy_file(&path, relative_path)?;
@@ -775,14 +1084,14 @@ impl Compiler {
             (0, 0, Vec::new())
         };
 
-        // Compile: transform custom tags to <component>, inline if needed, accessibility transform
+        // Compile: transform custom tags to <component>, inline if needed, transform custom elements
         let processed = parser.process_html_with_cache(
             &content,
-            self.config.accessibility,
-            &self.config.exclude_tags,
+            self.config.elements_as_is,
+            &self.config.reserved_elements,
             self.config.components_as_is,
             &self.config.components,
-            &self.external_component_cache,
+            &self.component_cache,
         );
 
         // Minify if requested
@@ -844,7 +1153,7 @@ impl Compiler {
 
         // Read component content
         let content = if component_src.starts_with("http://") || component_src.starts_with("https://") {
-            match self.fetch_external_component(component_src) {
+            match self.fetch_external_component_raw(component_src) {
                 Ok(c) => c,
                 Err(_) => return,
             }
@@ -883,10 +1192,42 @@ impl Compiler {
         Ok(())
     }
 
-    fn validate_all_components(&mut self, parser: &HtmlParser) -> Result<(), CompileError> {
-        let mut errors = Vec::new();
+    /// Fetch components only for specific files (used in incremental compilation)
+    fn fetch_components_for_files(&mut self, files: &[PathBuf], parser: &HtmlParser) -> Result<(), CompileError> {
+        for html_file in files {
+            let content = match fs::read_to_string(html_file) {
+                Ok(c) => c,
+                Err(e) => {
+                    if self.verbose {
+                        eprintln!("  Warning: Failed to read {}: {}", html_file.display(), e);
+                    }
+                    continue;
+                }
+            };
 
-        // Find all HTML files in source directory
+            // Transform custom tags to <component> tags
+            let transformed = parser.process_html(
+                &content,
+                false, // elements_as_is
+                &[], // reserved_elements
+                true, // components_as_is (don't inline, just transform)
+                &self.config.components,
+            );
+
+            // Extract and fetch components recursively
+            let components = self.extract_component_srcs(&transformed);
+            for component_src in components {
+                self.fetch_component_recursive(&component_src, parser);
+            }
+        }
+
+        Ok(())
+    }
+
+    /// Fetch and cache all components for inlining (separate from validation)
+    /// This recursively fetches all components (external and internal) and populates component_cache
+    fn fetch_all_components(&mut self, parser: &HtmlParser) -> Result<(), CompileError> {
+        // Find all HTML files in source directory (need to scan pages to find external component references)
         let html_files = self.find_all_html_files(&self.config.source)?;
 
         // Scan each HTML file for components
@@ -894,135 +1235,159 @@ impl Compiler {
             let content = match fs::read_to_string(&html_file) {
                 Ok(c) => c,
                 Err(e) => {
-                    errors.push(ComponentError {
-                        component_src: html_file.display().to_string(),
-                        referenced_in: "source".to_string(),
-                        error_message: format!("Failed to read file: {}", e),
-                    });
+                    if self.verbose {
+                        eprintln!("  Warning: Failed to read {}: {}", html_file.display(), e);
+                    }
                     continue;
                 }
             };
 
-            // Transform custom tags to <component> tags (e.g., <headline> → <component src="/components/Headline.html">)
-            // Use process_html with elements_as_is=true to transform without inlining
+            // Transform custom tags to <component> tags
             let transformed = parser.process_html(
                 &content,
-                false, // accessibility
-                &[], // exclude_tags
-                true, // elements_as_is (don't inline, just transform)
+                false, // elements_as_is
+                &[], // reserved_elements
+                true, // components_as_is (don't inline, just transform)
                 &self.config.components,
             );
 
-            // Extract components from transformed content
+            // Extract and fetch components recursively
             let components = self.extract_component_srcs(&transformed);
             for component_src in components {
-                self.validate_component_recursive(
-                    &component_src,
-                    &html_file.display().to_string(),
-                    &mut errors,
-                    parser,
-                );
+                self.fetch_component_recursive(&component_src, parser);
             }
         }
 
-        // If any errors, return them all
-        if !errors.is_empty() {
-            return Err(CompileError::ComponentValidationFailed(errors));
-        }
-
         Ok(())
     }
 
-    fn validate_component_recursive(
-        &mut self,
-        component_src: &str,
-        referenced_in: &str,
-        errors: &mut Vec<ComponentError>,
-        parser: &HtmlParser,
-    ) {
-        // Skip if we've already scanned this component
-        if self.scanned_components.contains(component_src) {
-            return;
+    /// Recursively fetch a component and its nested components (for inlining)
+    /// Returns the fully inlined content (all nested components resolved)
+    fn fetch_component_recursive(&mut self, component_src: &str, parser: &HtmlParser) -> Option<String> {
+        // Normalize path: ensure it starts with / (unless it's a URL)
+        let normalized_src = if component_src.starts_with("http://") || component_src.starts_with("https://") {
+            component_src.to_string()
+        } else {
+            let without_prefix = component_src.trim_start_matches("./");
+            if without_prefix.starts_with('/') {
+                without_prefix.to_string()
+            } else {
+                format!("/{}", without_prefix)
+            }
+        };
+
+        // Return cached if already fetched and fully resolved
+        if let Some(cached) = self.component_cache.get(&normalized_src) {
+            return Some(cached.clone());
         }
-        self.scanned_components.insert(component_src.to_string());
-
-        // Check if it's external (http:// or https://)
-        if component_src.starts_with("http://") || component_src.starts_with("https://") {
-            // Fetch external component
-            match self.fetch_external_component(component_src) {
-                Ok(content) => {
-                    // Transform custom tags in fetched content
-                    let transformed = parser.process_html(
-                        &content,
-                        false,
-                        &[],
-                        true,
-                        &self.config.components,
-                    );
-
-                    // Recursively scan for nested components
-                    let nested = self.extract_component_srcs(&transformed);
-                    for nested_src in nested {
-                        self.validate_component_recursive(&nested_src, component_src, errors, parser);
-                    }
-                }
+
+        // Fetch external or read internal component (raw content)
+        let content = if normalized_src.starts_with("http://") || normalized_src.starts_with("https://") {
+            match self.fetch_external_component_raw(&normalized_src) {
+                Ok(c) => c,
                 Err(e) => {
-                    errors.push(ComponentError {
-                        component_src: component_src.to_string(),
-                        referenced_in: referenced_in.to_string(),
-                        error_message: e,
-                    });
+                    if self.verbose {
+                        eprintln!("  Warning: Failed to fetch {}: {}", normalized_src, e);
+                    }
+                    return None;
                 }
             }
         } else {
-            // Internal component - resolve path
-            let component_path = self.resolve_component_path(component_src);
-            match component_path {
-                Ok(path) => {
-                    // Read component file
-                    match fs::read_to_string(&path) {
-                        Ok(content) => {
-                            // Transform custom tags in component content
-                            let transformed = parser.process_html(
-                                &content,
-                                false,
-                                &[],
-                                true,
-                                &self.config.components,
-                            );
-
-                            // Recursively scan for nested components
-                            let nested = self.extract_component_srcs(&transformed);
-                            for nested_src in nested {
-                                self.validate_component_recursive(&nested_src, component_src, errors, parser);
-                            }
-                        }
-                        Err(e) => {
-                            errors.push(ComponentError {
-                                component_src: component_src.to_string(),
-                                referenced_in: referenced_in.to_string(),
-                                error_message: format!("Failed to read component file: {}", e),
-                            });
+            match self.resolve_component_path(&normalized_src) {
+                Ok(path) => match fs::read_to_string(&path) {
+                    Ok(c) => c,
+                    Err(e) => {
+                        if self.verbose {
+                            eprintln!("  Warning: Failed to read component {}: {}", normalized_src, e);
                         }
+                        return None;
                     }
-                }
+                },
                 Err(e) => {
-                    errors.push(ComponentError {
-                        component_src: component_src.to_string(),
-                        referenced_in: referenced_in.to_string(),
-                        error_message: e,
-                    });
+                    if self.verbose {
+                        eprintln!("  Warning: {}", e);
+                    }
+                    return None;
                 }
             }
+        };
+
+        // Transform custom tags in component (but keep component tags as-is for now)
+        let mut transformed = parser.process_html(
+            &content,
+            self.config.elements_as_is, // respect global config
+            &self.config.reserved_elements.clone(), // respect global config
+            true, // components_as_is = true (keep <component> tags for now so we can recursively resolve them)
+            &self.config.components,
+        );
+
+        // Recursively fetch and inline all nested components
+        let nested = self.extract_component_srcs(&transformed);
+        for nested_src in nested {
+            if let Some(nested_content) = self.fetch_component_recursive(&nested_src, parser) {
+                // Inline this nested component into the current component
+                transformed = parser.inline_single_component(&transformed, &nested_src, &nested_content);
+            }
         }
+
+        // Cache the fully resolved content
+        self.component_cache.insert(normalized_src.clone(), transformed.clone());
+
+        Some(transformed)
     }
 
-    fn fetch_external_component(&mut self, url: &str) -> Result<String, String> {
-        // Check cache first
-        if let Some(cached) = self.external_component_cache.get(url) {
-            return Ok(cached.clone());
+    /// Validate that component filenames don't match reserved elements
+    fn validate_component_names(&self) -> Result<(), CompileError> {
+        let components_dir = self.config.components_path();
+
+        if !components_dir.exists() {
+            return Ok(()); // No components directory
         }
 
+        let component_files = self.find_all_html_files(&components_dir)?;
+
+        for component_file in component_files {
+            let file_name = component_file
+                .file_stem()
+                .and_then(|s| s.to_str())
+                .unwrap_or("");
+
+            // Check if filename (case-sensitive) matches any reserved element
+            if self.config.reserved_elements.contains(&file_name.to_string()) {
+                let relative_path = component_file
+                    .strip_prefix(&self.config.source)
+                    .unwrap_or(&component_file);
+
+                return Err(CompileError::ReservedComponentName {
+                    component_name: file_name.to_string(),
+                    file_path: relative_path.display().to_string(),
+                });
+            }
+        }
+
+        Ok(())
+    }
+
+    /// Validate HTML syntax for all files (controlled by validate flag)
+    fn validate_html_syntax(&self) -> Result<(), CompileError> {
+        // Find all HTML files in source directory
+        let html_files = self.find_all_html_files(&self.config.source)?;
+
+        for html_file in html_files {
+            let content = fs::read_to_string(&html_file).map_err(|e| CompileError::ReadError {
+                path: html_file.display().to_string(),
+                source: e,
+            })?;
+
+            // Validate HTML syntax
+            self.validate_html(&content, &html_file)?;
+        }
+
+        Ok(())
+    }
+
+    /// Fetch external component without caching (returns raw content)
+    fn fetch_external_component_raw(&self, url: &str) -> Result<String, String> {
         // Fetch from URL
         match reqwest::blocking::get(url) {
             Ok(response) => {
@@ -1030,11 +1395,7 @@ impl Compiler {
                     return Err(format!("HTTP {} - {}", response.status().as_u16(), response.status().canonical_reason().unwrap_or("Unknown")));
                 }
                 match response.text() {
-                    Ok(content) => {
-                        // Cache the result
-                        self.external_component_cache.insert(url.to_string(), content.clone());
-                        Ok(content)
-                    }
+                    Ok(content) => Ok(content),
                     Err(e) => Err(format!("Failed to read response body: {}", e)),
                 }
             }
@@ -1057,7 +1418,9 @@ impl Compiler {
 
     fn extract_component_srcs(&self, content: &str) -> Vec<String> {
         let mut srcs = Vec::new();
-        let re = Regex::new(r#"<component[^>]+src\s*=\s*["']([^"']+)["']"#).unwrap();
+        // Match both <component src="..."> and <div class="component" src="...">
+        // After elements_as_is=false transform, <component> becomes <div class="component">
+        let re = Regex::new(r#"(?:<component|<div\s+class="component")[^>]+src\s*=\s*["']([^"']+)["']"#).unwrap();
         for cap in re.captures_iter(content) {
             if let Some(src) = cap.get(1) {
                 srcs.push(src.as_str().to_string());
@@ -1068,11 +1431,15 @@ impl Compiler {
 
     fn find_all_html_files(&self, dir: &Path) -> Result<Vec<PathBuf>, CompileError> {
         let mut html_files = Vec::new();
-        self.find_html_files_recursive(dir, &mut html_files)?;
+        // Get output directory basename to skip nested directories with same name
+        let output_dir_name = self.config.output.file_name()
+            .and_then(|n| n.to_str())
+            .unwrap_or("");
+        self.find_html_files_recursive(dir, &mut html_files, output_dir_name)?;
         Ok(html_files)
     }
 
-    fn find_html_files_recursive(&self, dir: &Path, files: &mut Vec<PathBuf>) -> Result<(), CompileError> {
+    fn find_html_files_recursive(&self, dir: &Path, files: &mut Vec<PathBuf>, output_dir_name: &str) -> Result<(), CompileError> {
         if !dir.is_dir() {
             return Ok(());
         }
@@ -1092,8 +1459,8 @@ impl Compiler {
             let file_name = entry.file_name();
             let file_name_str = file_name.to_string_lossy();
 
-            // Skip hidden files and specific directories
-            if file_name_str.starts_with('.') || SKIP_DIRECTORIES.contains(&file_name_str.as_ref()) {
+            // Skip hidden files and specific directories/patterns
+            if file_name_str.starts_with('.') || should_skip_path(&path, &file_name_str) {
                 continue;
             }
 
@@ -1102,8 +1469,13 @@ impl Compiler {
                 continue;
             }
 
+            // Skip nested directories with same name as output dir (from previous bad compilations)
+            if !output_dir_name.is_empty() && file_name_str == output_dir_name {
+                continue;
+            }
+
             if path.is_dir() {
-                self.find_html_files_recursive(&path, files)?;
+                self.find_html_files_recursive(&path, files, output_dir_name)?;
             } else if path.extension().and_then(|e| e.to_str()) == Some("html") {
                 files.push(path);
             }
@@ -1162,6 +1534,11 @@ impl Compiler {
             let path = entry.path();
             let file_name = path.file_name().unwrap().to_str().unwrap();
 
+            // Skip files/directories matching skip patterns
+            if should_skip_path(&path, file_name) {
+                continue;
+            }
+
             if path.is_dir() {
                 let new_relative = format!("{}/{}", relative_path, file_name);
                 self.copy_directory(&path, &new_relative, stats)?;