diff --git a/app-proto/src/outline.rs b/app-proto/src/outline.rs
index 62bc529..fcf983f 100644
--- a/app-proto/src/outline.rs
+++ b/app-proto/src/outline.rs
@@ -3,11 +3,36 @@ use sycamore::{prelude::*, web::tags::div};
 use web_sys::{Element, Event, HtmlInputElement, KeyboardEvent, MouseEvent, wasm_bindgen::JsCast};
 use web_sys::{console, wasm_bindgen::JsValue}; /* DEBUG */
 
-use crate::AppState;
+use crate::{AppState, assembly::Constraint};
 
-// this component lists the elements of the assembly, showing the constraints
-// on each element as a collapsible sub-list. its implementation is based on
-// Kate Morley's HTML + CSS tree views:
+// an editable view of the Lorentz product representing a constraint
+#[component(inline_props)]
+fn LorentzProductInput(constraint: Constraint) -> View {
+    view! {
+        input(
+            r#type="text",
+            bind:value=constraint.rep_text,
+            on:change=move |event: Event| {
+                let target: HtmlInputElement = event.target().unwrap().unchecked_into();
+                match target.value().parse::<f64>() {
+                    Ok(rep) => batch(|| {
+                        constraint.rep.set(rep);
+                        constraint.rep_valid.set(true);
+                        console::log_2(
+                            &JsValue::from("Constraint rep parsed to"),
+                            &JsValue::from(rep)
+                        );
+                    }),
+                    Err(_) => constraint.rep_valid.set(false)
+                };
+            }
+        )
+    }
+}
+
+// a component that lists the elements of the current assembly, showing the
+// constraints on each element as a collapsible sub-list. its implementation
+// is based on Kate Morley's HTML + CSS tree views:
 //
 //   https://iamkate.com/code/tree-views/
 //
@@ -137,24 +162,7 @@ pub fn Outline() -> View {
                                                 li(class="cst") {
                                                     input(r#type="checkbox", bind:checked=cst.active)
                                                     div(class="cst-label") { (other_arg_label) }
-                                                    input(
-                                                        r#type="text",
-                                                        bind:value=cst.rep_text,
-                                                        on:change=move |event: Event| {
-                                                            let target: HtmlInputElement = event.target().unwrap().unchecked_into();
-                                                            match target.value().parse::<f64>() {
-                                                                Ok(rep) => batch(|| {
-                                                                    cst.rep.set(rep);
-                                                                    cst.rep_valid.set(true);
-                                                                    console::log_2(
-                                                                        &JsValue::from("Constraint rep parsed to"),
-                                                                        &JsValue::from(rep)
-                                                                    );
-                                                                }),
-                                                                Err(_) => cst.rep_valid.set(false)
-                                                            };
-                                                        }
-                                                    )
+                                                    LorentzProductInput(constraint=cst)
                                                 }
                                             }
                                         },