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

package/src/cli/compile-registry.mjs

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
+import { realpathSync } from 'node:fs';
 import { mkdir, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { pathToFileURL } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import { z } from 'zod';
 import { ImageSchema } from '../types/image.ts';
 import { VideoSchema } from '../types/video.ts';
@@ -19,24 +20,27 @@ try {
   if (!globalThis.React) globalThis.React = React;
 } catch { /* react not available — component files without JSX will still work */ }
 
-const args = parseArgs(process.argv.slice(2));
-
-try {
-  const result = await compileRegistry(args);
-  console.log(JSON.stringify({ success: true, ...result, errors: [] }, null, 2));
-} catch (error) {
-  console.error(JSON.stringify({ success: false, errors: [String(error?.message ?? error)] }, null, 2));
-  process.exitCode = 1;
+if (isMainModule()) {
+  const args = parseArgs(process.argv.slice(2));
+  try {
+    const result = await compileRegistry(args);
+    console.log(JSON.stringify({ success: true, ...result, errors: [] }, null, 2));
+  } catch (error) {
+    console.error(JSON.stringify({ success: false, errors: [String(error?.message ?? error)] }, null, 2));
+    process.exitCode = 1;
+  }
 }
 
 async function compileRegistry(options) {
-  const required = ['components', 'layouts', 'output'];
+  if (options.layouts) {
+    throw new Error('--layouts is retired; author page composition under /templates instead');
+  }
+  const required = ['components', 'output'];
   for (const key of required) {
     if (!options[key]) throw new Error(`missing --${key}`);
   }
 
   const components = await loadDefaultArray(options.components, 'component registry');
-  const layouts = await loadDefaultArray(options.layouts, 'layout registry');
   const dataModels = options.data
     ? await loadDefaultArray(options.data, 'data model registry')
     : [];
@@ -66,9 +70,6 @@ async function compileRegistry(options) {
     });
   }
 
-  const seenLayouts = new Set();
-  const layoutEntries = layouts.map((layout, index) => validateLayout(layout, index, seenLayouts));
-
   const seenDataModels = new Set();
   const dataModelEntries = [];
   if (dataModels.length > 0) {
@@ -102,7 +103,6 @@ async function compileRegistry(options) {
     manifestVersion: '1',
     generatedAt: new Date().toISOString(),
     components: componentEntries,
-    layouts: layoutEntries,
     dataModels: dataModelEntries,
   };
   const registryPath = path.join(outDir, 'registry.json');
@@ -116,7 +116,7 @@ async function compileRegistry(options) {
 
 async function loadDefaultArray(modulePath, label) {
   const mod = await import(pathToFileURL(path.resolve(modulePath)).href);
-  const value = mod.default ?? mod.registry ?? mod.components ?? mod.layouts ?? mod.dataModels;
+  const value = mod.default ?? mod.registry ?? mod.components ?? mod.dataModels;
   if (!Array.isArray(value)) throw new Error(`${label} must export an array`);
   return value;
 }
@@ -346,12 +346,10 @@ function isImageSchema(schema) {
     return compiled?.type === 'object'
       && properties.$type?.const === 'gradial.image'
       && properties.assetId?.type === 'string'
-      && properties.versionId?.type === 'string'
       && properties.alt?.type === 'string'
       && properties.sources?.type === 'array'
       && required.has('$type')
       && required.has('assetId')
-      && required.has('versionId')
       && required.has('alt')
       && required.has('sources');
   } catch {
@@ -388,27 +386,6 @@ function unwrapSchema(schema) {
   return current;
 }
 
-function validateLayout(layout, index, seen) {
-  if (!layout || typeof layout !== 'object') throw new Error(`layouts[${index}] must be an object`);
-  if (!layout.name) throw new Error(`layouts[${index}].name is required`);
-  if (seen.has(layout.name)) throw new Error(`duplicate layout name ${layout.name}`);
-  seen.add(layout.name);
-  if (!Array.isArray(layout.slots)) throw new Error(`layouts[${index}].slots must be an array`);
-  const slots = [];
-  const seenSlots = new Set();
-  for (const [slotIndex, slot] of layout.slots.entries()) {
-    if (!slot?.name) throw new Error(`layouts[${index}].slots[${slotIndex}].name is required`);
-    if (seenSlots.has(slot.name)) throw new Error(`duplicate slot name ${slot.name} in layout ${layout.name}`);
-    seenSlots.add(slot.name);
-    slots.push({ name: slot.name, required: Boolean(slot.required) });
-  }
-  const entry = { name: layout.name, slots };
-  if (layout.defaults && typeof layout.defaults === 'object') {
-    entry.defaults = layout.defaults;
-  }
-  return entry;
-}
-
 function compileSchema(schema, name) {
   const toJSONSchema = z.toJSONSchema;
   if (typeof toJSONSchema !== 'function') {
@@ -430,9 +407,10 @@ async function generatePageSchema(schemaDir, componentEntries, outDir) {
   const defs = {
     baseBlock: {
       type: 'object',
-      required: ['id', 'component', 'props'],
+      required: ['$type', 'id', 'component', 'props'],
       additionalProperties: true,
       properties: {
+        $type: { const: 'component' },
         id: { type: 'string', minLength: 1 },
         component: { type: 'string' },
         props: { type: 'object' },
@@ -502,13 +480,12 @@ async function generatePageSchema(schemaDir, componentEntries, outDir) {
     $id: 'https://baremetal.local/schemas/page.schema.json',
     title: 'bare-metal Page',
     type: 'object',
-    required: ['$type', 'id', 'status', 'layout', 'metadata', 'regions'],
+    required: ['$type', 'id', 'status', 'metadata', 'regions'],
     additionalProperties: true,
     properties: {
       $type: { const: 'page' },
       id: { type: 'string', minLength: 1 },
       status: { type: 'string', minLength: 1 },
-      layout: { type: 'string', minLength: 1 },
       metadata: {
         type: 'object',
         required: ['title'],
@@ -741,3 +718,14 @@ function parseArgs(argv) {
   }
   return out;
 }
+
+function isMainModule() {
+  if (!process.argv[1]) return false;
+  try {
+    return realpathSync(fileURLToPath(import.meta.url)) === realpathSync(path.resolve(process.argv[1]));
+  } catch {
+    return false;
+  }
+}
+
+export { compileRegistry, generatePageSchema };

package/src/cli/mintlify-render.mjs

@@ -0,0 +1,9 @@
+import path from 'node:path';
+import { loadCompiledMintlifySource, materializeMintlifySite } from '../../dist/mintlify/index.js';
+
+const [sourceArg, compiledArg, outputArg] = process.argv.slice(2);
+if (!sourceArg || !compiledArg || !outputArg) {
+  throw new Error('Mintlify renderer requires content, compiled, and output directories');
+}
+const source = await loadCompiledMintlifySource(path.resolve(sourceArg), path.resolve(compiledArg));
+await materializeMintlifySite({ ...source, outputDir: path.resolve(outputArg) });

package/src/cli/validate-content.mjs

@@ -19,21 +19,24 @@
  * Uses the JSON schemas generated by compile-registry — portable, no React/CSS
  * imports needed, same schemas usable by Go backend or other tools.
  */
+import { realpathSync } from 'node:fs';
 import { readdir, readFile } from 'node:fs/promises';
 import path from 'node:path';
-
-const args = parseArgs(process.argv.slice(2));
-
-try {
-  const result = await validateContent(args);
-  console.log(JSON.stringify(result, null, 2));
-  if (!result.success) process.exitCode = 1;
-} catch (error) {
-  console.error(JSON.stringify({
-    success: false,
-    errors: [{ message: String(error?.message ?? error) }],
-  }, null, 2));
-  process.exitCode = 1;
+import { fileURLToPath } from 'node:url';
+
+if (isMainModule()) {
+  const args = parseArgs(process.argv.slice(2));
+  try {
+    const result = await validateContent(args);
+    console.log(JSON.stringify(result, null, 2));
+    if (!result.success) process.exitCode = 1;
+  } catch (error) {
+    console.error(JSON.stringify({
+      success: false,
+      errors: [{ message: String(error?.message ?? error) }],
+    }, null, 2));
+    process.exitCode = 1;
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -95,6 +98,24 @@ async function validateContent(options) {
     for (const block of blocks) {
       blocksValidated++;
 
+      if (!block || typeof block !== 'object') {
+        collector.push({
+          page: relativePath,
+          blockId: '<unknown>',
+          message: 'page region entry must be a component block',
+        });
+        continue;
+      }
+
+      if (block.$type !== 'component') {
+        collector.push({
+          page: relativePath,
+          blockId: block.id ?? '<unknown>',
+          path: '$type',
+          message: 'block "$type" must be "component"',
+        });
+      }
+
       if (!block.component) {
         collector.push({
           page: relativePath,
@@ -380,6 +401,13 @@ function validateNestedSlots(parentBlock, componentMap, schemaMap, path = 'props
         issues.push({ path: nestedPath, message: `${parentBlock.component}: block ref child must be a block` });
         continue;
       }
+      if (nestedBlock.$type !== 'component') {
+        issues.push({
+          path: `${nestedPath}.$type`,
+          message: `${parentBlock.component}: block ref child "$type" must be "component"`,
+        });
+        continue;
+      }
 
       if (!componentMap.has(nestedBlock.component)) {
         issues.push({ path: `${nestedPath}.component`, message: `${parentBlock.component}: unknown nested component "${nestedBlock.component}"` });
@@ -450,3 +478,14 @@ function parseArgs(argv) {
   }
   return out;
 }
+
+function isMainModule() {
+  if (!process.argv[1]) return false;
+  try {
+    return realpathSync(fileURLToPath(import.meta.url)) === realpathSync(path.resolve(process.argv[1]));
+  } catch {
+    return false;
+  }
+}
+
+export { validateContent };

package/src/types/block-ref.test.ts

@@ -0,0 +1,60 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { z } from 'zod';
+
+import { compileSchema } from '../compiler/zod-to-jsonschema.js';
+import { defineComponentContract } from '../define-component.js';
+import { blockRef, blockRefArray } from './block-ref.js';
+
+const childContract = defineComponentContract({
+  id: 'child',
+  props: z.object({
+    label: z.string(),
+  }),
+});
+
+test('block references require and accept the component discriminator', () => {
+  const schema = blockRefArray([childContract]);
+  const typed = {
+    $type: 'component',
+    id: 'child-1',
+    component: 'child',
+    props: { label: 'Hello' },
+  };
+
+  assert.equal(schema.safeParse([typed]).success, true);
+  assert.equal(schema.safeParse([{
+    id: typed.id,
+    component: typed.component,
+    props: typed.props,
+  }]).success, false);
+});
+
+test('compiled block-reference schema exposes the component discriminator', () => {
+  const compiled = compileSchema(blockRefArray([childContract])) as {
+    items?: {
+      properties?: Record<string, { const?: string }>;
+      required?: string[];
+      additionalProperties?: boolean;
+    };
+  };
+
+  assert.equal(compiled.items?.properties?.$type?.const, 'component');
+  assert.equal(compiled.items?.required?.includes('$type'), true);
+  assert.equal(compiled.items?.additionalProperties, false);
+});
+
+
+test('block-reference contracts enforce allowed child IDs at runtime and in compiled schemas', () => {
+  const other = defineComponentContract({ id: 'other', props: z.object({}) });
+  const allowed = { $type: 'component', id: 'child-1', component: 'child', props: { label: 'Hello' } };
+  const disallowed = { ...allowed, component: 'button' };
+  for (const multiple of [false, true]) {
+    const schema = multiple ? blockRefArray([childContract, other]) : blockRef([childContract, other]);
+    assert.equal(schema.safeParse(multiple ? [allowed] : allowed).success, true);
+    assert.equal(schema.safeParse(multiple ? [disallowed] : disallowed).success, false, 'a nested component outside the contract must be refused');
+    const compiled = compileSchema(schema) as any;
+    const block = multiple ? compiled.items : compiled;
+    assert.deepEqual(block.properties.component.enum, ['child', 'other'], 'published JSON Schema must enforce the same finite child set');
+  }
+});

package/src/types/block-ref.ts

@@ -9,6 +9,7 @@ export interface BlockRefMeta {
 }
 
 const blockRefBase = z.object({
+  $type: z.literal('component'),
   id: z.string().min(1),
   component: z.string().min(1),
   props: z.record(z.string(), z.unknown()),
@@ -21,6 +22,7 @@ type InferContractProps<T> = T extends ComponentContract<string, infer Schema>
 type InferContractId<T> = T extends ComponentContract<infer Id, unknown> ? Id : never;
 
 export type BlockRefEntry<T extends ComponentContract> = {
+  $type: 'component';
   id: string;
   component: InferContractId<T>;
   props: InferContractProps<T>;
@@ -48,7 +50,7 @@ export function blockRefArray<const T extends readonly ComponentContract[]>(
   contracts: T,
 ): z.ZodArray<z.ZodType<BlockRefUnion<T>>> {
   return attachMeta(
-    z.array(blockRefBase) as unknown as z.ZodArray<z.ZodType<BlockRefUnion<T>>>,
+    z.array(blockRefBase.extend({ component: z.enum(contracts.map((c) => c.id)) })) as unknown as z.ZodArray<z.ZodType<BlockRefUnion<T>>>,
     contracts.map((c) => c.id),
     true,
   );
@@ -58,7 +60,7 @@ export function blockRef<const T extends readonly ComponentContract[]>(
   contracts: T,
 ): z.ZodType<BlockRefUnion<T>> {
   return attachMeta(
-    blockRefBase as unknown as z.ZodType<BlockRefUnion<T>>,
+    blockRefBase.extend({ component: z.enum(contracts.map((c) => c.id)) }) as unknown as z.ZodType<BlockRefUnion<T>>,
     contracts.map((c) => c.id),
     false,
   );

package/src/types/component.ts

@@ -23,6 +23,16 @@ export interface ComponentValidationIssue {
   severity?: 'error' | 'warning';
 }
 
+/**
+ * Root identity props the SDK renderers inject into every page and fragment
+ * block (sdk I-19, ADR 0051). A component spreads them onto its own root
+ * element; the starter conformance test fails a component that drops them.
+ */
+export interface RootIdentityProps {
+  'data-aci-block'?: string;
+  'data-aci-component'?: string;
+}
+
 export interface ComponentDefinition<TId extends string = string, TSchema = unknown> {
   id: TId;
   displayName?: string;

package/src/types/config.ts

@@ -9,7 +9,6 @@ export interface Config {
   };
   componentRegistry: string;
   dataRegistry?: string;
-  layoutRegistry: string;
   routes: RouteConfig;
   dam?: DAMConfig;
   externalDependencies?: ExternalDependency[];

package/src/types/image.ts

@@ -3,19 +3,28 @@ import { z } from 'zod';
 // ---------------------------------------------------------------------------
 // Image source variants
 //
-// Each source provides a primary src and may include a ready-made srcset
-// scoped by the optional media/sizes of the slot output that produced it.
+// A DAM source carries the asset identity's slot presentation — the declared
+// candidate widths, the fit, and the MIME format — and NEVER a URL: the SDK
+// constructs the /dam/{assetId} permalink and its srcset at render time
+// (ADR 0062: the compiler emits asset ids only). Static assets keep their
+// authored src passthrough.
 // ---------------------------------------------------------------------------
 
 export interface ImageSource {
-  /** Primary derivative URL for this rendition candidate. */
-  src: string;
-  /** Intrinsic width in pixels (0 when the format carries none, e.g. SVG). */
+  /** Authored asset path — static sources only; DAM sources never set it. */
+  src?: string;
+  /** Declared candidate widths for the srcset (DAM sources). Empty or absent
+   *  when the slot declares no outputs: the SDK renders the bare permalink
+   *  (no params, original bytes). */
+  widths?: number[];
+  /** Layout width in pixels — the largest declared width, or the intrinsic
+   *  width for static/original-aspect sources. */
   width?: number;
-  /** Intrinsic height in pixels (0 when the format carries none). */
+  /** Layout height in pixels — the height at `width` (aspect carrier). */
   height?: number;
-  /** Optional width-descriptor rendition candidates. */
-  srcset?: string;
+  /** Transform fit for DAM sources: 'max' fits inside the box; 'crop' fills
+   *  the declared aspect and emits an h param per srcset width. */
+  fit?: 'max' | 'crop';
   /** sizes attribute from the slot contract. */
   sizes?: string;
   /** Media query scoping this source (art direction). */
@@ -25,7 +34,7 @@ export interface ImageSource {
 }
 
 // ---------------------------------------------------------------------------
-// Image — DAM-backed image asset with compiler-resolved derivatives
+// Image — DAM-backed image asset with compiler-resolved live asset URLs
 //
 // Content authors write an asset reference: { "$type": "dam.assetRef", ... }
 // or for static files: { "$type": "static.assetRef", "src": "/path" }
@@ -37,8 +46,9 @@ export interface Image {
   $type: 'gradial.image';
   /** DAM asset identifier (or "static:<path>" for non-DAM assets). */
   assetId: string;
-  /** DAM version identifier (or "static" for non-DAM assets). */
-  versionId: string;
+  /** DAM version identifier — absent for DAM images, which compile to the
+   *  versionless live URL /dam/{assetId}; never set for static images. */
+  versionId?: string;
   /** Accessible description of the image content. */
   alt: string;
   /** <source> candidates produced for the asset slot. */
@@ -66,10 +76,11 @@ export interface SlotOutput {
 // ---------------------------------------------------------------------------
 
 export const ImageSourceSchema = z.object({
-  src: z.string().min(1),
-  srcset: z.string().min(1).optional(),
+  src: z.string().min(1).optional(),
+  widths: z.array(z.number().int().positive()).optional(),
   width: z.number().int().nonnegative().optional(),
   height: z.number().int().nonnegative().optional(),
+  fit: z.enum(['max', 'crop']).optional(),
   sizes: z.string().min(1).optional(),
   media: z.string().min(1).optional(),
   type: z.string().min(1),
@@ -78,17 +89,113 @@ export const ImageSourceSchema = z.object({
 export const ImageSchema = z.object({
   $type: z.literal('gradial.image'),
   assetId: z.string().min(1),
-  versionId: z.string().min(1),
+  versionId: z.string().min(1).optional(),
   alt: z.string(),
   sources: z.array(ImageSourceSchema).min(1),
 });
 
+// ---------------------------------------------------------------------------
+// DAM permalink construction (ADR 0062)
+// ---------------------------------------------------------------------------
+
+/** Default DAM delivery quality, matching the edge's DEFAULT_QUALITY. */
+export const DAM_IMAGE_QUALITY = 82;
+
+let damAssetBase = '';
+
+/**
+ * Configures the origin for DAM permalinks. The default is the empty string:
+ * relative same-origin URLs (`/dam/{assetId}`), served by the site's own
+ * hosting edge. Set a base (e.g. `https://assets.example.com`) when images
+ * are consumed off-origin — email, external CMS fields, social cards — or
+ * when delivery is hosted on a dedicated domain. Call once during app setup,
+ * before the first render.
+ */
+export function configureDamAssets(options: { baseUrl?: string } = {}): void {
+  damAssetBase = (options.baseUrl ?? '').replace(/\/+$/, '');
+}
+
+/**
+ * The DAM permalink for an asset: `{base}/dam/{assetId}`. No params means
+ * original bytes.
+ */
+export function damAssetUrl(assetId: string): string {
+  return `${damAssetBase}/dam/${assetId}`;
+}
+
+const FORMAT_PARAMS: Record<string, string> = {
+  'image/avif': 'avif',
+  'image/webp': 'webp',
+  'image/jpeg': 'jpg',
+  'image/png': 'png',
+};
+
+function sourceFormatParams(source: ImageSource): string {
+  const fm = FORMAT_PARAMS[source.type] ?? 'webp';
+  return `fm=${fm}&q=${DAM_IMAGE_QUALITY}`;
+}
+
+function srcsetWidth(assetId: string, source: ImageSource, width: number): string {
+  const params = [`w=${width}`];
+  if (source.fit === 'crop' && source.width && source.height) {
+    const height = Math.round((width * source.height) / source.width);
+    params.push(`h=${height}`, 'fit=crop');
+  } else {
+    params.push('fit=max');
+  }
+  params.push(sourceFormatParams(source));
+  return `${damAssetUrl(assetId)}?${params.join('&')} ${width}w`;
+}
+
+function damImageAttrs(image: Image, primary: ImageSource): ImageAttrs {
+  const base: ImageAttrs = {
+    src: damAssetUrl(image.assetId),
+    alt: image.alt,
+    width: primary.width && primary.width > 0 ? primary.width : undefined,
+    height: primary.height && primary.height > 0 ? primary.height : undefined,
+    loading: 'lazy',
+    decoding: 'async',
+  };
+  if (primary.widths && primary.widths.length > 0) {
+    // Primary src at the largest declared width; srcset covers them all.
+    const largest = primary.widths[primary.widths.length - 1];
+    const params = [`w=${largest}`];
+    if (primary.fit === 'crop' && primary.width && primary.height) {
+      params.push(`h=${Math.round((largest * primary.height) / primary.width)}`, 'fit=crop');
+    } else {
+      params.push('fit=max');
+    }
+    params.push(sourceFormatParams(primary));
+    base.src = `${damAssetUrl(image.assetId)}?${params.join('&')}`;
+    if (primary.widths.length > 1) {
+      base.srcSet = primary.widths.map((w) => srcsetWidth(image.assetId, primary, w)).join(', ');
+    }
+  }
+  return base;
+}
+
+function staticImageAttrs(image: Image, primary: ImageSource): ImageAttrs {
+  return {
+    src: primary.src ?? '',
+    alt: image.alt,
+    width: primary.width && primary.width > 0 ? primary.width : undefined,
+    height: primary.height && primary.height > 0 ? primary.height : undefined,
+    loading: 'lazy',
+    decoding: 'async',
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Shared attrs helper — consumed by React, Astro, and Svelte components
 // ---------------------------------------------------------------------------
 
 export type ImageAttrs = Record<string, unknown>;
 
+/** True when the image resolves to authored static bytes, not a DAM asset. */
+export function isStaticImage(image: Image): boolean {
+  return image.assetId.startsWith('static:');
+}
+
 /**
  * The primary rendition of an image — its first source entry.
  */
@@ -100,24 +207,21 @@ export function primaryImageSource(image: Image): ImageSource {
  * Computes the full set of <img> attributes for an Image.
  *
  * Framework components (React <Picture>, Astro <img>, Svelte <img>) call this
- * and spread the result into their native element.  No HTML string
- * serialization. Media-scoped sources need a <picture> wrapper and are not
- * representable as plain <img> attributes, so srcset/sizes are taken from the
- * first unscoped source only.
+ * and spread the result into the native element. No HTML string
+ * serialization. DAM images construct their /dam/{assetId} permalink and
+ * srcset here from the slot-declared widths; static images pass their
+ * authored src through. Media-scoped sources need a <picture> wrapper and
+ * are not representable as plain <img> attributes, so srcset/sizes are taken
+ * from the first unscoped source only.
  */
 export function imageAttrs(image: Image, overrides: ImageAttrs = {}): ImageAttrs {
   const primary = image.sources[0];
   const unscoped = image.sources.find((s) => !s.media) ?? primary;
 
-  return {
-    src: primary.src,
-    alt: image.alt,
-    width: primary.width && primary.width > 0 ? primary.width : undefined,
-    height: primary.height && primary.height > 0 ? primary.height : undefined,
-    srcSet: unscoped?.srcset || undefined,
-    sizes: unscoped?.sizes || undefined,
-    loading: 'lazy',
-    decoding: 'async',
-    ...overrides,
-  };
+  const base = isStaticImage(image) ? staticImageAttrs(image, primary) : damImageAttrs(image, primary);
+
+  if (unscoped?.sizes) {
+    base.sizes = unscoped.sizes;
+  }
+  return { ...base, ...overrides };
 }

package/src/types/index.ts

@@ -1,7 +1,6 @@
 export * from './config.js';
 export * from './component.js';
 export * from './data.js';
-export * from './layout.js';
 export * from './page.js';
 export * from './rich-text.js';
 export * from './image.js';

package/src/types/page.ts

@@ -34,5 +34,4 @@ export interface BlockNode {
 export interface FragmentRefNode {
   kind: 'fragment-ref';
   fragmentId: string;
-  inline: boolean;
 }

package/src/types/video.ts

@@ -11,7 +11,7 @@ export interface VideoSource {
 }
 
 // ---------------------------------------------------------------------------
-// Video — DAM-backed video asset with compiler-resolved derivatives
+// Video — DAM-backed video asset with compiler-resolved live asset URLs
 //
 // Content authors write: { "$type": "dam.assetRef", ... }
 // or for static files: { "$type": "static.assetRef", "src": "/path" }

package/templates/astro/starter-content/src/components/chrome/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import Container from '../elements/Container.astro';
+import type { RootIdentityProps } from '@gradial/aci';
 import Logo from '../elements/Logo.astro';
 
 interface FooterLink {
@@ -21,7 +22,7 @@ interface FooterColumn {
   links?: FooterLink[];
 }
 
-interface Props {
+interface Props extends RootIdentityProps {
   brandHref: string;
   brandLabel?: string;
   brandLogo?: { src: string; alt?: string } | null;
@@ -38,7 +39,8 @@ const {
   social = [],
   columns = [],
   legalLinks = [],
-  copyright = ''
+  copyright = '',
+  ...root
 } = Astro.props;
 
 function columnGroups(column: FooterColumn): FooterGroup[] {
@@ -54,7 +56,7 @@ function columnGroups(column: FooterColumn): FooterGroup[] {
 }
 ---
 
-<footer class="bm-footer [font-family:var(--font-family-base)] text-fg" id="footer">
+<footer {...root} class="bm-footer [font-family:var(--font-family-base)] text-fg" id="footer">
   <Container className="py-[var(--spacing-footer-y)]">
     <div class="grid gap-12 pb-24 md:grid-cols-[var(--footer-grid-columns)] lg:gap-24">
       <a href={brandHref} class="self-start">