@gradial/aci 0.1.31 → 0.1.34

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

@@ -1,112 +1,13 @@
 {
   "$type": "page",
-  "id": "meridian-home",
+  "id": "home",
   "status": "published",
   "layout": "default",
   "metadata": {
-    "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/"
+    "title": "Home",
+    "description": "Welcome to your new ACI site."
   },
   "regions": {
-    "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": "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"
-              }
-            }
-          ]
-        }
-      }
-    ]
+    "main": []
   }
 }

package/templates/common/.nvmrc

@@ -0,0 +1 @@
+22

package/templates/common/README.md.tmpl

@@ -1,12 +1,27 @@
 # {{siteName}}
 
+A CMS-driven {{frameworkName}} site built on the **Gradial ACI** content
+platform, seeded with the Meridian sample site.
+
+## Prerequisites
+
+- **Node 22** (see `.nvmrc`)
+- **npm 10+** (ships with Node 22)
+
+No environment variables, accounts, or API tokens are required for local
+development.
+
 ## Quick Start
 
 ```bash
 npm install
-npm run dev
+npm run dev        # → {{devUrl}}/
 ```
 
+The sample site serves the home page at `/` and an about page at `/about/`.
+The dev server compiles `.content/` into `.aci/compiled/` on startup and
+recompiles (with browser refresh) whenever content changes.
+
 ## Skills
 
 This project uses progressive disclosure skills for both humans and agents.
@@ -23,27 +38,33 @@ Agents: load skills from `.agents/skills/`. See `.agents/AGENTS.md`.
 ## Commands
 
 ```bash
-npm run dev              # Start dev server
-npm run build            # Build for production
-npm run typecheck        # TypeScript type checking
-npm run aci:validate     # Validate content against schemas
-npm run aci:compile      # Compile contract registry
-npm run content:compile  # Compile content into .aci/compiled/
-npm run aci:doctor       # Check project health
-npm run aci:build        # Full build (contracts + content + framework)
+npm run dev              # Start dev server at {{devUrl}}
+npm run build            # Production build
+npm run content:compile  # Compile content from .content/ into .aci/
+npm run typecheck        # TypeScript validation
+npm run storybook        # Component development (http://localhost:6006)
+npm run build:storybook  # Build Storybook for deployment
 ```
 
 ## Project Structure
 
 ```
-.content/          Content source (JSON)
+.content/          Content source (JSON pages, fragments, site config)
 src/cms/           Contracts and component registry
 src/components/    Runtime components (elements, sections, chrome)
 src/design-system/ Design tokens and global styles
 .agents/skills/    Skills for humans and agents
-.aci/              Generated artifacts (compiled, schemas)
+.aci/              Generated artifacts (compiled content, schemas) — git-ignored
 ```
 
+## How It Works
+
+Pages are JSON files in `.content/pages/{slug}/_index.json`. Each page lists
+content blocks in `regions.main`; a block names a component and passes props.
+Components are defined by **contracts** (Zod schemas in
+`src/cms/contracts/components/`) and mapped to rendered components in
+`src/cms/registry.ts`.
+
 ## Personalization
 
 The `personalization` block in `.content/config/site.json` controls the

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

@@ -1,21 +1,3 @@
-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 { siteNavigationContract } from './siteNavigation.contract';
-import { siteFooterContract } from './siteFooter.contract';
-import { statsBarContract } from './statsBar.contract';
-
-const componentContracts = [
-  homeHeroContract,
-  containerContract,
-  buttonContract,
-  siteNavigationContract,
-  siteFooterContract,
-  featureGridContract,
-  featureCardContract,
-  statsBarContract,
-];
+const componentContracts: readonly unknown[] = [];
 
 export default componentContracts;

package/templates/common/design-system/tokens/colors.css

@@ -39,6 +39,24 @@
   /* Focus */
   --color-focus: var(--color-brand-600);
 
+  /* Extended surface palette */
+  --color-surface-500: #64748b;
+  --color-surface-600: #475569;
+  --color-surface-700: #334155;
+  --color-surface-800: #1e293b;
+
+  /* "Space" dark section palette — used by FeatureGrid, StatsBar, FeatureCard */
+  --color-space-deep: #080e1e;
+  --color-space-surface: #0f1829;
+  --color-space-raised: #162036;
+  --color-edge-space: rgba(255, 255, 255, 0.06);
+  --color-edge-space-strong: rgba(255, 255, 255, 0.12);
+  --color-fg-space-muted: #94a3b8;
+  --color-fg-secondary: #64748b;
+  --color-brand-blue: #0ea5e9;
+  --color-brand-blue-light: #38bdf8;
+  --color-launch-orange: #f97316;
+
   /* Semantic aliases — light theme default */
   --color-page: var(--color-white);
   --color-page-inverse: var(--color-surface-900);
@@ -76,27 +94,33 @@
 
   /* Gradients */
   --gradient-hero-base: radial-gradient(
-    ellipse 80% 60% at 50% 0%,
-    rgba(14, 165, 233, 0.12) 0%,
-    rgba(14, 165, 233, 0.04) 40%,
+    ellipse 120% 80% at 60% 10%,
+    rgba(14, 165, 233, 0.22) 0%,
+    rgba(14, 165, 233, 0.08) 40%,
     transparent 70%
   );
   --gradient-hero-overlay: linear-gradient(
     180deg,
-    rgba(255, 255, 255, 0.2) 0%,
-    rgba(255, 255, 255, 0.7) 60%,
+    rgba(6, 10, 26, 0.70) 0%,
+    rgba(6, 10, 26, 0.65) 30%,
+    rgba(6, 10, 26, 0.55) 55%,
+    rgba(6, 10, 26, 0.40) 75%,
+    rgba(30, 40, 60, 0.25) 90%,
     rgba(255, 255, 255, 0.95) 100%
   );
   --gradient-hero-overlay-rtl: linear-gradient(
     180deg,
     rgba(255, 255, 255, 0.95) 0%,
-    rgba(255, 255, 255, 0.7) 60%,
-    rgba(255, 255, 255, 0.2) 100%
+    rgba(30, 40, 60, 0.25) 10%,
+    rgba(6, 10, 26, 0.40) 25%,
+    rgba(6, 10, 26, 0.55) 45%,
+    rgba(6, 10, 26, 0.65) 70%,
+    rgba(6, 10, 26, 0.70) 100%
   );
   --gradient-hero-radial: radial-gradient(
-    ellipse 60% 40% at 80% 20%,
-    rgba(249, 115, 22, 0.06) 0%,
-    transparent 60%
+    ellipse 80% 60% at 70% 20%,
+    rgba(14, 165, 233, 0.10) 0%,
+    transparent 55%
   );
   --gradient-card: linear-gradient(
     180deg,

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

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

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

@@ -0,0 +1,112 @@
+{
+  "$type": "page",
+  "id": "meridian-home",
+  "status": "published",
+  "layout": "default",
+  "metadata": {
+    "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": [
+      {
+        "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": "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/starter-content/.content/schemas/site.schema.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://baremetal.local/schemas/site.schema.json",
+  "title": "bare-metal Site Config",
+  "type": "object",
+  "required": ["$type", "id", "status", "title", "domain", "defaultLocale", "overlayResolution"],
+  "additionalProperties": true,
+  "properties": {
+    "$type": { "const": "site" },
+    "id": { "type": "string", "minLength": 1 },
+    "status": { "type": "string", "minLength": 1 },
+    "title": { "type": "string", "minLength": 1 },
+    "domain": { "type": "string", "minLength": 1 },
+    "defaultLocale": { "type": "string", "minLength": 1 },
+    "locales": {
+      "type": "array",
+      "items": { "type": "string", "minLength": 1 }
+    },
+    "overlayResolution": {
+      "type": "array",
+      "items": { "enum": ["locale", "audience"] }
+    },
+    "brandHref": { "type": "string" },
+    "brandLogo": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "src": { "type": "string", "minLength": 1 },
+        "alt": { "type": "string" }
+      }
+    },
+    "navigation": {
+      "type": "array",
+      "items": { "$ref": "#/$defs/link" }
+    },
+    "utilities": {
+      "type": "array",
+      "items": {
+        "allOf": [
+          { "$ref": "#/$defs/link" },
+          {
+            "type": "object",
+            "properties": {
+              "variant": {
+                "enum": ["primary", "secondary", "outline", "ghost"]
+              }
+            }
+          }
+        ]
+      }
+    },
+    "footer": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "columns": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/footerColumn" }
+        },
+        "social": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/link" }
+        },
+        "legalLinks": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/link" }
+        },
+        "copyright": { "type": "string" }
+      }
+    },
+    "seo": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "title": { "type": "string" },
+        "description": { "type": "string" },
+        "siteName": { "type": "string" }
+      }
+    },
+    "personalization": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "collect": { "type": "boolean" },
+        "consentPreset": {
+          "enum": ["c15t", "onetrust", "cookiebot", "trustarc", "manual"]
+        },
+        "consentCategories": {
+          "type": "string",
+          "pattern": "^\\s*[A-Za-z0-9._-]+(\\s*,\\s*[A-Za-z0-9._-]+)*\\s*$"
+        },
+        "debug": { "type": "boolean" }
+      }
+    }
+  },
+  "$defs": {
+    "link": {
+      "type": "object",
+      "required": ["id", "label", "href"],
+      "additionalProperties": true,
+      "properties": {
+        "id": { "type": "string", "minLength": 1 },
+        "label": { "type": "string", "minLength": 1 },
+        "href": { "type": "string", "minLength": 1 }
+      }
+    },
+    "footerGroup": {
+      "type": "object",
+      "required": ["id", "title", "links"],
+      "additionalProperties": true,
+      "properties": {
+        "id": { "type": "string", "minLength": 1 },
+        "title": { "type": "string" },
+        "links": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/link" }
+        }
+      }
+    },
+    "footerColumn": {
+      "type": "object",
+      "required": ["id"],
+      "additionalProperties": true,
+      "properties": {
+        "id": { "type": "string", "minLength": 1 },
+        "title": { "type": "string" },
+        "groups": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/footerGroup" }
+        },
+        "links": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/link" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import { defineComponentContract, blockRefArray } from '@gradial/aci';
+import { z } from 'zod';
+import { buttonContract } from './button.contract';
+import { featureGridContract } from './featureGrid.contract';
+import { featureCardContract } from './featureCard.contract';
+import { statsBarContract } from './statsBar.contract';
+
+export const schema = z.object({
+  theme: z.enum(['auto', 'light', 'dark']).optional(),
+  className: z.string().optional(),
+  content: blockRefArray([buttonContract, featureGridContract, featureCardContract, statsBarContract]).optional(),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const containerContract = defineComponentContract({
+  id: 'container',
+  props: schema,
+});

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

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

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

@@ -0,0 +1,16 @@
+import { defineComponentContract, blockRefArray } from '@gradial/aci';
+import { z } from 'zod';
+import { featureCardContract } from './featureCard.contract';
+
+export const schema = z.object({
+  title: z.string().optional(),
+  subtitle: z.string().optional(),
+  features: blockRefArray([featureCardContract]).optional(),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const featureGridContract = defineComponentContract({
+  id: 'feature_grid',
+  props: schema,
+});

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

@@ -0,0 +1,21 @@
+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 { siteFooterContract } from './siteFooter.contract';
+import { siteNavigationContract } from './siteNavigation.contract';
+import { statsBarContract } from './statsBar.contract';
+
+const componentContracts = [
+  homeHeroContract,
+  containerContract,
+  buttonContract,
+  siteNavigationContract,
+  siteFooterContract,
+  featureGridContract,
+  featureCardContract,
+  statsBarContract,
+];
+
+export default componentContracts;

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

@@ -0,0 +1,45 @@
+import { defineComponentContract } from '@gradial/aci';
+import { z } from 'zod';
+
+const linkSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  href: z.string().min(1),
+});
+
+const groupSchema = z.object({
+  id: z.string().min(1),
+  title: z.string(),
+  links: z.array(linkSchema),
+});
+
+const columnSchema = z.object({
+  id: z.string().min(1),
+  title: z.string().optional(),
+  links: z.array(linkSchema).optional(),
+  groups: z.array(groupSchema).optional(),
+});
+
+const socialSchema = linkSchema.extend({
+  icon: z.string().optional(),
+});
+
+export const schema = z.object({
+  brandHref: z.string().min(1),
+  brandLabel: z.string().min(1),
+  brandLogo: z.object({
+    src: z.string(),
+    alt: z.string(),
+  }).nullable().optional(),
+  columns: z.array(columnSchema),
+  social: z.array(socialSchema).optional(),
+  legalLinks: z.array(linkSchema).optional(),
+  copyright: z.string().optional(),
+});
+
+export type ContentProps = z.infer<typeof schema>;
+
+export const siteFooterContract = defineComponentContract({
+  id: 'site-footer',
+  props: schema,
+});