create-agntcms-app 0.2.1

package/dist/template/agntcms/sections/BlogPostHero/component.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  EditableImage,
+  EditableList,
+  EditableRichText,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import type { ImageValue } from '@agntcms/next'
+import { schema } from './schema'
+
+type Tag = SlotItem<typeof schema.tags.itemSchema>
+
+interface Props {
+  readonly category: EditableSlot<'richText', string>
+  readonly title: EditableSlot<'richText', string>
+  readonly summary: EditableSlot<'richText', string>
+  readonly author: EditableSlot<'richText', string>
+  readonly publishedAt: EditableSlot<'richText', string>
+  readonly readingTime: EditableSlot<'richText', string>
+  readonly cover: EditableSlot<'image', ImageValue>
+  readonly tags: EditableSlot<'list', ReadonlyArray<Tag>>
+}
+
+export function BlogPostHeroComponent({
+  category,
+  title,
+  summary,
+  author,
+  publishedAt,
+  readingTime,
+  cover,
+  tags,
+}: Props) {
+  return (
+    <section className="bg-bg-primary">
+      <div className="mx-auto w-full max-w-[920px] px-8 pt-24 pb-12">
+        <EditableRichText
+          field={category}
+          as="div"
+          className="mb-6 text-[11px] font-medium uppercase tracking-[0.10em] text-text-brand-primary"
+        />
+        <EditableRichText
+          field={title}
+          className="
+            mb-6
+            [&_h1]:m-0 [&_h1]:font-display [&_h1]:font-medium [&_h1]:text-text-primary
+            [&_h1]:max-w-[22ch]
+            [&_h1]:!text-[clamp(34px,5vw,56px)] [&_h1]:!leading-[1.05] [&_h1]:!tracking-[-0.03em]
+          "
+        />
+        <EditableRichText
+          field={summary}
+          className="
+            mb-10 max-w-[60ch]
+            [&_p]:m-0 [&_p]:text-[18px] [&_p]:leading-[1.6] [&_p]:text-text-secondary
+          "
+        />
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-[13px] text-text-secondary">
+          <EditableRichText field={author} as="span" className="font-medium text-text-primary" />
+          <span className="text-text-tertiary" aria-hidden="true">·</span>
+          <EditableRichText field={publishedAt} as="span" />
+          <span className="text-text-tertiary" aria-hidden="true">·</span>
+          <EditableRichText field={readingTime} as="span" />
+        </div>
+
+        <EditableList
+          field={tags}
+          itemSchema={schema.tags.itemSchema}
+          className="mt-5 flex flex-wrap gap-2"
+          renderItem={(item) => (
+            <span className="inline-flex items-center rounded-sm border-[0.5px] border-border-primary bg-bg-secondary px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.10em] text-text-secondary">
+              <EditableRichText field={item.label} as="span" />
+            </span>
+          )}
+        />
+
+        <div className="mt-12 overflow-hidden rounded-xl border-[0.5px] border-border-primary bg-bg-secondary">
+          <EditableImage
+            field={cover}
+            className="block aspect-[16/9] w-full object-cover"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/BlogPostHero/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { BlogPostHeroComponent } from './component'
+
+export const BlogPostHero = defineSection({
+  name: 'BlogPostHero',
+  category: 'Blog',
+  schema,
+  component: BlogPostHeroComponent,
+})

package/dist/template/agntcms/sections/BlogPostHero/schema.ts

@@ -0,0 +1,35 @@
+import { ImageField, ListField, RichTextField } from '@agntcms/next'
+
+export const schema = {
+  // ALL CAPS section label — category for the post (e.g. "Product", "Engineering").
+  category: { kind: 'richText' as const, default: 'Product' },
+
+  // Display title rendered as Satoshi 500 H1.
+  title: {
+    kind: 'richText' as const,
+    default: '# A new post.',
+  },
+
+  // 1–2 sentence summary shown under the headline.
+  summary: {
+    kind: 'richText' as const,
+    default: 'A short standfirst that frames the post in plain language.',
+  },
+
+  // Author name rendered as plain text byline. Single author by default.
+  author: { kind: 'richText' as const, default: 'agntcms Team' },
+
+  // Publication date — free-form string, e.g. "May 1, 2026".
+  publishedAt: { kind: 'richText' as const, default: 'May 1, 2026' },
+
+  // Approximate reading time, e.g. "5 min read".
+  readingTime: { kind: 'richText' as const, default: '5 min read' },
+
+  // Hero cover image. Required; alt collected via the image picker.
+  cover: ImageField,
+
+  // Tags rendered as a row of small uppercase chips.
+  tags: ListField({
+    label: RichTextField,
+  }),
+}

package/dist/template/agntcms/sections/CaseStudies/component.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import {
+  EditableRichText,
+  EditableText,
+  EditableImage,
+  EditableList,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Item = SlotItem<typeof schema.items.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly items: EditableSlot<'list', ReadonlyArray<Item>>
+}
+
+export function CaseStudiesComponent({ eyebrow, headline, lead, items }: Props) {
+  return (
+    <section className="bg-paper-2">
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-[88px]">
+        <div className="max-w-[720px]">
+          <EditableRichText
+            field={eyebrow}
+            className="[&_p]:font-mono [&_p]:font-medium [&_p]:text-[12px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0"
+          />
+          <div className="mt-3 [&_h2]:m-0 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:text-[44px] [&_h2]:leading-[1.05] [&_h2]:tracking-[-0.03em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:text-[44px] [&_p]:leading-[1.05] [&_p]:tracking-[-0.03em] [&_em]:not-italic [&_em]:text-ink-3 [&_em]:font-semibold">
+            <EditableRichText field={headline} />
+          </div>
+          <EditableRichText
+            field={lead}
+            className="mt-4 max-w-[580px] [&_p]:text-[18px] [&_p]:leading-[1.55] [&_p]:text-ink-2 [&_p]:m-0"
+          />
+        </div>
+        <EditableList
+          field={items}
+          itemSchema={schema.items.itemSchema}
+          className="mt-12 grid grid-cols-1 border-t border-hairline lg:grid-cols-3"
+          renderItem={(p) => (
+            <div className="block border-b border-r border-hairline -mr-px last:mr-0">
+              <div className="aspect-[4/3] overflow-hidden border-b border-hairline bg-paper-3">
+                <EditableImage
+                  field={p.image}
+                  className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+                />
+              </div>
+              <div className="p-6">
+                <EditableText
+                  field={p.kind}
+                  as="span"
+                  className="font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-3"
+                />
+                <EditableText
+                  field={p.name}
+                  as="h4"
+                  className="mt-2.5 mb-1.5 text-[19px] font-semibold tracking-[-0.015em] text-ink"
+                />
+                <EditableRichText
+                  field={p.body}
+                  className="[&_p]:m-0 [&_p]:text-[14px] [&_p]:leading-[1.55] [&_p]:text-ink-3"
+                />
+                <div className="mt-4 flex gap-6 border-t border-hairline pt-4 font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3">
+                  <span>
+                    <EditableText
+                      field={p.metric1Value}
+                      as="b"
+                      className="font-semibold text-[13px] text-ink"
+                    />{' '}
+                    ·{' '}
+                    <EditableText field={p.metric1Label} as="span" />
+                  </span>
+                  <span>
+                    <EditableText
+                      field={p.metric2Value}
+                      as="b"
+                      className="font-semibold text-[13px] text-ink"
+                    />{' '}
+                    ·{' '}
+                    <EditableText field={p.metric2Label} as="span" />
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/CaseStudies/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { CaseStudiesComponent } from './component'
+
+export const CaseStudies = defineSection({
+  name: 'CaseStudies',
+  category: 'Social proof',
+  schema,
+  component: CaseStudiesComponent,
+})

package/dist/template/agntcms/sections/CaseStudies/schema.ts

@@ -0,0 +1,17 @@
+import { RichTextField, TextField, ImageField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  items: ListField({
+    image: ImageField,
+    kind: TextField,
+    name: TextField,
+    body: RichTextField,
+    metric1Value: TextField,
+    metric1Label: TextField,
+    metric2Value: TextField,
+    metric2Label: TextField,
+  }),
+}

package/dist/template/agntcms/sections/ContactForm/component.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { EditableRichText, EditableText, EditableImage } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+import type { ImageValue } from '@agntcms/next'
+
+interface Props {
+  readonly headline: EditableSlot<'richText', string>
+  readonly body: EditableSlot<'richText', string>
+  readonly nameLabel: EditableSlot<'text', string>
+  readonly emailLabel: EditableSlot<'text', string>
+  readonly companyLabel: EditableSlot<'text', string>
+  readonly messageLabel: EditableSlot<'text', string>
+  readonly submitLabel: EditableSlot<'text', string>
+  readonly quote: EditableSlot<'richText', string>
+  readonly quoteName: EditableSlot<'text', string>
+  readonly quoteRole: EditableSlot<'text', string>
+  readonly quotePhoto: EditableSlot<'image', ImageValue>
+}
+
+function Field({ label }: { label: EditableSlot<'text', string> }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <EditableText
+        field={label}
+        as="span"
+        className="font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-3"
+      />
+      <input
+        type="text"
+        className="w-full border-0 border-b border-hairline bg-transparent py-2.5 text-[15px] text-ink outline-none focus:border-b-2 focus:border-ink focus:pb-[9px]"
+      />
+    </div>
+  )
+}
+
+export function ContactFormComponent({
+  headline,
+  body,
+  nameLabel,
+  emailLabel,
+  companyLabel,
+  messageLabel,
+  submitLabel,
+  quote,
+  quoteName,
+  quoteRole,
+  quotePhoto,
+}: Props) {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-[88px]">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-[1.2fr_1fr]">
+          <div>
+            <div className="[&_h2]:m-0 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:text-[48px] [&_h2]:leading-[1.05] [&_h2]:tracking-[-0.03em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:text-[48px] [&_p]:leading-[1.05] [&_p]:tracking-[-0.03em] [&_em]:not-italic [&_em]:text-ink-3 [&_em]:font-semibold">
+              <EditableRichText field={headline} />
+            </div>
+            <EditableRichText
+              field={body}
+              className="mt-4 max-w-[540px] [&_p]:m-0 [&_p]:text-[17px] [&_p]:leading-[1.55] [&_p]:text-ink-2"
+            />
+            <form
+              onSubmit={(e) => e.preventDefault()}
+              className="mt-10 flex max-w-[540px] flex-col gap-5"
+            >
+              <Field label={nameLabel} />
+              <Field label={emailLabel} />
+              <Field label={companyLabel} />
+              <div className="flex flex-col gap-1.5">
+                <EditableText
+                  field={messageLabel}
+                  as="span"
+                  className="font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-3"
+                />
+                <textarea
+                  rows={4}
+                  className="w-full resize-y border-0 border-b border-hairline bg-transparent py-2.5 text-[15px] text-ink outline-none focus:border-b-2 focus:border-ink focus:pb-[9px]"
+                />
+              </div>
+              <button
+                type="submit"
+                className="mt-2 inline-flex w-fit items-center gap-2 whitespace-nowrap rounded-sm border border-ink bg-ink px-[22px] py-[13px] text-[15px] font-medium text-paper transition-colors duration-200 ease-out hover:bg-ink-2 hover:border-ink-2"
+              >
+                <EditableText field={submitLabel} as="span" />
+              </button>
+            </form>
+          </div>
+          <aside className="self-start border border-hairline bg-transparent p-8">
+            <span className="font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3">
+              customer quote
+            </span>
+            <EditableRichText
+              field={quote}
+              className="mt-5 mb-6 [&_p]:m-0 [&_p]:text-[18px] [&_p]:leading-[1.5] [&_p]:tracking-[-0.01em] [&_p]:text-ink"
+            />
+            <div className="flex items-center gap-3 border-t border-hairline pt-5">
+              <EditableImage
+                field={quotePhoto}
+                className="!block h-9 w-9 rounded-full object-cover grayscale [&_img]:h-9 [&_img]:w-9 [&_img]:rounded-full [&_img]:object-cover [&_img]:grayscale"
+              />
+              <div>
+                <EditableText
+                  field={quoteName}
+                  as="div"
+                  className="text-sm font-semibold text-ink"
+                />
+                <EditableText
+                  field={quoteRole}
+                  as="div"
+                  className="font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3"
+                />
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/ContactForm/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { ContactFormComponent } from './component'
+
+export const ContactForm = defineSection({
+  name: 'ContactForm',
+  category: 'Forms',
+  schema,
+  component: ContactFormComponent,
+})

package/dist/template/agntcms/sections/ContactForm/schema.ts

@@ -0,0 +1,15 @@
+import { RichTextField, TextField, ImageField } from '@agntcms/next'
+
+export const schema = {
+  headline: RichTextField,
+  body: RichTextField,
+  nameLabel: TextField,
+  emailLabel: TextField,
+  companyLabel: TextField,
+  messageLabel: TextField,
+  submitLabel: TextField,
+  quote: RichTextField,
+  quoteName: TextField,
+  quoteRole: TextField,
+  quotePhoto: ImageField,
+}

package/dist/template/agntcms/sections/DocsArticle/component.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import {
+  EditableRichText,
+  EditableList,
+  EditableLink,
+  read,
+  isSlotInPreview,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { LinkValue } from '@agntcms/next'
+import { schema } from './schema'
+
+type SidebarGroup = SlotItem<typeof schema.sidebar.itemSchema>
+type SidebarItem = SlotItem<typeof schema.sidebar.itemSchema.items.itemSchema>
+
+function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]+/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+interface SidebarLinkProps {
+  readonly item: SidebarItem
+}
+
+function SidebarLink({ item }: SidebarLinkProps) {
+  const active = read(item.active)
+  const href = read(item.href) || '#'
+  return (
+    <a
+      href={href}
+      className={
+        active
+          ? 'block py-1.5 text-[13.5px] font-medium text-text-brand-primary border-l-2 border-border-brand pl-3 -ml-[2px]'
+          : 'block py-1.5 pl-3 -ml-[2px] text-[13.5px] text-gray-500 hover:text-gray-950 transition-colors'
+      }
+    >
+      <EditableRichText field={item.label} as="span" />
+    </a>
+  )
+}
+
+interface Props {
+  readonly sidebar: EditableSlot<'list', ReadonlyArray<SidebarGroup>>
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly title: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly body: EditableSlot<'richText', string>
+  readonly prev: EditableSlot<'link', LinkValue>
+  readonly next: EditableSlot<'link', LinkValue>
+}
+
+interface TocEntry {
+  readonly id: string
+  readonly label: string
+  readonly level: 2 | 3
+}
+
+export function DocsArticleComponent({
+  sidebar,
+  eyebrow,
+  title,
+  lead,
+  body,
+  prev: rawPrev,
+  next: rawNext,
+}: Props) {
+  const articleRef = useRef<HTMLDivElement>(null)
+  const [toc, setToc] = useState<ReadonlyArray<TocEntry>>([])
+
+  const prev = read(rawPrev)
+  const next = read(rawNext)
+  // Keep the prev/next nav slots clickable in preview even when their
+  // link is unconfigured — the `<EditableLink>` inside the `<a>` is the
+  // author's only entry point to the link picker. See
+  // `isSlotInPreview` JSDoc for the canonical idiom.
+  const showPrev = Boolean(hrefOf(prev)) || isSlotInPreview(rawPrev)
+  const showNext = Boolean(hrefOf(next)) || isSlotInPreview(rawNext)
+
+  useEffect(() => {
+    const root = articleRef.current
+    if (!root) return
+    const headings = root.querySelectorAll<HTMLElement>('h2, h3')
+    const used = new Set<string>()
+    const items: TocEntry[] = []
+    headings.forEach((h, i) => {
+      const label = (h.textContent || '').trim()
+      let id = slugify(label) || `section-${i}`
+      let n = 2
+      while (used.has(id)) {
+        id = `${slugify(label) || `section-${i}`}-${n++}`
+      }
+      used.add(id)
+      h.id = id
+      items.push({ id, label, level: h.tagName === 'H2' ? 2 : 3 })
+    })
+    setToc(items)
+    // The TOC depends on the rendered DOM, which depends on the body
+    // slot's underlying value. Pass `body` itself so React tracks slot
+    // identity changes (preview-mode revisions swap the slot reference).
+  }, [body])
+
+  return (
+    <section className="bg-gray-50 text-gray-950">
+      <div className="mx-auto w-full max-w-[1280px] px-6 lg:px-10">
+        <div className="grid grid-cols-1 gap-10 py-12 lg:grid-cols-[220px_minmax(0,1fr)_200px] lg:gap-14 lg:py-16">
+          {/* Sidebar */}
+          <aside className="hidden lg:block">
+            <div className="sticky top-10">
+              <EditableList
+                field={sidebar}
+                itemSchema={schema.sidebar.itemSchema}
+                className="flex flex-col gap-7"
+                renderItem={(group) => (
+                  <div>
+                    <EditableRichText
+                      field={group.title}
+                      as="div"
+                      className="mb-2 text-[13px] font-medium text-gray-950"
+                    />
+                    <EditableList
+                      field={group.items}
+                      itemSchema={schema.sidebar.itemSchema.items.itemSchema}
+                      className="flex flex-col border-l-[0.5px] border-gray-200"
+                      renderItem={(item) => <SidebarLink item={item} />}
+                    />
+                  </div>
+                )}
+              />
+            </div>
+          </aside>
+
+          {/* Article */}
+          <article className="min-w-0 max-w-[760px]">
+            <EditableRichText
+              field={eyebrow}
+              as="div"
+              className="mb-4 text-[11px] font-medium uppercase tracking-[0.10em] text-text-brand-primary"
+            />
+            <EditableRichText
+              field={title}
+              className="
+                mb-5
+                [&_h1]:m-0 [&_h1]:font-display [&_h1]:font-medium [&_h1]:text-gray-950
+                [&_h1]:!text-[clamp(32px,4.5vw,44px)] [&_h1]:!leading-[1.06] [&_h1]:!tracking-[-0.03em]
+              "
+            />
+            <EditableRichText
+              field={lead}
+              className="
+                mb-12 max-w-[60ch]
+                [&_p]:m-0 [&_p]:text-[18px] [&_p]:leading-[1.6] [&_p]:text-gray-500
+              "
+            />
+
+            <div
+              ref={articleRef}
+              className="
+                [&_h2]:scroll-mt-24 [&_h2]:font-display [&_h2]:font-medium [&_h2]:text-gray-950
+                [&_h2]:!text-[26px] [&_h2]:!leading-[1.2] [&_h2]:!tracking-[-0.02em]
+                [&_h2]:mt-14 [&_h2]:mb-4 [&_h2]:pb-2 [&_h2]:border-b-[0.5px] [&_h2]:border-gray-200
+                [&_h3]:scroll-mt-24 [&_h3]:font-display [&_h3]:font-medium [&_h3]:text-gray-950
+                [&_h3]:!text-[19px] [&_h3]:!leading-[1.3] [&_h3]:!tracking-[-0.01em]
+                [&_h3]:mt-10 [&_h3]:mb-3
+                [&_p]:my-4 [&_p]:text-[15.5px] [&_p]:leading-[1.7] [&_p]:text-gray-950
+                [&_a]:text-text-brand-primary [&_a]:underline [&_a]:underline-offset-[3px] hover:[&_a]:no-underline
+                [&_strong]:font-medium [&_strong]:text-gray-950
+                [&_em]:italic
+                [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6
+                [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6
+                [&_li]:my-1.5 [&_li]:text-[15.5px] [&_li]:leading-[1.7] [&_li]:text-gray-950
+                [&_li_p]:my-1
+                [&_code]:font-mono [&_code]:text-[13px] [&_code]:font-normal
+                [&_code]:text-text-brand-primary [&_code]:bg-bg-brand-primary
+                [&_code]:px-[6px] [&_code]:py-[2px] [&_code]:rounded-sm
+                [&_pre]:my-6 [&_pre]:bg-bg-brand-primary [&_pre]:rounded-lg
+                [&_pre]:px-5 [&_pre]:py-4 [&_pre]:overflow-x-auto
+                [&_pre]:font-mono [&_pre]:text-[13px] [&_pre]:leading-[1.7]
+                [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-text-primary [&_pre_code]:rounded-none
+                [&_blockquote]:my-6 [&_blockquote]:not-italic
+                [&_blockquote]:bg-white [&_blockquote]:border-l-2 [&_blockquote]:border-border-brand
+                [&_blockquote]:rounded-r-lg [&_blockquote]:px-5 [&_blockquote]:py-4
+                [&_blockquote_p]:m-0 [&_blockquote_p]:text-[15px] [&_blockquote_p]:leading-[1.65] [&_blockquote_p]:text-gray-950
+                [&_hr]:my-12 [&_hr]:border-0 [&_hr]:border-t-[0.5px] [&_hr]:border-gray-200
+              "
+            >
+              <EditableRichText field={body} />
+            </div>
+
+            {(showPrev || showNext) && (
+              <div className="mt-20 grid grid-cols-1 gap-3 border-t-[0.5px] border-gray-200 pt-10 sm:grid-cols-2">
+                {showPrev ? (
+                  <a
+                    href={hrefOf(prev) || '#'}
+                    target={isExternalLink(prev) ? '_blank' : undefined}
+                    rel={isExternalLink(prev) ? 'noreferrer' : undefined}
+                    className="flex flex-col items-start gap-1 rounded-lg border-[0.5px] border-gray-200 bg-white px-5 py-4 transition-colors hover:border-border-brand"
+                  >
+                    <span className="text-[12px] text-gray-500">← Previous</span>
+                    <EditableLink
+                      field={rawPrev}
+                      className="text-[15px] font-medium text-gray-950"
+                    />
+                  </a>
+                ) : (
+                  <span />
+                )}
+                {showNext ? (
+                  <a
+                    href={hrefOf(next) || '#'}
+                    target={isExternalLink(next) ? '_blank' : undefined}
+                    rel={isExternalLink(next) ? 'noreferrer' : undefined}
+                    className="flex flex-col items-end gap-1 rounded-lg border-[0.5px] border-gray-200 bg-white px-5 py-4 text-right transition-colors hover:border-border-brand sm:col-start-2"
+                  >
+                    <span className="text-[12px] text-gray-500">Next →</span>
+                    <EditableLink
+                      field={rawNext}
+                      className="text-[15px] font-medium text-gray-950"
+                    />
+                  </a>
+                ) : (
+                  <span />
+                )}
+              </div>
+            )}
+          </article>
+
+          {/* Right TOC */}
+          <aside className="hidden lg:block">
+            <div className="sticky top-10">
+              {toc.length > 0 && (
+                <>
+                  <div className="mb-3 text-[11px] font-medium uppercase tracking-[0.10em] text-gray-500">
+                    On this page
+                  </div>
+                  <ul className="flex flex-col">
+                    {toc.map((entry) => (
+                      <li
+                        key={entry.id}
+                        className={entry.level === 3 ? 'pl-3' : ''}
+                      >
+                        <a
+                          href={`#${entry.id}`}
+                          className="block py-1 text-[13px] text-gray-500 transition-colors hover:text-gray-950"
+                        >
+                          {entry.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </>
+              )}
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+  )
+}