bsmnt 0.11.0 → 0.13.0

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

@@ -0,0 +1,37 @@
+import { defineField, defineType } from "sanity";
+import { pageBuilderCardIcon } from "@/lib/integrations/sanity/icons";
+import { pageBuilderBlockPreviewOptions } from "@/lib/integrations/sanity/page-builder-config";
+
+export const studioPreview = defineType({
+	name: "studioPreview",
+	title: "Component Preview",
+	type: "document",
+	icon: pageBuilderCardIcon,
+	fields: [
+		defineField({
+			name: "key",
+			title: "Component",
+			type: "string",
+			options: { list: pageBuilderBlockPreviewOptions },
+			validation: (Rule) => Rule.required(),
+		}),
+		defineField({
+			name: "preview",
+			title: "Preview image",
+			type: "image",
+			options: { hotspot: true },
+			validation: (Rule) => Rule.required(),
+		}),
+	],
+	preview: {
+		select: { key: "key", media: "preview" },
+		prepare({ key, media }) {
+			return {
+				title:
+					pageBuilderBlockPreviewOptions.find((option) => option.value === key)
+						?.title ?? "Component Preview",
+				media,
+			};
+		},
+	},
+});

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

@@ -15,6 +15,7 @@ import {
 	gatedContent,
 	hero,
 	richTextBlock,
+	studioPreview,
 } from "./components";
 import { author } from "./content/author";
 import { blogCategory } from "./content/blog-category";
@@ -22,6 +23,7 @@ import { companyData } from "./layout/company-data";
 import { footer } from "./layout/footer";
 import { navbar } from "./layout/navbar";
 import { redirect } from "./layout/redirect";
+import { spacingSettings, spacingStep } from "./layout/spacing-settings";
 import { structuredData } from "./layout/structured-data";
 import { externalLink, link, pageReference } from "./shared/link";
 import { metadata } from "./shared/metadata";
@@ -34,6 +36,7 @@ import {
 import { page } from "./shared/page";
 import { pageBuilder } from "./shared/page-builder";
 import { pageFolder } from "./shared/page-folder";
+import { presentation } from "./shared/presentation";
 import { richText } from "./shared/richText";
 import {
 	customJsonLd,
@@ -73,10 +76,14 @@ export {
 	pageBuilder,
 	pageFolder,
 	pageReference,
+	presentation,
 	redirect,
 	richText,
 	softwareApplicationJsonLd,
+	spacingSettings,
+	spacingStep,
 	structuredData,
+	studioPreview,
 	videoJsonLd,
 };
 
@@ -89,6 +96,7 @@ export const schema: { types: SchemaTypeDefinition[] } = {
 		link,
 		metadata,
 		pageBuilder,
+		presentation,
 		richText,
 
 		// Page-level JSON-LD blocks (selectable in metadata)
@@ -113,12 +121,15 @@ export const schema: { types: SchemaTypeDefinition[] } = {
 		description,
 		richTextBlock,
 		gatedContent,
+		studioPreview,
 
 		// Layout types (singletons for site-wide layout)
 		companyData,
 		navbar,
 		footer,
 		structuredData,
+		spacingStep,
+		spacingSettings,
 
 		// Layout collections (managed lists, not singletons)
 		redirect,

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/layout/spacing-settings.ts

@@ -0,0 +1,120 @@
+import { defineArrayMember, defineField, defineType } from "sanity";
+import { SpacingStepsInput } from "@/lib/integrations/sanity/components/spacing-steps-input";
+import { spacingSettingsIcon } from "@/lib/integrations/sanity/icons";
+import { defaultSpacingSteps } from "@/lib/integrations/sanity/schemas/shared/spacing";
+
+const pxField = (
+	name: "mobile" | "tablet" | "desktop",
+	title: string,
+	description: string,
+	isRequired = false,
+) =>
+	defineField({
+		name,
+		title,
+		type: "number",
+		description,
+		validation: (Rule) => {
+			const range = Rule.min(0).max(400).integer();
+			return isRequired ? range.required() : range;
+		},
+	});
+
+export const spacingStep = defineType({
+	name: "spacingStep",
+	title: "Spacing step",
+	type: "object",
+	fields: [
+		defineField({
+			name: "name",
+			title: "Name",
+			type: "string",
+			description: "Shown in the Presentation Mode dropdown on every block.",
+			validation: (Rule) => Rule.required().max(24),
+		}),
+		pxField("desktop", "Desktop", "From 1440px up. Required.", true),
+		pxField("tablet", "Tablet", "From 768px up. Empty reuses Desktop."),
+		pxField("mobile", "Mobile", "Below 768px. Empty reuses Desktop."),
+		defineField({
+			name: "isDefault",
+			title: "Use as default",
+			type: "boolean",
+			description:
+				"Blocks that never touch Presentation Mode use this step. Exactly one step can be the default.",
+			initialValue: false,
+		}),
+	],
+	preview: {
+		select: {
+			name: "name",
+			mobile: "mobile",
+			tablet: "tablet",
+			desktop: "desktop",
+			isDefault: "isDefault",
+		},
+		prepare({ name, mobile, tablet, desktop, isDefault }) {
+			const px = [mobile ?? desktop, tablet ?? desktop, desktop]
+				.map((value) => (typeof value === "number" ? `${value}px` : "—"))
+				.join(" / ");
+
+			return {
+				title: `${name || "Untitled"}${isDefault ? " · default" : ""}`,
+				subtitle: `${px} (mobile / tablet / desktop)`,
+			};
+		},
+	},
+});
+
+export const spacingSettings = defineType({
+	name: "spacingSettings",
+	title: "Spacing Scale",
+	type: "document",
+	icon: spacingSettingsIcon,
+	fields: [
+		defineField({
+			name: "steps",
+			title: "Spacing steps",
+			description:
+				"The vertical spacing every block can pick from. Add as many as you need and mark one as the default. Left empty, the built-in scale is used.",
+			type: "array",
+			components: { input: SpacingStepsInput },
+			of: [defineArrayMember({ type: "spacingStep" })],
+			initialValue: defaultSpacingSteps.map((step) => ({
+				_key: step.key,
+				_type: "spacingStep",
+				name: step.name,
+				mobile: step.mobile,
+				tablet: step.tablet,
+				desktop: step.desktop,
+				isDefault: step.isDefault,
+			})),
+			validation: (Rule) =>
+				Rule.custom((steps: unknown) => {
+					if (!Array.isArray(steps) || steps.length === 0) return true;
+
+					const defaults = steps.filter(
+						(step) => (step as { isDefault?: boolean })?.isDefault === true,
+					);
+
+					if (defaults.length === 0) return "Mark one step as the default";
+					if (defaults.length > 1) return "Only one step can be the default";
+
+					const names = steps.map((step) =>
+						(step as { name?: string })?.name?.trim().toLowerCase(),
+					);
+
+					return new Set(names).size === names.length
+						? true
+						: "Two steps share the same name";
+				}),
+		}),
+	],
+	preview: {
+		prepare() {
+			return {
+				title: "Spacing Scale",
+				subtitle: "Section padding steps per breakpoint",
+			};
+		},
+	},
+});

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/shared/anchor.ts

@@ -0,0 +1,75 @@
+const anchorSourceFields = [
+	"headline",
+	"heading",
+	"teaserHeading",
+	"title",
+	"label",
+] as const;
+
+const ANCHOR_MAX_LENGTH = 60;
+
+export const slugifyAnchor = (raw: string) =>
+	raw
+		.normalize("NFKD")
+		.replace(/[\u0300-\u036f]/g, "")
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-+|-+$/g, "")
+		.slice(0, ANCHOR_MAX_LENGTH)
+		.replace(/-+$/g, "");
+
+export const deriveAnchorId = (block: Record<string, unknown>) => {
+	for (const field of anchorSourceFields) {
+		const value = block[field];
+		if (typeof value === "string" && value.trim()) {
+			const slug = slugifyAnchor(value);
+			if (slug) return slug;
+		}
+	}
+
+	return "";
+};
+
+const explicitAnchorId = (block: Record<string, unknown>) =>
+	typeof block.anchorId === "string" ? slugifyAnchor(block.anchorId) : "";
+
+const NO_RESERVED_IDS: ReadonlySet<string> = new Set();
+
+export const reserveAnchorIds = (
+	blocks: readonly Record<string, unknown>[],
+): ReadonlySet<string> => {
+	const reserved = new Set<string>();
+
+	for (const block of blocks) {
+		const explicit = explicitAnchorId(block);
+		if (explicit) reserved.add(explicit);
+	}
+
+	return reserved;
+};
+
+export const resolveAnchorId = (
+	block: Record<string, unknown>,
+	taken: Set<string>,
+	reserved: ReadonlySet<string> = NO_RESERVED_IDS,
+) => {
+	const explicit = explicitAnchorId(block);
+	const base = explicit || deriveAnchorId(block);
+
+	if (!base) return "";
+
+	const isBlocked = (candidate: string) =>
+		taken.has(candidate) || (!explicit && reserved.has(candidate));
+
+	let candidate = base;
+	let suffix = 2;
+
+	while (isBlocked(candidate)) {
+		candidate = `${base}-${suffix}`;
+		suffix += 1;
+	}
+
+	taken.add(candidate);
+
+	return candidate;
+};

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/shared/block.ts

@@ -0,0 +1,46 @@
+import {
+	type DocumentDefinition,
+	defineType,
+	type FieldDefinition,
+	type FieldGroupDefinition,
+} from "sanity";
+import { presentationFields } from "./presentation";
+
+const presentationGroup: FieldGroupDefinition = {
+	name: "presentation",
+	title: "Presentation",
+};
+
+type BlockDefinition = Omit<DocumentDefinition, "type" | "fields" | "groups"> & {
+	fields: FieldDefinition[];
+	groups?: FieldGroupDefinition[];
+};
+
+const withPresentationGroup = (groups: FieldGroupDefinition[] | undefined) => {
+	if (!groups?.length) return undefined;
+	if (groups.some((group) => group.name === presentationGroup.name)) {
+		return groups;
+	}
+
+	return [...groups, presentationGroup];
+};
+
+/**
+ * Defines a page-builder block — `type: "document"` plus Anchor ID and
+ * Presentation Mode. Use instead of `defineType`.
+ */
+export const defineBlock = ({ fields, groups, ...rest }: BlockDefinition) => {
+	const blockGroups = withPresentationGroup(groups);
+
+	return defineType({
+		...rest,
+		type: "document",
+		...(blockGroups ? { groups: blockGroups } : {}),
+		fields: [
+			...fields,
+			...presentationFields(
+				blockGroups ? { group: presentationGroup.name } : undefined,
+			),
+		],
+	});
+};

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/shared/presentation.ts

@@ -0,0 +1,44 @@
+import { defineField, defineType } from "sanity";
+import { AnchorIdInput } from "@/lib/integrations/sanity/components/anchor-id-input";
+import { PresentationInput } from "@/lib/integrations/sanity/components/presentation-input";
+
+export const presentation = defineType({
+	name: "presentation",
+	title: "Presentation Mode",
+	type: "object",
+	components: { input: PresentationInput },
+	fields: [
+		defineField({
+			name: "paddingTop",
+			title: "Padding top",
+			type: "string",
+		}),
+		defineField({
+			name: "paddingBottom",
+			title: "Padding bottom",
+			type: "string",
+		}),
+	],
+});
+
+export const presentationFields = (options?: { group?: string }) => [
+	defineField({
+		name: "anchorId",
+		title: "Anchor ID",
+		type: "string",
+		...(options?.group ? { group: options.group } : {}),
+		components: { input: AnchorIdInput },
+		description:
+			"Links to this block as /page#your-anchor-id. Leave empty to generate it from the block title.",
+		validation: (Rule) =>
+			Rule.regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, { name: "anchor id" }).error(
+				"Use lowercase letters, numbers and dashes only (e.g. how-it-works)",
+			),
+	}),
+	defineField({
+		name: "presentation",
+		title: "Presentation Mode",
+		type: "presentation",
+		...(options?.group ? { group: options.group } : {}),
+	}),
+];

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/schemas/shared/spacing.ts

@@ -0,0 +1,164 @@
+export const spacingBreakpoints = ["mobile", "tablet", "desktop"] as const;
+
+export type SpacingBreakpoint = (typeof spacingBreakpoints)[number];
+
+export const spacingBreakpointMinWidth: Record<SpacingBreakpoint, number> = {
+	mobile: 0,
+	tablet: 768,
+	desktop: 1440,
+};
+
+export type SpacingStep = {
+	key: string;
+	name: string;
+	isDefault: boolean;
+} & Record<SpacingBreakpoint, number>;
+
+const fallbackSpacingStep: SpacingStep = {
+	key: "md",
+	name: "MD",
+	mobile: 24,
+	tablet: 28,
+	desktop: 32,
+	isDefault: true,
+};
+
+export const defaultSpacingSteps: SpacingStep[] = [
+	{
+		key: "xs",
+		name: "XS",
+		mobile: 12,
+		tablet: 14,
+		desktop: 16,
+		isDefault: false,
+	},
+	{
+		key: "sm",
+		name: "SM",
+		mobile: 16,
+		tablet: 20,
+		desktop: 24,
+		isDefault: false,
+	},
+	fallbackSpacingStep,
+	{
+		key: "lg",
+		name: "LG",
+		mobile: 32,
+		tablet: 40,
+		desktop: 48,
+		isDefault: false,
+	},
+	{
+		key: "xl",
+		name: "XL",
+		mobile: 48,
+		tablet: 64,
+		desktop: 80,
+		isDefault: false,
+	},
+];
+
+export type SpacingStepSource = {
+	_key?: string | null;
+	name?: string | null;
+	mobile?: number | null;
+	tablet?: number | null;
+	desktop?: number | null;
+	isDefault?: boolean | null;
+};
+
+export const spacingStepKey = (raw: string) =>
+	raw
+		.toLowerCase()
+		.replace(/[^a-z0-9-]/g, "")
+		.slice(0, 40);
+
+export const spacingVariable = (key: string) => `--section-space-${key}`;
+
+export const defaultSpacingVariable = spacingVariable("default");
+
+const FALLBACK_PADDING = "2.5rem";
+
+const readPx = (value: number | null | undefined) =>
+	typeof value === "number" && Number.isFinite(value) && value >= 0
+		? Math.round(value)
+		: null;
+
+export const resolveSpacingSteps = (
+	source?: readonly SpacingStepSource[] | null,
+): SpacingStep[] => {
+	const steps = (source ?? []).flatMap<SpacingStep>((entry) => {
+		const key = spacingStepKey(entry?._key ?? "");
+		const name = entry?.name?.trim();
+		const desktop = readPx(entry?.desktop);
+
+		if (!(key && name && desktop !== null)) return [];
+
+		return [
+			{
+				key,
+				name,
+				desktop,
+				tablet: readPx(entry?.tablet) ?? desktop,
+				mobile: readPx(entry?.mobile) ?? desktop,
+				isDefault: entry?.isDefault === true,
+			},
+		];
+	});
+
+	if (steps.length === 0) return defaultSpacingSteps;
+
+	if (steps.some((step) => step.isDefault)) {
+		let seen = false;
+		return steps.map((step) => {
+			const isDefault = step.isDefault && !seen;
+			if (isDefault) seen = true;
+			return { ...step, isDefault };
+		});
+	}
+
+	const middle = Math.floor((steps.length - 1) / 2);
+	return steps.map((step, index) => ({ ...step, isDefault: index === middle }));
+};
+
+export const getDefaultSpacingStep = (steps: SpacingStep[]): SpacingStep =>
+	steps.find((step) => step.isDefault) ?? steps[0] ?? fallbackSpacingStep;
+
+export const spacingPaddingValue = (key?: string | null) => {
+	const safe = key ? spacingStepKey(key) : "";
+	const fallback = `var(${defaultSpacingVariable}, ${FALLBACK_PADDING})`;
+
+	if (!safe || safe === "default") return fallback;
+
+	return `var(${spacingVariable(safe)}, ${fallback})`;
+};
+
+export const spacingScaleCss = (steps: SpacingStep[]) => {
+	const defaultStep = getDefaultSpacingStep(steps);
+
+	const rule = (breakpoint: SpacingBreakpoint) => {
+		const declarations = [
+			...steps.map(
+				(step) => `${spacingVariable(step.key)}:${step[breakpoint]}px`,
+			),
+			`${defaultSpacingVariable}:${defaultStep[breakpoint]}px`,
+		].join(";");
+
+		return `:root{${declarations}}`;
+	};
+
+	return [
+		rule("mobile"),
+		`@media (min-width:${spacingBreakpointMinWidth.tablet}px){${rule("tablet")}}`,
+		`@media (min-width:${spacingBreakpointMinWidth.desktop}px){${rule("desktop")}}`,
+	].join("");
+};
+
+export const spacingStepOptions = (steps: SpacingStep[]) =>
+	steps.map((step) => ({
+		value: step.key,
+		title: `${step.name} (${step.desktop}px · ${step.mobile}px mobile)${
+			step.isDefault ? " · default" : ""
+		}`,
+	}));

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

@@ -3,15 +3,18 @@ import {
 	footerIcon,
 	navbarIcon,
 	pageListIcon,
+	spacingSettingsIcon,
 	structuredDataIcon,
 } from "./icons";
 
+// `category` must be one of `componentCategories` in page-builder-config.ts.
 export const singletonComponents = [
 	{
 		schemaType: "blogCollection",
 		documentId: "blogCollection",
 		title: "Blog Collection",
 		icon: pageListIcon,
+		category: "list",
 	},
 ] as const;
 
@@ -40,6 +43,12 @@ export const singletonLayout = [
 		title: "Structured Data",
 		icon: structuredDataIcon,
 	},
+	{
+		schemaType: "spacingSettings",
+		documentId: "spacingSettings",
+		title: "Spacing Scale",
+		icon: spacingSettingsIcon,
+	},
 ] as const;
 
 export const singletonComponentTypes: Set<string> = new Set(

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

@@ -17,6 +17,7 @@ import {
 	gatedContentIcon,
 	heroIcon,
 	layoutFolderIcon,
+	pageBuilderCardIcon,
 	pageFolderIcon,
 	pageIcon,
 	pagesFolderIcon,
@@ -301,6 +302,10 @@ export const structure: StructureResolver = (S, context) =>
 							S.documentTypeListItem("blogContent")
 								.title("Blog Content")
 								.icon(contentIcon),
+							S.divider(),
+							S.documentTypeListItem("studioPreview")
+								.title("Component Previews")
+								.icon(pageBuilderCardIcon),
 						]),
 				),
 

package/src/modules/features/cms/sanity-pagebuilder-cache/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-cache/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-cache/files/lib/integrations/sanity/components/anchor-id-input.tsx

@@ -0,0 +1,17 @@
+import { type StringInputProps, useFormValue } from "sanity";
+import { deriveAnchorId } from "@/lib/integrations/sanity/schemas/shared/anchor";
+
+export function AnchorIdInput(props: StringInputProps) {
+	const document = useFormValue([]) as Record<string, unknown> | undefined;
+	const derived = deriveAnchorId(document ?? {});
+
+	return props.renderDefault({
+		...props,
+		elementProps: {
+			...props.elementProps,
+			placeholder: derived
+				? `${derived} — generated from the title`
+				: "generated from the title",
+		},
+	});
+}