@uniweb/runtime 1.4.6 → 1.5.1

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 }) {
@@ -492,13 +517,6 @@ function documentTitle(pageTitle, siteName) {
   const title = String(pageTitle);
   return siteName ? `${title} | ${siteName}` : title;
 }
-const startPages = /* @__PURE__ */ new WeakMap();
-function recordStartPage(website) {
-  if (website && !startPages.has(website)) startPages.set(website, website.activePage);
-}
-function restoreStartPage(website) {
-  if (startPages.has(website)) website.activePage = startPages.get(website);
-}
 function resolvePage(website, route) {
   return website.getPage(route);
 }
@@ -567,12 +585,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 +640,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 +665,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) {
@@ -663,7 +690,6 @@ function initPrerender(content, foundation, extensionsOrOptions, maybeOptions) {
   } } = options;
   onProgress("Initializing runtime...");
   const uniweb = createUniweb(content, foundation, extensions);
-  recordStartPage(uniweb.activeWebsite);
   if (content.config?.base && uniweb.activeWebsite?.setBasePath) {
     uniweb.activeWebsite.setBasePath(content.config.base);
   }
@@ -744,7 +770,7 @@ function classifyRenderError(err) {
   };
 }
 function renderPage(page, website) {
-  if (page !== website.getNotFoundPage()) website.setActivePage(page.route);
+  website.setActivePage(page);
   if (page.hasContent?.() && page.getBodyBlocks().length === 0) {
     return {
       error: {
@@ -1395,8 +1421,6 @@ function createPageRenderer({ website, shell }) {
     if (!resolved) return { outcome: "notFound", html: null, page: null, error: null };
     const page = typeof resolved.getRenderableSelf === "function" ? resolved.getRenderableSelf() : resolved;
     const missing = !named || page?.notFound === true;
-    restoreStartPage(website);
-    if (typeof target === "string") website.setActivePage(target);
     const icons = /* @__PURE__ */ new Map();
     let result;
     try {