app/src/components/FigRef.astro

---
interface Props {
  target: string;
}
const { target } = Astro.props;
const href = `#${target}`;
---

<a href={href} class="fig-ref" data-fig-target={target}>Figure ?</a>

<script>
  const resolveRefs = () => {
    // Build a map of figure id -> figure number by walking the DOM in order
    const figures = document.querySelectorAll(
      ".content-grid main figure:not(.table-figure)"
    );
    const idToNum = new Map<string, number>();
    figures.forEach((fig, i) => {
      if (fig.id) idToNum.set(fig.id, i + 1);
    });

    // Resolve all <a class="fig-ref"> elements
    document.querySelectorAll("a.fig-ref[data-fig-target]").forEach((ref) => {
      const target = (ref as HTMLElement).dataset.figTarget;
      if (target && idToNum.has(target)) {
        ref.textContent = `Figure ${idToNum.get(target)}`;
      }
    });
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", resolveRefs, { once: true });
  } else {
    // DOM already loaded, but figures may not be fully rendered yet
    requestAnimationFrame(resolveRefs);
  }

  // Also resolve after full load in case of late-rendering content
  window.addEventListener("load", resolveRefs, { once: true });
</script>