@directory-builder/core 0.1.0

package/src/ingest.js

@@ -0,0 +1,158 @@
+import { sparqlSelect, storeFromTurtles } from "@foerderfunke/sem-ops-utils"
+import { CDP, localName, objectsOf, parseTtl, PATHS, sourceName, stepJournal } from "./utils.js"
+import { execSync, spawnSync } from "child_process"
+import path from "path"
+import fs from "fs"
+
+const SPARQL_ANYTHING_VERSION = "v1.1.0"
+
+const run = (cmd, args) => {
+    const r = spawnSync(cmd, args, { stdio: "inherit" })
+    if (r.status !== 0) throw new Error(`Exit ${r.status}: ${cmd} ${args.join(" ")}`)
+}
+
+// The generic lift queries ship with the engine — they resolve against this
+// package, not the instance root like everything else in PATHS.
+const liftQueryFor = (formatIri) =>
+    path.join(import.meta.dirname, "lift", `${localName(formatIri).toLowerCase()}.sparql`)
+
+// Ingest engine: fetch + lift per source declared in the instance's
+// federation.ttl. `root` is the instance directory all PATHS resolve against.
+export async function ingest(root = process.cwd()) {
+    const abs = (p) => path.join(root, p)
+    const federationTtl = fs.readFileSync(abs(PATHS.federation), "utf8")
+    const defStore = storeFromTurtles([federationTtl])
+
+    // ---- Read the sources ------------------------------------------------
+    // The step graph (fetch → lift per source) is the engine's own shape;
+    // config declares only the sources and their facts. Lift params are SPARQL
+    // Anything variables declared per source. Sources run in :hasSource
+    // declaration order.
+
+    const facts = new Map()
+    for (const r of await sparqlSelect(`
+        PREFIX : <${CDP}>
+        SELECT ?source ?fetchUrl ?format ?paramName ?paramValue WHERE {
+            :federation :hasSource ?source .
+            OPTIONAL { ?source :fetchUrl ?fetchUrl }
+            OPTIONAL { ?source :format   ?format   }
+            OPTIONAL { ?source :hasLiftParam [ :name ?paramName ; :value ?paramValue ] }
+        }`, [defStore])) {
+        if (!facts.has(r.source)) facts.set(r.source, { fetchUrl: r.fetchUrl, format: r.format, params: [] })
+        if (r.paramName) facts.get(r.source).params.push([r.paramName, r.paramValue])
+    }
+    const sources = new Map(objectsOf(parseTtl(federationTtl), `${CDP}hasSource`).map((iri) => [iri, facts.get(iri)]))
+    for (const [iri, s] of sources) {
+        if (!s.format) throw new Error(`${iri} declares no :format (needed to pick the lift query)`)
+    }
+
+    // ---- Ensure sparql-anything.jar ----------------------------------------
+
+    const JAR = abs("tools/sparql-anything.jar")
+    const VERSION_FILE = abs("tools/sparql-anything.version")
+    const haveCurrentJar = fs.existsSync(JAR) && fs.existsSync(VERSION_FILE)
+        && fs.readFileSync(VERSION_FILE, "utf8").trim() === SPARQL_ANYTHING_VERSION
+
+    if (!haveCurrentJar) {
+        const url = `https://github.com/SPARQL-Anything/sparql.anything/releases/download/${SPARQL_ANYTHING_VERSION}/sparql-anything-${SPARQL_ANYTHING_VERSION}.jar`
+        console.log(`Downloading sparql-anything ${SPARQL_ANYTHING_VERSION}...`)
+        fs.mkdirSync(path.dirname(JAR), { recursive: true })
+        const response = await fetch(url)
+        if (!response.ok) throw new Error(`Failed to fetch ${url}: ${response.status}`)
+        fs.writeFileSync(JAR, Buffer.from(await response.arrayBuffer()))
+        fs.writeFileSync(VERSION_FILE, SPARQL_ANYTHING_VERSION)
+        console.log(`Saved to ${JAR}`)
+    }
+
+    // ---- Run steps ----------------------------------------------------------
+
+    // All :hasRunParam values grouped by name, handed to every fetcher as one
+    // JSON argument — each fetcher picks the parameters it needs.
+    const runParams = {}
+    for (const r of await sparqlSelect(`
+        PREFIX : <${CDP}>
+        SELECT ?name ?value WHERE { :federation :hasRunParam [ :name ?name ; :value ?value ] } ORDER BY ?name ?value`, [defStore])) {
+        (runParams[r.name] ??= []).push(r.value)
+    }
+    const paramsJson = JSON.stringify(runParams)
+
+    const runStart = new Date()
+    const harvests = []
+    const journal = stepJournal()
+    const fetchStepOf = new Map()
+
+    for (const [iri, s] of sources) {
+        const name = sourceName(iri)
+        fetchStepOf.set(iri, await journal.step("fetch", { source: iri }, () => {
+            const outDir = PATHS.raw(name)
+            // Live sources pass their :fetchUrl; static-file sources pass the
+            // absolute static dir instead. The script gets whichever applies.
+            const origin = s.fetchUrl ?? abs(PATHS.staticDir(name))
+            console.log(`fetch  ${s.fetchUrl ?? PATHS.staticDir(name)} (params ${paramsJson}) → ${outDir}`)
+            fs.mkdirSync(abs(outDir), { recursive: true })
+            run("node", [abs(PATHS.fetchScript(name)), abs(outDir), origin, paramsJson])
+            const harvest = { source: iri, time: new Date().toISOString() }
+            // Static sources have no live harvest — record the files' git commit
+            // time instead (the freshness the Sources page shows for them).
+            if (!s.fetchUrl) try {
+                const iso = execSync(`git log -1 --format=%cI -- "${PATHS.staticDir(name)}"`, { cwd: root, encoding: "utf8" }).trim()
+                if (iso) harvest.staticCommittedAt = iso
+            } catch { /* not committed yet / no git → omit */ }
+            harvests.push(harvest)
+        }))
+    }
+
+    for (const [iri, s] of sources) {
+        const name = sourceName(iri)
+        await journal.step("lift", { source: iri, after: [fetchStepOf.get(iri)] }, () => {
+            // TODO: directory mode spawns one JVM per file (~1s startup each).
+            // Fine at small N; revisit if a source crosses ~50 items. SPARQL Anything
+            // accepts VALUES ?_location { … } in the lift query, which would let one
+            // invocation handle the whole batch.
+            const liftQuery = liftQueryFor(s.format)
+            const liftOne = (location, outPath) => {
+                const args = ["-jar", JAR, "-q", liftQuery,
+                              "-v", `location=${location}`,
+                              "-f", "TTL", "-o", outPath]
+                for (const [pName, value] of s.params) args.push("-v", `${pName}=${value}`)
+                run("java", args)
+            }
+            const inAbs = abs(PATHS.raw(name))
+            const outAbs = abs(PATHS.lifted(name))
+            const files = fs.readdirSync(inAbs).filter(f => !f.startsWith(".")).sort()
+            fs.mkdirSync(outAbs, { recursive: true })
+            console.log(`lift   ${PATHS.raw(name)} (${files.length} files) → ${PATHS.lifted(name)}`)
+            for (const f of files) {
+                const stem = path.basename(f, path.extname(f))
+                liftOne(path.join(inAbs, f), path.join(outAbs, `${stem}.ttl`))
+            }
+        })
+    }
+
+    const dt = (s) => `"${s}"^^xsd:dateTime`
+    const runId = "run" + runStart.toISOString().replace(/\D/g, "").slice(0, 14)
+    const harvestPart = harvests.length
+        ? ` ;\n    :harvested\n` + harvests.map((h) => {
+            const local = h.source.split("#").pop()
+            const committed = h.staticCommittedAt ? ` ; :staticCommittedAt ${dt(h.staticCommittedAt)}` : ""
+            return `        [ :ofSource :${local} ; prov:atTime ${dt(h.time)}${committed} ]`
+        }).join(" ,\n")
+        : ""
+
+    const block = `
+${journal.toTurtle()}
+
+:${runId} a :IngestRun ;
+    prov:startedAtTime ${dt(runStart.toISOString())} ;
+    prov:endedAtTime   ${dt(new Date().toISOString())}${harvestPart} .
+`
+
+    const prefixes = `@prefix :      <${CDP}> .
+@prefix p-plan: <http://purl.org/net/p-plan#> .
+@prefix prov:   <http://www.w3.org/ns/prov#> .
+@prefix xsd:    <http://www.w3.org/2001/XMLSchema#> .
+`
+    fs.mkdirSync(path.dirname(abs(PATHS.ingestLog)), { recursive: true })
+    fs.writeFileSync(abs(PATHS.ingestLog), prefixes + block)
+    console.log(`log:   wrote steps + IngestRun → ${PATHS.ingestLog}`)
+}

package/src/lift/html.sparql

@@ -0,0 +1,12 @@
+PREFIX xyz: <http://sparql.xyz/facade-x/data/>
+PREFIX fx: <http://sparql.xyz/facade-x/ns/>
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+CONSTRUCT {
+    ?s ?p ?o
+} WHERE {
+    SERVICE <x-sparql-anything:> {
+        fx:properties fx:location ?_location ;
+            fx:html.selector ?_selector .
+        ?s ?p ?o .
+    }
+}

package/src/lift/json.sparql

@@ -0,0 +1,12 @@
+PREFIX xyz: <http://sparql.xyz/facade-x/data/>
+PREFIX fx: <http://sparql.xyz/facade-x/ns/>
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+CONSTRUCT {
+    ?s ?p ?o
+} WHERE {
+    SERVICE <x-sparql-anything:> {
+        fx:properties fx:location ?_location ;
+            fx:json.include-null-values true .
+        ?s ?p ?o .
+    }
+}

package/src/pipeline.js

@@ -0,0 +1,16 @@
+import { ingest } from "./ingest.js"
+import { federate } from "./federate.js"
+
+// Programmatic entry: hold the instance root once, run the engines against it.
+// The CLI (bin/cli.js) is this same class with defaults — root = cwd.
+export class Pipeline {
+    constructor({ root = process.cwd() } = {}) {
+        this.root = root
+    }
+    ingest()   { return ingest(this.root) }
+    federate() { return federate(this.root) }
+    async run() {
+        await this.ingest()
+        await this.federate()
+    }
+}

package/src/utils.js

@@ -0,0 +1,152 @@
+// Shared helpers used by both the Node engines and instance webapps (browser),
+// exported as "@directory-builder/core/utils". Keep this file browser-safe —
+// no `fs`, no Node-only APIs. File-IO helpers belong in their consumer.
+
+import { Parser } from "n3"
+
+const RDF_TYPE = "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
+
+// The engine's vocabulary namespace (config, journals, cdp: in artifacts).
+export const CDP = "https://civic-data.de/pipeline#"
+
+export const localName = (iri) => iri.replace(/^.*[#/]/, "")
+
+// ---- Path conventions ----------------------------------------------------
+// All file paths follow from the source name (the :Source IRI's local name
+// minus its "Source" suffix): a source's artefacts live in sources/<name>/,
+// its data flows through data/ingest/ and data/pipeline/ under the same name.
+
+export const sourceName = (sourceIri) => localName(sourceIri).replace(/Source$/, "")
+
+export const sourceGraph = (name) => `urn:source:${name}`
+
+// Local name of the step IRIs the engines mint when journaling their run
+// (ingest-log.ttl / federate-log.ttl): ("fetch", "caritas") → "fetchCaritas".
+// Shared so the journals' cross-file p-plan:isPrecededBy references line up.
+export const stepIri = (type, name) => type + name[0].toUpperCase() + name.slice(1)
+
+// Journal of executed pipeline steps, recorded as a side effect of running
+// them: step() executes fn and only then keeps the entry, so a step appears
+// in the journal iff it ran, and the isPrecededBy edges are the IRIs actual
+// execution threaded through (cross-engine edges reference the other
+// journal's IRIs via stepIri). Per-source steps mint stepIri(type, source
+// name), singletons "<type>Step". toTurtle() emits the p-plan triples; the
+// engine owns its file's prefix header.
+export function stepJournal() {
+    const steps = []
+    return {
+        async step(type, { source, after = [] } = {}, fn) {
+            const iri = source ? stepIri(type, sourceName(source)) : `${type}Step`
+            await fn()
+            steps.push({ iri, type, source, after })
+            return iri
+        },
+        toTurtle: () => steps.map((s) =>
+            `:${s.iri} a :${s.type[0].toUpperCase()}${s.type.slice(1)}, p-plan:Step` +
+            (s.source ? ` ; :fromSource :${localName(s.source)}` : "") +
+            (s.after.length ? ` ; p-plan:isPrecededBy ${s.after.map((a) => `:${a}`).join(", ")}` : "") +
+            " .").join("\n"),
+    }
+}
+
+// Engine invariant, mirrored for display: the lift step always emits Turtle
+// (ingest.js invokes SPARQL Anything with -f TTL).
+export const LIFTED_FORMAT = "http://publications.europa.eu/resource/authority/file-type/RDF_TURTLE"
+
+export const PATHS = {
+    federation:     "config/federation.ttl",
+    matchKnowledge: "config/match-knowledge.ttl",
+    about:          "webapp/content/about.md",
+    fetchScript: (name) => `sources/${name}/fetch.js`,
+    exporter:    (name) => `webapp/exporters/${name}.js`,
+    staticDir:   (name) => `sources/${name}/static/`,
+    cleanQuery:  (name) => `sources/${name}/clean.sparql`,
+    transform:   (name, t) => `sources/${name}/transform-${t}.sparql`,
+    raw:         (name) => `data/ingest/raw/${name}/`,
+    lifted:      (name) => `data/ingest/lifted/${name}/`,
+    cleaned:     (name) => `data/pipeline/cleaned/${name}.ttl`,
+    ingestLog:   "data/ingest/ingest-log.ttl",
+    federateLog: "data/pipeline/federate-log.ttl",
+    mappingQueries: "data/pipeline/direct-mapping-queries/",
+    mapped:      "data/pipeline/mapped.ttl",
+    matches:     "data/pipeline/matches.ttl",
+    merged:      "data/pipeline/merged.ttl",
+    provenance:  "data/pipeline/provenance.ttl",
+    final:       "data/pipeline/final.ttl",
+}
+
+// Format family of a file-type IRI (EU file-type authority): the code before
+// any "_", used as a short display label — .../RDF_TURTLE -> "RDF", .../JSON -> "JSON".
+export const formatFamily = (iri) => localName(iri).split("_")[0]
+
+export const parseTtl = (turtle) => new Parser().parse(turtle)
+
+// {prefix: namespace} declared in a Turtle document's @prefix/PREFIX lines.
+// Textual on purpose: n3's Parser only reports prefixes via callbacks, which
+// turn parsing asynchronous — and this must stay sync (top-level module init).
+export const prefixesOf = (turtle) =>
+    Object.fromEntries([...turtle.matchAll(/^\s*@?prefix\s+([\w-]*):\s*<([^>]*)>/gim)].map(([, p, ns]) => [p, ns]))
+
+// Turtle with RDF-star triple terms in subject position (the engine's
+// provenance annotations) — plain Turtle parsing disallows those, N3 mode
+// accepts them.
+export const parseTtlStar = (turtle) => new Parser({ format: "text/n3" }).parse(turtle)
+
+// {prefix: namespace} → "PREFIX p1: <ns1>\nPREFIX p2: <ns2>"
+export const buildPrefixBlock = (prefixMap) =>
+    Object.entries(prefixMap).map(([p, ns]) => `PREFIX ${p}: <${ns}>`).join("\n")
+
+// Returns the IRI shortened against the supplied {prefix: namespace} map,
+// or the original IRI verbatim if no prefix matches.
+export const shrink = (iri, prefixMap) => {
+    for (const [p, ns] of Object.entries(prefixMap)) {
+        if (iri.startsWith(ns)) return `${p}:${iri.slice(ns.length)}`
+    }
+    return iri
+}
+
+// Objects of every `predIri` triple, deduped, in encounter order. RDF has no
+// statement order, but Turtle parse order preserves it — so the federation's
+// :hasSource declaration order is meaningful and governs source ordering
+// everywhere (engine runs, journals, webapp lanes/cards).
+export const objectsOf = (quads, predIri) =>
+    [...new Set(quads.filter((q) => q.predicate.value === predIri).map((q) => q.object.value))]
+
+// Set of subjects typed `rdf:type typeIri`. Iteration order = encounter order.
+export function subjectsOfType(quads, typeIri) {
+    const out = new Set()
+    for (const q of quads) {
+        if (q.predicate.value === RDF_TYPE && q.object.value === typeIri) out.add(q.subject.value)
+    }
+    return out
+}
+
+// Map<subjectIri, Set<typeIri>> for every typed subject in quads.
+export function typesOf(quads) {
+    const out = new Map()
+    for (const q of quads) {
+        if (q.predicate.value !== RDF_TYPE) continue
+        let set = out.get(q.subject.value)
+        if (!set) { set = new Set(); out.set(q.subject.value, set) }
+        set.add(q.object.value)
+    }
+    return out
+}
+
+// Map<subjectIri, Map<predicateIri, valueString[]>>. Values come from
+// q.object.value, so literals and IRIs both render as strings. Insertion order
+// of the outer Map = encounter order of subjects in quads.
+export function groupBySubject(quads, { literalsOnly = false } = {}) {
+    const out = new Map()
+    for (const q of quads) {
+        if (literalsOnly && q.object.termType !== "Literal") continue
+        const s = q.subject.value
+        let row = out.get(s)
+        if (!row) { row = new Map(); out.set(s, row) }
+        const p = q.predicate.value
+        let arr = row.get(p)
+        if (!arr) { arr = []; row.set(p, arr) }
+        arr.push(q.object.value)
+    }
+    return out
+}

package/src/webapp.js

@@ -0,0 +1,41 @@
+import path from "path"
+import fs from "fs"
+
+// The webapp ships with this package as source; these run it through vite's
+// JS API for an instance directory — dev server or dist build. The vite
+// project root is the package's webapp/; the instance root reaches the config
+// via the INSTANCE env var (see webapp/vite.config.js). vite is imported
+// lazily so engine-only CLI runs never load it.
+
+const WEBAPP = path.join(import.meta.dirname, "../webapp")
+const CONFIG = path.join(WEBAPP, "vite.config.js")
+
+export async function webappDev(root = process.cwd()) {
+    const { createServer } = await import("vite")
+    process.env.INSTANCE = root
+    const server = await createServer({ configFile: CONFIG, root: WEBAPP })
+    await server.listen()
+    server.printUrls()
+}
+
+export async function webappBuild(root = process.cwd(), { base } = {}) {
+    const { build } = await import("vite")
+    process.env.INSTANCE = root
+    const outDir = path.join(root, "webapp/dist")
+    await build({
+        configFile: CONFIG,
+        root: WEBAPP,
+        ...(base ? { base } : {}),
+        build: { outDir, emptyOutDir: true },
+    })
+    // The bundle fetches the instance's config, data and webapp/{content,
+    // exporters} at runtime — they are part of the deployable, so stage them
+    // next to it (URL paths mirror the repo paths).
+    const staged = ["config", "data", "webapp/content", "webapp/exporters"].filter((dir) => {
+        const from = path.join(root, dir)
+        if (!fs.existsSync(from)) return false
+        fs.cpSync(from, path.join(outDir, dir), { recursive: true })
+        return true
+    })
+    console.log(`staged ${staged.join(", ")} → webapp/dist/`)
+}

package/webapp/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>directory-builder</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
+</html>

package/webapp/src/About.jsx

@@ -0,0 +1,24 @@
+// About page: instances own the content by providing webapp/content/about.md
+// (fetched at runtime like config and data); without one, a generic default
+// renders. Markdown, single newlines = line breaks.
+
+import { aboutMd } from "./instanceData.js"
+import { marked } from "marked"
+import React from "react"
+
+const DEFAULT = `## Federated directory
+
+Builds a federated directory by mapping heterogeneous source schemas into a unified target schema.
+The directory can be queried or downloaded.
+This site serves both its users and those interested in the federation process itself.
+Toggle "Show federation process" in the top bar to inspect the steps.
+
+*The data shown here is example data: two fictional library directories exercising the pipeline and this webapp.
+A real use case replaces it with its own sources and this text with its own about page.*`
+
+export default function About() {
+    return (
+        <div className="page" style={{ maxWidth: "100ch", lineHeight: 1.5 }}
+             dangerouslySetInnerHTML={{ __html: marked.parse(aboutMd || DEFAULT, { breaks: true }) }} />
+    )
+}

package/webapp/src/App.jsx

@@ -0,0 +1,96 @@
+import { HashRouter, Routes, Route, NavLink } from "react-router-dom"
+import "./styles.css"
+import { repositoryUrl } from "./instanceData.js"
+import About from "./About.jsx"
+import React, { lazy, Suspense, useState } from "react"
+
+// Lazy-load route views so their heavy deps load only when the route is
+// visited: comunica + yasgui (Query), comunica + jsonld (Download), xyflow
+// (Map/Match). About stays eager as the landing route.
+const Directory   = lazy(() => import("./Directory.jsx"))
+const Download    = lazy(() => import("./Download.jsx"))
+const Pipeline    = lazy(() => import("./Pipeline.jsx"))
+const MapGraph    = lazy(() => import("./MapGraph.jsx"))
+const MatchGraph  = lazy(() => import("./MatchGraph.jsx"))
+const MergeTables = lazy(() => import("./MergeTables.jsx"))
+const Query       = lazy(() => import("./Query.jsx"))
+const Sources     = lazy(() => import("./Sources.jsx"))
+
+const STORAGE_KEY = "showFederation"
+
+const initialShowFed = () => {
+    try { return localStorage.getItem(STORAGE_KEY) === "true" } catch { return false }
+}
+
+function Nav() {
+    const [showFed, setShowFed] = useState(initialShowFed)
+    const update = (v) => {
+        setShowFed(v)
+        try { localStorage.setItem(STORAGE_KEY, String(v)) } catch {}
+    }
+    return (
+        <nav>
+            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+                <NavLink to="/" end>About</NavLink>
+                {showFed && (
+                    <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", border: "1px solid #aaa", borderRadius: 4, padding: "0.3rem 0.6rem" }}>
+                        <NavLink to="/sources">Sources</NavLink>
+                        <NavLink to="/pipeline">Pipeline</NavLink>
+                        <NavLink to="/map">Map</NavLink>
+                        <NavLink to="/match">Match</NavLink>
+                        <NavLink to="/merge">Merge</NavLink>
+                    </div>
+                )}
+                <NavLink to="/directory">Directory</NavLink>
+                <NavLink to="/query">Query</NavLink>
+                <NavLink to="/download">Download</NavLink>
+                <NavLink to="/apis">APIs</NavLink>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+                <label style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem", fontSize: 13, color: "#666" }}>
+                    <input type="checkbox" checked={showFed} onChange={(e) => update(e.target.checked)} />
+                    Show federation process
+                </label>
+                {repositoryUrl && <a href={repositoryUrl} target="_blank" rel="noreferrer">GitHub</a>}
+            </div>
+        </nav>
+    )
+}
+
+function Apis() {
+    return (
+        <div className="page">
+            <p><strong>TODO</strong>:</p>
+            <ul>
+                <li>OpenAPI / Swagger</li>
+                <li>SPARQL endpoint</li>
+            </ul>
+        </div>
+    )
+}
+
+export default function App() {
+    return (
+        <HashRouter>
+            <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+                <Nav />
+                <main>
+                    <Suspense fallback={<div className="page">Loading…</div>}>
+                        <Routes>
+                            <Route path="/" element={<About />} />
+                            <Route path="/pipeline" element={<Pipeline />} />
+                            <Route path="/sources" element={<Sources />} />
+                            <Route path="/map" element={<MapGraph />} />
+                            <Route path="/match" element={<MatchGraph />} />
+                            <Route path="/merge" element={<MergeTables />} />
+                            <Route path="/directory" element={<Directory />} />
+                            <Route path="/query" element={<Query />} />
+                            <Route path="/download" element={<Download />} />
+                            <Route path="/apis" element={<Apis />} />
+                        </Routes>
+                    </Suspense>
+                </main>
+            </div>
+        </HashRouter>
+    )
+}

package/webapp/src/Card.jsx

@@ -0,0 +1,32 @@
+// Presentational building blocks: <Card> (titled box) and <KeyValueTable>.
+// Reads:  props (title, children, rows)
+// Does:   renders DOM; used by OrgCard and Sources
+
+import React from "react"
+
+export default function Card({ title, tag, children }) {
+    return (
+        <div className="org-card">
+            <div className="org-card-header">
+                <code>{title}</code>
+                {tag && <span style={{ marginLeft: "0.6rem", fontSize: 11, color: "#888", fontFamily: "monospace" }}>{tag}</span>}
+            </div>
+            {children}
+        </div>
+    )
+}
+
+export function KeyValueTable({ rows }) {
+    return (
+        <table>
+            <tbody>
+                {rows.map((r, i) => (
+                    <tr key={r.key ?? i}>
+                        <td>{r.label}</td>
+                        <td>{r.value}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    )
+}