@uniweb/runtime 1.2.0 → 1.2.1

package/dist/ssr.js

@@ -222,9 +222,12 @@ function siteUrl(url) {
 function withOpacity(color, opacity) {
   if (typeof color !== "string" || !color) return color;
   if (color.startsWith("#")) {
-    const r = parseInt(color.slice(1, 3), 16);
-    const g = parseInt(color.slice(3, 5), 16);
-    const b = parseInt(color.slice(5, 7), 16);
+    let hex = color.slice(1);
+    if (hex.length === 3 || hex.length === 4) hex = [...hex].map((c) => c + c).join("");
+    if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(hex)) return color;
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
     return `rgba(${r}, ${g}, ${b}, ${opacity})`;
   }
   if (color.startsWith("rgb")) {
@@ -233,6 +236,76 @@ function withOpacity(color, opacity) {
   }
   return color;
 }
+const h = React.createElement;
+const FILL = { position: "absolute", inset: 0 };
+function ColorLayer({ color }) {
+  if (!color) return null;
+  return h("div", { className: "background-color", style: { ...FILL, backgroundColor: color }, "aria-hidden": "true" });
+}
+function GradientLayer({ gradient }) {
+  if (!gradient) return null;
+  if (typeof gradient === "string") {
+    return h("div", { className: "background-gradient", style: { ...FILL, background: gradient }, "aria-hidden": "true" });
+  }
+  const start = gradient.start ?? "transparent";
+  const end = gradient.end ?? "transparent";
+  const startOpacity = gradient.startOpacity ?? 1;
+  const endOpacity = gradient.endOpacity ?? 1;
+  const startColor = startOpacity < 1 ? withOpacity(start, startOpacity) : start;
+  const endColor = endOpacity < 1 ? withOpacity(end, endOpacity) : end;
+  const background = `linear-gradient(${gradient.angle ?? 0}deg, ${startColor} ${gradient.startPosition ?? 0}%, ${endColor} ${gradient.endPosition ?? 100}%)`;
+  return h("div", { className: "background-gradient", style: { ...FILL, background }, "aria-hidden": "true" });
+}
+function ImageLayer({ image }) {
+  if (!image?.src) return null;
+  const style = {
+    ...FILL,
+    backgroundImage: `url(${siteUrl(image.src)})`,
+    backgroundPosition: image.position ?? "center",
+    backgroundSize: image.size ?? "cover",
+    backgroundRepeat: "no-repeat"
+  };
+  return h("div", { className: "background-image", style, "aria-hidden": "true" });
+}
+function VideoPoster({ video }) {
+  if (!video?.src || !video.poster) return null;
+  return h(ImageLayer, { image: { src: video.poster, size: "cover", position: "center" } });
+}
+function Overlay({ overlay }) {
+  if (!overlay?.enabled) return null;
+  const opacity = overlay.opacity ?? 0.5;
+  if (overlay.gradient) {
+    const g = overlay.gradient;
+    const background = `linear-gradient(${g.angle ?? 180}deg, ${g.start ?? "rgba(0,0,0,0.7)"} ${g.startPosition ?? 0}%, ${g.end ?? "rgba(0,0,0,0)"} ${g.endPosition ?? 100}%)`;
+    return h("div", {
+      className: "background-overlay background-overlay--gradient",
+      style: { ...FILL, background, opacity, pointerEvents: "none" },
+      "aria-hidden": "true"
+    });
+  }
+  const base = overlay.type === "light" ? "255, 255, 255" : "0, 0, 0";
+  return h("div", {
+    className: "background-overlay background-overlay--solid",
+    style: { ...FILL, backgroundColor: `rgba(${base}, ${opacity})`, pointerEvents: "none" },
+    "aria-hidden": "true"
+  });
+}
+function Background({ mode, color, gradient, image, video, overlay, className = "", Video = VideoPoster }) {
+  if (!mode) return null;
+  return h(
+    "div",
+    {
+      className: `background background--${mode} ${className}`.trim(),
+      style: { ...FILL, overflow: "hidden", zIndex: 0 },
+      "aria-hidden": "true"
+    },
+    mode === "color" ? h(ColorLayer, { color }) : null,
+    mode === "gradient" ? h(GradientLayer, { gradient }) : null,
+    mode === "image" ? h(ImageLayer, { image }) : null,
+    mode === "video" ? h(Video, { video }) : null,
+    h(Overlay, { overlay })
+  );
+}
 function default404Html(basePath = "") {
   const homeHref = basePath ? `${basePath}/` : "/";
   return `<div class="page-not-found" style="min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center"><h1 style="font-size:3rem;font-weight:bold;color:#1f2937;margin-bottom:1rem">404</h1><p style="color:#64748b;margin-bottom:2rem">Page not found</p><a href="${homeHref}" style="color:#3b82f6;text-decoration:underline">Go to homepage</a></div>`;
@@ -452,105 +525,7 @@ function getWrapperProps(block) {
 }
 function renderBackground(background) {
   if (!background?.mode) return null;
-  const containerStyle = {
-    position: "absolute",
-    inset: "0",
-    overflow: "hidden",
-    zIndex: 0
-  };
-  const children = [];
-  if (background.mode === "color" && background.color) {
-    children.push(
-      React.createElement("div", {
-        key: "bg-color",
-        className: "background-color",
-        style: { position: "absolute", inset: "0", backgroundColor: background.color },
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (background.mode === "gradient" && background.gradient) {
-    const g = background.gradient;
-    let bgValue;
-    if (typeof g === "string") {
-      bgValue = g;
-    } else {
-      const {
-        start = "transparent",
-        end = "transparent",
-        angle = 0,
-        startPosition = 0,
-        endPosition = 100,
-        startOpacity = 1,
-        endOpacity = 1
-      } = g;
-      const startColor = startOpacity < 1 ? withOpacity(start, startOpacity) : start;
-      const endColor = endOpacity < 1 ? withOpacity(end, endOpacity) : end;
-      bgValue = `linear-gradient(${angle}deg, ${startColor} ${startPosition}%, ${endColor} ${endPosition}%)`;
-    }
-    children.push(
-      React.createElement("div", {
-        key: "bg-gradient",
-        className: "background-gradient",
-        style: { position: "absolute", inset: "0", background: bgValue },
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (background.mode === "image" && background.image?.src) {
-    const img = background.image;
-    children.push(
-      React.createElement("div", {
-        key: "bg-image",
-        className: "background-image",
-        style: {
-          position: "absolute",
-          inset: "0",
-          backgroundImage: `url(${siteUrl(img.src)})`,
-          backgroundPosition: img.position || "center",
-          backgroundSize: img.size || "cover",
-          backgroundRepeat: "no-repeat"
-        },
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (background.overlay?.enabled) {
-    const ov = background.overlay;
-    let overlayStyle;
-    if (ov.gradient) {
-      const g = ov.gradient;
-      overlayStyle = {
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
-        background: `linear-gradient(${g.angle || 180}deg, ${g.start || "rgba(0,0,0,0.7)"} ${g.startPosition || 0}%, ${g.end || "rgba(0,0,0,0)"} ${g.endPosition || 100}%)`,
-        opacity: ov.opacity ?? 0.5
-      };
-    } else {
-      const baseColor = ov.type === "light" ? "255, 255, 255" : "0, 0, 0";
-      overlayStyle = {
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
-        backgroundColor: `rgba(${baseColor}, ${ov.opacity ?? 0.5})`
-      };
-    }
-    children.push(
-      React.createElement("div", {
-        key: "bg-overlay",
-        className: ov.gradient ? "background-overlay background-overlay--gradient" : "background-overlay background-overlay--solid",
-        style: overlayStyle,
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (children.length === 0) return null;
-  return React.createElement("div", {
-    className: `background background--${background.mode}`,
-    style: containerStyle,
-    "aria-hidden": "true"
-  }, ...children);
+  return React.createElement(Background, background);
 }
 function renderBlock(block, { as = "section", stickySelf = false } = {}) {
   const Component = block.initComponent();
@@ -563,10 +538,13 @@ function renderBlock(block, { as = "section", stickySelf = false } = {}) {
   const meta = getComponentMeta(block.type);
   const entityStore = block.website?.entityStore;
   let entityData = null;
+  let pending = false;
   if (entityStore) {
     const resolved = entityStore.resolve(block, meta);
     if (resolved.status === "ready") entityData = resolved.data;
+    pending = resolved.status === "pending";
   }
+  block.dataLoading = pending;
   const prepared = prepareProps(block, meta, entityData);
   const params = prepared.params;
   const content = { ...prepared.content, ...block.properties };
@@ -691,9 +669,7 @@ function initPrerender(content, foundation, extensionsOrOptions, maybeOptions) {
       )
     );
   };
-  uniweb.backgroundRenderer = function InlineBackground(background) {
-    return renderBackground(background);
-  };
+  uniweb.backgroundRenderer = Background;
   wireFoundationCapabilities(uniweb, foundation);
   ensureThemeCss(uniweb, foundation);
   const website = uniweb.activeWebsite;