(() => {
  const references = [...document.querySelectorAll('[data-component-src]')];
  const componentPaths = [...new Set(references.map((reference) => reference.dataset.componentSrc.split('#')[0]))];
  const registriesReady = Promise.all(componentPaths.map((path) => new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = path.replace(/index\.html$/, 'component.js');
    script.onload = resolve;
    script.onerror = resolve;
    document.head.append(script);
  })));

  window.componentsReady = registriesReady.then(() => Promise.all(references.map(async (reference) => {
    const specifier = reference.dataset.componentSrc;
    const [path, fragmentId] = specifier.split('#');
    const registered = window.componentRegistry?.[path]?.[fragmentId];
    if (registered !== undefined) {
      const template = document.createElement('template');
      template.innerHTML = registered;
      reference.replaceWith(template.content.cloneNode(true));
      return;
    }
    const response = await fetch(path);
    if (!response.ok) throw new Error(`Component load failed: ${specifier} (${response.status})`);
    const source = await response.text();
    const documentFragment = new DOMParser().parseFromString(source, 'text/html');
    const template = fragmentId ? documentFragment.getElementById(fragmentId) : null;
    if (!(template instanceof HTMLTemplateElement)) throw new Error(`Component fragment missing: ${specifier}`);
    reference.replaceWith(template.content.cloneNode(true));
  }))).then(() => {
    document.documentElement.dataset.componentsReady = 'true';
  }).catch((error) => {
    document.documentElement.dataset.componentsReady = 'error';
    const overlay = document.createElement('pre');
    overlay.className = 'component-load-error';
    overlay.textContent = error.stack || error.message;
    document.body.prepend(overlay);
    throw error;
  });
})();