bsmnt 0.12.0 → 0.13.0

package/src/modules/features/jobs/ashby/files/_sanity-adapter/job-board-block.ts

@@ -0,0 +1,53 @@
+import { CaseIcon } from "@sanity/icons"
+import { defineField, defineType } from "sanity"
+
+export const ashbyJobBoardBlock = defineType({
+  name: "ashbyJobBoardBlock",
+  title: "Ashby Job Board",
+  type: "document",
+  icon: CaseIcon,
+  description:
+    "Lists open roles pulled live from Ashby. There is no content to manage here beyond an optional heading.",
+  fields: [
+    defineField({
+      name: "internalTitle",
+      title: "Internal Title",
+      type: "string",
+      description: "Only used to identify this block in the Studio.",
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: "heading",
+      title: "Heading",
+      type: "string",
+      description: "Optional heading shown above the list of positions.",
+    }),
+    defineField({
+      name: "boardName",
+      title: "Job Board Name",
+      type: "string",
+      description:
+        "Optional. Overrides the ASHBY_JOB_BOARD_NAME environment variable — the board's slug in its jobs.ashbyhq.com URL.",
+    }),
+  ],
+  preview: {
+    select: {
+      title: "internalTitle",
+      heading: "heading",
+      boardName: "boardName",
+    },
+    prepare({ title, heading, boardName }) {
+      return {
+        title: title || "Ashby Job Board",
+        subtitle: heading || boardName || "Open positions",
+      }
+    },
+  },
+})
+
+export const ashbyJobBoardBlockReference = defineType({
+  name: "ashbyJobBoardBlockReference",
+  title: "Ashby Job Board",
+  type: "reference",
+  to: [{ type: "ashbyJobBoardBlock" }],
+})

package/src/modules/features/jobs/ashby/files/lib/integrations/ashby/README.md

@@ -0,0 +1,134 @@
+# Ashby job board integration
+
+Agnostic, reusable [Ashby](https://www.ashbyhq.com/) job-board reader. The core
+(`index.ts`, `normalize.ts`, `types.ts`) has **no CMS dependency** and adds **no
+runtime packages** — it reads Ashby's public Job Posting API and normalizes it
+into a stable `CareerJob[]`.
+
+Fetching is **server-only**: `getCareerJobs` uses `react`'s `cache` and Next.js
+`fetch` revalidation, so call it from a Server Component, Route Handler, or
+`generateMetadata` — never from a `"use client"` component.
+
+## 1. Environment
+
+Ashby's job-board endpoint is public — no token or private app required. The
+only configuration is the board name, which is the slug in your board's URL
+(`https://jobs.ashbyhq.com/<board-name>`):
+
+```bash
+ASHBY_JOB_BOARD_NAME=your-board
+```
+
+The value is not a secret, so it can stay plaintext in the committed env file.
+It is only read server-side (in `env.ts`); it is never exposed to the client.
+You can also skip the variable entirely and pass the board name explicitly.
+
+`env.ts` resolves it once at module scope as `ashbyBoardName`, and
+`isAshbyConfigured()` in `lib/integrations/check-integration.ts` derives from
+that same value — so a "configured" check can never disagree with what
+`getCareerJobs` actually resolves.
+
+## 2. Read the jobs
+
+```tsx
+import { getCareerJobs } from "@/lib/integrations/ashby"
+
+export default async function Careers() {
+  const jobs = await getCareerJobs()
+
+  return (
+    <ul>
+      {jobs.map((job) => (
+        <li key={job.id}>
+          <a href={job.href}>{job.title}</a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+Pass a board name to override `ASHBY_JOB_BOARD_NAME` (useful for multi-brand
+sites, or to render a second board on one page):
+
+```tsx
+const jobs = await getCareerJobs("your-other-board")
+```
+
+`getCareerJobs` throws when the board name is missing or when Ashby responds
+with a non-2xx status. Wrap the call so a job-board outage degrades gracefully
+instead of failing the whole page:
+
+```tsx
+let jobs: CareerJob[] = []
+try {
+  jobs = await getCareerJobs()
+} catch (error) {
+  console.error("Failed to load Ashby jobs", error)
+}
+```
+
+## 3. What you get
+
+`normalize.ts` tolerates both the current (`jobs`) and legacy (`jobPostings`)
+payload shapes, drops unlisted postings, and resolves each field from the
+several key spellings Ashby has used over time. Every optional field is
+`string | null` — never `undefined` — so rendering stays branch-free:
+
+| Field | Notes |
+| --- | --- |
+| `id` / `title` / `href` | Required; a posting missing any of them is dropped |
+| `applyUrl` | Direct application link when Ashby exposes one |
+| `location` / `department` / `team` | Resolved from the flat or nested variants |
+| `employmentType` | e.g. `Full-time` |
+| `workType` | `workplaceType`, or derived from `isRemote` |
+| `isRemote` | `true` only when Ashby says so explicitly |
+| `publishedAt` | ISO date string |
+| `descriptionHtml` | Raw HTML — sanitize before injecting |
+| `compensation` | `{ summary, display }`; respect `display` before rendering |
+
+## 4. Caching
+
+The core caches the board for 5 minutes via `next: { revalidate: 300 }`, and
+deduplicates calls within a single request via React `cache`.
+
+In a **Cache Components** project (`cacheComponents: true`), the fetch-level
+revalidate is ignored — wrap the call in your own cached function instead:
+
+```tsx
+import { cacheLife } from "next/cache"
+import { getCareerJobs } from "@/lib/integrations/ashby"
+
+async function getCachedJobs() {
+  "use cache"
+  cacheLife("minutes")
+  return getCareerJobs()
+}
+```
+
+## 5. Optional: Sanity Studio block
+
+When this integration is added to a project that already has Sanity, a
+`sanity/` folder ships alongside the core:
+
+- `sanity/job-board-block.ts` — an `ashbyJobBoardBlock` document type with an
+  optional `heading` and an optional per-block `boardName` override
+
+Register it by adding `ashbyJobBoardBlock` to your schema's document list, then
+render it from your own component.
+
+## 6. Use as a page-builder block
+
+In a basement **Sanity page-builder** project, `ashbyJobBoardBlock` can be a
+selectable block. Adding this integration installs the
+**`ashby-pagebuilder-block`** agent skill — ask your coding agent to "wire the
+Ashby job board into the page builder" and it makes the edits and verifies the
+typecheck. To do it by hand:
+
+1. `schemas/index.ts` — import `ashbyJobBoardBlock`, add it to `schema.types`
+2. `page-builder-config.ts` — add `"ashbyJobBoardBlock"` to
+   `PageBuilderDocumentType` and an `ashbyJobBoardBlockReference` member
+3. `structure.ts` — add `S.documentTypeListItem("ashbyJobBoardBlock")`
+4. `components/page-builder/renderer.tsx` — add a `case "ashbyJobBoardBlock"`
+   that awaits `getCareerJobs(block.boardName)` and renders the list
+5. `bun run sanity:typegen && bun typecheck`

package/src/modules/features/jobs/ashby/files/lib/integrations/ashby/env.ts

@@ -0,0 +1,3 @@
+const readBoardName = (value: string | undefined) => value?.trim() ?? ""
+
+export const ashbyBoardName = readBoardName(process.env.ASHBY_JOB_BOARD_NAME)

package/src/modules/features/jobs/ashby/files/lib/integrations/ashby/index.ts

@@ -0,0 +1,40 @@
+import { cache } from "react"
+import { ashbyBoardName } from "./env"
+import { normalizeBoard } from "./normalize"
+import type { CareerJob } from "./types"
+
+const ASHBY_JOB_BOARD_API_URL = "https://api.ashbyhq.com/posting-api/job-board"
+const BOARD_REVALIDATE_SECONDS = 300
+
+export function resolveAshbyBoardName(boardName?: string | null): string {
+  const resolved = boardName?.trim() || ashbyBoardName
+
+  if (!resolved) {
+    throw new Error(
+      "Missing Ashby job board name. Pass it to getCareerJobs() or set ASHBY_JOB_BOARD_NAME."
+    )
+  }
+
+  return resolved
+}
+
+export const getCareerJobs = cache(
+  async (boardName?: string | null): Promise<CareerJob[]> => {
+    const board = resolveAshbyBoardName(boardName)
+
+    const response = await fetch(
+      `${ASHBY_JOB_BOARD_API_URL}/${encodeURIComponent(board)}?includeCompensation=true`,
+      { next: { revalidate: BOARD_REVALIDATE_SECONDS } }
+    )
+
+    if (!response.ok) {
+      throw new Error(`Ashby request failed with ${response.status}`)
+    }
+
+    return normalizeBoard(await response.json(), board)
+  }
+)
+
+export { ashbyBoardName } from "./env"
+export { normalizeBoard } from "./normalize"
+export type { CareerCompensation, CareerJob } from "./types"

package/src/modules/features/jobs/ashby/files/lib/integrations/ashby/normalize.ts

@@ -0,0 +1,124 @@
+import type { CareerCompensation, CareerJob } from "./types"
+
+const toRecord = (value: unknown): Record<string, unknown> | null =>
+  value && typeof value === "object" ? (value as Record<string, unknown>) : null
+
+const string = (value: unknown): string | null =>
+  typeof value === "string" && value.trim() ? value.trim() : null
+
+const getFieldValue = (
+  job: Record<string, unknown>,
+  key: string
+): string | null => {
+  const value = job[key]
+  if (typeof value === "string") return string(value)
+
+  const nested = toRecord(value)
+  if (!nested) return null
+
+  return string(nested.name) ?? string(nested.title) ?? string(nested.value)
+}
+
+const idFromUrl = (url: string | null): string | null => {
+  if (!url) return null
+
+  try {
+    const parsed = new URL(url)
+    const fromQuery = string(parsed.searchParams.get("ashby_jid"))
+    if (fromQuery) return fromQuery
+
+    const segments = parsed.pathname.split("/").filter(Boolean)
+    const last = segments.at(-1)
+    if (last === "application") return string(segments.at(-2))
+    return string(last)
+  } catch {
+    return null
+  }
+}
+
+const getCompensation = (
+  job: Record<string, unknown>
+): CareerCompensation | null => {
+  const compensation = toRecord(job.compensation)
+  if (!compensation) return null
+
+  const summary =
+    string(compensation.compensationTierSummary) ??
+    string(compensation.scrapeableCompensationSalarySummary)
+  if (!summary) return null
+
+  return {
+    summary,
+    display: job.shouldDisplayCompensationOnJobPostings !== false,
+  }
+}
+
+const getWorkType = (job: Record<string, unknown>): string | null => {
+  const workplaceType = getFieldValue(job, "workplaceType")
+  if (workplaceType) return workplaceType
+  if (job.isRemote === true) return "Remote"
+  return job.isRemote === false ? "On-site" : null
+}
+
+const toCareerJob = (value: unknown, boardName: string): CareerJob | null => {
+  const job = toRecord(value)
+  if (!job) return null
+
+  if (job.isListed === false) return null
+
+  const jobUrl = string(job.jobUrl)
+  const applyUrl = string(job.applyUrl)
+
+  const id =
+    string(job.id) ??
+    string(job.jobId) ??
+    string(job.jobPostingId) ??
+    string(job.ashbyJid) ??
+    idFromUrl(jobUrl) ??
+    idFromUrl(applyUrl)
+
+  const title = getFieldValue(job, "title")
+  const href =
+    jobUrl ??
+    applyUrl ??
+    (id
+      ? `https://jobs.ashbyhq.com/${encodeURIComponent(boardName)}/${id}`
+      : null)
+
+  if (!(id && title && href)) return null
+
+  return {
+    id,
+    title,
+    href,
+    applyUrl,
+    location:
+      getFieldValue(job, "location") ?? getFieldValue(job, "locationName"),
+    department:
+      getFieldValue(job, "department") ?? getFieldValue(job, "departmentName"),
+    team: getFieldValue(job, "team") ?? getFieldValue(job, "teamName"),
+    employmentType:
+      getFieldValue(job, "employmentType") ?? getFieldValue(job, "jobType"),
+    workType: getWorkType(job),
+    publishedAt: string(job.publishedAt) ?? string(job.publishedDate) ?? null,
+    isRemote: job.isRemote === true,
+    descriptionHtml: string(job.descriptionHtml),
+    compensation: getCompensation(job),
+  }
+}
+
+export const normalizeBoard = (
+  payload: unknown,
+  boardName: string
+): CareerJob[] => {
+  const board = toRecord(payload)
+  if (!board) return []
+
+  const jobs = Array.isArray(board.jobs) ? board.jobs : null
+  const legacy = Array.isArray(board.jobPostings) ? board.jobPostings : null
+  const raw = jobs ?? legacy ?? []
+
+  return raw
+    .map((job) => toCareerJob(job, boardName))
+    .filter((job): job is CareerJob => job !== null)
+}

package/src/modules/features/jobs/ashby/files/lib/integrations/ashby/types.ts

@@ -0,0 +1,20 @@
+export type CareerCompensation = {
+  summary: string
+  display: boolean
+}
+
+export type CareerJob = {
+  id: string
+  title: string
+  href: string
+  applyUrl: string | null
+  location: string | null
+  department: string | null
+  team: string | null
+  employmentType: string | null
+  workType: string | null
+  publishedAt: string | null
+  isRemote: boolean
+  descriptionHtml: string | null
+  compensation: CareerCompensation | null
+}

package/src/modules/features/jobs/ashby/files/lib/integrations/check-integration.ts

@@ -0,0 +1,25 @@
+import { ashbyBoardName } from "@/lib/integrations/ashby/env"
+
+/**
+ * Integration Configuration Checker
+ *
+ * Utilities to check if integrations are configured via environment variables.
+ * This helps with tree-shaking unused integrations from the bundle.
+ *
+ * Usage:
+ * ```ts
+ * import { isAshbyConfigured } from '@/integrations/check-integration'
+ *
+ * if (isAshbyConfigured()) {
+ *   // Only fetch the job board once a board name is set
+ * }
+ * ```
+ */
+
+/**
+ * Check if the Ashby job board is configured. Derived from env.ts, not a
+ * second read of `process.env`.
+ */
+export function isAshbyConfigured(): boolean {
+  return Boolean(ashbyBoardName)
+}

package/src/templates/next-pagebuilder/AGENTS.md

@@ -0,0 +1,129 @@
+# AGENTS.md
+
+Instructions for AI agents working in this repository. Human-facing setup,
+environment variables and the publish webhook live in the README — read it too.
+
+This is a **Next.js + Sanity page builder**: all URL structure is managed in
+Sanity, not in code, and a single catch-all route `[[...slug]]` renders every
+page.
+
+**Never add a page route under `app/`.** A new page is a `page` document in the
+Studio with a slug, not a directory. `app/(content)/[[...slug]]/page.tsx`
+resolves every one of them; a hand-written route shadows that resolver and
+becomes a URL no editor can see, move or delete. The only things that belong in
+`app/` are non-page endpoints — the Studio, API handlers, sitemap, feed.
+
+## Page-builder blocks
+
+**A block is `defineBlock` + a registry entry.** Define the schema with
+`defineBlock` (`lib/integrations/sanity/schemas/shared/block.ts`), never
+`defineType` — it implies `type: "document"` and appends **Anchor ID** and
+**Presentation Mode** for you. Register the component in
+`components/page-builder/registry.tsx`; the renderer is driven by that map, so
+there is no switch to extend.
+
+Both halves are enforced, not documented: the registry's key set is typed as
+exactly `PageBuilderDocumentType`, so a block registered in
+`page-builder-config.ts` without an entry there — or an entry there for a block
+that was never registered — is a typecheck error.
+
+**Every block declares two orthogonal axes** in `page-builder-config.ts`:
+`pageTypes` (which page documents may host it — drives validation) and
+`category` (what the block structurally is, one of `componentCategories` —
+drives the insert menu; `misc` only when nothing else fits). Never collapse them
+into one field: that is what made the menu a single flat list.
+
+**And a preview image.** The insert menu renders one tile per block from a
+`studioPreview` document (Components → Component Previews) keyed
+`block.<memberName>`. A block without one falls back to its schema icon, which
+is what made the old menu unreadable.
+
+**Never hardcode vertical padding in a block component.** The renderer wraps
+each block in `<Section>` (`components/page-builder/section.tsx`), which owns
+the `<section>` element, the anchor `id`, `scroll-mt` and the responsive padding
+top/bottom. A block component returns its content only — no outer `<section>`,
+no `py-*` / `pt-*` / `pb-*` on its root. Internal gaps between a block's own
+parts are fine.
+
+**Never hardcode px for section spacing either.** The scale lives in the Studio
+at **Layout → Spacing Scale**, where editors add or rename steps and mark one as
+the default, and it reaches the page as CSS custom properties. `Section` only
+references `var(--section-space-<key>, var(--section-space-default, 2.5rem))`.
+
+**An empty Anchor ID is generated from the block's title** (`headline` /
+`heading` / `teaserHeading` / `title` / `label` — never `internalTitle`, which is
+Studio-only) and de-duplicated per page. Name your block's headline field one of
+those and anchor links work for free.
+
+Declare `isEmpty` in the registry when a block can be left unfilled — the
+renderer then skips the block *and* its `<Section>`, so it leaves no padded gap
+and claims no anchor id. Don't early-return `null` from the component instead;
+the renderer has to know before it wraps anything.
+
+Full recipe and a checklist for a new block: the `page-builder-block` skill, or
+the "Page-builder blocks" section of the README.
+
+## Sanity
+
+- Everything Sanity lives in `lib/integrations/sanity/`.
+- Schemas use `defineType` / `defineField` / `defineArrayMember` (blocks use
+  `defineBlock`). GROQ queries are `SCREAMING_SNAKE_CASE` and wrapped in
+  `defineQuery`.
+- **Regenerate types after any schema or query change:** `bun sanity:typegen`,
+  and commit the result in the same PR. Never hand-edit `sanity.types.ts`.
+- The page query spreads `...` for non-gated blocks, so new block fields flow
+  through on their own — except `gatedContent`, whose GROQ branch lists fields
+  explicitly in `lib/integrations/sanity/queries.ts`. Add fields there by hand.
+- Read through `sanityFetch` / `fetchSanity`, not a bare client, so the
+  draft-mode perspective and cache tags are applied.
+- Publishing a document must invalidate what renders it. Layout singletons are
+  listed in `SANITY_LAYOUT_TAGS`; a new one that isn't there serves stale.
+- Add `data-sanity` attributes where visual editing should reach.
+- Nested layouts (e.g. `app/studio/layout.tsx`) must NOT render `<html>` or
+  `<body>` — the root layout already provides them.
+
+## React and Next.js
+
+- **React Compiler is on.** Do not write `useMemo`, `useCallback` or
+  `React.memo`. The one exception is `useRef` to instantiate an object once:
+
+  ```tsx
+  const instanceRef = useRef<SomeClass | null>(null)
+  if (!instanceRef.current) instanceRef.current = new SomeClass()
+  ```
+
+- React 19: refs are regular props, so no `forwardRef` (a lint rule enforces it).
+- **Never call `headers()`, `cookies()`, `draftMode()` or read `searchParams` in
+  a root layout** — it takes the whole page out of the prerender. Detect the
+  route with `useSelectedLayoutSegment()` in a `"use client"` wrapper, and put
+  draft-mode / visual-editing behaviour in a child component with its own
+  `<Suspense>` boundary.
+- Use `@/components/ui/image` rather than `next/image` directly, and
+  `@/components/ui/sanity-image` for Sanity assets.
+- Compose classNames with `cn` from `@/lib/styles/cn`.
+- Import with the `@/` alias; relative parent imports are a lint error.
+- Gate debug UI behind `process.env.NODE_ENV === "development"` — it is not
+  stripped in production otherwise.
+
+## House rules
+
+- **Bun only.** `bun install`, `bun run <script>`, `bunx`. Never npm, pnpm or
+  yarn — a second lockfile next to `bun.lock` is how the versions drift.
+- **Don't add a dependency without asking.** Check `bun info <package>` and the
+  current docs first.
+<!-- bsmnt:if dotenvx -->
+- **Secrets are encrypted at rest with dotenvx.** Never put a real secret in
+  plaintext in a committed env file — gitleaks blocks the commit. Use
+  `bun env:set KEY value` (`--plain` for trivial config and `NEXT_PUBLIC_*`).
+  The `manage-env` skill has the full procedure.
+<!-- bsmnt:endif -->
+- Don't leave commented-out code or `TODO`s behind; write the code so it reads
+  without them.
+- **Verify before claiming done:**
+
+  ```bash
+  bun sanity:typegen && bun typecheck && bun lint && bun run build && bun knip
+  ```
+
+  (`bun run build`, not `bun build` — the bare form is Bun's bundler.) Say what
+  you ran and what it printed; don't report success you haven't seen.

package/src/templates/next-pagebuilder/CLAUDE.md

@@ -0,0 +1,3 @@
+# CLAUDE.md
+
+@AGENTS.md

package/src/templates/next-pagebuilder/README.md

@@ -12,9 +12,79 @@ bun dev
 
 - Single catch-all route `[[...slug]]` handles all pages
 - Sanity page builder with composable content blocks
+- Editor-owned vertical spacing scale and per-block anchor links
 - Blog with categories, filtering, and pagination
 - Visual editing and live preview support
 
+## Page-builder blocks
+
+A block is two halves — a schema document and a React component — and each half
+has one place that makes it a block rather than an ordinary document or a loose
+component. Use them and Anchor ID, Presentation Mode and the spacing scale come
+for free.
+
+**Define the schema with `defineBlock`, never `defineType`**
+(`lib/integrations/sanity/schemas/shared/block.ts`). It implies
+`type: "document"` and appends two fields to every block:
+
+- **Anchor ID** — optional. Left empty, the anchor is generated from the block's
+  own title at render time (`headline` / `heading` / `teaserHeading` / `title` /
+  `label` — never `internalTitle`, which is Studio-only) and de-duplicated per
+  page, so two blocks with the same heading get `-2`. A value typed by hand
+  always wins, and the Studio shows the generated one as the placeholder. Link
+  to it as `/<page>#<anchor>`.
+- **Presentation Mode** — padding top and bottom, each picked from the shared
+  spacing scale. No free-form px. A block that never touches it follows whichever
+  step is marked as the default.
+
+Blocks that declare `groups` get a **Presentation** tab for both fields
+automatically — don't list it in `groups` yourself.
+
+**Register the component in `components/page-builder/registry.tsx`.** One entry
+per block, keyed by schema type; the renderer is driven by that map, so there is
+no switch to extend. `isEmpty` declares when a block has nothing to show — the
+renderer then skips the block *and* its `<Section>`, so an unfilled block leaves
+no padded gap behind and claims no anchor id. The registry's key set is typed as
+exactly `PageBuilderDocumentType`, so a block registered in one place and not the
+other is a typecheck error.
+
+**Never hardcode vertical padding in a block component.** The renderer wraps each
+block in `<Section>` (`components/page-builder/section.tsx`), which owns the
+`<section>` element, the anchor `id`, `scroll-mt` and the padding. A block
+component returns its content only — no outer `<section>`, no `py-*` / `pt-*` /
+`pb-*` on its root. Internal gaps between a block's own parts are fine.
+
+### The spacing scale is content, not code
+
+Editors own it at **Layout → Spacing Scale**: a list of steps, each with a name
+and px per breakpoint (mobile / tablet / desktop, empty reuses Desktop), one
+marked as the default. Ticking a second step as default unticks the previous, so
+there is always exactly one. Add a "Hero 120px" step and it shows up in every
+block's dropdown, no deploy.
+
+- Blocks store the step's `_key`, so renaming a step breaks nothing and a deleted
+  step degrades to the default instead of breaking the page.
+- The list arrives seeded with the built-in five (XS 16 · SM 24 · **MD 32,
+  default** · LG 48 · XL 80, from `schemas/shared/spacing.ts`), which also apply
+  as the fallback if you empty it. Hit **"Add the built-in steps"** in the field
+  to get them back as editable rows.
+- Values reach the page as CSS custom properties injected server-side by
+  `components/layout/spacing-scale/`, one `--section-space-<key>` per step plus
+  `--section-space-default`, re-declared inside the `768px` and `1440px` media
+  queries. `Section` only ever references
+  `var(--section-space-<key>, var(--section-space-default, 2.5rem))`, so an
+  unknown key degrades instead of breaking.
+- `spacingSettings` is a layout singleton, so publishing it busts the layout
+  cache the same way navbar and footer do.
+
+After a schema change run `bun sanity:typegen`. The page query spreads `...` for
+non-gated blocks, so new fields flow through on their own — except
+`gatedContent`, whose GROQ branch lists fields explicitly in
+`lib/integrations/sanity/queries.ts`.
+
+The bundled `page-builder-block` agent skill has the full recipe and a checklist
+for adding a new block.
+
 ## Commands
 
 - `bun dev` - Start dev server

package/src/templates/next-pagebuilder/app/(content)/layout.tsx

@@ -1,10 +1,12 @@
 import { JsonLd } from "@/components/layout/json-ld"
+import { SpacingScale } from "@/components/layout/spacing-scale"
 import { Wrapper } from "@/components/layout/wrapper"
 import { SanityVisualEditing } from "@/components/sanity/visual-editing"
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
+      <SpacingScale />
       <JsonLd />
       <Wrapper>{children}</Wrapper>
       <SanityVisualEditing />

package/src/templates/next-pagebuilder/components/layout/spacing-scale/index.tsx

@@ -0,0 +1,18 @@
+import { getLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
+import {
+  resolveSpacingSteps,
+  spacingScaleCss,
+} from "@/lib/integrations/sanity/schemas/shared/spacing"
+
+export const SpacingScale = async () => {
+  const { spacingSettings } = await getLayoutData()
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: css custom properties from the spacing singleton
+      dangerouslySetInnerHTML={{
+        __html: spacingScaleCss(resolveSpacingSteps(spacingSettings?.steps)),
+      }}
+    />
+  )
+}

package/src/templates/next-pagebuilder/components/page-builder/components/article-content/index.tsx

@@ -7,7 +7,7 @@ import { RelatedPostItem } from "./related-post-item"
 export function ArticleContent({ block }: ArticleContentProps) {
   const { author, body, categories, date, relatedPosts, thumbnail } = block
   return (
-    <div className="py-8 md:py-12">
+    <div>
       <header className="mx-auto max-w-3xl space-y-6">
         {categories && categories.length > 0 ? (
           <div className="flex flex-wrap gap-2">

package/src/templates/next-pagebuilder/components/page-builder/components/content-collection/index.tsx

@@ -239,11 +239,11 @@ async function CollectionResults({
 // clickable before the grid resolves.
 export function ContentCollection(props: ContentCollectionProps) {
   return (
-    <section className="flex flex-col gap-8 py-8">
+    <div className="flex flex-col gap-8">
       <CollectionToolbar pinnedCategory={props.pinnedCategory} />
       <Suspense fallback={<CollectionResultsSkeleton />}>
         <CollectionResults {...props} />
       </Suspense>
-    </section>
+    </div>
   )
 }