bsmnt 0.11.0 → 0.13.0

package/src/templates/next-pagebuilder-cache/components/page-document/index.tsx

@@ -134,7 +134,7 @@ export const PageDocument = ({
       {pageJsonLd.map(({ key, data }) => (
         <JsonLd key={key} data={data} />
       ))}
-      <article className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-14 px-4 py-14 md:px-6 md:py-20">
+      <article className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-14 md:px-6 md:py-20">
         <h1>{title}</h1>
         {sections.length ? (
           sections

package/src/templates/next-pagebuilder-cache/components/ui/image/index.tsx

@@ -9,6 +9,7 @@
 import cn from "clsx"
 import NextImage, { type ImageProps as NextImageProps } from "next/image"
 import type { CSSProperties, Ref } from "react"
+import { buildImageSizes } from "@/lib/utils/image-sizes"
 
 /**
  * Enhanced Image component props extending Next.js Image.
@@ -97,7 +98,6 @@ const getFinalPlaceholder = (
  * Enhanced Image component with responsive sizing and automatic optimizations.
  *
  * Always use this component instead of next/image directly. Provides:
- * - Automatic responsive sizes generation
  * - Smart blur placeholders with aspect ratio support
  * - Performance optimizations (lazy loading by default)
  * - Priority flag for LCP images
@@ -146,14 +146,14 @@ export function Image({
   style,
   className,
   objectFit = "cover",
-  quality = 90,
+  quality = 75,
   alt = "",
   fill,
   block = !fill,
-  width = block ? 1 : undefined,
-  height = block ? 1 : undefined,
-  mobileSize = "100vw",
-  desktopSize = "100vw",
+  width,
+  height,
+  mobileSize,
+  desktopSize,
   sizes,
   src,
   unoptimized,
@@ -163,9 +163,18 @@ export function Image({
   priority = false,
   ...props
 }: ImageProps) {
-  // Generate responsive sizes if not provided
-  const finalSizes =
-    sizes || `(max-width: 1440px) ${mobileSize}, ${desktopSize}`
+  const responsiveSizes =
+    mobileSize || desktopSize
+      ? buildImageSizes({
+          base: mobileSize ?? "100vw",
+          desktop: desktopSize ?? mobileSize ?? "100vw",
+        })
+      : undefined
+
+  const hasIntrinsicSize = width !== undefined && height !== undefined
+  const finalSizes = sizes ?? responsiveSizes ?? (hasIntrinsicSize ? undefined : "100vw")
+  const finalWidth = width ?? (block ? 1 : undefined)
+  const finalHeight = height ?? (block ? 1 : undefined)
 
   // Early return after hooks
   if (!src) return null
@@ -193,8 +202,8 @@ export function Image({
     <NextImage
       ref={ref}
       fill={!block}
-      {...(width !== undefined && { width })}
-      {...(height !== undefined && { height })}
+      {...(finalWidth !== undefined && { width: finalWidth })}
+      {...(finalHeight !== undefined && { height: finalHeight })}
       priority={priority}
       quality={quality}
       alt={alt}
@@ -203,7 +212,7 @@ export function Image({
         ...style,
       }}
       className={cn(className, block && "block w-full")}
-      sizes={finalSizes}
+      {...(finalSizes && { sizes: finalSizes })}
       src={src}
       unoptimized={unoptimized || isSvg}
       draggable={false}