vtcode-design 0.123.10

Centralized design system for VT Code: unified color conversion, style bridging, design constants, layout, and base widget primitives
Documentation

vtcode-design

Centralized design system for VT Code: unified color conversion, style bridging, design constants, layout, and base widget primitives.

vtcode-design is the single source of truth for all design system concerns in VT Code. It consolidates color mapping, style conversion, layout logic, and UI primitives that were previously scattered across vtcode-commons and vtcode-tui.

Highlights

  • Correct Color Mapping — unified anstyle to ratatui color conversion that fixes prior bugs (Magenta mapped to DarkGray, bright variants mapped to non-bright, Ansi256 mapped to Reset).
  • Style Bridging — seamless conversion between anstyle::Style and ratatui::style::Style, including effects/modifier mapping.
  • Responsive Layout — LayoutMode enum (Compact/Standard/Wide) driven by terminal dimensions, controlling borders, titles, sidebar, and footer visibility.
  • Design Constants — shared UI tokens for ellipses, layout breakpoints, and spacing.
  • Panel Primitive — base widget that renders standardized chrome (borders, titles) with decoupled styling via PanelStyleProvider trait.
  • Diff Formatting — unified diff rendering with ANSI colors, re-exporting core diff types from vtcode-commons.

Modules

Module Purpose
color Unified anstyle to ratatui color mapping (all 16 ANSI colors, 256-color palette, true color)
style Style bridging: anstyle::Style and InlineTextStyle to ratatui::style::Style, effects conversion
constants Shared UI constants: ellipsis characters, layout breakpoints, spacing tokens
layout LayoutMode enum with responsive logic based on terminal dimensions
panel Panel widget primitive with PanelStyleProvider and PanelStyles traits
diff Unified diff formatting with ANSI colors, re-exports core diff types from vtcode-commons

Public entrypoints

  • anstyle_to_ratatui_color — canonical color conversion function
  • anstyle_to_ratatui_style — full style conversion
  • fg_style / bg_style / fg_bg_style / with_effects / colored_with_effects — convenience style builders
  • LayoutMode — responsive layout mode enum
  • Panel / PanelStyleProvider / PanelStyles — panel widget and styling traits
  • format_colored_diff / format_unified_diff / compute_diff_with_theme — diff formatting
  • ELLIPSIS / ELLIPSIS_CHAR / ELLIPSIS_ASCII — ellipsis constants
  • COMPACT_MAX_COLS / WIDE_MIN_COLS / SPACING_TIGHT / SPACING_NORMAL / SPACING_LOOSE — layout and spacing constants

Usage

use vtcode_design::color::anstyle_to_ratatui_color;
use vtcode_design::style::{fg_style, anstyle_to_ratatui_style};
use vtcode_design::layout::LayoutMode;
use vtcode_design::constants::{ELLIPSIS, SPACING_NORMAL};
use anstyle::{AnsiColor, Style as AnstyleStyle};
use ratatui::layout::Rect;

// Convert colors
let ratatui_color = anstyle_to_ratatui_color(anstyle::Color::Ansi(AnsiColor::Magenta));

// Build styles
let style = fg_style(anstyle::Color::Ansi(AnsiColor::Green));

// Responsive layout
let mode = LayoutMode::from_area(Rect::new(0, 0, 120, 30));
assert!(mode.allow_sidebar());
assert!(mode.show_borders());

// Design constants
let truncated = format!("text{}", ELLIPSIS);

Bug fixes over prior implementations

This crate fixes several color mapping bugs from previous implementations in vtcode-commons::anstyle_utils and vtcode-tui::core_tui::style:

  • Magenta incorrectly mapped to DarkGray (now correctly Magenta)
  • BrightMagenta incorrectly mapped to DarkGray (now correctly LightMagenta)
  • BrightRed/Green/Yellow/Blue/Cyan mapped to non-bright variants (now correctly Light*)
  • Ansi256 colors mapped to Reset instead of Indexed (now correctly Indexed)

API reference

See docs.rs/vtcode-design.

Related docs