bsmnt 0.11.0 → 0.13.0

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}
+				/>
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,146 @@
+import { Box, Card, Flex, Select, Stack, Text } from "@sanity/ui";
+import { useEffect, useState } from "react";
+import { type ObjectInputProps, set, setIfMissing, useClient } from "sanity";
+import { apiVersion } from "@/lib/integrations/sanity/env";
+import {
+	paddingBottomIcon,
+	paddingTopIcon,
+	type SanityStudioIcon,
+} from "@/lib/integrations/sanity/icons";
+import {
+	getDefaultSpacingStep,
+	resolveSpacingSteps,
+	type SpacingStep,
+	type SpacingStepSource,
+	spacingStepOptions,
+} from "@/lib/integrations/sanity/schemas/shared/spacing";
+
+const SPACING_STEPS_QUERY = `coalesce(
+	*[_id == "drafts.spacingSettings"][0],
+	*[_id == "spacingSettings"][0]
+).steps[]{ _key, name, mobile, tablet, desktop, isDefault }`;
+
+type PaddingField = "paddingTop" | "paddingBottom";
+
+type PresentationValue = Partial<Record<PaddingField, string>>;
+
+function useSpacingSteps() {
+	const client = useClient({ apiVersion });
+	const [steps, setSteps] = useState<SpacingStep[]>(() =>
+		resolveSpacingSteps(null),
+	);
+
+	useEffect(() => {
+		let active = true;
+		client
+			.fetch<SpacingStepSource[] | null>(SPACING_STEPS_QUERY)
+			.then((rows) => {
+				if (active) setSteps(resolveSpacingSteps(rows));
+			})
+			.catch(() => setSteps(resolveSpacingSteps(null)));
+		return () => {
+			active = false;
+		};
+	}, [client]);
+
+	return steps;
+}
+
+type SpacingRowProps = {
+	name: PaddingField;
+	label: string;
+	icon: SanityStudioIcon;
+	options: Array<{ value: string; title: string }>;
+	value: string;
+	onSelect: (name: PaddingField, next: string) => void;
+};
+
+function SpacingRow({
+	name,
+	label,
+	icon,
+	options,
+	value,
+	onSelect,
+}: SpacingRowProps) {
+	const Icon = icon;
+
+	return (
+		<Flex align="center" gap={2}>
+			<Card
+				padding={2}
+				radius={2}
+				tone="transparent"
+				border
+				title={label}
+				aria-hidden
+			>
+				<Text size={2}>
+					<Icon />
+				</Text>
+			</Card>
+			<Box flex={1}>
+				<Select
+					aria-label={label}
+					fontSize={1}
+					padding={3}
+					radius={2}
+					value={value}
+					onChange={(event) => onSelect(name, event.currentTarget.value)}
+				>
+					{options.map((option) => (
+						<option key={option.value} value={option.value}>
+							{option.title}
+						</option>
+					))}
+				</Select>
+			</Box>
+		</Flex>
+	);
+}
+
+export function PresentationInput(props: ObjectInputProps) {
+	const value = props.value as PresentationValue | undefined;
+	const steps = useSpacingSteps();
+	const options = spacingStepOptions(steps);
+	const fallback = getDefaultSpacingStep(steps).key;
+
+	const resolve = (key: string | undefined) =>
+		steps.some((step) => step.key === key) ? (key as string) : fallback;
+
+	const handleSelect = (name: PaddingField, next: string) => {
+		props.onChange([setIfMissing({}), set(next, [name])]);
+	};
+
+	return (
+		<Stack space={3}>
+			<Flex gap={3} wrap="wrap">
+				<Box flex={1} style={{ minWidth: 200 }}>
+					<SpacingRow
+						name="paddingTop"
+						label="Padding top"
+						icon={paddingTopIcon}
+						options={options}
+						value={resolve(value?.paddingTop)}
+						onSelect={handleSelect}
+					/>
+				</Box>
+				<Box flex={1} style={{ minWidth: 200 }}>
+					<SpacingRow
+						name="paddingBottom"
+						label="Padding bottom"
+						icon={paddingBottomIcon}
+						options={options}
+						value={resolve(value?.paddingBottom)}
+						onSelect={handleSelect}
+					/>
+				</Box>
+			</Flex>
+			<Text size={1} muted>
+				Spacing above and below this block, from the shared scale (edit the steps
+				in Layout → Spacing Scale). Untouched blocks follow whichever step is
+				marked as the default.
+			</Text>
+		</Stack>
+	);
+}

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

@@ -0,0 +1,84 @@
+import { Button, Card, Stack, Text } from "@sanity/ui";
+import { useEffect, useRef } from "react";
+import { type ArrayOfObjectsInputProps, set } from "sanity";
+import { defaultSpacingSteps } from "@/lib/integrations/sanity/schemas/shared/spacing";
+
+type StepValue = { _key?: string; isDefault?: boolean };
+
+const defaultKeysOf = (value: StepValue[] | undefined) =>
+	(value ?? [])
+		.filter((step) => step?.isDefault === true)
+		.flatMap((step) => (step._key ? [step._key] : []));
+
+export function SpacingStepsInput(props: ArrayOfObjectsInputProps) {
+	const value = props.value as StepValue[] | undefined;
+	const { onChange } = props;
+
+	const defaultKeys = defaultKeysOf(value);
+	const defaultKeysId = defaultKeys.join(",");
+	const lastSingleDefault = useRef<string | undefined>(defaultKeys[0]);
+
+	useEffect(() => {
+		const keys = defaultKeysId ? defaultKeysId.split(",") : [];
+
+		if (keys.length < 2) {
+			lastSingleDefault.current = keys[0];
+			return;
+		}
+
+		const keep = keys.find((key) => key !== lastSingleDefault.current) ?? keys[0];
+		lastSingleDefault.current = keep;
+
+		onChange(
+			keys
+				.filter((key) => key !== keep)
+				.map((key) => set(false, [{ _key: key }, "isDefault"])),
+		);
+	}, [defaultKeysId, onChange]);
+
+	const seed = () => {
+		onChange(
+			set(
+				defaultSpacingSteps.map((step) => ({
+					_key: step.key,
+					_type: "spacingStep",
+					name: step.name,
+					mobile: step.mobile,
+					tablet: step.tablet,
+					desktop: step.desktop,
+					isDefault: step.isDefault,
+				})),
+			),
+		);
+	};
+
+	return (
+		<Stack space={3}>
+			{props.renderDefault(props)}
+			{value?.length ? null : (
+				<Card padding={3} radius={2} border tone="primary">
+					<Stack space={3}>
+						<Text size={1}>
+							No steps yet, so blocks fall back to the built-in scale:{" "}
+							{defaultSpacingSteps
+								.map(
+									(step) =>
+										`${step.name} ${step.desktop}px${
+											step.isDefault ? " (default)" : ""
+										}`,
+								)
+								.join(" · ")}
+							.
+						</Text>
+						<Button
+							text="Add the built-in steps"
+							tone="primary"
+							mode="ghost"
+							onClick={seed}
+						/>
+					</Stack>
+				</Card>
+			)}
+		</Stack>
+	);
+}

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

@@ -12,16 +12,18 @@ export type NavbarData = NonNullable<LayoutData["navbar"]>
 export type FooterData = NonNullable<LayoutData["footer"]>
 export type CompanyData = NonNullable<LayoutData["companyData"]>
 export type StructuredData = NonNullable<LayoutData["structuredData"]>
+export type SpacingSettings = NonNullable<LayoutData["spacingSettings"]>
 
 const EMPTY_LAYOUT: LayoutData = {
   navbar: null,
   footer: null,
   companyData: null,
   structuredData: null,
+  spacingSettings: null,
 }
 
-// One entry for all four layout singletons: header, footer and json-ld call this
-// with the same options, so they share one fetch instead of four.
+// One entry for every layout singleton: header, footer, json-ld and the spacing
+// scale call this with the same options, so they share one fetch.
 //
 // Don't cap the empty branch — this renders in every route's shell, and a nested
 // lifetime propagates upwards as a min().

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

@@ -2,6 +2,9 @@ import type { Icon, IconProps } from "@phosphor-icons/react";
 import {
 	AppWindowIcon,
 	ArrowBendUpRightIcon,
+	ArrowLineDownIcon,
+	ArrowLineUpIcon,
+	ArrowsOutLineVerticalIcon,
 	ArticleNyTimesIcon,
 	BracketsCurlyIcon,
 	BriefcaseIcon,
@@ -75,6 +78,11 @@ export const richTextIcon = asDuotoneIcon(TextTIcon);
 export const contentIcon = asDuotoneIcon(ArticleNyTimesIcon);
 export const gatedContentIcon = asDuotoneIcon(LockKeyIcon);
 
+export const spacingSettingsIcon = asDuotoneIcon(ArrowsOutLineVerticalIcon);
+
+export const paddingTopIcon = asDuotoneIcon(ArrowLineUpIcon);
+export const paddingBottomIcon = asDuotoneIcon(ArrowLineDownIcon);
+
 export const pageIcon = asDuotoneIcon(FileTextIcon);
 export const pagesFolderIcon = asDuotoneIcon(BrowsersIcon);
 export const pageFolderIcon = asDuotoneIcon(FolderOpenIcon);