bsmnt 0.11.0 → 0.13.0

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

@@ -8,6 +8,7 @@ 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"]>;
 
 // Singleton document types that, when published, should bust the layout cache.
 export const SANITY_LAYOUT_TAGS = [
@@ -15,6 +16,7 @@ export const SANITY_LAYOUT_TAGS = [
 	"footer",
 	"companyData",
 	"structuredData",
+	"spacingSettings",
 ];
 
 const EMPTY_LAYOUT: LayoutData = {
@@ -22,11 +24,12 @@ const EMPTY_LAYOUT: LayoutData = {
 	footer: null,
 	companyData: null,
 	structuredData: null,
+	spacingSettings: 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.
+// One query for every layout singleton, wrapped in React cache so the header,
+// footer, json-ld and spacing scale share a single round trip. Tagged with each
+// `_type` because it reads all of those documents.
 export const getLayoutData = cache(async (): Promise<LayoutData> => {
 	const { data } = await fetchSanity<LayoutData>({
 		query: LAYOUT_QUERY,

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

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

@@ -9,15 +9,35 @@ export type PageBuilderDocumentType =
 	| "blogContent"
 	| (typeof singletonComponents)[number]["schemaType"];
 
+/**
+ * A block declares two orthogonal axes. `pageTypes` is which page documents may
+ * host it and drives validation; `category` is what the block structurally is
+ * and drives the insert menu. Never collapse them back into one field — that is
+ * what made the menu a single flat list.
+ */
+export type PageBuilderGroupName = "generic" | "blogEntry";
+
+export const componentCategories = [
+	{ name: "hero", title: "Hero" },
+	{ name: "text", title: "Text" },
+	{ name: "list", title: "List" },
+	{ name: "content", title: "Content" },
+	{ name: "misc", title: "Miscellaneous" },
+] as const satisfies ReadonlyArray<{ name: string; title: string }>;
+
+export type ComponentCategory = (typeof componentCategories)[number]["name"];
+
 type PageBuilderReferenceMember = {
 	documentType: PageBuilderDocumentType;
 	name: string;
 	title: string;
 	documentId?: string;
-	groups: PageBuilderGroupName[];
+	pageTypes: readonly PageBuilderGroupName[];
+	category: ComponentCategory;
 };
 
-export type PageBuilderGroupName = "generic" | "blogEntry";
+export const blockPreviewKey = (schemaTypeName: string) =>
+	`block.${schemaTypeName}`;
 
 export const pageBuilderPageTypes: Array<{
 	title: string;
@@ -41,31 +61,36 @@ const reusablePageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
 		documentType: "hero",
 		name: "heroReference",
 		title: "Heading",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "hero",
 	},
 	{
 		documentType: "description",
 		name: "descriptionReference",
 		title: "Description",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "text",
 	},
 	{
 		documentType: "richTextBlock",
 		name: "richTextBlockReference",
 		title: "Rich Text",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "text",
 	},
 	{
 		documentType: "gatedContent",
 		name: "gatedContentReference",
 		title: "Gated Content",
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: "misc",
 	},
 	{
 		documentType: "blogContent",
 		name: "blogContentReference",
 		title: "Blog Content",
-		groups: ["blogEntry"],
+		pageTypes: ["blogEntry"],
+		category: "content",
 	},
 ];
 
@@ -75,7 +100,8 @@ const singletonPageBuilderReferenceMembers: PageBuilderReferenceMember[] =
 		name: `${component.schemaType}Reference`,
 		title: component.title,
 		documentId: component.documentId,
-		groups: ["generic"],
+		pageTypes: ["generic"],
+		category: component.category,
 	}));
 
 export const pageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
@@ -93,25 +119,37 @@ export const getPageBuilderReferenceMemberByDocumentType = (
 		(member) => member.documentType === documentType,
 	);
 
-const isPageBuilderGroupVisible = (
+const isMemberVisibleForPageType = (
+	member: PageBuilderReferenceMember,
 	pageType: PageBuilderGroupName | undefined,
-	group: PageBuilderGroupName,
-) => (pageType ?? "generic") === group;
+) => member.pageTypes.includes(pageType ?? "generic");
 
 export const getVisiblePageBuilderReferenceMembers = (
 	pageType: PageBuilderGroupName | undefined,
 ) =>
 	pageBuilderReferenceMembers.filter((member) =>
-		member.groups.some((group) => isPageBuilderGroupVisible(pageType, group)),
+		isMemberVisibleForPageType(member, pageType),
 	);
 
-export const getVisiblePageBuilderInsertMenuGroups = (
+export const getVisiblePageBuilderMemberNames = (
 	pageType: PageBuilderGroupName | undefined,
 ) =>
-	pageBuilderInsertMenuGroups.filter(
-		(group) => group.name === (pageType ?? "generic"),
+	new Set(
+		getVisiblePageBuilderReferenceMembers(pageType).map((member) => member.name),
 	);
 
+export const getVisiblePageBuilderInsertMenuGroups = (
+	pageType: PageBuilderGroupName | undefined,
+) => {
+	const visible = getVisiblePageBuilderMemberNames(pageType);
+	return pageBuilderInsertMenuGroups
+		.map((group) => ({
+			...group,
+			of: group.of.filter((name) => visible.has(name)),
+		}))
+		.filter((group) => group.of.length > 0);
+};
+
 export const getInvalidPageBuilderDocumentTypes = (
 	pageType: PageBuilderGroupName | undefined,
 	documentTypes: PageBuilderDocumentType[],
@@ -121,24 +159,24 @@ export const getInvalidPageBuilderDocumentTypes = (
 
 		if (!member) return false;
 
-		return !member.groups.some((group) =>
-			isPageBuilderGroupVisible(pageType, group),
-		);
+		return !isMemberVisibleForPageType(member, pageType);
 	});
 
-export const pageBuilderInsertMenuGroups = [
-	{
-		name: "generic",
-		title: "Generic",
-		of: pageBuilderReferenceMembers
-			.filter((member) => member.groups.includes("generic"))
-			.map((member) => member.name),
-	},
-	{
-		name: "blogEntry",
-		title: "Blog Entry",
-		of: pageBuilderReferenceMembers
-			.filter((member) => member.groups.includes("blogEntry"))
-			.map((member) => member.name),
-	},
-];
+export const pageBuilderInsertMenuGroups: Array<{
+	name: ComponentCategory;
+	title: string;
+	of: string[];
+}> = componentCategories.map(({ name, title }) => ({
+	name,
+	title,
+	of: pageBuilderReferenceMembers
+		.filter((member) => member.category === name)
+		.map((member) => member.name),
+}));
+
+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/queries.ts

@@ -96,6 +96,8 @@ const pageBuilderProjection = `
       _type == "gatedContent" => {
         _id,
         _type,
+        anchorId,
+        presentation,
         internalTitle,
         teaserHeading,
         teaserBody[]{
@@ -533,6 +535,16 @@ export const LAYOUT_QUERY = defineQuery(`
     },
     "structuredData": *[_type == "structuredData"][0]{
       ${structuredDataProjection}
+    },
+    "spacingSettings": *[_type == "spacingSettings"][0]{
+      steps[]{
+        _key,
+        name,
+        mobile,
+        tablet,
+        desktop,
+        isDefault
+      }
     }
   }
 `);

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/index.ts

@@ -4,3 +4,4 @@ export { gatedContent } from "./reusable/gated-content";
 export { hero } from "./reusable/hero";
 export { richTextBlock } from "./reusable/rich-text-block";
 export { blogCollection } from "./singleton/content-collection";
+export { studioPreview } from "./studio-preview";

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/reusable/blog-content.ts

@@ -1,10 +1,10 @@
-import { defineField, defineType } from "sanity";
+import { defineField } from "sanity";
 import { contentIcon } from "@/lib/integrations/sanity/icons";
+import { defineBlock } from "@/lib/integrations/sanity/schemas/shared/block";
 
-export const blogContent = defineType({
+export const blogContent = defineBlock({
 	name: "blogContent",
 	title: "Blog Content",
-	type: "document",
 	icon: contentIcon,
 	fields: [
 		defineField({

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/reusable/description.ts

@@ -1,10 +1,10 @@
-import { defineField, defineType } from "sanity";
+import { defineField } from "sanity";
 import { descriptionIcon } from "@/lib/integrations/sanity/icons";
+import { defineBlock } from "@/lib/integrations/sanity/schemas/shared/block";
 
-export const description = defineType({
+export const description = defineBlock({
 	name: "description",
 	title: "Description",
-	type: "document",
 	icon: descriptionIcon,
 	fields: [
 		defineField({

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/reusable/gated-content.ts

@@ -1,5 +1,6 @@
-import { defineField, defineType } from "sanity";
+import { defineField } from "sanity";
 import { gatedContentIcon } from "@/lib/integrations/sanity/icons";
+import { defineBlock } from "@/lib/integrations/sanity/schemas/shared/block";
 
 type GatedContentParent = { kind?: string };
 
@@ -19,10 +20,9 @@ const requiredForKind =
 		return isEmpty ? message : true;
 	};
 
-export const gatedContent = defineType({
+export const gatedContent = defineBlock({
 	name: "gatedContent",
 	title: "Gated Content",
-	type: "document",
 	icon: gatedContentIcon,
 	description:
 		"Content hidden behind a lead-capture gate. Everyone sees the teaser; the payload is withheld from the page until the visitor submits the form.",

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/reusable/hero.ts

@@ -1,10 +1,10 @@
-import { defineField, defineType } from "sanity";
+import { defineField } from "sanity";
 import { heroIcon } from "@/lib/integrations/sanity/icons";
+import { defineBlock } from "@/lib/integrations/sanity/schemas/shared/block";
 
-export const hero = defineType({
+export const hero = defineBlock({
 	name: "hero",
 	title: "Heading",
-	type: "document",
 	icon: heroIcon,
 	fields: [
 		defineField({

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/reusable/rich-text-block.ts

@@ -1,10 +1,10 @@
-import { defineField, defineType } from "sanity";
+import { defineField } from "sanity";
 import { richTextIcon } from "@/lib/integrations/sanity/icons";
+import { defineBlock } from "@/lib/integrations/sanity/schemas/shared/block";
 
-export const richTextBlock = defineType({
+export const richTextBlock = defineBlock({
 	name: "richTextBlock",
 	title: "Rich Text",
-	type: "document",
 	icon: richTextIcon,
 	fields: [
 		defineField({

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/components/singleton/content-collection.ts

@@ -1,6 +1,7 @@
-import { defineField, defineType } from "sanity";
+import { defineField } from "sanity";
 import type { SanityStudioIcon } from "@/lib/integrations/sanity/icons";
 import { pageListIcon } from "@/lib/integrations/sanity/icons";
+import { defineBlock } from "@/lib/integrations/sanity/schemas/shared/block";
 
 function createContentCollection(config: {
 	name: string;
@@ -8,10 +9,9 @@ function createContentCollection(config: {
 	icon: SanityStudioIcon;
 	label: string;
 }) {
-	return defineType({
+	return defineBlock({
 		name: config.name,
 		title: config.title,
-		type: "document",
 		icon: config.icon,
 		description: `This component contains all the ${config.label}`,
 		fields: [