bsmnt 0.11.0 → 0.12.0

package/src/modules/features/cms/sanity-pagebuilder/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/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/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/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/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/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/modules/features/cms/sanity-pagebuilder-cache/files/components/sanity/rich-text.tsx

@@ -42,7 +42,13 @@ export const RichText = ({ content }: RichTextProps) => {
 			value={content}
 			components={{
 				types: {
-					image: ({ value }) => <SanityImage image={value} maxWidth={1920} />,
+					image: ({ value }) => (
+						<SanityImage
+							image={value}
+							maxWidth={1920}
+							sizes="(min-width: 768px) 768px, 100vw"
+						/>
+					),
 					table: ({ value }) => {
 						const rows = value?.rows as
 							| Array<{ _key?: string; cells?: string[] }>

package/src/modules/features/cms/sanity-pagebuilder-cache/files/components/ui/sanity-image/index.tsx

@@ -2,7 +2,8 @@ import { getImageDimensions } from "@sanity/asset-utils";
 import { Image, type ImageProps } from "@/components/ui/image";
 import { urlForImage } from "@/lib/integrations/sanity/utils/image";
 
-interface SanityImageProps extends Omit<ImageProps, "src" | "aspectRatio"> {
+interface SanityImageBaseProps
+	extends Omit<ImageProps, "src" | "aspectRatio" | "sizes" | "width" | "height"> {
 	image: {
 		asset?: {
 			_ref: string;
@@ -15,6 +16,38 @@ interface SanityImageProps extends Omit<ImageProps, "src" | "aspectRatio"> {
 	maxWidth?: number;
 }
 
+type SanityImageProps = SanityImageBaseProps &
+	(
+		| { sizes: string; width?: never; height?: never }
+		| { width: number; height: number; sizes?: string }
+	);
+
+const MAX_SOURCE_WIDTH = 3840;
+
+const isGifRef = (ref: string) => ref.endsWith("-gif");
+
+const getImageSrc = (
+	image: SanityImageProps["image"],
+	maxWidth: number,
+	croppedWidth: number,
+) => {
+	const builder = urlForImage(image);
+	const ref = image.asset?._ref ?? "";
+
+	if (ref.endsWith("-svg")) return builder.url();
+
+	const requestWidth = Math.min(maxWidth, MAX_SOURCE_WIDTH, croppedWidth);
+	const { left, right, top, bottom } = image.crop ?? {};
+	const hasCrop = Boolean(left || right || top || bottom);
+	const isGif = isGifRef(ref);
+
+	if (!(isGif || hasCrop) && requestWidth >= croppedWidth) {
+		return builder.url();
+	}
+
+	return builder.width(requestWidth).url();
+};
+
 export function SanityImage({
 	image,
 	maxWidth = 1920,
@@ -39,11 +72,10 @@ export function SanityImage({
 
 	return (
 		<Image
-			src={urlForImage(image)
-				.width(Math.min(maxWidth, sourceWidth))
-				.url()}
+			src={getImageSrc(image, maxWidth, sourceWidth)}
 			alt={alt || image.alt || ""}
 			aspectRatio={sourceWidth / sourceHeight}
+			unoptimized={isGifRef(image.asset._ref)}
 			{...imageProps}
 			{...props}
 		/>

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/page-builder-input.tsx

@@ -1,25 +1,43 @@
 import { type ArrayOfObjectsInputProps, useFormValue } from "sanity";
+import { PageBuilderInsertMenu } from "@/lib/integrations/sanity/components/page-builder-insert-menu";
+import { useStudioPreviewUrls } from "@/lib/integrations/sanity/components/use-studio-preview-urls";
 import {
+	blockPreviewKey,
 	getVisiblePageBuilderInsertMenuGroups,
-	getVisiblePageBuilderReferenceMembers,
+	getVisiblePageBuilderMemberNames,
 	type PageBuilderGroupName,
+	pageBuilderReferenceMembers,
 } from "@/lib/integrations/sanity/page-builder-config";
 
+const BLOCK_PREVIEW_KEYS = pageBuilderReferenceMembers.map((member) =>
+	blockPreviewKey(member.name),
+);
+
+function useInsertMenuViews() {
+	const previewUrls = useStudioPreviewUrls(BLOCK_PREVIEW_KEYS);
+
+	return [
+		{
+			name: "grid" as const,
+			previewImageUrl: (schemaTypeName: string) =>
+				previewUrls?.[blockPreviewKey(schemaTypeName)],
+		},
+		{ name: "list" as const },
+	];
+}
+
 export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 	const pageTypeValue = useFormValue(["type"]);
 	const pageType =
 		typeof pageTypeValue === "string"
 			? (pageTypeValue as PageBuilderGroupName)
 			: undefined;
-
-	const visibleMemberNames = new Set(
-		getVisiblePageBuilderReferenceMembers(pageType).map(
-			(member) => member.name,
-		),
-	);
+	const views = useInsertMenuViews();
+	const visibleMemberNames = getVisiblePageBuilderMemberNames(pageType);
 
 	return props.renderDefault({
 		...props,
+		arrayFunctions: PageBuilderInsertMenu,
 		schemaType: {
 			...props.schemaType,
 			of: props.schemaType.of.filter(
@@ -32,6 +50,7 @@ export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 				insertMenu: {
 					...props.schemaType.options?.insertMenu,
 					groups: getVisiblePageBuilderInsertMenuGroups(pageType),
+					views,
 				},
 			},
 		},

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/page-builder-insert-menu.tsx

@@ -0,0 +1,242 @@
+import { AddIcon, SearchIcon } from "@sanity/icons";
+import {
+	Box,
+	Button,
+	Card,
+	Dialog,
+	Flex,
+	Grid,
+	Stack,
+	Text,
+	TextInput,
+} from "@sanity/ui";
+import { useMemo, useState } from "react";
+import type { ArrayInputFunctionsProps, ArraySchemaType } from "sanity";
+
+type ArrayItem = { _key: string };
+type MemberSchemaType = ArraySchemaType["of"][number];
+
+type CreateItem = (memberType: MemberSchemaType) => ArrayItem;
+
+type InsertMenuSection = {
+	name: string;
+	title: string;
+	members: MemberSchemaType[];
+};
+
+const SCROLL_HEIGHT = "min(60vh, 34rem)";
+const TILE_ASPECT_RATIO = "3 / 2";
+
+const memberTitle = (member: MemberSchemaType) => member.title ?? member.name;
+
+function BlockTile({
+	member,
+	previewUrl,
+	onSelect,
+}: {
+	member: MemberSchemaType;
+	previewUrl: string | undefined;
+	onSelect: () => void;
+}) {
+	const Icon = member.icon;
+
+	return (
+		<Card
+			as="button"
+			border
+			onClick={onSelect}
+			overflow="hidden"
+			padding={0}
+			radius={2}
+			style={{ cursor: "pointer", textAlign: "left", width: "100%" }}
+			type="button"
+		>
+			<Stack space={0}>
+				<Box
+					style={{
+						aspectRatio: TILE_ASPECT_RATIO,
+						background: "var(--card-muted-bg-color)",
+						position: "relative",
+					}}
+				>
+					{previewUrl ? (
+						// biome-ignore lint/performance/noImgElement: Studio-only CMS asset
+						<img
+							alt=""
+							src={`${previewUrl}?w=640&fit=max&auto=format`}
+							style={{
+								height: "100%",
+								inset: 0,
+								objectFit: "contain",
+								position: "absolute",
+								width: "100%",
+							}}
+						/>
+					) : (
+						<Flex
+							align="center"
+							justify="center"
+							style={{ inset: 0, position: "absolute" }}
+						>
+							{Icon ? <Icon /> : null}
+						</Flex>
+					)}
+				</Box>
+				<Box padding={2}>
+					<Text size={1} textOverflow="ellipsis" weight="medium">
+						{memberTitle(member)}
+					</Text>
+				</Box>
+			</Stack>
+		</Card>
+	);
+}
+
+function InsertMenuDialog({
+	sections,
+	previewImageUrl,
+	onSelect,
+	onClose,
+}: {
+	sections: InsertMenuSection[];
+	previewImageUrl: ((schemaTypeName: string) => string | undefined) | undefined;
+	onSelect: (member: MemberSchemaType) => void;
+	onClose: () => void;
+}) {
+	const [search, setSearch] = useState("");
+
+	const visibleSections = useMemo(() => {
+		const query = search.trim().toLowerCase();
+		if (!query) return sections;
+		return sections
+			.map((section) => ({
+				...section,
+				members: section.members.filter((member) =>
+					memberTitle(member).toLowerCase().includes(query),
+				),
+			}))
+			.filter((section) => section.members.length > 0);
+	}, [search, sections]);
+
+	return (
+		<Dialog
+			header="Components"
+			id="page-builder-insert"
+			onClose={onClose}
+			open
+			width={3}
+		>
+			<Stack padding={4} space={4}>
+				<TextInput
+					autoFocus
+					icon={SearchIcon}
+					onChange={(event) => setSearch(event.currentTarget.value)}
+					placeholder="Search components…"
+					value={search}
+				/>
+				<Box style={{ height: SCROLL_HEIGHT, overflowY: "auto" }}>
+					{visibleSections.length === 0 ? (
+						<Text muted size={1}>
+							No components match “{search}”.
+						</Text>
+					) : (
+						<Stack space={5}>
+							{visibleSections.map((section) => (
+								<Stack key={section.name} space={3}>
+									<Text muted size={1} weight="semibold">
+										{section.title}
+									</Text>
+									<Grid columns={[2, 3, 4]} gap={3}>
+										{section.members.map((member) => (
+											<BlockTile
+												key={member.name}
+												member={member}
+												onSelect={() => onSelect(member)}
+												previewUrl={previewImageUrl?.(member.name)}
+											/>
+										))}
+									</Grid>
+								</Stack>
+							))}
+						</Stack>
+					)}
+				</Box>
+			</Stack>
+		</Dialog>
+	);
+}
+
+/**
+ * Pass as `arrayFunctions`. Reads `insertMenu.groups` and `insertMenu.views`, so
+ * a schema already configuring the built-in menu needs no extra wiring.
+ *
+ * Replaces the built-in popover, which is anchored to the array grid element and
+ * so clips on page scroll and resizes when switching tabs.
+ */
+export function PageBuilderInsertMenu(
+	props: ArrayInputFunctionsProps<ArrayItem, ArraySchemaType>,
+) {
+	const { onItemAppend, onValueCreate, readOnly, schemaType } = props;
+	const [open, setOpen] = useState(false);
+
+	const insertMenu = schemaType.options?.insertMenu;
+	const members = schemaType.of;
+
+	const sections = useMemo<InsertMenuSection[]>(() => {
+		const byName = new Map(members.map((member) => [member.name, member]));
+		const groups = insertMenu?.groups;
+		if (!groups) {
+			return [{ name: "all", title: "Components", members: [...members] }];
+		}
+		return groups
+			.map((group) => ({
+				name: group.name,
+				title: group.title ?? group.name,
+				members: (group.of ?? [])
+					.map((name) => byName.get(name))
+					.filter((member) => member !== undefined),
+			}))
+			.filter((section) => section.members.length > 0);
+	}, [members, insertMenu]);
+
+	const previewImageUrl = useMemo(() => {
+		const gridView = insertMenu?.views?.find((view) => view.name === "grid");
+		return gridView && "previewImageUrl" in gridView
+			? gridView.previewImageUrl
+			: undefined;
+	}, [insertMenu]);
+
+	const insert = (member: MemberSchemaType) => {
+		onItemAppend((onValueCreate as unknown as CreateItem)(member));
+		setOpen(false);
+	};
+
+	const onlyMember = members.length === 1 ? members[0] : undefined;
+
+	if (schemaType.options?.disableActions?.includes("add")) return null;
+
+	return (
+		<>
+			<Grid>
+				<Button
+					disabled={readOnly === true}
+					fontSize={1}
+					icon={AddIcon}
+					mode="ghost"
+					onClick={() => (onlyMember ? insert(onlyMember) : setOpen(true))}
+					padding={3}
+					text={onlyMember ? "Add item" : "Add item…"}
+				/>
+			</Grid>
+
+			{open && (
+				<InsertMenuDialog
+					onClose={() => setOpen(false)}
+					onSelect={insert}
+					previewImageUrl={previewImageUrl}
+					sections={sections}
+				/>
+			)}
+		</>
+	);
+}