bsmnt 0.13.0 → 0.14.0

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

@@ -12,6 +12,11 @@ import {
 } from "@sanity/ui";
 import { useMemo, useState } from "react";
 import type { ArrayInputFunctionsProps, ArraySchemaType } from "sanity";
+import {
+	getComponentPreviewPath,
+	getLibraryEntry,
+} from "@/components/page-builder/library";
+import { ComponentPreviewFrame } from "./component-preview-frame";
 
 type ArrayItem = { _key: string };
 type MemberSchemaType = ArraySchemaType["of"][number];
@@ -24,18 +29,22 @@ type InsertMenuSection = {
 	members: MemberSchemaType[];
 };
 
-const SCROLL_HEIGHT = "min(60vh, 34rem)";
-const TILE_ASPECT_RATIO = "3 / 2";
+const DIALOG_HEIGHT = "min(70vh, 42rem)";
+const CHOICE_LIST_WIDTH = 260;
 
 const memberTitle = (member: MemberSchemaType) => member.title ?? member.name;
 
-function BlockTile({
+function ChoiceRow({
+	active,
 	member,
-	previewUrl,
+	notes,
+	onAdd,
 	onSelect,
 }: {
+	active: boolean;
 	member: MemberSchemaType;
-	previewUrl: string | undefined;
+	notes: string | undefined;
+	onAdd: () => void;
 	onSelect: () => void;
 }) {
 	const Icon = member.icon;
@@ -43,63 +52,42 @@ function BlockTile({
 	return (
 		<Card
 			as="button"
-			border
 			onClick={onSelect}
-			overflow="hidden"
-			padding={0}
+			onDoubleClick={onAdd}
+			padding={2}
+			pressed={active}
 			radius={2}
 			style={{ cursor: "pointer", textAlign: "left", width: "100%" }}
+			tone={active ? "primary" : "default"}
 			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">
+			<Flex align="flex-start" gap={3}>
+				{Icon ? (
+					<Text size={2}>
+						<Icon />
+					</Text>
+				) : null}
+				<Stack flex={1} space={2}>
+					<Text size={1} weight="medium">
 						{memberTitle(member)}
 					</Text>
-				</Box>
-			</Stack>
+					{notes ? (
+						<Text muted size={0} style={{ lineHeight: 1.4 }}>
+							{notes}
+						</Text>
+					) : null}
+				</Stack>
+			</Flex>
 		</Card>
 	);
 }
 
 function InsertMenuDialog({
 	sections,
-	previewImageUrl,
 	onSelect,
 	onClose,
 }: {
 	sections: InsertMenuSection[];
-	previewImageUrl: ((schemaTypeName: string) => string | undefined) | undefined;
 	onSelect: (member: MemberSchemaType) => void;
 	onClose: () => void;
 }) {
@@ -118,60 +106,108 @@ function InsertMenuDialog({
 			.filter((section) => section.members.length > 0);
 	}, [search, sections]);
 
+	const visibleMembers = visibleSections.flatMap((section) => section.members);
+	const [selectedName, setSelectedName] = useState(
+		() => visibleMembers[0]?.name,
+	);
+
+	const selected =
+		visibleMembers.find((member) => member.name === selectedName) ??
+		visibleMembers[0];
+
+	const selectedEntry = selected ? getLibraryEntry(selected.name) : null;
+
 	return (
 		<Dialog
+			footer={
+				<Flex gap={2} justify="flex-end" padding={3}>
+					<Button mode="bleed" onClick={onClose} text="Cancel" />
+					<Button
+						disabled={!selected}
+						onClick={() => selected && onSelect(selected)}
+						text="Add component"
+						tone="primary"
+					/>
+				</Flex>
+			}
 			header="Components"
 			id="page-builder-insert"
 			onClose={onClose}
 			open
-			width={3}
+			width={4}
 		>
-			<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>
+			<Flex gap={3} padding={3} style={{ height: DIALOG_HEIGHT }}>
+				<Stack
+					space={3}
+					style={{ flex: `0 0 ${CHOICE_LIST_WIDTH}px`, minWidth: 0 }}
+				>
+					<TextInput
+						autoFocus
+						icon={SearchIcon}
+						onChange={(event) => setSearch(event.currentTarget.value)}
+						placeholder="Search components…"
+						value={search}
+					/>
+					<Box style={{ flex: 1, overflowY: "auto" }}>
+						{visibleSections.length === 0 ? (
+							<Text muted size={1}>
+								No components match “{search}”.
+							</Text>
+						) : (
+							<Stack space={4}>
+								{visibleSections.map((section) => (
+									<Stack key={section.name} space={2}>
+										<Text muted size={0} weight="semibold">
+											{section.title.toUpperCase()}
+										</Text>
+										<Stack space={1}>
+											{section.members.map((member) => (
+												<ChoiceRow
+													active={member.name === selected?.name}
+													key={member.name}
+													member={member}
+													notes={getLibraryEntry(member.name)?.notes}
+													onAdd={() => onSelect(member)}
+													onSelect={() => setSelectedName(member.name)}
+												/>
+											))}
+										</Stack>
+									</Stack>
+								))}
+							</Stack>
+						)}
+					</Box>
+				</Stack>
+
+				<Card
+					border
+					flex={1}
+					radius={2}
+					style={{ overflow: "hidden" }}
+					tone="transparent"
+				>
+					{selected && selectedEntry ? (
+						<ComponentPreviewFrame
+							key={selected.name}
+							notes={selectedEntry.notes}
+							path={getComponentPreviewPath(selected.name)}
+						/>
 					) : (
-						<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>
+						<Flex align="center" height="fill" justify="center" padding={4}>
+							<Text muted size={1}>
+								No preview for this component yet.
+							</Text>
+						</Flex>
 					)}
-				</Box>
-			</Stack>
+				</Card>
+			</Flex>
 		</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.
+ * Pass as `arrayFunctions`. Replaces the built-in popover, which is anchored to
+ * the array grid element and so clips on page scroll.
  */
 export function PageBuilderInsertMenu(
 	props: ArrayInputFunctionsProps<ArrayItem, ArraySchemaType>,
@@ -199,13 +235,6 @@ export function PageBuilderInsertMenu(
 			.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);
@@ -233,7 +262,6 @@ export function PageBuilderInsertMenu(
 				<InsertMenuDialog
 					onClose={() => setOpen(false)}
 					onSelect={insert}
-					previewImageUrl={previewImageUrl}
 					sections={sections}
 				/>
 			)}

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

@@ -12,6 +12,7 @@ import {
 	BuildingsIcon,
 	CalendarBlankIcon,
 	CardsIcon,
+	CubeIcon,
 	FileTextIcon,
 	FolderOpenIcon,
 	FootprintsIcon,
@@ -19,7 +20,6 @@ import {
 	ListBulletsIcon,
 	ListIcon,
 	LockKeyIcon,
-	PackageIcon,
 	QuestionIcon,
 	RocketIcon,
 	ShapesIcon,
@@ -45,7 +45,6 @@ const asDuotoneIcon = (IconComponent: Icon): SanityStudioIcon => {
 	return DuotoneIcon;
 };
 
-export const pageBuilderCardIcon = asDuotoneIcon(PackageIcon);
 export const pageBuilderCardListIcon = asDuotoneIcon(ListIcon);
 
 export const authorIcon = asDuotoneIcon(UserCircleIcon);
@@ -54,6 +53,7 @@ export const pageListIcon = asDuotoneIcon(ListBulletsIcon);
 
 export const blogCategoryIcon = asDuotoneIcon(TagIcon);
 
+export const componentIcon = asDuotoneIcon(CubeIcon);
 export const componentsFolderIcon = asDuotoneIcon(ShapesIcon);
 
 export const companyDataIcon = asDuotoneIcon(BuildingsIcon);

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/page-builder-config.ts

@@ -1,5 +1,4 @@
 import { contentIcon, pageIcon, type SanityStudioIcon } from "./icons";
-import { singletonComponents } from "./singletons";
 
 export type PageBuilderDocumentType =
 	| "hero"
@@ -7,7 +6,7 @@ export type PageBuilderDocumentType =
 	| "richTextBlock"
 	| "gatedContent"
 	| "blogContent"
-	| (typeof singletonComponents)[number]["schemaType"];
+	| "blogCollection";
 
 /**
  * A block declares two orthogonal axes. `pageTypes` is which page documents may
@@ -27,18 +26,13 @@ export const componentCategories = [
 
 export type ComponentCategory = (typeof componentCategories)[number]["name"];
 
-type PageBuilderReferenceMember = {
+type PageBuilderBlockMember = {
 	documentType: PageBuilderDocumentType;
-	name: string;
 	title: string;
-	documentId?: string;
 	pageTypes: readonly PageBuilderGroupName[];
 	category: ComponentCategory;
 };
 
-export const blockPreviewKey = (schemaTypeName: string) =>
-	`block.${schemaTypeName}`;
-
 export const pageBuilderPageTypes: Array<{
 	title: string;
 	value: PageBuilderGroupName;
@@ -56,78 +50,61 @@ export const getPageCategoryIcon = (
 	pageType: PageBuilderGroupName | undefined | null,
 ) => pageCategoryIcons[pageType ?? "generic"];
 
-const reusablePageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
+export const pageBuilderBlockMembers: PageBuilderBlockMember[] = [
 	{
 		documentType: "hero",
-		name: "heroReference",
 		title: "Heading",
 		pageTypes: ["generic"],
 		category: "hero",
 	},
 	{
 		documentType: "description",
-		name: "descriptionReference",
 		title: "Description",
 		pageTypes: ["generic"],
 		category: "text",
 	},
 	{
 		documentType: "richTextBlock",
-		name: "richTextBlockReference",
 		title: "Rich Text",
 		pageTypes: ["generic"],
 		category: "text",
 	},
 	{
 		documentType: "gatedContent",
-		name: "gatedContentReference",
 		title: "Gated Content",
 		pageTypes: ["generic"],
 		category: "misc",
 	},
+	{
+		documentType: "blogCollection",
+		title: "Blog Collection",
+		pageTypes: ["generic"],
+		category: "list",
+	},
 	{
 		documentType: "blogContent",
-		name: "blogContentReference",
-		title: "Blog Content",
+		title: "Blog Posts",
 		pageTypes: ["blogEntry"],
 		category: "content",
 	},
 ];
 
-const singletonPageBuilderReferenceMembers: PageBuilderReferenceMember[] =
-	singletonComponents.map((component) => ({
-		documentType: component.schemaType,
-		name: `${component.schemaType}Reference`,
-		title: component.title,
-		documentId: component.documentId,
-		pageTypes: ["generic"],
-		category: component.category,
-	}));
-
-export const pageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
-	...reusablePageBuilderReferenceMembers,
-	...singletonPageBuilderReferenceMembers,
-];
-
-export const getPageBuilderReferenceMember = (name: string) =>
-	pageBuilderReferenceMembers.find((member) => member.name === name);
-
-export const getPageBuilderReferenceMemberByDocumentType = (
+export const getPageBuilderBlockMember = (
 	documentType: PageBuilderDocumentType,
 ) =>
-	pageBuilderReferenceMembers.find(
+	pageBuilderBlockMembers.find(
 		(member) => member.documentType === documentType,
 	);
 
 const isMemberVisibleForPageType = (
-	member: PageBuilderReferenceMember,
+	member: PageBuilderBlockMember,
 	pageType: PageBuilderGroupName | undefined,
 ) => member.pageTypes.includes(pageType ?? "generic");
 
-export const getVisiblePageBuilderReferenceMembers = (
+export const getVisiblePageBuilderBlockMembers = (
 	pageType: PageBuilderGroupName | undefined,
 ) =>
-	pageBuilderReferenceMembers.filter((member) =>
+	pageBuilderBlockMembers.filter((member) =>
 		isMemberVisibleForPageType(member, pageType),
 	);
 
@@ -135,7 +112,9 @@ export const getVisiblePageBuilderMemberNames = (
 	pageType: PageBuilderGroupName | undefined,
 ) =>
 	new Set(
-		getVisiblePageBuilderReferenceMembers(pageType).map((member) => member.name),
+		getVisiblePageBuilderBlockMembers(pageType).map(
+			(member) => member.documentType,
+		),
 	);
 
 export const getVisiblePageBuilderInsertMenuGroups = (
@@ -155,7 +134,7 @@ export const getInvalidPageBuilderDocumentTypes = (
 	documentTypes: PageBuilderDocumentType[],
 ) =>
 	documentTypes.filter((documentType) => {
-		const member = getPageBuilderReferenceMemberByDocumentType(documentType);
+		const member = getPageBuilderBlockMember(documentType);
 
 		if (!member) return false;
 
@@ -165,18 +144,11 @@ export const getInvalidPageBuilderDocumentTypes = (
 export const pageBuilderInsertMenuGroups: Array<{
 	name: ComponentCategory;
 	title: string;
-	of: string[];
+	of: PageBuilderDocumentType[];
 }> = componentCategories.map(({ name, title }) => ({
 	name,
 	title,
-	of: pageBuilderReferenceMembers
+	of: pageBuilderBlockMembers
 		.filter((member) => member.category === name)
-		.map((member) => member.name),
+		.map((member) => member.documentType),
 }));
-
-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/presentation.ts

@@ -43,10 +43,6 @@ const pageResolvedSlugExpression = buildNestedSlugExpression(
 	"slug.current",
 );
 
-const CONTENT_TYPE_PREFIXES: Record<string, string> = {
-	blogContent: "blog",
-};
-
 const resolveSlugLocation = <T extends { title?: string }>(
 	documentStore: DocumentStore,
 	id: string,
@@ -73,10 +69,6 @@ export const presentation = presentationTool({
 				route: "/",
 				filter: `_type == "page" && _id == "${HOMEPAGE_PINNED_PAGE.id}"`,
 			},
-			...Object.entries(CONTENT_TYPE_PREFIXES).map(([type, prefix]) => ({
-				route: `/${prefix}/:slug`,
-				filter: `_type == "${type}" && slug.current == $slug`,
-			})),
 			{
 				route: "/:slug+",
 				filter: `_type == "page" && ${pageResolvedSlugExpression} == $slug`,
@@ -97,16 +89,7 @@ export const presentation = presentationTool({
 				);
 			}
 
-			const prefix = CONTENT_TYPE_PREFIXES[params.type];
-			if (!prefix) return null;
-
-			return resolveSlugLocation<{ title?: string; slug?: string }>(
-				documentStore,
-				params.id,
-				`title, "slug": slug.current`,
-				(doc) => (doc.slug ? `/${prefix}/${doc.slug}` : null),
-				"Untitled",
-			);
+			return null;
 		},
 	},
 	previewUrl: {