create-prenta 1.3.0

package/dist/templates/marketing-custom.js

@@ -0,0 +1,814 @@
+/** True when the project opted into the marketing-custom starter. */
+export function isMarketingCustom(options) {
+    return options.template === 'marketing-custom';
+}
+/** Extra package.json scripts for the component-blocks workflow. */
+export const MARKETING_CUSTOM_SCRIPTS = {
+    'blocks:extract': 'prenta-component-blocks extract --root ./src/blocks --out ./prenta-blocks.json',
+    'blocks:diff': 'prenta-component-blocks extract --root ./src/blocks --out ./.prenta-blocks.next.json && prenta-component-blocks diff ./prenta-blocks.json ./.prenta-blocks.next.json',
+    'verify:sections': 'node scripts/verify-sections.mjs',
+};
+/** Extra `.gitignore` entries (the throwaway manifest `blocks:diff` writes). */
+export const MARKETING_CUSTOM_GITIGNORE = ['.prenta-blocks.next.json'];
+/**
+ * Files emitted for the marketing-custom template, keyed by project-relative
+ * POSIX path. The scaffolder creates parent dirs and writes each entry.
+ */
+export function marketingCustomFiles() {
+    return {
+        'src/blocks/Pricing.tsx': pricingComponent(),
+        'src/sections/types.ts': sectionTypesModule('flat'),
+        'src/sections/register.tsx': sectionRegisterModule('flat'),
+        'prenta.seed.json': marketingSeedJson(),
+        'scripts/verify-sections.mjs': verifySectionsScript('flat'),
+        'SECTIONS.md': sectionsDoc('flat'),
+        '.cursor/skills/prenta-add-section/SKILL.md': addSectionSkill('flat'),
+    };
+}
+/**
+ * Files for the shared section kit in an astro-split **pnpm workspace**
+ * scaffold, keyed by project-root-relative POSIX path.
+ *
+ * The kit is the single source of truth for the three-layer section contract:
+ *   1. schema (`packages/sections/src/types.ts`) → `apps/cms/prenta.config.ts`
+ *   2. ONE renderer map (`packages/sections/src/register.tsx`) → admin canvas
+ *      (`<AdminRoot sectionRenderers>`) **and** the Astro public site
+ *      (side-effect import in `PageSections.tsx` → `<Sections>`)
+ *   3. `verify:sections` keeps schema ids and renderer keys in lockstep.
+ *
+ * The package ships raw TypeScript source: Next compiles it via
+ * `transpilePackages`, and Vite/Astro processes linked workspace deps natively.
+ */
+export function workspaceSectionKitFiles(opts) {
+    const v = (pkg) => opts.versions[pkg] ?? '^0.1.0';
+    const packageJson = {
+        name: opts.packageName,
+        version: '0.1.0',
+        private: true,
+        type: 'module',
+        // Raw-TS exports: consumers compile this package themselves (Next via
+        // transpilePackages, Astro/Vite via linked-dependency processing).
+        exports: {
+            '.': './src/index.ts',
+            './types': './src/types.ts',
+            './register': './src/register.tsx',
+        },
+        scripts: {
+            'blocks:extract': 'prenta-component-blocks extract --root ./src/blocks --out ./prenta-blocks.json',
+            'blocks:diff': 'prenta-component-blocks extract --root ./src/blocks --out ./.prenta-blocks.next.json && prenta-component-blocks diff ./prenta-blocks.json ./.prenta-blocks.next.json',
+            'verify:sections': 'node scripts/verify-sections.mjs',
+            // Canvas (AdminRoot) ↔ public (Astro <Sections>) fidelity for this kit.
+            'test:parity': 'vitest run',
+        },
+        dependencies: {
+            '@prenta/sections-react': v('@prenta/sections-react'),
+        },
+        peerDependencies: {
+            react: '^19.0.0',
+        },
+        devDependencies: {
+            // Type-only imports (AdminSectionRendererMap / CustomSectionTypeInput)
+            // plus the component-blocks CLI used by blocks:extract / blocks:diff.
+            '@prenta/admin': v('@prenta/admin'),
+            '@prenta/core': v('@prenta/core'),
+            '@prenta/component-blocks': v('@prenta/component-blocks'),
+            '@types/react': '^19.0.0',
+            '@types/react-dom': '^19.0.0',
+            react: '^19.0.0',
+            'react-dom': '^19.0.0',
+            typescript: '^5.7.0',
+            vitest: '^3.0.0',
+        },
+    };
+    const tsconfig = {
+        compilerOptions: {
+            target: 'ES2022',
+            lib: ['dom', 'dom.iterable', 'esnext'],
+            module: 'esnext',
+            moduleResolution: 'bundler',
+            jsx: 'react-jsx',
+            strict: true,
+            noEmit: true,
+            skipLibCheck: true,
+            isolatedModules: true,
+            esModuleInterop: true,
+        },
+        include: ['src'],
+    };
+    const vitestConfig = `import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: { environment: 'node' },
+  esbuild: { jsx: 'automatic' },
+});
+`;
+    return {
+        'packages/sections/package.json': `${JSON.stringify(packageJson, null, 2)}\n`,
+        'packages/sections/tsconfig.json': `${JSON.stringify(tsconfig, null, 2)}\n`,
+        'packages/sections/vitest.config.ts': vitestConfig,
+        'packages/sections/src/index.ts': `export { marketingSectionTypes } from './types';
+export { sectionRenderers } from './register';
+`,
+        'packages/sections/src/types.ts': sectionTypesModule('workspace'),
+        'packages/sections/src/register.tsx': sectionRegisterModule('workspace'),
+        'packages/sections/src/blocks/Pricing.tsx': pricingComponent(),
+        'packages/sections/src/__tests__/section-parity.test.tsx': sectionParityTest('workspace'),
+        'packages/sections/scripts/verify-sections.mjs': verifySectionsScript('workspace'),
+        'apps/cms/prenta.seed.json': marketingSeedJson(),
+        'SECTIONS.md': sectionsDoc('workspace', opts.packageName),
+        '.cursor/skills/prenta-add-section/SKILL.md': addSectionSkill('workspace', opts.packageName),
+    };
+}
+function pricingComponent() {
+    return `/**
+ * Presentational pricing grid. Props are deliberately explicit and typed so
+ * \`npm run blocks:extract\` can derive a component-blocks manifest from them.
+ * The section renderer in ../sections/register.tsx adapts a section's stored
+ * content to these props.
+ */
+export interface PricingPlan {
+  /** Plan name, e.g. "Starter". */
+  name: string;
+  /** Display price, e.g. "$29/mo". */
+  price: string;
+  /** Optional short description shown under the price. */
+  description?: string;
+}
+
+export interface PricingProps {
+  /** Section heading. */
+  heading: string;
+  /** Plans to display, left to right. */
+  plans: PricingPlan[];
+}
+
+export function Pricing({ heading, plans }: PricingProps) {
+  return (
+    <section className="mx-auto max-w-5xl px-4 py-16">
+      <h2 className="mb-8 text-center text-3xl font-semibold text-zinc-900">{heading}</h2>
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {plans.map((plan, i) => (
+          <div key={i} className="rounded-xl border border-zinc-200 p-6">
+            <h3 className="text-lg font-medium text-zinc-900">{plan.name}</h3>
+            <p className="mt-2 text-2xl font-semibold text-violet-600">{plan.price}</p>
+            {plan.description ? (
+              <p className="mt-2 text-sm text-zinc-600">{plan.description}</p>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+`;
+}
+function sectionTypesModule(layout) {
+    const wiring = layout === 'workspace'
+        ? ` * Wired into apps/cms/prenta.config.ts as \`sections: { types: marketingSectionTypes }\`
+ * via a relative import, so Next's config loader can compile it.`
+        : ` * Wired into prenta.config.ts as \`sections: { types: marketingSectionTypes }\`.`;
+    const verifyCmd = layout === 'workspace' ? 'pnpm verify:sections' : 'npm run verify:sections';
+    return `import type { CustomSectionTypeInput } from '@prenta/core/page-sections';
+
+/**
+ * Custom section types for this site. Each entry teaches the admin editor how
+ * to author the section (Add Section gallery + field-driven inspector). The
+ * matching public renderer lives in ./register.tsx — keep the two in sync
+ * (\`${verifyCmd}\` checks this).
+ *
+${wiring}
+ */
+export const marketingSectionTypes: CustomSectionTypeInput[] = [
+  {
+    id: 'pricing',
+    name: 'Pricing Table',
+    scope: ['page'],
+    icon: 'badge-dollar-sign',
+    description: 'A grid of pricing plans.',
+    category: 'conversion',
+    fields: [
+      { key: 'heading', label: 'Heading', type: 'text', required: true },
+      {
+        key: 'plans',
+        label: 'Plans',
+        type: 'repeater',
+        rowLabel: 'Plan',
+        fields: [
+          { key: 'name', label: 'Plan name', type: 'text', required: true },
+          { key: 'price', label: 'Price', type: 'text', required: true },
+          { key: 'description', label: 'Description', type: 'textarea' },
+        ],
+      },
+    ],
+    defaultContent: { heading: 'Pricing', plans: [] },
+  },
+];
+`;
+}
+function sectionRegisterModule(layout) {
+    const pricingImport = layout === 'workspace' ? './blocks/Pricing' : '../blocks/Pricing';
+    const verifyCmd = layout === 'workspace' ? 'pnpm verify:sections' : 'npm run verify:sections';
+    const registrationNote = layout === 'workspace'
+        ? `// Register for the public site. apps/site imports this module as a
+// side-effect (see src/components/PageSections.tsx — the import runs the
+// registration); the apps/cms admin page imports \`sectionRenderers\` and
+// passes it to <AdminRoot sectionRenderers={...}>.`
+        : `// Register for the public site. app/(site)/layout.tsx imports this module (the
+// import runs the registration); the admin page imports \`sectionRenderers\` and
+// passes it to <AdminRoot sectionRenderers={...}>.`;
+    return `import { registerSectionRenderers } from '@prenta/sections-react';
+import type { AdminSectionRendererMap } from '@prenta/admin';
+import { Pricing, type PricingPlan } from '${pricingImport}';
+
+/**
+ * Renderers for this site's custom section types — ONE map, used for BOTH the
+ * public site (via <Sections>) and the admin editor canvas
+ * (<AdminRoot sectionRenderers={...}>). Both surfaces pass the same
+ * \`{ section }\`, so a single component serves both.
+ *
+ * Typed as \`AdminSectionRendererMap\` (the stricter of the two shapes — it is
+ * assignable to the public \`SectionRendererMap\` for the registration below).
+ * Read section data from \`section.content\`. Every id here must match a
+ * section-type id in ./types.ts (\`${verifyCmd}\` keeps them in sync).
+ */
+export const sectionRenderers: AdminSectionRendererMap = {
+  pricing: ({ section }) => {
+    const content = section.content ?? {};
+    const heading = typeof content.heading === 'string' ? content.heading : '';
+    const plans = Array.isArray(content.plans) ? (content.plans as PricingPlan[]) : [];
+    return <Pricing heading={heading} plans={plans} />;
+  },
+};
+
+${registrationNote}
+registerSectionRenderers(sectionRenderers);
+`;
+}
+/**
+ * `prenta.seed.json` — a "Marketing homepage" starter the project owner can
+ * load with `npm run populate`. Pre-fills hero, stats, pricing (the custom
+ * type), and CTA sections so the first visit to the Page editor shows a real,
+ * fully-authored page instead of an empty canvas.
+ */
+function marketingSeedJson() {
+    const seed = {
+        globals: {
+            'site-settings': {
+                siteName: 'My Site',
+                description: 'A marketing site powered by Prenta CMS.',
+            },
+        },
+        collections: {
+            forms: [
+                {
+                    status: 'PUBLISHED',
+                    data: {
+                        name: 'Contact',
+                        title: 'Contact',
+                        slug: 'contact',
+                        status: 'active',
+                        fields: [
+                            {
+                                id: 'contact-name',
+                                key: 'name',
+                                label: 'Name',
+                                type: 'text',
+                                required: true,
+                                sortOrder: 0,
+                            },
+                            {
+                                id: 'contact-email',
+                                key: 'email',
+                                label: 'Email',
+                                type: 'email',
+                                required: true,
+                                sortOrder: 1,
+                            },
+                            {
+                                id: 'contact-message',
+                                key: 'message',
+                                label: 'Message',
+                                type: 'textarea',
+                                required: true,
+                                sortOrder: 2,
+                            },
+                        ],
+                        successMessage: "Thanks — we'll be in touch soon.",
+                    },
+                },
+            ],
+            pages: [
+                {
+                    status: 'PUBLISHED',
+                    data: {
+                        title: 'Home',
+                        slug: 'home',
+                        path: '/',
+                        sections: [
+                            {
+                                id: 'sec-hero',
+                                sectionType: 'hero',
+                                name: 'Hero Banner',
+                                visible: true,
+                                content: {
+                                    eyebrow: 'Launching soon',
+                                    heading: 'Marketing sites your editors can actually edit',
+                                    body: 'Author every section of this page in the admin — copy, pricing, stats, and calls to action — and publish without a deploy.',
+                                    primaryButtonLabel: 'Get Started',
+                                    primaryButtonUrl: '/contact',
+                                    secondaryButtonLabel: 'See pricing',
+                                    secondaryButtonUrl: '#pricing',
+                                },
+                                settings: { backgroundType: 'solid', backgroundColor: 'purple', paddingY: 'xl' },
+                            },
+                            {
+                                id: 'sec-stats',
+                                sectionType: 'stats',
+                                name: 'By the Numbers',
+                                visible: true,
+                                content: {
+                                    heading: 'By the numbers',
+                                    body: '',
+                                    stats: [
+                                        { value: '99.99%', label: 'Uptime', description: '' },
+                                        { value: '124ms', label: 'Avg response time', description: '' },
+                                        { value: '3M+', label: 'Requests served', description: '' },
+                                    ],
+                                },
+                                settings: { backgroundType: 'none', paddingY: 'lg' },
+                            },
+                            {
+                                id: 'sec-pricing',
+                                sectionType: 'pricing',
+                                name: 'Pricing Table',
+                                visible: true,
+                                content: {
+                                    heading: 'Simple, transparent pricing',
+                                    plans: [
+                                        {
+                                            name: 'Starter',
+                                            price: '$29/mo',
+                                            description: 'For new projects finding their footing.',
+                                        },
+                                        {
+                                            name: 'Pro',
+                                            price: '$79/mo',
+                                            description: 'For growing teams that ship every week.',
+                                        },
+                                        {
+                                            name: 'Enterprise',
+                                            price: 'Custom',
+                                            description: 'Security review, SSO, and a dedicated SLA.',
+                                        },
+                                    ],
+                                },
+                                settings: { backgroundType: 'none', paddingY: 'xl' },
+                            },
+                            {
+                                id: 'sec-cta',
+                                sectionType: 'cta',
+                                name: 'CTA Banner',
+                                visible: true,
+                                content: {
+                                    heading: 'Ready to get started?',
+                                    body: 'Spin up your site and hand the keys to your editors.',
+                                    buttonLabel: 'Start Building',
+                                    buttonUrl: '/contact',
+                                },
+                                settings: { backgroundType: 'solid', backgroundColor: 'purple', paddingY: 'xl' },
+                            },
+                        ],
+                    },
+                },
+                {
+                    status: 'PUBLISHED',
+                    data: {
+                        title: 'Contact',
+                        slug: 'contact',
+                        path: '/contact',
+                        sections: [
+                            {
+                                id: 'sec-contact-form',
+                                sectionType: 'form',
+                                name: 'Contact Form',
+                                visible: true,
+                                content: {
+                                    heading: 'Get in touch',
+                                    description: 'Send us a message — submissions land in Admin → Forms and can forward to your CRM via Zapier.',
+                                    formSlug: 'contact',
+                                },
+                                settings: { backgroundType: 'none', paddingY: 'lg' },
+                            },
+                        ],
+                    },
+                },
+            ],
+        },
+    };
+    return `${JSON.stringify(seed, null, 2)}\n`;
+}
+function verifySectionsScript(layout) {
+    const typesRel = layout === 'workspace' ? 'src/types.ts' : 'src/sections/types.ts';
+    const registerRel = layout === 'workspace' ? 'src/register.tsx' : 'src/sections/register.tsx';
+    return `#!/usr/bin/env node
+/**
+ * verify:sections — fast static check that every custom section type declared
+ * in ${typesRel} has a registered public renderer in
+ * ${registerRel} (and vice versa), so a page can never reference a
+ * section type with no renderer ("no dead sections").
+ *
+ * Intentionally dependency-free and build-free: it scans the two source files
+ * as text rather than executing TypeScript, so it runs the moment the project
+ * is scaffolded.
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+function read(rel) {
+  try {
+    return readFileSync(join(root, rel), 'utf-8');
+  } catch {
+    return '';
+  }
+}
+
+const typesSrc = read('${typesRel}');
+const registerSrc = read('${registerRel}');
+
+// Top-level section types declare \`id: '...'\`; sub-fields use \`key:\`, so this
+// only matches section-type ids.
+const declared = new Set([...typesSrc.matchAll(/\\bid:\\s*['"]([\\w-]+)['"]/g)].map((m) => m[1]));
+// register.tsx declares each renderer as a map entry (\`id: ({ section }) => …\`),
+// so match an indented identifier key immediately followed by a function.
+const registered = new Set(
+  [...registerSrc.matchAll(/^\\s+([\\w-]+):\\s*(?:async\\s+)?\\(/gm)].map((m) => m[1]),
+);
+
+let ok = true;
+if (declared.size === 0) {
+  console.error('verify:sections — no custom section types found in ${typesRel}');
+  ok = false;
+}
+for (const id of declared) {
+  if (!registered.has(id)) {
+    console.error(\`verify:sections — "\${id}" is declared in types.ts but has no renderer in register.tsx\`);
+    ok = false;
+  }
+}
+for (const id of registered) {
+  if (!declared.has(id)) {
+    console.error(\`verify:sections — "\${id}" has a renderer in register.tsx but is not declared in types.ts\`);
+    ok = false;
+  }
+}
+
+if (!ok) process.exit(1);
+console.log(\`verify:sections — OK (\${declared.size} section type(s) declared and registered)\`);
+`;
+}
+function sectionsDoc(layout, packageName) {
+    const ws = layout === 'workspace';
+    const typesPath = ws ? 'packages/sections/src/types.ts' : 'src/sections/types.ts';
+    const registerPath = ws ? 'packages/sections/src/register.tsx' : 'src/sections/register.tsx';
+    const blocksDir = ws ? 'packages/sections/src/blocks/' : 'src/blocks/';
+    const run = ws ? 'pnpm' : 'npm run';
+    const configWiring = ws
+        ? `Wired
+   into \`apps/cms/prenta.config.ts\` as \`sections: { types: marketingSectionTypes }\`.`
+        : `Wired
+   into \`prenta.config.ts\` as \`sections: { types: marketingSectionTypes }\`.`;
+    const registrationText = ws
+        ? `The Astro app
+   (\`apps/site/src/components/PageSections.tsx\`) imports the module as a
+   side effect (registering the public renderers for \`<Sections>\`), and the
+   \`apps/cms\` admin page passes the same \`sectionRenderers\` (imported as
+   \`${packageName}/register\`) to \`<AdminRoot sectionRenderers={...}>\` so
+   editors see the real component while they edit — no separate
+   admin-renderer file to keep in sync.`
+        : `\`app/(site)/layout.tsx\` imports the module (registering the
+   public renderers via \`<Sections>\`), and the admin page passes the same
+   \`sectionRenderers\` to \`<AdminRoot sectionRenderers={...}>\` so editors see the
+   real component while they edit — no separate admin-renderer file to keep in
+   sync.`;
+    const seedIntro = ws ? '`apps/cms/prenta.seed.json`' : '`prenta.seed.json`';
+    const kitIntro = ws
+        ? `This project uses the **marketing-custom** template. The section kit is a
+shared workspace package — **\`packages/sections\`** (\`${packageName}\`) —
+consumed by both \`apps/cms\` (admin authoring + editor canvas) and \`apps/site\`
+(Astro public rendering). A custom section has just two files:`
+        : `This project uses the **marketing-custom** template, which wires up custom
+section types end to end. A custom section has just two files:`;
+    return `# Custom Sections
+
+${kitIntro}
+
+1. **Schema** (\`${typesPath}\`) — declares the type so the admin Page
+   editor can author it (Add Section gallery + field-driven inspector). ${configWiring}
+2. **Renderer** (\`${registerPath}\`) — ONE map (\`sectionRenderers\`)
+   that renders each type, used for **both** the public site and the admin
+   editor canvas. ${registrationText} Read section data from \`section.content\`.
+
+Renderers must be client-safe (the admin canvas runs them in the browser) and
+SSR-safe (the public site renders them on the server) — presentational
+components under \`${blocksDir}\` satisfy both. A renderer that throws falls back
+to a structural placeholder in the canvas automatically.
+
+## Adding sections from a design (agent)
+
+This project ships an agent skill at
+\`.cursor/skills/prenta-add-section/SKILL.md\`. Ask your agent (Cursor, Claude,
+etc.) to make a designed section editable and it follows that contract — emitting
+the schema + renderer (+ optional block + seed) in sync — so a design becomes an
+editable CMS section without hand-wiring. The manual steps below are the same
+thing, done by hand.
+
+## Add a section type
+
+1. Add an entry to \`marketingSectionTypes\` in \`${typesPath}\`.
+2. (Optional) build a presentational component under \`${blocksDir}\`.
+3. Add a renderer for the new \`id\` to the \`sectionRenderers\` map in
+   \`${registerPath}\` — it drives both the public site and the admin
+   canvas.
+4. Run \`${run} verify:sections\` to confirm the schema and renderers match.
+5. (Astro-split) Add a fixture in \`packages/sections/src/__tests__/section-parity.test.tsx\`
+   and run \`${run} test:parity\`.
+
+## Starter homepage seed
+
+${seedIntro} contains a pre-filled "Marketing homepage" (hero, stats,
+pricing, CTA) plus a **Contact** page with an embedded form. Load it after your first deploy / local setup:
+
+\`\`\`bash
+${run} populate
+\`\`\`
+
+Then open the admin Page editor — every section is real, editable content.
+
+## Repeater fields
+
+Use \`type: 'repeater'\` with a \`fields\` sub-schema for structured arrays (the
+included Pricing section uses one for its plans). Each row is an object keyed by
+the sub-field \`key\`s.
+
+## Component blocks
+
+\`${blocksDir}\` holds typed presentational components. Generate a manifest of
+their props for tooling/migrations:
+
+\`\`\`bash
+${run} blocks:extract   # writes prenta-blocks.json
+${run} blocks:diff      # compares the committed manifest to the current source
+\`\`\`
+
+Commit \`prenta-blocks.json\` so \`blocks:diff\` can flag breaking prop changes in
+review.
+${ws
+        ? `
+## Canvas ↔ public parity
+
+In an Astro-split site the editing canvas (Next admin) and the public page
+(Astro) are two orchestrators of the **same** \`sectionRenderers\` map. Keep
+them honest with the parity harness from
+\`@prenta/sections-react/testing\`:
+
+\`\`\`bash
+${run} test:parity   # or: pnpm --filter ${packageName} test:parity
+\`\`\`
+
+The starter test in \`packages/sections/src/__tests__/section-parity.test.tsx\`
+renders seed-like fixtures through public defaults and canvas-equivalent
+options and asserts the normalized trees match. Add a fixture when you add a
+section type — if a renderer starts branching on \`options\` (or the maps
+drift), CI fails before editors see a WYSIWYG lie.
+`
+        : ''}`;
+}
+/** Starter contract test: same sectionRenderers → same tree on both surfaces. */
+function sectionParityTest(layout) {
+    const registerImport = layout === 'workspace' ? '../register' : '../../sections/register';
+    return `import { describe, it, expect } from 'vitest';
+import { assertSectionRenderParity } from '@prenta/sections-react/testing';
+import type { PublicSection } from '@prenta/sections-react';
+import { sectionRenderers } from '${registerImport}';
+
+function section(
+  overrides: Partial<PublicSection> & Pick<PublicSection, 'sectionType'>,
+): PublicSection {
+  return {
+    id: overrides.id ?? \`s-\${overrides.sectionType}\`,
+    sectionType: overrides.sectionType,
+    visible: overrides.visible ?? true,
+    name: overrides.name,
+    content: overrides.content ?? {},
+    settings: overrides.settings ?? {},
+  };
+}
+
+/**
+ * Canvas (AdminRoot sectionRenderers) ↔ public (Astro <Sections>) fidelity.
+ * Both surfaces must keep using this package's \`sectionRenderers\` map — see
+ * SECTIONS.md. Extend the fixtures when you add a custom section type.
+ */
+describe('section render parity (canvas ↔ public)', () => {
+  it('custom pricing + built-in marketing sections match on both orchestrators', () => {
+    expect(() =>
+      assertSectionRenderParity(
+        [
+          section({
+            sectionType: 'hero',
+            content: {
+              heading: 'Welcome',
+              body: 'Subtitle',
+              primaryButtonLabel: 'Start',
+              primaryButtonUrl: '/go',
+            },
+          }),
+          section({
+            sectionType: 'pricing',
+            content: {
+              heading: 'Simple, transparent pricing',
+              plans: [
+                { name: 'Starter', price: '$29/mo', description: 'For small teams' },
+                { name: 'Pro', price: '$79/mo', description: 'For growing teams' },
+              ],
+            },
+          }),
+          section({
+            sectionType: 'cta',
+            content: {
+              heading: 'Ready?',
+              primaryButtonLabel: 'Contact',
+              primaryButtonUrl: '/contact',
+            },
+          }),
+        ],
+        { renderers: sectionRenderers },
+      ),
+    ).not.toThrow();
+  });
+});
+`;
+}
+/**
+ * \`.cursor/skills/prenta-add-section/SKILL.md\` — an agent contract that turns a
+ * designed section into an editable Prenta section (schema + renderer + seed),
+ * kept in sync. Shipping it in the kit makes the "design → editable CMS pages"
+ * workflow repeatable: the agent follows this instead of re-deriving it.
+ */
+function addSectionSkill(layout, packageName) {
+    const ws = layout === 'workspace';
+    const typesPath = ws ? 'packages/sections/src/types.ts' : 'src/sections/types.ts';
+    const registerPath = ws ? 'packages/sections/src/register.tsx' : 'src/sections/register.tsx';
+    const blocksDir = ws ? 'packages/sections/src/blocks/' : 'src/blocks/';
+    const seedPath = ws ? 'apps/cms/prenta.seed.json' : 'prenta.seed.json';
+    const run = ws ? 'pnpm' : 'npm run';
+    const configNote = ws
+        ? `**Pure data, no React** (this file is
+   imported by \`apps/cms/prenta.config.ts\`, which the admin client bundle loads).`
+        : `**Pure data, no React** (this file is
+   imported by \`prenta.config.ts\`, which the admin client bundle loads).`;
+    const rendererSurfaces = ws
+        ? `One React function per type, used for **both**
+   the Astro public site (\`apps/site\`) and the admin editor canvas
+   (\`apps/cms\`, imported as \`${packageName}/register\`). Reads \`section.content\`.`
+        : `One React function per type, used for **both**
+   the public site and the admin editor canvas. Reads \`section.content\`.`;
+    return `---
+name: prenta-add-section
+description: "Turn a designed section into an editable Prenta CMS page-builder section — schema + renderer + optional block + seed, kept in sync. Invoke when the user wants a designed section (hero, pricing, stats, features, CTA, testimonials, gallery, FAQ, logos, etc.) editable in the admin Page editor, or asks to 'add a section', 'make this design editable in the CMS', or 'build this page in the CMS'."
+---
+
+# Add an Prenta custom section
+
+Turn a designed section into an **editable** Prenta page-builder section so
+editors author it in the admin Page editor (Add Section → field inspector) and
+it renders identically on the public site. Follow this contract exactly — it
+keeps the pieces in sync so a section never renders in one place but breaks in
+another.
+
+## The model — two files (+ optional block + seed)
+
+1. **Schema** — an entry in \`marketingSectionTypes\` in \`${typesPath}\`.
+   Declares the type + its editable fields. ${configNote}
+2. **Renderer** — an entry in the \`sectionRenderers\` map in
+   \`${registerPath}\`. ${rendererSurfaces}
+3. *(optional)* **Block** — a typed presentational component in \`${blocksDir}\`
+   the renderer adapts to (keeps the renderer thin).
+4. *(recommended)* **Seed** — an entry in \`${seedPath}\` so the section
+   ships with real content (\`${run} populate\`).
+
+The schema \`id\` and the renderer map key **must match** —
+\`${run} verify:sections\` enforces it.
+
+## Procedure (per section)
+
+### 1. Choose the editable fields
+From the design, list what an editor should change (headings, body, CTA
+label+url, images, repeating rows like plans/stats/cards). Everything purely
+decorative or structural stays in the component's markup — do NOT make it a field.
+
+### 2. Add the schema — \`${typesPath}\`
+Append to the \`marketingSectionTypes\` array:
+
+\`\`\`ts
+{
+  id: 'pricing',              // kebab-case, unique, === renderer map key
+  name: 'Pricing Table',      // shown in the Add Section gallery
+  scope: ['page'],            // 'page' | 'post'
+  icon: 'badge-dollar-sign',  // any lucide-react icon name
+  description: 'A grid of pricing plans.',
+  category: 'conversion',     // layout | content | media | conversion
+  fields: [
+    { key: 'heading', label: 'Heading', type: 'text', required: true },
+    {
+      key: 'plans', label: 'Plans', type: 'repeater', rowLabel: 'Plan',
+      fields: [
+        { key: 'name', label: 'Plan name', type: 'text', required: true },
+        { key: 'price', label: 'Price', type: 'text', required: true },
+        { key: 'description', label: 'Description', type: 'textarea' },
+      ],
+    },
+  ],
+  defaultContent: { heading: 'Pricing', plans: [] },
+}
+\`\`\`
+
+### 3. Add the renderer — \`${registerPath}\`
+Add a key to the \`sectionRenderers\` map. Read data from \`section.content\`
+(guard every value — content is untyped JSON):
+
+\`\`\`tsx
+pricing: ({ section }) => {
+  const c = section.content ?? {};
+  const heading = typeof c.heading === 'string' ? c.heading : '';
+  const plans = Array.isArray(c.plans) ? c.plans : [];
+  return <PricingGrid heading={heading} plans={plans} />;
+},
+\`\`\`
+
+Renderers must be **client-safe** (the admin canvas runs them in the browser)
+**and SSR-safe** (the public site renders them on the server): plain
+presentational components only — no \`useEffect\` data fetching, no server-only
+imports. A renderer that throws falls back to a structural placeholder.
+
+### 4. (optional) Extract a block to \`${blocksDir}\` and import it in the renderer.
+
+### 5. Seed — \`${seedPath}\`
+Add a section to the target page's \`sections\` array with realistic content:
+
+\`\`\`json
+{ "id": "sec-pricing", "sectionType": "pricing", "name": "Pricing Table",
+  "visible": true,
+  "content": { "heading": "Simple pricing", "plans": [ { "name": "Pro", "price": "$79/mo" } ] },
+  "settings": { "paddingY": "xl" } }
+\`\`\`
+
+### 6. Verify
+\`\`\`bash
+${run} verify:sections   # schema ids <-> renderer keys match
+${run} dev               # open the admin Page editor; add + edit the section
+\`\`\`
+
+## Field types (\`type:\` values)
+
+| type | use for |
+|------|---------|
+| \`text\` | short single-line copy |
+| \`textarea\` | multi-line plain copy |
+| \`richText\` | formatted prose |
+| \`url\` | a link (pair with a \`text\` label field for buttons) |
+| \`media\` | image / file picker |
+| \`select\` | fixed options — provide \`options: [{ label, value }]\` |
+| \`boolean\` | on/off toggle |
+| \`color\` | a color value |
+| \`relationship\` | reference other documents — \`relationTo: 'slug'\` |
+| \`repeater\` | repeatable rows — provide \`fields: [...]\`, \`rowLabel\`, optional \`minRows\`/\`maxRows\` |
+| \`stats\` | preset repeater of { value, label, description } rows |
+| \`gallery\` | preset repeater of { url, alt, caption } image rows |
+
+Each repeater row is stored as an object keyed by its sub-field \`key\`s.
+
+## Design → schema mapping
+
+- Editable copy → \`text\` / \`textarea\` / \`richText\`.
+- A button → two fields: a \`text\` label + a \`url\`.
+- An image → \`media\`.
+- A repeating group (plans, stats, features, logos, testimonials, FAQ) →
+  \`repeater\` (or the \`stats\` / \`gallery\` presets).
+- A fixed choice (alignment, variant) → \`select\`.
+- Decorative / structural markup → NOT a field; keep it in the component.
+
+## Checklist before you finish
+
+- [ ] Schema \`id\` === renderer map key (\`${run} verify:sections\` passes).
+- [ ] Renderer reads \`section.content\` and guards every value.
+- [ ] Renderer is client- and SSR-safe (no browser- or server-only APIs).
+- [ ] No React / components in \`${typesPath}\`.
+- [ ] Seed entry (if added) uses the same \`sectionType\` id + realistic content.
+- [ ] The section appears in Add Section and edits live in \`${run} dev\`.
+`;
+}
+//# sourceMappingURL=marketing-custom.js.map