create-agntcms-app 0.2.1

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

@@ -0,0 +1,120 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  EditableRichText,
+  EditableImage,
+  EditableLink,
+  EditableList,
+  read,
+  isSlotInPreview,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import { schema } from './schema'
+
+type Entry = SlotItem<typeof schema.entries.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly entries: EditableSlot<'list', ReadonlyArray<Entry>>
+}
+
+export function TabbedFeaturesComponent({ eyebrow, headline, lead, entries }: Props) {
+  const [active, setActive] = useState(0)
+  const itemsRaw = read(entries) as ReadonlyArray<unknown> | undefined
+  const itemCount = itemsRaw?.length ?? 0
+  const safeIndex = itemCount > 0 ? Math.min(Math.max(active, 0), itemCount - 1) : 0
+
+  return (
+    <section className="bg-paper-2">
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-[88px]">
+        <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]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:m-0 [&_h2]:text-[44px] [&_h2]:leading-[1.05] [&_h2]:tracking-[-0.03em] [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:m-0 [&_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 className="mt-10 flex gap-7 border-b border-hairline overflow-x-auto">
+          <EditableList
+            field={entries}
+            itemSchema={schema.entries.itemSchema}
+            className="flex"
+            renderItem={(entry, index) => {
+              const isActive = index === safeIndex
+              return (
+                <button
+                  type="button"
+                  onClick={() => setActive(index)}
+                  className={`-mb-px whitespace-nowrap border-b-2 px-0 pb-3.5 pt-3.5 pr-7 text-left text-[15px] font-medium ${
+                    isActive ? 'border-ink text-ink' : 'border-transparent text-ink-3'
+                  }`}
+                >
+                  <EditableRichText
+                    field={entry.headline}
+                    as="span"
+                    className="[&_p]:m-0 [&_p]:inline"
+                  />
+                </button>
+              )
+            }}
+          />
+        </div>
+
+        <EditableList
+          field={entries}
+          itemSchema={schema.entries.itemSchema}
+          className="mt-10"
+          renderItem={(entry, index) => {
+            if (index !== safeIndex) return null
+            const link = read(entry.cta)
+            const href = hrefOf(link)
+            const showCta = Boolean(href) || isSlotInPreview(entry.cta)
+            return (
+              <div className="grid grid-cols-1 gap-14 lg:grid-cols-2 lg:items-center">
+                <div>
+                  <EditableRichText
+                    field={entry.headline}
+                    className="[&_h3]:m-0 [&_h3]:font-display [&_h3]:font-semibold [&_h3]:text-ink [&_h3]:text-[32px] [&_h3]:leading-[1.15] [&_h3]:tracking-[-0.02em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:text-[32px] [&_p]:leading-[1.15] [&_p]:tracking-[-0.02em]"
+                  />
+                  <EditableRichText
+                    field={entry.description}
+                    className="mt-3.5 [&_p]:m-0 [&_p]:text-[16.5px] [&_p]:leading-[1.6] [&_p]:text-ink-2 [&_p+p]:mt-3"
+                  />
+                  {showCta && (
+                    <div className="mt-5">
+                      <a
+                        href={href || '#'}
+                        target={isExternalLink(link) ? '_blank' : undefined}
+                        rel={isExternalLink(link) ? 'noreferrer' : undefined}
+                      >
+                        <EditableLink
+                          field={entry.cta}
+                          className="inline-flex items-center gap-2 rounded-sm border border-hairline-2 bg-transparent px-[18px] py-[10px] text-sm font-medium text-ink no-underline hover:border-ink"
+                        />
+                      </a>
+                    </div>
+                  )}
+                </div>
+                <div className="aspect-[5/4] overflow-hidden border border-hairline bg-paper-2">
+                  <EditableImage
+                    field={entry.image}
+                    className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+                  />
+                </div>
+              </div>
+            )
+          }}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,13 @@
+import { RichTextField, LinkField, ImageField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  entries: ListField({
+    headline: RichTextField,
+    description: RichTextField,
+    image: ImageField,
+    cta: LinkField,
+  }),
+}

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

@@ -0,0 +1,77 @@
+'use client'
+
+import {
+  EditableRichText,
+  EditableText,
+  EditableImage,
+  EditableList,
+  read,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Person = SlotItem<typeof schema.people.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly columns: EditableSlot<'text', string>
+  readonly people: EditableSlot<'list', ReadonlyArray<Person>>
+}
+
+export function TeamGridComponent({ eyebrow, headline, lead, columns, people }: Props) {
+  const cols = read(columns) === '3' ? 3 : 4
+  const colClass = cols === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-4'
+
+  return (
+    <section className="bg-paper">
+      <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={people}
+          itemSchema={schema.people.itemSchema}
+          className={`mt-12 grid grid-cols-1 ${colClass}`}
+          renderItem={(p) => (
+            <div className="border-r border-b border-hairline -mr-px -mb-px">
+              <div className="aspect-square overflow-hidden border-b border-hairline bg-paper-2">
+                <EditableImage
+                  field={p.photo}
+                  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.name}
+                  as="h4"
+                  className="m-0 text-[17px] font-semibold tracking-[-0.01em] text-ink"
+                />
+                <EditableText
+                  field={p.role}
+                  as="div"
+                  className="mt-1 font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3"
+                />
+                <EditableRichText
+                  field={p.bio}
+                  className="mt-2.5 [&_p]:m-0 [&_p]:text-[14px] [&_p]:leading-[1.55] [&_p]:text-ink-3"
+                />
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,14 @@
+import { RichTextField, TextField, ImageField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  columns: TextField,
+  people: ListField({
+    photo: ImageField,
+    name: TextField,
+    role: TextField,
+    bio: RichTextField,
+  }),
+}

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

@@ -0,0 +1,76 @@
+'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 items: EditableSlot<'list', ReadonlyArray<Item>>
+}
+
+export function TestimonialsComponent({ eyebrow, headline, items }: Props) {
+  return (
+    <section className="bg-paper">
+      <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>
+        </div>
+        <EditableList
+          field={items}
+          itemSchema={schema.items.itemSchema}
+          className="mt-12 grid grid-cols-1 border-t border-hairline lg:grid-cols-2"
+          renderItem={(t, index) => {
+            const number = String(index + 1).padStart(2, '0')
+            const odd = index % 2 === 0
+            return (
+              <figure
+                className={`m-0 flex flex-col gap-4 border-b border-hairline p-8 ${odd ? 'lg:border-r' : ''} lg:pl-${odd ? '0' : '8'} pl-0`}
+              >
+                <span className="font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3">
+                  quote · {number}
+                </span>
+                <EditableRichText
+                  field={t.quote}
+                  className="[&_p]:m-0 [&_p]:text-[19px] [&_p]:leading-[1.45] [&_p]:tracking-[-0.01em] [&_p]:text-ink"
+                />
+                <figcaption className="mt-auto flex items-center gap-3">
+                  <EditableImage
+                    field={t.photo}
+                    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={t.name}
+                      as="div"
+                      className="text-sm font-semibold text-ink"
+                    />
+                    <EditableText
+                      field={t.role}
+                      as="div"
+                      className="font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3"
+                    />
+                  </div>
+                </figcaption>
+              </figure>
+            )
+          }}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,12 @@
+import { RichTextField, TextField, ImageField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  items: ListField({
+    quote: RichTextField,
+    name: TextField,
+    role: TextField,
+    photo: ImageField,
+  }),
+}

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

@@ -0,0 +1,86 @@
+'use client'
+
+import { EditableRichText, EditableList, read } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type WhatIsBuiltItem = SlotItem<typeof schema.items.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly intro: EditableSlot<'richText', string>
+  readonly items: EditableSlot<'list', ReadonlyArray<WhatIsBuiltItem>>
+}
+
+function pillClasses(status: string): string {
+  if (status === 'shipped') {
+    return 'bg-bg-brand-primary text-text-brand-primary'
+  }
+  if (status === 'wip') {
+    return 'bg-[#2a2410] text-[#c9a700]'
+  }
+  return 'bg-bg-primary text-text-secondary border-[0.5px] border-border-primary'
+}
+
+function pillLabel(status: string): string {
+  if (status === 'shipped') return 'shipped'
+  if (status === 'wip') return 'in progress'
+  return 'next'
+}
+
+export function WhatIsBuiltComponent({ eyebrow, headline, intro, items }: Props) {
+  return (
+    <section id="built" className="bg-bg-primary">
+      <div className="mx-auto max-w-[1080px] px-8 py-16 border-t-[0.5px] border-border-secondary">
+        <EditableRichText
+          field={eyebrow}
+          className="prose mb-3.5 [&_p]:text-[11px] [&_p]:font-medium [&_p]:tracking-[0.10em] [&_p]:uppercase [&_p]:text-text-brand-primary [&_p]:m-0"
+        />
+        <EditableRichText
+          field={headline}
+          className="mb-6
+            [&_h2]:font-display [&_h2]:font-medium [&_h2]:text-text-primary [&_h2]:m-0
+            [&_h2]:max-w-[22ch]
+            [&_h2]:!text-[clamp(28px,3.6vw,40px)] [&_h2]:!leading-[1.1] [&_h2]:!tracking-[-0.02em]"
+        />
+        <EditableRichText
+          field={intro}
+          className="prose max-w-[60ch] mb-7 [&_p]:text-text-primary [&_p]:m-0"
+        />
+
+        <EditableList
+          field={items}
+          itemSchema={schema.items.itemSchema}
+          className="grid grid-cols-1 md:grid-cols-2 gap-3"
+          renderItem={(item) => {
+            const status = read(item.status)
+            return (
+              <div className="flex gap-3 items-start h-full bg-bg-secondary border-[0.5px] border-border-primary rounded-lg px-4 py-3.5">
+                <span
+                  className={[
+                    'font-mono text-[10px] tracking-[0.06em] uppercase',
+                    'px-2 py-0.5 rounded-[3px] flex-shrink-0 mt-px',
+                    pillClasses(status),
+                  ].join(' ')}
+                >
+                  {pillLabel(status)}
+                </span>
+                <div className="text-sm leading-[1.5]">
+                  <EditableRichText
+                    field={item.label}
+                    className="prose [&_p]:m-0 [&_p]:font-medium [&_p]:text-text-primary"
+                  />
+                  <EditableRichText
+                    field={item.description}
+                    className="prose mt-0.5 [&_p]:m-0 [&_p]:text-text-secondary [&_p]:text-[13px]"
+                  />
+                </div>
+              </div>
+            )
+          }}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,20 @@
+import { RichTextField, SelectField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  intro: RichTextField,
+  items: ListField({
+    // status drives the pill colour: shipped (teal), wip (amber), next (neutral).
+    status: SelectField(
+      [
+        { value: 'shipped', label: 'Shipped' },
+        { value: 'wip', label: 'In progress' },
+        { value: 'next', label: 'Next' },
+      ],
+      { default: 'shipped' },
+    ),
+    label: RichTextField,
+    description: RichTextField,
+  }),
+}

package/dist/template/agntcms/site-meta.ts

@@ -0,0 +1,81 @@
+// Typed accessor for the `site-meta` global. All four metadata helpers
+// (app/layout.tsx, app/[[...slug]]/page.tsx, app/sitemap.ts, app/robots.ts)
+// read this global; centralizing the narrowing here means schema changes only
+// require one update instead of four.
+
+import { cache } from 'react'
+import type { ImageValue } from '@agntcms/next'
+import type { GetGlobal } from '@agntcms/next/server'
+
+// The shape of the site-meta global's `data` field after narrowing.
+// Matches the schema in agntcms/sections/SiteMeta/schema.ts exactly.
+export interface SiteMeta {
+  siteName: string
+  baseUrl: string | null
+  defaultOgImage: ImageValue | null
+  defaultDescription: string
+}
+
+// Reads the `site-meta` global and returns a fully-typed, narrowed object.
+// Falls back to safe defaults when the global is absent or a field is
+// missing/wrong-typed — never throws.
+// `cache` dedups multiple calls within the same server request so layout.tsx
+// and [[...slug]]/page.tsx do not each trigger a separate adapter read.
+export const getSiteMeta = cache(async (getGlobal: GetGlobal): Promise<SiteMeta> => {
+  // `getGlobal` is invoked in published mode unconditionally — globals do not
+  // have drafts in v0.1. If/when drafts arrive for globals, callers in preview
+  // contexts (e.g. `[[...slug]]/page.tsx generateMetadata`) must pass the mode.
+  const global = await getGlobal({ name: 'site-meta', mode: 'published' })
+  const data: unknown = global?.data
+
+  // Narrow data to a plain object first — if it isn't, all fields fall to
+  // their defaults below.
+  const d = typeof data === 'object' && data !== null ? (data as Record<string, unknown>) : {}
+
+  const siteName =
+    typeof d['siteName'] === 'string' && d['siteName'] !== ''
+      ? d['siteName']
+      : 'agntcms'
+
+  // Strip ALL trailing slashes (not just one), then validate that the result
+  // is a parseable absolute URL. A bare hostname like "example.com" or a value
+  // with extra slashes would crash `new URL(baseUrl)` in layout.tsx, so we
+  // degrade to null rather than propagate a broken value to any consumer.
+  let baseUrl: string | null = null
+  if (typeof d['baseUrl'] === 'string') {
+    const cleaned = d['baseUrl'].replace(/\/+$/, '')
+    if (cleaned !== '') {
+      try {
+        const parsed = new URL(cleaned)
+        // Reject URLs with a path component — a baseUrl of
+        // "https://example.com/foo" would produce wrong sitemap and canonical
+        // URLs like "https://example.com/foo/sitemap.xml".
+        if (parsed.pathname === '/' || parsed.pathname === '') {
+          baseUrl = cleaned
+        }
+      } catch {
+        // Malformed or missing protocol — treat as absent; all four consumers
+        // already handle baseUrl: null correctly.
+        baseUrl = null
+      }
+    }
+  }
+
+  // ImageValue requires both `filename` (string) and `alt` (string).
+  const rawImage = d['defaultOgImage']
+  const defaultOgImage: ImageValue | null =
+    typeof rawImage === 'object' &&
+    rawImage !== null &&
+    typeof (rawImage as Record<string, unknown>)['filename'] === 'string' &&
+    typeof (rawImage as Record<string, unknown>)['alt'] === 'string'
+      ? {
+          filename: (rawImage as Record<string, unknown>)['filename'] as string,
+          alt: (rawImage as Record<string, unknown>)['alt'] as string,
+        }
+      : null
+
+  const defaultDescription =
+    typeof d['defaultDescription'] === 'string' ? d['defaultDescription'] : ''
+
+  return { siteName, baseUrl, defaultOgImage, defaultDescription }
+})

package/dist/template/app/[[...slug]]/page.tsx

@@ -0,0 +1,123 @@
+// FROZEN — do not edit. Framework file managed by agntcms.
+//
+// Catch-all route that renders all content pages. Every URL that is not
+// handled by a more specific App Router segment falls here. The slug
+// segments are joined into a single path string and handed to the runtime,
+// which reads the page from the content adapter and returns it (or null
+// when the page does not exist).
+//
+// Reads from draft bucket when preview cookie is set, published otherwise.
+
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import { notFound } from 'next/navigation'
+import {
+  PageRenderer,
+  PreviewProvider,
+  PreviewToolbar,
+  SectionEditControls,
+} from '@agntcms/next/client'
+import { createRuntime } from '@agntcms/next/server'
+import config from '@/agntcms/config'
+import { getSiteMeta } from '@/agntcms/site-meta'
+
+// The runtime is constructed once per module load. createRuntime is
+// stateless — it holds no request-scoped data — so module-level
+// construction is safe and avoids rebuilding the adapter on every request.
+const runtime = createRuntime({ contentAdapter: config.contentAdapter })
+
+// SEO metadata is always derived from published content. Crawlers and link
+// previews should see canonical titles — draft changes only surface after
+// publish, which is the correct behaviour for search indexing.
+export async function generateMetadata({ params }: {
+  params: Promise<{ slug?: string[] }>
+}): Promise<Metadata> {
+  const { slug: slugParts } = await params
+  const slug = slugParts ? slugParts.join('/') : 'home'
+
+  const [page, siteMeta] = await Promise.all([
+    runtime.getContent({ slug, mode: 'published' }),
+    getSiteMeta(runtime.getGlobal),
+  ])
+
+  if (!page) return {}
+
+  const baseUrl = siteMeta.baseUrl ?? ''
+
+  // Canonical: page-level override wins; otherwise derive from base URL.
+  // For the "home" slug the canonical is the root path with no trailing slash.
+  const canonicalPath = slug === 'home' ? '' : `/${slug}`
+  const canonical = page.seo.canonical ?? (baseUrl ? `${baseUrl}${canonicalPath}` : undefined)
+
+  // OG image resolution order: page.seo.ogImage → page.coverImage →
+  // siteMeta.defaultOgImage → nothing.
+  const ogImageValue =
+    page.seo.ogImage ??
+    page.coverImage ??
+    siteMeta.defaultOgImage
+
+  // Resolve OG image to an absolute URL when a base URL is available.
+  // The framework stores images as plain filename strings under /assets/.
+  const ogImageUrl =
+    ogImageValue && baseUrl
+      ? `${baseUrl}/assets/${ogImageValue.filename}`
+      : undefined
+
+  const meta: Metadata = {
+    title: page.seo.title,
+    description: page.seo.description,
+    openGraph: {
+      title: page.seo.title,
+      description: page.seo.description,
+      type: 'website',
+      ...(ogImageUrl ? { images: [{ url: ogImageUrl, alt: ogImageValue?.alt ?? '' }] } : {}),
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: page.seo.title,
+      description: page.seo.description,
+      ...(ogImageUrl ? { images: [ogImageUrl] } : {}),
+    },
+  }
+
+  if (canonical) {
+    meta.alternates = { canonical }
+  }
+
+  return meta
+}
+
+export default async function CatchAllPage({
+  params,
+}: {
+  params: Promise<{ slug?: string[] }>
+}) {
+  const { slug: slugParts } = await params
+
+  // Root path (/) has no slug segments; map it to the "home" page slug.
+  // All other paths join their segments with "/" to form the page slug.
+  const slug = slugParts ? slugParts.join('/') : 'home'
+
+  const cookieStore = await cookies()
+  const isPreview = cookieStore.get('__agntcms_preview')?.value === '1'
+  const mode = isPreview ? 'preview' : 'published'
+
+  const page = await runtime.getContent({ slug, mode })
+  if (!page) notFound()
+
+  return (
+    <PreviewProvider mode={mode}>
+      {isPreview ? (
+        <div data-agntcms-page={slug}>
+          <SectionEditControls
+            page={page}
+            definitions={config.sections}
+          />
+        </div>
+      ) : (
+        <PageRenderer page={page} definitions={config.sections} />
+      )}
+      {isPreview && <PreviewToolbar definitions={config.sections} />}
+    </PreviewProvider>
+  )
+}