bsmnt 0.12.0 → 0.13.1

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

@@ -15,40 +15,55 @@ export type ByBreakpoint<
   B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
 > = { base: T } & Partial<Record<Extract<keyof B, string>, T>>
 
+export type ImageSizesOptions<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+> = { breakpoints?: B }
+
+export type GridImageSizesOptions<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+> = ImageSizesOptions<B> & {
+  /** The grid container's `max-width` in px, past which columns stop growing. */
+  maxWidth?: number
+}
+
+type Condition<T> = { min: number; value: T }
+
 function columnWidth(columns: number): string {
   return `${Math.round(100 / columns)}vw`
 }
 
+function toConditions<T>(
+  overrides: Readonly<Record<string, T | undefined>>,
+  scale: BreakpointMap
+): Condition<T>[] {
+  return Object.entries(overrides).flatMap(([name, value]) => {
+    const min = scale[name]
+    return value !== undefined && min !== undefined ? [{ min, value }] : []
+  })
+}
+
 /**
  * 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}`)
-    }
-  }
+function joinSizes(base: string, conditions: Condition<string>[]): string {
+  const sorted = [...conditions].sort((a, b) => b.min - a.min)
 
-  return [...conditions, base].join(", ")
+  return [
+    ...sorted.map(({ min, value }) => `(min-width: ${min}px) ${value}`),
+    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 {
+>(widths: ByBreakpoint<string, B>, options: ImageSizesOptions<B> = {}): string {
   const { base, ...overrides } = widths
-  return toSizes(base, overrides, breakpoints ?? BASEMENT_BREAKPOINTS)
+  const scale = options.breakpoints ?? BASEMENT_BREAKPOINTS
+
+  return joinSizes(base, toConditions<string>(overrides, scale))
 }
 
 /**
@@ -58,15 +73,39 @@ export function buildImageSizes<
  */
 export function buildGridImageSizes<
   B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
->(columns: ByBreakpoint<number, B>, breakpoints?: B): string {
+>(
+  columns: ByBreakpoint<number, B>,
+  options: GridImageSizesOptions<B> = {}
+): string {
+  const { maxWidth, breakpoints } = options
   const { base, ...overrides } = columns
-  const widths: Record<string, string> = {}
+  const steps = toConditions<number>(
+    overrides,
+    breakpoints ?? BASEMENT_BREAKPOINTS
+  )
+  const cap =
+    maxWidth !== undefined && Number.isFinite(maxWidth) && maxWidth > 0
+      ? maxWidth
+      : undefined
+
+  // The cap rarely lands on a breakpoint, so it needs its own condition.
+  if (cap !== undefined && !steps.some(({ min }) => min === cap)) {
+    const below = steps
+      .filter(({ min }) => min < cap)
+      .sort((a, b) => a.min - b.min)
+      .at(-1)
 
-  for (const [name, count] of Object.entries(overrides)) {
-    if (count !== undefined) {
-      widths[name] = columnWidth(count)
-    }
+    steps.push({ min: cap, value: below?.value ?? base })
   }
 
-  return toSizes(columnWidth(base), widths, breakpoints ?? BASEMENT_BREAKPOINTS)
+  return joinSizes(
+    columnWidth(base),
+    steps.map(({ min, value }) => ({
+      min,
+      value:
+        cap !== undefined && min >= cap
+          ? `${Math.round(cap / value)}px`
+          : columnWidth(value),
+    }))
+  )
 }

package/src/templates/next-webgl/lib/utils/README.md

@@ -45,6 +45,7 @@ export const metadata = generatePageMetadata({ title: 'About' })
 // next/image sizes — keys mirror the element's Tailwind variants
 buildImageSizes({ base: '100vw', desktop: '796px' })
 buildGridImageSizes({ base: 1, tablet: 2, desktop: 3 })
+buildGridImageSizes({ base: 1, tablet: 2, desktop: 3 }, { maxWidth: 1440 })
 
 // Refs — in a component, use the hook: an inline mergeRefs([...]) is a new
 // callback each render, so React detaches and reattaches every ref.

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

@@ -15,40 +15,55 @@ export type ByBreakpoint<
   B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
 > = { base: T } & Partial<Record<Extract<keyof B, string>, T>>
 
+export type ImageSizesOptions<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+> = { breakpoints?: B }
+
+export type GridImageSizesOptions<
+  B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
+> = ImageSizesOptions<B> & {
+  /** The grid container's `max-width` in px, past which columns stop growing. */
+  maxWidth?: number
+}
+
+type Condition<T> = { min: number; value: T }
+
 function columnWidth(columns: number): string {
   return `${Math.round(100 / columns)}vw`
 }
 
+function toConditions<T>(
+  overrides: Readonly<Record<string, T | undefined>>,
+  scale: BreakpointMap
+): Condition<T>[] {
+  return Object.entries(overrides).flatMap(([name, value]) => {
+    const min = scale[name]
+    return value !== undefined && min !== undefined ? [{ min, value }] : []
+  })
+}
+
 /**
  * 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}`)
-    }
-  }
+function joinSizes(base: string, conditions: Condition<string>[]): string {
+  const sorted = [...conditions].sort((a, b) => b.min - a.min)
 
-  return [...conditions, base].join(", ")
+  return [
+    ...sorted.map(({ min, value }) => `(min-width: ${min}px) ${value}`),
+    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 {
+>(widths: ByBreakpoint<string, B>, options: ImageSizesOptions<B> = {}): string {
   const { base, ...overrides } = widths
-  return toSizes(base, overrides, breakpoints ?? BASEMENT_BREAKPOINTS)
+  const scale = options.breakpoints ?? BASEMENT_BREAKPOINTS
+
+  return joinSizes(base, toConditions<string>(overrides, scale))
 }
 
 /**
@@ -58,15 +73,39 @@ export function buildImageSizes<
  */
 export function buildGridImageSizes<
   B extends BreakpointMap = typeof BASEMENT_BREAKPOINTS,
->(columns: ByBreakpoint<number, B>, breakpoints?: B): string {
+>(
+  columns: ByBreakpoint<number, B>,
+  options: GridImageSizesOptions<B> = {}
+): string {
+  const { maxWidth, breakpoints } = options
   const { base, ...overrides } = columns
-  const widths: Record<string, string> = {}
+  const steps = toConditions<number>(
+    overrides,
+    breakpoints ?? BASEMENT_BREAKPOINTS
+  )
+  const cap =
+    maxWidth !== undefined && Number.isFinite(maxWidth) && maxWidth > 0
+      ? maxWidth
+      : undefined
+
+  // The cap rarely lands on a breakpoint, so it needs its own condition.
+  if (cap !== undefined && !steps.some(({ min }) => min === cap)) {
+    const below = steps
+      .filter(({ min }) => min < cap)
+      .sort((a, b) => a.min - b.min)
+      .at(-1)
 
-  for (const [name, count] of Object.entries(overrides)) {
-    if (count !== undefined) {
-      widths[name] = columnWidth(count)
-    }
+    steps.push({ min: cap, value: below?.value ?? base })
   }
 
-  return toSizes(columnWidth(base), widths, breakpoints ?? BASEMENT_BREAKPOINTS)
+  return joinSizes(
+    columnWidth(base),
+    steps.map(({ min, value }) => ({
+      min,
+      value:
+        cap !== undefined && min >= cap
+          ? `${Math.round(cap / value)}px`
+          : columnWidth(value),
+    }))
+  )
 }