@gradial/aci 0.1.31 → 0.1.33

package/templates/nextjs/starter-content/src/cms/contracts/components/siteNavigation.contract.ts

@@ -0,0 +1,30 @@
+import { defineComponentContract } from '@gradial/aci';
+import { z } from 'zod';
+
+const linkSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  href: z.string().min(1),
+});
+
+const utilitySchema = linkSchema.extend({
+  variant: z.enum(['primary', 'secondary', 'tertiary', 'outline', 'ghost']).optional(),
+});
+
+export const schema = z.object({
+  brandHref: z.string().min(1),
+  brandLabel: z.string().min(1),
+  brandLogo: z.object({
+    src: z.string(),
+    alt: z.string(),
+  }).nullable().optional(),
+  navigation: z.array(linkSchema),
+  utilities: z.array(utilitySchema).optional(),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const siteNavigationContract = defineComponentContract({
+  id: 'site-navigation',
+  props: schema,
+});

package/templates/nextjs/starter-content/src/cms/contracts/components/statsBar.contract.ts

@@ -0,0 +1,19 @@
+import { defineComponentContract } from '@gradial/aci';
+import { z } from 'zod';
+
+const statSchema = z.object({
+  label: z.string().min(1),
+  value: z.string().min(1),
+  suffix: z.string().optional(),
+});
+
+export const schema = z.object({
+  stats: z.array(statSchema).min(1),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const statsBarContract = defineComponentContract({
+  id: 'stats_bar',
+  props: schema,
+});

package/templates/nextjs/starter-content/src/cms/registry.ts

@@ -0,0 +1,28 @@
+import { createRegistry } from '@gradial/aci';
+import { homeHeroContract } from './contracts/components/homeHero.contract';
+import { containerContract } from './contracts/components/container.contract';
+import { buttonContract } from './contracts/components/button.contract';
+import { siteNavigationContract } from './contracts/components/siteNavigation.contract';
+import { siteFooterContract } from './contracts/components/siteFooter.contract';
+import { featureGridContract } from './contracts/components/featureGrid.contract';
+import { featureCardContract } from './contracts/components/featureCard.contract';
+import { statsBarContract } from './contracts/components/statsBar.contract';
+import { HomeHero } from '@/components/sections/HomeHero';
+import { ContainerSection } from '@/components/sections/ContainerSection';
+import { ButtonBlock } from '@/components/elements/ButtonBlock';
+import { Header } from '@/components/chrome/Header';
+import { Footer } from '@/components/chrome/Footer';
+import { FeatureGrid } from '@/components/sections/FeatureGrid';
+import { FeatureCard } from '@/components/sections/FeatureCard';
+import { StatsBar } from '@/components/sections/StatsBar';
+
+export const registry = createRegistry([
+  [homeHeroContract, HomeHero],
+  [containerContract, ContainerSection],
+  [buttonContract, ButtonBlock],
+  [siteNavigationContract, Header],
+  [siteFooterContract, Footer],
+  [featureGridContract, FeatureGrid],
+  [featureCardContract, FeatureCard],
+  [statsBarContract, StatsBar],
+]);

package/templates/nextjs/template/{.aci.yaml → .aci.yaml.tmpl}

@@ -1,5 +1,5 @@
 version: "1"
-siteId: "site_nextjs"
+siteId: "{{siteName}}"
 domain: "meridian.local"
 framework: next
 

package/templates/nextjs/template/README.md.tmpl

@@ -0,0 +1,52 @@
+# {{siteName}}
+
+A Next.js site powered by [ACI](https://docs.gradial.com/aci) (Agentic Content Infrastructure).
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+The dev server starts at `http://localhost:3000`. Content changes in `.content/`
+are picked up automatically via the ACI adapter in `next.config.mjs`.
+
+## Adding Your First Component
+
+See `.agents/skills/authoring/SKILL.md` for a step-by-step guide to:
+1. Define a component contract in `src/cms/contracts/components/`
+2. Build the React component in `src/components/`
+3. Register it in `src/cms/registry.ts`
+4. Add content to `.content/pages/`
+
+## Skills
+
+| Skill | When to read |
+|-------|-------------|
+| [aci](.agents/skills/aci/SKILL.md) | Architecture, commands, testing, troubleshooting |
+| [authoring](.agents/skills/authoring/SKILL.md) | Creating content, building components, design tokens |
+| [migration](.agents/skills/migration/SKILL.md) | Migrating an existing site into ACI |
+
+## Commands
+
+```bash
+npm run dev              # Start Next.js dev server (auto-compiles content)
+npm run build            # Production build
+npm run typecheck        # TypeScript type checking
+npm test                 # Run conformance tests
+npm run content:compile  # Compile content into .aci/compiled/
+```
+
+## Project Structure
+
+```
+.aci.yaml              ACI config (siteId, framework, routes)
+.content/              Content source (JSON pages, config, fragments)
+src/cms/               Contracts and component registry
+src/components/        Runtime React components
+src/design-system/     Design tokens and global styles
+src/app/               Next.js App Router pages and routes
+src/middleware.ts       ACI middleware (siteId, release routing)
+.agents/skills/        Skills for humans and agents
+```

package/templates/nextjs/template/gitignore

@@ -0,0 +1,15 @@
+/.next/
+/node_modules/
+/out/
+/.aci/compiled/
+/.baremetal/
+/.vercel/
+*.log
+*.tsbuildinfo
+.env
+.env.*
+.DS_Store
+.vercel
+/storybook-static/
+pnpm-lock.yaml
+pnpm-workspace.yaml

package/templates/nextjs/template/next.config.mjs

@@ -1,8 +1,3 @@
 import { withAci } from '@gradial/aci/next/config';
 
-const nextConfig = {
-  output: 'standalone',
-  reactStrictMode: true,
-};
-
-export default withAci(nextConfig);
+export default withAci();

package/templates/nextjs/template/package.json.tmpl

@@ -8,14 +8,16 @@
     "build": "next build",
     "preview": "next start -H 0.0.0.0",
     "typecheck": "tsc --noEmit",
-    "aci:compile": "node ./node_modules/@gradial/aci/bin/aci.js content compile --content ./.content --out ./.aci",
+    "test": "node --import tsx --test tests/**/*.test.ts",
     "content:compile": "node ./node_modules/@gradial/aci/bin/aci.js content compile --content ./.content --out ./.aci/compiled",
-    "aci:doctor": "node ./node_modules/@gradial/aci/bin/aci.js doctor",
-    "aci:validate": "node ./node_modules/@gradial/aci/bin/aci.js doctor",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build"
   },
+  "engines": {
+    "node": ">=22",
+    "npm": ">=10"
+  },
   "dependencies": {
     "@gradial/aci": "{{aciVersion}}",
     "next": "^15.1.6",

package/templates/nextjs/template/src/app/gradial/assets/[...path]/route.ts

@@ -1,4 +1 @@
-export { GET } from '@gradial/aci/next/asset-route';
-
-export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export { GET, runtime, dynamic } from '@gradial/aci/next/asset-route';

package/templates/nextjs/template/src/cms/contracts/components/index.ts

@@ -1,15 +1,3 @@
-import { buttonContract } from './button.contract';
-import { containerContract } from './container.contract';
-import { homeHeroContract } from './homeHero.contract';
-import { siteNavigationContract } from './siteNavigation.contract';
-import { siteFooterContract } from './siteFooter.contract';
-
-const componentContracts = [
-  homeHeroContract,
-  containerContract,
-  buttonContract,
-  siteNavigationContract,
-  siteFooterContract,
-];
+const componentContracts: readonly unknown[] = [];
 
 export default componentContracts;

package/templates/nextjs/template/src/cms/registry.ts

@@ -1,28 +1,5 @@
 import { createRegistry } from '@gradial/aci';
-import { homeHeroContract } from './contracts/components/homeHero.contract';
-import { containerContract } from './contracts/components/container.contract';
-import { buttonContract } from './contracts/components/button.contract';
-import { siteNavigationContract } from './contracts/components/siteNavigation.contract';
-import { siteFooterContract } from './contracts/components/siteFooter.contract';
-import { featureGridContract } from './contracts/components/featureGrid.contract';
-import { featureCardContract } from './contracts/components/featureCard.contract';
-import { statsBarContract } from './contracts/components/statsBar.contract';
-import { HomeHero } from '@/components/sections/HomeHero';
-import { ContainerSection } from '@/components/sections/ContainerSection';
-import { ButtonBlock } from '@/components/elements/ButtonBlock';
-import { Header } from '@/components/chrome/Header';
-import { Footer } from '@/components/chrome/Footer';
-import { FeatureGrid } from '@/components/sections/FeatureGrid';
-import { FeatureCard } from '@/components/sections/FeatureCard';
-import { StatsBar } from '@/components/sections/StatsBar';
 
-export const registry = createRegistry([
-  [homeHeroContract, HomeHero],
-  [containerContract, ContainerSection],
-  [buttonContract, ButtonBlock],
-  [siteNavigationContract, Header],
-  [siteFooterContract, Footer],
-  [featureGridContract, FeatureGrid],
-  [featureCardContract, FeatureCard],
-  [statsBarContract, StatsBar],
-]);
+// Register your [contract, component] pairs here.
+// See .agents/skills/authoring/SKILL.md for how to add components.
+export const registry = createRegistry([]);

package/templates/nextjs/template/src/design-system/styles.css

@@ -0,0 +1,346 @@
+@import "tailwindcss" source(none);
+@import "./tokens/index.css";
+
+@source "../**/*.{astro,tsx,svelte,ts,jsx}";
+@source "../../.content/**/*.json";
+
+:root {
+  color-scheme: light;
+}
+
+[dir="rtl"] {
+  --gradient-hero-overlay: var(--gradient-hero-overlay-rtl);
+}
+
+.theme-auto,
+.theme-light {
+  color: var(--color-fg);
+  --color-fg: var(--color-text-primary);
+  --color-fg-muted: var(--color-text-secondary);
+  --color-surface-default: var(--color-white);
+  --color-surface-raised-default: var(--color-surface-100);
+  --color-edge: var(--color-border-default);
+  --color-icon-default: var(--color-text-tertiary);
+  --color-link-hover: var(--color-brand-600);
+  --color-callout-icon-bg-default: var(--color-callout-icon-bg-light);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --shadow-card-default: var(--shadow-card);
+  --gradient-cta-default: var(--gradient-cta);
+
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-primary-hover-bg: var(--color-brand-500);
+  --button-primary-hover-border: var(--color-brand-500);
+
+  --button-secondary-bg: var(--color-surface-100);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--color-border-strong);
+
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+.theme-dark {
+  color: var(--color-fg);
+  color-scheme: dark;
+  --color-fg: var(--color-text-inverse);
+  --color-fg-muted: var(--color-surface-300);
+  --color-surface-default: var(--color-surface-900);
+  --color-surface-raised-default: var(--color-surface-800);
+  --color-chrome-surface-default: var(--color-surface-900);
+  --color-edge: var(--color-border-inverse);
+  --color-icon-default: var(--color-surface-400);
+  --color-link-hover: var(--color-brand-400);
+  --color-callout-icon-bg-default: var(--color-callout-icon-bg-dark);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --shadow-card-default: var(--shadow-card-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+
+  --button-primary-bg: var(--color-brand-500);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-brand-500);
+  --button-primary-hover-bg: var(--color-brand-400);
+  --button-primary-hover-border: var(--color-brand-400);
+
+  --button-secondary-bg: var(--color-surface-800);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-surface-700);
+
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--color-border-inverse);
+
+  --button-tertiary-text: var(--color-brand-400);
+}
+
+.theme-accent {
+  color: var(--color-fg);
+  --color-fg: var(--color-white);
+  --color-fg-muted: var(--color-surface-300);
+  --color-surface-default: var(--color-surface-800);
+  --color-surface-raised-default: var(--color-surface-700);
+  --color-edge: var(--color-border-inverse);
+  --color-icon-default: var(--color-white);
+  --color-link-hover: var(--color-warm-400);
+  --gradient-cta-default: var(--gradient-cta);
+}
+
+.bm-header {
+  background: var(--header-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  --color-fg: var(--header-text);
+  --color-fg-muted: var(--header-muted);
+  --color-edge: var(--header-border);
+  --color-link-hover: var(--header-link-hover);
+  --color-icon-default: var(--header-icon);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--header-border);
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+.bm-footer {
+  color: var(--footer-text);
+  background: var(--footer-bg);
+  --color-fg: var(--footer-text);
+  --color-fg-muted: var(--footer-muted);
+  --color-edge: var(--footer-border);
+  --color-link-hover: var(--footer-link-hover);
+  --color-icon-default: var(--footer-muted);
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--footer-border);
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+@media (min-width: 1024px) {
+  .footer-main-grid {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+.bm-mobile-nav {
+  color: var(--mobile-nav-text);
+  background: var(--mobile-nav-bg);
+  --color-fg: var(--mobile-nav-text);
+  --color-fg-muted: var(--mobile-nav-muted);
+  --color-edge: var(--mobile-nav-border);
+  --color-link-hover: var(--mobile-nav-link-hover);
+  --color-icon-default: var(--mobile-nav-muted);
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--mobile-nav-border);
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-page);
+  color: var(--color-fg);
+  font-family: var(--font-family-base);
+  font-size: var(--text-size-body);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+img,
+svg {
+  display: block;
+}
+
+:focus-visible {
+  outline: 0.125rem solid var(--color-focus);
+  outline-offset: 0.125rem;
+}
+
+@layer base {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-block: 0;
+    color: var(--color-fg);
+    font-family: var(--font-family-heading);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-heading);
+  }
+
+  h1 {
+    font-size: var(--text-size-h1-mobile);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  h2 { font-size: var(--text-size-h2-mobile); }
+  h3 { font-size: var(--text-size-h3); }
+  h4 { font-size: var(--text-size-h4); }
+  h5 { font-size: var(--text-size-body-large); }
+  h6 { font-size: var(--text-size-body); }
+
+  @media (min-width: 768px) {
+    h1 { font-size: var(--text-size-h1); }
+    h2 { font-size: var(--text-size-h2); }
+  }
+
+  p, ul, ol, blockquote, pre {
+    margin-block: 0;
+  }
+
+  ul { list-style: disc; padding-left: 1.4em; }
+  ol { list-style: decimal; padding-left: 1.4em; }
+}
+
+/* Rich text styles */
+.bm-rich-text-section {
+  background: var(--color-surface-default);
+  padding: var(--spacing-section-y) var(--spacing-container);
+}
+
+.bm-rich-text-section--quiet {
+  background: var(--color-surface-muted);
+}
+
+.bm-rich-text {
+  max-width: var(--max-width-rich-text);
+  margin-inline: auto;
+  color: var(--color-fg);
+}
+
+.bm-rich-text--wide {
+  max-width: var(--max-width-rich-text-wide);
+}
+
+.bm-rich-text__eyebrow {
+  margin: 0 0 1rem;
+  color: var(--color-accent-primary);
+  font-size: var(--text-size-eyebrow);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+}
+
+.bm-rich-text__heading {
+  margin: 0;
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-size: var(--text-size-h2-mobile);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body {
+  margin-top: var(--rich-text-heading-space);
+  color: var(--color-fg);
+  font-size: var(--text-size-body-large);
+  line-height: var(--leading-relaxed);
+}
+
+.bm-rich-text__body--inline {
+  margin-top: 0;
+}
+
+.bm-rich-text__body > * {
+  margin-block: 0;
+}
+
+.bm-rich-text__body > * + * {
+  margin-top: var(--rich-text-flow-space);
+}
+
+.bm-rich-text__body h2,
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body h2 {
+  font-size: var(--text-size-h3);
+}
+
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  font-size: var(--text-size-body-large);
+}
+
+.bm-rich-text__body a {
+  color: var(--color-link-hover);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: underline;
+  text-decoration-thickness: var(--rich-text-link-decoration-thickness);
+  text-underline-offset: var(--rich-text-link-underline-offset);
+}
+
+.bm-rich-text__body ul {
+  list-style: disc;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body ol {
+  list-style: decimal;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body li + li {
+  margin-top: 0.75rem;
+}
+
+.bm-rich-text__body blockquote {
+  border-left: var(--rich-text-blockquote-border-width) solid var(--rich-text-quote-border);
+  background: var(--rich-text-quote-bg-default);
+  padding: 1.25rem 1.5rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.bm-rich-text__body code {
+  border-radius: 0.25rem;
+  background: var(--rich-text-inline-code-bg-default);
+  color: var(--rich-text-inline-code-text);
+  font-size: var(--text-size-caption);
+  padding: var(--rich-text-inline-code-padding);
+}
+
+@media (min-width: 768px) {
+  .bm-rich-text__heading {
+    font-size: var(--text-size-h2);
+  }
+}