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

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/astro/starter-content/src/render/RenderPage.astro

@@ -1,67 +0,0 @@
----
-import SiteLayout from '../layouts/SiteLayout.astro';
-import type { KernelPage, KernelSiteConfig } from '@gradial/aci/content';
-import { registryLookup, collectScriptTagHTML } from '@gradial/aci/astro';
-import { registry } from '../cms/registry';
-import Header from '../components/chrome/Header.astro';
-import Footer from '../components/chrome/Footer.astro';
-
-interface RenderInput {
-  route: string;
-  domain: string;
-  locale: string;
-  siteConfig: KernelSiteConfig;
-  page: KernelPage;
-}
-
-interface Props {
-  input: RenderInput;
-}
-
-const { input } = Astro.props;
-const { siteConfig, page } = input;
-const title = page.metadata?.title || siteConfig.seo?.title || siteConfig.title;
-const description = page.metadata?.description || siteConfig.seo?.description || '';
-const canonical = page.metadata?.canonical;
-const siteName = siteConfig.seo?.siteName || siteConfig.title;
-const collectTag = collectScriptTagHTML(siteConfig);
-
-const footer = siteConfig.footer || {};
-const blocks = page?.regions?.main || [];
----
-
-<SiteLayout {title} {description} {canonical} {siteName} {collectTag}>
-  <Header
-    brandHref={siteConfig.brandHref || '/'}
-    brandLabel={siteConfig.title || 'Gradial'}
-    brandLogo={siteConfig.brandLogo || null}
-    navigation={(siteConfig.navigation || []) as any}
-    utilities={(siteConfig.utilities || []) as any}
-  />
-
-  <main id="content-main">
-    {page && page.status === 'published' ? (
-      blocks.map((block) => {
-        // Astro's type checker can't validate dynamically resolved components,
-        // so we cast to any. The registry is type-safe at registration time.
-        const Component = registryLookup(registry, block.component) as any;
-        return Component ? <Component {...block.props} /> : null;
-      })
-    ) : (
-      <section class="mx-auto max-w-container-narrow px-[var(--spacing-container)] py-[var(--spacing-section-y)] text-center">
-        <h1 class="[font-family:var(--font-family-heading)] text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-semibold)] leading-heading md:text-[length:var(--text-size-h2)]">Page not found</h1>
-        <p class="mt-5 text-[length:var(--text-size-body)] text-[color:var(--color-fg-secondary)]">The requested content route is not available in the local content kernel.</p>
-      </section>
-    )}
-  </main>
-
-  <Footer
-    brandHref={siteConfig.brandHref || '/'}
-    brandLabel={siteConfig.title || 'Gradial'}
-    brandLogo={siteConfig.brandLogo || null}
-    social={(footer.social || []) as any}
-    columns={(footer.columns || []) as any}
-    legalLinks={(footer.legalLinks || []) as any}
-    copyright={String(footer.copyright || '')}
-  />
-</SiteLayout>

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

@@ -1,42 +0,0 @@
-{
-  "$type": "componentPattern",
-  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
-  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
-  "name": "personalization_choice",
-  "schema": {
-    "$schema": "https://json-schema.org/draft/2020-12/schema",
-    "title": "personalization_choice",
-    "type": "object",
-    "properties": {
-      "title": {
-        "type": "string",
-        "minLength": 1
-      },
-      "description": {
-        "type": "string"
-      },
-      "redLabel": {
-        "type": "string",
-        "minLength": 1
-      },
-      "blueLabel": {
-        "type": "string",
-        "minLength": 1
-      },
-      "refreshLabel": {
-        "type": "string",
-        "minLength": 1
-      }
-    },
-    "required": [
-      "title",
-      "redLabel",
-      "blueLabel",
-      "refreshLabel"
-    ],
-    "additionalProperties": false
-  },
-  "imageSlots": {},
-  "notes": "",
-  "skills": []
-}

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

@@ -1,13 +0,0 @@
-import type { KernelAtomicBlock } from '@gradial/aci/content';
-import { ButtonBlock } from './ButtonBlock';
-
-interface AtomicBlockProps {
-  block: KernelAtomicBlock;
-}
-
-export function AtomicBlock({ block }: AtomicBlockProps) {
-  if (block.component === 'button') {
-    return <ButtonBlock {...block.props as Parameters<typeof ButtonBlock>[0]} />;
-  }
-  return null;
-}