@gradial/aci 0.1.52-rc.8 → 0.1.52

package/templates/common/.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/common/.content/templates/error.json

@@ -0,0 +1,24 @@
+{
+  "$type": "pageTemplate",
+  "name": "error",
+  "description": "Error pages are a single hero that points visitors back home.",
+  "routes": ["/404", "/error"],
+  "regions": [
+    {
+      "name": "header",
+      "defaults": ["navbar"],
+      "sequence": [{ "id": "navbar", "fragment": ["navbar"] }]
+    },
+    {
+      "name": "main",
+      "sequence": [
+        { "id": "hero", "component": "home_hero" }
+      ]
+    },
+    {
+      "name": "footer",
+      "defaults": ["site-footer"],
+      "sequence": [{ "id": "site-footer", "fragment": ["site-footer"] }]
+    }
+  ]
+}

package/templates/common/.content/templates/home.json

@@ -0,0 +1,28 @@
+{
+  "$type": "pageTemplate",
+  "name": "home",
+  "description": "The home page: a hero, the feature grid, the personalization choice, the stats bar, and the closing call-to-action container, in that order.",
+  "routes": ["/"],
+  "regions": [
+    {
+      "name": "header",
+      "defaults": ["navbar"],
+      "sequence": [{ "id": "navbar", "fragment": ["navbar"] }]
+    },
+    {
+      "name": "main",
+      "sequence": [
+        { "id": "hero", "component": "home_hero", "lock": "structure" },
+        { "id": "features", "component": "feature_grid" },
+        { "id": "choice", "component": "personalization_choice" },
+        { "id": "stats", "component": "stats_bar" },
+        { "id": "cta", "component": "container" }
+      ]
+    },
+    {
+      "name": "footer",
+      "defaults": ["site-footer"],
+      "sequence": [{ "id": "site-footer", "fragment": ["site-footer"] }]
+    }
+  ]
+}

package/templates/common/.content/templates/site.json

@@ -0,0 +1,8 @@
+{
+  "$type": "globalPolicy",
+  "name": "site",
+  "description": "No page carries more than two buttons, including nested blocks and rendered fragments.",
+  "counts": [
+    { "component": "button", "max": 2 }
+  ]
+}

package/templates/common/.content/templates/standard.json

@@ -0,0 +1,24 @@
+{
+  "$type": "pageTemplate",
+  "name": "standard",
+  "description": "Interior pages declare this template: a hero first, then any blocks the page needs.",
+  "regions": [
+    {
+      "name": "header",
+      "defaults": ["navbar"],
+      "sequence": [{ "id": "navbar", "fragment": ["navbar"] }]
+    },
+    {
+      "name": "main",
+      "closed": false,
+      "sequence": [
+        { "id": "hero", "component": "home_hero" }
+      ]
+    },
+    {
+      "name": "footer",
+      "defaults": ["site-footer"],
+      "sequence": [{ "id": "site-footer", "fragment": ["site-footer"] }]
+    }
+  ]
+}

package/templates/common/.nvmrc

@@ -1 +1 @@
-22
+24

package/templates/common/starter-content/.content/config/site.json

@@ -10,7 +10,7 @@
     "notFound": "/404/",
     "catchAll": "/error/"
   },
-  "overlayResolution": ["locale", "audience"],
+  "overlayResolution": ["locale", "audience", "segment"],
   "brandHref": "/",
   "brandLogo": {
     "src": "/assets/meridian-logo.svg",

package/templates/common/starter-content/.content/dam/README.md

@@ -0,0 +1,74 @@
+# Seed DAM assets
+
+This folder is a local, file-based copy of two DAM assets. The sample pages
+reference them so the starter renders images without a running DAM service.
+Copy one of the seed folders to mock a new asset for a page.
+
+## How a page references an asset
+
+A component prop holds a `dam.assetRef` object. The home page hero uses it:
+
+```json
+"image": {
+  "$type": "dam.assetRef",
+  "assetId": "000000000000000000000000101",
+  "alt": "Light abstract hero background with satellite constellation"
+}
+```
+
+- `assetId` — must match the `assetId` in one `asset.json` under `folders/`
+- `alt` — optional; omit it to use the `altText` from `editorial.json`
+- `version` — optional; omit it to use the newest approved version
+
+The component schema (see `patterns/components/home_hero.json`) declares the
+prop as `gradial.image`, not `dam.assetRef`. That is expected. The content
+build resolves the ref and writes the `gradial.image` shape, with `sources`
+filled in, into the compiled page. You author the ref; the build materializes
+the image.
+
+## What one seed asset contains
+
+Each asset is one folder under `folders/<group>/<assetId>/` plus one
+content-addressed blob under `blobs/`. The local build scans every
+`asset.json` under `folders/`, so the group name (`seed`) does not matter
+for rendering. `aci content push` does use it: the path under `folders/`
+becomes the folder path in the remote DAM.
+
+```
+folders/seed/<assetId>/asset.json           dam.asset: id and audit fields
+folders/seed/<assetId>/editorial.json       dam.editorial: title, altText, tags
+folders/seed/<assetId>/governance.json      dam.governance: asset status and per-version approval
+folders/seed/<assetId>/versions/v0001.json  dam.assetVersion: blob key, sha256, mime, dimensions
+blobs/sha256/<aa>/<bb>/<sha256>             the raw image bytes
+```
+
+## Add a new mocked asset
+
+This is a step-by-step procedure.
+
+1. Pick an asset ID. Use 27 base62 characters. The seed IDs pad a small
+   number with leading zeros, for example `000000000000000000000000103`.
+2. Compute the SHA-256 of the image file. Copy the file to
+   `blobs/sha256/<first 2 hex>/<next 2 hex>/<full sha256>` with no extension.
+3. Copy `folders/seed/000000000000000000000000101/` to a new folder named
+   after the new asset ID.
+4. In `asset.json`, set `assetId` to the new ID.
+5. In `versions/v0001.json`, set `blob.sha256`, `blob.key`, `blob.byteSize`,
+   `blob.mime`, `blob.originalFilename`, and `technical.dimensions`.
+6. In `editorial.json`, set `altText`. The build fails on an empty alt text
+   when the page ref does not supply its own `alt`.
+7. In `governance.json`, keep `asset.status` as `active` and the version
+   `status` as `approved`. The build applies the same eligibility gate as
+   production and rejects a draft, embargoed, or restricted version.
+8. Reference the new ID from a page prop with `"$type": "dam.assetRef"`.
+
+## Serving bytes locally
+
+The content build only needs the metadata files to compile a page. To serve
+the image bytes from the local object store, run from the repo root:
+
+```sh
+scripts/seed-local-dam-minio.sh packages/sdk/templates/common/starter-content/.content
+```
+
+The script uploads every blob referenced by a `versions/*.json` file.

package/templates/common/starter-content/.content/dam/folders/seed/{ast_site_about_hero → 000000000000000000000000101}/asset.json

@@ -1,7 +1,7 @@
 {
   "$type": "dam.asset",
   "schemaVersion": 1,
-  "assetId": "ast_site_about_hero",
+  "assetId": "000000000000000000000000101",
   "createdAt": "2026-06-01T00:00:00Z",
   "createdBy": "local-seed",
   "updatedAt": "2026-06-01T00:00:00Z",

package/templates/common/starter-content/.content/dam/folders/seed/{ast_site_home_hero → 000000000000000000000000102}/asset.json

@@ -1,7 +1,7 @@
 {
   "$type": "dam.asset",
   "schemaVersion": 1,
-  "assetId": "ast_site_home_hero",
+  "assetId": "000000000000000000000000102",
   "createdAt": "2026-06-01T00:00:00Z",
   "createdBy": "local-seed",
   "updatedAt": "2026-06-01T00:00:00Z",

package/templates/common/starter-content/.content/pages/404/_index.json

@@ -2,7 +2,6 @@
   "$type": "page",
   "id": "meridian-not-found",
   "status": "published",
-  "layout": "default",
   "metadata": {
     "title": "Page not found — Meridian",
     "description": "The page you are looking for does not exist.",
@@ -22,7 +21,7 @@
           "ctaHref": "/",
           "image": {
             "$type": "dam.assetRef",
-            "assetId": "ast_site_home_hero",
+            "assetId": "000000000000000000000000101",
             "alt": "Light abstract background with satellite constellation"
           }
         }

package/templates/common/starter-content/.content/pages/{home/_index.json → _index.json}

@@ -2,9 +2,8 @@
   "$type": "page",
   "id": "meridian-home",
   "status": "published",
-  "layout": "default",
   "metadata": {
-    "title": "Meridian \u2014 Global Satellite Internet",
+    "title": "Meridian — Global Satellite Internet",
     "description": "Connect from anywhere on Earth. Low-latency satellite internet for homes, businesses, and beyond.",
     "canonical": "https://www.meridian.local/"
   },
@@ -22,7 +21,7 @@
           "ctaHref": "/plans/",
           "image": {
             "$type": "dam.assetRef",
-            "assetId": "ast_site_home_hero",
+            "assetId": "000000000000000000000000101",
             "alt": "Light abstract hero background with satellite constellation"
           }
         }
@@ -68,6 +67,18 @@
           ]
         }
       },
+      {
+        "$type": "component",
+        "id": "personalization-choice",
+        "component": "personalization_choice",
+        "props": {
+          "title": "Choose your connection preference",
+          "description": "Select a preference, allow the update to process, then refresh personalization.",
+          "redLabel": "Choose Red",
+          "blueLabel": "Choose Blue",
+          "refreshLabel": "Refresh personalization"
+        }
+      },
       {
         "$type": "component",
         "id": "stats",

package/templates/common/starter-content/.content/pages/about/_index.json

@@ -2,7 +2,7 @@
   "$type": "page",
   "id": "meridian-about",
   "status": "published",
-  "layout": "default",
+  "template": "standard",
   "metadata": {
     "title": "About Meridian",
     "description": "Meridian is building the next generation of satellite internet to connect the unconnected.",
@@ -22,7 +22,7 @@
           "ctaHref": "/",
           "image": {
             "$type": "dam.assetRef",
-            "assetId": "ast_site_about_hero",
+            "assetId": "000000000000000000000000102",
             "alt": "Meridian network coverage map with soft gradient"
           }
         }

package/templates/common/starter-content/.content/pages/error/_index.json

@@ -2,7 +2,6 @@
   "$type": "page",
   "id": "meridian-error",
   "status": "published",
-  "layout": "default",
   "metadata": {
     "title": "Something went wrong — Meridian",
     "description": "An unexpected error occurred while serving this page.",
@@ -22,7 +21,7 @@
           "ctaHref": "/",
           "image": {
             "$type": "dam.assetRef",
-            "assetId": "ast_site_home_hero",
+            "assetId": "000000000000000000000000101",
             "alt": "Light abstract background with satellite constellation"
           }
         }

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "button",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "container",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",
@@ -34,7 +34,12 @@
             },
             "component": {
               "type": "string",
-              "minLength": 1
+              "enum": [
+                "button",
+                "feature_grid",
+                "feature_card",
+                "stats_bar"
+              ]
             },
             "props": {
               "type": "object",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "feature_card",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "feature_grid",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",
@@ -29,7 +29,9 @@
             },
             "component": {
               "type": "string",
-              "minLength": 1
+              "enum": [
+                "feature_card"
+              ]
             },
             "props": {
               "type": "object",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "home_hero",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "personalization_choice",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "site-footer",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "site-navigation",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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

@@ -1,7 +1,7 @@
 {
   "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a0d03d-1243-7f49-9ead-8599ed577882",
+  "codeDigest": "sha256:44327370dc42bcabe39daf8b86fca1fe191e19dbd8dd39db71df2109c11b3635",
   "name": "stats_bar",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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)]">