@ape-egg/vibe 1.6.0 → 1.7.0

package/compiler/src/compiler/component_tagger.rs

@@ -20,10 +20,23 @@ pub struct TaggedResult {
 impl ComponentTagger {
     /// Find component wrappers, add deterministic IDs, and structure state
     pub fn tag_components(html: &str, base_path: &PathBuf) -> Result<TaggedResult, String> {
-        // Parse HTML
+        // Extract ALL <template> content to protect it from HTML parser
+        // HTML parsers can strip content from <template> tags during serialization
+        let template_regex = regex::Regex::new(r"(?s)<template[^>]*>.*?</template>").unwrap();
+        let mut template_placeholders: Vec<String> = Vec::new();
+        let mut html_with_placeholders = html.to_string();
+
+        for (i, mat) in template_regex.find_iter(html).enumerate() {
+            let content = mat.as_str();
+            let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);
+            template_placeholders.push(content.to_string());
+            html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
+        }
+
+        // Parse HTML (with placeholders instead of actual vibe-dehydrate content)
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
-            .read_from(&mut html.as_bytes())
+            .read_from(&mut html_with_placeholders.as_bytes())
             .map_err(|e| format!("Failed to parse HTML: {:?}", e))?;
 
         // Find all component wrappers and extract their state
@@ -39,9 +52,15 @@ impl ComponentTagger {
             SerializeOpts::default()
         ).map_err(|e| format!("Failed to serialize HTML: {:?}", e))?;
 
-        let modified_html = String::from_utf8(modified_html_bytes)
+        let mut modified_html = String::from_utf8(modified_html_bytes)
             .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
 
+        // Restore template content from placeholders
+        for (i, content) in template_placeholders.iter().enumerate() {
+            let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);
+            modified_html = modified_html.replace(&placeholder, content);
+        }
+
         // Extract all state from HTML
         let all_state = StateExtractor::extract_from_html(html, base_path)?;
 

package/compiler/src/compiler/value_stamper.rs

@@ -79,8 +79,21 @@ impl<'a> ValueStamper<'a> {
     }
 
     pub fn stamp_html(&self, html: String) -> Result<String, String> {
+        // Extract vibe-dehydrate content to protect it from processing
+        // This prevents @[...] markers and iterations/conditionals from being processed
+        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        let mut dehydrate_placeholders: Vec<String> = Vec::new();
+        let mut html_with_placeholders = html.clone();
+
+        for (i, mat) in dehydrate_regex.find_iter(&html).enumerate() {
+            let content = mat.as_str();
+            let placeholder = format!("<!--VIBE_DEHYDRATE_PLACEHOLDER_{}-->", i);
+            dehydrate_placeholders.push(content.to_string());
+            html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
+        }
+
         // First, render iterations (expands templates into multiple instances)
-        let html = self.render_iterations(html)?;
+        let html = self.render_iterations(html_with_placeholders)?;
 
         // Then, render conditionals (resolve if/else branches)
         let html = self.render_conditionals(html)?;
@@ -95,6 +108,13 @@ impl<'a> ValueStamper<'a> {
             }
         }
 
+        // Skip elements with vibe-dehydrate attribute (content should not be processed)
+        // This is a secondary protection in case placeholders aren't used
+        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        for mat in dehydrate_regex.find_iter(&html) {
+            skip_regions.push((mat.start(), mat.end()));
+        }
+
         // When components_as_is is true, skip component elements (runtime will handle them)
         // Match both <component> and <div class="component"> elements
         if self.components_as_is {
@@ -148,6 +168,15 @@ impl<'a> ValueStamper<'a> {
         // Add remaining text
         result.push_str(&html[last_pos..]);
 
+        // Clean up attributes that still contain unresolved markers
+        result = self.cleanup_unresolved_attributes(result);
+
+        // Restore vibe-dehydrate content from placeholders
+        for (i, content) in dehydrate_placeholders.iter().enumerate() {
+            let placeholder = format!("<!--VIBE_DEHYDRATE_PLACEHOLDER_{}-->", i);
+            result = result.replace(&placeholder, content);
+        }
+
         // Finally, clean up boolean-like attributes with falsy values
         // When components_as_is is true, skip cleanup inside component elements
         Ok(self.cleanup_boolean_attributes(result, &skip_regions))
@@ -238,13 +267,19 @@ impl<'a> ValueStamper<'a> {
                     // Render nested iterations first
                     let mut item_html = temp_stamper.render_iterations_recursive(template.clone())?;
 
-                    // Then stamp all bindings in this item's context
+                    // Then render conditionals with this item's context
+                    item_html = temp_stamper.render_conditionals(item_html)?;
+
+                    // Finally stamp all bindings in this item's context
                     item_html = temp_stamper.binding_regex.replace_all(&item_html, |caps: &Captures| {
                         let expr = &caps[1];
                         temp_stamper.eval_expression(expr)
                             .unwrap_or_else(|| caps[0].to_string())
                     }).to_string();
 
+                    // Clean up attributes with unresolved markers (e.g., data-tutorial="@[item.id]" when item.id is undefined)
+                    item_html = temp_stamper.cleanup_unresolved_attributes(item_html);
+
                     rendered_items.push(item_html);
                 }
 
@@ -500,9 +535,31 @@ impl<'a> ValueStamper<'a> {
     fn try_eval_condition(&self, condition: &str) -> Option<bool> {
         self.context.with(|ctx| -> Option<bool> {
             // Try to evaluate condition
-            // If it fails (e.g., references undefined iteration variables), return None
-            let result: rquickjs::Value = ctx.eval(condition).ok()?;
-            result.as_bool()
+            let result: rquickjs::Value = match ctx.eval(condition) {
+                Ok(val) => val,
+                Err(_) => {
+                    // Evaluation failed (undefined variable, syntax error, etc.)
+                    // Default to false as per requirements
+                    return Some(false);
+                }
+            };
+
+            // Use JavaScript truthiness rules instead of requiring boolean type
+            // This allows conditions like "item.id" to work correctly
+            if result.is_bool() {
+                result.as_bool()
+            } else if result.is_null() || result.is_undefined() {
+                Some(false)
+            } else if result.is_number() {
+                // 0, NaN are falsy
+                result.as_number().map(|n| n != 0.0 && !n.is_nan())
+            } else if result.is_string() {
+                // Empty string is falsy
+                result.as_string().and_then(|s| s.to_string().ok()).map(|s| !s.is_empty())
+            } else {
+                // Objects, arrays are truthy
+                Some(true)
+            }
         })
     }
 
@@ -510,6 +567,19 @@ impl<'a> ValueStamper<'a> {
     /// Boolean-like attributes (not in VALUE_ATTRS) should be:
     /// - Removed entirely when falsy
     /// - Present with empty value when truthy (HTML5 boolean attribute syntax)
+    /// Remove attributes that still contain unresolved markers (e.g., data-tutorial="@[item.id]")
+    /// These occur when iterating over items where some don't have the referenced property
+    fn cleanup_unresolved_attributes(&self, html: String) -> String {
+        // Match attributes with marker values: attr="@[...]"
+        // Use non-greedy match and look for closing "]" at end of attribute value
+        let attr_with_marker = Regex::new(r#"\s+([\w-]+)="@\[.+?\]""#).unwrap();
+
+        attr_with_marker.replace_all(&html, |_caps: &Captures| {
+            // Remove the entire attribute when it has an unresolved marker
+            String::new()
+        }).to_string()
+    }
+
     fn cleanup_boolean_attributes(&self, html: String, skip_regions: &[(usize, usize)]) -> String {
         // Create a set for faster lookup
         let value_attrs: HashSet<&str> = VALUE_ATTRS.iter().copied().collect();

package/compiler/src/compiler/watcher.rs

@@ -328,7 +328,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
 
     // Keep compiler and parser alive to reuse component cache across incremental compilations
     let mut watch_compiler = Compiler::new(config.clone(), false);
-    let parser = {
+    let mut parser = {
         use crate::parser::HtmlParser;
         let mut p = HtmlParser::new(config.components_path());
         if let Err(e) = p.load_elements() {
@@ -396,10 +396,52 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                 let dependent_pages = graph.get_all_dependent_pages(&path_canonical);
                                 if !dependent_pages.is_empty() {
                                     println!("{} {} changed", "[watch]".cyan(), relative_path.display());
+
+                                    // Invalidate component cache so stale content isn't used
+                                    watch_compiler.clear_component_cache();
+
+                                    // Reload the changed component in the parser's element cache
+                                    // (used for custom element syntax like <Layout>)
+                                    if path.exists() {
+                                        let _ = parser.reload_element(path);
+                                    }
+
                                     pages_to_recompile.extend(dependent_pages);
                                 }
                             } else if let Some(ext) = path.extension() {
                                 if ext == "html" {
+                                    // Check if file still exists (handle deletions)
+                                    if !path.exists() {
+                                        // File was deleted - clean up dependency graph
+                                        println!("{} {} deleted", "[watch]".yellow(), relative_path.display());
+
+                                        if let Some(old_deps) = graph.page_to_components.remove(path) {
+                                            for dep in old_deps {
+                                                if let Some(pages) = graph.component_to_pages.get_mut(&dep) {
+                                                    pages.remove(path);
+                                                }
+                                            }
+                                        }
+
+                                        // Delete corresponding compiled output
+                                        let output_path = canonical_output.join(relative_path);
+                                        if output_path.exists() {
+                                            if let Err(e) = std::fs::remove_file(&output_path) {
+                                                eprintln!("{}: Failed to delete {}: {}", "Warning".yellow(), output_path.display(), e);
+                                            }
+                                        }
+
+                                        // Delete corresponding manifest
+                                        let manifest_path = canonical_output.join("vibe-hyperspeed").join(format!("{}.manifest.js", relative_path.display()));
+                                        if manifest_path.exists() {
+                                            if let Err(e) = std::fs::remove_file(&manifest_path) {
+                                                eprintln!("{}: Failed to delete manifest {}: {}", "Warning".yellow(), manifest_path.display(), e);
+                                            }
+                                        }
+
+                                        continue;
+                                    }
+
                                     // Page changed - recompile just this page
                                     println!("{} {} changed", "[watch]".cyan(), relative_path.display());
                                     pages_to_recompile.insert(path.clone());
@@ -431,7 +473,10 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                         }
 
                         // Separate HTML files (from dependency graph) and CSS/JS assets (from changed_paths)
-                        let html_files: Vec<PathBuf> = pages_to_recompile.into_iter().collect();
+                        // Filter out deleted files
+                        let html_files: Vec<PathBuf> = pages_to_recompile.into_iter()
+                            .filter(|p| p.exists())
+                            .collect();
 
                         let mut asset_files: Vec<PathBuf> = Vec::new();
                         for path in &changed_paths {
@@ -446,6 +491,24 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                 continue;
                             }
 
+                            // Handle deleted asset files
+                            if !path.exists() {
+                                if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
+                                    if ext == "css" || ext == "js" {
+                                        let relative_path = path.strip_prefix(&config.source).unwrap_or(path);
+                                        let output_path = canonical_output.join(relative_path);
+                                        if output_path.exists() {
+                                            if let Err(e) = std::fs::remove_file(&output_path) {
+                                                eprintln!("{}: Failed to delete {}: {}", "Warning".yellow(), output_path.display(), e);
+                                            } else {
+                                                println!("{} {} deleted", "[watch]".yellow(), relative_path.display());
+                                            }
+                                        }
+                                    }
+                                }
+                                continue;
+                            }
+
                             if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
                                 if ext == "css" || ext == "js" {
                                     asset_files.push(path.clone());
@@ -482,6 +545,10 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
 
                         // Compile HTML files
                         if !html_files.is_empty() {
+                                // Always clear component cache before recompiling so components
+                                // are read fresh from disk (prevents stale cache from previous triggers)
+                                watch_compiler.clear_component_cache();
+
                                 match watch_compiler.compile_specific_html_files(&html_files, &parser) {
                                     Ok(stats) => {
                                         total_stats.files_compiled = stats.files_compiled;

package/compiler/src/config.rs

@@ -44,6 +44,10 @@ pub struct VibeCompilerConfig {
     pub runtime_as_is: bool,
     #[serde(default)]
     pub iterations_as_is: bool,
+    #[serde(default)]
+    pub no_clean: bool,
+    #[serde(default)]
+    pub fouc_as_is: bool,
 }
 
 fn default_source() -> String { "./".to_string() }
@@ -99,6 +103,8 @@ impl Default for VibeCompilerConfig {
             components_as_is: false,
             runtime_as_is: false,
             iterations_as_is: false,
+            no_clean: false,
+            fouc_as_is: false,
         }
     }
 }
@@ -122,6 +128,8 @@ pub struct Config {
     pub components_as_is: bool,
     pub runtime_as_is: bool,
     pub iterations_as_is: bool,
+    pub no_clean: bool,
+    pub fouc_as_is: bool,
     pub working_dir: PathBuf,
 }
 
@@ -168,6 +176,8 @@ impl Config {
             components_as_is: config.components_as_is,
             runtime_as_is: config.runtime_as_is,
             iterations_as_is: config.iterations_as_is,
+            no_clean: config.no_clean,
+            fouc_as_is: config.fouc_as_is,
             working_dir,
         }
     }

package/compiler/src/main.rs

@@ -26,7 +26,7 @@ struct ConfigOverrides {
 #[derive(ClapParser, Debug)]
 #[command(name = "vibe-compile")]
 #[command(author = "Kim Korte")]
-#[command(version = "0.1.0")]
+#[command(version = "1.6.1")]
 #[command(about = "Compiles Vibe source files into optimized output")]
 struct Args {
     /// Working directory (defaults to current directory)
@@ -84,6 +84,14 @@ struct Args {
     /// Skip iteration optimization - use runtime DOM cloning instead of compiled batch functions
     #[arg(long, name = "iterations-as-is")]
     iterations_as_is: bool,
+
+    /// Skip cleaning output directory before compilation
+    #[arg(long, name = "no-clean", hide = true)]
+    no_clean: bool,
+
+    /// Keep FOUC prevention class/attribute in compiled output
+    #[arg(long, name = "fouc-as-is")]
+    fouc_as_is: bool,
 }
 
 fn main() {
@@ -161,9 +169,15 @@ fn main() {
         overrides.iterations_as_is = !original_iterations_as_is;
         config.iterations_as_is = true;
     }
+    if args.no_clean {
+        config.no_clean = true;
+    }
+    if args.fouc_as_is {
+        config.fouc_as_is = true;
+    }
 
     if args.verbose {
-        println!("{}", "Vibe Compiler".cyan().bold());
+        println!("{}", format!("Vibe Compiler v{}", env!("CARGO_PKG_VERSION")).cyan().bold());
         println!();
         println!("  {}: {}", "Working dir".cyan(), config.working_dir.display());
         println!("  {}: {}", "Source".cyan(), config.source.display());
@@ -191,22 +205,35 @@ fn main() {
             format!("{} (config: {})", value.to_string().green(), value.to_string().yellow())
         }
 
-        // Alphabetically ordered with padding (longest key is "node-modules-as-is" = 18 chars)
-        println!("  {}: {}", format!("{:<18}", "assets").cyan(), format_value_no_flag(&config._assets));
-        println!("  {}: {}", format!("{:<18}", "components").cyan(), format_value_no_flag(&config.components));
-        println!("  {}: {}", format!("{:<18}", "components-as-is").cyan(), format_bool_with_flag(config.components_as_is, overrides.components_as_is, original_components_as_is));
-        println!("  {}: {}", format!("{:<18}", "elements-as-is").cyan(), format_bool_with_flag(config.elements_as_is, overrides.elements_as_is, original_elements_as_is));
-        println!("  {}: {}", format!("{:<18}", "exclude-tags").cyan(), format_value_no_flag(format!("{:?}", config.reserved_elements)));
-        println!("  {}: {}", format!("{:<18}", "minify").cyan(), format_bool_with_flag(config.minify, overrides.minify, original_minify));
-        println!("  {}: {}", format!("{:<18}", "node-modules-as-is").cyan(), format_bool_with_flag(config.node_modules_as_is, overrides.node_modules_as_is, original_node_modules_as_is));
-        println!("  {}: {}", format!("{:<18}", "output").cyan(), format_value_no_flag(&config._output_str));
-        println!("  {}: {}", format!("{:<18}", "pages").cyan(), format_value_no_flag(&config.pages));
-        println!("  {}: {}", format!("{:<18}", "root").cyan(), format_value_no_flag(config._root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
-        println!("  {}: {}", format!("{:<18}", "runtime-as-is").cyan(), format_bool_with_flag(config.runtime_as_is, overrides.runtime_as_is, original_runtime_as_is));
-        println!("  {}: {}", format!("{:<18}", "source").cyan(), format_value_no_flag(&config._source_str));
-        println!("  {}: {}", format!("{:<18}", "source-maps").cyan(), format_bool_with_flag(config.source_maps, overrides.source_maps, original_source_maps));
-        println!("  {}: {}", format!("{:<18}", "validate").cyan(), format_bool_with_flag(config.validate, overrides.validate, original_validate));
+        fn format_reserved_elements(elements: &[String]) -> String {
+            if elements.len() <= 2 {
+                format!("{:?}", elements)
+            } else {
+                let remaining = elements.len() - 2;
+                format!("[\"component\", \"div\", ... + {} more]", remaining)
+            }
+        }
+
+        // Alphabetically ordered with padding (longest key is "reservedElements" = 16 chars)
+        println!("  {}: {}", format!("{:<16}", "assets").cyan(), format_value_no_flag(&config._assets));
+        println!("  {}: {}", format!("{:<16}", "components").cyan(), format_value_no_flag(&config.components));
+        println!("  {}: {}", format!("{:<16}", "componentsAsIs").cyan(), format_bool_with_flag(config.components_as_is, overrides.components_as_is, original_components_as_is));
+        println!("  {}: {}", format!("{:<16}", "elementsAsIs").cyan(), format_bool_with_flag(config.elements_as_is, overrides.elements_as_is, original_elements_as_is));
+        println!("  {}: {}", format!("{:<16}", "iterationsAsIs").cyan(), format_bool_with_flag(config.iterations_as_is, overrides.iterations_as_is, original_iterations_as_is));
+        println!("  {}: {}", format!("{:<16}", "minify").cyan(), format_bool_with_flag(config.minify, overrides.minify, original_minify));
+        println!("  {}: {}", format!("{:<16}", "nodeModulesAsIs").cyan(), format_bool_with_flag(config.node_modules_as_is, overrides.node_modules_as_is, original_node_modules_as_is));
+        println!("  {}: {}", format!("{:<16}", "output").cyan(), format_value_no_flag(&config._output_str));
+        println!("  {}: {}", format!("{:<16}", "pages").cyan(), format_value_no_flag(&config.pages));
+        println!("  {}: {}", format!("{:<16}", "reservedElements").cyan(), format_value_no_flag(format_reserved_elements(&config.reserved_elements)));
+        println!("  {}: {}", format!("{:<16}", "root").cyan(), format_value_no_flag(config._root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
+        println!("  {}: {}", format!("{:<16}", "runtimeAsIs").cyan(), format_bool_with_flag(config.runtime_as_is, overrides.runtime_as_is, original_runtime_as_is));
+        println!("  {}: {}", format!("{:<16}", "source").cyan(), format_value_no_flag(&config._source_str));
+        println!("  {}: {}", format!("{:<16}", "sourceMaps").cyan(), format_bool_with_flag(config.source_maps, overrides.source_maps, original_source_maps));
+        println!("  {}: {}", format!("{:<16}", "validate").cyan(), format_bool_with_flag(config.validate, overrides.validate, original_validate));
         println!();
+    } else {
+        // Show version in non-verbose mode
+        println!("{}", format!("Vibe Compiler v{}", env!("CARGO_PKG_VERSION")).cyan());
     }
 
     // Handle watch mode
@@ -243,7 +270,7 @@ fn main() {
             }
 
             // Show success headline
-            println!("\n{}", "Compilation successful! ✅".green().bold());
+            println!("\n{}", format!("Compilation successful! (v{}) ✅", env!("CARGO_PKG_VERSION")).green().bold());
             println!();
 
             // Show individual phase timings (validation first, then components, HTML, manifests, copied)

package/compiler/src/parser/html.rs

@@ -71,6 +71,21 @@ impl HtmlParser {
         Ok(())
     }
 
+    /// Reload a single element from disk (when the file changes in watch mode)
+    pub fn reload_element(&mut self, path: &Path) -> Result<(), ParseError> {
+        if path.extension().map_or(false, |ext| ext == "html") {
+            if let Some(tag_name) = path.file_stem().and_then(|s| s.to_str()) {
+                let content = fs::read_to_string(path).map_err(|e| ParseError::ReadError {
+                    path: path.display().to_string(),
+                    source: e,
+                })?;
+                let element = Element::new(tag_name.to_string(), path.to_path_buf(), content);
+                self.cache.insert(tag_name.to_string(), element);
+            }
+        }
+        Ok(())
+    }
+
     /// Get an element by tag name
     pub fn _get_element(&self, tag_name: &str) -> Option<&Element> {
         self.cache.get(tag_name)
@@ -115,8 +130,20 @@ impl HtmlParser {
 
         // Step 2: Handle explicit <component src="..."> elements
         // If components_as_is is false, recursively inline all <component> elements
+        // Keep running until no more components are found (handles nested components in slots)
         if !components_as_is {
-            result = self.inline_component_elements(&result, external_cache);
+            let mut iterations = 0;
+            let max_iterations = 50; // Prevent infinite loops
+            loop {
+                let before = result.clone();
+                result = self.inline_component_elements(&result, external_cache);
+                iterations += 1;
+
+                // Stop if no changes or max iterations reached
+                if result == before || iterations >= max_iterations {
+                    break;
+                }
+            }
 
             // NOTE: Don't run inline_custom_elements again here - it causes infinite recursion
             // Custom elements inside components are already processed when the component was cached
@@ -366,7 +393,7 @@ impl HtmlParser {
                 replacement = replacement.replace("<slot/>", slot_replacement);
                 replacement = replacement.replace("<slot />", slot_replacement);
 
-                // Keep the <component> wrapper
+                // Keep the <component> wrapper (without src attribute)
                 let wrapper = format!("<component>{}</component>", replacement);
                 result.replace_range(*start..*end, &wrapper);
             }
@@ -440,16 +467,41 @@ fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) ->
         }
     }
 
+    // Sort by descending length so more specific tags (e.g. "accordion-content")
+    // are processed before shorter prefixes (e.g. "accordion"), preventing
+    // partial tag-name matches like <accordion([^>]*)> matching <accordion-content>
+    custom_tags.sort_by(|a, b| b.len().cmp(&a.len()));
+
+    // Pre-compile class attribute regex for merging existing class values
+    let class_attr_re = regex::Regex::new(r#"\bclass="([^"]*)""#).unwrap();
+
     // Transform each custom tag
-    for tag in custom_tags {
-        // Opening tag: <custom-tag attrs> -> <div class="custom-tag" attrs>
-        let open_re = regex::Regex::new(&format!(r"<{}([^>]*)>", regex::escape(&tag))).unwrap();
-        result = open_re
-            .replace_all(&result, format!("<div class=\"{}\"$1>", tag).as_str())
-            .to_string();
+    for tag in &custom_tags {
+        // Opening tag: require whitespace or end-of-tag after the tag name so that
+        // <accordion> does not accidentally match <accordion-content>
+        let open_re = regex::Regex::new(
+            &format!(r"<{}([\s][^>]*|)>", regex::escape(tag))
+        ).unwrap();
+
+        result = open_re.replace_all(&result, |caps: &regex::Captures| -> String {
+            let attrs = caps.get(1).map(|m| m.as_str()).unwrap_or("");
+
+            // If the element already has class="...", merge tag name with existing value
+            if let Some(class_cap) = class_attr_re.captures(attrs) {
+                let existing = class_cap.get(1).unwrap().as_str();
+                let merged = format!("{} {}", tag, existing);
+                let new_attrs = class_attr_re.replace(
+                    attrs,
+                    format!(r#"class="{}""#, merged.trim()).as_str(),
+                );
+                format!("<div{}>", new_attrs)
+            } else {
+                format!("<div class=\"{}\"{}>", tag, attrs)
+            }
+        }).to_string();
 
         // Closing tag: </custom-tag> -> </div>
-        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(&tag))).unwrap();
+        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(tag))).unwrap();
         result = close_re.replace_all(&result, "</div>").to_string();
     }
 

package/index.js

@@ -1,15 +1,41 @@
 // Universal entry point for Vibe
 // Usage: import vibe from 'vibe/index.js'; vibe({ initialState }, { debug: true }, 'body');
 
-import { ensureBoot, boot, isBooted } from './boot.js';
+import { boot, isBooted, ensureBoot } from './boot.js';
+
+// Shared instance for queueing listeners before boot
+let vibeInstance = null;
+
+const createVibeInstance = () => ({
+  _pendingListeners: { afterUpdate: [], afterDomMutation: [], ready: [] },
+  on(event, callback) {
+    // If booted, delegate to window.$
+    if (isBooted() && window.$) {
+      return window.$.on(event, callback);
+    }
+
+    // Otherwise queue for later
+    if (this._pendingListeners[event]) {
+      this._pendingListeners[event].push(callback);
+    }
+    return () => {
+      this._pendingListeners[event] = this._pendingListeners[event].filter(cb => cb !== callback);
+    };
+  }
+});
 
 const vibe = (state = {}, config, targetSelector) => {
   if (isBooted()) {
-    // Already booted - mutate live state
+    // Already booted - merge state into live proxy
     Object.assign(window.$, state);
     return window.$;
   }
 
+  // Create shared instance on first call
+  if (!vibeInstance) {
+    vibeInstance = createVibeInstance();
+  }
+
   // Not booted yet - accumulate in global state registry
   if (!window.__vibeGlobalState) {
     window.__vibeGlobalState = {};
@@ -26,15 +52,18 @@ const vibe = (state = {}, config, targetSelector) => {
     window.__vibeTargetSelector = targetSelector;
   }
 
-  // Explicit boot call (no state passed means "boot now")
+  // Explicit boot call (no state passed means "boot now with accumulated state")
   if (Object.keys(state).length === 0 && Object.keys(window.__vibeGlobalState).length > 0) {
     return boot();
   }
 
-  // Ensure boot happens in microtask
+  // Queue boot in microtask to allow all component scripts to register
   ensureBoot();
 
-  return null;
+  return vibeInstance;
 };
 
+// Export function to get pending listeners (used by boot.js)
+export const getPendingListeners = () => vibeInstance?._pendingListeners || null;
+
 export default vibe;

package/llms.txt

@@ -129,7 +129,7 @@ Conditionals can be nested inside iterations and vice versa.
 Skip reactive processing for an element and its children:
 
 ```html
-<code dehydrate>@[this] displays literally, not parsed</code>
+<code vibe-dehydrate>@[this] displays literally, not parsed</code>
 ```
 
 Use cases:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/cleanup.js

@@ -68,13 +68,4 @@ export const cleanup = (rootElement, debug = false) => {
       debug,
     );
   }
-
-  // Dispatch ready event to signal that Vibe has completed all initial processing
-  if (typeof document !== 'undefined') {
-    document.dispatchEvent(
-      new CustomEvent('vibe:ready', {
-        detail: { rootElement, cleanName, isClass },
-      }),
-    );
-  }
 };