You have a new contract: You are going to serve as the lead Software Architect and Engineer for the Cat.js project. This is a lightweight, state-of-the-art engine designed to build powerful UIs, prioritizing the highest performance and efficiency, and based exclusively on modern native browser APIs, primarily Web Components.

Practices and things to avoid for Cat.js
- No Virtual DOMs or similar practices.
- No Webpack, bundlers, polyfills, etc.
- Write HTML or CSS code into a JS file, function or similar.
- Render methods for components, or logics that trigger unnecessary reflows and repainting.

Requirements for Cat.js
- Our engine it's attach through a script:src tag on the top of the head tag.
- Written on vanilla low level JavaScript that fits perfectly the browser runtime.
- Beautiful and ease Syntax and Project tree
- CSC - Client Side Compiler before loading the DOM.

So far this is our engine:
// cat.js

(function() {
    'use strict';
  
    /**
     * Internal module for tracking loaded files and components.
     */
    const Registry = (function() {
      const loadedFiles = new Set();
      const registeredComponents = new Set();
      const currentLoadingPath = new Set();
  
      return {
        isFileLoaded: (path) => loadedFiles.has(path),
        markFileAsLoaded: (path) => loadedFiles.add(path),
        isComponentRegistered: (name) => registeredComponents.has(name),
        registerComponent: (name) => registeredComponents.add(name),
        isInCurrentLoadingPath: (path) => currentLoadingPath.has(path),
        addToCurrentLoadingPath: (path) => currentLoadingPath.add(path),
        removeFromCurrentLoadingPath: (path) => currentLoadingPath.delete(path),
      };
    })();
  
    /**
     * Internal module for handling pending insertions.
     */
    const InsertionManager = (function() {
      const pendingInsertions = new Map();
      let observer = null;
  
      function addPendingInsertion(selector, fragment) {
        if (!pendingInsertions.has(selector)) {
          pendingInsertions.set(selector, []);
        }
        pendingInsertions.get(selector).push(fragment);
  
        // Initialize MutationObserver if not already done
        if (!observer) {
          observer = new MutationObserver(handleMutations);
          observer.observe(document, { childList: true, subtree: true });
        }
      }
  
      function handleMutations(mutationsList) {
        for (const mutation of mutationsList) {
          for (const node of mutation.addedNodes) {
            checkNodeForPendingInsertions(node);
          }
        }
      }
  
      function checkNodeForPendingInsertions(node) {
        if (node.nodeType !== Node.ELEMENT_NODE) {
          return;
        }
  
        pendingInsertions.forEach((fragments, selector) => {
          let targets = [];
  
          if (node.matches(selector)) {
            targets.push(node);
          }
  
          const matchedDescendants = node.querySelectorAll(selector);
          if (matchedDescendants.length > 0) {
            targets = targets.concat(Array.from(matchedDescendants));
          }
  
          for (const targetElement of targets) {
            performInsertions(targetElement, selector);
          }
        });
  
        // Recursively check child nodes
        for (const child of node.children) {
          checkNodeForPendingInsertions(child);
        }
      }
  
      function performInsertions(targetElement, selector) {
        const fragments = pendingInsertions.get(selector);
        if (fragments) {
          for (const fragment of fragments) {
            targetElement.appendChild(fragment.cloneNode(true));
          }
          // Remove from pending insertions
          pendingInsertions.delete(selector);
          // Disconnect observer if no pending insertions
          if (pendingInsertions.size === 0 && observer) {
            observer.disconnect();
            observer = null;
          }
        }
      }
  
      return {
        addPendingInsertion,
      };
    })();
  
    /**
     * Internal module for handling component registration.
     */
    const ComponentManager = (function() {
      const templateCache = new Map();
  
      function registerComponent(name, templateContent) {
        if (Registry.isComponentRegistered(name)) {
          console.warn(`Component already registered: ${name}`);
          return;
        }
  
        // Cache the template content
        templateCache.set(name, templateContent);
  
        class CustomElement extends HTMLElement {
          constructor() {
            super();
            const shadow = this.attachShadow({ mode: 'open' });
            shadow.innerHTML = templateCache.get(name);
          }
        }
  
        customElements.define(name, CustomElement);
        Registry.registerComponent(name);
        console.log(`Component registered: ${name}`);
      }
  
      return {
        registerComponent,
      };
    })();
  
    /**
     * Internal module for loading and parsing HTML files.
     */
    const Loader = (function() {
      async function loadFile(path) {
        const fullPath = `${path}.html`;
  
        try {
          const response = await fetch(fullPath);
          if (!response.ok) {
            throw new Error(`Failed to load: ${fullPath} (Status: ${response.status})`);
          }
          const content = await response.text();
          return content;
        } catch (error) {
          console.error(error.message);
          throw error;
        }
      }
  
      function parseHTML(htmlString) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlString, 'text/html');
        return doc;
      }
  
      return {
        loadFile,
        parseHTML,
      };
    })();
  
    /**
     * Internal module for handling script execution.
     */
    const ScriptProcessor = (function() {
      async function processScripts(doc) {
        const scripts = doc.querySelectorAll('script');
        for (const script of scripts) {
          const scriptContent = script.textContent;
  
          // Execute the script content
          if (scriptContent.trim()) {
            try {
              new Function(scriptContent)();
            } catch (error) {
              console.error(`Error executing script: ${error.message}`);
            }
          }
        }
      }
  
      return {
        processScripts,
      };
    })();
  
    /**
     * Global load function for components.
     * @param {string} path - The path to the component's HTML file (without .html extension).
     * @returns {Promise<void>}
     */
    window.load = async function(path) {
      console.log(`Loading component: ${path}`);
  
      // Cycle detection to prevent infinite loops
      if (Registry.isInCurrentLoadingPath(path)) {
        console.error(`Cyclic loading detected: ${path} is already in the current loading path`);
        return;
      }
      Registry.addToCurrentLoadingPath(path);
  
      if (Registry.isFileLoaded(path)) {
        console.log(`Already loaded: ${path}`);
        Registry.removeFromCurrentLoadingPath(path);
        return;
      }
  
      try {
        const responseText = await Loader.loadFile(path);
        const doc = Loader.parseHTML(responseText);
  
        Registry.markFileAsLoaded(path);
  
        // Register components
        const templates = doc.querySelectorAll('template[name]');
        for (const template of templates) {
          const componentName = template.getAttribute('name');
          const templateContent = template.innerHTML;
          ComponentManager.registerComponent(componentName, templateContent);
        }
  
        // Process scripts
        await ScriptProcessor.processScripts(doc);
      } catch (error) {
        console.error(`Error loading component ${path}: ${error.message}`);
      } finally {
        Registry.removeFromCurrentLoadingPath(path);
      }
    };
  
    /**
     * Global insert function for raw HTML content.
     * @param {string} path - The path to the HTML file (without .html extension).
     * @param {string} targetSelector - The CSS selector of the target element for insertion.
     * @returns {Promise<void>}
     */
    window.insert = async function(path, targetSelector) {
      console.log(`Inserting content from: ${path} into ${targetSelector}`);
  
      // Cycle detection to prevent infinite loops
      if (Registry.isInCurrentLoadingPath(path)) {
        console.error(`Cyclic insertion detected: ${path} is already in the current loading path`);
        return;
      }
      Registry.addToCurrentLoadingPath(path);
  
      if (Registry.isFileLoaded(`${path}:${targetSelector}`)) {
        console.log(`Already inserted: ${path} into ${targetSelector}`);
        Registry.removeFromCurrentLoadingPath(path);
        return;
      }
  
      try {
        const responseText = await Loader.loadFile(path);
        const doc = Loader.parseHTML(responseText);
  
        Registry.markFileAsLoaded(`${path}:${targetSelector}`);
  
        // Process scripts
        await ScriptProcessor.processScripts(doc);
  
        // Create a DocumentFragment containing the content
        const fragment = document.createDocumentFragment();
        const bodyContent = doc.body;
        while (bodyContent.firstChild) {
          fragment.appendChild(bodyContent.firstChild);
        }
  
        const insertContent = () => {
          const targetElement = document.querySelector(targetSelector);
          if (targetElement) {
            targetElement.appendChild(fragment.cloneNode(true));
          } else {
            // If the element is not yet in the DOM, add to pending insertions
            InsertionManager.addPendingInsertion(targetSelector, fragment);
          }
        };
  
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', insertContent);
        } else {
          insertContent();
        }
      } catch (error) {
        console.error(`Error inserting content from ${path}: ${error.message}`);
      } finally {
        Registry.removeFromCurrentLoadingPath(path);
      }
    };
  })();

---

Your first task it's allow the loading and insertion of other components or raw HTML (insert) into a component:

Like this:
<!-- hello-world.html -->
 <script>
    insert('name', 'user-name');
 </script>

<template name="hello-world"> <-- The register of this component must wait to insert the HTML, to then register the component
    <p>Hello, World!</p>
    <div id="user-name"></div>
</template>

---

This is the debugging code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cat.js Application</title>
  <!-- Include cat.js -->
  <script src="cat.js"></script>
  <!-- Insert the 'app' page into the <app id="root"> element -->
  <script>
    insert('app', 'app#root');
  </script>
</head>
<body>
  <app id="root"></app>
</body>
</html>

<!-- app.html -->

<script>
    load('hello-world'); // Load the 'hello-world' component
  </script>
  
  <div>
    <h1>Welcome to Cat.js App</h1>
    <!-- Use the hello-world component -->
    <hello-world></hello-world>
  </div>

<!-- hello-world.html -->
 <script>
    insert('name', 'user-name');
 </script>

<template name="hello-world">
    <p>Hello, World!</p>
    <div id="user-name"></div>
</template>


<!-- name.html -->
<div>
    My name is O1
</div>

---

Find the most optimal path that allow such behavior, without causing errors or instability. Always matching our principles, and declaring the load or insert, for this case, function at the top of everything.