bsmnt 0.10.0 → 0.12.0

package/src/modules/features/cms/sanity-pagebuilder/files/components/sanity/visual-editing.tsx

@@ -1,7 +1,6 @@
 import { draftMode } from "next/headers";
 import { VisualEditing } from "next-sanity/visual-editing";
 import { Suspense } from "react";
-import { refreshAction } from "@/app/actions/refresh";
 import { DraftModeToggle } from "@/components/sanity/draft-mode-toggle";
 import { isSanityConfigured } from "@/lib/integrations/check-integration";
 import { SanityLive } from "@/lib/integrations/sanity/live";
@@ -16,7 +15,8 @@ async function VisualEditingInner() {
 		<>
 			<DraftModeToggle />
 			<VisualEditing />
-			<SanityLive action={refreshAction} />
+			{/* No `action`: in draft mode the default is already `"refresh"`. */}
+			<SanityLive />
 		</>
 	);
 }

package/src/modules/features/cms/sanity-pagebuilder/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/files/lib/integrations/check-integration.ts

@@ -1,5 +1,6 @@
-export const isSanityConfigured = () =>
-	Boolean(
-		process.env.NEXT_PUBLIC_SANITY_PROJECT_ID &&
-			process.env.NEXT_PUBLIC_SANITY_DATASET,
-	);
+import { dataset, projectId } from "@/lib/integrations/sanity/env";
+
+// Derived from env.ts, not a second read of `process.env`. Read directly these
+// disagreed — env.ts also accepts `SANITY_STUDIO_PROJECT_ID` and defaults the
+// dataset — so a resolvable project reported itself unconfigured.
+export const isSanityConfigured = () => Boolean(projectId && dataset);

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

@@ -25,3 +25,11 @@ export const client: SanityClient | null = isSanityConfigured()
 			},
 		})
 	: null;
+
+/**
+ * Non-CDN clone for the publish webhook, which has to see the mutation it was
+ * notified about rather than whatever the CDN still holds. Reading a stale slug
+ * there invalidates the old path and misses the new one.
+ */
+export const directClient: SanityClient | null =
+	client?.withConfig({ useCdn: false }) ?? null;

package/src/modules/features/cms/sanity-pagebuilder/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/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}
+				/>
+			)}
+		</>
+	);
+}

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/slug-notices.tsx

@@ -4,19 +4,7 @@ import { useClient, useFormValue } from "sanity";
 import { useRouter } from "sanity/router";
 import { apiVersion } from "@/lib/integrations/sanity/env";
 import { isEmptyPageSlug } from "@/lib/integrations/sanity/page-category";
-
-// Mirrors `pageResolvedSlugExpression`'s chain; leaf joins in JS so this
-// tracks the live slug, not the last saved draft.
-const FOLDER_PATH_QUERY = `*[_id == $folderId][0]{
-  "path": array::join(array::compact([
-    parentFolder->parentFolder->parentFolder->parentFolder->parentFolder->slug.current,
-    parentFolder->parentFolder->parentFolder->parentFolder->slug.current,
-    parentFolder->parentFolder->parentFolder->slug.current,
-    parentFolder->parentFolder->slug.current,
-    parentFolder->slug.current,
-    slug.current
-  ]), "/")
-}.path`;
+import { FOLDER_PATH_QUERY } from "@/lib/integrations/sanity/queries";
 
 const REDIRECT_QUERY = `*[_type == "redirect" && source.current == $source][0]._id`;
 
@@ -54,9 +42,11 @@ export function SlugRedirectNotice({ pinnedPath }: SlugRedirectNoticeProps) {
 		const published = client.withConfig({ perspective: "published" });
 
 		published
-			.fetch<string | null>(FOLDER_PATH_QUERY, { folderId })
-			.then((path) => {
-				if (active) setFolderPath(path ?? "");
+			// Leaf joins in JS below, so this tracks the live slug rather than the
+			// last saved draft.
+			.fetch<{ path: string | null } | null>(FOLDER_PATH_QUERY, { folderId })
+			.then((folder) => {
+				if (active) setFolderPath(folder?.path ?? "");
 			})
 			.catch(() => {
 				if (active) setFolderPath("");

package/src/modules/features/cms/sanity-pagebuilder/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/files/lib/integrations/sanity/env.ts

@@ -6,9 +6,9 @@
  * if Sanity is properly set up before making API calls.
  */
 
-/** Sanity API version - defaults to latest stable */
+/** Floor, not a preference: Content Releases need 2025-02-19 or later. */
 export const apiVersion =
-	process.env.NEXT_PUBLIC_SANITY_API_VERSION || "2024-03-15";
+	process.env.NEXT_PUBLIC_SANITY_API_VERSION || "2025-02-19";
 
 /** Sanity dataset name - defaults to 'production' */
 export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || "production";

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/fetchers/layout.ts

@@ -1,22 +1,13 @@
 import { cache } from "react";
 import { fetchSanity } from "@/lib/integrations/sanity/live";
-import {
-	COMPANY_DATA_QUERY,
-	FOOTER_QUERY,
-	NAVBAR_QUERY,
-	STRUCTURED_DATA_QUERY,
-} from "@/lib/integrations/sanity/queries";
-import type {
-	COMPANY_DATA_QUERY_RESULT,
-	FOOTER_QUERY_RESULT,
-	NAVBAR_QUERY_RESULT,
-	STRUCTURED_DATA_QUERY_RESULT,
-} from "@/lib/integrations/sanity/sanity.types";
+import { LAYOUT_QUERY } from "@/lib/integrations/sanity/queries";
+import type { LAYOUT_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types";
 
-export type NavbarData = NonNullable<NAVBAR_QUERY_RESULT>;
-export type FooterData = NonNullable<FOOTER_QUERY_RESULT>;
-export type CompanyData = NonNullable<COMPANY_DATA_QUERY_RESULT>;
-export type StructuredData = NonNullable<STRUCTURED_DATA_QUERY_RESULT>;
+export type LayoutData = LAYOUT_QUERY_RESULT;
+export type NavbarData = NonNullable<LayoutData["navbar"]>;
+export type FooterData = NonNullable<LayoutData["footer"]>;
+export type CompanyData = NonNullable<LayoutData["companyData"]>;
+export type StructuredData = NonNullable<LayoutData["structuredData"]>;
 
 // Singleton document types that, when published, should bust the layout cache.
 export const SANITY_LAYOUT_TAGS = [
@@ -26,42 +17,21 @@ export const SANITY_LAYOUT_TAGS = [
 	"structuredData",
 ];
 
-// Wrapped in React cache so components sharing a singleton (e.g. Footer + JsonLd
-// both reading companyData) only hit Sanity once per request.
-export const getNavbarData = cache(async (): Promise<NavbarData | null> => {
-	const { data } = await fetchSanity<NavbarData>({
-		query: NAVBAR_QUERY,
-		tags: ["navbar"],
+const EMPTY_LAYOUT: LayoutData = {
+	navbar: null,
+	footer: null,
+	companyData: null,
+	structuredData: null,
+};
+
+// One query for all four layout singletons, wrapped in React cache so the header,
+// footer and json-ld share a single round trip. Tagged with all four `_type` tags
+// because it reads all four documents.
+export const getLayoutData = cache(async (): Promise<LayoutData> => {
+	const { data } = await fetchSanity<LayoutData>({
+		query: LAYOUT_QUERY,
+		tags: SANITY_LAYOUT_TAGS,
 	});
 
-	return data ?? null;
+	return data ?? EMPTY_LAYOUT;
 });
-
-export const getFooterData = cache(async (): Promise<FooterData | null> => {
-	const { data } = await fetchSanity<FooterData>({
-		query: FOOTER_QUERY,
-		tags: ["footer"],
-	});
-
-	return data ?? null;
-});
-
-export const getCompanyData = cache(async (): Promise<CompanyData | null> => {
-	const { data } = await fetchSanity<CompanyData>({
-		query: COMPANY_DATA_QUERY,
-		tags: ["companyData"],
-	});
-
-	return data ?? null;
-});
-
-export const getStructuredData = cache(
-	async (): Promise<StructuredData | null> => {
-		const { data } = await fetchSanity<StructuredData>({
-			query: STRUCTURED_DATA_QUERY,
-			tags: ["structuredData"],
-		});
-
-		return data ?? null;
-	},
-);

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

@@ -17,13 +17,13 @@ import {
 	ListIcon,
 	LockKeyIcon,
 	PackageIcon,
-	PushPinIcon,
 	QuestionIcon,
 	RocketIcon,
 	ShapesIcon,
 	ShareNetworkIcon,
 	TagIcon,
 	TextAlignLeftIcon,
+	TextTIcon,
 	TreeStructureIcon,
 	UserCircleIcon,
 	VideoCameraIcon,
@@ -71,11 +71,11 @@ export const customJsonLdIcon = asDuotoneIcon(BracketsCurlyIcon);
 
 export const heroIcon = asDuotoneIcon(RocketIcon);
 export const descriptionIcon = asDuotoneIcon(TextAlignLeftIcon);
+export const richTextIcon = asDuotoneIcon(TextTIcon);
 export const contentIcon = asDuotoneIcon(ArticleNyTimesIcon);
 export const gatedContentIcon = asDuotoneIcon(LockKeyIcon);
 
 export const pageIcon = asDuotoneIcon(FileTextIcon);
-export const pinIcon = asDuotoneIcon(PushPinIcon);
 export const pagesFolderIcon = asDuotoneIcon(BrowsersIcon);
 export const pageFolderIcon = asDuotoneIcon(FolderOpenIcon);
 export const contentFolderIcon = asDuotoneIcon(FolderOpenIcon);

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/live/index.tsx

@@ -26,7 +26,9 @@ type SanityFetchOptions = {
 	params?: QueryParams;
 	tags?: string[];
 	stega?: boolean | undefined;
-	perspective?: "published" | "drafts" | "previewDrafts";
+	// `previewDrafts` was the old name for `drafts` and is gone from the API
+	// version this template pins.
+	perspective?: "published" | "drafts";
 };
 
 export async function fetchSanity<T = unknown>({