bsmnt 0.12.0 → 0.13.0

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,6 +3,7 @@ import {
 	footerIcon,
 	navbarIcon,
 	pageListIcon,
+	spacingSettingsIcon,
 	structuredDataIcon,
 } from "./icons";
 
@@ -42,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-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",
+		},
+	});
+}

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