@neowhale/storefront 0.2.40 → 0.2.42

package/dist/landing.global.js

@@ -553,6 +553,66 @@ var WhaleStorefront = (function (exports) {
     const isEmbed = url.includes("youtube") || url.includes("youtu.be") || url.includes("vimeo");
     return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsx("iframe", { src: toEmbedUrl(url), style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" }, allow: "autoplay; fullscreen", title: "Video" }) }) : /* @__PURE__ */ jsx("video", { src: url, poster, controls: true, style: { width: "100%", display: "block", background: theme.surface } }) });
   }
+  function CollageHeroSection({ section, theme, tracking, onEvent }) {
+    const c = section.content;
+    const images = c.images || [];
+    if (images.length === 0) return null;
+    c.overlay_opacity ?? 0.45;
+    const count = Math.min(images.length, 5);
+    return /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        display: "grid",
+        gridTemplateColumns: count >= 4 ? "repeat(4, 1fr)" : "repeat(2, 1fr)",
+        gridTemplateRows: count >= 4 ? "minmax(0, 28vh) minmax(0, 28vh)" : "minmax(0, 50vh)",
+        gap: "2px"
+      }, children: images.slice(0, count).map((img, i) => /* @__PURE__ */ jsx("div", { style: {
+        gridColumn: i === 0 && count >= 4 ? "span 2" : void 0,
+        gridRow: i === 0 && count >= 4 ? "span 2" : void 0,
+        overflow: "hidden",
+        background: theme.surface
+      }, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: img.url,
+          alt: img.alt || "",
+          loading: i < 3 ? "eager" : "lazy",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) }, i)) }),
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        inset: 0,
+        background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 60%)",
+        pointerEvents: "none"
+      } }),
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: "clamp(1.25rem, 4vw, 2.5rem)",
+        zIndex: 1
+      }, children: [
+        c.title && /* @__PURE__ */ jsx("h1", { style: {
+          fontSize: "clamp(1.75rem, 7vw, 3rem)",
+          fontWeight: 300,
+          fontFamily: theme.fontDisplay || "inherit",
+          margin: 0,
+          lineHeight: 1.1,
+          letterSpacing: "-0.03em",
+          color: theme.fg
+        }, children: /* @__PURE__ */ jsx(AnimatedText, { text: c.title }) }),
+        c.subtitle && /* @__PURE__ */ jsx("p", { style: {
+          fontSize: "clamp(0.65rem, 1.8vw, 0.85rem)",
+          color: `${theme.fg}BB`,
+          margin: "0.5rem 0 0",
+          letterSpacing: "0.12em",
+          textTransform: "uppercase",
+          fontWeight: 400
+        }, children: c.subtitle })
+      ] })
+    ] });
+  }
   function GallerySection({ section, theme }) {
     const { images } = section.content;
     const columns = section.config?.columns || 3;
@@ -994,6 +1054,8 @@ var WhaleStorefront = (function (exports) {
       switch (section.type) {
         case "hero":
           return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking, onEvent });
+        case "collage_hero":
+          return /* @__PURE__ */ jsx(CollageHeroSection, { section, theme, tracking, onEvent });
         case "text":
           return /* @__PURE__ */ jsx(TextSection, { section, theme });
         case "image":

package/dist/react/index.cjs

@@ -2297,6 +2297,66 @@ function VideoSection({ section, theme }) {
   const isEmbed = url.includes("youtube") || url.includes("youtu.be") || url.includes("vimeo");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: toEmbedUrl(url), style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" }, allow: "autoplay; fullscreen", title: "Video" }) }) : /* @__PURE__ */ jsxRuntime.jsx("video", { src: url, poster, controls: true, style: { width: "100%", display: "block", background: theme.surface } }) });
 }
+function CollageHeroSection({ section, theme, tracking, onEvent }) {
+  const c = section.content;
+  const images = c.images || [];
+  if (images.length === 0) return null;
+  c.overlay_opacity ?? 0.45;
+  const count = Math.min(images.length, 5);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: count >= 4 ? "repeat(4, 1fr)" : "repeat(2, 1fr)",
+      gridTemplateRows: count >= 4 ? "minmax(0, 28vh) minmax(0, 28vh)" : "minmax(0, 50vh)",
+      gap: "2px"
+    }, children: images.slice(0, count).map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      gridColumn: i === 0 && count >= 4 ? "span 2" : void 0,
+      gridRow: i === 0 && count >= 4 ? "span 2" : void 0,
+      overflow: "hidden",
+      background: theme.surface
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: img.url,
+        alt: img.alt || "",
+        loading: i < 3 ? "eager" : "lazy",
+        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+      }
+    ) }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 60%)",
+      pointerEvents: "none"
+    } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: "clamp(1.25rem, 4vw, 2.5rem)",
+      zIndex: 1
+    }, children: [
+      c.title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+        fontSize: "clamp(1.75rem, 7vw, 3rem)",
+        fontWeight: 300,
+        fontFamily: theme.fontDisplay || "inherit",
+        margin: 0,
+        lineHeight: 1.1,
+        letterSpacing: "-0.03em",
+        color: theme.fg
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: c.title }) }),
+      c.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+        fontSize: "clamp(0.65rem, 1.8vw, 0.85rem)",
+        color: `${theme.fg}BB`,
+        margin: "0.5rem 0 0",
+        letterSpacing: "0.12em",
+        textTransform: "uppercase",
+        fontWeight: 400
+      }, children: c.subtitle })
+    ] })
+  ] });
+}
 function GallerySection({ section, theme }) {
   const { images } = section.content;
   const columns = section.config?.columns || 3;
@@ -2732,6 +2792,8 @@ function SectionRenderer({
     switch (section.type) {
       case "hero":
         return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme, tracking, onEvent });
+      case "collage_hero":
+        return /* @__PURE__ */ jsxRuntime.jsx(CollageHeroSection, { section, theme, tracking, onEvent });
       case "text":
         return /* @__PURE__ */ jsxRuntime.jsx(TextSection, { section, theme });
       case "image":