bsmnt 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bsmnt",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"packageManager": "bun@1.3.14",
 	"description": "CLI to scaffold basement projects and add integrations",
 	"type": "module",

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

@@ -37,7 +37,13 @@ export function 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"
+						/>
+					),
 				},
 				marks: {
 					link: ({ children, value }) => {

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