// ❌ Wrong
<Label> { font: "Bold" }

// ✅ Correct
<Label> { text_style: <THEME_FONT_BOLD>{} }

// ❌ Wrong - ends with 'e'
draw_bg: { color: #14141e }

// ✅ Correct - change last digit
draw_bg: { color: #14141f }

// ❌ Wrong - changes not visible
self.label.set_text(&mut cx, "New Text");

// ✅ Correct - trigger redraw
self.label.set_text(&mut cx, "New Text");
self.redraw(cx);

// Good: Create extension trait for reusable operations
pub trait LabelExt {
fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4);
}

impl LabelExt for Label {
fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4) {
self.label(id!(text)).set_text(cx, text);
self.draw_text.color = color;
self.redraw(cx);
}
}

// ❌ Bad: Repetitive code
match action {
Action1 => { self.widget1.redraw(cx); }
Action2 => { self.widget2.redraw(cx); }
Action3 => { self.widget3.redraw(cx); }
}

// ✅ Good: Extract common logic
fn redraw_widget(&mut self, cx: &mut Cx, widget_id: WidgetId) {
self.widget(widget_id).redraw(cx);
}

live_design! {
<View> {
// Desktop: fixed width, Mobile: fill
width: { desktop: 800, mobile: Fill }
height: Fit

flow: { desktop: Right, mobile: Down }
}
}

impl Widget for MyView {
fn draw(&mut self, cx: &mut Cx2d) {
let width = cx.turtle().rect().size.x;

if width > 800.0 {
// Desktop layout
} else {
// Mobile layout
}
}
}

live_design! {
<Button> {
// Platform-specific properties
padding: {
desktop: {left: 20, right: 20, top: 10, bottom: 10}
mobile: {left: 15, right: 15, top: 8, bottom: 8}
}

draw_text: {
text_style: {
font_size: { desktop: 14.0, mobile: 16.0 }
}
}
}
}

# Run with line info for better error messages
MAKEPAD=lines cargo +nightly run

// Add logging for debugging
log!("Value: {:?}", my_value);
log!("State: {} / {}", self.counter, self.is_loading);
log!("Event: {:?}", event);

// Print widget tree
fn debug_widget_tree(&self, cx: &Cx, depth: usize) {
let indent = "  ".repeat(depth);
log!("{}Widget: {:?}", indent, self.widget_uid());

for child in self.children() {
child.debug_widget_tree(cx, depth + 1);
}
}