app-proto/main.css

@@ -104,17 +104,37 @@ details[open]:has(li) .elt-switch::after {
   font-style: italic;
 }
 
+.cst.invalid {
+  color: #f58fc2;
+}
+
 .cst > input[type=checkbox] {
   margin: 0px 8px 0px 0px;
 }
 
 .cst > input[type=text] {
-  color: #fcfcfc;
+  color: inherit;
   background-color: inherit;
   border: 1px solid #555;
   border-radius: 2px;
 }
 
+.cst.invalid > input[type=text] {
+  border-color: #70495c;
+}
+
+.status {
+  width: 20px;
+  padding-left: 4px;
+  text-align: center;
+  font-style: normal;
+}
+
+.invalid > .status::after, details:has(.invalid):not([open]) .status::after {
+  content: '⚠';
+  color: #f58fc2;
+}
+
 /* display */
 
 canvas {

app-proto/src/outline.rs

@@ -43,11 +43,19 @@ fn ConstraintOutlineItem(constraint_key: usize, element_key: usize) -> View {
         constraint.args.0
     };
     let other_arg_label = assembly.elements.with(|elts| elts[other_arg].label.clone());
+    let class = create_memo(move || {
+        if constraint.rep_valid.get() {
+            "cst"
+        } else {
+            "cst invalid"
+        }
+    });
     view! {
-        li(class="cst") {
+        li(class=class.get()) {
             input(r#type="checkbox", bind:checked=constraint.active)
             div(class="cst-label") { (other_arg_label) }
             LorentzProductInput(constraint=constraint)
+            div(class="status")
         }
     }
 }
@@ -56,14 +64,12 @@ fn ConstraintOutlineItem(constraint_key: usize, element_key: usize) -> View {
 #[component(inline_props)]
 fn ElementOutlineItem(key: usize, element: assembly::Element) -> View {
     let state = use_context::<AppState>();
-    let class = create_memo({
+    let class = create_memo(move || {
-        move || {
         if state.selection.with(|sel| sel.contains(&key)) {
             "selected"
         } else {
             ""
         }
-        }
     });
     let label = element.label.clone();
     let rep_components = element.rep.iter().map(|u| {
@@ -139,6 +145,7 @@ fn ElementOutlineItem(key: usize, element: assembly::Element) -> View {
                     ) {
                         div(class="elt-label") { (label) }
                         div(class="elt-rep") { (rep_components) }
+                        div(class="status")
                     }
                 }
                 ul(class="constraints") {