effective usfm parsing

apps/gnocchi/.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "app-dev",
+      "path": "web",
+      "problemMatcher": [],
+      "label": "npm: app-dev - web",
+      "detail": "vite --host --mode development"
+    }
+  ]
+}

apps/marginalia/.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "app-dev",
+      "path": "web",
+      "problemMatcher": [],
+      "label": "npm: app-dev - web",
+      "detail": "vite"
+    }
+  ]
+}

apps/marginalia/web/src/components/text/Book.tsx

@@ -1,5 +1,5 @@
-import { UsfmRenderer } from '@/components/usfm/UsfmRenderer.jsx';
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { UsfmNode } from '../usfm/nodes.jsx';
 
 export interface BookProps {
   id: string;
@@ -12,7 +12,11 @@ export function Book({ id }: BookProps) {
     return <div>Loading...</div>;
   }
 
-  return <UsfmRenderer root={book} />;
+  return (
+    <article className="leading-loose">
+      <UsfmNode text={book} />
+    </article>
+  );
 }
 
 function useBook(id: string) {

apps/marginalia/web/src/components/usfm/Reference.tsx

@@ -0,0 +1,29 @@
+import { Button } from '@a-type/ui/components/button';
+import {
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+} from '@a-type/ui/components/popover';
+import { ReactNode } from 'react';
+
+export interface ReferenceProps {
+  caller: string;
+  children: ReactNode;
+}
+
+export function Reference({ caller, children }: ReferenceProps) {
+  return (
+    <Popover>
+      <PopoverTrigger data-type="cross-reference" asChild>
+        <Button size="icon" color="ghost" className="inline-flex p-0">
+          {caller === '+' ? '*' : caller}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+}