bsmnt 0.11.0 → 0.12.0

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}

package/src/templates/next-pagebuilder/next.config.ts

@@ -77,7 +77,6 @@ const nextConfig: NextConfig = {
     ],
   },
   images: {
-    dangerouslyAllowSVG: true,
     remotePatterns: [
       {
         protocol: "https",
@@ -85,9 +84,11 @@ const nextConfig: NextConfig = {
       },
     ],
     minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
-    qualities: [90],
+    qualities: [75, 90, 100],
     formats: ["image/avif", "image/webp"],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    deviceSizes: [
+      640, 750, 828, 1080, 1200, 1320, 1620, 1920, 2048, 2560, 3024, 3456, 3840,
+    ],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   },
   headers: async () => [

package/src/templates/next-pagebuilder-cache/.biome/plugins/no-fill-without-sizes.grit

@@ -0,0 +1,11 @@
+language js
+
+or {
+	`<Image $attrs />`,
+	`<SanityImage $attrs />`
+} as $image where {
+	$attrs <: contains `fill`,
+	! $attrs <: contains `fill={false}`,
+	! $attrs <: contains or { `sizes`, `mobileSize`, `desktopSize` },
+	register_diagnostic(span=$image, message="A `fill` image has no intrinsic width, so without `sizes` the browser assumes 100vw and requests the largest candidate. Pass `sizes`, or `mobileSize`/`desktopSize`.", severity="error")
+}

package/src/templates/next-pagebuilder-cache/biome.json

@@ -247,7 +247,8 @@
   "plugins": [
     "./.biome/plugins/no-anchor-element.grit",
     "./.biome/plugins/no-unnecessary-forwardref.grit",
-    "./.biome/plugins/no-relative-parent-imports.grit"
+    "./.biome/plugins/no-relative-parent-imports.grit",
+    "./.biome/plugins/no-fill-without-sizes.grit"
   ],
   "vcs": {
     "clientKind": "git",

package/src/templates/next-pagebuilder-cache/components/page-builder/components/article-content/index.tsx

@@ -28,6 +28,9 @@ export function ArticleContent({ block }: ArticleContentProps) {
             <SanityImage
               image={author.avatar}
               alt={author.name || ""}
+              width={40}
+              height={40}
+              maxWidth={80}
               className="size-10 rounded-full object-cover"
             />
           ) : null}
@@ -50,6 +53,8 @@ export function ArticleContent({ block }: ArticleContentProps) {
             image={thumbnail}
             alt={thumbnail.alt || ""}
             priority
+            quality={90}
+            sizes="(min-width: 896px) 896px, 100vw"
             className="aspect-video w-full object-cover"
           />
         </div>

package/src/templates/next-pagebuilder-cache/components/page-builder/components/article-content/related-post-item.tsx

@@ -14,6 +14,7 @@ export const RelatedPostItem = ({ post }: { post: ArticleRelatedPost }) => {
             <SanityImage
               image={post.metadata.image}
               alt={post.title || ""}
+              sizes="(min-width: 768px) 768px, 100vw"
               className="aspect-[16/9] w-full object-cover transition-transform duration-300 group-hover:scale-105"
             />
           </div>

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}

package/src/templates/next-pagebuilder-cache/lib/utils/image-sizes.ts

@@ -0,0 +1,72 @@
+/** Mirrors the theme's `--breakpoint-*` scale, which clears Tailwind's defaults. */
+export const BASEMENT_BREAKPOINTS = {
+  mobile: 640,
+  tablet: 768,
+  "tablet-lg": 1024,
+  desktop: 1440,
+  "desktop-large": 1920,
+} as const
+
+export type BreakpointMap = Readonly<Record<string, number>>
+
+/** Mirrors the element's variants: `grid-cols-1 tablet:grid-cols-2` → `{ base: 1, tablet: 2 }`. */
+export type ByBreakpoint<
+  T,
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+> = { base: T } & Partial<Record<Extract<keyof B, string>, T>>
+
+function columnWidth(columns: number): string {
+  return `${Math.round(100 / columns)}vw`
+}
+
+/**
+ * Widest first, since `sizes` takes the first matching condition and the last
+ * entry must be bare. `min-width` matches the Tailwind variant's boundary; a
+ * `max-width: <next> - 1` one would leave a fractional-pixel gap.
+ */
+function toSizes(
+  base: string,
+  overrides: Readonly<Record<string, string | undefined>>,
+  scale: BreakpointMap
+): string {
+  const conditions: string[] = []
+
+  for (const [name, min] of Object.entries(scale).sort(
+    ([, a], [, b]) => b - a
+  )) {
+    const value = overrides[name]
+    if (value !== undefined) {
+      conditions.push(`(min-width: ${min}px) ${value}`)
+    }
+  }
+
+  return [...conditions, base].join(", ")
+}
+
+/** Builds `sizes` from the CSS length the image renders at per breakpoint. */
+export function buildImageSizes<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+>(widths: ByBreakpoint<string, B>, breakpoints?: B): string {
+  const { base, ...overrides } = widths
+  return toSizes(base, overrides, breakpoints ?? BASEMENT_BREAKPOINTS)
+}
+
+/**
+ * Builds `sizes` from a grid's column count per breakpoint. Rounded: `sizes`
+ * only steers which srcset candidate the browser picks, and gaps make the real
+ * column narrower than `100 / N` anyway.
+ */
+export function buildGridImageSizes<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+>(columns: ByBreakpoint<number, B>, breakpoints?: B): string {
+  const { base, ...overrides } = columns
+  const widths: Record<string, string> = {}
+
+  for (const [name, count] of Object.entries(overrides)) {
+    if (count !== undefined) {
+      widths[name] = columnWidth(count)
+    }
+  }
+
+  return toSizes(columnWidth(base), widths, breakpoints ?? BASEMENT_BREAKPOINTS)
+}

package/src/templates/next-pagebuilder-cache/next.config.ts

@@ -82,7 +82,6 @@ const nextConfig: NextConfig = {
     ],
   },
   images: {
-    dangerouslyAllowSVG: true,
     remotePatterns: [
       {
         protocol: "https",
@@ -90,9 +89,11 @@ const nextConfig: NextConfig = {
       },
     ],
     minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
-    qualities: [90],
+    qualities: [75, 90, 100],
     formats: ["image/avif", "image/webp"],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    deviceSizes: [
+      640, 750, 828, 1080, 1200, 1320, 1620, 1920, 2048, 2560, 3024, 3456, 3840,
+    ],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   },
   headers: async () => [

package/src/templates/next-webgl/.biome/plugins/no-fill-without-sizes.grit

@@ -0,0 +1,11 @@
+language js
+
+or {
+	`<Image $attrs />`,
+	`<SanityImage $attrs />`
+} as $image where {
+	$attrs <: contains `fill`,
+	! $attrs <: contains `fill={false}`,
+	! $attrs <: contains or { `sizes`, `mobileSize`, `desktopSize` },
+	register_diagnostic(span=$image, message="A `fill` image has no intrinsic width, so without `sizes` the browser assumes 100vw and requests the largest candidate. Pass `sizes`, or `mobileSize`/`desktopSize`.", severity="error")
+}

package/src/templates/next-webgl/biome.json

@@ -234,7 +234,8 @@
   "plugins": [
     "./.biome/plugins/no-anchor-element.grit",
     "./.biome/plugins/no-unnecessary-forwardref.grit",
-    "./.biome/plugins/no-relative-parent-imports.grit"
+    "./.biome/plugins/no-relative-parent-imports.grit",
+    "./.biome/plugins/no-fill-without-sizes.grit"
   ],
   "vcs": {
     "clientKind": "git",

package/src/templates/next-webgl/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}

package/src/templates/next-webgl/next.config.ts

@@ -77,12 +77,18 @@ const nextConfig: NextConfig = {
     ],
   },
   images: {
-    dangerouslyAllowSVG: true,
-    remotePatterns: [],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "cdn.sanity.io",
+      },
+    ],
     minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
-    qualities: [90],
+    qualities: [75, 90, 100],
     formats: ["image/avif", "image/webp"],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    deviceSizes: [
+      640, 750, 828, 1080, 1200, 1320, 1620, 1920, 2048, 2560, 3024, 3456, 3840,
+    ],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   },
   headers: async () => [