add component for automatic figure number generation in references

app/src/components/FigRef.astro

@@ -0,0 +1,40 @@
+---
+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>