# Project: Split-Screen Editorial Carousel

## Architecture
This project extends the existing `EDITORIAL_CAROUSEL` page section schema and UI components in the HomAroma monorepo.
- **Database/Types Schema**: `packages/types/index.ts` defines the types used across the frontend applications (apps/admin, apps/spa, apps/website) and backend services.
- **Backend Validation**: `apps/backend/src/routes/pages.ts` validates incoming payloads using schemas imported from `@homaroma/types`.
- **CMS/MCP Server**: `apps/mcp-server/section-toolkit.ts` exposes MCP tools for managing/updating content, using schemas aligned with `@homaroma/types`.
- **Admin UI**: `apps/admin/src/components/page-builder/EditorialCarouselForm.tsx` renders a form for content managers to configure the carousel layout and content.
- **SPA Frontend**: `apps/spa/src/components/DynamicEditorialCarousel.tsx` renders the carousel on the SPA client.
- **Website Frontend**: `apps/website/src/components/dynamic/DynamicPageRenderer.tsx` contains the website's `EditorialCarouselSection` renderer.

## Milestones
| # | Name | Scope | Dependencies | Status |
|---|------|-------|-------------|--------|
| M1 | Schema & Types | Update `EditorialCarouselSectionPayloadSchema` in `packages/types/index.ts` to include layout and imagePosition. Update `apps/mcp-server/section-toolkit.ts` to expose those fields in the `update_editorial_carousel` tool. | None | DONE |
| M2 | Admin CMS UI | Update `EditorialCarouselForm.tsx` to support configuring `layout` and `imagePosition` for the carousel section. | M1 | DONE |
| M3 | Frontend UI | Update the carousel components in `apps/spa` and `apps/website` to support `split_screen` and `standard` layouts, respecting desktop split proportions and mobile stacked views, using theme tokens. | M1 | DONE |
| M4 | E2E & Type Verification | Run monorepo typechecking, build validation, and test section CRUD operations using MCP tools. | M2, M3 | DONE |

## Interface Contracts
### `packages/types` -> Consumers
- `EditorialCarouselSectionPayloadSchema` includes:
  - `layout: z.enum(['standard', 'split_screen']).optional()`
  - `imagePosition: z.enum(['left', 'right']).optional()`
- When `layout` is omitted or `'standard'`, components should fall back to existing slide behavior.
- When `layout` is `'split_screen'`, the components render the new split-screen layout.

## Code Layout
- Schema: `packages/types/index.ts`
- MCP Server config: `apps/mcp-server/section-toolkit.ts`
- Admin UI builder: `apps/admin/src/components/page-builder/EditorialCarouselForm.tsx`
- SPA component: `apps/spa/src/components/DynamicEditorialCarousel.tsx`
- Website renderer: `apps/website/src/components/dynamic/DynamicPageRenderer.tsx`