@gradial/aci 0.1.41 → 0.1.42

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

@@ -0,0 +1,41 @@
+---
+import type { ContentProps } from '../../cms/contracts/components/personalizationChoice.contract';
+
+type Props = ContentProps;
+
+const { title, description, redLabel, blueLabel, refreshLabel } = Astro.props;
+---
+
+<section 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}
+    <div class="mt-6 flex flex-wrap justify-center gap-3">
+      <button type="button" class="inline-flex min-h-10 items-center justify-center rounded-button border border-emerald-700 bg-emerald-600 px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-white transition hover:bg-emerald-700" data-aci-consent-button>Enable personalization</button>
+      <button type="button" class="inline-flex min-h-10 items-center justify-center rounded-button border border-red-700 bg-red-600 px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-white transition hover:bg-red-700" data-aci-event="preference" data-aci-prop-color="red">{redLabel}</button>
+      <button type="button" class="inline-flex min-h-10 items-center justify-center rounded-button border border-blue-700 bg-blue-600 px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-white transition hover:bg-blue-700" data-aci-event="preference" data-aci-prop-color="blue">{blueLabel}</button>
+      <button type="button" class="inline-flex min-h-10 items-center justify-center rounded-button border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-[var(--button-outline-text)] transition hover:opacity-85" data-aci-refresh>{refreshLabel}</button>
+    </div>
+    <p class="mx-auto mt-4 max-w-2xl text-sm text-[var(--color-fg-muted)]" data-aci-cookie-status aria-live="polite">Consent: checking... | Browser marker: checking... | Identity and audience cookies: HttpOnly server-managed</p>
+  </div>
+</section>
+
+<script is:inline>
+  (() => {
+    const hasCookie = (name) => document.cookie.split('; ').some((value) => value.startsWith(`${name}=`));
+    const status = document.querySelector('[data-aci-cookie-status]');
+    const render = () => {
+      if (!status) return;
+      status.textContent = `Consent: ${hasCookie('aci_consent') ? 'granted' : 'not granted'} | Browser marker: ${hasCookie('aci_m') ? 'minted' : 'not minted'} | Identity and audience cookies: HttpOnly server-managed`;
+    };
+    document.querySelector('[data-aci-consent-button]')?.addEventListener('click', () => {
+      const envelope = encodeURIComponent(JSON.stringify({ v: 1, p: ['personalization'], t: new Date().toISOString(), src: 'demo-consent' }));
+      document.cookie = `aci_consent=${envelope}; Path=/; Max-Age=31536000; SameSite=Lax; Secure`;
+      window.aci?.('consent', { p: ['personalization'], src: 'demo-consent' });
+      render();
+      window.setTimeout(() => document.querySelector('[data-aci-refresh]')?.click(), 50);
+    }, true);
+    render();
+    window.setInterval(render, 1000);
+  })();
+</script>

package/templates/astro/starter-content/src/render/RenderPage.astro

@@ -1,7 +1,7 @@
 ---
 import SiteLayout from '../layouts/SiteLayout.astro';
 import type { KernelPage, KernelSiteConfig } from '@gradial/aci/content';
-import { registryLookup } from '@gradial/aci/astro';
+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';
@@ -24,12 +24,13 @@ 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}>
+<SiteLayout {title} {description} {canonical} {siteName} {collectTag}>
   <Header
     brandHref={siteConfig.brandHref || '/'}
     brandLabel={siteConfig.title || 'Gradial'}

package/templates/astro/template/src/layouts/SiteLayout.astro

@@ -14,9 +14,10 @@ interface Props {
    * content).
    */
   collectTag?: string;
+  assignmentsTag?: string;
 }
 
-const { title, description, canonical, siteName = 'Gradial', collectTag } = Astro.props;
+const { title, description, canonical, siteName = 'Gradial', collectTag, assignmentsTag } = Astro.props;
 ---
 
 <!doctype html>
@@ -32,6 +33,7 @@ const { title, description, canonical, siteName = 'Gradial', collectTag } = Astr
     <meta property="og:description" content={description} />
     <meta property="og:site_name" content={siteName} />
     {collectTag ? <Fragment set:html={collectTag} /> : null}
+    {assignmentsTag ? <Fragment set:html={assignmentsTag} /> : null}
   </head>
   <body>
     <slot />

package/templates/astro/template/src/pages/[...slug].astro

@@ -17,6 +17,7 @@ const renderChildren = createRenderChildren(registry);
   canonical={data.meta.canonical}
   siteName={data.meta.siteName}
   collectTag={data.collectTag}
+  assignmentsTag={data.assignmentsTag}
 >
   {data.layout.slots.map((slot) => {
     const blocks = data.slots[slot.name];

package/templates/common/.content/audiences/preference-blue/_index.json

@@ -0,0 +1,11 @@
+{
+  "$type": "audience",
+  "props": {
+    "id": "preference-blue",
+    "displayName": "Blue preference",
+    "status": "enabled",
+    "priority": 100,
+    "membershipSource": "segment",
+    "segmentRef": "$ref:segments/preference-blue"
+  }
+}

package/templates/common/.content/audiences/preference-red/_index.json

@@ -0,0 +1,11 @@
+{
+  "$type": "audience",
+  "props": {
+    "id": "preference-red",
+    "displayName": "Red preference",
+    "status": "enabled",
+    "priority": 100,
+    "membershipSource": "segment",
+    "segmentRef": "$ref:segments/preference-red"
+  }
+}

package/templates/common/.content/overlays/audience/preference-blue/pages/home/_index.json

@@ -0,0 +1,13 @@
+{
+  "$type": "page-overlay",
+  "regions": {
+    "main": {
+      "personalization-choice": {
+        "props": {
+          "title": "Blue preference active",
+          "description": "Your latest preference is Blue. Choose Red to replace it."
+        }
+      }
+    }
+  }
+}

package/templates/common/.content/overlays/audience/preference-red/pages/home/_index.json

@@ -0,0 +1,13 @@
+{
+  "$type": "page-overlay",
+  "regions": {
+    "main": {
+      "personalization-choice": {
+        "props": {
+          "title": "Red preference active",
+          "description": "Your latest preference is Red. Choose Blue to replace it."
+        }
+      }
+    }
+  }
+}

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

@@ -1,13 +1,123 @@
 {
   "$type": "page",
-  "id": "home",
+  "id": "meridian-home",
   "status": "published",
   "layout": "default",
   "metadata": {
-    "title": "Home",
-    "description": "Welcome to your new ACI site."
+    "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/"
   },
   "regions": {
-    "main": []
+    "main": [
+      {
+        "id": "hero",
+        "component": "home_hero",
+        "props": {
+          "eyebrow": "Global satellite internet",
+          "headline": "Connect from anywhere on Earth.",
+          "description": "Meridian delivers low-latency broadband to homes, businesses, and remote operations in over 40 countries. No ground infrastructure required.",
+          "ctaLabel": "Explore plans",
+          "ctaHref": "/plans/",
+          "image": {
+            "$type": "dam.assetRef",
+            "assetId": "ast_site_home_hero",
+            "alt": "Light abstract hero background with satellite constellation"
+          }
+        }
+      },
+      {
+        "id": "why-meridian",
+        "component": "feature_grid",
+        "props": {
+          "title": "Why Meridian",
+          "subtitle": "Engineered for the edges of the world.",
+          "features": [
+            {
+              "id": "global-coverage",
+              "component": "feature_card",
+              "props": {
+                "icon": "globe",
+                "title": "Global coverage",
+                "description": "A constellation of low-orbit satellites keeps you connected across continents, oceans, and remote terrain."
+              }
+            },
+            {
+              "id": "low-latency",
+              "component": "feature_card",
+              "props": {
+                "icon": "speed",
+                "title": "Low latency",
+                "description": "Sub-50ms latency means video calls, gaming, and real-time control feel local, even in the middle of nowhere."
+              }
+            },
+            {
+              "id": "easy-setup",
+              "component": "feature_card",
+              "props": {
+                "icon": "setup",
+                "title": "Easy setup",
+                "description": "A compact terminal and a phone app. Point at the sky, power on, and get online in minutes."
+              }
+            }
+          ]
+        }
+      },
+      {
+        "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"
+        }
+      },
+      {
+        "id": "stats",
+        "component": "stats_bar",
+        "props": {
+          "stats": [
+            { "label": "Network uptime", "value": "99.9", "suffix": "%" },
+            { "label": "Average latency", "value": "<50", "suffix": "ms" },
+            { "label": "Countries covered", "value": "40", "suffix": "+" },
+            { "label": "Orbital satellites", "value": "2,400", "suffix": "" }
+          ]
+        }
+      },
+      {
+        "id": "cta",
+        "component": "container",
+        "props": {
+          "theme": "light",
+          "className": "items-center justify-center text-center",
+          "content": [
+            {
+              "id": "cta-primary",
+              "component": "button",
+              "props": {
+                "label": "Explore plans",
+                "href": "/plans/",
+                "variant": "primary",
+                "icon": "arrow_forward",
+                "iconPosition": "after"
+              }
+            },
+            {
+              "id": "cta-secondary",
+              "component": "button",
+              "props": {
+                "label": "Contact sales",
+                "href": "/contact-sales/",
+                "variant": "outline",
+                "icon": "arrow_forward",
+                "iconPosition": "after"
+              }
+            }
+          ]
+        }
+      }
+    ]
   }
 }

package/templates/common/.content/segments/preference-blue/_index.json

@@ -0,0 +1,20 @@
+{
+  "$type": "segment",
+  "props": {
+    "id": "preference-blue",
+    "displayName": "Latest preference is Blue",
+    "status": "enabled",
+    "priority": 100,
+    "criteria": {
+      "all": [
+        {
+          "type": "event_latest",
+          "event": "custom.preference",
+          "properties": {
+            "color": "blue"
+          }
+        }
+      ]
+    }
+  }
+}

package/templates/common/.content/segments/preference-red/_index.json

@@ -0,0 +1,20 @@
+{
+  "$type": "segment",
+  "props": {
+    "id": "preference-red",
+    "displayName": "Latest preference is Red",
+    "status": "enabled",
+    "priority": 100,
+    "criteria": {
+      "all": [
+        {
+          "type": "event_latest",
+          "event": "custom.preference",
+          "properties": {
+            "color": "red"
+          }
+        }
+      ]
+    }
+  }
+}

package/templates/common/contracts/components/index.ts

@@ -1,3 +1,23 @@
-const componentContracts: readonly unknown[] = [];
+import { buttonContract } from './button.contract';
+import { containerContract } from './container.contract';
+import { featureCardContract } from './featureCard.contract';
+import { featureGridContract } from './featureGrid.contract';
+import { homeHeroContract } from './homeHero.contract';
+import { personalizationChoiceContract } from './personalizationChoice.contract';
+import { siteNavigationContract } from './siteNavigation.contract';
+import { siteFooterContract } from './siteFooter.contract';
+import { statsBarContract } from './statsBar.contract';
+
+const componentContracts = [
+  homeHeroContract,
+  personalizationChoiceContract,
+  containerContract,
+  buttonContract,
+  siteNavigationContract,
+  siteFooterContract,
+  featureGridContract,
+  featureCardContract,
+  statsBarContract,
+];
 
 export default componentContracts;

package/templates/common/contracts/components/personalizationChoice.contract.ts

@@ -0,0 +1,17 @@
+import { defineComponentContract } from '@gradial/aci';
+import { z } from 'zod';
+
+export const schema = z.object({
+  title: z.string().min(1),
+  description: z.string().optional(),
+  redLabel: z.string().min(1),
+  blueLabel: z.string().min(1),
+  refreshLabel: z.string().min(1),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const personalizationChoiceContract = defineComponentContract({
+  id: 'personalization_choice',
+  props: schema,
+});

package/templates/nextjs/starter-content/src/cms/contracts/components/index.ts

@@ -3,12 +3,14 @@ import { containerContract } from './container.contract';
 import { featureCardContract } from './featureCard.contract';
 import { featureGridContract } from './featureGrid.contract';
 import { homeHeroContract } from './homeHero.contract';
-import { siteFooterContract } from './siteFooter.contract';
+import { personalizationChoiceContract } from './personalizationChoice.contract';
 import { siteNavigationContract } from './siteNavigation.contract';
+import { siteFooterContract } from './siteFooter.contract';
 import { statsBarContract } from './statsBar.contract';
 
 const componentContracts = [
   homeHeroContract,
+  personalizationChoiceContract,
   containerContract,
   buttonContract,
   siteNavigationContract,

package/templates/nextjs/starter-content/src/cms/contracts/components/personalizationChoice.contract.ts

@@ -0,0 +1,17 @@
+import { defineComponentContract } from '@gradial/aci';
+import { z } from 'zod';
+
+export const schema = z.object({
+  title: z.string().min(1),
+  description: z.string().optional(),
+  redLabel: z.string().min(1),
+  blueLabel: z.string().min(1),
+  refreshLabel: z.string().min(1),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const personalizationChoiceContract = defineComponentContract({
+  id: 'personalization_choice',
+  props: schema,
+});

package/templates/nextjs/starter-content/src/cms/registry.ts

@@ -1,5 +1,6 @@
 import { createRegistry } from '@gradial/aci';
 import { homeHeroContract } from './contracts/components/homeHero.contract';
+import { personalizationChoiceContract } from './contracts/components/personalizationChoice.contract';
 import { containerContract } from './contracts/components/container.contract';
 import { buttonContract } from './contracts/components/button.contract';
 import { siteNavigationContract } from './contracts/components/siteNavigation.contract';
@@ -8,6 +9,7 @@ import { featureGridContract } from './contracts/components/featureGrid.contract
 import { featureCardContract } from './contracts/components/featureCard.contract';
 import { statsBarContract } from './contracts/components/statsBar.contract';
 import { HomeHero } from '@/components/sections/HomeHero';
+import { PersonalizationChoice } from '@/components/sections/PersonalizationChoice';
 import { ContainerSection } from '@/components/sections/ContainerSection';
 import { ButtonBlock } from '@/components/elements/ButtonBlock';
 import { Header } from '@/components/chrome/Header';
@@ -18,6 +20,7 @@ import { StatsBar } from '@/components/sections/StatsBar';
 
 export const registry = createRegistry([
   [homeHeroContract, HomeHero],
+  [personalizationChoiceContract, PersonalizationChoice],
   [containerContract, ContainerSection],
   [buttonContract, ButtonBlock],
   [siteNavigationContract, Header],

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ContentProps } from '@/cms/contracts/components/personalizationChoice.contract';
+
+type AciWindow = Window & { aci?: (command: string, value: unknown) => void };
+
+function hasCookie(name: string): boolean {
+  return document.cookie.split('; ').some((value) => value.startsWith(`${name}=`));
+}
+
+export function PersonalizationChoice({
+  title,
+  description,
+  redLabel,
+  blueLabel,
+  refreshLabel,
+}: ContentProps) {
+  const [consent, setConsent] = useState(false);
+  const [marker, setMarker] = useState(false);
+
+  useEffect(() => {
+    const update = () => {
+      setConsent(hasCookie('aci_consent'));
+      setMarker(hasCookie('aci_m'));
+    };
+    update();
+    const interval = window.setInterval(update, 1000);
+    return () => window.clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="border-y border-[var(--color-border)] bg-[var(--color-surface)] py-[var(--spacing-section-y)]">
+      <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}
+        <div className="mt-6 flex flex-wrap justify-center gap-3">
+          <button type="button" className="inline-flex min-h-10 items-center justify-center rounded-button border border-emerald-700 bg-emerald-600 px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-white transition hover:bg-emerald-700" data-aci-consent onClick={() => {
+            const envelope = encodeURIComponent(JSON.stringify({ v: 1, p: ['personalization'], t: new Date().toISOString(), src: 'demo-consent' }));
+            document.cookie = `aci_consent=${envelope}; Path=/; Max-Age=31536000; SameSite=Lax; Secure`;
+            (window as AciWindow).aci?.('consent', { p: ['personalization'], src: 'demo-consent' });
+            setConsent(true);
+            window.setTimeout(() => document.querySelector('[data-aci-refresh]')?.dispatchEvent(new MouseEvent('click', { bubbles: true })), 50);
+          }}>Enable personalization</button>
+          <button type="button" className="inline-flex min-h-10 items-center justify-center rounded-button border border-red-700 bg-red-600 px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-white transition hover:bg-red-700" data-aci-event="preference" data-aci-prop-color="red">{redLabel}</button>
+          <button type="button" className="inline-flex min-h-10 items-center justify-center rounded-button border border-blue-700 bg-blue-600 px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-white transition hover:bg-blue-700" data-aci-event="preference" data-aci-prop-color="blue">{blueLabel}</button>
+          <button type="button" className="inline-flex min-h-10 items-center justify-center rounded-button border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] font-[var(--font-weight-semibold)] text-[var(--button-outline-text)] transition hover:opacity-85" data-aci-refresh>{refreshLabel}</button>
+        </div>
+        <p className="mx-auto mt-4 max-w-2xl text-sm text-[var(--color-fg-muted)]" data-aci-cookie-status aria-live="polite">Consent: {consent ? 'granted' : 'not granted'} | Browser marker: {marker ? 'minted' : 'not minted'} | Identity and audience cookies: HttpOnly server-managed</p>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/starter-content/src/middleware.ts

@@ -0,0 +1,11 @@
+import { createGradialMiddleware } from '@gradial/aci/next/middleware';
+import { createVercelPersonalizationFromEnv } from '@gradial/aci/next/vercel-personalization';
+
+export default createGradialMiddleware({
+  personalization: createVercelPersonalizationFromEnv(),
+});
+
+export const config = {
+  runtime: 'nodejs',
+  matcher: ['/((?!_next(?:/|$)|api(?:/|$)|collect(?:/|$)|gradial/assets(?:/|$)|favicon\\.ico$).*)'],
+};

package/templates/nextjs/template/src/app/collect/route.ts

@@ -0,0 +1,18 @@
+import {
+  createPersonalizationCollectRoute,
+  createVercelPersonalizationFromEnv,
+} from '@gradial/aci/next/vercel-personalization';
+
+export const runtime = 'nodejs';
+
+const personalization = createVercelPersonalizationFromEnv();
+const unavailable = async () => new Response('personalization host is not configured', {
+  status: 503,
+  headers: { 'Cache-Control': 'private, no-store' },
+});
+const collect = personalization
+  ? createPersonalizationCollectRoute(personalization)
+  : unavailable;
+
+export const POST = collect;
+export const OPTIONS = collect;

package/templates/nextjs/template/src/middleware.ts

@@ -1,7 +1,11 @@
 import { createGradialMiddleware } from '@gradial/aci/next/middleware';
+import { createVercelPersonalizationFromEnv } from '@gradial/aci/next/vercel-personalization';
 
-export default createGradialMiddleware();
+export default createGradialMiddleware({
+  personalization: createVercelPersonalizationFromEnv(),
+});
 
 export const config = {
-  matcher: ['/((?!_next(?:/|$)|api(?:/|$)|gradial/assets(?:/|$)|favicon\\.ico$).*)'],
+  runtime: 'nodejs',
+  matcher: ['/((?!_next(?:/|$)|api(?:/|$)|collect(?:/|$)|gradial/assets(?:/|$)|favicon\\.ico$).*)'],
 };

package/templates/astro/template/.aci.yaml

@@ -1,28 +0,0 @@
-version: "1"
-siteId: "site_astro"
-domain: "meridian.local"
-framework: astro
-
-source:
-  root: "./"
-  outDir: "dist"
-  publicDir: "public"
-
-componentRegistry: ./src/cms/contracts/components/index.ts
-layoutRegistry: ./src/cms/contracts/layouts/index.ts
-
-capabilities:
-  staticRender: true
-  ssr: true
-  ssrIslands: true
-  clientIslands: true
-  fragmentRender: true
-
-routes:
-  cmsManaged: "/[...slug]"
-  frameworkOwned:
-    - "/api/*"
-    - "/_astro/*"
-    - "/storybook/*"
-
-rendererProtocol: stdio-json

package/templates/common/.content/config/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Allow: /