create-agntcms-app 0.2.1

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

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

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

@@ -0,0 +1,33 @@
+import { LinkField, ListField } from '@agntcms/next'
+
+export const schema = {
+  // Sidebar nav: groups of links shared across all docs pages.
+  sidebar: ListField({
+    title: { kind: 'richText' as const, default: 'Getting started' },
+    items: ListField({
+      label: { kind: 'richText' as const, default: 'Quick start' },
+      href: { kind: 'text' as const, default: '/docs/quick-start' },
+      active: { kind: 'boolean' as const, default: false },
+    }),
+  }),
+
+  // Page header.
+  eyebrow: { kind: 'richText' as const, default: 'Getting started' },
+  title: { kind: 'richText' as const, default: '# Quick start' },
+  lead: {
+    kind: 'richText' as const,
+    default: 'Spin up an agntcms project and ship your first page in under five minutes.',
+  },
+
+  // Main article — markdown. Headings (##, ###) become anchored sections;
+  // the right-hand TOC is built from them at runtime.
+  body: {
+    kind: 'richText' as const,
+    default:
+      '## Install\n\nRun the create command in an empty directory:\n\n```bash\nnpx create-agntcms@latest\n```\n',
+  },
+
+  // Bottom prev/next links.
+  prev: LinkField,
+  next: LinkField,
+}

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

@@ -0,0 +1,57 @@
+'use client'
+
+import { EditableRichText, EditableList } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type FaqItem = 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<FaqItem>>
+}
+
+export function FAQComponent({ eyebrow, headline, lead, entries }: Props) {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[720px] 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]: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 [&_p]:text-[18px] [&_p]:leading-[1.55] [&_p]:text-ink-2 [&_p]:m-0"
+        />
+        <EditableList
+          field={entries}
+          itemSchema={schema.entries.itemSchema}
+          className="mt-8 border-t border-hairline"
+          renderItem={(q) => (
+            <details className="group border-b border-hairline py-5">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-4">
+                <EditableRichText
+                  field={q.question}
+                  as="span"
+                  className="[&_p]:m-0 [&_p]:text-[17px] [&_p]:font-medium [&_p]:tracking-[-0.01em] [&_p]:text-ink"
+                />
+                <span className="font-mono text-ink-3 group-open:rotate-45 transition-transform">
+                  +
+                </span>
+              </summary>
+              <EditableRichText
+                field={q.answer}
+                className="mt-3 max-w-[620px] [&_p]:m-0 [&_p]:text-[15.5px] [&_p]:leading-[1.6] [&_p]:text-ink-3 [&_p+p]:mt-3"
+              />
+            </details>
+          )}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,11 @@
+import { RichTextField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  entries: ListField({
+    question: RichTextField,
+    answer: RichTextField,
+  }),
+}

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

@@ -0,0 +1,117 @@
+'use client'
+
+import {
+  EditableRichText,
+  EditableText,
+  EditableLink,
+  EditableList,
+  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 Card = SlotItem<typeof schema.cards.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly columns: EditableSlot<'text', string>
+  readonly variant: EditableSlot<'text', string>
+  readonly cards: EditableSlot<'list', ReadonlyArray<Card>>
+  readonly footerCta: EditableSlot<'link', LinkValue>
+}
+
+export function FeatureGridComponent({
+  eyebrow,
+  headline,
+  lead,
+  columns,
+  variant,
+  cards,
+  footerCta,
+}: Props) {
+  const cols = read(columns) === '4' ? 4 : 3
+  const kind = read(variant) || 'icon'
+  const colClass = cols === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
+  const cta = read(footerCta)
+  const ctaHref = hrefOf(cta)
+  const showCta = Boolean(ctaHref) || isSlotInPreview(footerCta)
+
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-24">
+        <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={cards}
+          itemSchema={schema.cards.itemSchema}
+          className={`mt-14 grid grid-cols-1 ${colClass}`}
+          renderItem={(card) => (
+            <div className="flex h-full flex-col gap-3 border border-hairline -ml-px -mt-px p-7">
+              {kind === 'icon' ? (
+                <div
+                  className="h-9 w-9 text-ink-2 [&_svg]:h-[22px] [&_svg]:w-[22px]"
+                  dangerouslySetInnerHTML={{ __html: read(card.iconSvg) || '' }}
+                />
+              ) : null}
+              {kind === 'stat' ? (
+                <EditableText
+                  field={card.stat}
+                  as="div"
+                  className="font-display text-[48px] font-semibold leading-none tracking-[-0.03em] text-ink"
+                />
+              ) : null}
+              {kind === 'step' ? (
+                <EditableText
+                  field={card.stat}
+                  as="div"
+                  className="font-mono text-[12px] font-medium tracking-[0.07em] uppercase text-ink-3"
+                />
+              ) : null}
+              <EditableText
+                field={card.label}
+                as="h4"
+                className="m-0 text-[19px] font-semibold tracking-[-0.015em] text-ink"
+              />
+              <EditableRichText
+                field={card.body}
+                className="[&_p]:m-0 [&_p]:text-[14.5px] [&_p]:leading-[1.6] [&_p]:text-ink-3 [&_p+p]:mt-2"
+              />
+            </div>
+          )}
+        />
+
+        {showCta && (
+          <div className="mt-10 text-center">
+            <a
+              href={ctaHref || '#'}
+              target={isExternalLink(cta) ? '_blank' : undefined}
+              rel={isExternalLink(cta) ? 'noreferrer' : undefined}
+            >
+              <EditableLink
+                field={footerCta}
+                className="inline-flex items-center gap-2 rounded-sm border border-hairline-2 bg-transparent px-[22px] py-[13px] text-[15px] font-medium text-ink no-underline hover:border-ink"
+              />
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,21 @@
+import { RichTextField, TextField, LinkField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  // "3" | "4"
+  columns: TextField,
+  // "icon" | "stat" | "step" — controls visual emphasis of each card
+  variant: TextField,
+  cards: ListField({
+    // Inline SVG markup as a raw string. Not inline-editable; intended to be
+    // populated from a curated icon set. Rendered via dangerouslySetInnerHTML
+    // so currentColor and stroke utilities work.
+    iconSvg: TextField,
+    stat: TextField,
+    label: TextField,
+    body: RichTextField,
+  }),
+  footerCta: LinkField,
+}

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

@@ -0,0 +1,99 @@
+'use client'
+
+import {
+  EditableRichText,
+  EditableText,
+  EditableImage,
+  EditableList,
+  read,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import { schema } from './schema'
+
+type Article = SlotItem<typeof schema.articles.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly columns: EditableSlot<'text', string>
+  readonly articles: EditableSlot<'list', ReadonlyArray<Article>>
+}
+
+export function FeaturedArticlesComponent({
+  eyebrow,
+  headline,
+  lead,
+  columns,
+  articles,
+}: Props) {
+  const cols = read(columns) === '4' ? 4 : 3
+  const colClass = cols === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
+
+  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={articles}
+          itemSchema={schema.articles.itemSchema}
+          className={`mt-12 grid grid-cols-1 border-t border-hairline ${colClass}`}
+          renderItem={(a) => {
+            const link = read(a.link)
+            const href = hrefOf(link) || '#'
+            return (
+              <a
+                href={href}
+                target={isExternalLink(link) ? '_blank' : undefined}
+                rel={isExternalLink(link) ? 'noreferrer' : undefined}
+                className="block border-b border-r border-hairline -mr-px last:mr-0"
+              >
+                <div className="aspect-[3/2] overflow-hidden border-b border-hairline bg-paper-2">
+                  <EditableImage
+                    field={a.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={a.category}
+                    as="span"
+                    className="font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-3"
+                  />
+                  <EditableText
+                    field={a.title}
+                    as="h4"
+                    className="mt-2.5 mb-2 text-[19px] font-semibold leading-[1.3] tracking-[-0.015em] text-ink"
+                  />
+                  <EditableRichText
+                    field={a.excerpt}
+                    className="[&_p]:m-0 [&_p]:text-[14px] [&_p]:leading-[1.55] [&_p]:text-ink-3"
+                  />
+                  <EditableText
+                    field={a.meta}
+                    as="div"
+                    className="mt-3.5 font-mono text-[11px] tracking-[0.07em] uppercase text-ink-3"
+                  />
+                </div>
+              </a>
+            )
+          }}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,17 @@
+import { RichTextField, TextField, LinkField, ImageField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  // "3" | "4"
+  columns: TextField,
+  articles: ListField({
+    image: ImageField,
+    category: TextField,
+    title: TextField,
+    excerpt: RichTextField,
+    meta: TextField,
+    link: LinkField,
+  }),
+}

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

@@ -0,0 +1,116 @@
+'use client'
+
+import { useState } from 'react'
+import { EditableLink, EditableRichText, read } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { LinkValue } from '@agntcms/next'
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly intro: EditableSlot<'richText', string>
+  readonly command: EditableSlot<'richText', string>
+  readonly meta: EditableSlot<'richText', string>
+  readonly primaryCta: EditableSlot<'link', LinkValue>
+  readonly secondaryCta: EditableSlot<'link', LinkValue>
+}
+
+export function GettingStartedComponent({ eyebrow, headline, intro, command, meta, primaryCta: rawPrimary, secondaryCta: rawSecondary }: Props) {
+  const primaryCta = read(rawPrimary)
+  const secondaryCta = read(rawSecondary)
+  const [copied, setCopied] = useState(false)
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(read(command))
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      /* clipboard unavailable — silently ignore */
+    }
+  }
+  return (
+    <section id="start" 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"
+        />
+
+        <div className="relative bg-bg-brand-primary border-[0.5px] border-border-primary rounded-xl px-7 py-6 mb-5">
+          <button
+            type="button"
+            onClick={handleCopy}
+            aria-label="Copy command"
+            className="absolute top-3 right-3 inline-flex items-center gap-1.5 font-mono text-[11px] tracking-[0.06em] uppercase text-text-secondary hover:text-text-primary bg-transparent border-[0.5px] border-border-primary rounded-sm px-2 py-1 cursor-pointer transition-colors"
+          >
+            {copied ? (
+              <>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+                <span>copied</span>
+              </>
+            ) : (
+              <>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                <span>copy</span>
+              </>
+            )}
+          </button>
+          <div className="flex items-center gap-3 flex-wrap pr-20">
+            <span className="font-mono text-text-brand-primary text-[16px] opacity-60">$</span>
+            <EditableRichText
+              field={command}
+              as="code"
+              className="font-mono text-[16px] text-text-brand-primary bg-transparent p-0 flex-1 min-w-0 break-all"
+            />
+          </div>
+          <EditableRichText
+            field={meta}
+            className="prose mt-4 [&_p]:text-[13px] [&_p]:text-text-secondary [&_p]:font-mono [&_p]:m-0"
+          />
+        </div>
+
+        <div className="flex gap-2.5 flex-wrap">
+          {hrefOf(primaryCta) && (
+            <a
+              href={hrefOf(primaryCta)}
+              target={isExternalLink(primaryCta) ? '_blank' : undefined}
+              rel={isExternalLink(primaryCta) ? 'noreferrer' : undefined}
+              className="inline-flex items-center gap-2 bg-transparent text-text-primary border-[0.5px] border-border-primary rounded-sm text-[13px] font-medium px-4 py-2 no-underline hover:bg-bg-secondary transition-colors"
+            >
+              <EditableLink field={rawPrimary} className="no-underline" />
+              <span aria-hidden="true">→</span>
+            </a>
+          )}
+          {hrefOf(secondaryCta) && (
+            <a
+              href={hrefOf(secondaryCta)}
+              target={isExternalLink(secondaryCta) ? '_blank' : undefined}
+              rel={isExternalLink(secondaryCta) ? 'noreferrer' : undefined}
+              className="inline-flex items-center gap-2 bg-transparent text-text-primary border-[0.5px] border-border-primary rounded-sm text-[13px] font-medium px-4 py-2 no-underline hover:bg-bg-secondary transition-colors"
+            >
+              <EditableLink field={rawSecondary} className="no-underline" />
+              <span aria-hidden="true">↗</span>
+            </a>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,11 @@
+import { RichTextField, LinkField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  intro: RichTextField,
+  command: RichTextField,
+  meta: RichTextField,
+  primaryCta: LinkField,
+  secondaryCta: LinkField,
+}