# Phase 3: Core Components - Context
**Gathered:** 2026-02-27
**Status:** Ready for planning
## Phase Boundary
The 8 foundational UI components (button, text input, label, toggle, slider, dropdown, panel, table) and cyberpunk window chrome exist as styled, interactive SolidJS components consuming Phase 2's theme tokens. Components must respond to hover, focus, active, and disabled states, be keyboard-navigable, and update instantly on theme switch. Animation choreography (Phase 4), modals/tooltips/tabs (Phase 7), and virtual window manager (Phase 5) are out of scope.
## Implementation Decisions
### Window Chrome Geometry
- All four corners have 45-degree angled slopes, medium depth (16-24px)
- Top-right corner has a horizontal notch (deep inset) where minimize/maximize/close controls float in the gap
- Glow-line perimeter (6-8px inset) uses a gradient sweep — a traveling hotspot that slowly moves around the border. Color follows theme accent (cyan default)
- Dot-grid overlay uses hexagonal pattern with subtle parallax that responds to mouse position within the window
- Semitransparent background behind the chrome
### Custom Scrollbar
- No traditional scrollbar shape — instead, a strong glow emits inward from the right edge (same accent color as perimeter glow)
- Glow is always present and matches the height a standard scrollbar would occupy
- On mouse proximity to the scrollbar zone, a hollow neon crystal shape (hexagonal, pointed top/bottom) flickers in at the scrollbar's X position, clamped to the mouse cursor's Y position within scrollbar bounds
- On click, the crystal fills solid and controls scroll position
- On release, crystal returns to hollow
- On mouse leaving the detection perimeter, crystal fades away
- Note: LAYO-05 (styled scroll containers) is Phase 7 — planner should decide whether this ships as part of window chrome or defers
### Component Visual Intensity
- Restrained cyberpunk — functional first, themed second
- All components have a subtle-yet-visible glow at rest (always alive, never obnoxious)
- Borders: thin solid neon line (1px) + soft box-shadow glow behind it
- Tables: minimal row-based layout — no vertical column lines, rows separated by subtle dividers, header row stands out
### Corner Geometry (Tiered)
- Large containers (panels, window chrome): deep 45-degree notched corners
- Subsection panels: notched top-right corner (deep/long horizontal inset with 45-degree slopes leading to the main edge)
- Medium components (dropdowns, inputs): subtle angled corners
- Small components (buttons, toggles): still have angled corners, just smaller
### Divider Style
- Dividers are thicker directly beneath the header text (matching the full width of the text)
- At the end of the header text width, the divider narrows at a 45-degree angle to its default thickness
- Default thickness continues for the rest of the divider's length
- Consistent with the angular/notched visual language
### Hover State
- Glow intensification on all borders
- Inner background gradient grows in from the left side
- Gradient color = border color at 25% opacity
- Gradient holds max opacity through 20% of the component's width, then fades to 0% opacity by 65% width
- The gradient animates in (grows from 0 to full width via CSS transition)
### Focus State (Keyboard Navigation)
- Slow, subtle pulsing glow on the border
- CSS animation — draws the eye without being distracting
- Must meet accessibility requirements for visible focus indicators
### Active/Pressed State
- Border color floods inward as a background fill, then recedes
- Like energy pulsing through the component
- CSS transition for the fill/recede effect
### Disabled State
- Glow fades to near-zero
- Colors desaturate to gray/muted tones
- Component is visually "powered off" — still visible but clearly inert
### Text Input Focus
- Bottom edge glows brightly (underline-style focus indicator)
- Background shows repeating horizontal bars (scanline effect): 3px height, 5px gaps, 4% opacity
- Vignette-style fade on top, left, and right edges of the scanline pattern
- Consistent with existing subsection background styling
### Button Variants
- Primary: magenta accent, hollow (outlined, not filled)
- Secondary: cyan accent, hollow (outlined, not filled)
- Ghost: no border, text-only with hover glow effects
### Component Sizes
- Three sizes available: sm, md, lg
- Affects padding, font size, and glow intensity proportionally
### Color System
- Semantic named variants: success, error, warning, info — mapped to theme colors
- Optional custom accent color prop for arbitrary override
- Both available — semantic for common cases, custom for full flexibility
### Dropdown Behavior
- Overlay popup positioning (renders on top of content, does not push layout)
- Needs z-index management within the component system
### Claude's Discretion
- Exact glow intensity values and transition durations
- Parallax sensitivity for hex dot-grid
- Scrollbar crystal detection perimeter size
- Table row hover treatment specifics
- Slider thumb and track glow details
- Toggle switch animation specifics
- Panel border vs borderless sub-variants
- Keyboard shortcut bindings beyond Tab/Enter/Space/Escape
## Specific Ideas
- Scrollbar crystal is hexagonal with pointed top/bottom — not rounded, not square. Think sci-fi data crystal
- Divider taper matches the angular language: thick under text, 45-degree angle to thin. Not curved, not stepped
- The hover gradient sweep growing from the left gives directionality — components feel like they're "powering on" from left to right
- Text input scanline bars (3px/5px) match existing subsection background treatment — visual consistency across the system
- Primary/secondary button distinction is by color (magenta vs cyan), not by fill — both are hollow outlined style
## Deferred Ideas
None — discussion stayed within phase scope
---
*Phase: 03-core-components*
*Context gathered: 2026-02-27*