Write out "element" in HTML element classes

Write out "representation" too.

app-proto/main.css

@@ -61,45 +61,45 @@ summary.selected {
   background-color: #444;
 }
 
-summary > div, .cst {
+summary > div, .constraint {
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
-.elt, .cst {
+.element, .constraint {
   display: flex;
   flex-grow: 1;
   padding-left: 8px;
   padding-right: 8px;
 }
 
-.elt-switch {
+.element-switch {
   width: 18px;
   padding-left: 2px;
   text-align: center;
 }
 
-details:has(li) .elt-switch::after {
+details:has(li) .element-switch::after {
   content: '▸';
 }
 
-details[open]:has(li) .elt-switch::after {
+details[open]:has(li) .element-switch::after {
   content: '▾';
 }
 
-.elt-label {
+.element-label {
   flex-grow: 1;
 }
 
-.cst-label {
+.constraint-label {
   flex-grow: 1;
 }
 
-.elt-rep {
+.element-representation {
   display: flex;
 }
 
-.elt-rep > div {
+.element-representation > div {
   padding: 2px 0px 0px 0px;
   font-size: 10pt;
   font-variant-numeric: tabular-nums;
@@ -107,26 +107,26 @@ details[open]:has(li) .elt-switch::after {
   width: 56px;
 }
 
-.cst {
+.constraint {
   font-style: italic;
 }
 
-.cst.invalid {
+.constraint.invalid {
   color: #f58fc2;
 }
 
-.cst > input[type=checkbox] {
+.constraint > input[type=checkbox] {
   margin: 0px 8px 0px 0px;
 }
 
-.cst > input[type=text] {
+.constraint > input[type=text] {
   color: inherit;
   background-color: inherit;
   border: 1px solid #555;
   border-radius: 2px;
 }
 
-.cst.invalid > input[type=text] {
+.constraint.invalid > input[type=text] {
   border-color: #70495c;
 }
 

app-proto/src/outline.rs

@@ -44,12 +44,12 @@ fn ConstraintOutlineItem(constraint_key: ConstraintKey, element_key: ElementKey)
     };
     let other_subject_label = assembly.elements.with(|elts| elts[other_subject].label.clone());
     let class = constraint.lorentz_prod_valid.map(
-        |&lorentz_prod_valid| if lorentz_prod_valid { "cst" } else { "cst invalid" }
+        |&lorentz_prod_valid| if lorentz_prod_valid { "constraint" } else { "constraint invalid" }
     );
     view! {
         li(class=class.get()) {
             input(r#type="checkbox", bind:checked=constraint.active)
-            div(class="cst-label") { (other_subject_label) }
+            div(class="constraint-label") { (other_subject_label) }
             LorentzProductInput(constraint=constraint)
             div(class="status")
         }
@@ -115,11 +115,11 @@ fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View {
                     }
                 ) {
                     div(
-                        class="elt-switch",
+                        class="element-switch",
                         on:click=|event: MouseEvent| event.stop_propagation()
                     )
                     div(
-                        class="elt",
+                        class="element",
                         on:click={
                             move |event: MouseEvent| {
                                 if event.shift_key() {
@@ -139,8 +139,8 @@ fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View {
                             }
                         }
                     ) {
-                        div(class="elt-label") { (label) }
-                        div(class="elt-rep") {
+                        div(class="element-label") { (label) }
+                        div(class="element-representation") {
                             Indexed(
                                 list=rep_components,
                                 view=|coord_str| view! {