Core System

The Core module forms the foundation of Art.Works! Studio. It provides theme, UI components, settings, and logging.

Theme & Design System

All colors are centrally defined in theme/colors.ts:

// Usage in components
import { colors } from '@/theme/colors';

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

Important: Never use direct Chakra colors like gray.800!

Color Palette

Token	Usage
`colors.bg.primary`	Main background
`colors.bg.card`	Cards, panels
`colors.bg.hover`	Hover states
`colors.text.primary`	Main text
`colors.text.secondary`	Secondary text
`colors.accent.primary`	Accent color

Generic Components

Reusable UI components:

Component	Purpose
`GenericButtonBar`	Toolbar with search, filter, actions
`GenericTabs`	Tab navigation
`GenericGridItem`	Grid display
`GenericListItem`	List display
`FilterPanel`	Filter by labels/tags

GenericButtonBar

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

Settings

Settings are stored in settings.json in the workspace:

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

Accessing Settings

const { settings, updateSetting } = useSettings();

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

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

Logging

Centralized logging via LogService:

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

logger.info('Artwork loaded', { id: 'item-001' });
logger.warn('Deprecated format');
logger.error('Error saving', error);

Logs are stored in:

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

IPC Communication

Main ↔ Renderer communication 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);
});