create-agntcms-app 0.2.1

package/dist/template/.claude-plugin/channel/server.ts

@@ -0,0 +1,369 @@
+// agntcms channel server.
+//
+// Shipped as part of the template's Claude Code plugin
+// (`.claude-plugin/channel/server.ts` + `.claude-plugin/plugin.json`),
+// not as a separate npm package. The wire protocol is identical to the
+// previous standalone `@agntcms/mcp-channel` package — only the
+// packaging changed (ARCHITECTURE.md §7, §11).
+//
+// Build/run model:
+//   - `server.ts` is the source of truth.
+//   - `server.mjs` (alongside this file) is the pre-built artefact and
+//     IS checked in. We pre-build to avoid an extra runtime dependency
+//     like `tsx`: the template ships `@modelcontextprotocol/sdk` as a
+//     regular dep, so `node .claude-plugin/channel/server.mjs` Just
+//     Works without additional installs.
+//   - Regenerate `server.mjs` with the build command in this directory.
+//
+// Two transports:
+//
+//   1. MCP over stdio (talking to Claude Code)
+//      - Declares `experimental: { 'claude/channel': {} }` so Claude Code
+//        delivers channel notifications as user turns in the agent loop.
+//      - Exposes `report_task_done` and `report_task_progress` tools the
+//        agent calls to report results back.
+//
+//   2. HTTP server on agntcms_CHANNEL_PORT (default 4819)
+//      - POST /task — Next.js dispatches tasks here; the server formats them
+//        as `notifications/claude/channel` and delivers to Claude Code.
+//      - GET /health — liveness check used by the AgentBridge's `start()`.
+//
+// Result flow: tool call → HTTP POST to callback URL → Next.js handler
+// applies the result to the task store.
+
+import { Server } from '@modelcontextprotocol/sdk/server/index.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import {
+  ListToolsRequestSchema,
+  CallToolRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js'
+import * as http from 'node:http'
+
+// ---------------------------------------------------------------------------
+// Configuration
+// ---------------------------------------------------------------------------
+
+const CHANNEL_PORT = Number(process.env['agntcms_CHANNEL_PORT'] ?? 4819)
+const DEFAULT_CALLBACK_URL =
+  process.env['agntcms_CALLBACK_URL'] ?? 'http://localhost:3000/api/agntcms/mcp'
+
+// ---------------------------------------------------------------------------
+// State: task_id → callback_url for routing tool results back
+// ---------------------------------------------------------------------------
+
+const taskCallbacks = new Map<string, string>()
+
+// ---------------------------------------------------------------------------
+// Instructions injected into Claude Code context
+// ---------------------------------------------------------------------------
+
+const INSTRUCTIONS = [
+  'Tasks from the agntcms runtime arrive as channel messages.',
+  'Each message starts with "task_assigned" followed by task_id, type, and payload fields.',
+  '',
+  'For every task_assigned message:',
+  '1. Parse the task_id, type, and payload.',
+  '2. Check your loaded skills for one that covers this task type',
+  '   (e.g. agntcms-section-replace for type=section_replace).',
+  '   If a skill matches, follow its workflow.',
+  '3. Carry out the work using your file tools.',
+  '4. Report completion by calling the report_task_done tool with the',
+  '   exact task_id and a short human-readable result.',
+  '5. For long-running tasks, call report_task_progress one or more times',
+  '   before report_task_done.',
+  '',
+  'Always call report_task_done, even on error — use a result starting',
+  'with "Error: " and a short reason. Never leave a task without a',
+  'report_task_done call.',
+  '',
+  'IMPORTANT: Never read image files (png, jpg, jpeg, gif, webp, svg, ico).',
+  'Image paths in content JSON are opaque strings — copy them as-is.',
+  'You only edit text: JSON content files, TypeScript config, Markdown.',
+].join('\n')
+
+// ---------------------------------------------------------------------------
+// MCP Server
+// ---------------------------------------------------------------------------
+
+const mcp = new Server(
+  { name: 'agntcms', version: '0.1.6' },
+  {
+    capabilities: {
+      tools: {},
+      experimental: {
+        'claude/channel': {},
+      },
+    },
+    instructions: INSTRUCTIONS,
+  },
+)
+
+// ---------------------------------------------------------------------------
+// MCP Tools
+// ---------------------------------------------------------------------------
+
+mcp.setRequestHandler(ListToolsRequestSchema, async () => ({
+  tools: [
+    {
+      name: 'report_task_done',
+      description:
+        'Report that an assigned task has been completed. Pass the task_id from the task_assigned message and a short human-readable result.',
+      inputSchema: {
+        type: 'object' as const,
+        properties: {
+          task_id: {
+            type: 'string',
+            description: 'The task_id from the task_assigned message',
+          },
+          result: {
+            type: 'string',
+            description: 'Short human-readable description of what was done',
+          },
+        },
+        required: ['task_id', 'result'],
+      },
+    },
+    {
+      name: 'report_task_progress',
+      description:
+        'Report incremental progress on a long-running task. Optional — only use for tasks that take more than a few seconds.',
+      inputSchema: {
+        type: 'object' as const,
+        properties: {
+          task_id: {
+            type: 'string',
+            description: 'The task_id from the task_assigned message',
+          },
+          message: {
+            type: 'string',
+            description: 'Short progress update',
+          },
+        },
+        required: ['task_id', 'message'],
+      },
+    },
+  ],
+}))
+
+const postCallback = async (
+  callbackUrl: string,
+  body: Record<string, unknown>,
+): Promise<void> => {
+  const res = await fetch(callbackUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!res.ok) {
+    throw new Error(`callback returned ${String(res.status)}`)
+  }
+}
+
+mcp.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name } = request.params
+  const args = (request.params.arguments ?? {}) as Record<string, unknown>
+
+  switch (name) {
+    case 'report_task_done': {
+      const taskId = String(args['task_id'] ?? '')
+      const result = String(args['result'] ?? '')
+      const callbackUrl = taskCallbacks.get(taskId) ?? DEFAULT_CALLBACK_URL
+
+      try {
+        await postCallback(callbackUrl, {
+          action: 'task_callback',
+          event: 'completed',
+          task_id: taskId,
+          result,
+        })
+        taskCallbacks.delete(taskId)
+        return { content: [{ type: 'text' as const, text: `acknowledged: ${taskId}` }] }
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        return {
+          content: [{ type: 'text' as const, text: `callback failed: ${msg}` }],
+          isError: true,
+        }
+      }
+    }
+
+    case 'report_task_progress': {
+      const taskId = String(args['task_id'] ?? '')
+      const message = String(args['message'] ?? '')
+      const callbackUrl = taskCallbacks.get(taskId) ?? DEFAULT_CALLBACK_URL
+
+      try {
+        await postCallback(callbackUrl, {
+          action: 'task_callback',
+          event: 'progress',
+          task_id: taskId,
+          message,
+        })
+        return { content: [{ type: 'text' as const, text: `progress recorded for ${taskId}` }] }
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        return {
+          content: [{ type: 'text' as const, text: `callback failed: ${msg}` }],
+          isError: true,
+        }
+      }
+    }
+
+    default:
+      return {
+        content: [{ type: 'text' as const, text: `unknown tool: ${name}` }],
+        isError: true,
+      }
+  }
+})
+
+// ---------------------------------------------------------------------------
+// Task text formatting (mirrors the contract in section-replace SKILL.md)
+// ---------------------------------------------------------------------------
+
+const buildTaskAssignedText = (
+  taskId: string,
+  type: string,
+  payload: unknown,
+): string => {
+  const payloadJson = (() => {
+    try {
+      return JSON.stringify(payload)
+    } catch {
+      return '"<unserializable payload>"'
+    }
+  })()
+  return [
+    'task_assigned',
+    `task_id=${taskId}`,
+    `type=${type}`,
+    `payload=${payloadJson}`,
+    '',
+    'Carry out the task and then call report_task_done with the task_id above.',
+  ].join('\n')
+}
+
+// ---------------------------------------------------------------------------
+// HTTP Server
+// ---------------------------------------------------------------------------
+
+const readBody = async (req: http.IncomingMessage): Promise<string> => {
+  const chunks: Buffer[] = []
+  for await (const chunk of req) {
+    chunks.push(chunk as Buffer)
+  }
+  return Buffer.concat(chunks).toString('utf-8')
+}
+
+const jsonResponse = (
+  res: http.ServerResponse,
+  status: number,
+  body: unknown,
+): void => {
+  res.writeHead(status, { 'Content-Type': 'application/json' })
+  res.end(JSON.stringify(body))
+}
+
+const httpServer = http.createServer((req, res) => {
+  if (req.method === 'GET' && req.url === '/health') {
+    jsonResponse(res, 200, { status: 'ok' })
+    return
+  }
+
+  if (req.method === 'POST' && req.url === '/task') {
+    readBody(req)
+      .then((raw) => {
+        let parsed: Record<string, unknown>
+        try {
+          parsed = JSON.parse(raw) as Record<string, unknown>
+        } catch {
+          jsonResponse(res, 400, { error: 'invalid_json' })
+          return
+        }
+
+        const taskId = parsed['task_id']
+        const type = parsed['type']
+        const payload = parsed['payload']
+        const callbackUrl = parsed['callback_url']
+
+        if (typeof taskId !== 'string' || taskId === '') {
+          jsonResponse(res, 400, {
+            error: 'missing_field',
+            message: 'task_id is required',
+          })
+          return
+        }
+        if (typeof type !== 'string' || type === '') {
+          jsonResponse(res, 400, {
+            error: 'missing_field',
+            message: 'type is required',
+          })
+          return
+        }
+
+        const resolvedCallback =
+          typeof callbackUrl === 'string' && callbackUrl !== ''
+            ? callbackUrl
+            : DEFAULT_CALLBACK_URL
+
+        taskCallbacks.set(taskId, resolvedCallback)
+
+        const content = buildTaskAssignedText(taskId, type, payload)
+
+        mcp
+          .notification({
+            method: 'notifications/claude/channel',
+            params: { content, meta: { task_id: taskId, type } },
+          })
+          .then(() => {
+            jsonResponse(res, 200, { ok: true, task_id: taskId })
+          })
+          .catch((err: unknown) => {
+            taskCallbacks.delete(taskId)
+            const msg = err instanceof Error ? err.message : String(err)
+            jsonResponse(res, 502, {
+              error: 'notification_failed',
+              message: msg,
+            })
+          })
+      })
+      .catch(() => {
+        jsonResponse(res, 500, { error: 'internal' })
+      })
+    return
+  }
+
+  jsonResponse(res, 404, { error: 'not_found' })
+})
+
+// ---------------------------------------------------------------------------
+// Exports for testing (the module is also runnable as a script)
+// ---------------------------------------------------------------------------
+
+export { mcp, httpServer, taskCallbacks, buildTaskAssignedText, INSTRUCTIONS }
+
+// ---------------------------------------------------------------------------
+// Main — only runs when executed directly, not when imported by tests
+// ---------------------------------------------------------------------------
+
+const isDirectRun =
+  process.argv[1] !== undefined &&
+  (process.argv[1].endsWith('/server.mjs') ||
+    process.argv[1].endsWith('/server.js') ||
+    process.argv[1].endsWith('/server.ts'))
+
+if (isDirectRun) {
+  const transport = new StdioServerTransport()
+  mcp.connect(transport)
+    .then(() => {
+      httpServer.listen(CHANNEL_PORT, '127.0.0.1', () => {
+        process.stderr.write(
+          `agntcms channel server listening on 127.0.0.1:${String(CHANNEL_PORT)}\n`,
+        )
+      })
+    })
+    .catch((err: unknown) => {
+      process.stderr.write(`agntcms channel server fatal: ${String(err)}\n`)
+      process.exit(1)
+    })
+}

package/dist/template/.claude-plugin/plugin.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
+  "name": "agntcms",
+  "version": "0.1.0",
+  "description": "agntcms channel: pushes UI-initiated tasks from the Next.js dev server into the Claude Code session.",
+  "mcpServers": {
+    "agntcms": {
+      "command": "node",
+      "args": ["${CLAUDE_PLUGIN_ROOT}/channel/server.mjs"]
+    }
+  },
+  "channels": [
+    {
+      "server": "agntcms"
+    }
+  ]
+}

package/dist/template/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "agntcms": {
+      "command": "node",
+      "args": [".claude-plugin/channel/server.mjs"]
+    }
+  }
+}

package/dist/template/BRAND.md

@@ -0,0 +1,49 @@
+# agntcms — Brand Guide
+
+This is the brand and design guide for the demo content shipped with
+this template. When `/agntcms-init` runs against a real Claude Design
+bundle, this file is rewritten to point at that bundle. Until then,
+these rules describe the in-tree demo.
+
+## Source of truth
+
+- Tokens live verbatim in `styles/theme.css` (in the `:root` block at
+  the top of the file). They are consumed via Tailwind utility classes
+  through the `@theme` block — utilities such as `bg-paper`,
+  `text-ink`, `text-ink-2`, `text-ink-3`, `border-hairline`,
+  `font-display`, `font-mono` all resolve through these tokens.
+  Running `grep -rE '#[0-9a-fA-F]{3,6}' styles/ agntcms/sections/`
+  should match only token definition lines or SVG markup.
+- Page copy and section ordering live in `content/pages/<slug>.json`
+  and `content/globals/*.json`. The JSON is the content source —
+  never inline a layout into a page component.
+- Every visible block becomes a registered agntcms section under
+  `agntcms/sections/<Name>/` with two-line registration in
+  `agntcms/config.ts`. If a needed block has no matching section
+  type, stop and run `/agntcms-section-new`.
+
+## Accent policy
+
+Monochrome by default — paper + ink. The brand still owns Electric
+Teal (`var(--teal)`, `#2DD4BF`), but the design system does not apply
+it anywhere automatically. Tokens for `--teal`, `--teal-ink`,
+`--teal-tint`, `--teal-deep`, and `--caret` are defined; they are
+inert unless a component references them by name.
+
+The one exception is the wordmark caret — the 7×14px blinking block
+cursor after `agntcms`. That is the only place teal ships on by
+default. Everything else (eyebrows, link decoration, focus rings,
+hover states, pill dots) is ink — `--ink`, `--ink-2`, `--ink-3`. Never
+teal.
+
+## Tone
+
+Developer-to-developer, senior, unsentimental. Short sentences.
+Concrete numbers over adjectives. No buzzwords (banned:
+*seamless, robust, leverage, synergy, blazingly, cutting-edge,
+revolutionary, unleash, empower, journey, ecosystem*; `AI-powered`
+as a bare phrase is banned — say what the AI actually does). No
+emoji in marketing copy. Sentence case for everything except product
+names.
+
+Frozen zone is off-limits throughout (see `CLAUDE.md`).

package/dist/template/CLAUDE.md

@@ -0,0 +1,157 @@
+# agntcms
+
+This is an agntcms project. You assist the developer — you can work with code,
+sections, configuration, and content.
+
+## First time here?
+
+This template ships with the agntcms demo (brand, home page, blog posts about agntcms
+itself). To turn it into your own project, run `/agntcms-init` and provide a Claude Design
+bundle — either a URL from `claude.ai/design` or a local extracted directory. The skill
+wipes the demo, places the bundle under `design/<bundle-name>/`, reads the bundle end-to-end
+(chats, primary file, all imports), migrates tokens from `colors_and_type.css` into
+`styles/theme.css` verbatim, creates and registers every section type the bundle requires,
+populates `content/pages/<slug>.json` for every content page with copy lifted verbatim from
+the mocks, updates the globals (header, footer, optional announcement) from the mock header
+and footer, and writes `BRAND.md` pointing at the bundle. All steps run to completion in one
+pass before reporting done.
+
+## Skill-check protocol
+
+This protocol applies before every non-trivial step — not just at the start of a task, but
+before each individual operation within a task.
+
+**Triggers that require a skill check:**
+
+- Editing any file in `content/` (page data, drafts, version history)
+- Creating, deleting, or renaming a page
+- Creating, editing, replacing, reordering, or deleting a section
+- Publishing or unpublishing a page, or rolling back to a previous version
+- Renaming a page slug
+- Editing site-wide globals (header, footer, announcement bar)
+- Any operation inside the frozen zone (even to inspect or recover it)
+- Initializing a new project from a Claude Design bundle
+- Any task arriving via the channel from the UI
+
+**The gate rule:** Before calling Read, Edit, or Write on any file in `content/`,
+`agntcms/sections/`, or responding to a task from the UI — state aloud which skill
+covers the operation and load it. If no skill covers the operation, say explicitly why
+before proceeding.
+
+**No shortcuts.** Even if the task looks trivial ("just change the heading"), check the
+list first. `agntcms-text-edit` covers text field changes, `agntcms-section-edit`
+covers section-level edits, `agntcms-page-edit` covers page-wide changes. Skipping
+the skill check is not permitted even when the answer seems obvious.
+
+## Workflow
+
+Skills are a gate, not a suggestion. No action without a skill check first.
+
+1. **Skill check (gate).** Before doing anything: scan the skill list below, identify
+   which skill covers the next operation, and load it. If the operation is covered,
+   follow the skill's instructions exactly. Do not read project files, run commands,
+   or make edits until the relevant skill is loaded.
+2. **Read project files only if needed.** If no skill covers the task, or if the
+   skill leaves gaps, then explore the codebase — start with `agntcms/config.ts`
+   (section types and adapters).
+3. **Brand before design.** Before any design, styling, or copy work, read
+   `BRAND.md` (design direction, tone, visual intent) and `styles/theme.css`
+   (design tokens). Use Tailwind utility classes that reference theme tokens.
+   Never hardcode hex values or use inline style objects.
+   If a Claude Design bundle has been set up, `BRAND.md` will point to it
+   under `design/<bundle-name>/`. Read `design/<bundle-name>/README.md`
+   end-to-end for preview cards, prototype kits, asset sources, and
+   iconography detail. If the bundle ever contradicts `BRAND.md`, `BRAND.md` wins.
+
+## Hard rules
+
+1. **Skills first.** Load the relevant skill before touching any content file,
+   section file, or frozen file. This is not optional and has no exceptions.
+2. **Never modify frozen zone files.** If a frozen file looks wrong, load
+   `agntcms-frozen-guard` and follow its recovery instructions. Do not attempt
+   to repair it manually.
+3. **Section registration is always explicit.** Create the folder under
+   `agntcms/sections/`, then add two lines to `agntcms/config.ts`. No codegen,
+   no folder scanning.
+4. **Content edits go through `content/` JSON files** using native file tools.
+   Always follow the skill workflow — skills encode the correct draft/publish
+   sequence and prevent silent data loss.
+
+## Project zones
+
+**Frozen zone** — framework-owned, do not modify:
+`app/api/agntcms/`, `app/[[...slug]]/`, `app/not-found.tsx`, `app/admin/`, `app/sitemap.ts`,
+`app/robots.ts`, `.claude/`, `.claude-plugin/`
+
+**User zone** — section definitions and framework config:
+`agntcms/config.ts`, `agntcms/sections/`
+
+**Content zone** — page data, drafts, version history:
+`content/` (managed by the content-editor subagent)
+
+**Assets** — content-addressed image files:
+`public/assets/` (filenames are SHA-256 hashes — do not rename them)
+
+**Styles zone** — design tokens and Tailwind theme:
+`styles/globals.css`, `styles/theme.css`, `styles/typography.css`
+
+## Developer skills
+
+These skills are your primary reference. Check this list before every operation.
+Skills are installed in `.claude/skills/` and loaded with the `/` command.
+
+**Project setup**
+- `agntcms-init` — first-run setup: wipe the demo, acquire a Claude Design bundle, migrate tokens, create sections, populate every content page, update globals, write BRAND.md
+- `agntcms-structure` — canonical project layout and zone rules
+
+**Section development**
+- `agntcms-sections` — two-step workflow for creating and registering a section
+- `agntcms-section-new` — scaffold a new section from a name and field list (folder, schema, component, config registration)
+- `agntcms-section-validate` — validate section structure and config registration
+- `agntcms-section-replace` — handle section-replace tasks from the UI
+
+**Content operations**
+- `agntcms-content-fs` — edit content through native file tools (FS adapter); covers the draft/publish file layout
+- `agntcms-text-edit` — apply free-form instructions to a single text or markdown field
+- `agntcms-section-edit` — apply free-form instructions to a whole section (type unchanged)
+- `agntcms-page-edit` — apply free-form instructions across every section of a page
+- `agntcms-page-create-brief` — read a free-form brief, plan a section sequence, build a populated draft, return a preview URL
+
+**Page lifecycle**
+- `agntcms-create-page` — create an empty page draft and return a preview URL
+- `agntcms-delete-page` — delete a published page after explicit editor confirmation
+- `agntcms-publish-draft` — publish a draft via the framework endpoint; never move files manually
+- `agntcms-unpublish-page` — take a published page offline while preserving content as a draft
+- `agntcms-rollback` — roll a published page back to a previous version snapshot
+- `agntcms-rename-slug` — atomically rename a page slug across pages, drafts, and history
+- `agntcms-reorder-sections` — reorder sections within a draft page with disambiguation support
+
+**Site-wide content**
+- `agntcms-globals` — site-wide content blocks (header, footer, announcement bar) rendered via GlobalSlot
+
+**Infrastructure**
+- `agntcms-frozen-guard` — detect and recover from frozen-file drift
+- `agntcms-git-publish` — commit conventions for agent-driven edits
+
+## Content editing
+
+Content operations — creating pages, editing content, publishing drafts, renaming slugs,
+reordering sections, rollback — are handled through the skills listed above. Load the
+relevant skill before acting. Use your native file tools to read and write JSON files
+in `content/` — that is the authoritative content store. Never call MCP CRUD tools for
+content; there are none.
+
+When reporting a content change to the user, include the preview URL so they can verify
+the result in the admin panel.
+
+## Debugging discipline
+
+- **Hypothesis before fix.** Before changing code to fix a visual or functional
+  bug, state one explicit hypothesis — which CSS property, which component,
+  which field schema — and verify it (read the code, inspect devtools, open the
+  preview URL). Do not try CSS properties "just to see" — that is how three
+  wrong fixes land before the real one.
+- **Verify before explore.** When asked "check that X matches Y" (styles vs.
+  `BRAND.md`, config registry vs. `agntcms/sections/` folder, etc.), diff
+  first. If it already matches, stop and report "aligned, no changes needed".
+  Do not open unrelated files or propose refactors.

package/dist/template/agntcms/config.ts

@@ -0,0 +1,49 @@
+// USER ZONE — section + global registry for this project.
+
+import { defineConfig } from '@agntcms/next/config'
+
+import { Hero } from './sections/Hero'
+import { LogoStrip } from './sections/LogoStrip'
+import { TabbedFeatures } from './sections/TabbedFeatures'
+import { FeatureGrid } from './sections/FeatureGrid'
+import { ImageText } from './sections/ImageText'
+import { Newsletter } from './sections/Newsletter'
+import { FeaturedArticles } from './sections/FeaturedArticles'
+import { Banner } from './sections/Banner'
+import { Testimonials } from './sections/Testimonials'
+import { CaseStudies } from './sections/CaseStudies'
+import { TeamGrid } from './sections/TeamGrid'
+import { PricingPlans } from './sections/PricingPlans'
+import { FAQ } from './sections/FAQ'
+import { ContactForm } from './sections/ContactForm'
+import { BlogIndexHeader } from './sections/BlogIndexHeader'
+import { ArticleHero } from './sections/ArticleHero'
+import { ArticleBody } from './sections/ArticleBody'
+import { SiteHeader } from './sections/SiteHeader'
+import { SiteFooter } from './sections/SiteFooter'
+import { SiteMeta } from './sections/SiteMeta'
+
+export default defineConfig({
+  sections: [
+    Hero,
+    LogoStrip,
+    TabbedFeatures,
+    FeatureGrid,
+    ImageText,
+    Newsletter,
+    FeaturedArticles,
+    Banner,
+    Testimonials,
+    CaseStudies,
+    TeamGrid,
+    PricingPlans,
+    FAQ,
+    ContactForm,
+    BlogIndexHeader,
+    ArticleHero,
+    ArticleBody,
+    SiteHeader,
+    SiteFooter,
+    SiteMeta,
+  ],
+})

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

@@ -0,0 +1,32 @@
+'use client'
+
+import { EditableRichText } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+
+interface Props {
+  readonly body: EditableSlot<'richText', string>
+}
+
+export function ArticleBodyComponent({ body }: Props) {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[720px] px-8 py-12">
+        <EditableRichText
+          field={body}
+          className="
+            [&_p]:m-0 [&_p]:mt-4 [&_p]:text-[18px] [&_p]:leading-[1.75] [&_p]:text-ink-2
+            [&_h2]:m-0 [&_h2]:mt-10 [&_h2]:mb-4 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:text-[32px] [&_h2]:leading-[1.15] [&_h2]:tracking-[-0.02em]
+            [&_h3]:m-0 [&_h3]:mt-8 [&_h3]:mb-3 [&_h3]:font-display [&_h3]:font-semibold [&_h3]:text-ink [&_h3]:text-[24px] [&_h3]:leading-[1.2] [&_h3]:tracking-[-0.015em]
+            [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:text-ink-2
+            [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:text-ink-2
+            [&_li]:my-1.5 [&_li]:text-[18px] [&_li]:leading-[1.65] [&_li]:text-ink-2
+            [&_blockquote]:my-8 [&_blockquote]:border-l-2 [&_blockquote]:border-ink [&_blockquote]:pl-6 [&_blockquote]:text-[22px] [&_blockquote]:italic [&_blockquote]:leading-[1.5] [&_blockquote]:text-ink
+            [&_a]:text-ink [&_a]:underline [&_a]:underline-offset-4
+            [&_strong]:font-semibold [&_strong]:text-ink
+            [&_code]:rounded-sm [&_code]:bg-paper-3 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[14px] [&_code]:text-ink
+          "
+        />
+      </div>
+    </section>
+  )
+}