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

/* 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):

<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:

<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