bsmnt 0.13.0 → 0.14.0

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),
+    }))
+  )
 }

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/use-studio-preview-urls.ts

@@ -1,62 +0,0 @@
-import { useEffect, useState } from "react";
-import { useClient } from "sanity";
-import { apiVersion } from "@/lib/integrations/sanity/env";
-
-const PREVIEW_ASSETS_QUERY = `*[
-  _type == "studioPreview" &&
-  key in $keys &&
-  defined(preview.asset._ref)
-] | order(_updatedAt desc) {
-  key,
-  "url": preview.asset->url
-}`;
-
-type PreviewDocument = {
-	key: string | null;
-	url: string | null;
-};
-
-export type StudioPreviewUrls = Record<string, string>;
-
-const SEPARATOR = " ";
-
-/** `undefined` while in flight, so callers can tell loading from "no preview". */
-export function useStudioPreviewUrls(keys: readonly string[]) {
-	const client = useClient({ apiVersion });
-	const [urls, setUrls] = useState<StudioPreviewUrls>();
-	// Keys off contents, not array identity — callers pass a freshly mapped array.
-	const keyList = keys.join(SEPARATOR);
-
-	useEffect(() => {
-		if (!keyList) {
-			setUrls({});
-			return;
-		}
-
-		let cancelled = false;
-
-		client
-			.fetch<PreviewDocument[]>(PREVIEW_ASSETS_QUERY, {
-				keys: keyList.split(SEPARATOR),
-			})
-			.then((documents) => {
-				if (cancelled) return;
-				const next: StudioPreviewUrls = {};
-				for (const document of documents) {
-					if (document.key && document.url && !next[document.key]) {
-						next[document.key] = document.url;
-					}
-				}
-				setUrls(next);
-			})
-			.catch(() => {
-				if (!cancelled) setUrls({});
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	}, [client, keyList]);
-
-	return urls;
-}

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/studio-preview.ts

@@ -1,37 +0,0 @@
-import { defineField, defineType } from "sanity";
-import { pageBuilderCardIcon } from "@/lib/integrations/sanity/icons";
-import { pageBuilderBlockPreviewOptions } from "@/lib/integrations/sanity/page-builder-config";
-
-export const studioPreview = defineType({
-	name: "studioPreview",
-	title: "Component Preview",
-	type: "document",
-	icon: pageBuilderCardIcon,
-	fields: [
-		defineField({
-			name: "key",
-			title: "Component",
-			type: "string",
-			options: { list: pageBuilderBlockPreviewOptions },
-			validation: (Rule) => Rule.required(),
-		}),
-		defineField({
-			name: "preview",
-			title: "Preview image",
-			type: "image",
-			options: { hotspot: true },
-			validation: (Rule) => Rule.required(),
-		}),
-	],
-	preview: {
-		select: { key: "key", media: "preview" },
-		prepare({ key, media }) {
-			return {
-				title:
-					pageBuilderBlockPreviewOptions.find((option) => option.value === key)
-						?.title ?? "Component Preview",
-				media,
-			};
-		},
-	},
-});

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/use-studio-preview-urls.ts

@@ -1,62 +0,0 @@
-import { useEffect, useState } from "react";
-import { useClient } from "sanity";
-import { apiVersion } from "@/lib/integrations/sanity/env";
-
-const PREVIEW_ASSETS_QUERY = `*[
-  _type == "studioPreview" &&
-  key in $keys &&
-  defined(preview.asset._ref)
-] | order(_updatedAt desc) {
-  key,
-  "url": preview.asset->url
-}`;
-
-type PreviewDocument = {
-	key: string | null;
-	url: string | null;
-};
-
-export type StudioPreviewUrls = Record<string, string>;
-
-const SEPARATOR = " ";
-
-/** `undefined` while in flight, so callers can tell loading from "no preview". */
-export function useStudioPreviewUrls(keys: readonly string[]) {
-	const client = useClient({ apiVersion });
-	const [urls, setUrls] = useState<StudioPreviewUrls>();
-	// Keys off contents, not array identity — callers pass a freshly mapped array.
-	const keyList = keys.join(SEPARATOR);
-
-	useEffect(() => {
-		if (!keyList) {
-			setUrls({});
-			return;
-		}
-
-		let cancelled = false;
-
-		client
-			.fetch<PreviewDocument[]>(PREVIEW_ASSETS_QUERY, {
-				keys: keyList.split(SEPARATOR),
-			})
-			.then((documents) => {
-				if (cancelled) return;
-				const next: StudioPreviewUrls = {};
-				for (const document of documents) {
-					if (document.key && document.url && !next[document.key]) {
-						next[document.key] = document.url;
-					}
-				}
-				setUrls(next);
-			})
-			.catch(() => {
-				if (!cancelled) setUrls({});
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	}, [client, keyList]);
-
-	return urls;
-}

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/schemas/components/studio-preview.ts

@@ -1,37 +0,0 @@
-import { defineField, defineType } from "sanity";
-import { pageBuilderCardIcon } from "@/lib/integrations/sanity/icons";
-import { pageBuilderBlockPreviewOptions } from "@/lib/integrations/sanity/page-builder-config";
-
-export const studioPreview = defineType({
-	name: "studioPreview",
-	title: "Component Preview",
-	type: "document",
-	icon: pageBuilderCardIcon,
-	fields: [
-		defineField({
-			name: "key",
-			title: "Component",
-			type: "string",
-			options: { list: pageBuilderBlockPreviewOptions },
-			validation: (Rule) => Rule.required(),
-		}),
-		defineField({
-			name: "preview",
-			title: "Preview image",
-			type: "image",
-			options: { hotspot: true },
-			validation: (Rule) => Rule.required(),
-		}),
-	],
-	preview: {
-		select: { key: "key", media: "preview" },
-		prepare({ key, media }) {
-			return {
-				title:
-					pageBuilderBlockPreviewOptions.find((option) => option.value === key)
-						?.title ?? "Component Preview",
-				media,
-			};
-		},
-	},
-});