Develop a partial syntax parser.

src/ui/App.tsx

@@ -1,31 +1,35 @@
-import { createMemo, createSignal, Show } from 'solid-js';
+import { createMemo, createSignal } from 'solid-js';
 import { sourceText } from 'source-region';
 import type { CodePointSpan, SourceRegion, SourceText } from 'source-region';
 import { parseDocument } from '../parser';
 import type { ParseError } from '../parse_errors';
-import type { ConcreteSyntax } from '../syntax';
+import { programOf } from '../syntax';
+import type { ConcreteSyntaxResult, PartialConcreteSyntax } from '../syntax';
 import { spanLabel } from './format';
 import { PaneHeader, PaneSplitter } from './Pane';
 import { SourceGrid } from './SourceGrid';
 import type { SourceGridAnnotation } from './SourceGrid';
-import { ErrorList, ExpressionList } from './SyntaxPane';
+import { StructureTree } from './SyntaxPane';
 import type { HoverTarget } from './types';
 
 type ParsedDocument = {
   source: SourceText;
   region: SourceRegion;
-  values: ConcreteSyntax[];
+  syntax: ConcreteSyntaxResult;
+  program: PartialConcreteSyntax;
   errors: ParseError[];
 };
 
 const SAMPLE_INPUT = `(define square (_ x) (mul x x))
 
-(add 1 2)
+[add, 1, 2]
 
 (define pyth (_ x y) (+ (square x) (square y)))
 
 foo ) @@@ (bar 1)
-(nested (list 123 abc_9 name-with-dash))`;
+(nested [list, 123, abc_9, name-with-dash])
+[a, b c, d]
+123fasd`;
 
 export function App() {
   const [input, setInput] = createSignal(SAMPLE_INPUT);
@@ -37,7 +41,7 @@ export function App() {
     const source = sourceText(input());
     const region = source.fullRegion();
     const result = parseDocument(region);
-    return { source, region, values: result.values, errors: result.errors };
+    return { source, region, syntax: result.syntax, program: programOf(result.syntax), errors: result.errors };
   });
 
   return (
@@ -71,23 +75,14 @@ export function App() {
       <section class="pane structure-pane">
         <PaneHeader
           title="Structure"
-          detail={`${parsed().values.length} expressions, ${parsed().errors.length} errors`}
+          detail={`${parsed().syntax.tag}, ${parsed().program.expressions.length} expressions, ${parsed().errors.length} errors`}
+        />
+        <StructureTree
+          program={parsed().program}
+          isValid={parsed().syntax.tag === "valid"}
+          errorCount={parsed().errors.length}
+          onHover={setHovered}
         />
-        <Show
-          when={parsed().errors.length > 0}
-          fallback={
-            <ExpressionList
-              values={parsed().values}
-              onHover={setHovered}
-            />
-          }
-        >
-          <ErrorList
-            errors={parsed().errors}
-            values={parsed().values}
-            onHover={setHovered}
-          />
-        </Show>
       </section>
 
       <PaneSplitter