bsmnt 0.11.0 → 0.12.0

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

@@ -0,0 +1,62 @@
+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/page-builder-config.ts

@@ -9,15 +9,35 @@ export type PageBuilderDocumentType =
 	| "blogContent"
 	| (typeof singletonComponents)[number]["schemaType"];
 
+/**
+ * A block declares two orthogonal axes. `pageTypes` is which page documents may
+ * host it and drives validation; `category` is what the block structurally is
+ * and drives the insert menu. Never collapse them back into one field — that is
+ * what made the menu a single flat list.
+ */
+export type PageBuilderGroupName = "generic" | "blogEntry";
+
+export const componentCategories = [
+	{ name: "hero", title: "Hero" },
+	{ name: "text", title: "Text" },
+	{ name: "list", title: "List" },
+	{ name: "content", title: "Content" },
+	{ name: "misc", title: "Miscellaneous" },
+] as const satisfies ReadonlyArray<{ name: string; title: string }>;
+
+export type ComponentCategory = (typeof componentCategories)[number]["name"];
+
 type PageBuilderReferenceMember = {
 	documentType: PageBuilderDocumentType;
 	name: string;
 	title: string;
 	documentId?: string;
-	groups: PageBuilderGroupName[];
+	pageTypes: readonly PageBuilderGroupName[];
+	category: ComponentCategory;
 };
 
-export type PageBuilderGroupName = "generic" | "blogEntry";
+export const blockPreviewKey = (schemaTypeName: string) =>
+	`block.${schemaTypeName}`;
 
 export const pageBuilderPageTypes: Array<{
 	title: string;
@@ -41,31 +61,36 @@ const reusablePageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
 		documentType: "hero",
 		name: "heroReference",
 		title: "Heading",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "hero",
 	},
 	{
 		documentType: "description",
 		name: "descriptionReference",
 		title: "Description",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "text",
 	},
 	{
 		documentType: "richTextBlock",
 		name: "richTextBlockReference",
 		title: "Rich Text",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "text",
 	},
 	{
 		documentType: "gatedContent",
 		name: "gatedContentReference",
 		title: "Gated Content",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "misc",
 	},
 	{
 		documentType: "blogContent",
 		name: "blogContentReference",
 		title: "Blog Content",
-		groups: ["blogEntry"],
+		pageTypes: ["blogEntry"],
+		category: "content",
 	},
 ];
 
@@ -75,7 +100,8 @@ const singletonPageBuilderReferenceMembers: PageBuilderReferenceMember[] =
 		name: `${component.schemaType}Reference`,
 		title: component.title,
 		documentId: component.documentId,
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: component.category,
 	}));
 
 export const pageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
@@ -93,25 +119,37 @@ export const getPageBuilderReferenceMemberByDocumentType = (
 		(member) => member.documentType === documentType,
 	);
 
-const isPageBuilderGroupVisible = (
+const isMemberVisibleForPageType = (
+	member: PageBuilderReferenceMember,
 	pageType: PageBuilderGroupName | undefined,
-	group: PageBuilderGroupName,
-) => (pageType ?? "generic") === group;
+) => member.pageTypes.includes(pageType ?? "generic");
 
 export const getVisiblePageBuilderReferenceMembers = (
 	pageType: PageBuilderGroupName | undefined,
 ) =>
 	pageBuilderReferenceMembers.filter((member) =>
-		member.groups.some((group) => isPageBuilderGroupVisible(pageType, group)),
+		isMemberVisibleForPageType(member, pageType),
 	);
 
-export const getVisiblePageBuilderInsertMenuGroups = (
+export const getVisiblePageBuilderMemberNames = (
 	pageType: PageBuilderGroupName | undefined,
 ) =>
-	pageBuilderInsertMenuGroups.filter(
-		(group) => group.name === (pageType ?? "generic"),
+	new Set(
+		getVisiblePageBuilderReferenceMembers(pageType).map((member) => member.name),
 	);
 
+export const getVisiblePageBuilderInsertMenuGroups = (
+	pageType: PageBuilderGroupName | undefined,
+) => {
+	const visible = getVisiblePageBuilderMemberNames(pageType);
+	return pageBuilderInsertMenuGroups
+		.map((group) => ({
+			...group,
+			of: group.of.filter((name) => visible.has(name)),
+		}))
+		.filter((group) => group.of.length > 0);
+};
+
 export const getInvalidPageBuilderDocumentTypes = (
 	pageType: PageBuilderGroupName | undefined,
 	documentTypes: PageBuilderDocumentType[],
@@ -121,24 +159,24 @@ export const getInvalidPageBuilderDocumentTypes = (
 
 		if (!member) return false;
 
-		return !member.groups.some((group) =>
-			isPageBuilderGroupVisible(pageType, group),
-		);
+		return !isMemberVisibleForPageType(member, pageType);
 	});
 
-export const pageBuilderInsertMenuGroups = [
-	{
-		name: "generic",
-		title: "Generic",
-		of: pageBuilderReferenceMembers
-			.filter((member) => member.groups.includes("generic"))
-			.map((member) => member.name),
-	},
-	{
-		name: "blogEntry",
-		title: "Blog Entry",
-		of: pageBuilderReferenceMembers
-			.filter((member) => member.groups.includes("blogEntry"))
-			.map((member) => member.name),
-	},
-];
+export const pageBuilderInsertMenuGroups: Array<{
+	name: ComponentCategory;
+	title: string;
+	of: string[];
+}> = componentCategories.map(({ name, title }) => ({
+	name,
+	title,
+	of: pageBuilderReferenceMembers
+		.filter((member) => member.category === name)
+		.map((member) => member.name),
+}));
+
+export const pageBuilderBlockPreviewOptions = pageBuilderReferenceMembers.map(
+	(member) => ({
+		title: `Block — ${member.title} · ${member.name}`,
+		value: blockPreviewKey(member.name),
+	}),
+);

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

@@ -4,3 +4,4 @@ export { gatedContent } from "./reusable/gated-content";
 export { hero } from "./reusable/hero";
 export { richTextBlock } from "./reusable/rich-text-block";
 export { blogCollection } from "./singleton/content-collection";
+export { studioPreview } from "./studio-preview";

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

@@ -0,0 +1,37 @@
+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/schemas/index.ts

@@ -15,6 +15,7 @@ import {
 	gatedContent,
 	hero,
 	richTextBlock,
+	studioPreview,
 } from "./components";
 import { author } from "./content/author";
 import { blogCategory } from "./content/blog-category";
@@ -77,6 +78,7 @@ export {
 	richText,
 	softwareApplicationJsonLd,
 	structuredData,
+	studioPreview,
 	videoJsonLd,
 };
 
@@ -113,6 +115,7 @@ export const schema: { types: SchemaTypeDefinition[] } = {
 		description,
 		richTextBlock,
 		gatedContent,
+		studioPreview,
 
 		// Layout types (singletons for site-wide layout)
 		companyData,

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/singletons.ts

@@ -6,12 +6,14 @@ import {
 	structuredDataIcon,
 } from "./icons";
 
+// `category` must be one of `componentCategories` in page-builder-config.ts.
 export const singletonComponents = [
 	{
 		schemaType: "blogCollection",
 		documentId: "blogCollection",
 		title: "Blog Collection",
 		icon: pageListIcon,
+		category: "list",
 	},
 ] as const;
 

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/structure.ts

@@ -17,6 +17,7 @@ import {
 	gatedContentIcon,
 	heroIcon,
 	layoutFolderIcon,
+	pageBuilderCardIcon,
 	pageFolderIcon,
 	pageIcon,
 	pagesFolderIcon,
@@ -301,6 +302,10 @@ export const structure: StructureResolver = (S, context) =>
 							S.documentTypeListItem("blogContent")
 								.title("Blog Content")
 								.icon(contentIcon),
+							S.divider(),
+							S.documentTypeListItem("studioPreview")
+								.title("Component Previews")
+								.icon(pageBuilderCardIcon),
 						]),
 				),
 

package/src/templates/next-default/.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-default/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-default/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-default/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 () => [

package/src/templates/next-experiments/.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-experiments/biome.json

@@ -229,7 +229,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-experiments/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-experiments/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 () => [

package/src/templates/next-pagebuilder/.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/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/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/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>