@gradial/aci 0.1.40 → 0.1.42

package/dist/next/vercel-personalization.js

@@ -0,0 +1,3 @@
+export { CONTENT_PATH_CACHE_PARAM, CONTENT_PATH_HEADER, resolvePersonalizationRequest, } from './personalization-host.js';
+export { createPersonalizationCollectRoute, } from './collect-route.js';
+export { createVercelPersonalizationFromEnv, createVercelCollectionFromEnv, VercelEdgeConfigRouteStore, createVercelS3PersonalizationStore, VercelS3PersonalizationStore, } from './vercel-s3-personalization.js';

package/dist/next/vercel-s3-personalization.d.ts

@@ -0,0 +1,58 @@
+import type { EdgeRouteManifest, PersonalizationCollectionStore, PersonalizationHostConfig, PersonalizationRouteStore } from './personalization-host.js';
+export interface VercelS3PersonalizationConfig {
+    region: string;
+    roleArn?: string;
+    hostingBucket: string;
+    eventsBucket: string;
+    hostingKeyPrefix?: string;
+    claimsKeyPrefix?: string;
+    endpoint?: string;
+    forcePathStyle?: boolean;
+}
+export interface S3CommandClient {
+    send(command: {
+        input: unknown;
+    }): Promise<any>;
+}
+/**
+ * Node-only Vercel collection adapter for audience lake objects and signed
+ * claims. The EdgeRouter never receives this adapter or AWS credentials.
+ * Production construction exchanges the Vercel workload OIDC token for
+ * scoped AWS credentials; no long-lived AWS keys are read.
+ */
+export declare class VercelS3PersonalizationStore implements PersonalizationCollectionStore {
+    private readonly config;
+    private readonly client;
+    constructor(config: VercelS3PersonalizationConfig, client?: S3CommandClient);
+    readClaims(siteId: string, namespace: string, identityHash: string): Promise<string | null>;
+    appendEvent(key: string, record: unknown): Promise<void>;
+    putSuppression(key: string, record: unknown): Promise<void>;
+    private readObject;
+}
+/**
+ * Edge Config is the provider projection for immutable release routing state.
+ * This tiny store is safe in Next middleware: it only fetches the route
+ * projection and never reads S3, claims, or event data.
+ */
+export declare class VercelEdgeConfigRouteStore implements PersonalizationRouteStore {
+    private readonly edgeConfig;
+    private readonly siteId;
+    constructor(edgeConfig: string, siteId: string);
+    readEdgeManifest(releaseId: string): Promise<EdgeRouteManifest | null>;
+}
+export declare function createVercelS3PersonalizationStore(config: VercelS3PersonalizationConfig): VercelS3PersonalizationStore;
+/**
+ * Builds the EdgeRouter configuration used by Next middleware. It deliberately
+ * has no AWS/S3 configuration: its only remote dependency is the provider's
+ * Edge Config projection.
+ */
+export declare function createVercelPersonalizationFromEnv(env?: Record<string, string | undefined>): PersonalizationHostConfig | undefined;
+/** Builds the Node.js `/collect` configuration. This is the only Vercel
+ * application runtime that receives data-plane storage configuration. */
+export declare function createVercelCollectionFromEnv(env?: Record<string, string | undefined>): {
+    siteId: string;
+    store: PersonalizationCollectionStore;
+    identityKeys: PersonalizationHostConfig['identityKeys'];
+    claimsKeys: Record<string, string>;
+    secureCookies: boolean;
+} | undefined;

package/dist/next/vercel-s3-personalization.js

@@ -0,0 +1,220 @@
+import { GetObjectCommand, HeadObjectCommand, PutObjectCommand, S3Client, } from '@aws-sdk/client-s3';
+import { awsCredentialsProvider } from '@vercel/oidc-aws-credentials-provider';
+import { getUncachedEdgeConfigValue } from './edge-config.js';
+/**
+ * Node-only Vercel collection adapter for audience lake objects and signed
+ * claims. The EdgeRouter never receives this adapter or AWS credentials.
+ * Production construction exchanges the Vercel workload OIDC token for
+ * scoped AWS credentials; no long-lived AWS keys are read.
+ */
+export class VercelS3PersonalizationStore {
+    config;
+    client;
+    constructor(config, client) {
+        this.config = config;
+        const s3Config = {
+            region: config.region,
+            endpoint: config.endpoint,
+            forcePathStyle: config.forcePathStyle,
+            ...(config.roleArn ? { credentials: awsCredentialsProvider({
+                    roleArn: config.roleArn,
+                    clientConfig: { region: config.region },
+                }) } : {}),
+        };
+        this.client = client || new S3Client(s3Config);
+    }
+    async readClaims(siteId, namespace, identityHash) {
+        const key = joinKey(this.config.claimsKeyPrefix || 'audience/claims/v1', requiredSegment(identityHash, 'identity hash').slice(0, 2).toLowerCase(), requiredSegment(siteId, 'site id'), requiredSegment(namespace, 'identity namespace').toLowerCase(), `${requiredSegment(identityHash, 'identity hash').toLowerCase()}.json`);
+        const body = await this.readObject(this.config.eventsBucket, key);
+        if (body === null)
+            return null;
+        const envelope = JSON.parse(body);
+        if (envelope.schemaVersion !== 1 || !envelope.signedValue?.trim()) {
+            throw new Error(`invalid claims envelope at ${key}`);
+        }
+        if (envelope.expiresAt && Date.parse(envelope.expiresAt) <= Date.now())
+            return null;
+        return envelope.signedValue;
+    }
+    async appendEvent(key, record) {
+        const input = {
+            Bucket: this.config.eventsBucket,
+            Key: cleanKey(key),
+            Body: JSON.stringify(record),
+            ContentType: 'application/json',
+            IfNoneMatch: '*',
+        };
+        try {
+            await this.client.send(new PutObjectCommand(input));
+        }
+        catch (error) {
+            if (!isConditionalConflict(error))
+                throw error;
+            // S3 can report 409 for two concurrent conditional writes even when
+            // neither write has committed yet. Confirm the object before treating
+            // the conflict as the idempotent duplicate case.
+            try {
+                await this.client.send(new HeadObjectCommand({ Bucket: input.Bucket, Key: input.Key }));
+            }
+            catch (headError) {
+                throw new Error(`conditional event write conflicted before ${input.Key} was stored`, { cause: headError });
+            }
+        }
+    }
+    async putSuppression(key, record) {
+        await this.client.send(new PutObjectCommand({
+            Bucket: this.config.eventsBucket,
+            Key: cleanKey(key),
+            Body: JSON.stringify(record),
+            ContentType: 'application/json',
+        }));
+    }
+    async readObject(bucket, key) {
+        try {
+            const output = await this.client.send(new GetObjectCommand({ Bucket: bucket, Key: key }));
+            if (!output.Body)
+                throw new Error(`empty object body at ${key}`);
+            if (typeof output.Body.transformToString === 'function')
+                return await output.Body.transformToString();
+            throw new Error(`unsupported object body at ${key}`);
+        }
+        catch (error) {
+            if (isNotFound(error))
+                return null;
+            throw error;
+        }
+    }
+}
+/**
+ * Edge Config is the provider projection for immutable release routing state.
+ * This tiny store is safe in Next middleware: it only fetches the route
+ * projection and never reads S3, claims, or event data.
+ */
+export class VercelEdgeConfigRouteStore {
+    edgeConfig;
+    siteId;
+    constructor(edgeConfig, siteId) {
+        this.edgeConfig = edgeConfig;
+        this.siteId = siteId;
+    }
+    async readEdgeManifest(releaseId) {
+        const value = await getUncachedEdgeConfigValue(this.edgeConfig, edgeRoutesKey(this.siteId, releaseId));
+        if (!value)
+            return null;
+        if (typeof value === 'string')
+            return JSON.parse(value);
+        return value;
+    }
+}
+export function createVercelS3PersonalizationStore(config) {
+    return new VercelS3PersonalizationStore(config);
+}
+/**
+ * Builds the EdgeRouter configuration used by Next middleware. It deliberately
+ * has no AWS/S3 configuration: its only remote dependency is the provider's
+ * Edge Config projection.
+ */
+export function createVercelPersonalizationFromEnv(env = process.env) {
+    if (env.ACI_PERSONALIZATION_HOST_ENABLED !== 'true')
+        return undefined;
+    const siteId = requiredEnv(env, 'ACI_SITE_ID');
+    const edgeConfig = requiredEnv(env, 'EDGE_CONFIG');
+    const currentKID = env.ACI_IDENTITY_KID || env.AUDIENCE_IDENTITY_COOKIE_KID || 'v1';
+    const currentSecret = env.ACI_IDENTITY_SECRET || env.AUDIENCE_IDENTITY_COOKIE_SECRET || '';
+    if (!currentSecret)
+        throw new Error('ACI_IDENTITY_SECRET is required when ACI_PERSONALIZATION_HOST_ENABLED=true');
+    const previousKID = env.ACI_IDENTITY_KID_PREVIOUS || env.AUDIENCE_IDENTITY_COOKIE_KID_PREVIOUS || '';
+    const previousSecret = env.ACI_IDENTITY_SECRET_PREVIOUS || env.AUDIENCE_IDENTITY_COOKIE_SECRET_PREVIOUS || '';
+    if ((previousKID === '') !== (previousSecret === '')) {
+        throw new Error('previous identity kid and secret must be configured together');
+    }
+    const identityKeys = {
+        current: { kid: currentKID, secret: currentSecret },
+        ...(previousKID ? { previous: { kid: previousKID, secret: previousSecret } } : {}),
+    };
+    return {
+        siteId,
+        store: new VercelEdgeConfigRouteStore(edgeConfig, siteId),
+        identityKeys,
+        claimsKeys: {
+            [currentKID]: currentSecret,
+            ...(previousKID ? { [previousKID]: previousSecret } : {}),
+        },
+        secureCookies: env.AUDIENCE_IDENTITY_COOKIE_SECURE !== 'false',
+    };
+}
+/** Builds the Node.js `/collect` configuration. This is the only Vercel
+ * application runtime that receives data-plane storage configuration. */
+export function createVercelCollectionFromEnv(env = process.env) {
+    if (env.ACI_PERSONALIZATION_HOST_ENABLED !== 'true')
+        return undefined;
+    const siteId = requiredEnv(env, 'ACI_SITE_ID');
+    const region = env.AWS_REGION || env.AWS_DEFAULT_REGION || '';
+    if (!region)
+        throw new Error('AWS_REGION is required for the Vercel /collect route');
+    const currentKID = env.ACI_IDENTITY_KID || env.AUDIENCE_IDENTITY_COOKIE_KID || 'v1';
+    const currentSecret = env.ACI_IDENTITY_SECRET || env.AUDIENCE_IDENTITY_COOKIE_SECRET || '';
+    if (!currentSecret)
+        throw new Error('ACI_IDENTITY_SECRET is required for the Vercel /collect route');
+    const previousKID = env.ACI_IDENTITY_KID_PREVIOUS || env.AUDIENCE_IDENTITY_COOKIE_KID_PREVIOUS || '';
+    const previousSecret = env.ACI_IDENTITY_SECRET_PREVIOUS || env.AUDIENCE_IDENTITY_COOKIE_SECRET_PREVIOUS || '';
+    if ((previousKID === '') !== (previousSecret === '')) {
+        throw new Error('previous identity kid and secret must be configured together');
+    }
+    const identityKeys = {
+        current: { kid: currentKID, secret: currentSecret },
+        ...(previousKID ? { previous: { kid: previousKID, secret: previousSecret } } : {}),
+    };
+    return {
+        siteId,
+        store: createVercelS3PersonalizationStore({
+            region,
+            roleArn: env.AWS_ROLE_ARN?.trim() || undefined,
+            hostingBucket: requiredEnv(env, 'HOSTING_BUCKET'),
+            eventsBucket: requiredEnv(env, 'EVENTS_BUCKET'),
+            hostingKeyPrefix: env.HOSTING_KEY_PREFIX,
+            claimsKeyPrefix: env.AUDIENCE_CLAIMS_S3_PREFIX,
+        }),
+        identityKeys,
+        claimsKeys: {
+            [currentKID]: currentSecret,
+            ...(previousKID ? { [previousKID]: previousSecret } : {}),
+        },
+        secureCookies: env.AUDIENCE_IDENTITY_COOKIE_SECURE !== 'false',
+    };
+}
+function requiredSegment(value, label) {
+    const clean = cleanKey(value);
+    if (!clean || clean.includes('/'))
+        throw new Error(`${label} is required and must be one path segment`);
+    return clean;
+}
+function requiredEnv(env, name) {
+    const value = env[name]?.trim() || '';
+    if (!value)
+        throw new Error(`${name} is required when ACI_PERSONALIZATION_HOST_ENABLED=true`);
+    return value;
+}
+function cleanKey(value) {
+    return (value || '').trim().replace(/^\/+|\/+$/g, '');
+}
+function joinKey(...parts) {
+    return parts.map(cleanKey).filter(Boolean).join('/');
+}
+function edgeRoutesKey(siteId, releaseId) {
+    return `edgeRoutes_${edgeKeySegment(siteId)}_${edgeKeySegment(releaseId)}`;
+}
+function edgeKeySegment(value) {
+    return value.replace(/[^A-Za-z0-9_-]/g, '_');
+}
+function isNotFound(error) {
+    const value = error;
+    return value?.$metadata?.httpStatusCode === 404 || value?.name === 'NoSuchKey' || value?.name === 'NotFound';
+}
+function isConditionalConflict(error) {
+    const value = error;
+    return value?.$metadata?.httpStatusCode === 409
+        || value?.$metadata?.httpStatusCode === 412
+        || value?.name === 'ConditionalRequestConflict'
+        || value?.name === 'PreconditionFailed';
+}

package/dist/providers/s3.d.ts

@@ -18,7 +18,7 @@ export declare class S3ContentProvider implements ContentProvider {
     getPage<T = unknown>(route: string): Promise<T>;
     /**
      * getPageByRef serves the exact payload the edge selected (the
-     * X-Baremetal-Function-Ref contract): base page or variant. Only refs the
+     * X-Aci-Content-Ref contract): base page or variant. Only refs the
      * release manifest declares are served — the header names published
      * content, it cannot address arbitrary keys.
      */

package/dist/providers/s3.js

@@ -34,7 +34,7 @@ export class S3ContentProvider {
     }
     /**
      * getPageByRef serves the exact payload the edge selected (the
-     * X-Baremetal-Function-Ref contract): base page or variant. Only refs the
+     * X-Aci-Content-Ref contract): base page or variant. Only refs the
      * release manifest declares are served — the header names published
      * content, it cannot address arbitrary keys.
      */

package/dist/react/VideoPlayer.d.ts

@@ -20,8 +20,12 @@ export declare function VideoPlayer({ video, ...attrs }: VideoPlayerProps): impo
     style?: import("react").CSSProperties | undefined;
     dir?: string | undefined | undefined;
     hidden?: boolean | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
     children?: import("react").ReactNode;
     className?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -34,7 +38,6 @@ export declare function VideoPlayer({ video, ...attrs }: VideoPlayerProps): impo
     contextMenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined | undefined;
@@ -121,9 +124,6 @@ export declare function VideoPlayer({ video, ...attrs }: VideoPlayerProps): impo
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLVideoElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLVideoElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLVideoElement> | undefined;

package/dist/react/index.d.ts

@@ -29,8 +29,12 @@ export declare function Image({ image, value, ...attrs }: ImageProps): import("r
     style?: import("react").CSSProperties | undefined;
     dir?: string | undefined | undefined;
     hidden?: boolean | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
     children?: ReactNode;
     className?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined | undefined;
     useMap?: string | undefined | undefined;
@@ -45,7 +49,6 @@ export declare function Image({ image, value, ...attrs }: ImageProps): import("r
     contextMenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined | undefined;
@@ -132,9 +135,6 @@ export declare function Image({ image, value, ...attrs }: ImageProps): import("r
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLImageElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLImageElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLImageElement> | undefined;

package/dist/types/page.d.ts

@@ -30,7 +30,7 @@ export interface BlockNode {
     component: string;
     props: Record<string, unknown>;
     renderHints: BlockRenderHints;
-    contentRef?: string;
+    contentPath?: string;
 }
 export interface BlockRenderHints {
     canStatic: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradial/aci",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -67,6 +67,11 @@
       "import": "./dist/next/middleware.js",
       "default": "./dist/next/middleware.js"
     },
+    "./next/vercel-personalization": {
+      "types": "./dist/next/vercel-personalization.d.ts",
+      "import": "./dist/next/vercel-personalization.js",
+      "default": "./dist/next/vercel-personalization.js"
+    },
     "./next/asset-route": {
       "types": "./dist/next/asset-route.d.ts",
       "import": "./dist/next/asset-route.js",
@@ -98,15 +103,9 @@
       "import": "./dist/testing/conformance/index.js"
     }
   },
-  "scripts": {
-    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
-    "test": "node --import tsx --test \"src/**/*.test.ts\"",
-    "build:cli": "cd ../.. && ./scripts/build-cli.sh",
-    "generate-starters": "cd ../.. && tsx scripts/generate-starters.ts",
-    "compile-registry": "tsx src/cli/compile-registry.mjs",
-    "prepack": "npm run generate-starters && npm run build && node scripts/ensure-bin-modes.mjs"
-  },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.883.0",
+    "@vercel/oidc-aws-credentials-provider": "^3.3.0",
     "markdown-it": "^14.1.0",
     "sanitize-html": "^2.13.1",
     "ws": "^8.18.0"
@@ -138,6 +137,7 @@
     "@types/react": "^19.0.0",
     "@types/sanitize-html": "^2.16.0",
     "@types/ws": "^8.18.0",
+    "esbuild": "0.28.1",
     "jsdom": "^29.1.1",
     "next": "^15.5.19",
     "tsx": "^4.20.0",
@@ -145,11 +145,19 @@
     "zod": "^4.0.0"
   },
   "optionalDependencies": {
-    "@gradial/aci-cli-darwin-arm64": "0.1.40",
-    "@gradial/aci-cli-darwin-x64": "0.1.40",
-    "@gradial/aci-cli-linux-arm64": "0.1.40",
-    "@gradial/aci-cli-linux-x64": "0.1.40",
-    "@gradial/aci-cli-win32-arm64": "0.1.40",
-    "@gradial/aci-cli-win32-x64": "0.1.40"
+    "@gradial/aci-cli-darwin-arm64": "0.1.41",
+    "@gradial/aci-cli-darwin-x64": "0.1.41",
+    "@gradial/aci-cli-linux-arm64": "0.1.41",
+    "@gradial/aci-cli-linux-x64": "0.1.41",
+    "@gradial/aci-cli-win32-arm64": "0.1.41",
+    "@gradial/aci-cli-win32-x64": "0.1.41"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
+    "test": "node --import tsx --test \"src/**/*.test.ts\"",
+    "build:collect": "node scripts/build-collect.mjs",
+    "build:cli": "cd ../.. && ./scripts/build-cli.sh",
+    "generate-starters": "cd ../.. && tsx scripts/generate-starters.ts",
+    "compile-registry": "tsx src/cli/compile-registry.mjs"
   }
-}
+}

package/src/cli/verify-next-cdn-routes.mjs

@@ -52,16 +52,17 @@ checkMissing(
   'Use src/app/[[...slug]]/page.tsx (optional catch-all). The required [...slug] form breaks file-provider local dev where "/" arrives with an empty slug.',
 );
 
-checkMissing(
-  'legacy app-level asset route is removed',
+checkFile(
+  'canonical asset route exists',
   'src/app/gradial/assets/[...path]/route.ts',
-  'Assets are served via URL rewrites in withAci(), not an app-level route.',
+  (content) => content.includes('@gradial/aci/next/asset-route'),
+  'Expected the canonical asset route to use @gradial/aci/next/asset-route.',
 );
 
 checkMissing(
   'legacy release-scoped asset route is removed',
   'src/app/gradial/assets/[releaseId]/[...path]/route.ts',
-  'Assets are served via URL rewrites in withAci(), not an app-level route.',
+  'Release-scoped asset URLs are produced by withAci() rewrites into the canonical src/app/gradial/assets/[...path]/route.ts; do not add a [releaseId] route.',
 );
 
 checkMissing(

package/src/types/page.ts

@@ -31,7 +31,7 @@ export interface BlockNode {
   component: string;
   props: Record<string, unknown>;
   renderHints: BlockRenderHints;
-  contentRef?: string;
+  contentPath?: string;
 }
 
 export interface BlockRenderHints {

package/templates/astro/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 { 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/astro/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/astro/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.astro';
+import PersonalizationChoice from '../components/sections/PersonalizationChoice.astro';
 import ContainerSection from '../components/sections/ContainerSection.astro';
 import ButtonBlock from '../components/elements/ButtonBlock.astro';
 import Header from '../components/chrome/Header.astro';
@@ -18,6 +20,7 @@ import StatsBar from '../components/sections/StatsBar.astro';
 
 export const registry = createRegistry([
   [homeHeroContract, HomeHero],
+  [personalizationChoiceContract, PersonalizationChoice],
   [containerContract, ContainerSection],
   [buttonContract, ButtonBlock],
   [siteNavigationContract, Header],

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"
+  }
+}