fix: Fix MCLabs logo, client-side nav errors, and TracingBeam hydration bug

components/ui/tracing-beam.tsx

@@ -5,6 +5,7 @@ import {
   useTransform,
   useScroll,
   useSpring,
+  useMotionValueEvent,
 } from "motion/react";
 import { cn } from "@/lib/utils";
 
@@ -23,6 +24,11 @@ export const TracingBeam = ({
 
   const contentRef = useRef<HTMLDivElement>(null);
   const [svgHeight, setSvgHeight] = useState(0);
+  const [hasScrolled, setHasScrolled] = useState(false);
+
+  useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    setHasScrolled(latest > 0);
+  });
 
   // Use ResizeObserver to avoid forced reflows
   useEffect(() => {
@@ -69,7 +75,7 @@ export const TracingBeam = ({
           }}
           animate={{
             boxShadow:
-              scrollYProgress.get() > 0
+              hasScrolled
                 ? "none"
                 : "var(--shadow-tracing-beam, rgba(0, 0, 0, 0.24) 0px 3px 8px)",
           }}
@@ -82,11 +88,11 @@ export const TracingBeam = ({
             }}
             animate={{
               backgroundColor:
-                scrollYProgress.get() > 0
+                hasScrolled
                   ? "var(--color-tracing-beam-dot-active)"
                   : "var(--color-tracing-beam-dot-inactive)",
               borderColor:
-                scrollYProgress.get() > 0
+                hasScrolled
                   ? "var(--color-tracing-beam-border-active)"
                   : "var(--color-tracing-beam-border-inactive)",
             }}

public/sw.js

@@ -23,6 +23,7 @@ const CACHE_FIRST_PATTERNS = [
 const NETWORK_FIRST_PATTERNS = [
   /\/api\//,
   /\.json$/,
+  /\.txt$/, // Next.js RSC payloads
 ];
 
 self.addEventListener('install', (event) => {
@@ -94,6 +95,25 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
+  // Network-first for navigation requests (HTML pages)
+  // Prevents stale HTML from causing hydration mismatches during client-side nav
+  if (request.mode === 'navigate' || request.destination === 'document') {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          if (response.status === 200) {
+            const responseClone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(request, responseClone);
+            });
+          }
+          return response;
+        })
+        .catch(() => caches.match(request))
+    );
+    return;
+  }
+
   // Stale-while-revalidate for everything else
   event.respondWith(
     caches.match(request).then((cachedResponse) => {