bsmnt 0.11.0 → 0.13.0

package/src/templates/next-pagebuilder/components/page-builder/section.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react"
+import { spacingPaddingValue } from "@/lib/integrations/sanity/schemas/shared/spacing"
+import { cn } from "@/lib/styles/cn"
+
+export type SectionPresentation = {
+  paddingTop?: string | null
+  paddingBottom?: string | null
+} | null
+
+type SectionProps = {
+  anchorId?: string | null | undefined
+  presentation?: SectionPresentation | undefined
+  className?: string | undefined
+  children: ReactNode
+}
+
+export function Section({
+  anchorId,
+  presentation,
+  className,
+  children,
+}: SectionProps) {
+  return (
+    <section
+      id={anchorId || undefined}
+      style={{
+        paddingTop: spacingPaddingValue(presentation?.paddingTop),
+        paddingBottom: spacingPaddingValue(presentation?.paddingBottom),
+      }}
+      className={cn(anchorId && "scroll-mt-24", className)}
+    >
+      {children}
+    </section>
+  )
+}

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

@@ -132,7 +132,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/components/ui/image/index.tsx

@@ -98,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
@@ -147,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,
@@ -164,9 +163,18 @@ export function Image({
   priority = false,
   ...props
 }: ImageProps) {
-  // Generate responsive sizes if not provided
-  const finalSizes =
-    sizes || buildImageSizes({ base: mobileSize, desktop: 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
@@ -194,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}
@@ -204,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}