@gradial/aci 0.1.52-rc.3 → 0.1.52-rc.34-e2e.1

package/templates/common/starter-content/.content/patterns/components/site-footer.json

@@ -0,0 +1,203 @@
+{
+  "$type": "componentPattern",
+  "buildId": "codebuild_01a12331-b86d-7d20-8a35-a7a71d96e8be",
+  "codeDigest": "sha256:f1246860864e55359c7ad442a7a956b61a835a4826cd6229cc9971db1fe29a67",
+  "name": "site-footer",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "site-footer",
+    "type": "object",
+    "properties": {
+      "brandHref": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLabel": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLogo": {
+        "anyOf": [
+          {
+            "type": "object",
+            "properties": {
+              "src": {
+                "type": "string"
+              },
+              "alt": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "src",
+              "alt"
+            ],
+            "additionalProperties": false
+          },
+          {
+            "type": "null"
+          }
+        ]
+      },
+      "columns": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "title": {
+              "type": "string"
+            },
+            "links": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "label": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "href": {
+                    "type": "string",
+                    "minLength": 1
+                  }
+                },
+                "required": [
+                  "id",
+                  "label",
+                  "href"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "groups": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "title": {
+                    "type": "string"
+                  },
+                  "links": {
+                    "type": "array",
+                    "items": {
+                      "type": "object",
+                      "properties": {
+                        "id": {
+                          "type": "string",
+                          "minLength": 1
+                        },
+                        "label": {
+                          "type": "string",
+                          "minLength": 1
+                        },
+                        "href": {
+                          "type": "string",
+                          "minLength": 1
+                        }
+                      },
+                      "required": [
+                        "id",
+                        "label",
+                        "href"
+                      ],
+                      "additionalProperties": false
+                    }
+                  }
+                },
+                "required": [
+                  "id",
+                  "title",
+                  "links"
+                ],
+                "additionalProperties": false
+              }
+            }
+          },
+          "required": [
+            "id"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "social": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            },
+            "icon": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "legalLinks": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "copyright": {
+        "type": "string"
+      }
+    },
+    "required": [
+      "brandHref",
+      "brandLabel",
+      "columns"
+    ],
+    "additionalProperties": false
+  },
+  "imageSlots": {},
+  "notes": "",
+  "skills": []
+}

package/templates/common/starter-content/.content/patterns/components/site-navigation.json

@@ -0,0 +1,115 @@
+{
+  "$type": "componentPattern",
+  "buildId": "codebuild_01a12331-b86d-7d20-8a35-a7a71d96e8be",
+  "codeDigest": "sha256:f1246860864e55359c7ad442a7a956b61a835a4826cd6229cc9971db1fe29a67",
+  "name": "site-navigation",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "site-navigation",
+    "type": "object",
+    "properties": {
+      "brandHref": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLabel": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLogo": {
+        "anyOf": [
+          {
+            "type": "object",
+            "properties": {
+              "src": {
+                "type": "string"
+              },
+              "alt": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "src",
+              "alt"
+            ],
+            "additionalProperties": false
+          },
+          {
+            "type": "null"
+          }
+        ]
+      },
+      "navigation": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "utilities": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            },
+            "variant": {
+              "type": "string",
+              "enum": [
+                "primary",
+                "secondary",
+                "tertiary",
+                "outline",
+                "ghost"
+              ]
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      }
+    },
+    "required": [
+      "brandHref",
+      "brandLabel",
+      "navigation"
+    ],
+    "additionalProperties": false
+  },
+  "imageSlots": {},
+  "notes": "",
+  "skills": []
+}

package/templates/common/starter-content/.content/patterns/components/stats_bar.json

@@ -0,0 +1,45 @@
+{
+  "$type": "componentPattern",
+  "buildId": "codebuild_01a12331-b86d-7d20-8a35-a7a71d96e8be",
+  "codeDigest": "sha256:f1246860864e55359c7ad442a7a956b61a835a4826cd6229cc9971db1fe29a67",
+  "name": "stats_bar",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "stats_bar",
+    "type": "object",
+    "properties": {
+      "stats": {
+        "minItems": 1,
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "value": {
+              "type": "string",
+              "minLength": 1
+            },
+            "suffix": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "label",
+            "value"
+          ],
+          "additionalProperties": false
+        }
+      }
+    },
+    "required": [
+      "stats"
+    ],
+    "additionalProperties": false
+  },
+  "imageSlots": {},
+  "notes": "",
+  "skills": []
+}

package/templates/common/starter-content/.content/schemas/site.schema.json

@@ -27,7 +27,17 @@
     },
     "overlayResolution": {
       "type": "array",
-      "items": { "enum": ["locale", "audience"] }
+      "items": {
+        "type": "string",
+        "minLength": 1,
+        "pattern": "^[^;=/\u0009-\u000d\u0020\u0085\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000]+$",
+        "not": {
+          "anyOf": [
+            { "enum": [".", "..", "experiment", "experimentArm"] },
+            { "pattern": "^experiment\\." }
+          ]
+        }
+      }
     },
     "brandHref": { "type": "string" },
     "brandLogo": {

package/templates/nextjs/starter-content/src/components/chrome/Footer.tsx

@@ -1,8 +1,9 @@
 import { Container } from '@/components/elements/Container';
+import type { RootIdentityProps } from '@gradial/aci';
 import { Logo } from '@/components/elements/Logo';
 import type { FooterColumn, FooterGroup, FooterLink } from '@gradial/aci/content';
 
-interface FooterProps {
+interface FooterProps extends RootIdentityProps {
   brandHref: string;
   brandLabel: string;
   brandLogo?: { src: string; alt?: string } | null;
@@ -17,9 +18,9 @@ function columnGroups(column: FooterColumn): FooterGroup[] {
   return [{ id: column.id, title: column.title || '', links: column.links || [] }];
 }
 
-export function Footer({ brandHref, brandLabel, brandLogo = null, columns = [], social = [], legalLinks = [], copyright = '' }: FooterProps) {
+export function Footer({ brandHref, brandLabel, brandLogo = null, columns = [], social = [], legalLinks = [], copyright = '', ...root }: FooterProps) {
   return (
-    <footer className="bm-footer relative pt-[var(--spacing-footer-y)]" id="footer">
+    <footer {...root} className="bm-footer relative pt-[var(--spacing-footer-y)]" id="footer">
       <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand-500)] to-transparent opacity-50" />
       <Container>
         <div className="footer-main-grid grid grid-cols-1 gap-12 lg:grid-cols-2">

package/templates/nextjs/starter-content/src/components/chrome/Header.tsx

@@ -2,9 +2,10 @@ import { Button } from '@/components/elements/Button';
 import { Container } from '@/components/elements/Container';
 import { Icon } from '@/components/elements/Icon';
 import { Logo } from '@/components/elements/Logo';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { NavItem, UtilityItem } from '@gradial/aci/content';
 
-interface HeaderProps {
+interface HeaderProps extends RootIdentityProps {
   brandHref: string;
   brandLabel: string;
   brandLogo?: { src: string; alt?: string } | null;
@@ -12,9 +13,9 @@ interface HeaderProps {
   utilities?: UtilityItem[];
 }
 
-export function Header({ brandHref, brandLabel, brandLogo = null, navigation = [], utilities = [] }: HeaderProps) {
+export function Header({ brandHref, brandLabel, brandLogo = null, navigation = [], utilities = [], ...root }: HeaderProps) {
   return (
-    <header className="bm-header fixed top-0 left-0 right-0 z-[var(--z-header)] border-b border-[var(--header-border)]">
+    <header {...root} className="bm-header fixed top-0 left-0 right-0 z-[var(--z-header)] border-b border-[var(--header-border)]">
       <a href="#content-main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[var(--z-overlay)] focus:rounded-button focus:bg-[var(--color-space-900)] focus:px-4 focus:py-2 focus:text-[var(--color-white)]">
         Skip to main content
       </a>

package/templates/nextjs/starter-content/src/components/elements/Button.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
 import type { ButtonVariant } from '@gradial/aci/content';
 
 type ButtonSize = 'default' | 'lg';
 
-interface ButtonProps {
+interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'target' | 'rel' | 'children'> {
   href: string;
   variant?: ButtonVariant;
   size?: ButtonSize;
@@ -26,9 +26,10 @@ const sizeClasses: Record<ButtonSize, string> = {
   lg: 'px-7 py-3.5 min-h-[3.5rem] text-[length:var(--text-size-body-large)]',
 };
 
-export function Button({ href, variant = 'primary', size = 'default', className = '', target, rel, children }: ButtonProps) {
+export function Button({ href, variant = 'primary', size = 'default', className = '', target, rel, children, ...root }: ButtonProps) {
   return (
     <a
+      {...root}
       className={`inline-flex items-center justify-center gap-2 rounded-button leading-button font-[var(--font-weight-semibold)] no-underline transition-all duration-[var(--transition-duration-fast)] ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
       href={href}
       target={target}

package/templates/nextjs/starter-content/src/components/elements/ButtonBlock.tsx

@@ -1,15 +1,16 @@
 import { Button } from '@/components/elements/Button';
 import { Icon } from '@/components/elements/Icon';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { ContentProps } from '@/cms/contracts/components/button.contract';
 
-export type ButtonBlockProps = ContentProps;
+export type ButtonBlockProps = ContentProps & RootIdentityProps;
 
-export function ButtonBlock({ label = '', href = '#', variant = 'primary', newWindow = false, icon = '', iconPosition = 'before', className = '' }: ButtonBlockProps) {
+export function ButtonBlock({ label = '', href = '#', variant = 'primary', newWindow = false, icon = '', iconPosition = 'before', className = '', ...root }: ButtonBlockProps) {
   const target = newWindow ? '_blank' : undefined;
   const rel = newWindow ? 'noreferrer' : undefined;
 
   return (
-    <Button href={href} variant={variant} target={target} rel={rel} className={className}>
+    <Button href={href} variant={variant} target={target} rel={rel} className={className} {...root}>
       {icon && iconPosition === 'before' ? <Icon name={icon} /> : null}
       <span>{label}</span>
       {icon && iconPosition === 'after' ? <Icon name={icon} /> : null}

package/templates/nextjs/starter-content/src/components/sections/ContainerSection.tsx

@@ -1,5 +1,6 @@
 import { Container } from '@/components/elements/Container';
 import { type ContentProps } from '@/cms/contracts/components/container.contract';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { RenderChildren } from '@gradial/aci/react';
 
 export async function ContainerSection({
@@ -7,14 +8,15 @@ export async function ContainerSection({
   className = '',
   content,
   renderChildren,
-}: ContentProps & { renderChildren: RenderChildren<NonNullable<ContentProps['content']>> }) {
+  ...root
+}: ContentProps & RootIdentityProps & { renderChildren: RenderChildren<NonNullable<ContentProps['content']>> }) {
   const buttonCount = content?.filter((b) => b.component === 'button').length ?? 0;
   const layout = buttonCount === 1
     ? 'flex-col items-center'
     : 'flex-col items-center sm:flex-row sm:justify-center sm:gap-4';
 
   return (
-    <section className={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`}>
+    <section className={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`} {...root}>
       {theme === 'dark' ? (
         <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-30" />
       ) : null}

package/templates/nextjs/starter-content/src/components/sections/FeatureCard.tsx

@@ -1,11 +1,12 @@
 import { Icon } from '@/components/elements/Icon';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { ContentProps } from '@/cms/contracts/components/featureCard.contract';
 
-export type FeatureCardProps = ContentProps;
+export type FeatureCardProps = ContentProps & RootIdentityProps;
 
-export function FeatureCard({ icon = '', title = '', description = '' }: FeatureCardProps) {
+export function FeatureCard({ icon = '', title = '', description = '', ...root }: FeatureCardProps) {
   return (
-    <div className="group relative overflow-hidden rounded-card border border-[var(--color-border-default)] bg-[var(--color-white)] p-[var(--spacing-card)] shadow-[var(--shadow-card-default)] transition-all duration-[var(--transition-duration-fast)] hover:-translate-y-1 hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevated)]">
+    <div {...root} className="group relative overflow-hidden rounded-card border border-[var(--color-border-default)] bg-[var(--color-white)] p-[var(--spacing-card)] shadow-[var(--shadow-card-default)] transition-all duration-[var(--transition-duration-fast)] hover:-translate-y-1 hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevated)]">
       <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand-500)] to-transparent opacity-0 transition-opacity duration-[var(--transition-duration-fast)] group-hover:opacity-100" />
       {icon ? (
         <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-button border border-[var(--color-border-default)] bg-[var(--color-surface-100)] text-[var(--color-brand-600)] shadow-[var(--shadow-glow-sm)] transition-colors group-hover:border-[var(--color-brand-500)] group-hover:text-[var(--color-brand-500)]">

package/templates/nextjs/starter-content/src/components/sections/FeatureGrid.tsx

@@ -1,5 +1,6 @@
 import { Container } from '@/components/elements/Container';
 import { type ContentProps } from '@/cms/contracts/components/featureGrid.contract';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { RenderChildren } from '@gradial/aci/react';
 
 export async function FeatureGrid({
@@ -7,12 +8,13 @@ export async function FeatureGrid({
   subtitle = '',
   features,
   renderChildren,
-}: ContentProps & { renderChildren: RenderChildren<NonNullable<ContentProps['features']>> }) {
+  ...root
+}: ContentProps & RootIdentityProps & { renderChildren: RenderChildren<NonNullable<ContentProps['features']>> }) {
   const count = features?.length ?? 0;
   const cols = count <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
 
   return (
-    <section className="theme-light relative overflow-hidden py-[var(--spacing-section-y)] bg-[var(--color-white)]">
+    <section className="theme-light relative overflow-hidden py-[var(--spacing-section-y)] bg-[var(--color-white)]" {...root}>
       <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-50" />
       <Container className="relative">
         <div className="mb-14 max-w-[var(--max-width-container-narrow)]">

package/templates/nextjs/starter-content/src/components/sections/HomeHero.tsx

@@ -1,18 +1,19 @@
 import { Button } from '@/components/elements/Button';
 import { Container } from '@/components/elements/Container';
-import { primaryImageSource } from '@gradial/aci';
+import { primaryImageSource, type RootIdentityProps } from '@gradial/aci';
 import type { ContentProps } from '@/cms/contracts/components/homeHero.contract';
 
 type HeroImage = NonNullable<ContentProps['image']>;
 
-export type HomeHeroProps = Omit<ContentProps, 'image'> & { image?: HeroImage };
+export type HomeHeroProps = Omit<ContentProps, 'image'> & { image?: HeroImage } & RootIdentityProps;
 
-export function HomeHero({ eyebrow = '', headline = '', description = '', ctaLabel = '', ctaHref = '#', image }: HomeHeroProps) {
+export function HomeHero({ eyebrow = '', headline = '', description = '', ctaLabel = '', ctaHref = '#', image, ...root }: HomeHeroProps) {
   const imageSrc = heroImageSrc(image);
   const imageAlt = image?.alt || headline;
 
   return (
     <section
+      {...root}
       className="theme-light relative flex min-h-[var(--height-hero-min)] items-center bg-cover bg-center"
       aria-label={imageAlt}
       style={{

package/templates/nextjs/starter-content/src/components/sections/PersonalizationChoice.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { ContentProps } from '@/cms/contracts/components/personalizationChoice.contract';
 
 type AciWindow = Window & { aci?: (command: string, value: unknown) => void };
@@ -15,7 +16,8 @@ export function PersonalizationChoice({
   redLabel,
   blueLabel,
   refreshLabel,
-}: ContentProps) {
+  ...root
+}: ContentProps & RootIdentityProps) {
   const [consent, setConsent] = useState(false);
   const [marker, setMarker] = useState(false);
 
@@ -30,7 +32,7 @@ export function PersonalizationChoice({
   }, []);
 
   return (
-    <section className="border-y border-[var(--color-border)] bg-[var(--color-surface)] py-[var(--spacing-section-y)]">
+    <section className="border-y border-[var(--color-border)] bg-[var(--color-surface)] py-[var(--spacing-section-y)]" {...root}>
       <div className="mx-auto max-w-[var(--layout-content-max)] px-[var(--layout-gutter)] text-center">
         <h2 className="text-[length:var(--text-h2)] font-[var(--font-weight-semibold)] text-[var(--color-fg)]">{title}</h2>
         {description ? <p className="mx-auto mt-3 max-w-2xl text-[var(--color-fg-muted)]">{description}</p> : null}

package/templates/nextjs/starter-content/src/components/sections/StatsBar.tsx

@@ -1,11 +1,12 @@
 import { Container } from '@/components/elements/Container';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { ContentProps } from '@/cms/contracts/components/statsBar.contract';
 
-export type StatsBarProps = ContentProps;
+export type StatsBarProps = ContentProps & RootIdentityProps;
 
-export function StatsBar({ stats = [] }: StatsBarProps) {
+export function StatsBar({ stats = [], ...root }: StatsBarProps) {
   return (
-    <section className="theme-light relative border-y border-[var(--color-border-default)] bg-[var(--color-surface-100)] py-[var(--spacing-section-y)]">
+    <section {...root} className="theme-light relative border-y border-[var(--color-border-default)] bg-[var(--color-surface-100)] py-[var(--spacing-section-y)]">
       <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-40" />
       <Container className="relative">
         <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">

package/templates/nextjs/template/.aci.yaml

@@ -0,0 +1,9 @@
+version: "1"
+siteId: "starter-nextjs"
+framework: next
+source:
+  root: "./"
+componentRegistry: "src/cms/registry.ts"
+routes:
+  cmsManaged: "/[...slug]"
+rendererProtocol: stdio-json

package/templates/nextjs/template/.aci.yaml.tmpl

@@ -7,7 +7,6 @@ source:
   root: "./"
 
 componentRegistry: ./src/cms/contracts/components/index.ts
-layoutRegistry: ./src/cms/contracts/layouts/index.ts
 
 routes:
   cmsManaged: "/[...slug]"

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

@@ -15,12 +15,13 @@
     "build:storybook": "storybook build"
   },
   "engines": {
-    "node": ">=22",
+    "node": ">=24",
     "npm": ">=10"
   },
   "dependencies": {
+    "@c15t/nextjs": "^2.2.1",
     "@gradial/aci": "{{aciVersion}}",
-    "next": "^15.1.6",
+    "next": "15.5.24",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -31,7 +32,7 @@
     "@eslint/compat": "^1.2.0",
     "@eslint/eslintrc": "^3.2.0",
     "eslint": "^9.18.0",
-    "eslint-config-next": "^15.1.6",
+    "eslint-config-next": "15.5.24",
     "eslint-plugin-import": "^2.29.1",
     "tailwindcss": "^4.2.4",
     "@tailwindcss/postcss": "^4.2.4",