bsmnt 0.10.0 → 0.12.0

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

@@ -4,19 +4,40 @@ import { singletonComponents } from "./singletons";
 export type PageBuilderDocumentType =
 	| "hero"
 	| "description"
+	| "richTextBlock"
 	| "gatedContent"
 	| "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;
@@ -40,25 +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",
+		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",
 	},
 ];
 
@@ -68,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[] = [
@@ -86,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[],
@@ -114,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/page-tree-pane.tsx

@@ -1,4 +1,7 @@
-import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr";
+import {
+	MagnifyingGlassIcon,
+	PushPinIcon,
+} from "@phosphor-icons/react/dist/ssr";
 import {
 	Badge,
 	Box,
@@ -9,13 +12,13 @@ import {
 	Text,
 	TextInput,
 } from "@sanity/ui";
-import { useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { asyncScheduler, from, merge, of } from "rxjs";
 import { switchMap, throttleTime } from "rxjs/operators";
 import { type SanityClient, useClient } from "sanity";
 import { usePaneRouter } from "sanity/structure";
 import { apiVersion } from "./env";
-import { pageFolderIcon, pinIcon } from "./icons";
+import { pageFolderIcon } from "./icons";
 import {
 	getPageCategoryIcon,
 	type PageBuilderGroupName,
@@ -317,13 +320,30 @@ const ItemIcon = ({ item }: { item: PageTreeItem }) => {
 	return <Icon />;
 };
 
-const ItemRow = ({ item, ChildLink, activeState }: ItemRowProps) => {
-	const fallback = item._type === "page" ? "Untitled Page" : "Untitled Folder";
+// One presentation for every row in the tree, so pinned entries and documents
+// can't drift apart on spacing or which lines they show.
+const TreeRow = ({
+	childId,
+	icon,
+	title,
+	path,
+	badge,
+	ChildLink,
+	activeState,
+}: {
+	childId: string;
+	icon: ReactNode;
+	title: string;
+	path: string | null;
+	badge?: ReactNode;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeState: ActiveState;
+}) => {
 	const isLeaf = activeState === "leaf";
 	const isAncestor = activeState === "ancestor";
 
 	return (
-		<ChildLink childId={getItemId(item)}>
+		<ChildLink childId={childId}>
 			<Card
 				as="div"
 				padding={3}
@@ -344,23 +364,22 @@ const ItemRow = ({ item, ChildLink, activeState }: ItemRowProps) => {
 				}}
 			>
 				<Flex align="center" gap={3}>
+					{/* Sized here rather than by the caller: Phosphor icons are 1em, so
+					    one left to inherit the ambient font size renders wider than one
+					    wrapped in <Text> and pushes its whole row out of line. */}
 					<Box style={{ flexShrink: 0 }}>
-						<ItemIcon item={item} />
+						<Text size={1}>{icon}</Text>
 					</Box>
 					<Stack space={2} flex={1}>
 						<Flex align="center" gap={2}>
 							<Text size={1} weight="medium">
-								{item.title ?? fallback}
+								{title}
 							</Text>
-							{isDraftItem(item) && (
-								<Badge fontSize={0} mode="outline" tone="caution">
-									Draft
-								</Badge>
-							)}
+							{badge}
 						</Flex>
-						{item.slug && (
+						{path && (
 							<Text size={0} muted weight="regular">
-								/{item.slug}
+								{path}
 							</Text>
 						)}
 					</Stack>
@@ -370,49 +389,43 @@ const ItemRow = ({ item, ChildLink, activeState }: ItemRowProps) => {
 	);
 };
 
-interface PinnedRowProps {
-	entry: PinnedPageEntry;
-	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
-	activeState: ActiveState;
-}
-
-const PinnedRow = ({ entry, ChildLink, activeState }: PinnedRowProps) => {
-	const isLeaf = activeState === "leaf";
-	const isAncestor = activeState === "ancestor";
-	const Icon = pinIcon;
+const ItemRow = ({ item, ChildLink, activeState }: ItemRowProps) => {
+	const fallback = item._type === "page" ? "Untitled Page" : "Untitled Folder";
 
 	return (
-		<ChildLink childId={entry.id}>
-			<Card
-				as="div"
-				padding={3}
-				radius={0}
-				pressed={isLeaf}
-				selected={isAncestor}
-				tone={isLeaf ? "primary" : "default"}
-				style={{
-					cursor: "pointer",
-					display: "block",
-					...(isLeaf && {
-						backgroundColor: "var(--card-badge-primary-bg-color)",
-						color: "var(--card-badge-primary-fg-color)",
-					}),
-					...(isAncestor && {
-						backgroundColor: "var(--card-muted-bg-color)",
-					}),
-				}}
-			>
-				<Flex align="center" gap={3}>
-					<Box style={{ flexShrink: 0 }}>
-						<Icon />
-					</Box>
-					<Stack space={2} flex={1}>
-						<Text size={1} weight="medium">
-							{entry.title}
-						</Text>
-					</Stack>
-				</Flex>
-			</Card>
-		</ChildLink>
+		<TreeRow
+			childId={getItemId(item)}
+			icon={<ItemIcon item={item} />}
+			title={item.title ?? fallback}
+			path={item.slug ? `/${item.slug}` : null}
+			badge={
+				isDraftItem(item) ? (
+					<Badge fontSize={0} mode="outline" tone="caution">
+						Draft
+					</Badge>
+				) : undefined
+			}
+			ChildLink={ChildLink}
+			activeState={activeState}
+		/>
 	);
 };
+
+const PinnedRow = ({
+	entry,
+	ChildLink,
+	activeState,
+}: {
+	entry: PinnedPageEntry;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeState: ActiveState;
+}) => (
+	<TreeRow
+		childId={entry.id}
+		icon={<PushPinIcon />}
+		title={entry.title}
+		path={entry.path}
+		ChildLink={ChildLink}
+		activeState={activeState}
+	/>
+);

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

@@ -18,6 +18,32 @@ const pageResolvedSlugExpression = `
   )
 `;
 
+// Hand-expanded, not generated: typegen walks the AST for `defineQuery` args and
+// silently drops the result type for anything built by `.map().join()`.
+
+// Root-to-leaf so joining yields the prefix in order. Paired id/slug, not two
+// arrays: `array::compact` can drop from one and not the other.
+const folderChainProjection = `pageFolder->parentFolder->parentFolder->parentFolder->parentFolder->parentFolder->{ "id": _id, "slug": slug.current },
+      pageFolder->parentFolder->parentFolder->parentFolder->parentFolder->{ "id": _id, "slug": slug.current },
+      pageFolder->parentFolder->parentFolder->parentFolder->{ "id": _id, "slug": slug.current },
+      pageFolder->parentFolder->parentFolder->{ "id": _id, "slug": slug.current },
+      pageFolder->parentFolder->{ "id": _id, "slug": slug.current },
+      pageFolder->{ "id": _id, "slug": slug.current }`;
+
+const folderDescendantConditions = `pageFolder._ref == $folderId ||
+      pageFolder->parentFolder._ref == $folderId ||
+      pageFolder->parentFolder->parentFolder._ref == $folderId ||
+      pageFolder->parentFolder->parentFolder->parentFolder._ref == $folderId ||
+      pageFolder->parentFolder->parentFolder->parentFolder->parentFolder._ref == $folderId ||
+      pageFolder->parentFolder->parentFolder->parentFolder->parentFolder->parentFolder._ref == $folderId`;
+
+// Rooted at a `pageFolder`, so the walk starts at `parentFolder`.
+const folderParentChain = `parentFolder->parentFolder->parentFolder->parentFolder->parentFolder->slug.current,
+      parentFolder->parentFolder->parentFolder->parentFolder->slug.current,
+      parentFolder->parentFolder->parentFolder->slug.current,
+      parentFolder->parentFolder->slug.current,
+      parentFolder->slug.current`;
+
 const linkItemProjection = `
   ...,
   _type == "pageReference" => {
@@ -84,6 +110,12 @@ const pageBuilderProjection = `
       },
       _type != "gatedContent" => {
         ...,
+        _type == "richTextBlock" => {
+          ...,
+          content[]{
+            ${richTextLinkProjection}
+          }
+        },
         _type == "blogContent" => {
           ...,
           categories[]->{
@@ -143,6 +175,7 @@ const pageProjection = `
   title,
   slug,
   "resolvedSlug": ${pageResolvedSlugExpression},
+  "collectionCategory": collectionCategory->{title, "slug": slug.current},
   ${pageBuilderProjection},
   metadata,
   _updatedAt
@@ -196,10 +229,16 @@ export const P_REV_SLUGS_QUERY = defineQuery(`
   }
 `);
 
-export const P_REF_PB_COMP_QUERY = defineQuery(`
+// Pages depending on `$documentIds`, one or two hops out: one covers
+// `collectionCategory->`, two covers anything reached through a page-builder
+// block. All inline the referenced title or slug, so a change there goes stale.
+export const P_REF_DOC_PAGES_QUERY = defineQuery(`
   *[
     _type == "page" &&
-    count(pageBuilder[_ref == $documentId]) > 0
+    (
+      references($documentIds) ||
+      count(pageBuilder[_ref in *[references($documentIds)]._id]) > 0
+    )
   ] | order(title asc) {
     _id,
     title,
@@ -207,6 +246,43 @@ export const P_REF_PB_COMP_QUERY = defineQuery(`
   }
 `);
 
+// A folder's resolved path, plus its own segment and parent path separately —
+// what the webhook needs to rebuild where it used to be.
+export const FOLDER_PATH_QUERY = defineQuery(`
+  *[_type == "pageFolder" && _id == $folderId][0]{
+    "slug": slug.current,
+    "parentPath": array::join(array::compact([
+      ${folderParentChain}
+    ]), "/"),
+    "path": array::join(array::compact([
+      ${folderParentChain},
+      slug.current
+    ]), "/")
+  }
+`);
+
+// Every page under `$folderId`, at any depth. The folder chain comes back as
+// id/slug pairs rather than two parallel arrays -- `array::compact` on two
+// independent lists can drop entries from one and not the other, and the webhook
+// indexes into the chain by id. The page's own slug stays *out* of the array:
+// `array::compact` removes null but not "" or "/", so folding a folder-index
+// page's empty slug in here would yield "parent/" where the resolved path is
+// "parent". `composeResolvedSlug` joins the leaf instead.
+export const P_REV_FOLDER_DESCENDANTS_QUERY = defineQuery(`
+  *[
+    _type == "page" &&
+    (
+      ${folderDescendantConditions}
+    )
+  ]{
+    _id,
+    "folderChain": array::compact([
+      ${folderChainProjection}
+    ]),
+    "ownSlug": slug.current
+  }
+`);
+
 export const PAGE_SITEMAP_QUERY = defineQuery(`
   *[
     _type == "page" &&
@@ -330,19 +406,31 @@ export const ALL_BLOG_CATEGORIES_QUERY = defineQuery(`
   }
 `);
 
-// Company Data
-export const COMPANY_DATA_QUERY = defineQuery(`
-  *[_type == "companyData"][0]{
-    socialLinks[]{
-      _key,
-      name,
-      icon,
-      url,
-      label
-    }
+// Every page hosting a content collection, so the filter chips can link to the
+// page pinned to each category instead of appending a `?category=` param.
+// Hidden keys are filtered like `pageBuilderProjection` does — a page whose
+// collection block is hidden renders no collection, so it can't be a chip target.
+export const COLLECTION_PAGES_QUERY = defineQuery(`
+  *[
+    _type == "page" &&
+    count(pageBuilder[!(_key in coalesce(^.hiddenPageBuilderKeys, [])) && _ref in *[_type == "blogCollection"]._id]) > 0
+  ] {
+    "path": ${pageResolvedSlugExpression},
+    "category": collectionCategory->slug.current
   }
 `);
 
+// Company Data -- folded into LAYOUT_QUERY below.
+const companyDataProjection = `
+  socialLinks[]{
+    _key,
+    name,
+    icon,
+    url,
+    label
+  }
+`;
+
 // Navbar
 // Shared link projection for navbar -- flattens array-of-one to single object
 const navLinkProjection = `
@@ -427,23 +515,25 @@ const structuredDataProjection = `
   ))
 `;
 
-export const NAVBAR_QUERY = defineQuery(`
-  *[_type == "navbar"][0]{
-    ${navbarProjection}
-  }
-`);
-
-// Footer
-export const FOOTER_QUERY = defineQuery(`
-  *[_type == "footer"][0]{
-    ${footerProjection}
-  }
-`);
-
-// Structured Data (site-wide JSON-LD identity)
-export const STRUCTURED_DATA_QUERY = defineQuery(`
-  *[_type == "structuredData"][0]{
-    ${structuredDataProjection}
+// All four layout singletons in one round trip: every route's shell reads three of
+// them, and as separate parameterless queries that was four Data Cache entries and
+// four fetches. The single-document NAVBAR_QUERY / FOOTER_QUERY /
+// COMPANY_DATA_QUERY / STRUCTURED_DATA_QUERY exports are gone on purpose — nothing
+// consumed them, and they were a second untagged path to the same documents.
+export const LAYOUT_QUERY = defineQuery(`
+  {
+    "navbar": *[_type == "navbar"][0]{
+      ${navbarProjection}
+    },
+    "footer": *[_type == "footer"][0]{
+      ${footerProjection}
+    },
+    "companyData": *[_type == "companyData"][0]{
+      ${companyDataProjection}
+    },
+    "structuredData": *[_type == "structuredData"][0]{
+      ${structuredDataProjection}
+    }
   }
 `);
 

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

@@ -0,0 +1,70 @@
+// Sibling-relative, not `@/`: the repo's test suite imports this file directly.
+import { isEmptyPageSlug } from "./page-category";
+
+// Path arithmetic for the publish webhook. Free of `next/*` so it can be unit
+// tested, because the payload carries the raw document, never the resolved URL.
+
+export interface FolderChainEntry {
+	id: string | null;
+	slug: string | null;
+}
+
+export interface DescendantPaths {
+	current: string | null;
+	previous: string | null;
+}
+
+interface DescendantPathsInput {
+	/** Root-to-leaf folder chain of the descendant, as projected by GROQ. */
+	folderChain: readonly FolderChainEntry[];
+	ownSlug: string | null | undefined;
+	/** The mutated folder. */
+	folderId: string;
+	previousFolderSlug: string;
+	/** Resolved path of the folder's *previous* parent; null at the root. */
+	previousParentPath: string | null;
+}
+
+// The JS half of `pageResolvedSlugExpression`. An empty own slug means the page
+// *is* its folder's index, so the folder path is the whole URL.
+export const composeResolvedSlug = (
+	folderPath: string | null,
+	ownSlug: string | null | undefined,
+): string | null => {
+	if (isEmptyPageSlug(ownSlug)) return folderPath || null;
+
+	return folderPath ? `${folderPath}/${ownSlug}` : (ownSlug ?? null);
+};
+
+// Where a descendant of a moved folder lives now and where it lived before.
+// Null when the chain can't be trusted: a fabricated old path would purge an
+// unrelated URL and leave the real one stale.
+export const composeDescendantPaths = ({
+	folderChain,
+	ownSlug,
+	folderId,
+	previousFolderSlug,
+	previousParentPath,
+}: DescendantPathsInput): DescendantPaths | null => {
+	const index = folderChain.findIndex((folder) => folder.id === folderId);
+	// Selected *by* this id, so an absent one means chain and filter disagree.
+	if (index === -1) return null;
+
+	const segments: string[] = [];
+	for (const folder of folderChain) {
+		// Required on `pageFolder`; a gap would silently shift every segment.
+		if (!folder.slug) return null;
+		segments.push(folder.slug);
+	}
+
+	const previousFolderPath = [
+		...(previousParentPath ? [previousParentPath] : []),
+		previousFolderSlug,
+		...segments.slice(index + 1),
+	].join("/");
+
+	return {
+		current: composeResolvedSlug(segments.join("/"), ownSlug),
+		previous: composeResolvedSlug(previousFolderPath, ownSlug),
+	};
+};

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

@@ -2,4 +2,6 @@ export { blogContent } from "./reusable/blog-content";
 export { description } from "./reusable/description";
 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/rich-text-block.ts

@@ -0,0 +1,39 @@
+import { defineField, defineType } from "sanity";
+import { richTextIcon } from "@/lib/integrations/sanity/icons";
+
+export const richTextBlock = defineType({
+	name: "richTextBlock",
+	title: "Rich Text",
+	type: "document",
+	icon: richTextIcon,
+	fields: [
+		defineField({
+			name: "content",
+			title: "Content",
+			type: "richText",
+			validation: (Rule) => Rule.required(),
+		}),
+	],
+	preview: {
+		select: {
+			content: "content",
+		},
+		prepare({ content }) {
+			// Portable Text has no plain-text field, so derive a subtitle from the
+			// first block's spans.
+			const firstBlock = Array.isArray(content) ? content[0] : null;
+			const spans = Array.isArray(firstBlock?.children)
+				? firstBlock.children
+				: [];
+			const text = spans
+				.map((span: { text?: string }) => span?.text ?? "")
+				.join("")
+				.trim();
+
+			return {
+				title: "Rich Text",
+				subtitle: text || "Empty",
+			};
+		},
+	},
+});