bsmnt 0.13.1 → 0.15.0

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/block-actions-item.tsx

@@ -6,7 +6,7 @@ import { apiVersion } from "@/lib/integrations/sanity/env";
 
 const HIDDEN_KEYS_FIELD = "hiddenPageBuilderKeys";
 
-type ReferenceItem = { _key: string; _ref: string; _type: string };
+type BlockItem = { _key: string; _type?: string };
 
 /**
  * Eye-icon toggle for a page builder placement's per-page visibility. Adds the
@@ -14,7 +14,7 @@ type ReferenceItem = { _key: string; _ref: string; _type: string };
  * filters those keys out at query time. Standalone control because Sanity's
  * built-in item menu isn't extensible via public props.
  */
-export function BlockActionsItem(props: ObjectItemProps<ReferenceItem>) {
+export function BlockActionsItem(props: ObjectItemProps<BlockItem>) {
 	const { value, renderDefault } = props;
 	const client = useClient({ apiVersion });
 	const toast = useToast();

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/component-preview-frame.tsx

@@ -0,0 +1,124 @@
+import { Box, Button, Card, Code, Flex, Text } from "@sanity/ui";
+import { useEffect, useRef, useState } from "react";
+
+const VIEWPORTS = [
+	{ id: "desktop", label: "Desktop", width: 1440 },
+	{ id: "tablet", label: "Tablet", width: 834 },
+	{ id: "mobile", label: "Mobile", width: 390 },
+] as const;
+
+type ViewportId = (typeof VIEWPORTS)[number]["id"];
+
+interface ComponentPreviewFrameProps {
+	notes?: string | undefined;
+	path: string;
+}
+
+export const ComponentPreviewFrame = ({
+	notes,
+	path,
+}: ComponentPreviewFrameProps) => {
+	const stage = useRef<HTMLDivElement>(null);
+	const [box, setBox] = useState({ height: 0, width: 0 });
+	const [viewport, setViewport] = useState<ViewportId>("desktop");
+
+	useEffect(() => {
+		const element = stage.current;
+		if (!element) return;
+
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const { height, width } = entry.contentRect;
+			setBox({ height, width });
+		});
+
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+
+	const width = VIEWPORTS.find((item) => item.id === viewport)?.width ?? 1440;
+
+	const scale = box.width > 0 ? Math.min(1, box.width / width) : 1;
+	const height = box.height > 0 ? box.height / scale : 0;
+
+	return (
+		<Flex direction="column" height="fill">
+			<Card borderBottom padding={2} tone="transparent">
+				<Flex align="center" gap={2}>
+					<Flex gap={1}>
+						{VIEWPORTS.map((item) => (
+							<Button
+								fontSize={0}
+								key={item.id}
+								mode={item.id === viewport ? "default" : "bleed"}
+								onClick={() => setViewport(item.id)}
+								padding={2}
+								text={item.label}
+								tone={item.id === viewport ? "primary" : "default"}
+							/>
+						))}
+					</Flex>
+					<Box flex={1} />
+					<Code size={0}>
+						{width} × {Math.round(height)} · {Math.round(scale * 100)}%
+					</Code>
+				</Flex>
+			</Card>
+
+			{notes ? (
+				<Card borderBottom padding={3} tone="transparent">
+					<Text muted size={0}>
+						{notes}
+					</Text>
+				</Card>
+			) : null}
+
+			<Box
+				flex={1}
+				style={{
+					background: "var(--card-muted-bg-color)",
+					overflow: "hidden",
+					position: "relative",
+				}}
+			>
+				<div
+					ref={stage}
+					style={{
+						display: "flex",
+						height: "100%",
+						justifyContent: "center",
+						width: "100%",
+					}}
+				>
+					{height > 0 ? (
+						<div
+							style={{
+								background: "var(--card-bg-color)",
+								border: "1px solid var(--card-border-color)",
+								borderRadius: 4,
+								boxShadow: "0 1px 12px rgb(0 0 0 / 0.12)",
+								flex: "none",
+								height: box.height,
+								overflow: "hidden",
+								width: width * scale,
+							}}
+						>
+							<iframe
+								src={path}
+								style={{
+									border: 0,
+									display: "block",
+									height,
+									transform: `scale(${scale})`,
+									transformOrigin: "top left",
+									width,
+								}}
+								title="Component preview"
+							/>
+						</div>
+					) : null}
+				</div>
+			</Box>
+		</Flex>
+	);
+};

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/component-preview-pane.tsx

@@ -0,0 +1,25 @@
+import { Card, Text } from "@sanity/ui";
+import { ComponentPreviewFrame } from "./component-preview-frame";
+
+interface ComponentPreviewPaneProps {
+	options?: Record<string, unknown>;
+}
+
+export const ComponentPreviewPane = ({
+	options,
+}: ComponentPreviewPaneProps) => {
+	const path = options?.path as string | undefined;
+	const notes = options?.notes as string | undefined;
+
+	if (!path) {
+		return (
+			<Card padding={4}>
+				<Text muted size={1}>
+					This component has no preview route.
+				</Text>
+			</Card>
+		);
+	}
+
+	return <ComponentPreviewFrame notes={notes} path={path} />;
+};

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

@@ -1,38 +1,18 @@
 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,
 	getVisiblePageBuilderMemberNames,
+	type PageBuilderDocumentType,
 	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 views = useInsertMenuViews();
 	const visibleMemberNames = getVisiblePageBuilderMemberNames(pageType);
 
 	return props.renderDefault({
@@ -40,17 +20,14 @@ export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 		arrayFunctions: PageBuilderInsertMenu,
 		schemaType: {
 			...props.schemaType,
-			of: props.schemaType.of.filter(
-				(member) =>
-					typeof member.name === "string" &&
-					visibleMemberNames.has(member.name),
+			of: props.schemaType.of.filter((member) =>
+				visibleMemberNames.has(member.name as PageBuilderDocumentType),
 			),
 			options: {
 				...props.schemaType.options,
 				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

@@ -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}
 				/>
 			)}