@gradial/aci 0.1.52-rc.21 → 0.1.52-rc.24

package/templates/astro/starter-content/src/components/sections/ContainerSection.astro

@@ -1,15 +1,16 @@
 ---
 import Container from '../elements/Container.astro';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { RenderChildren, RenderableBlock } from '@gradial/aci/astro';
 
-interface Props {
+interface Props extends RootIdentityProps {
   theme?: 'auto' | 'light' | 'dark';
   className?: string;
   content?: any[];
   renderChildren?: RenderChildren;
 }
 
-const { theme = 'auto', className = '', content, renderChildren } = Astro.props;
+const { theme = 'auto', className = '', content, renderChildren, ...root } = Astro.props;
 const children: RenderableBlock[] = content && renderChildren ? renderChildren(content) : [];
 const buttonCount = content?.filter((b: any) => b.component === 'button').length ?? 0;
 const layout = buttonCount === 1
@@ -17,7 +18,7 @@ const layout = buttonCount === 1
   : 'flex-col items-center sm:flex-row sm:justify-center sm:gap-4';
 ---
 
-<section class={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`}>
+<section {...root} class={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`}>
   {theme === 'dark' ? (
     <div class="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-30"></div>
   ) : null}

package/templates/astro/starter-content/src/components/sections/FeatureCard.astro

@@ -1,16 +1,17 @@
 ---
 import Icon from '../elements/Icon.astro';
+import type { RootIdentityProps } from '@gradial/aci';
 
-interface Props {
+interface Props extends RootIdentityProps {
   icon?: string;
   title: string;
   description?: string;
 }
 
-const { icon = '', title = '', description = '' } = Astro.props;
+const { icon = '', title = '', description = '', ...root } = Astro.props;
 ---
 
-<div class="rounded-card border border-[var(--color-edge-space)] bg-[var(--color-space-surface)] p-[var(--spacing-card)] transition-all duration-[var(--transition-duration-fast)] hover:border-[var(--color-edge-space-strong)] hover:bg-[var(--color-space-raised)] hover:shadow-[var(--shadow-card-default)]">
+<div {...root} class="rounded-card border border-[var(--color-edge-space)] bg-[var(--color-space-surface)] p-[var(--spacing-card)] transition-all duration-[var(--transition-duration-fast)] hover:border-[var(--color-edge-space-strong)] hover:bg-[var(--color-space-raised)] hover:shadow-[var(--shadow-card-default)]">
   {icon ? (
     <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-button bg-[color-mix(in_srgb,var(--color-brand-blue)_12%,transparent)] text-[var(--color-brand-blue-light)]">
       <Icon name={icon} className="h-6 w-6" />

package/templates/astro/starter-content/src/components/sections/FeatureGrid.astro

@@ -1,21 +1,22 @@
 ---
 import Container from '../elements/Container.astro';
+import type { RootIdentityProps } from '@gradial/aci';
 import type { RenderChildren, RenderableBlock } from '@gradial/aci/astro';
 
-interface Props {
+interface Props extends RootIdentityProps {
   title?: string;
   subtitle?: string;
   features?: any[];
   renderChildren?: RenderChildren;
 }
 
-const { title = '', subtitle = '', features, renderChildren } = Astro.props;
+const { title = '', subtitle = '', features, renderChildren, ...root } = Astro.props;
 const children: RenderableBlock[] = features && renderChildren ? renderChildren(features) : [];
 const count = features?.length ?? 0;
 const cols = count <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
 ---
 
-<section class="theme-dark py-[var(--spacing-section-y)] bg-[var(--color-space-deep)]">
+<section {...root} class="theme-dark py-[var(--spacing-section-y)] bg-[var(--color-space-deep)]">
   <Container>
     <div class="mb-12 max-w-[var(--max-width-container-narrow)]">
       {title ? (

package/templates/astro/starter-content/src/components/sections/HomeHero.astro

@@ -1,9 +1,9 @@
 ---
 import Button from '../elements/Button.astro';
 import Container from '../elements/Container.astro';
-import { imageAttrs, type Image } from '@gradial/aci';
+import { imageAttrs, type Image, type RootIdentityProps } from '@gradial/aci';
 
-interface Props {
+interface Props extends RootIdentityProps {
   eyebrow?: string;
   headline: string;
   description?: string;
@@ -18,7 +18,8 @@ const {
   description = '',
   ctaLabel,
   ctaHref,
-  image
+  image,
+  ...root
 } = Astro.props;
 
 const imgAttrs = image ? imageAttrs(image, {
@@ -29,6 +30,7 @@ const imgAttrs = image ? imageAttrs(image, {
 ---
 
 <section
+  {...root}
   class="theme-dark relative min-h-[var(--height-hero-min)] overflow-hidden bg-black text-fg"
   aria-label={image?.alt || headline}
 >

package/templates/astro/starter-content/src/components/sections/PersonalizationChoice.astro

@@ -1,12 +1,13 @@
 ---
+import type { RootIdentityProps } from '@gradial/aci';
 import type { ContentProps } from '../../cms/contracts/components/personalizationChoice.contract';
 
-type Props = ContentProps;
+type Props = ContentProps & RootIdentityProps;
 
-const { title, description, redLabel, blueLabel, refreshLabel } = Astro.props;
+const { title, description, redLabel, blueLabel, refreshLabel, ...root } = Astro.props;
 ---
 
-<section class="border-y border-[var(--color-border)] bg-[var(--color-surface)] py-[var(--spacing-section-y)]">
+<section {...root} class="border-y border-[var(--color-border)] bg-[var(--color-surface)] py-[var(--spacing-section-y)]">
   <div class="mx-auto max-w-[var(--layout-content-max)] px-[var(--layout-gutter)] text-center">
     <h2 class="text-[length:var(--text-h2)] font-[var(--font-weight-semibold)] text-[var(--color-fg)]">{title}</h2>
     {description ? <p class="mx-auto mt-3 max-w-2xl text-[var(--color-fg-muted)]">{description}</p> : null}

package/templates/astro/starter-content/src/components/sections/StatsBar.astro

@@ -1,5 +1,6 @@
 ---
 import Container from '../elements/Container.astro';
+import type { RootIdentityProps } from '@gradial/aci';
 
 interface Stat {
   label: string;
@@ -7,14 +8,14 @@ interface Stat {
   suffix?: string;
 }
 
-interface Props {
+interface Props extends RootIdentityProps {
   stats?: Stat[];
 }
 
-const { stats = [] } = Astro.props;
+const { stats = [], ...root } = Astro.props;
 ---
 
-<section class="theme-dark border-y border-[var(--color-edge-space)] bg-[var(--color-space-surface)] py-[var(--spacing-section-y)]">
+<section {...root} class="theme-dark border-y border-[var(--color-edge-space)] bg-[var(--color-space-surface)] py-[var(--spacing-section-y)]">
   <Container>
     <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
       {stats.map((stat) => (

package/templates/astro/starter-content/src/fixtures/sections.ts

@@ -25,7 +25,7 @@ export const sectionStoryFixtures: SectionStoryFixture[] = [
         ctaHref: '/docs',
         image: {
           $type: 'gradial.image',
-          assetId: 'fixture_seattle',
+          assetId: '3Ih26etWBTYfnAd0EjD0pP2h902',
           versionId: 'v0001',
           alt: 'Seattle skyline at dusk',
           sources: [

package/templates/astro/starter-content/src/stories/CompositionStoryFrame.astro

@@ -1,6 +1,7 @@
 ---
 import type { KernelPageBlock } from '@gradial/aci/content';
-import ContainerSection from '../components/sections/ContainerSection.astro';
+import { createRenderChildren } from '@gradial/aci/astro';
+import { registry } from '../cms/registry';
 
 interface Props {
   block: KernelPageBlock;
@@ -8,8 +9,12 @@ interface Props {
 }
 
 const { block, direction = 'ltr' } = Astro.props;
+// Stories render through the same seam as pages so the frame carries the
+// block's root identity (sdk I-19, ADR 0051).
+const [child] = createRenderChildren(registry)([block]);
+const Comp = child.Component as any;
 ---
 
 <div dir={direction}>
-  {block.component === 'container' ? <ContainerSection {...block.props} /> : null}
+  {Comp ? <Comp {...child.props} /> : null}
 </div>

package/templates/astro/template/package.json.tmpl

@@ -31,9 +31,9 @@
     "tsx": "^4.20.0",
     "typescript": "5.9.3",
     "vite": "^7.2.7",
-    "storybook": "^10.0.0",
-    "@storybook-astro/framework": "^1.6.0",
-    "@storybook/addon-docs": "^10.0.0",
-    "@storybook/builder-vite": "^10.0.0"
+    "storybook": "10.5.10",
+    "@storybook-astro/framework": "1.11.0",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/builder-vite": "10.5.10"
   }
 }

package/templates/common/.agents/skills/aci/SKILL.md

@@ -152,6 +152,56 @@ Optional (disabled by default):
 
 ## Troubleshooting
 
+### Deploying a starter to a hosted Vercel tenant
+
+Run the CLI from the starter repository root (where `.aci.yaml` lives), or
+pass `--site-dir .` from that directory. Do not pass an absolute site path
+from another working directory: older CLI versions can serialize it as a
+`../../../tmp/...` source folder, which makes the server-side build fail with
+a generic HTTP 500. The source ref must also be a pushed, cloneable branch;
+`ref: HEAD` from a detached worktree is not cloneable by the build service.
+
+The hosted publish sequence is:
+
+1. `GRADIAL_CODE_SOURCE_TOKEN="$(gh auth token)" aci code-build --site-dir . --branch <test-branch> ...`
+2. `aci branch land <test-branch>` to move the artifact link to `main`.
+3. Promote `/config/site.json` and the content paths needed by the release.
+4. Run `aci release publish --activate ...`.
+
+Match the tenant rendering mode to the starter's actual route capability. A
+Next starter with `dynamicParams = false` and no release-scoped runtime route
+is an SSG starter and must use `rendering.mode = "ssg"`; `ssr` is only valid
+when the frontend can resolve arbitrary host release routes at request time.
+A mismatch can build successfully but then fail SSG rendering or return a
+live Next 404 after the host rewrites a CMS page.
+
+Injected platform functions must be dependency-closed inside their own
+`.vercel/output/functions/<name>.func` mount. A prebuilt Vercel deploy does not
+install a function-local `package.json` after upload. Native dependencies such
+as `sharp` therefore belong to the host-function artifact, built for Vercel's
+Linux/x64 runtime and injected beside the handler; never add them to the
+starter's `package.json` merely to make a platform function resolve.
+
+Publish validates `refs/heads/live`, not only `main`. If `main` deletes a
+stale incompatible page or fragment that was previously promoted, promote
+that same path from `main` with `aci promote --path ... --yes`; because the
+source path is absent, the promote records a delete on `live`. This is the
+API-safe way to remove old live content—direct writes to `live` are forbidden.
+
+The same rule applies to breaking DAM identifier changes: every
+`dam.assetRef` in `live` is resolved during publish, so one legacy identifier
+blocks the release. Update the reference on a candidate branch through
+`aci content push`, land it, and promote that exact content path before
+publishing again. Do not weaken identifier validation or reactivate an old
+release to bypass the content migration.
+
+Legacy assets themselves are replaced through the product API, not rewritten
+in storage: download or retain the needed source bytes, upload them again so
+DAM creates fresh canonical IDs, approve them, replace every content reference,
+then land, promote, and publish the affected paths. This is the supported
+breaking cutover for pre-public tenants; there is no `ast_` alias or bulk
+object-store migration path.
+
 ### "Unknown component" error during content compile
 
 The content JSON references a `component` name that is not in the contract

package/templates/common/.agents/skills/authoring/SKILL.md

@@ -78,12 +78,13 @@ Pages map to URL routes by their folder path under `/pages/`:
 
 | Page Path | Route |
 |-----------|-------|
-| `/pages/home/_index.json` | `/` |
+| `/pages/_index.json` | `/` |
 | `/pages/about/_index.json` | `/about` |
 | `/pages/products/_index.json` | `/products` |
 | `/pages/products/shoes/_index.json` | `/products/shoes` |
 
-The `home` slug is special-cased to route `/`. All other slugs map directly.
+The empty slug is the site root. Every named folder maps directly, including
+`/pages/home/_index.json` at `/home`.
 
 ### Content Rules
 
@@ -486,7 +487,7 @@ framework.
 #### 5. Add content
 
 ```json
-// .content/pages/home/_index.json (inside regions.main)
+// .content/pages/_index.json (inside regions.main)
 {
   "$type": "component",
   "id": "features",

package/templates/common/.agents/skills/authoring/references/block-registry.md

@@ -3,6 +3,21 @@
 The component registry maps contract names to runtime components. It is built
 using `createRegistry` from `@gradial/aci` with raw `[contract, component]` tuples.
 
+Every registered component must extend `RootIdentityProps` (exported from
+`@gradial/aci`) and spread the rest of its props onto its root element. The
+renderer passes `data-aci-block` and `data-aci-component` to every block so
+analytics can join events to content; a component that does not declare the
+type fails `createRegistry` typecheck with
+`<id>: props type must extend RootIdentityProps from @gradial/aci`, and one
+that does not spread fails the `rootIdentity` conformance check under
+`npm test`.
+
+```tsx
+export function StatsBar({ stats = [], ...root }: ContentProps & RootIdentityProps) {
+  return <section {...root} className="…">…</section>;
+}
+```
+
 The tuple form provides **type-level validation** — the component must accept
 at least the props derived from the contract's Zod schema. If you register a
 component with the wrong prop type, TypeScript will fail at the call site.

package/templates/common/.agents/skills/migration/references/selector-map.md

@@ -13,7 +13,7 @@ Location: `artifacts/source-vs-target/selector-map.json`
   "targetUrl": "http://localhost:3000/",
   "breakpoints": [360, 768, 1024, 1280, 1400],
   "entries": {
-    "content/pages/home/_index.json blocks[\"home-hero\"]": {
+    "content/pages/_index.json blocks[\"home-hero\"]": {
       "source": ".home-hero",
       "target": ".home-hero",
       "viewport": "both",

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

@@ -27,7 +27,17 @@
     },
     "overlayResolution": {
       "type": "array",
-      "items": { "enum": ["locale", "audience", "segment", "experiment", "experimentArm"] }
+      "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/starter-content/.content/dam/folders/seed/{ast_site_home_hero → 000000000000000000000000101}/asset.json

@@ -1,7 +1,7 @@
 {
   "$type": "dam.asset",
   "schemaVersion": 1,
-  "assetId": "ast_site_home_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_about_hero → 000000000000000000000000102}/asset.json

@@ -1,7 +1,7 @@
 {
   "$type": "dam.asset",
   "schemaVersion": 1,
-  "assetId": "ast_site_about_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

@@ -22,7 +22,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}

@@ -4,7 +4,7 @@
   "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 +22,7 @@
           "ctaHref": "/plans/",
           "image": {
             "$type": "dam.assetRef",
-            "assetId": "ast_site_home_hero",
+            "assetId": "000000000000000000000000101",
             "alt": "Light abstract hero background with satellite constellation"
           }
         }

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

@@ -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

@@ -22,7 +22,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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "name": "container",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "name": "feature_grid",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "name": "home_hero",
   "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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "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_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "name": "stats_bar",
   "schema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",

package/templates/common/starter-content/.content/patterns/layouts/default.json

@@ -1,7 +1,7 @@
 {
   "$type": "layoutPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "buildId": "codebuild_01a05a33-bcc6-76ac-95bf-0c35b4c55280",
+  "codeDigest": "sha256:a19097814cad924bba8b584241b77f19d40c1c70012603e0faf9710853438015",
   "name": "default",
   "slots": [
     "header",

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

@@ -27,7 +27,17 @@
     },
     "overlayResolution": {
       "type": "array",
-      "items": { "enum": ["locale", "audience", "segment", "experiment", "experimentArm"] }
+      "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}