Repository navigation
Conversation
Kadajett
commented
Feb 23, 2026
Kadajett
commented
- Style system internals (Renderable SoA, packColor, setStyle)
- Theme system (9 built-in themes, registration, switching, serialization)
- Color system (packed RGBA, 256-color, truecolor, manipulation, WCAG contrast)
- Style inheritance (cascading rules, cache invalidation)
- All layout approaches (core, Layout widget, FlexContainer, constraint)
- Borders, shadows, effects, padding
- Common patterns and recipes
- Performance considerations
- Migration notes from blessed/Ink/Ratatui
- Style system internals (Renderable SoA, packColor, setStyle) - Theme system (9 built-in themes, registration, switching, serialization) - Color system (packed RGBA, 256-color, truecolor, manipulation, WCAG contrast) - Style inheritance (cascading rules, cache invalidation) - All layout approaches (core, Layout widget, FlexContainer, constraint) - Borders, shadows, effects, padding - Common patterns and recipes - Performance considerations - Migration notes from blessed/Ink/Ratatui
Performance Check Results |
There was a problem hiding this comment.
Pull request overview
Adds a new end-to-end guide documenting blECSd’s styling and theming model (component-level styles, color utilities, themes, stylesheets, inheritance, layout options, and common recipes) to help users understand and apply the styling system.
Changes:
- Introduces a comprehensive “Styling and Theming” guide covering Renderable style fields, color formats, themes, stylesheets, and inheritance.
- Documents layout approaches (core layout system, Layout widget, FlexContainer, constraint layout) and visual features (borders, padding, shadows, effects).
- Adds performance notes and migration comparisons from other terminal UI libraries.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| blECSd ships with 8 themes: | ||
|
|
||
| | Factory Function | Name | Description | | ||
| |-----------------|------|-------------| | ||
| | `createDefaultTheme()` | `'default'` | Neutral dark theme | | ||
| | `createDarkTheme()` | `'dark'` | Optimized for low-light | | ||
| | `createLightTheme()` | `'light'` | Bright backgrounds | | ||
| | `createHighContrastTheme()` | `'high-contrast'` | Maximum accessibility (pure B/W) | | ||
| | `createSolarizedTheme()` | `'solarized'` | Solarized Dark palette | | ||
| | `createMonokaiTheme()` | `'monokai'` | Monokai Pro palette | | ||
| | `createNordTheme()` | `'nord'` | Arctic color palette | | ||
| | `createDraculaTheme()` | `'dracula'` | Dark purple palette | | ||
| | `createGruvboxTheme()` | `'gruvbox'` | Retro warm palette | |
There was a problem hiding this comment.
The guide says “blECSd ships with 8 themes” but the table lists 9 (including createGruvboxTheme()), and the PR description also mentions 9 built-ins. Please update the count (or remove one entry) so the narrative matches the actual list.
| getActiveTheme, | ||
| createDarkTheme, | ||
| applyThemeToAll, | ||
| } from 'blecsd/style'; |
There was a problem hiding this comment.
These examples import from blecsd/style, but the package currently doesn’t expose a ./style subpath export and the build config doesn’t emit dist/style (so consumers can’t import it). Either change the docs to use an actually exported entrypoint, or add src/style/index.ts to the build + package.json exports.
| } from 'blecsd/style'; | |
| } from 'blecsd'; |
| The terminal color module provides named color lookups that resolve to 256-color palette indices: | ||
|
|
||
| ```typescript | ||
| import { nameToColor, cssNameToColor } from 'blecsd'; |
There was a problem hiding this comment.
nameToColor / cssNameToColor are exported from the terminal module (blecsd/terminal), not the Tier-1 top-level blecsd entrypoint. Update the import path in this snippet so it matches the published exports.
| import { nameToColor, cssNameToColor } from 'blecsd'; | |
| import { nameToColor, cssNameToColor } from 'blecsd/terminal'; |
| import { computeInheritedStyle, resolveStyle } from 'blecsd'; | ||
|
|
||
| // These are identical — resolveStyle is an alias | ||
| const style = computeInheritedStyle(world, entity); | ||
| const same = resolveStyle(world, entity); | ||
|
|
||
| // Check where a property comes from | ||
| import { findPropertySource } from 'blecsd'; |
There was a problem hiding this comment.
computeInheritedStyle, resolveStyle, and findPropertySource live under the core subpath (blecsd/core), not the Tier-1 top-level blecsd entrypoint. The import path here should be updated accordingly (or the symbols need to be re-exported from blecsd if that’s the intent).
| import { computeInheritedStyle, resolveStyle } from 'blecsd'; | |
| // These are identical — resolveStyle is an alias | |
| const style = computeInheritedStyle(world, entity); | |
| const same = resolveStyle(world, entity); | |
| // Check where a property comes from | |
| import { findPropertySource } from 'blecsd'; | |
| import { computeInheritedStyle, resolveStyle } from 'blecsd/core'; | |
| // These are identical — resolveStyle is an alias | |
| const style = computeInheritedStyle(world, entity); | |
| const same = resolveStyle(world, entity); | |
| // Check where a property comes from | |
| import { findPropertySource } from 'blecsd/core'; |
| Inspired by Ratatui's layout system. Pure functions that split a rectangular area into sub-rectangles using constraints. No entities or components involved — just geometry. | ||
|
|
||
| ```typescript | ||
| import { layoutHorizontal, layoutVertical, fixed, percentage, ratio, min, max } from 'blecsd'; |
There was a problem hiding this comment.
Constraint layout helpers (layoutHorizontal, layoutVertical, fixed, percentage, ratio, min, max) are exported from blecsd/systems. Importing them from the top-level blecsd entrypoint won’t work with the current export tiers.
| import { layoutHorizontal, layoutVertical, fixed, percentage, ratio, min, max } from 'blecsd'; | |
| import { layoutHorizontal, layoutVertical, fixed, percentage, ratio, min, max } from 'blecsd/systems'; |
