bsmnt 0.10.0 → 0.12.0

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/page-category-input.tsx

@@ -0,0 +1,50 @@
+import { Select } from "@sanity/ui";
+import { useEffect } from "react";
+import { type StringInputProps, set, setIfMissing } from "sanity";
+
+type PageCategoryOption = {
+	title: string;
+	value: string;
+};
+
+const isPageCategoryOption = (option: unknown): option is PageCategoryOption =>
+	typeof option === "object" &&
+	option !== null &&
+	"title" in option &&
+	"value" in option &&
+	typeof option.title === "string" &&
+	typeof option.value === "string";
+
+export function PageCategoryInput(props: StringInputProps) {
+	useEffect(() => {
+		if (props.value === undefined) {
+			props.onChange(setIfMissing("generic"));
+		}
+	}, [props.onChange, props.value]);
+
+	const options = Array.isArray(props.schemaType.options?.list)
+		? props.schemaType.options.list.filter(isPageCategoryOption)
+		: [];
+
+	if (options.length === 0) {
+		return props.renderDefault({ ...props, value: props.value ?? "generic" });
+	}
+
+	return (
+		<Select
+			{...props.elementProps}
+			disabled={props.readOnly}
+			onChange={(event) => props.onChange(set(event.currentTarget.value))}
+			value={props.value ?? "generic"}
+			{...(props.validationError
+				? { customValidity: props.validationError }
+				: {})}
+		>
+			{options.map((option) => (
+				<option key={option.value} value={option.value}>
+					{option.title}
+				</option>
+			))}
+		</Select>
+	);
+}

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

@@ -0,0 +1,66 @@
+import { Badge, Card, Flex, Stack, Text } from "@sanity/ui";
+import { useEffect, useState } from "react";
+import { type ArrayOfPrimitivesInputProps, useClient } from "sanity";
+import { apiVersion } from "../env";
+
+type CompanyProfile = { name?: string | null; url?: string | null };
+
+// Draft-first so editors see unpublished toggle changes.
+export const INCLUDED_COMPANY_PROFILES_QUERY = `coalesce(
+	*[_id == "drafts.companyData"][0],
+	*[_id == "companyData"][0]
+).socialLinks[includeInStructuredData == true]{ name, url }`;
+
+// Shows which Company Data social links are merged into sameAs automatically.
+export function SameAsInput(props: ArrayOfPrimitivesInputProps) {
+	const { renderDefault } = props;
+	const client = useClient({ apiVersion });
+	const [included, setIncluded] = useState<CompanyProfile[]>([]);
+
+	useEffect(() => {
+		let active = true;
+		client
+			.fetch<CompanyProfile[] | null>(INCLUDED_COMPANY_PROFILES_QUERY)
+			.then((rows) => {
+				if (active) setIncluded(rows ?? []);
+			})
+			.catch(() => {
+				// Best-effort preview — never block editing.
+			});
+		return () => {
+			active = false;
+		};
+	}, [client]);
+
+	return (
+		<Stack space={3}>
+			<Card padding={3} radius={2} border tone="transparent">
+				<Stack space={3}>
+					{included.length > 0 ? (
+						<>
+							<Text size={1} muted>
+								Included from Company Data (toggle off there to remove):
+							</Text>
+							{included.map((profile) => (
+								<Flex key={profile.url} gap={2} align="center">
+									<Badge fontSize={0} mode="outline">
+										{profile.name ?? "Profile"}
+									</Badge>
+									<Text size={1} muted textOverflow="ellipsis">
+										{profile.url}
+									</Text>
+								</Flex>
+							))}
+						</>
+					) : (
+						<Text size={1} muted>
+							No Company Data social links are included yet — enable "Include in
+							Structured Data" on a social link to add it here.
+						</Text>
+					)}
+				</Stack>
+			</Card>
+			{renderDefault(props)}
+		</Stack>
+	);
+}

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

@@ -0,0 +1,24 @@
+import { Stack } from "@sanity/ui";
+import { type FieldProps, useFormValue } from "sanity";
+import { SlugRedirectNotice } from "@/lib/integrations/sanity/components/slug-notices";
+import { getPinnedPageById } from "@/lib/integrations/sanity/pinned-pages";
+
+const DEFAULT_DESCRIPTION = "URL path without leading slash.";
+const PINNED_DESCRIPTION =
+	"URL path without leading slash. Disabled on 📌 pinned pages.";
+
+// Swaps the slug description on pinned pages (plain-string field, hence 📌).
+export function SlugField(props: FieldProps) {
+	const documentId = useFormValue(["_id"]) as string | undefined;
+	const pinned = getPinnedPageById(documentId);
+
+	return (
+		<Stack space={3}>
+			{props.renderDefault({
+				...props,
+				description: pinned ? PINNED_DESCRIPTION : DEFAULT_DESCRIPTION,
+			})}
+			<SlugRedirectNotice pinnedPath={pinned?.path} />
+		</Stack>
+	);
+}

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

@@ -0,0 +1,14 @@
+import type { SlugInputProps } from "sanity";
+
+// Adds a not-allowed cursor to the slug field when it's read-only (pinned pages).
+export function SlugInput(props: SlugInputProps) {
+	if (!props.readOnly) {
+		return props.renderDefault(props);
+	}
+
+	return (
+		<div style={{ cursor: "not-allowed" }}>
+			<div style={{ pointerEvents: "none" }}>{props.renderDefault(props)}</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,125 @@
+import { Box, Button, Card, Stack, Text } from "@sanity/ui";
+import { useEffect, useState } from "react";
+import { useClient, useFormValue } from "sanity";
+import { useRouter } from "sanity/router";
+import { apiVersion } from "@/lib/integrations/sanity/env";
+import { isEmptyPageSlug } from "@/lib/integrations/sanity/page-category";
+import { FOLDER_PATH_QUERY } from "@/lib/integrations/sanity/queries";
+
+const REDIRECT_QUERY = `*[_type == "redirect" && source.current == $source][0]._id`;
+
+// The slug field writes on every keystroke.
+const LOOKUP_DEBOUNCE_MS = 400;
+
+interface SlugRedirectNoticeProps {
+	/** Public path of a pinned page, whose URL is fixed rather than slug-derived. */
+	pinnedPath?: string | undefined;
+}
+
+/**
+ * Warns when a published redirect claims this page's URL — the catch-all
+ * route only runs `checkRedirect` after a page lookup misses, so the page
+ * wins and the redirect silently never fires.
+ *
+ * Reads the `page` form shape; don't reuse for other slug types.
+ */
+export function SlugRedirectNotice({ pinnedPath }: SlugRedirectNoticeProps) {
+	const client = useClient({ apiVersion });
+	const router = useRouter();
+	const slug = useFormValue(["slug", "current"]) as string | undefined;
+	const folderId = useFormValue(["pageFolder", "_ref"]) as string | undefined;
+	const [folderPath, setFolderPath] = useState("");
+	const [redirectId, setRedirectId] = useState<string | null>(null);
+
+	// Separate effect so the folder chain isn't re-resolved on every keystroke.
+	useEffect(() => {
+		if (!folderId) {
+			setFolderPath("");
+			return;
+		}
+
+		let active = true;
+		const published = client.withConfig({ perspective: "published" });
+
+		published
+			// Leaf joins in JS below, so this tracks the live slug rather than the
+			// last saved draft.
+			.fetch<{ path: string | null } | null>(FOLDER_PATH_QUERY, { folderId })
+			.then((folder) => {
+				if (active) setFolderPath(folder?.path ?? "");
+			})
+			.catch(() => {
+				if (active) setFolderPath("");
+			});
+
+		return () => {
+			active = false;
+		};
+	}, [client, folderId]);
+
+	useEffect(() => {
+		const leaf = isEmptyPageSlug(slug) ? "" : slug;
+		const source = pinnedPath
+			? pinnedPath.replace(/^\/+/, "")
+			: [folderPath, leaf].filter(Boolean).join("/");
+
+		if (!source) {
+			setRedirectId(null);
+			return;
+		}
+
+		let active = true;
+		// Drafts never reach visitors, so an unpublished redirect isn't a conflict.
+		const published = client.withConfig({ perspective: "published" });
+
+		const timer = setTimeout(async () => {
+			try {
+				const id = await published.fetch<string | null>(REDIRECT_QUERY, {
+					source,
+				});
+				if (active) setRedirectId(id);
+			} catch {
+				if (active) setRedirectId(null);
+			}
+		}, LOOKUP_DEBOUNCE_MS);
+
+		return () => {
+			active = false;
+			clearTimeout(timer);
+		};
+	}, [client, folderPath, pinnedPath, slug]);
+
+	if (!redirectId) return null;
+
+	return (
+		<Card border padding={3} radius={2} tone="caution">
+			<Stack space={3}>
+				<Stack space={2}>
+					<Text size={1} weight="semibold">
+						A redirect already claims this URL
+					</Text>
+					<Text muted size={1}>
+						Visitors reach this page instead — a redirect only runs when no page
+						matches its path. Remove the redirect, or move this page to another
+						slug.
+					</Text>
+				</Stack>
+				<Box>
+					<Button
+						fontSize={1}
+						mode="ghost"
+						onClick={() =>
+							router.navigateIntent("edit", {
+								id: redirectId,
+								type: "redirect",
+							})
+						}
+						padding={3}
+						text="Go to redirect"
+						tone="caution"
+					/>
+				</Box>
+			</Stack>
+		</Card>
+	);
+}

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/confirm-publish-action.ts

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import type {
+	DocumentActionComponent,
+	DocumentActionDialogProps,
+	DocumentActionProps,
+} from "sanity";
+
+export function createConfirmPublishAction(
+	originalPublishAction: DocumentActionComponent,
+): DocumentActionComponent {
+	const ConfirmPublishAction = (props: DocumentActionProps) => {
+		const original = originalPublishAction(props);
+		const [dialogOpen, setDialogOpen] = useState(false);
+
+		if (!original) return null;
+
+		const { dialog: _originalDialog, ...originalWithoutDialog } = original;
+		const dialog: DocumentActionDialogProps | false = dialogOpen
+			? {
+					type: "confirm",
+					tone: "critical",
+					message:
+						"This will make these changes live on the production site immediately. Continue?",
+					onCancel: () => setDialogOpen(false),
+					onConfirm: () => {
+						setDialogOpen(false);
+						original.onHandle?.();
+					},
+				}
+			: false;
+
+		return {
+			...originalWithoutDialog,
+			onHandle: () => setDialogOpen(true),
+			dialog,
+		};
+	};
+
+	return ConfirmPublishAction;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Sanity Environment Configuration
+ *
+ * All values have safe defaults to allow the app to build and run
+ * without Sanity configured. Use isSanityConfigured() to check
+ * if Sanity is properly set up before making API calls.
+ */
+
+/** Floor, not a preference: Content Releases need 2025-02-19 or later. */
+export const apiVersion =
+	process.env.NEXT_PUBLIC_SANITY_API_VERSION || "2025-02-19";
+
+/** Sanity dataset name - defaults to 'production' */
+export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || "production";
+
+/** Sanity project ID - empty string if not configured */
+export const projectId =
+	process.env.NEXT_PUBLIC_SANITY_PROJECT_ID ||
+	process.env.SANITY_STUDIO_PROJECT_ID ||
+	"";
+
+/** Sanity Studio URL for visual editing */
+export const studioUrl =
+	process.env.NODE_ENV === "development"
+		? "http://localhost:3000/studio"
+		: `${process.env.NEXT_PUBLIC_BASE_URL || ""}/studio`;
+
+export const sanityToken = process.env.SANITY_API_READ_TOKEN || "";
+
+/** Preview URL for draft mode */
+export const previewURL =
+	process.env.NODE_ENV === "development"
+		? "http://localhost:3000"
+		: process.env.NEXT_PUBLIC_BASE_URL || "";

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

@@ -0,0 +1,39 @@
+import {
+  type DynamicFetchOptions,
+  sanityFetch,
+  toSanityFetchOptions,
+} from "@/lib/integrations/sanity/live"
+import { LAYOUT_QUERY } from "@/lib/integrations/sanity/queries"
+import type { LAYOUT_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types"
+import { SANITY_LAYOUT_TAGS } from "@/lib/integrations/sanity/tags"
+
+export type LayoutData = LAYOUT_QUERY_RESULT
+export type NavbarData = NonNullable<LayoutData["navbar"]>
+export type FooterData = NonNullable<LayoutData["footer"]>
+export type CompanyData = NonNullable<LayoutData["companyData"]>
+export type StructuredData = NonNullable<LayoutData["structuredData"]>
+
+const EMPTY_LAYOUT: LayoutData = {
+  navbar: null,
+  footer: null,
+  companyData: null,
+  structuredData: 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.
+//
+// Don't cap the empty branch — this renders in every route's shell, and a nested
+// lifetime propagates upwards as a min().
+export async function getLayoutData(
+  fetchOptions: DynamicFetchOptions
+): Promise<LayoutData> {
+  "use cache"
+  const { data } = await sanityFetch({
+    query: LAYOUT_QUERY,
+    ...toSanityFetchOptions(fetchOptions),
+    tags: [...SANITY_LAYOUT_TAGS],
+  })
+
+  return (data as LayoutData | null) ?? EMPTY_LAYOUT
+}