@uniweb/runtime 1.4.6 → 1.5.0

package/dist/ssr.js

@@ -436,6 +436,31 @@ function areaWrapperProps(region, transitions, layers, sticky = null) {
   if (!style) return null;
   return sticky ? { style, "data-uw-sticky": "area" } : { style };
 }
+const HEADER_HEIGHT = "--uw-header-height";
+const MEASURED_HEADER_HEIGHT = "--uw-header-measured";
+function headerOverlay(page) {
+  const first = page?.getBodyBlocks?.()?.[0];
+  if (!first?.underHeader) return null;
+  const header = page.getLayoutAreas?.()?.header;
+  if (!Array.isArray(header) || header.length === 0) return null;
+  const heights = header.map((block) => block?.height).filter(Boolean);
+  const height = heights.length === 0 ? "0px" : heights.length === 1 ? heights[0] : `calc(${heights.join(" + ")})`;
+  return { height };
+}
+function overlayBoxProps(props) {
+  return { ...props || {}, style: { ...props?.style || {}, height: 0, minHeight: 0 }, "data-uw-header": "over" };
+}
+function underHeaderProps(overlay) {
+  return {
+    style: { [HEADER_HEIGHT]: `var(${MEASURED_HEADER_HEIGHT}, ${overlay.height})` },
+    "data-uw-under-header": ""
+  };
+}
+function openingUnderHeader(block) {
+  const page = block?.page;
+  if (!page || page.getBodyBlocks?.()?.[0] !== block) return null;
+  return headerOverlay(page);
+}
 const COLUMN = { display: "flex", flexDirection: "column", minHeight: "100vh" };
 const GROW = { flex: 1 };
 function DefaultLayout({ header, body, footer, zones }) {
@@ -567,12 +592,19 @@ function renderBlock(block, { as = "section", stickySelf = false } = {}) {
   }
   const margin = sectionScrollMargin(block, stickySelf);
   if (margin) wrapperProps.style = { ...wrapperProps.style, ...margin };
+  const overlay = stickySelf === "section" || stickySelf === true ? openingUnderHeader(block) : null;
+  if (overlay) {
+    const under = underHeaderProps(overlay);
+    wrapperProps.style = { ...wrapperProps.style, ...under.style };
+    wrapperProps["data-uw-under-header"] = under["data-uw-under-header"];
+  }
   const componentClassName = Component.className;
   if (componentClassName) {
     wrapperProps.className = wrapperProps.className ? `${wrapperProps.className} ${componentClassName}` : componentClassName;
   }
   const hasBackground = background?.mode && meta?.background !== "self";
   block.hasBackground = hasBackground;
+  if (meta?.background === "self") wrapperProps["data-uw-background"] = "self";
   const wrapperTag = as !== "section" ? as : Component.as || "section";
   if (hasBackground) {
     return React.createElement(
@@ -615,8 +647,10 @@ function renderLayout(page, website) {
   const transitions = website.viewTransitions ? resolveLayoutTransitions(layoutMeta?.transitions) : null;
   const sticky = layoutStickiness(areas);
   const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky);
+  const overlay = headerOverlay(page);
   const wrapArea = (name, element) => {
-    const props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null);
+    let props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null);
+    if (overlay && RemoteLayout && name === "header") props = overlayBoxProps(props);
     return props ? React.createElement("div", props, element) : element;
   };
   const bodyElement = bodyBlocks ? wrapArea("body", renderBlocks(bodyBlocks, { stickySelf: "section" })) : null;
@@ -638,7 +672,7 @@ function renderLayout(page, website) {
   return React.createElement(DefaultLayout, {
     body: bodyElement,
     ...areaElements,
-    zones: { header: zone("header"), footer: zone("footer") }
+    zones: { header: overlay ? overlayBoxProps(zone("header")) : zone("header"), footer: zone("footer") }
   });
 }
 function initPrerenderForLocale(content, foundation, locale, extensionsOrOptions, maybeOptions) {