# Theme Domain

Manages the theming engine: CSS variable injection, layout grid, theme library persistence, element picker for live editing, and schema validation. Drives the theme settings UI and the `ThemeNodeDirective` used across the app.

## Module map

```
theme/
├── application/
│   └── services/
│       ├── element-picker.service.ts        DOM element picker for live theme editing
│       ├── layout-sync.service.ts           Syncs grid layout state between editor and theme document
│       ├── theme-library.service.ts         Saved-theme CRUD via Electron file system
│       ├── theme-registry.service.ts        Wraps static registry/container lookups as signals
│       └── theme.service.ts                 Core orchestrator: CSS injection, draft/active, validation
│
├── domain/
│   ├── constants/
│   │   └── theme-llm-guide.constants.ts     LLM prompt context for AI-assisted theme editing
│   ├── logic/
│   │   ├── theme-defaults.logic.ts          Default theme document, JSON template, legacy detection
│   │   ├── theme-registry.logic.ts          Static registry of themeable elements and layout containers
│   │   ├── theme-schema.logic.ts            Schema field definitions, animation starters, suggested defaults
│   │   └── theme-validation.logic.ts        Theme document validation against registry + schema
│   └── models/
│       └── theme.model.ts                   All domain types (ThemeDocument, ThemeElementStyles, etc.)
│
├── infrastructure/
│   ├── services/
│   │   └── theme-library-storage.service.ts Electron bridge for saving/loading theme files
│   └── util/
│       └── theme-storage.util.ts            localStorage read/write for active + draft theme text
│
├── feature/
│   ├── settings/
│   │   ├── theme-grid-editor.component.*    Visual grid layout editor
│   │   ├── theme-json-code-editor.component.* CodeMirror JSON editor
│   │   └── theme-settings.component.*       Main theme settings page
│   ├── theme-node.directive.ts              Applies theme styles + picker interaction to host elements
│   └── theme-picker-overlay.component.*     Floating overlay showing picked element info
│
└── index.ts                                 Barrel exports
```

## Layer composition

```mermaid
graph TD
    ThemeService[ThemeService]
    Registry[ThemeRegistryService]
    Library[ThemeLibraryService]
    Layout[LayoutSyncService]
    Picker[ElementPickerService]
    LibStorage[ThemeLibraryStorageService]
    Storage[theme-storage.util]
    Defaults[theme-defaults.logic]
    Validation[theme-validation.logic]
    Schema[theme-schema.logic]
    RegistryLogic[theme-registry.logic]
    Models[theme.model]

    ThemeService --> Defaults
    ThemeService --> Schema
    ThemeService --> RegistryLogic
    ThemeService --> Validation
    ThemeService --> Storage
    Library --> LibStorage
    Library --> ThemeService
    Layout --> ThemeService
    Layout --> Registry
    Layout --> Defaults
    Registry --> RegistryLogic
    Picker --> Registry
    Validation --> Defaults
    Validation --> RegistryLogic
    Defaults --> RegistryLogic
    Defaults --> Models

    click ThemeService "application/services/theme.service.ts" "Core orchestrator" _blank
    click Registry "application/services/theme-registry.service.ts" "Registry wrapper" _blank
    click Library "application/services/theme-library.service.ts" "Theme library CRUD" _blank
    click Layout "application/services/layout-sync.service.ts" "Grid layout sync" _blank
    click Picker "application/services/element-picker.service.ts" "Element picker" _blank
    click LibStorage "infrastructure/services/theme-library-storage.service.ts" "Electron file I/O" _blank
    click Storage "infrastructure/util/theme-storage.util.ts" "localStorage" _blank
    click Defaults "domain/logic/theme-defaults.logic.ts" "Default theme" _blank
    click Validation "domain/logic/theme-validation.logic.ts" "Validation" _blank
    click Schema "domain/logic/theme-schema.logic.ts" "Schema fields" _blank
    click RegistryLogic "domain/logic/theme-registry.logic.ts" "Static registry" _blank
    click Models "domain/models/theme.model.ts" "Domain types" _blank
```