@uniweb/runtime 1.1.12 → 1.1.14

package/dist/ssr.js

@@ -290,6 +290,32 @@ function ensureThemeCss(uniweb, foundation) {
     console.warn("[uniweb] theme CSS generation failed:", err?.message || err);
   }
 }
+const STICKY_TOP = "0px";
+const STICKY_SECTION_TOP = "var(--uw-sticky-top, 0px)";
+function stickyStyle(top, zIndex) {
+  const style = { position: "sticky", top: top || STICKY_TOP };
+  if (zIndex != null) style.zIndex = zIndex;
+  return style;
+}
+function areaStickiness(blocks) {
+  const first = (blocks || []).find((block) => block?.sticky);
+  return first ? { top: first.stickyTop || STICKY_TOP } : null;
+}
+function layoutStickiness(areas) {
+  const sticky = {};
+  for (const [name, blocks] of Object.entries(areas || {})) sticky[name] = areaStickiness(blocks);
+  return sticky;
+}
+function zoneProps(stickiness, layer) {
+  return stickiness ? { style: stickyStyle(stickiness.top, layer), "data-uw-sticky": "area" } : null;
+}
+function sectionStickyStyle(block) {
+  return block?.sticky ? { ...stickyStyle(block.stickyTop || STICKY_SECTION_TOP, 1), alignSelf: "start" } : null;
+}
+function sectionStickyProps(block, kind) {
+  const style = kind ? sectionStickyStyle(block) : null;
+  return style ? { style, "data-uw-sticky": kind === "child" ? "child" : "section" } : null;
+}
 const NS = "uw-";
 const toIdent = (name) => NS + String(name).replace(/[^a-zA-Z0-9_-]/g, "-");
 function resolveLayoutTransitions(areaNames, explicit) {
@@ -298,32 +324,46 @@ function resolveLayoutTransitions(areaNames, explicit) {
   for (const name of areaNames) transitions[name] = toIdent(name);
   return explicit ? { ...transitions, ...explicit } : transitions;
 }
-function resolveLayoutLayers(areaNames, explicit) {
+function resolveLayoutLayers(areaNames, explicit, sticky = null) {
   if (explicit === false) return {};
-  const defaults = {};
-  for (const name of areaNames) defaults[name] = 1;
-  return explicit ? { ...defaults, ...explicit } : defaults;
+  const layers = {};
+  for (const name of areaNames) layers[name] = 1;
+  if (explicit) Object.assign(layers, explicit);
+  const lifted = areaNames.filter((name) => sticky?.[name] && !(explicit && name in explicit));
+  if (lifted.length > 0) {
+    const under = Object.entries(layers).filter(([name, layer]) => !sticky?.[name] && Number.isFinite(layer)).map(([, layer]) => layer);
+    const above = Math.max(0, ...under) + 1;
+    for (const name of lifted) layers[name] = above;
+  }
+  return layers;
 }
-function areaWrapperStyle(region, transitions, layers) {
+function areaWrapperStyle(region, transitions, layers, sticky = null) {
   const style = {};
   const name = transitions?.[region];
   if (name) style.viewTransitionName = name;
   const layer = layers?.[region];
-  if (layer != null) {
+  if (sticky) {
+    Object.assign(style, stickyStyle(sticky.top, layer));
+  } else if (layer != null) {
     style.position = "relative";
     style.zIndex = layer;
   }
   return Object.keys(style).length > 0 ? style : null;
 }
+function areaWrapperProps(region, transitions, layers, sticky = null) {
+  const style = areaWrapperStyle(region, transitions, layers, sticky);
+  if (!style) return null;
+  return sticky ? { style, "data-uw-sticky": "area" } : { style };
+}
 const COLUMN = { display: "flex", flexDirection: "column", minHeight: "100vh" };
 const GROW = { flex: 1 };
-function DefaultLayout({ header, body, footer }) {
+function DefaultLayout({ header, body, footer, zones }) {
   return React.createElement(
     "div",
     { style: COLUMN },
-    header && React.createElement("header", null, header),
+    header && React.createElement("header", zones?.header || null, header),
     body && React.createElement("main", { style: GROW }, body),
-    footer && React.createElement("footer", null, footer)
+    footer && React.createElement("footer", zones?.footer || null, footer)
   );
 }
 function applyBootScheme(respectSystem, fallback) {
@@ -501,7 +541,7 @@ function renderBackground(background) {
     "aria-hidden": "true"
   }, ...children);
 }
-function renderBlock(block, { as = "section" } = {}) {
+function renderBlock(block, { as = "section", stickySelf = false } = {}) {
   const Component = block.initComponent();
   if (!Component) {
     return React.createElement("div", {
@@ -524,6 +564,11 @@ function renderBlock(block, { as = "section" } = {}) {
     return React.createElement(Component, componentProps);
   }
   const { background, ...wrapperProps } = getWrapperProps(block);
+  const sticky = sectionStickyProps(block, stickySelf);
+  if (sticky) {
+    wrapperProps.style = { ...wrapperProps.style, ...sticky.style };
+    wrapperProps["data-uw-sticky"] = sticky["data-uw-sticky"];
+  }
   const componentClassName = Component.className;
   if (componentClassName) {
     wrapperProps.className = wrapperProps.className ? `${wrapperProps.className} ${componentClassName}` : componentClassName;
@@ -549,13 +594,13 @@ function renderBlock(block, { as = "section" } = {}) {
     React.createElement(Component, componentProps)
   );
 }
-function renderBlocks(blocks) {
+function renderBlocks(blocks, { stickySelf = false } = {}) {
   if (!blocks || blocks.length === 0) return null;
   return blocks.map(
     (block, index) => React.createElement(
       React.Fragment,
       { key: block.id || index },
-      renderBlock(block)
+      renderBlock(block, { stickySelf })
     )
   );
 }
@@ -565,14 +610,18 @@ function renderLayout(page, website) {
   const layoutMeta = website.getLayoutMeta(layoutName);
   const bodyBlocks = page.getBodyBlocks();
   const areas = page.getLayoutAreas();
+  for (const blocks of [bodyBlocks, ...Object.values(areas)]) {
+    for (const block of blocks || []) block.initComponent();
+  }
   const areaNames = Object.keys(areas);
   const transitions = website.viewTransitions ? resolveLayoutTransitions(areaNames, layoutMeta?.transitions) : null;
-  const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers);
+  const sticky = layoutStickiness(areas);
+  const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky);
   const wrapArea = (name, element) => {
-    const style = areaWrapperStyle(name, transitions, layers);
-    return style ? React.createElement("div", { style }, element) : element;
+    const props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null);
+    return props ? React.createElement("div", props, element) : element;
   };
-  const bodyElement = bodyBlocks ? wrapArea("body", renderBlocks(bodyBlocks)) : null;
+  const bodyElement = bodyBlocks ? wrapArea("body", renderBlocks(bodyBlocks, { stickySelf: "section" })) : null;
   const areaElements = {};
   for (const [name, blocks] of Object.entries(areas)) {
     areaElements[name] = wrapArea(name, renderBlocks(blocks));
@@ -587,7 +636,12 @@ function renderLayout(page, website) {
       ...areaElements
     });
   }
-  return React.createElement(DefaultLayout, { body: bodyElement, ...areaElements });
+  const zone = (name) => zoneProps(sticky[name], layers?.[name]);
+  return React.createElement(DefaultLayout, {
+    body: bodyElement,
+    ...areaElements,
+    zones: { header: zone("header"), footer: zone("footer") }
+  });
 }
 function initPrerenderForLocale(content, foundation, locale, extensionsOrOptions, maybeOptions) {
   const localeContent = sliceContentForLocale(content, locale);
@@ -620,7 +674,7 @@ function initPrerender(content, foundation, extensionsOrOptions, maybeOptions) {
       (childBlock, index) => React.createElement(
         React.Fragment,
         { key: childBlock.id || index },
-        renderBlock(childBlock, { as: wrapAs || null })
+        renderBlock(childBlock, { as: wrapAs || null, stickySelf: wrapAs ? "child" : false })
       )
     );
   };