# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

SSuite is an Angular workspace containing three libraries designed as a modular component system:

- **shared-ui**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
- **shared-utils**: Common utilities and shared services
- **ui-essentials**: Essential UI components and functionality

## Development Commands

### Building
```bash
# Build all libraries
ng build

# Build specific library
ng build shared-ui
ng build shared-utils  
ng build ui-essentials

# Watch mode for development
ng build --watch --configuration development
```

### Testing
```bash
# Run all tests
ng test

# Run tests for specific library
ng test shared-ui
ng test shared-utils
ng test ui-essentials
```

### Development Server
```bash
# Start development server (if main application exists)
ng serve
```

## Architecture

### Library Structure
Each library follows Angular's standard structure:
- `src/lib/` - Library source code
- `src/public-api.ts` - Public exports
- `ng-package.json` - Library packaging configuration
- `package.json` - Library metadata

### TypeScript Path Mapping
Libraries are mapped in `tsconfig.json` paths:
```json
"paths": {
  "shared-ui": ["./dist/shared-ui"],
  "shared-utils": ["./dist/shared-utils"], 
  "ui-essentials": ["./dist/ui-essentials"]
}
```

### Design System (shared-ui)
Contains a comprehensive SCSS architecture:
- **Base tokens**: Colors, typography, spacing, motion, shadows
- **Semantic tokens**: High-level design tokens built on base tokens
- **Components**: Base buttons, cards, forms, navigation  
- **Layouts**: Grid systems, dashboard layouts, responsive templates
- **Utilities**: Display, layout, spacing utilities
- **Patterns**: Content, interaction, and layout patterns
- **Font faces**: Extensive collection of web fonts

#### Style Import Options:
```scss
// Complete design system (includes semantic + base tokens + fonts)
@use 'shared-ui/src/styles' as ui;

// Tokens only (semantic + base tokens)
@use 'shared-ui/src/styles/tokens' as tokens;

// Semantic tokens only (includes base tokens)
@use 'shared-ui/src/styles/semantic' as semantic;

// Base tokens only
@use 'shared-ui/src/styles/base' as base;

// Components and utilities (import separately to avoid circular dependencies)
@use 'shared-ui/src/styles/commons' as commons;
```

Entry points:
- Main: `projects/shared-ui/src/styles/index.scss`
- Tokens: `projects/shared-ui/src/styles/tokens.scss` 
- Semantic: `projects/shared-ui/src/styles/semantic/index.scss`

## Development Notes

- All libraries use Angular 19.2+ with strict TypeScript configuration
- Libraries must be built before being consumed by other projects
- Use `ng generate` commands within library contexts for scaffolding
- Libraries are publishable to npm after building to `dist/` directory
- Testing uses Karma with Jasmine framework