@neowhale/storefront 0.2.41 → 0.2.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -557,21 +557,20 @@ var WhaleStorefront = (function (exports) {
557
557
  const c = section.content;
558
558
  const images = c.images || [];
559
559
  if (images.length === 0) return null;
560
- const opacity = c.overlay_opacity ?? 0.45;
561
- return /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: {
562
- display: "grid",
563
- gridTemplateColumns: images.length >= 4 ? "1fr 1fr 1fr" : "1fr 1fr",
564
- gridTemplateRows: images.length >= 4 ? "auto auto" : "auto",
565
- gap: "3px"
566
- }, children: images.slice(0, 6).map((img, i) => /* @__PURE__ */ jsx("div", { style: {
567
- position: "relative",
568
- gridColumn: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
569
- gridRow: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
570
- aspectRatio: i === 0 ? "3/4" : images.length >= 4 && i <= 2 ? "1" : "3/4",
571
- overflow: "hidden",
572
- background: theme.surface
573
- }, children: [
574
- /* @__PURE__ */ jsx(
560
+ c.overlay_opacity ?? 0.45;
561
+ const count = Math.min(images.length, 5);
562
+ return /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
563
+ /* @__PURE__ */ jsx("div", { style: {
564
+ display: "grid",
565
+ gridTemplateColumns: count >= 4 ? "repeat(4, 1fr)" : "repeat(2, 1fr)",
566
+ gridTemplateRows: count >= 4 ? "minmax(0, 28vh) minmax(0, 28vh)" : "minmax(0, 50vh)",
567
+ gap: "2px"
568
+ }, children: images.slice(0, count).map((img, i) => /* @__PURE__ */ jsx("div", { style: {
569
+ gridColumn: i === 0 && count >= 4 ? "span 2" : void 0,
570
+ gridRow: i === 0 && count >= 4 ? "span 2" : void 0,
571
+ overflow: "hidden",
572
+ background: theme.surface
573
+ }, children: /* @__PURE__ */ jsx(
575
574
  "img",
576
575
  {
577
576
  src: img.url,
@@ -579,41 +578,40 @@ var WhaleStorefront = (function (exports) {
579
578
  loading: i < 3 ? "eager" : "lazy",
580
579
  style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
581
580
  }
582
- ),
583
- i === 0 && /* @__PURE__ */ jsx(Fragment2, { children: [
584
- /* @__PURE__ */ jsx("div", { style: {
585
- position: "absolute",
586
- inset: 0,
587
- background: `linear-gradient(to top, rgba(0,0,0,${opacity + 0.3}), rgba(0,0,0,${opacity * 0.3}))`
588
- } }),
589
- /* @__PURE__ */ jsx("div", { style: {
590
- position: "absolute",
591
- bottom: 0,
592
- left: 0,
593
- right: 0,
594
- padding: "clamp(1.5rem, 5vw, 3rem)",
595
- zIndex: 1
596
- }, children: [
597
- c.title && /* @__PURE__ */ jsx("h1", { style: {
598
- fontSize: "clamp(2rem, 8vw, 3.5rem)",
599
- fontWeight: 300,
600
- fontFamily: theme.fontDisplay || "inherit",
601
- margin: 0,
602
- lineHeight: 1.1,
603
- letterSpacing: "-0.03em",
604
- color: theme.fg
605
- }, children: /* @__PURE__ */ jsx(AnimatedText, { text: c.title }) }),
606
- c.subtitle && /* @__PURE__ */ jsx("p", { style: {
607
- fontSize: "clamp(0.7rem, 2vw, 0.95rem)",
608
- color: `${theme.fg}CC`,
609
- margin: "0.75rem 0 0",
610
- letterSpacing: "0.1em",
611
- textTransform: "uppercase",
612
- fontWeight: 400
613
- }, children: c.subtitle })
614
- ] })
581
+ ) }, i)) }),
582
+ /* @__PURE__ */ jsx("div", { style: {
583
+ position: "absolute",
584
+ inset: 0,
585
+ background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 60%)",
586
+ pointerEvents: "none"
587
+ } }),
588
+ /* @__PURE__ */ jsx("div", { style: {
589
+ position: "absolute",
590
+ bottom: 0,
591
+ left: 0,
592
+ right: 0,
593
+ padding: "clamp(1.25rem, 4vw, 2.5rem)",
594
+ zIndex: 1
595
+ }, children: [
596
+ c.title && /* @__PURE__ */ jsx("h1", { style: {
597
+ fontSize: "clamp(1.75rem, 7vw, 3rem)",
598
+ fontWeight: 300,
599
+ fontFamily: theme.fontDisplay || "inherit",
600
+ margin: 0,
601
+ lineHeight: 1.1,
602
+ letterSpacing: "-0.03em",
603
+ color: theme.fg
604
+ }, children: /* @__PURE__ */ jsx(AnimatedText, { text: c.title }) }),
605
+ c.subtitle && /* @__PURE__ */ jsx("p", { style: {
606
+ fontSize: "clamp(0.65rem, 1.8vw, 0.85rem)",
607
+ color: `${theme.fg}BB`,
608
+ margin: "0.5rem 0 0",
609
+ letterSpacing: "0.12em",
610
+ textTransform: "uppercase",
611
+ fontWeight: 400
612
+ }, children: c.subtitle })
615
613
  ] })
616
- ] }, i)) }) });
614
+ ] });
617
615
  }
618
616
  function GallerySection({ section, theme }) {
619
617
  const { images } = section.content;
@@ -2301,21 +2301,20 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
2301
2301
  const c = section.content;
2302
2302
  const images = c.images || [];
2303
2303
  if (images.length === 0) return null;
2304
- const opacity = c.overlay_opacity ?? 0.45;
2305
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2306
- display: "grid",
2307
- gridTemplateColumns: images.length >= 4 ? "1fr 1fr 1fr" : "1fr 1fr",
2308
- gridTemplateRows: images.length >= 4 ? "auto auto" : "auto",
2309
- gap: "3px"
2310
- }, children: images.slice(0, 6).map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
2311
- position: "relative",
2312
- gridColumn: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
2313
- gridRow: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
2314
- aspectRatio: i === 0 ? "3/4" : images.length >= 4 && i <= 2 ? "1" : "3/4",
2315
- overflow: "hidden",
2316
- background: theme.surface
2317
- }, children: [
2318
- /* @__PURE__ */ jsxRuntime.jsx(
2304
+ c.overlay_opacity ?? 0.45;
2305
+ const count = Math.min(images.length, 5);
2306
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
2307
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2308
+ display: "grid",
2309
+ gridTemplateColumns: count >= 4 ? "repeat(4, 1fr)" : "repeat(2, 1fr)",
2310
+ gridTemplateRows: count >= 4 ? "minmax(0, 28vh) minmax(0, 28vh)" : "minmax(0, 50vh)",
2311
+ gap: "2px"
2312
+ }, children: images.slice(0, count).map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2313
+ gridColumn: i === 0 && count >= 4 ? "span 2" : void 0,
2314
+ gridRow: i === 0 && count >= 4 ? "span 2" : void 0,
2315
+ overflow: "hidden",
2316
+ background: theme.surface
2317
+ }, children: /* @__PURE__ */ jsxRuntime.jsx(
2319
2318
  "img",
2320
2319
  {
2321
2320
  src: img.url,
@@ -2323,41 +2322,40 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
2323
2322
  loading: i < 3 ? "eager" : "lazy",
2324
2323
  style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
2325
2324
  }
2326
- ),
2327
- i === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2328
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2329
- position: "absolute",
2330
- inset: 0,
2331
- background: `linear-gradient(to top, rgba(0,0,0,${opacity + 0.3}), rgba(0,0,0,${opacity * 0.3}))`
2332
- } }),
2333
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
2334
- position: "absolute",
2335
- bottom: 0,
2336
- left: 0,
2337
- right: 0,
2338
- padding: "clamp(1.5rem, 5vw, 3rem)",
2339
- zIndex: 1
2340
- }, children: [
2341
- c.title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
2342
- fontSize: "clamp(2rem, 8vw, 3.5rem)",
2343
- fontWeight: 300,
2344
- fontFamily: theme.fontDisplay || "inherit",
2345
- margin: 0,
2346
- lineHeight: 1.1,
2347
- letterSpacing: "-0.03em",
2348
- color: theme.fg
2349
- }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: c.title }) }),
2350
- c.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
2351
- fontSize: "clamp(0.7rem, 2vw, 0.95rem)",
2352
- color: `${theme.fg}CC`,
2353
- margin: "0.75rem 0 0",
2354
- letterSpacing: "0.1em",
2355
- textTransform: "uppercase",
2356
- fontWeight: 400
2357
- }, children: c.subtitle })
2358
- ] })
2325
+ ) }, i)) }),
2326
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2327
+ position: "absolute",
2328
+ inset: 0,
2329
+ background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 60%)",
2330
+ pointerEvents: "none"
2331
+ } }),
2332
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
2333
+ position: "absolute",
2334
+ bottom: 0,
2335
+ left: 0,
2336
+ right: 0,
2337
+ padding: "clamp(1.25rem, 4vw, 2.5rem)",
2338
+ zIndex: 1
2339
+ }, children: [
2340
+ c.title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
2341
+ fontSize: "clamp(1.75rem, 7vw, 3rem)",
2342
+ fontWeight: 300,
2343
+ fontFamily: theme.fontDisplay || "inherit",
2344
+ margin: 0,
2345
+ lineHeight: 1.1,
2346
+ letterSpacing: "-0.03em",
2347
+ color: theme.fg
2348
+ }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: c.title }) }),
2349
+ c.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
2350
+ fontSize: "clamp(0.65rem, 1.8vw, 0.85rem)",
2351
+ color: `${theme.fg}BB`,
2352
+ margin: "0.5rem 0 0",
2353
+ letterSpacing: "0.12em",
2354
+ textTransform: "uppercase",
2355
+ fontWeight: 400
2356
+ }, children: c.subtitle })
2359
2357
  ] })
2360
- ] }, i)) }) });
2358
+ ] });
2361
2359
  }
2362
2360
  function GallerySection({ section, theme }) {
2363
2361
  const { images } = section.content;