# PricingTable Component — CSA Handoff

## Project Context

CMS-aiChemist is a multi-project orchestration system for design systems, token pipelines, and CMS-driven frontends powered by agentic AI. This handoff documents the delivery of the PricingTable component — the 5th shared UI component in the platform.

## What Was Delivered

### PricingTable Component
A responsive pricing tier grid component added to `packages/ui/src/`. The component:
- Accepts an array of pricing tiers with name, price, period, features, and CTA text
- Renders a CSS Grid layout with auto-fit columns (min 280px)
- Supports a "featured" tier with visual emphasis (glow shadow, primary border, scale transform, "Recommended" badge)
- Consumes 12 new DTCG design tokens for all visual properties (zero hardcoded values)
- Exports TypeScript interfaces for type-safe integration

### Token Pipeline Growth
12 new tokens added under `components.pricingCard`:
- Background (default + featured elevated)
- Border radius, padding, border colors (default + featured primary)
- Typography colors (price, label, feature)
- Check mark color (green CTA)
- Shadows (md default + glow featured)

Total token count grew from 109 to 121.

### New /pricing Route
A dedicated showcase page at `/pricing` in the Next.js surface with 3 demo tiers:
- **Starter** ($0/free) — Basic features for getting started
- **Pro** ($49/mo, featured) — Full platform access
- **Enterprise** (Custom) — Dedicated infrastructure, SLA

### Cross-Surface Integration
- PricingTable added to the Design System catalog at `/design-system`
- Landing page stats updated to reflect 121 tokens / 5 components
- Dashboard mock data synced across all project entries
- Navigation shell updated with /pricing link

## Architecture Decision: Pricing as Component vs Page

The PricingTable is built as a reusable component in the shared UI library, not a page-specific layout. This means:
1. Any surface (Next.js, Astro, future surfaces) can render pricing tiers
2. Tiers are passed as data props, not hardcoded in the component
3. The component follows the same token-first design pattern as Button, Card, Tabs, and Alert

## Key Technical Decisions

1. **`onTierSelect` callback naming** — Avoids conflict with `HTMLAttributes.onSelect`
2. **BEM with `ac-` prefix** — Consistent with existing aiChemist component convention
3. **CSS Grid auto-fit** — Responsive without media queries, graceful degradation from 3 → 2 → 1 column
4. **Featured tier scale transform** — 1.05 scale + glow shadow for visual hierarchy

## Client Decisions Needed

1. **Tier structure**: Should the platform offer 3 tiers (Starter/Pro/Enterprise) or a different breakdown?
2. **Pricing model**: Fixed monthly pricing, annual discount option, or usage-based?
3. **Feature allocation**: Which platform capabilities should be gated by tier?
4. **CTA actions**: What should happen when a user clicks "Get Started" / "Start Free Trial" / "Contact Sales"?
5. **Featured tier**: Should Pro remain the recommended tier, or should this be configurable?

## Verification

- All 6 Next.js routes build and return HTTP 200
- Visual QA score: 96/100 (pricing page: 100/100)
- Zero hardcoded color/spacing values in PricingTable CSS
- All tokens trace to DTCG JSON aliases

## Commits

- `f85bba9` — feat(ui): add PricingTable component, /pricing route, 121 tokens
- `8bae580` — fix: sync all surface stats to 121 tokens / 5 components