Toju/toju-app/src/app/domains/theme/README.md

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

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