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

package/templates/common/starter-content/.content/patterns/components/site-footer.json

@@ -0,0 +1,203 @@
+{
+  "$type": "componentPattern",
+  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
+  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "name": "site-footer",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "site-footer",
+    "type": "object",
+    "properties": {
+      "brandHref": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLabel": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLogo": {
+        "anyOf": [
+          {
+            "type": "object",
+            "properties": {
+              "src": {
+                "type": "string"
+              },
+              "alt": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "src",
+              "alt"
+            ],
+            "additionalProperties": false
+          },
+          {
+            "type": "null"
+          }
+        ]
+      },
+      "columns": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "title": {
+              "type": "string"
+            },
+            "links": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "label": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "href": {
+                    "type": "string",
+                    "minLength": 1
+                  }
+                },
+                "required": [
+                  "id",
+                  "label",
+                  "href"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "groups": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "title": {
+                    "type": "string"
+                  },
+                  "links": {
+                    "type": "array",
+                    "items": {
+                      "type": "object",
+                      "properties": {
+                        "id": {
+                          "type": "string",
+                          "minLength": 1
+                        },
+                        "label": {
+                          "type": "string",
+                          "minLength": 1
+                        },
+                        "href": {
+                          "type": "string",
+                          "minLength": 1
+                        }
+                      },
+                      "required": [
+                        "id",
+                        "label",
+                        "href"
+                      ],
+                      "additionalProperties": false
+                    }
+                  }
+                },
+                "required": [
+                  "id",
+                  "title",
+                  "links"
+                ],
+                "additionalProperties": false
+              }
+            }
+          },
+          "required": [
+            "id"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "social": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            },
+            "icon": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "legalLinks": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "copyright": {
+        "type": "string"
+      }
+    },
+    "required": [
+      "brandHref",
+      "brandLabel",
+      "columns"
+    ],
+    "additionalProperties": false
+  },
+  "imageSlots": {},
+  "notes": "",
+  "skills": []
+}

package/templates/common/starter-content/.content/patterns/components/site-navigation.json

@@ -0,0 +1,115 @@
+{
+  "$type": "componentPattern",
+  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
+  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "name": "site-navigation",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "site-navigation",
+    "type": "object",
+    "properties": {
+      "brandHref": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLabel": {
+        "type": "string",
+        "minLength": 1
+      },
+      "brandLogo": {
+        "anyOf": [
+          {
+            "type": "object",
+            "properties": {
+              "src": {
+                "type": "string"
+              },
+              "alt": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "src",
+              "alt"
+            ],
+            "additionalProperties": false
+          },
+          {
+            "type": "null"
+          }
+        ]
+      },
+      "navigation": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "utilities": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string",
+              "minLength": 1
+            },
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "href": {
+              "type": "string",
+              "minLength": 1
+            },
+            "variant": {
+              "type": "string",
+              "enum": [
+                "primary",
+                "secondary",
+                "tertiary",
+                "outline",
+                "ghost"
+              ]
+            }
+          },
+          "required": [
+            "id",
+            "label",
+            "href"
+          ],
+          "additionalProperties": false
+        }
+      }
+    },
+    "required": [
+      "brandHref",
+      "brandLabel",
+      "navigation"
+    ],
+    "additionalProperties": false
+  },
+  "imageSlots": {},
+  "notes": "",
+  "skills": []
+}

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

@@ -0,0 +1,45 @@
+{
+  "$type": "componentPattern",
+  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
+  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "name": "stats_bar",
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "title": "stats_bar",
+    "type": "object",
+    "properties": {
+      "stats": {
+        "minItems": 1,
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "minLength": 1
+            },
+            "value": {
+              "type": "string",
+              "minLength": 1
+            },
+            "suffix": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "label",
+            "value"
+          ],
+          "additionalProperties": false
+        }
+      }
+    },
+    "required": [
+      "stats"
+    ],
+    "additionalProperties": false
+  },
+  "imageSlots": {},
+  "notes": "",
+  "skills": []
+}

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

@@ -0,0 +1,14 @@
+{
+  "$type": "layoutPattern",
+  "buildId": "codebuild_01a017ed-c52f-703a-a6b4-a0943c057d31",
+  "codeDigest": "sha256:119dd8414ca342ca67f4dd4703dcb504630220bbdca9130b1501ee7b25693134",
+  "name": "default",
+  "slots": [
+    "header",
+    "main",
+    "footer"
+  ],
+  "default": false,
+  "notes": "",
+  "skills": []
+}

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

@@ -27,7 +27,7 @@
     },
     "overlayResolution": {
       "type": "array",
-      "items": { "enum": ["locale", "audience"] }
+      "items": { "enum": ["locale", "audience", "segment", "experiment", "experimentArm"] }
     },
     "brandHref": { "type": "string" },
     "brandLogo": {

package/templates/nextjs/template/.aci.yaml

@@ -0,0 +1,10 @@
+version: "1"
+siteId: "starter-nextjs"
+framework: next
+source:
+  root: "./"
+componentRegistry: "src/cms/registry.ts"
+layoutRegistry: "src/app/layout.tsx"
+routes:
+  cmsManaged: "/[...slug]"
+rendererProtocol: stdio-json

package/templates/nextjs/template/package.json.tmpl

@@ -15,12 +15,13 @@
     "build:storybook": "storybook build"
   },
   "engines": {
-    "node": ">=22",
+    "node": ">=24",
     "npm": ">=10"
   },
   "dependencies": {
+    "@c15t/nextjs": "^2.2.1",
     "@gradial/aci": "{{aciVersion}}",
-    "next": "^15.1.6",
+    "next": "15.5.24",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -31,7 +32,7 @@
     "@eslint/compat": "^1.2.0",
     "@eslint/eslintrc": "^3.2.0",
     "eslint": "^9.18.0",
-    "eslint-config-next": "^15.1.6",
+    "eslint-config-next": "15.5.24",
     "eslint-plugin-import": "^2.29.1",
     "tailwindcss": "^4.2.4",
     "@tailwindcss/postcss": "^4.2.4",

package/templates/nextjs/template/src/app/_components/c15t-bridge.ts

@@ -0,0 +1,30 @@
+export type Consents = Record<string, boolean>;
+export type ConsentListener = (payload: { consents: Consents }) => void;
+
+export interface C15tBridgeTarget {
+  c15t?: {
+    consents?: Consents;
+    onConsentChange?: (listener: ConsentListener) => void;
+  };
+}
+
+const listenersByTarget = new WeakMap<object, Set<ConsentListener>>();
+
+// Install the discovery/subscription surface immediately. Consent values stay
+// absent until publish is called with a real visitor decision, but a collector
+// that subscribes before that decision remains connected indefinitely.
+export function installC15tBridge(target: C15tBridgeTarget): (consents: Consents) => void {
+  let listeners = listenersByTarget.get(target);
+  if (!listeners) {
+    listeners = new Set<ConsentListener>();
+    listenersByTarget.set(target, listeners);
+  }
+  const bridge = (target.c15t ??= {});
+  bridge.onConsentChange ??= (listener) => {
+    listeners.add(listener);
+  };
+  return (consents) => {
+    bridge.consents = consents;
+    for (const listener of [...listeners]) listener({ consents });
+  };
+}

package/templates/nextjs/template/src/app/_components/c15t-consent-ui.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+// Themed c15t UI, loaded lazily via next/dynamic from consent-manager.tsx.
+// Keeping the provider, banner, dialog, and their stylesheet in this separate
+// chunk keeps them out of the self-contained error pages (REQ-14's 150 KiB
+// budget) — error routes share the root layout but never carry the collect
+// tag, so this chunk is never loaded there.
+
+import {
+  ConsentBanner,
+  ConsentDialog,
+  ConsentManagerProvider,
+} from '@c15t/nextjs';
+import './consent-manager.css';
+
+export default function C15tConsentUI() {
+  const backendURL = process.env.NEXT_PUBLIC_C15T_BACKEND_URL;
+  return (
+    <ConsentManagerProvider
+      options={
+        backendURL
+          ? {
+              mode: 'hosted',
+              backendURL,
+              consentCategories: ['necessary', 'measurement', 'marketing'],
+            }
+          : {
+              mode: 'offline',
+              consentCategories: ['necessary', 'measurement', 'marketing'],
+            }
+      }
+    >
+      <ConsentBanner />
+      <ConsentDialog />
+    </ConsentManagerProvider>
+  );
+}

package/templates/nextjs/template/src/app/_components/consent-manager.css

@@ -0,0 +1,63 @@
+@import "@c15t/nextjs/styles.css";
+
+/* c15t consent surfaces (banner + dialog) mapped onto Meridian tokens.
+ * `:root:root` because ConsentManagerProvider injects <style id="c15t-theme">
+ * with c15t's defaults on `:root` into <body> at runtime — after the head
+ * stylesheet — so a plain `:root` rule here would lose on source order.
+ * c15t's `-dark` component variables reference the same base tokens, so both
+ * color schemes stay on the Meridian light palette. */
+:root:root {
+  /* Typography — Inter everywhere, on the Meridian scale. */
+  --c15t-font-family: var(--font-family-base);
+  --c15t-font-size-xs: var(--text-size-caption);
+  --c15t-font-size-sm: var(--text-size-body-small);
+  --c15t-font-size-md: var(--text-size-body);
+  --c15t-font-size-base: var(--text-size-body);
+  --c15t-font-size-lg: var(--text-size-body-large);
+  --c15t-font-weight-normal: var(--font-weight-regular);
+  --c15t-font-weight-regular: var(--font-weight-regular);
+  --c15t-font-weight-medium: var(--font-weight-medium);
+  --c15t-font-weight-semibold: var(--font-weight-semibold);
+  --c15t-line-height-tight: var(--leading-snug);
+  --c15t-line-height-normal: var(--leading-body);
+  --c15t-line-height-relaxed: var(--leading-relaxed);
+
+  /* Color — Meridian palette. */
+  --c15t-primary: var(--color-accent-primary);
+  --c15t-primary-hover: var(--color-brand-500);
+  --c15t-surface: var(--color-white);
+  --c15t-surface-hover: var(--color-surface-100);
+  --c15t-border: var(--color-border-default);
+  --c15t-text: var(--color-text-primary);
+  --c15t-text-muted: var(--color-text-secondary);
+  --c15t-text-on-primary: var(--color-white);
+  --c15t-overlay: color-mix(in srgb, var(--color-surface-900) 45%, transparent);
+  --c15t-switch-track: var(--color-surface-300);
+  --c15t-switch-track-active: var(--color-accent-primary);
+  --c15t-switch-thumb: var(--color-white);
+
+  /* Shape + depth — Meridian card treatment. */
+  --c15t-radius-md: var(--radius-button);
+  --c15t-radius-lg: var(--radius-card);
+  --c15t-shadow-md: var(--shadow-card);
+  --c15t-shadow-lg: var(--shadow-elevated);
+
+  /* c15t hardcodes these component values instead of deriving them from the
+   * base tokens; re-point the ones the banner + dialog actually render. */
+  --legal-links-color: var(--color-accent-primary);
+  --legal-links-focus-color: var(--color-accent-primary);
+  --legal-links-focus-color-dark: var(--color-accent-primary);
+  --consent-dialog-card-shadow: var(--shadow-elevated);
+}
+
+/* Stack the banner/dialog action buttons on narrow viewports. c15t only
+ * stacks via its `direction: column` config; the default row layout squeezes
+ * 2–3 buttons onto a phone. The attribute selectors match c15t's stable
+ * class-name prefixes (the hashed suffixes change between c15t releases). */
+@media (width < 640px) {
+  [class*="c15t-ui-footer-"],
+  [class*="c15t-ui-footerSubGroup-"] {
+    flex-direction: column;
+    width: 100%;
+  }
+}

package/templates/nextjs/template/src/app/_components/consent-manager.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+// c15t consent manager (personalization-onboarding ANTI-3: CMP-less sites are
+// pointed at c15t via the starter kits). Offline mode by default; set
+// NEXT_PUBLIC_C15T_BACKEND_URL to use a hosted or self-hosted c15t backend.
+//
+// The component gates itself on the collect tag in the document: the tag is
+// the only per-site configuration surface, emitted by createPage from the
+// site config's personalization block, so the consent surface appears exactly
+// when the tag says data-aci-consent="c15t" — and never on pages without the
+// tag (error pages, custom routes). This keeps the root layout free of
+// server-side config loading.
+//
+// The ACI collect SDK's c15t preset reads window.c15t = { consents,
+// onConsentChange }, but c15t publishes its store as window.c15tStore. The
+// bridge below exposes the subscription shape immediately, while publishing
+// consent values only after a real visitor decision (consentInfo set), so
+// pre-decision defaults never read as a withdrawal.
+
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { installC15tBridge, type Consents } from './c15t-bridge';
+
+// Lazy so the c15t bundle + stylesheet stay out of the self-contained error
+// pages (REQ-14 budget): those routes never carry the collect tag, so this
+// chunk is never requested there.
+const C15tConsentUI = dynamic(() => import('./c15t-consent-ui'), {
+  ssr: false,
+});
+
+interface ConsentStoreState {
+  consents?: Consents;
+  consentInfo?: unknown;
+}
+
+interface ConsentStoreLike {
+  getState(): ConsentStoreState;
+  subscribe(listener: (state: ConsentStoreState) => void): () => void;
+}
+
+export function ConsentManager() {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const tag = document.querySelector('script[data-aci-consent]');
+    setEnabled(tag?.getAttribute('data-aci-consent') === 'c15t');
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const w = window as typeof window & {
+      c15t?: { consents?: Consents; onConsentChange?: (cb: (payload: { consents: Consents }) => void) => void };
+      c15tStore?: ConsentStoreLike;
+    };
+    const publish = installC15tBridge(w);
+    const onState = (state: ConsentStoreState): void => {
+      if (state.consentInfo && state.consents) publish(state.consents);
+    };
+    let unsubscribe: (() => void) | undefined;
+    let remaining = 40; // same bounded poll the collect SDK uses for window.c15t
+    const poll = (): void => {
+      if (w.c15tStore) {
+        onState(w.c15tStore.getState());
+        unsubscribe = w.c15tStore.subscribe(onState);
+        return;
+      }
+      remaining -= 1;
+      if (remaining > 0) window.setTimeout(poll, 250);
+    };
+    poll();
+    return () => unsubscribe?.();
+  }, [enabled]);
+
+  if (!enabled) return null;
+  return <C15tConsentUI />;
+}

package/templates/nextjs/template/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { Inter, Space_Grotesk } from 'next/font/google';
 import { DevRefresh } from '@gradial/aci/next';
+import { ConsentManager } from './_components/consent-manager';
 import '@/design-system/styles.css';
 
 const inter = Inter({
@@ -22,6 +23,7 @@ export default function Layout({ children }: { children: ReactNode }) {
     <html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
       <body>
         {children}
+        <ConsentManager />
         <DevRefresh />
       </body>
     </html>

package/dist/edge/personalization-core.d.ts

@@ -1,11 +0,0 @@
-export function selectPersonalizationVariant(request: any, route: any, claims: any, experiments: any, identity: any): any;
-export function resolvePersonalizationDecision(request: any, route: any, claims: any, experiments: any, identity: any): {
-    variant: any;
-    experiment: {
-        experimentId: any;
-        armId: any;
-        allocationVersion: string;
-        variantKey: any;
-        bucket: number;
-    } | null;
-};