@bygghammar/cms-platform 0.68.0 → 0.69.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.68.0",
+  "version": "0.69.1",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/blocks/components/HeroFullBlock.tsx

@@ -89,6 +89,9 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
   return (
     <section
       id={p.anchor || undefined}
+      // Lets the shared site header know a full-bleed hero sits behind it, so
+      // it can render light chrome until the visitor scrolls past it.
+      data-site-hero={dark ? "dark" : "light"}
       className={`relative isolate w-full overflow-hidden bg-ink ${HEIGHTS[p.height ?? "full"]} flex`}
     >
       {/* Background media */}

package/src/site/SiteHeader.tsx

@@ -205,7 +205,25 @@ export function SiteHeader({
     return () => document.removeEventListener("pointerdown", onDown);
   }, [open]);
 
-  const lightText = lightTextPaths.includes(pathname) && !scrolled;
+  // Pages that open with a full-bleed dark hero mark it with
+  // `data-site-hero="dark"`. Detect it per route so the un-scrolled header uses
+  // light chrome there, and reverts to dark chrome once the hero is scrolled past.
+  const [darkHero, setDarkHero] = useState(false);
+  useEffect(() => {
+    const detect = () => setDarkHero(Boolean(document.querySelector('[data-site-hero="dark"]')));
+    detect();
+    // Blocks stream in after the route commits, so keep watching the document
+    // until the hero (or its absence) is settled.
+    const observer = new MutationObserver(detect);
+    observer.observe(document.body, { childList: true, subtree: true });
+    const stop = setTimeout(() => observer.disconnect(), 3000);
+    return () => {
+      observer.disconnect();
+      clearTimeout(stop);
+    };
+  }, [pathname]);
+
+  const lightText = (lightTextPaths.includes(pathname) || darkHero) && !scrolled;
   const name = t(brandName);
   // A dedicated dark artwork wins on light surfaces; otherwise invert the light one.
   const onLightSurface = !lightText;