Clean up the outline view (#19)

Clean up the source code and interface of the outline view. In addition, [fix a bug](commit/6e42681b719d7ec97c4225ca321225979bf87b56) that could cause `Assembly::realize` to react to itself under certain circumstances. Those circumstances arose, making the bug noticeable, while this branch was being written.

#### Source code

- Modularize the `Outline` component into smaller components.
- Switch from static iteration to dynamic Sycamore lists. This reduces the amount of re-rendering that happens when an element or constraint changes. It also allows constraint details to stay open or closed during constraint updates, rather than resetting to closed.
- Make `Element::index` private, as discussed [here](pulls/15#issuecomment-1816).

#### Interface

- Make constraints editable, updating the assembly realization on input. Flag constraints where the Lorentz product value doesn't parse.
- Round element vector coordinates to prevent the displayed strings from overlapping.

Note that issue #20 was created by this PR, but it will be addressed shortly.

Co-authored-by: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Reviewed-on: glen/dyna3#19
Co-authored-by: Vectornaut <vectornaut@nobody@nowhere.net>
Co-committed-by: Vectornaut <vectornaut@nobody@nowhere.net>

app-proto/main.css

@@ -1,7 +1,20 @@
+:root {
+  --text: #fcfcfc; /* almost white */
+  --text-bright: white;
+  --text-invalid: #f58fc2; /* bright pink */
+  --border: #555; /* light gray */
+  --border-focus: #aaa; /* bright gray */
+  --border-invalid: #70495c; /* dusky pink */
+  --selection-highlight: #444; /* medium gray */
+  --page-background: #222; /* dark gray */
+  --display-background: #020202; /* almost black */
+}
+
 body {
   margin: 0px;
-  color: #fcfcfc;
-  background-color: #222;
+  color: var(--text);
+  background-color: var(--page-background);
+  font-family: 'Fira Sans', sans-serif;
 }
 
 /* sidebar */
@@ -16,7 +29,7 @@ body {
   padding: 0px;
   border-width: 0px 1px 0px 0px;
   border-style: solid;
-  border-color: #555;
+  border-color: var(--border);
 }
 
 /* add-remove */
@@ -33,6 +46,15 @@ body {
   font-size: large;
 }
 
+/* KLUDGE */
+/*
+  for convenience, we're using emoji as temporary icons for some buttons. these
+  buttons need to be displayed in an emoji font
+*/
+#add-remove > button.emoji {
+  font-family: 'Noto Emoji', sans-serif;
+}
+
 /* outline */
 
 #outline {
@@ -51,81 +73,103 @@ summary {
 }
 
 summary.selected {
-  color: #fff;
-  background-color: #444;
+  color: var(--text-bright);
+  background-color: var(--selection-highlight);
 }
 
-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;
-  text-align: center;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
   width: 56px;
 }
 
-.cst {
+.constraint {
   font-style: italic;
 }
 
-.cst > input[type=checkbox] {
+.constraint.invalid {
+  color: var(--text-invalid);
+}
+
+.constraint > input[type=checkbox] {
   margin: 0px 8px 0px 0px;
 }
 
-.cst > input[type=text] {
-  color: #fcfcfc;
+.constraint > input[type=text] {
+  color: inherit;
   background-color: inherit;
-  border: 1px solid #555;
+  border: 1px solid var(--border);
   border-radius: 2px;
 }
 
+.constraint.invalid > input[type=text] {
+  border-color: var(--border-invalid);
+}
+
+.status {
+  width: 20px;
+  padding-left: 4px;
+  text-align: center;
+  font-family: 'Noto Emoji';
+  font-style: normal;
+}
+
+.invalid > .status::after, details:has(.invalid):not([open]) .status::after {
+  content: '⚠';
+  color: var(--text-invalid);
+}
+
 /* display */
 
 canvas {
   float: left;
   margin-left: 20px;
   margin-top: 20px;
-  background-color: #020202;
-  border: 1px solid #555;
+  background-color: var(--display-background);
+  border: 1px solid var(--border);
   border-radius: 16px;
 }
 
 canvas:focus {
-  border-color: #aaa;
+  border-color: var(--border-focus);
 }