Struct StyleComponent 

pub struct StyleComponent {

    pub display: Option<Display>,
    pub width: SizeDimension,
    pub height: SizeDimension,
    pub min_width: Option<f32>,
    pub max_width: Option<f32>,
    pub min_height: Option<f32>,
    pub max_height: Option<f32>,
    pub margin: EdgeInsets,
    pub padding: EdgeInsets,
    pub box_sizing: BoxSizing,
    pub flex_direction: FlexDirection,
    pub justify_content: JustifyContent,
    pub align_items: AlignItems,
    pub flex_wrap: FlexWrap,
    pub row_gap: f32,
    pub column_gap: f32,
    pub flex_grow: f32,
    pub flex_shrink: f32,
    pub flex_basis: SizeDimension,
    pub position: Position,
    pub top: Option<SizeDimension>,
    pub right: Option<SizeDimension>,
    pub bottom: Option<SizeDimension>,
    pub left: Option<SizeDimension>,
    pub line_height: f32,
    pub font_size: SizeDimension,
    pub text_align: TextAlign,
    pub vertical_align: VerticalAlign,
    pub overflow: Overflow,
    pub z_index: Option<i32>,
    pub background_color: Option<[f32; 4]>,
    pub background_z: Option<f32>,
    pub color: Option<[f32; 4]>,
    pub word_wrap: Option<WordWrapMode>,
    pub word_wrap_tokens: Option<Vec<String>>,
    /* private fields */
}

All CSS layout properties for a node, in one struct.

This mirrors the browser’s “computed style” record — a single bundle per element rather than dozens of separate ECS components. Paired with HtmlElementComponent (semantic role) and LayoutComponent at the subtree root.

All size values are in glyph units (1.0 = one monospace character cell).

Style resolution order for any property:

1. StyleComponent value (if not the type’s Default)
2. HtmlElementComponent.element_type UA-default (e.g. Div → Display::Block)
3. Layout system built-in fallback

Fields

display: Option<Display>

None = inherit from HtmlElementComponent UA default.

width: SizeDimension

height: SizeDimension

min_width: Option<f32>

max_width: Option<f32>

min_height: Option<f32>

max_height: Option<f32>

margin: EdgeInsets

padding: EdgeInsets

box_sizing: BoxSizing

box-sizing. Default: BoxSizing::BorderBox (cat-engine default).

flex_direction: FlexDirection

justify_content: JustifyContent

align_items: AlignItems

flex_wrap: FlexWrap

row_gap: f32

column_gap: f32

flex_grow: f32

flex_shrink: f32

flex_basis: SizeDimension

position: Position

top: Option<SizeDimension>

right: Option<SizeDimension>

bottom: Option<SizeDimension>

left: Option<SizeDimension>

line_height: f32

Line height in glyph units. Default: 1.0.

font_size: SizeDimension

Visual glyph scale applied by descendant TextComponents.

Carries its unit: GlyphUnits(1.0) = one row of glyphs per glyph unit (the layout system’s intrinsic measure); WorldUnits(0.08) = each row of glyphs is 0.08 world units tall (the renderer’s glyph quad scale). Layout resolves to world units via the nearest LayoutComponent.unit_scale before stamping the value onto descendant TextComponents. Auto falls back to the descendant’s authored font size.

text_align: TextAlign

Text alignment within the content box. Default: Auto (no positioning).

vertical_align: VerticalAlign

Vertical text alignment within the content box.

Auto preserves the legacy behavior: if text_align is set, text is vertically centered; otherwise the authored translation is preserved.

overflow: Overflow

z_index: Option<i32>

background_color: Option<[f32; 4]>

RGBA background color. When Some, LayoutSystem spawns and manages a background quad (covering the padding box) as a child of this item’s TC. When None, no background quad is created (or an existing one is removed).

background_z: Option<f32>

Optional override for the __bg quad’s local Z in the item TC’s frame.

None (default) means layout derives the background Z from the item’s resolved stacking layer: resolved_z - 0.5 * LAYER_DISTANCE. Some(z) pins the background to an absolute local Z, overriding the half-step rule. See docs/spec/layout-stacking-z-index.md.

color: Option<[f32; 4]>

CSS color. Inherited by every descendant glyph via the renderable ancestor color walk (RenderableSystem::inherited_color_for_renderable). When Some, layout spawns/maintains a __text_color ColorComponent as an immediate child of this item’s TC; when None, any existing helper is removed. Nested styled TCs with their own color override naturally because their helper sits closer to the glyph in the walk.

word_wrap: Option<WordWrapMode>

None = don’t override the descendant TextComponent’s authored mode. Some(_) = write through to the descendant TextComponent during layout. Does not yet cascade through nested TC boundaries (v2).

word_wrap_tokens: Option<Vec<String>>

Token strings the wrap algorithm may break after when word_wrap == BreakWord. None = inherit the descendant TextComponent’s authored tokens.

Implementations

impl StyleComponent

pub fn new() -> Self

Examples found in repository

examples/router.rs (line 19)

fn spawn_runtime_text(
    universe: &mut engine::Universe,
    owner: engine::ecs::ComponentId,
    label: &str,
) {
    use engine::ecs::component::{
        ColorComponent, EdgeInsets, SizeDimension, StyleComponent, TextComponent,
        TransformComponent,
    };

    let root = universe
        .world
        .add_component_boxed_named(label, Box::new(TransformComponent::new()));
    let style = universe.world.add_component_boxed_named(
        format!("{label}_style"),
        Box::new({
            let mut style = StyleComponent::new();
            style.margin = EdgeInsets::all(0.5);
            style.padding = EdgeInsets::axes(0.75, 0.5);
            style.width = SizeDimension::Auto;
            style.background_color = Some([0.93, 0.88, 0.98, 1.0]);
            style
        }),
    );
    let text = universe
        .world
        .add_component_boxed_named(format!("{label}_text"), Box::new(TextComponent::new(label)));
    let color = universe
        .world
        .add_component(ColorComponent::rgba(0.38, 0.14, 0.62, 1.0));

    let _ = universe.world.add_child(root, style);
    let _ = universe.world.add_child(root, text);
    let _ = universe.world.add_child(text, color);

    universe.attach(owner, root).expect("attach routed child");
}

examples/diy-panel.rs (line 22)

fn spawn_runtime_text(
    universe: &mut engine::Universe,
    owner: engine::ecs::ComponentId,
    label: &str,
) {
    use engine::ecs::component::{
        ColorComponent, EdgeInsets, SizeDimension, StyleComponent, TextComponent,
        TransformComponent,
    };

    let root = universe.world.add_component_boxed_named(
        label,
        Box::new(TransformComponent::new().with_position(0.0, 0.0, 0.2)),
    );
    let style = universe.world.add_component_boxed_named(
        format!("{label}_style"),
        Box::new({
            let mut style = StyleComponent::new();
            style.margin = EdgeInsets::axes(0.25, 0.25);
            style.padding = EdgeInsets::axes(0.5, 0.5);
            style.height = SizeDimension::GlyphUnits(2.5);
            style.width = SizeDimension::Auto;
            style.background_color = Some([1.0, 0.80, 0.80, 1.0]);
            style
        }),
    );
    let text_root = universe.world.add_component_boxed_named(
        format!("{label}_text_root"),
        Box::new(TransformComponent::new().with_position(0.0, 0.0, 0.2)),
    );
    let text = universe
        .world
        .add_component_boxed_named(format!("{label}_text"), Box::new(TextComponent::new(label)));
    let color = universe
        .world
        .add_component(ColorComponent::rgba(0.40, 0.05, 0.05, 1.0));

    let _ = universe.world.add_child(root, style);
    let _ = universe.world.add_child(root, text_root);
    let _ = universe.world.add_child(text_root, text);
    let _ = universe.world.add_child(text, color);

    universe.attach(owner, root).expect("attach routed child");
}

pub fn apply_patch(&mut self, patch: StylePatch)

Apply a StylePatch, updating only fields where the patch has Some(...).

Trait Implementations

impl Clone for StyleComponent

fn clone(&self) -> StyleComponent

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Component for StyleComponent

fn name(&self) -> &'static str

Short debug/type name for this component kind (e.g. “transform”, “camera”).

fn set_id(&mut self, id: ComponentId)

fn as_any(&self) -> &dyn Any

fn as_any_mut(&mut self) -> &mut dyn Any

fn to_mms_ast(&self, _world: &World) -> ComponentExpression

Encode this component as an MMS Component Expression AST node.

fn init(&mut self, _emit: &mut dyn SignalEmitter, _component: ComponentId)

Called when component is added to the World

fn cleanup(&mut self, _emit: &mut dyn SignalEmitter, _component: ComponentId)

Called when component is removed from the World.

fn encode(&self) -> HashMap<String, Value>

Encode component data to a HashMap for serialization.

fn decode(&mut self, _data: &HashMap<String, Value>) -> Result<(), String>

Decode component data from a HashMap after deserialization.

impl Debug for StyleComponent

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl Default for StyleComponent

fn default() -> Self

Returns the “default value” for a type.