Architecture Overview

ChamevoJS is built as a monorepo with clearly separated concerns.

Package Dependency Graph

@chamevo/types     ← No dependencies (pure TypeScript interfaces)
     ↑
@chamevo/core      ← Depends on @chamevo/types, fabric@7.x
     ↑
@chamevo/components ← Depends on @chamevo/types, @chamevo/core, @stencil/core
     ↑
@chamevo/customizer  ← Re-exports both core and components

High-Level Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                      @chamevo/customizer                            │
│                     (Combined Bundle)                               │
├─────────────────────────────────┬───────────────────────────────────┤
│       @chamevo/core             │      @chamevo/components          │
│    (Canvas/Business Logic)      │      (StencilJS UI)               │
│                                 │                                   │
│  ┌─────────────────────────┐    │    ┌─────────────────────────┐   │
│  │      ChamevoJS          │◄───┼────│     cv-customizer       │   │
│  │      ChamevoView        │    │    │     cv-canvas           │   │
│  └─────────────────────────┘    │    │     cv-mainbar          │   │
│                                 │    │     cv-module-*         │   │
│  ┌─────────────────────────┐    │    └─────────────────────────┘   │
│  │       Services          │    │                                   │
│  │  - OptionsService       │    │    ┌─────────────────────────┐   │
│  │  - PricingService       │    │    │      Stencil Store      │   │
│  │  - FontService          │    │    │      (UI State)         │   │
│  │  - UploadService        │    │    └─────────────────────────┘   │
│  └─────────────────────────┘    │                                   │
│                                 │    ┌─────────────────────────┐   │
│  ┌─────────────────────────┐    │    │    Tailwind CSS         │   │
│  │   FabricJS v7 Objects   │    │    │    (cv- prefix)         │   │
│  │  - CVText, CVImage      │    │    └─────────────────────────┘   │
│  │  - CVCurvedText         │    │                                   │
│  │  - CVSVGGroup           │    │                                   │
│  │  - CVPrintArea          │    │                                   │
│  └─────────────────────────┘    │                                   │
├─────────────────────────────────┴───────────────────────────────────┤
│                        @chamevo/types                               │
│              (Shared TypeScript Interfaces)                         │
└─────────────────────────────────────────────────────────────────────┘

Key Design Decisions

Concern	Approach
State	Stencil Store (centralized, reactive)
Events	Typed EventEmitter (core) + Stencil @Event (components)
Styling	CSS custom properties + Tailwind CSS with cv- prefix
Canvas	Single canvas — only active view rendered
FabricJS	ES6 classes with CV prefix (no prototype extension)
i18n	JSON-based with setLabels() / t() service
Testing	Vitest (core) + Stencil testing utils (components)

Data Flow

User Action (click, drag, type)
       │
       ▼
┌─────────────────┐
│  UI Component   │  (StencilJS)
│  cv-module-text │
└────────┬────────┘
         │ calls canvas method
         ▼
┌─────────────────┐
│  ChamevoCanvas  │  (FabricJS wrapper)
│  addElement()   │
└────────┬────────┘
         │ emits event
         ▼
┌─────────────────┐
│  ChamevoJS      │  (orchestrator)
│  'elementAdd'   │
└────────┬────────┘
         │ updates store
         ▼
┌─────────────────┐
│  Stencil Store  │  (reactive)
│  UI re-renders  │
└─────────────────┘

Build Order

pnpm build:types      # 1. Types (no dependencies)
pnpm build:core       # 2. Core (depends on types)
pnpm build:components # 3. Components (depends on types + core)
pnpm build:full       # 4. Customizer bundle (re-exports all)

Next Steps

• Data Model — Product, view, and element data structures