Core System

Das Core-Modul bildet das Fundament von Art.Works! Studio. Es stellt Theme, UI-Komponenten, Settings und Logging bereit.

Theme & Design System

Alle Farben sind zentral definiert in theme/colors.ts:

// Verwendung in Komponenten
import { colors } from '@/theme/colors';

<Box bg={colors.bg.card} color={colors.text.primary}>
  Content
</Box>

Wichtig: Niemals direkte Chakra-Farben wie gray.800 verwenden!

Farbpalette

Token	Verwendung
`colors.bg.primary`	Haupthintergrund
`colors.bg.card`	Karten, Panels
`colors.bg.hover`	Hover-States
`colors.text.primary`	Haupttext
`colors.text.secondary`	Sekundärtext
`colors.accent.primary`	Akzentfarbe

Generic Components

Wiederverwendbare UI-Komponenten:

Component	Zweck
`GenericButtonBar`	Toolbar mit Search, Filter, Actions
`GenericTabs`	Tab-Navigation
`GenericGridItem`	Grid-Darstellung
`GenericListItem`	Listen-Darstellung
`FilterPanel`	Filter nach Labels/Tags

GenericButtonBar

<GenericButtonBar
  searchTerm={search}
  onSearchChange={setSearch}
  filterOptions={filters}
  createMenuItems={[
    { label: 'Neues Artwork', onClick: createArtwork },
    { label: 'Import', onClick: importItem }
  ]}
/>

Settings

Einstellungen werden in settings.json im Workspace gespeichert:

{
  "theme": "dark",
  "language": "de",
  "editor": {
    "fontSize": 14,
    "tabSize": 2
  },
  "grid": {
    "columns": 3,
    "rows": 2
  }
}

Zugriff auf Settings

const { settings, updateSetting } = useSettings();

// Lesen
const fontSize = settings.editor.fontSize;

// Schreiben
updateSetting('editor.fontSize', 16);

Logging

Zentrales Logging über LogService:

import { logger } from '@/services/log.service';

logger.info('Artwork geladen', { id: 'item-001' });
logger.warn('Veraltetes Format');
logger.error('Fehler beim Speichern', error);

Logs werden gespeichert in:

macOS: ~/Library/Application Support/Art.Works! Studio/logs/
Windows: %APPDATA%/Art.Works! Studio/logs/

IPC Communication

Main ↔ Renderer Kommunikation via IPC:

// Renderer (React)
const item = await window.api.catalog.getItem('item-001');

// Main Process
ipcMain.handle('catalog:get-item', async (event, itemId) => {
  return catalogService.getItem(itemId);
});