@neowhale/storefront 0.2.39 → 0.2.41

package/dist/landing.global.js

@@ -553,10 +553,89 @@ 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;
+    const opacity = c.overlay_opacity ?? 0.45;
+    return /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: images.length >= 4 ? "1fr 1fr 1fr" : "1fr 1fr",
+      gridTemplateRows: images.length >= 4 ? "auto auto" : "auto",
+      gap: "3px"
+    }, children: images.slice(0, 6).map((img, i) => /* @__PURE__ */ jsx("div", { style: {
+      position: "relative",
+      gridColumn: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
+      gridRow: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
+      aspectRatio: i === 0 ? "3/4" : images.length >= 4 && i <= 2 ? "1" : "3/4",
+      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 === 0 && /* @__PURE__ */ jsx(Fragment2, { children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          inset: 0,
+          background: `linear-gradient(to top, rgba(0,0,0,${opacity + 0.3}), rgba(0,0,0,${opacity * 0.3}))`
+        } }),
+        /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          padding: "clamp(1.5rem, 5vw, 3rem)",
+          zIndex: 1
+        }, children: [
+          c.title && /* @__PURE__ */ jsx("h1", { style: {
+            fontSize: "clamp(2rem, 8vw, 3.5rem)",
+            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.7rem, 2vw, 0.95rem)",
+            color: `${theme.fg}CC`,
+            margin: "0.75rem 0 0",
+            letterSpacing: "0.1em",
+            textTransform: "uppercase",
+            fontWeight: 400
+          }, children: c.subtitle })
+        ] })
+      ] })
+    ] }, i)) }) });
+  }
   function GallerySection({ section, theme }) {
     const { images } = section.content;
     const columns = section.config?.columns || 3;
+    const layout = section.config?.layout || "grid";
     if (!images || images.length === 0) return null;
+    if (layout === "collage") {
+      return /* @__PURE__ */ jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: {
+        gridColumn: i === 0 ? "1 / -1" : void 0,
+        aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
+        overflow: "hidden",
+        background: theme.surface
+      }, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: img.url,
+          alt: img.alt || "",
+          loading: i < 2 ? "eager" : "lazy",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) }, i)) }) });
+    }
     return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
   }
   function SocialLinksSection({ section, theme }) {
@@ -977,6 +1056,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,10 +2297,89 @@ 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;
+  const opacity = c.overlay_opacity ?? 0.45;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    display: "grid",
+    gridTemplateColumns: images.length >= 4 ? "1fr 1fr 1fr" : "1fr 1fr",
+    gridTemplateRows: images.length >= 4 ? "auto auto" : "auto",
+    gap: "3px"
+  }, children: images.slice(0, 6).map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    position: "relative",
+    gridColumn: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
+    gridRow: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
+    aspectRatio: i === 0 ? "3/4" : images.length >= 4 && i <= 2 ? "1" : "3/4",
+    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 === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        position: "absolute",
+        inset: 0,
+        background: `linear-gradient(to top, rgba(0,0,0,${opacity + 0.3}), rgba(0,0,0,${opacity * 0.3}))`
+      } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: "clamp(1.5rem, 5vw, 3rem)",
+        zIndex: 1
+      }, children: [
+        c.title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+          fontSize: "clamp(2rem, 8vw, 3.5rem)",
+          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.7rem, 2vw, 0.95rem)",
+          color: `${theme.fg}CC`,
+          margin: "0.75rem 0 0",
+          letterSpacing: "0.1em",
+          textTransform: "uppercase",
+          fontWeight: 400
+        }, children: c.subtitle })
+      ] })
+    ] })
+  ] }, i)) }) });
+}
 function GallerySection({ section, theme }) {
   const { images } = section.content;
   const columns = section.config?.columns || 3;
+  const layout = section.config?.layout || "grid";
   if (!images || images.length === 0) return null;
+  if (layout === "collage") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      gridColumn: i === 0 ? "1 / -1" : void 0,
+      aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
+      overflow: "hidden",
+      background: theme.surface
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: img.url,
+        alt: img.alt || "",
+        loading: i < 2 ? "eager" : "lazy",
+        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+      }
+    ) }, i)) }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
 }
 function SocialLinksSection({ section, theme }) {
@@ -2715,6 +2794,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":