fix(hir): error on widget method-chain modifier syntax (#201, closes #195)

Detects `Widget(...).modifierName(...)` pattern at HIR lowering and emits a clear compile error with rewrite hint pointing at the inline-options form. Modifier set: font, fontWeight, color, foregroundColor, padding, cornerRadius, background, opacity, lineLimit, frame, bold, italic, underline, fontSize, strikethrough, multilineTextAlignment, lineSpacing (and ~5 more). 6 regression tests including a positive control (plain widget call still works). Option B from issue body — Option A (chain-folding pre-pass) deliberately deferred.

Closes #195.

Author: proggeramlug

crates/perry-hir/src/lower.rs

@@ -5881,6 +5881,35 @@ pub(crate) fn lower_expr(ctx: &mut LoweringContext, expr: &ast::Expr) -> Result<
                             }
                         }
 
+                        // issue #195: WidgetCtor(...).modifierName(...) is silently dropped.
+                        // Reject at compile time so users discover the options-object form.
+                        if let ast::Expr::Call(inner_call) = member.obj.as_ref() {
+                            if let ast::Callee::Expr(inner_callee) = &inner_call.callee {
+                                if let ast::Expr::Ident(widget_ident) = inner_callee.as_ref() {
+                                    let widget_name = widget_ident.sym.as_ref();
+                                    if matches!(widget_name,
+                                        "Text" | "VStack" | "HStack" | "ZStack" |
+                                        "Image" | "Spacer" | "Divider" |
+                                        "ForEach" | "Label" | "Gauge"
+                                    ) {
+                                        if matches!(ctx.lookup_native_module(widget_name),
+                                            Some(("perry/ui", _))
+                                        ) {
+                                            if let ast::MemberProp::Ident(method_ident) = &member.prop {
+                                                let modifier_name = method_ident.sym.as_ref();
+                                                if is_widget_modifier_name(modifier_name) {
+                                                    return Err(anyhow!(
+                                                        "modifier '{}' must be passed as an option-object on the widget constructor; use: {}(\"...\", {{ {}: ... }})",
+                                                        modifier_name, widget_name, modifier_name
+                                                    ));
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
                         // Check for method calls on new Big/Decimal/BigNumber() expressions
                         // e.g., new Big("100").div(2)
                         if let Some(module_name) = detect_native_instance_expr(&member.obj) {
@@ -12656,6 +12685,19 @@ fn parse_modifiers_from_args(args: &[ast::ExprOrSpread], start_idx: usize) -> Ve
     modifiers
 }
 
+/// Returns true if `name` is a known widget modifier key (used to detect
+/// unsupported method-chain modifier calls, e.g. `Text("hi").font("title")`).
+fn is_widget_modifier_name(name: &str) -> bool {
+    matches!(name,
+        "font" | "fontWeight" | "weight" | "foregroundColor" | "color" | "foreground" |
+        "padding" | "cornerRadius" | "background" | "backgroundColor" |
+        "opacity" | "lineLimit" | "frame" | "minimumScaleFactor" |
+        "containerBackground" | "maxWidth" | "url" |
+        "bold" | "italic" | "underline" | "fontSize" |
+        "strikethrough" | "multilineTextAlignment" | "lineSpacing"
+    )
+}
+
 /// Parse a single modifier from key/value
 fn parse_single_modifier(key: &str, value: &ast::Expr) -> Option<WidgetModifier> {
     match key {

crates/perry-hir/tests/widget_modifier_diagnostic.rs

@@ -0,0 +1,106 @@
+/// Regression tests for issue #195: method-chain modifier syntax on perry/ui widgets
+/// must produce a compile error rather than silently dropping the modifier.
+///
+/// Supported form:  Text("hi", { font: "title" })
+/// Rejected form:   Text("hi").font("title")   ← compile error
+
+use perry_diagnostics::SourceCache;
+use perry_hir::lower_module;
+use perry_parser::parse_typescript_with_cache;
+
+fn lower_result(src: &str) -> Result<perry_hir::Module, String> {
+    let src = src.to_string();
+    std::thread::Builder::new()
+        .stack_size(32 * 1024 * 1024)
+        .spawn(move || {
+            let mut cache = SourceCache::new();
+            let parsed = parse_typescript_with_cache(&src, "test.ts", &mut cache)
+                .expect("parse should succeed");
+            lower_module(&parsed.module, "test", "test.ts")
+                .map_err(|e| e.to_string())
+        })
+        .expect("spawn lower thread")
+        .join()
+        .expect("lower thread panicked")
+}
+
+/// Direct chain `Text("hi").font("title")` must fail with a diagnostic naming the modifier.
+#[test]
+fn text_dot_font_is_rejected() {
+    let result = lower_result(r#"
+        import { Text } from "perry/ui";
+        Text("hi").font("title");
+    "#);
+    let err = result.unwrap_err();
+    assert!(
+        err.contains("modifier 'font'"),
+        "expected error mentioning modifier 'font', got: {err}"
+    );
+}
+
+/// `.color(...)` on a widget constructor must also be rejected.
+#[test]
+fn text_dot_color_is_rejected() {
+    let result = lower_result(r#"
+        import { Text } from "perry/ui";
+        Text("hi").color("red");
+    "#);
+    let err = result.unwrap_err();
+    assert!(
+        err.contains("modifier 'color'"),
+        "expected error mentioning modifier 'color', got: {err}"
+    );
+}
+
+/// Chained modifiers fail on the FIRST one in the chain.
+#[test]
+fn chained_modifiers_fail_on_first() {
+    let result = lower_result(r#"
+        import { Text } from "perry/ui";
+        Text("hi").font("title").color("red");
+    "#);
+    let err = result.unwrap_err();
+    // Should mention 'font' (the first modifier in the chain).
+    assert!(
+        err.contains("modifier 'font'"),
+        "expected error mentioning first modifier 'font', got: {err}"
+    );
+}
+
+/// Zero-arg modifier `.bold()` must also be rejected.
+#[test]
+fn text_dot_bold_is_rejected() {
+    let result = lower_result(r#"
+        import { Text } from "perry/ui";
+        Text("hi").bold();
+    "#);
+    let err = result.unwrap_err();
+    assert!(
+        err.contains("modifier 'bold'"),
+        "expected error mentioning modifier 'bold', got: {err}"
+    );
+}
+
+/// VStack with chained modifier must also be rejected.
+#[test]
+fn vstack_dot_padding_is_rejected() {
+    let result = lower_result(r#"
+        import { VStack, Text } from "perry/ui";
+        VStack([Text("hi")]).padding(16);
+    "#);
+    let err = result.unwrap_err();
+    assert!(
+        err.contains("modifier 'padding'"),
+        "expected error mentioning modifier 'padding', got: {err}"
+    );
+}
+
+/// Plain widget call with no modifiers must compile without error.
+#[test]
+fn plain_widget_call_is_accepted() {
+    let result = lower_result(r#"
+        import { Text } from "perry/ui";
+        const handle = Text("hi");
+    "#);
+    result.expect("Text(\"hi\") with no modifier should compile without error");
+}

docs/src/widgets/components.md

@@ -11,11 +11,13 @@ Text(`${entry.name}: ${entry.value}`)
 
 ### Text Modifiers
 
+Pass modifiers as a second argument options object — method-chain modifier syntax (e.g. `.font(...)`) produces a compile error:
+
 ```typescript,no-test
-const t = Text("Styled");
-t.font("title");       // .title, .headline, .body, .caption, etc.
-t.color("blue");       // Named color or hex
-t.bold();
+Text("Styled", { font: "title" })          // .title, .headline, .body, .caption, etc.
+Text("Styled", { color: "blue" })          // Named color or hex
+Text("Styled", { bold: true })
+Text("Styled", { font: "title", color: "blue", bold: true })  // combined
 ```
 
 ## Layout