jdescopingtool/docs/designs/configmanager-ui-design.md

# ConfigManager UI Design Specification

## Design Philosophy

**Aesthetic Direction:** Industrial Precision

A professional configuration tool demands clarity, efficiency, and trust. This design embraces an **industrial utilitarian** aesthetic with refined execution:

- **Dark theme** reduces eye strain during extended editing sessions
- **Monospace typography** for data values ensures alignment and scanability
- **Geometric precision** conveys reliability and control
- **Purposeful color** limited to validation states and actionable elements
- **Generous spacing** prevents cognitive overload when managing complex configs

## Color System

### Core Palette

```
/* Background Layers (darkest to lightest) */
--bg-base:        #0D0F12    /* App background */
--bg-surface:     #151920    /* Panels, cards */
--bg-elevated:    #1C2128    /* Hover states, popups */
--bg-input:       #232A35    /* Form inputs */

/* Border & Dividers */
--border-subtle:  #2D3540    /* Panel dividers */
--border-default: #3D4550    /* Input borders */
--border-focus:   #5C9AFF    /* Focus rings */

/* Text Hierarchy */
--text-primary:   #E6EDF5    /* Headings, labels */
--text-secondary: #9BA8B8    /* Descriptions, hints */
--text-muted:     #5C6A7A    /* Disabled, placeholders */
--text-inverse:   #0D0F12    /* Text on light backgrounds */

/* Accent Colors */
--accent-primary: #5C9AFF    /* Primary actions, links */
--accent-hover:   #7DB0FF    /* Hover state */

/* Status Colors */
--status-success: #3DD68C    /* Valid, connected */
--status-warning: #FFB84D    /* Warnings */
--status-error:   #FF6B6B    /* Errors, invalid */
--status-info:    #5C9AFF    /* Info, neutral */

/* Status Backgrounds (10% opacity variants) */
--status-success-bg: rgba(61, 214, 140, 0.1)
--status-warning-bg: rgba(255, 184, 77, 0.1)
--status-error-bg:   rgba(255, 107, 107, 0.1)
```

### Semantic Usage

| Element | Color Token | Usage |
|---------|-------------|-------|
| Tree node - valid | `--status-success` | Checkmark icon |
| Tree node - warning | `--status-warning` | Warning icon |
| Tree node - error | `--status-error` | X icon |
| Tree node - modified | `--accent-primary` | Asterisk indicator |
| Input validation error | `--status-error` | Border + message |
| Save button (enabled) | `--accent-primary` | Background |
| Save button (disabled) | `--text-muted` | Background |

## Typography

### Font Stack

```
/* UI Chrome - Clean, professional */
--font-ui: "IBM Plex Sans", -apple-system, sans-serif;

/* Data Values - Monospace for alignment */
--font-mono: "JetBrains Mono", "Fira Code", monospace;

/* Section Headers - Slightly condensed */
--font-heading: "IBM Plex Sans Condensed", sans-serif;
```

### Type Scale

```
/* Headings */
--text-xl:   18px / 1.3    /* Panel titles */
--text-lg:   15px / 1.4    /* Section headers */
--text-base: 13px / 1.5    /* Body text, labels */
--text-sm:   12px / 1.4    /* Hints, captions */
--text-xs:   11px / 1.3    /* Status bar, badges */

/* Weights */
--weight-normal:   400
--weight-medium:   500
--weight-semibold: 600
```

### Typography Rules

1. **Labels** use `--font-ui` at `--text-base`, `--weight-medium`
2. **Input values** use `--font-mono` at `--text-base`
3. **Tree node names** use `--font-ui` at `--text-base`
4. **Tooltips** use `--font-ui` at `--text-sm`
5. **Status bar** uses `--font-mono` at `--text-xs`

## Spacing System

```
--space-xs:  4px
--space-sm:  8px
--space-md:  12px
--space-lg:  16px
--space-xl:  24px
--space-2xl: 32px
```

### Application

| Element | Spacing |
|---------|---------|
| Panel padding | `--space-lg` |
| Form field gap | `--space-md` |
| Tree item indent | `--space-lg` |
| Button padding | `--space-sm` horizontal, `--space-xs` vertical |
| Section divider margin | `--space-xl` |

## Component Specifications

### 1. Menu Bar

```
Height: 28px
Background: --bg-surface
Border-bottom: 1px solid --border-subtle

Menu Items:
  Padding: 0 12px
  Font: --font-ui, --text-sm, --weight-medium
  Color: --text-secondary
  Hover: --text-primary, background --bg-elevated

Keyboard shortcut hints:
  Color: --text-muted
  Font: --font-mono, --text-xs
```

**Menu Structure:**
```
File
  ├─ Open Folder...        Ctrl+O
  ├─ Save                  Ctrl+S
  ├─ Save As...            Ctrl+Shift+S
  ├─ ─────────────────────
  ├─ Recent Folders        →
  └─ Exit                  Alt+F4

Edit
  ├─ Undo                  Ctrl+Z
  ├─ Redo                  Ctrl+Y
  ├─ ─────────────────────
  ├─ Cut                   Ctrl+X
  ├─ Copy                  Ctrl+C
  └─ Paste                 Ctrl+V

Tools
  ├─ Validate All          F5
  ├─ Test Connection       F6
  ├─ ─────────────────────
  ├─ View Backups...
  └─ Options...

Help
  ├─ Documentation         F1
  ├─ Keyboard Shortcuts
  ├─ ─────────────────────
  └─ About ConfigManager
```

### 2. Toolbar

```
Height: 40px
Background: --bg-surface
Border-bottom: 1px solid --border-subtle
Padding: 0 --space-md

Button Style:
  Height: 28px
  Padding: 0 --space-md
  Border-radius: 4px
  Gap between icon and text: --space-sm

  Default:
    Background: transparent
    Color: --text-secondary

  Hover:
    Background: --bg-elevated
    Color: --text-primary

  Active/Pressed:
    Background: --bg-input

  Disabled:
    Color: --text-muted
    Opacity: 0.6

Separator:
  Width: 1px
  Height: 20px
  Background: --border-subtle
  Margin: 0 --space-sm
```

**Toolbar Layout:**
```
[📁 Open] [💾 Save] | [↩ Undo] [↪ Redo] | [🔌 Test Connection] [✓ Validate]
                                                                    [stretch]
```

### 3. Tree View Panel

```
Width: 280px (resizable, min 200px, max 400px)
Background: --bg-base
Border-right: 1px solid --border-subtle

Header:
  Height: 36px
  Padding: 0 --space-lg
  Background: --bg-surface
  Font: --font-heading, --text-base, --weight-semibold
  Text: "CONFIGURATION"
  Letter-spacing: 0.5px
  Color: --text-muted
```

**Tree Node Design:**

```
Standard Node:
  Height: 32px
  Padding-left: (depth * 16px) + 8px

  Layout: [Expand] [Icon] [Name] [Status] [Modified]

  Expand Arrow:
    Size: 16x16
    Color: --text-muted
    Rotation: 0° collapsed, 90° expanded
    Transition: transform 150ms ease

  Icon:
    Size: 16x16
    Margin-right: --space-sm

  Name:
    Font: --font-ui, --text-base
    Color: --text-primary
    Flex: 1

  Status Icon:
    Size: 14x14
    Margin-left: --space-sm
    ✓ = --status-success
    ⚠ = --status-warning
    ✗ = --status-error

  Modified Indicator:
    Character: "*"
    Color: --accent-primary
    Font: --font-ui, --weight-semibold
    Margin-left: --space-xs

Hover State:
  Background: --bg-elevated

Selected State:
  Background: rgba(92, 154, 255, 0.15)
  Border-left: 2px solid --accent-primary

Folder Node (Settings, Pipelines):
  Font-weight: --weight-semibold
  Icon: 📁 (closed) / 📂 (open)
```

**Tree Icons:**
```
Settings Section Icons:
  DataSync     → ⟳ (sync arrows)
  DataAccess   → ⛁ (database)
  Auth         → 🔐 (lock)
  Ldap         → 👥 (users)
  Connections  → 🔌 (plug)

Pipeline Icons:
  Default      → ⚡ (lightning bolt)
  With errors  → ⚡ with red dot overlay
```

### 4. Form Panel

```
Background: --bg-surface
Padding: --space-xl

Header:
  Font: --font-heading, --text-xl, --weight-semibold
  Color: --text-primary
  Margin-bottom: --space-lg
  Padding-bottom: --space-md
  Border-bottom: 1px solid --border-subtle
```

**Form Field Components:**

```
Text Input:
  Height: 36px
  Background: --bg-input
  Border: 1px solid --border-default
  Border-radius: 4px
  Padding: 0 --space-md
  Font: --font-mono, --text-base
  Color: --text-primary

  Placeholder:
    Color: --text-muted

  Focus:
    Border-color: --border-focus
    Box-shadow: 0 0 0 2px rgba(92, 154, 255, 0.2)

  Error:
    Border-color: --status-error
    Box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2)

  Disabled/ReadOnly:
    Background: --bg-elevated
    Color: --text-muted
    Cursor: not-allowed

Numeric Input:
  Same as text input
  Text-align: right

  Spin Buttons:
    Width: 24px
    Background: --bg-elevated
    Border-left: 1px solid --border-default

Checkbox:
  Size: 18x18
  Border: 2px solid --border-default
  Border-radius: 3px

  Checked:
    Background: --accent-primary
    Border-color: --accent-primary
    Checkmark: --text-inverse

Toggle Switch:
  Width: 40px
  Height: 22px
  Background: --bg-input
  Border-radius: 11px

  Thumb:
    Size: 18x18
    Background: --text-secondary

  On State:
    Background: --accent-primary
    Thumb: --bg-base

Dropdown/Select:
  Same as text input
  Padding-right: 36px (for arrow)

  Arrow:
    Color: --text-muted

  Dropdown Menu:
    Background: --bg-elevated
    Border: 1px solid --border-default
    Border-radius: 4px
    Box-shadow: 0 4px 12px rgba(0,0,0,0.3)

  Menu Item:
    Height: 32px
    Padding: 0 --space-md
    Hover: --bg-input

TextArea (Query Editor):
  Min-height: 120px
  Font: --font-mono, --text-base
  Line-height: 1.6
  Padding: --space-md
  Resize: vertical

Field Label:
  Font: --font-ui, --text-sm, --weight-medium
  Color: --text-secondary
  Margin-bottom: --space-xs

  Required Indicator:
    Character: "*"
    Color: --status-error
    Margin-left: 2px

Field Hint:
  Font: --font-ui, --text-xs
  Color: --text-muted
  Margin-top: --space-xs

Validation Message:
  Font: --font-ui, --text-xs
  Color: --status-error
  Margin-top: --space-xs
  Icon: ⚠ inline before text
```

**Form Layouts:**

```
Single Column (default):
  Max-width: 600px
  Field margin-bottom: --space-lg

Two Column:
  Gap: --space-xl
  Used for related pairs (e.g., Min/Max values)

Section Grouping:
  Background: --bg-base
  Border: 1px solid --border-subtle
  Border-radius: 6px
  Padding: --space-lg
  Margin-bottom: --space-xl

  Section Title:
    Font: --font-ui, --text-base, --weight-semibold
    Color: --text-primary
    Margin-bottom: --space-md
```

### 5. Collapsible Sections (Pipeline Forms)

```
Container:
  Background: --bg-base
  Border: 1px solid --border-subtle
  Border-radius: 6px
  Margin-bottom: --space-md

Header (clickable):
  Height: 44px
  Padding: 0 --space-lg
  Cursor: pointer
  Display: flex
  Align-items: center

  Chevron:
    Size: 16x16
    Color: --text-muted
    Margin-right: --space-sm
    Rotation: 0° collapsed, 90° expanded
    Transition: transform 200ms ease

  Title:
    Font: --font-ui, --text-base, --weight-semibold
    Color: --text-primary
    Flex: 1

  Badge (item count):
    Background: --bg-elevated
    Color: --text-secondary
    Font: --font-mono, --text-xs
    Padding: 2px 8px
    Border-radius: 10px

  Status:
    Same as tree node status icons

Content:
  Padding: --space-lg
  Border-top: 1px solid --border-subtle

  Animation:
    Height transition: 200ms ease
    Opacity: 0 → 1 over 150ms
```

### 6. Data Grid (Parameters, Columns Lists)

```
Container:
  Border: 1px solid --border-subtle
  Border-radius: 4px
  Overflow: hidden

Header Row:
  Height: 32px
  Background: --bg-elevated
  Border-bottom: 1px solid --border-subtle

  Cell:
    Padding: 0 --space-md
    Font: --font-ui, --text-xs, --weight-semibold
    Color: --text-muted
    Text-transform: uppercase
    Letter-spacing: 0.5px

Data Row:
  Height: 36px
  Border-bottom: 1px solid --border-subtle

  Cell:
    Padding: 0 --space-md
    Font: --font-mono, --text-sm
    Color: --text-primary

  Hover:
    Background: --bg-elevated

  Selected:
    Background: rgba(92, 154, 255, 0.1)

Inline Edit:
  Cell becomes editable input on double-click
  Same styling as text input

Add Row Button:
  Height: 32px
  Background: transparent
  Border: 1px dashed --border-default
  Color: --text-muted
  Font: --font-ui, --text-sm

  Hover:
    Border-color: --accent-primary
    Color: --accent-primary

Delete Button (per row):
  Size: 24x24
  Color: --text-muted
  Opacity on row hover only

  Hover:
    Color: --status-error
```

### 7. Status Bar

```
Height: 24px
Background: --bg-surface
Border-top: 1px solid --border-subtle
Padding: 0 --space-md
Font: --font-mono, --text-xs

Layout: [File Path] | [Modified] | [Validation] ───────── [Connection Status]

File Path:
  Color: --text-muted
  Max-width: 400px
  Overflow: ellipsis from start

Modified Indicator:
  Color: --accent-primary
  Text: "Modified" (or hidden if clean)

Validation Summary:
  Clickable (opens validation panel)

  No issues:
    Color: --status-success
    Text: "✓ Valid"

  Warnings only:
    Color: --status-warning
    Text: "⚠ 3 warnings"

  Errors:
    Color: --status-error
    Text: "✗ 2 errors, 1 warning"

Connection Status:
  Color: --text-muted
  Shows last test result:
    "● Connected" (green dot)
    "○ Not tested" (gray dot)
    "● Failed" (red dot)
```

### 8. Dialogs

```
Overlay:
  Background: rgba(0, 0, 0, 0.6)
  Backdrop-filter: blur(2px)

Dialog Container:
  Background: --bg-surface
  Border: 1px solid --border-subtle
  Border-radius: 8px
  Box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
  Min-width: 400px
  Max-width: 600px

Header:
  Padding: --space-lg
  Border-bottom: 1px solid --border-subtle
  Font: --font-heading, --text-lg, --weight-semibold

Content:
  Padding: --space-xl

Footer:
  Padding: --space-lg
  Border-top: 1px solid --border-subtle
  Display: flex
  Justify-content: flex-end
  Gap: --space-sm
```

**Dialog Types:**

```
Diff Preview Dialog:
  Width: 800px

  Diff View:
    Font: --font-mono, --text-sm
    Line-height: 1.5

    Added line:
      Background: rgba(61, 214, 140, 0.15)
      Border-left: 3px solid --status-success

    Removed line:
      Background: rgba(255, 107, 107, 0.15)
      Border-left: 3px solid --status-error

    Context line:
      Color: --text-muted

    Line numbers:
      Color: --text-muted
      Width: 50px
      Text-align: right
      Padding-right: --space-md
      Border-right: 1px solid --border-subtle

Validation Results Dialog:
  Width: 600px

  Issue List:
    Error item:
      Border-left: 3px solid --status-error
      Background: --status-error-bg

    Warning item:
      Border-left: 3px solid --status-warning
      Background: --status-warning-bg

    Item content:
      Padding: --space-md

    Location link:
      Color: --accent-primary
      Cursor: pointer
      Underline on hover
```

### 9. Buttons

```
Primary Button:
  Height: 36px
  Padding: 0 --space-lg
  Background: --accent-primary
  Color: --text-inverse
  Border: none
  Border-radius: 4px
  Font: --font-ui, --text-base, --weight-medium

  Hover:
    Background: --accent-hover

  Active:
    Transform: scale(0.98)

  Disabled:
    Background: --text-muted
    Cursor: not-allowed

Secondary Button:
  Same dimensions
  Background: transparent
  Border: 1px solid --border-default
  Color: --text-secondary

  Hover:
    Background: --bg-elevated
    Border-color: --text-muted
    Color: --text-primary

Danger Button:
  Same as Primary
  Background: --status-error

  Hover:
    Background: #ff8585

Icon Button:
  Size: 32x32
  Background: transparent
  Border-radius: 4px

  Hover:
    Background: --bg-elevated
```

### 10. Tooltips

```
Container:
  Background: --bg-elevated
  Border: 1px solid --border-default
  Border-radius: 4px
  Padding: --space-sm --space-md
  Box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)
  Max-width: 300px

Text:
  Font: --font-ui, --text-sm
  Color: --text-primary

Keyboard Shortcut:
  Font: --font-mono, --text-xs
  Color: --text-muted
  Background: --bg-input
  Padding: 2px 6px
  Border-radius: 3px
  Margin-left: --space-sm

Delay: 500ms
Animation: Fade in 150ms
Position: Below element with 8px gap (flip if near edge)
```

## Screen Layouts

### Main Window

```
┌─────────────────────────────────────────────────────────────────────────┐
│ File   Edit   Tools   Help                                         [—][□][×] │
├─────────────────────────────────────────────────────────────────────────┤
│ [📁 Open] [💾 Save] │ [↩] [↪] │ [🔌 Test] [✓ Validate]                     │
├────────────────────┬────────────────────────────────────────────────────┤
│ CONFIGURATION      │                                                    │
│ ────────────────── │  DataSync Options                                  │
│                    │  ═══════════════════════════════════════════       │
│ ▼ 📂 Settings      │                                                    │
│   ├─ ⟳ DataSync ✓  │  ┌─ Sync Intervals ─────────────────────────────┐  │
│   ├─ ⛁ DataAccess  │  │                                               │  │
│   ├─ 🔐 Auth       │  │  Mass Sync Interval (minutes)                 │  │
│   ├─ 👥 Ldap       │  │  ┌──────────────────────────────────────┐     │  │
│   └─ 🔌 Connections│  │  │ 1440                                 │     │  │
│                    │  │  └──────────────────────────────────────┘     │  │
│ ▼ 📂 Pipelines     │  │  ℹ Default: 1440 (24 hours)                   │  │
│   ├─ ⚡ WorkOrder ✓│  │                                               │  │
│   ├─ ⚡ Lot      ✓ │  │  Daily Sync Interval (minutes)                │  │
│   ├─ ⚡ Item     ⚠ │  │  ┌──────────────────────────────────────┐     │  │
│   └─ ⚡ Operator * │  │  │ 60                                   │     │  │
│                    │  │  └──────────────────────────────────────┘     │  │
│                    │  │                                               │  │
│                    │  │  Hourly Sync Interval (minutes)               │  │
│                    │  │  ┌──────────────────────────────────────┐     │  │
│                    │  │  │ 15                                   │     │  │
│                    │  │  └──────────────────────────────────────┘     │  │
│                    │  │  ⚠ Minimum: 15 minutes                        │  │
│                    │  └───────────────────────────────────────────────┘  │
│                    │                                                    │
│                    │  ┌─ Data Retention ──────────────────────────────┐  │
│                    │  │                                               │  │
│                    │  │  Lookback Multiplier        Retention Days    │  │
│                    │  │  ┌─────────────────┐       ┌─────────────────┐│  │
│                    │  │  │ 1.5             │       │ 90              ││  │
│                    │  │  └─────────────────┘       └─────────────────┘│  │
│                    │  │                                               │  │
│                    │  └───────────────────────────────────────────────┘  │
│                    │                                                    │
│                    │                            [Reset] [Apply Changes]  │
├────────────────────┴────────────────────────────────────────────────────┤
│ ~/projects/jdescoping/appsettings.json │ Modified │ ✓ Valid       ● Connected │
└─────────────────────────────────────────────────────────────────────────┘
```

### Pipeline Form

```
┌────────────────────────────────────────────────────────────────────────┐
│  WorkOrder Pipeline                                                    │
│  ═══════════════════════════════════════════════════════════════════   │
│                                                                        │
│  ▼ Source                                                    ✓ Valid   │
│  ├──────────────────────────────────────────────────────────────────┤  │
│  │                                                                  │  │
│  │  Connection *                                                    │  │
│  │  ┌────────────────────────────────────────────────────────┐     │  │
│  │  │ JdeOracle                                          ▼   │     │  │
│  │  └────────────────────────────────────────────────────────┘     │  │
│  │                                                                  │  │
│  │  Query                                                           │  │
│  │  ┌────────────────────────────────────────────────────────┐     │  │
│  │  │ SELECT                                                 │     │  │
│  │  │   WLDOCO as OrderNumber,                               │     │  │
│  │  │   WLDCTO as OrderType,                                 │     │  │
│  │  │   ...                                                  │     │  │
│  │  └────────────────────────────────────────────────────────┘     │  │
│  │                                                                  │  │
│  │  Parameters                                          [+ Add]     │  │
│  │  ┌──────────────┬───────────────────────────────┬──────────┐    │  │
│  │  │ NAME         │ VALUE                         │          │    │  │
│  │  ├──────────────┼───────────────────────────────┼──────────┤    │  │
│  │  │ @StartDate   │ {LastSync}                    │    🗑    │    │  │
│  │  │ @Company     │ 00200                         │    🗑    │    │  │
│  │  └──────────────┴───────────────────────────────┴──────────┘    │  │
│  │                                                                  │  │
│  └──────────────────────────────────────────────────────────────────┘  │
│                                                                        │
│  ▶ Schedules                                              ⚠ 1 warning  │
│  ├──────────────────────────────────────────────────────────────────┤  │
│  │  (collapsed)                                                     │  │
│  └──────────────────────────────────────────────────────────────────┘  │
│                                                                        │
│  ▶ Destination                                               ✓ Valid   │
│  ├──────────────────────────────────────────────────────────────────┤  │
│  │  (collapsed)                                                     │  │
│  └──────────────────────────────────────────────────────────────────┘  │
│                                                                        │
└────────────────────────────────────────────────────────────────────────┘
```

### Diff Preview Dialog

```
┌─────────────────────────────────────────────────────────────────────────┐
│  Preview Changes                                                    [×] │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  appsettings.json                                                       │
│  ───────────────────────────────────────────────────────────────────    │
│                                                                         │
│     15 │     "MassSyncIntervalMinutes": 1440,                           │
│     16 │     "DailySyncIntervalMinutes": 60,                            │
│  ▬  17 │ -   "HourlySyncIntervalMinutes": 30,                           │
│  ▬  17 │ +   "HourlySyncIntervalMinutes": 15,                           │
│     18 │     "LookbackMultiplier": 1.5,                                 │
│     19 │     "RetentionDays": 90                                        │
│                                                                         │
│  ───────────────────────────────────────────────────────────────────    │
│  1 file changed, 1 insertion, 1 deletion                                │
│                                                                         │
├─────────────────────────────────────────────────────────────────────────┤
│                                              [Cancel]  [💾 Save Changes] │
└─────────────────────────────────────────────────────────────────────────┘
```

## Interaction Patterns

### Keyboard Navigation

| Shortcut | Action |
|----------|--------|
| `Ctrl+O` | Open folder |
| `Ctrl+S` | Save |
| `Ctrl+Z` | Undo |
| `Ctrl+Y` | Redo |
| `F5` | Validate all |
| `F6` | Test connection |
| `Tab` | Next field |
| `Shift+Tab` | Previous field |
| `↑/↓` | Navigate tree |
| `←/→` | Collapse/expand tree node |
| `Enter` | Select tree node / submit form |
| `Esc` | Cancel dialog / clear focus |

### Drag & Drop

- Tree nodes (Pipelines only) can be reordered via drag
- Visual indicator: Blue line showing drop position
- Constraint: Cannot drag into Settings node

### Context Menus

**Pipeline Node Context Menu:**
```
┌─────────────────────┐
│ ⚡ New Pipeline     │
│ 📋 Duplicate        │
│ ──────────────────  │
│ 🗑 Delete           │
└─────────────────────┘
```

**Text Input Context Menu:**
```
┌─────────────────────┐
│ ✂ Cut         Ctrl+X│
│ 📋 Copy       Ctrl+C│
│ 📋 Paste      Ctrl+V│
│ ──────────────────  │
│ ⟲ Reset to default │
└─────────────────────┘
```

## Animation Specifications

```css
/* Standard easing */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

/* Durations */
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;

/* Specific animations */
Tree expand/collapse: height --duration-normal --ease-out
Section expand/collapse: height --duration-normal --ease-out
Button hover: background --duration-fast --ease-out
Focus ring: box-shadow --duration-fast --ease-out
Dialog appear: opacity + scale(0.95→1) --duration-normal --ease-out
Tooltip appear: opacity --duration-fast --ease-out
Status icon change: color --duration-fast --ease-out
```

## Responsive Behavior

**Minimum Window Size:** 900×600px

**Panel Resizing:**
- Tree panel: min 200px, max 400px, default 280px
- Form panel: fills remaining space
- Resize handle: 4px wide, cursor: col-resize

**Small Window Adaptations (< 1100px):**
- Toolbar labels hidden, icons only
- Form sections stack vertically
- Two-column form fields become single column

## Accessibility

### Focus Indicators
- All interactive elements have visible focus ring
- Focus ring: `0 0 0 2px var(--border-focus)`
- Tab order follows logical reading order

### Screen Reader Support
- Tree nodes announce: name, type, validation state, expanded/collapsed
- Form fields have associated labels via `aria-labelledby`
- Validation errors announced via `aria-live="polite"`
- Status bar updates announced via `aria-live="polite"`

### Color Contrast
- All text meets WCAG AA (4.5:1 for normal text)
- Status colors have accompanying icons, not color alone
- Focus indicators visible against all backgrounds

## Implementation Notes

### Avalonia-Specific Guidance

**Theme Resources (App.axaml):**
```xml
<Application.Resources>
    <ResourceDictionary>
        <!-- Colors -->
        <Color x:Key="BgBase">#0D0F12</Color>
        <Color x:Key="BgSurface">#151920</Color>
        <!-- ... all color tokens ... -->

        <!-- Brushes -->
        <SolidColorBrush x:Key="BgBaseBrush" Color="{StaticResource BgBase}"/>
        <!-- ... -->
    </ResourceDictionary>
</Application.Resources>
```

**Custom Control Templates:**
- Override default Fluent theme styles for matching dark theme
- Create custom `TreeViewItem` template for validation icons
- Create `CollapsibleSection` user control for pipeline forms

**Font Loading:**
```xml
<Application.Resources>
    <FontFamily x:Key="FontUI">avares://JdeScoping.ConfigManager/Assets/Fonts#IBM Plex Sans</FontFamily>
    <FontFamily x:Key="FontMono">avares://JdeScoping.ConfigManager/Assets/Fonts#JetBrains Mono</FontFamily>
</Application.Resources>
```

### File References

This design specification is referenced by:
- `docs/plans/2026-01-19-config-manager-design.md` - Implementation plan

Related files:
- `NEW/src/Utils/JdeScoping.ConfigManager/` - Implementation location
- `NEW/src/JdeScoping.Core/Options/` - Options classes for form models