@manta-eu/horns-client 0.1.0

package/dist/app/shape-zoo-page.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link, useParams } from "react-router";
+import { ChevronRight } from "lucide-react";
+import { Badge } from "@manta-eu/react";
+import { shapeViewSpecs } from "@manta-eu/horns-kit";
+import { auditShapeZoo, buildShapeZoo, shapeViewProblems, summarizeZooFindings, zooProblems, } from "@manta-eu/horns/shapes";
+import { shapeEntityPath, shapesPath } from "./paths";
+import { ShapeViewStudio } from "./shape-view-studio";
+import { SnapshotViewBody } from "../components/snapshot-view";
+import { PageHeader } from "../components/page-header";
+import { DatastoreMissing, EmptyState, ErrorState, Loading } from "../components/states";
+import { MantaSparqlProvider } from "../lib/manta/providers";
+import { useMantaSession } from "../lib/manta/session";
+import { browserSparqlSelect } from "../lib/manta/sparql-select";
+import { ldkitShapeCatalog, shapesRealm } from "../lib/shapes/catalog";
+function Problems({ heading, problems }) {
+    if (!isPresent(problems))
+        return null;
+    return (_jsxs("div", { role: "alert", "data-problems": true, className: "rounded-lg border border-error bg-error/10 px-4 py-3 text-sm", children: [_jsx("p", { className: "font-medium text-default-foreground", children: heading }), _jsx("ul", { className: "mt-2 flex list-disc flex-col gap-1 pl-5 text-muted-foreground", children: problems.map((problem) => (_jsx("li", { children: problem }, problem))) })] }));
+}
+function Zoo(props) {
+    const { datastoreId, spec, version } = props;
+    const realm = shapesRealm();
+    const zoo = useQuery({
+        // Keyed on the version: a changed view is a different zoo, and returning the cached one would show the
+        // card the person just moved away from.
+        queryKey: ["shape-zoo", datastoreId, spec.schema, version],
+        queryFn: ({ signal }) => buildShapeZoo({ spec, realm, datastoreId, select: browserSparqlSelect(datastoreId), signal }),
+    });
+    if (zoo.isPending)
+        return _jsx(Loading, { label: "Sampling instances\u2026", rows: 4 });
+    if (zoo.isError)
+        return _jsx(ErrorState, { title: "The zoo could not be built.", hint: zoo.error.message });
+    const { sampled, distinct, variants, fillRates, snapshot } = zoo.data;
+    const view = snapshot.views[0];
+    const content = view?.content;
+    if (sampled === 0) {
+        return (_jsx(EmptyState, { title: `This datastore holds no ${spec.schema.replace(/Schema$/, "")} instances yet.`, hint: "A zoo needs real data to show the variants a view has to survive." }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", "data-zoo-summary": true, children: `Sampled ${sampled} instances · ${distinct} distinct variants · showing ${variants.length}` }), _jsx(Problems, { heading: "What the zoo shows is wrong with this view", problems: [...zooProblems(zoo.data, spec), ...summarizeZooFindings(auditShapeZoo(zoo.data))] }), _jsxs("details", { className: "group rounded-lg border border-default-border bg-card", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-3 px-4 py-3", children: [_jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground transition-transform group-open:rotate-90" }), _jsx("span", { className: "font-medium text-default-foreground", children: "How often each field is filled" })] }), _jsx("ul", { className: "divide-y divide-default-border border-t border-default-border", children: spec.fields.map((field) => (_jsxs("li", { className: "flex items-center justify-between gap-4 px-4 py-1.5 text-sm", children: [_jsx("span", { className: "font-mono text-default-foreground", children: field.name }), _jsx("span", { className: "text-muted-foreground", children: `${Math.round((fillRates[field.name] ?? 0) * 100)}%` })] }, field.name))) })] }), content?.lane === "error" ? _jsx(ErrorState, { title: "The view failed.", hint: content.message }) : null, _jsx("div", { className: "grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))]", children: variants.map((variant, index) => (_jsxs("section", { "data-zoo-variant": variant.entity, className: "flex flex-col gap-2 rounded-lg border border-default-border bg-card p-4", children: [_jsxs("header", { className: "flex flex-col gap-1", children: [_jsx("h2", { className: "text-sm font-medium", children: _jsx(Link, { className: "text-default-foreground hover:underline", to: shapeEntityPath(datastoreId, spec.schema, variant.entity), children: `Variant ${index + 1}` }) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [`${variant.populated.length} of ${spec.fields.length} fields · ${variant.lookalikes} ${variant.lookalikes === 1 ? "instance" : "instances"} like this`, isPresent(variant.missing) ? ` · no ${variant.missing.join(", ")}` : ""] })] }), view && content?.lane === "sandbox" ? (_jsx(SnapshotViewBody, { snapshot: snapshot, view: {
+                                ...view,
+                                title: `${spec.schema} variant ${index + 1}`,
+                                content: { ...content, rows: content.rows.filter((row) => row["this"] === variant.entity) },
+                            } })) : null] }, variant.entity))) })] }));
+}
+export function ShapeZooPage() {
+    const { datastoreId, schema } = useParams();
+    const { datastores } = useMantaSession();
+    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
+    if (!isPresent(datastore) || !isPresent(schema))
+        return _jsx(DatastoreMissing, {});
+    const realm = shapesRealm();
+    const shape = ldkitShapeCatalog().shapes.find((candidate) => candidate.schema === schema);
+    const spec = shapeViewSpecs.find((candidate) => candidate.schema === schema);
+    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: `${schema} zoo`, description: "Real instances of this shape, one per variant of the fields it fills. Every card must survive all of them.", meta: spec ? (_jsx(Badge, { variant: spec.status === "curated" ? "success" : "info", children: `${spec.classCurie} · ${spec.status}` })) : undefined, actions: _jsx(Link, { className: "text-sm text-muted-foreground hover:text-default-foreground", to: shapesPath(datastore.id), children: "Back to shapes" }) }), !shape ? (_jsx(ErrorState, { title: `${schema} is not a shape the SDK knows.` })) : !spec ? (_jsx(EmptyState, { title: `${shape.schema} has no HornView yet.`, hint: "Run the Studio over the coverage worklist to draft one." })) : (_jsx(ShapeViewStudio, { datastoreId: datastore.id, stored: spec, children: (current, version) => (_jsxs(_Fragment, { children: [_jsx(Problems, { heading: "This view does not fit its shape", problems: shapeViewProblems(current, shape, realm) }), _jsx(Zoo, { datastoreId: datastore.id, spec: current, version: version })] })) }))] }) }));
+}

package/dist/app/shapes-page.d.ts

@@ -0,0 +1 @@
+export declare function ShapesPage(): import("react").JSX.Element;

package/dist/app/shapes-page.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link, useParams } from "react-router";
+import { ChevronRight } from "lucide-react";
+import { Badge, Progress, Skeleton } from "@manta-eu/react";
+import { compactIri } from "@manta-eu/horns";
+import { shapeViewSpecs } from "@manta-eu/horns-kit";
+import { coverageWorklist, instanceCountsQuery, observedClassesQuery, readInstanceCounts, readObservedClasses, shapeCoverage, } from "@manta-eu/horns/shapes";
+import { CoverageRun } from "./coverage-run";
+import { shapeZooPath } from "./paths";
+import { Card, CardTitle, PageHeader } from "../components/page-header";
+import { DatastoreMissing, ErrorState } from "../components/states";
+import { MantaSparqlProvider } from "../lib/manta/providers";
+import { useMantaSession } from "../lib/manta/session";
+import { browserSparqlSelect } from "../lib/manta/sparql-select";
+import { ldkitShapeCatalog, shapesRealm } from "../lib/shapes/catalog";
+function percentOf(part, whole) {
+    return whole === 0 ? 0 : Math.round((part / whole) * 1000) / 10;
+}
+// Past this the list stops being a queue and becomes the namespace list again.
+const maxReviewLinks = 24;
+function StatusBadge({ status }) {
+    if (status === "curated")
+        return _jsx(Badge, { variant: "success", children: "Curated" });
+    if (status === "drafted")
+        return _jsx(Badge, { variant: "info", children: "Drafted" });
+    return _jsx(Badge, { variant: "secondary", children: "No view" });
+}
+function ShapeRow({ entry, realm, datastoreId, }) {
+    const shape = entry.shape;
+    return (_jsxs("li", { "data-shape": shape.schema, "data-status": entry.status, className: "flex flex-wrap items-center justify-between gap-3 px-4 py-2.5", children: [_jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-mono text-sm text-default-foreground", children: shape.schema }), _jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [`${compactIri(realm, shape.classIri)} · ${shape.properties.length} properties`, entry.observed ? " · in this datastore" : ""] })] }), _jsxs("span", { className: "flex shrink-0 items-center gap-3", children: [_jsx(StatusBadge, { status: entry.status }), entry.status === "missing" ? null : (_jsx(Link, { className: "text-sm text-muted-foreground underline hover:text-default-foreground", to: shapeZooPath(datastoreId, shape.schema), children: entry.status === "curated" ? "Zoo" : "Zoo (draft)" }))] })] }));
+}
+function ShapeCoverageDashboard({ datastoreId }) {
+    const realm = shapesRealm();
+    const catalog = ldkitShapeCatalog();
+    const observed = useQuery({
+        queryKey: ["observed-classes", datastoreId],
+        queryFn: async ({ signal }) => readObservedClasses(await browserSparqlSelect(datastoreId)(observedClassesQuery(realm), signal)),
+    });
+    // The queue is ordered by how much data a class has, so the views worth building come first. Counted in one
+    // query, bounded by the classes this datastore actually holds.
+    const counts = useQuery({
+        queryKey: ["instance-counts", datastoreId, observed.dataUpdatedAt],
+        enabled: isPresent(observed.data),
+        queryFn: async ({ signal }) => {
+            const held = catalog.shapes.filter((shape) => observed.data?.has(shape.classIri)).map((shape) => shape.classIri);
+            if (!isPresent(held))
+                return new Map();
+            return readInstanceCounts(await browserSparqlSelect(datastoreId)(instanceCountsQuery(held), signal));
+        },
+    });
+    const coverage = shapeCoverage({
+        shapes: catalog.shapes,
+        views: shapeViewSpecs,
+        ...(observed.data ? { observedClasses: observed.data } : {}),
+        ...(counts.data ? { instanceCounts: counts.data } : {}),
+    });
+    const worklist = coverageWorklist(coverage, 8);
+    const drafted = coverage.namespaces.flatMap((group) => group.shapes.filter((entry) => entry.status === "drafted"));
+    const percent = percentOf(coverage.covered, coverage.total);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { children: [_jsxs("section", { "aria-label": "Coverage summary", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-3", children: [_jsx("span", { className: "text-4xl font-semibold text-default-foreground", children: `${coverage.covered} / ${coverage.total}` }), _jsx("span", { className: "text-sm text-muted-foreground", children: "shapes have a HornView" }), _jsx("span", { className: "ml-auto text-2xl font-semibold text-default-foreground", children: `${percent}%` })] }), _jsx(Progress, { value: percent, "aria-label": "Shapes covered", "aria-valuenow": percent, "aria-valuetext": `${percent}% of shapes have a HornView` }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [`${coverage.curated} curated after review in a zoo`, coverage.observed
+                                        ? ` · ${coverage.observed.covered} / ${coverage.observed.total} of the shapes this datastore holds`
+                                        : ""] }), observed.isPending ? _jsx(Skeleton, { className: "h-4 w-64" }) : null] }), observed.isError ? (_jsx("div", { className: "pt-3", children: _jsx(ErrorState, { title: "Could not read which shapes this datastore holds.", hint: observed.error.message }) })) : null] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [isPresent(drafted) ? (_jsx(Card, { children: _jsxs("section", { "aria-labelledby": "review", className: "flex flex-col gap-3", children: [_jsx(CardTitle, { aside: `${drafted.length} to review`, children: _jsx("span", { id: "review", children: "Drafted, waiting on a person" }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Each of these was designed by the Studio and has not been looked at. Open its zoo: what the audit reports there is what to fix, and a view that holds up is promoted to curated." }), _jsx("ul", { "data-review": true, className: "flex flex-wrap gap-2", children: drafted.slice(0, maxReviewLinks).map((entry) => (_jsx("li", { children: _jsx(Link, { "data-review-shape": entry.shape.schema, className: "rounded-md border border-default-border px-2 py-1 font-mono text-xs text-muted-foreground hover:bg-card/70 hover:text-default-foreground", to: shapeZooPath(datastoreId, entry.shape.schema), children: entry.shape.schema }) }, entry.shape.schema))) }), drafted.length > maxReviewLinks ? (_jsx("p", { className: "text-xs text-muted-foreground", children: `…${drafted.length - maxReviewLinks} more, in the list below.` })) : null] }) })) : null, isPresent(worklist) ? (_jsx(Card, { children: _jsxs("section", { "aria-labelledby": "worklist", className: "flex flex-col gap-3", children: [_jsx(CardTitle, { aside: `${worklist.length} next`, children: _jsx("span", { id: "worklist", children: "Next for the Studio" }) }), _jsx("ol", { className: "flex flex-col divide-y divide-default-border text-sm", children: worklist.map((entry) => (_jsxs("li", { className: "flex items-center justify-between gap-4 py-2", children: [_jsx("span", { className: "truncate font-mono text-default-foreground", children: entry.shape.schema }), _jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [entry.status === "drafted" ? "review the draft in its zoo" : "needs a view", entry.instances === undefined
+                                                        ? ""
+                                                        : ` · ${entry.instances.toLocaleString("en")} instance${entry.instances === 1 ? "" : "s"}`] })] }, entry.shape.schema))) })] }) })) : null] }), _jsx(CoverageRun, { datastoreId: datastoreId }), _jsx("section", { "aria-label": "Shapes by namespace", className: "flex flex-col gap-2", children: coverage.namespaces.map((group) => (_jsxs("details", { "data-namespace": group.namespace, className: "group rounded-lg border border-default-border bg-card", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-3 px-4 py-3", children: [_jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground transition-transform group-open:rotate-90" }), _jsx("span", { className: "font-medium text-default-foreground", children: group.namespace }), _jsx("span", { className: "text-sm text-muted-foreground", children: `${group.covered} / ${group.total}` }), _jsx("span", { className: "ml-auto text-sm text-muted-foreground", children: `${percentOf(group.covered, group.total)}%` })] }), _jsx("ul", { className: "divide-y divide-default-border border-t border-default-border", children: group.shapes.map((entry) => (_jsx(ShapeRow, { entry: entry, realm: realm, datastoreId: datastoreId }, entry.shape.schema))) })] }, group.namespace))) })] }));
+}
+export function ShapesPage() {
+    const { datastoreId } = useParams();
+    const { datastores } = useMantaSession();
+    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
+    if (!isPresent(datastore))
+        return _jsx(DatastoreMissing, {});
+    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: "Shape coverage", description: "Every SHACL-derived LDKit shape should have a HornView. A covered shape opens a zoo of the variants its real instances in this datastore take." }), _jsx(ShapeCoverageDashboard, { datastoreId: datastore.id })] }) }));
+}

package/dist/app/showcase-page.d.ts

@@ -0,0 +1,2 @@
+export declare const maxShowcaseCards = 48;
+export declare function ShowcasePage(): import("react").JSX.Element;

package/dist/app/showcase-page.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link, useParams } from "react-router";
+import { Columns3, Plus } from "lucide-react";
+import { Button, cn } from "@manta-eu/react";
+import { hornSchema, hornSources, isRealm } from "@manta-eu/horns";
+import { PageHeader } from "../components/page-header";
+import { DatastoreMissing, EmptyState, ErrorState, Loading } from "../components/states";
+import { hornViewPath, newHornPath } from "./paths";
+import { isRecord } from "@manta-eu/horns";
+import { MantaSparqlProvider } from "../lib/manta/providers";
+import { useMantaSession } from "../lib/manta/session";
+import { timeAgo } from "../lib/time-ago";
+// Every Horn this datastore holds, as a card showing what it looked like when someone last saved it, what it
+// answers, who it is for and what it reads — so a person finds one by recognising it rather than by
+// remembering its name.
+export const maxShowcaseCards = 48;
+const everyone = "Everything";
+function listedOf(entry) {
+    const { slug, title, screenshot, capturedAt } = entry;
+    if (typeof slug !== "string")
+        return [];
+    return [
+        {
+            slug,
+            title: typeof title === "string" ? title : slug,
+            ...(typeof screenshot === "string" ? { screenshot } : {}),
+            ...(typeof capturedAt === "string" ? { capturedAt } : {}),
+        },
+    ];
+}
+function detailsOf(horn) {
+    return {
+        slug: horn.slug,
+        ...(horn.summary === undefined ? {} : { summary: horn.summary }),
+        ...(horn.audience === undefined ? {} : { audience: horn.audience }),
+        sources: isRealm(horn.realm) ? hornSources(horn, horn.realm) : [],
+    };
+}
+/** The picture, read back through the redirect that turns a file's IRI into something a browser can load. */
+function screenshotSrc(datastoreId, fileIri) {
+    return `/d/${encodeURIComponent(datastoreId)}/redirect?iri=${encodeURIComponent(fileIri)}`;
+}
+export function ShowcasePage() {
+    const { datastoreId } = useParams();
+    const { datastores } = useMantaSession();
+    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
+    if (!isPresent(datastore))
+        return _jsx(DatastoreMissing, {});
+    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(Showcase, { datastoreId: datastore.id }) }));
+}
+function Showcase({ datastoreId }) {
+    const [showing, setShowing] = useState(everyone);
+    const listed = useQuery({
+        queryKey: ["horns", datastoreId],
+        queryFn: async ({ signal }) => {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns`, { signal });
+            if (!response.ok)
+                throw new Error(`The datastore answered ${response.status}.`);
+            const body = await response.json();
+            const entries = isRecord(body) && Array.isArray(body["horns"]) ? body["horns"] : [];
+            return entries.flatMap((entry) => (isRecord(entry) ? listedOf(entry) : [])).slice(0, maxShowcaseCards);
+        },
+    });
+    // Each card says what its Horn reads, which only the document knows; they are read side by side, and the
+    // cards are drawn before they arrive rather than after all of them have.
+    const documents = useQueries({
+        queries: (listed.data ?? []).map((entry) => ({
+            queryKey: ["horn", datastoreId, entry.slug],
+            staleTime: Infinity,
+            queryFn: async ({ signal }) => {
+                const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/${encodeURIComponent(entry.slug)}`, { signal });
+                if (!response.ok)
+                    throw new Error(`That Horn could not be read (${response.status}).`);
+                const body = await response.json();
+                return detailsOf(hornSchema.parse(isRecord(body) ? body["horn"] : undefined));
+            },
+        })),
+    });
+    const details = new Map(documents.flatMap((query) => (query.data ? [[query.data.slug, query.data]] : [])));
+    const cards = (listed.data ?? []).map((entry) => {
+        const found = details.get(entry.slug);
+        return { ...entry, ...(found ? { details: found } : {}) };
+    });
+    const audiences = [
+        everyone,
+        ...new Set([...details.values()].flatMap((one) => (one.audience ? [one.audience] : []))),
+    ];
+    // A Horn whose document has not arrived is not yet known to be of another audience, so it stays shown.
+    const shown = showing === everyone ? cards : cards.filter((card) => card.details?.audience === showing);
+    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: "Showcase", description: "What this datastore can already answer. Open one to look at it, or describe a new one in your own words.", actions: _jsx(Button, { variant: "primary", asChild: true, children: _jsxs(Link, { to: newHornPath(datastoreId), children: [_jsx(Plus, { size: 16, "aria-hidden": "true" }), "New Horn"] }) }) }), audiences.length > 1 ? (_jsx("div", { "data-audiences": true, className: "flex flex-wrap gap-2", children: audiences.map((audience) => (_jsx("button", { type: "button", "aria-pressed": audience === showing, onClick: () => setShowing(audience), className: cn("rounded-full border px-3 py-1 text-xs transition-colors", audience === showing
+                        ? "border-default-border bg-muted font-medium text-default-foreground"
+                        : "border-muted-border text-muted-foreground hover:text-default-foreground"), children: audience }, audience))) })) : null, listed.isPending ? (_jsx(Loading, { label: "Reading this datastore's Horns\u2026", rows: 3 })) : listed.isError ? (_jsx(ErrorState, { title: "The showcase could not be loaded", hint: "Try again in a moment. If it keeps happening, the data service may be down." })) : !isPresent(shown) ? (_jsx(EmptyState, { title: "Nothing here yet", hint: "Describe what you want to see, in your own words, and it is built for you from this datastore's data.", icon: _jsx(Columns3, { size: 20 }), action: _jsx(Button, { variant: "primary", size: "sm", asChild: true, children: _jsxs(Link, { to: newHornPath(datastoreId), children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), "Make your first Horn"] }) }) })) : (_jsx("ul", { "data-showcase": true, className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: shown.map((card) => {
+                    const age = card.capturedAt === undefined ? undefined : timeAgo(card.capturedAt);
+                    return (_jsx("li", { children: _jsxs(Link, { "data-showcase-card": card.slug, to: hornViewPath(datastoreId, card.slug), className: "flex h-full flex-col gap-3 rounded-xl border border-default-border bg-card p-4 transition-colors hover:bg-card/70", children: [card.screenshot === undefined ? null : (_jsx("span", { "data-showcase-shot": true, className: "block overflow-hidden rounded-lg border border-muted-border bg-muted", style: { aspectRatio: "16 / 10" }, children: _jsx("img", { src: screenshotSrc(datastoreId, card.screenshot), alt: "", loading: "lazy", className: "h-full w-full object-cover object-top" }) })), _jsxs("span", { className: "flex items-start justify-between gap-3", children: [_jsx("span", { className: "text-sm font-medium text-default-foreground", children: card.title }), card.details?.audience ? (_jsx("span", { "data-audience": card.details.audience, className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground", children: card.details.audience })) : null] }), card.details?.summary ? (_jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: card.details.summary })) : null, _jsxs("span", { className: "mt-auto flex flex-col gap-1.5 pt-1", children: [isPresent(card.details?.sources) ? (_jsxs("span", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: "Reads" }), card.details.sources.map((source) => (_jsx("span", { className: "rounded-md border border-muted-border px-1.5 py-0.5 text-[11px] text-default-foreground", children: source }, source)))] })) : null, age === undefined ? null : (_jsx("span", { "data-showcase-age": true, className: "text-[11px] text-muted-foreground", children: `as of ${age}` }))] })] }) }, card.slug));
+                }) }))] }));
+}

package/dist/app/variable-bar.d.ts

@@ -0,0 +1,6 @@
+import type { Horn } from "@manta-eu/horns";
+type VariableBarProps = {
+    horn: Horn;
+};
+export declare function VariableBar(props: VariableBarProps): import("react").JSX.Element | undefined;
+export {};

package/dist/app/variable-bar.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Input } from "@manta-eu/react";
+import { variablesFromSearch } from "@manta-eu/horns/render";
+import { useSearchParams } from "react-router";
+import { isRecord } from "@manta-eu/horns";
+/** The two ends of a range, which is what a `dateRange` value is. */
+function isRange(value) {
+    return isRecord(value) && typeof value["start"] === "string" && typeof value["end"] === "string";
+}
+/** The span a `dateRange` puts in one parameter, which is the text the input shows. */
+function textOf(value) {
+    if (!isPresent(value))
+        return "";
+    if (isRange(value))
+        return `${value.start}..${value.end}`;
+    return String(value);
+}
+export function VariableBar(props) {
+    const { horn } = props;
+    const [search, setSearch] = useSearchParams();
+    const shared = horn.variables.filter((variable) => isPresent(variable.urlParam));
+    if (!isPresent(shared))
+        return undefined;
+    // What the URL sets, which is what the snapshot is built with; a variable it does not name keeps its default.
+    const set = variablesFromSearch(horn, search.toString());
+    const write = (variable, value) => {
+        const next = new URLSearchParams(search);
+        const param = variable.urlParam ?? "";
+        const trimmed = value.trim();
+        if (!isPresent(trimmed))
+            next.delete(param);
+        else
+            next.set(param, trimmed);
+        setSearch(next, { replace: true });
+    };
+    return (_jsx("form", { "data-variable-bar": true, className: "flex min-w-0 items-center gap-3", onSubmit: (event) => event.preventDefault(), children: shared.map((variable) => {
+            const current = textOf(set[variable.id] ?? variable.default);
+            const values = variable.options && "values" in variable.options ? variable.options.values : undefined;
+            return (_jsxs("label", { className: "flex items-center gap-2 text-xs whitespace-nowrap text-muted-foreground", children: [variable.label, isPresent(values) ? (_jsxs("select", { "aria-label": variable.label, className: "h-8 rounded-md border border-default-border bg-card px-2 text-sm text-default-foreground", value: current, onChange: (event) => write(variable, event.target.value), children: [_jsx("option", { value: "", children: "All" }), values.map((value) => (_jsx("option", { value: String(value), children: String(value) }, String(value))))] })) : (_jsx(Input, { className: "h-8 w-44", "aria-label": variable.label, value: current, placeholder: variable.type === "dateRange" ? "2026-01-01..2026-02-01" : undefined, onChange: (event) => write(variable, event.target.value) }))] }, variable.id));
+        }) }));
+}

package/dist/client.d.ts

@@ -0,0 +1,10 @@
+import { type ShapeCatalogSource } from "./lib/shapes/catalog";
+import "./app/globals.css";
+export type MountHornsOptions = {
+    /** The realm's shapes. Horns ships none: they describe a deployment's data model, not the library's. */
+    shapes: ShapeCatalogSource;
+    /** Defaults to `#app`, which is what this package's own document declares. */
+    container?: HTMLElement;
+};
+/** Mount Horns as a whole page. A host with a router of its own splices `hornsRoutes()` in instead. */
+export declare function mountHorns({ shapes, container }: MountHornsOptions): void;

package/dist/client.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
+import { ErrorBoundary } from "@sentry/react";
+import { AppRoutes } from "./app/routes";
+import { MantaSessionProvider } from "./lib/manta/session";
+import { provideShapeCatalog } from "./lib/shapes/catalog";
+import { initSentry } from "./lib/telemetry/sentry";
+import "./app/globals.css";
+function AppCrashed() {
+    return (_jsx("main", { className: "grid min-h-screen place-items-center p-8 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Something went wrong" }), _jsx("p", { className: "mt-2 text-sm opacity-70", children: "Reload the page to try again." })] }) }));
+}
+/** Mount Horns as a whole page. A host with a router of its own splices `hornsRoutes()` in instead. */
+export function mountHorns({ shapes, container }) {
+    provideShapeCatalog(shapes);
+    initSentry();
+    const root = container ?? document.getElementById("app");
+    if (!root)
+        throw new Error("mountHorns found no container: pass one, or give the document an #app element.");
+    createRoot(root).render(_jsx(StrictMode, { children: _jsx(ErrorBoundary, { fallback: _jsx(AppCrashed, {}), children: _jsx(BrowserRouter, { children: _jsx(MantaSessionProvider, { children: _jsx(AppRoutes, {}) }) }) }) }));
+}

package/dist/components/app-shell.d.ts

@@ -0,0 +1 @@
+export declare function AppShell(): import("react").JSX.Element;

package/dist/components/app-shell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link, Outlet, useLocation, useParams } from "react-router";
+import { Boxes, Columns3, Database, LayoutGrid, Sigma } from "lucide-react";
+import { MainContent, MantaLogo, NavUser, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, } from "@manta-eu/react";
+import { hornsPath, rulesPath, shapesPath, showcasePath } from "../app/paths";
+import { useMantaSession } from "../lib/manta/session";
+function NavLink({ to, icon, label, active }) {
+    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: active, tooltip: label, children: _jsxs(Link, { to: to, "aria-current": active ? "page" : undefined, children: [icon, _jsx("span", { children: label })] }) }) }));
+}
+export function AppShell() {
+    const { datastoreId } = useParams();
+    const { pathname } = useLocation();
+    const { user, datastore, datastores } = useMantaSession();
+    const current = datastores.find((candidate) => candidate.id === datastoreId) ?? datastore;
+    const inDatastore = isPresent(datastoreId) && isPresent(current);
+    return (_jsxs(SidebarProvider, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsxs(Link, { to: "/", className: "flex items-center gap-2 px-2 py-1.5", "aria-label": "Manta Horns", children: [_jsx(MantaLogo, { size: 24 }), _jsx("span", { className: "font-semibold group-data-[collapsible=icon]:hidden", children: "Horns" })] }) }), _jsx(SidebarContent, { children: _jsxs("nav", { "aria-label": "Datastore", className: "flex flex-col gap-2", children: [isPresent(datastoreId) && inDatastore ? (_jsxs(_Fragment, { children: [_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: current.name }), _jsx(SidebarGroupContent, { children: _jsxs(SidebarMenu, { children: [_jsx(NavLink, { to: showcasePath(datastoreId), icon: _jsx(LayoutGrid, { "aria-hidden": "true" }), label: "Showcase", active: pathname === showcasePath(datastoreId) }), _jsx(NavLink, { to: hornsPath(datastoreId), icon: _jsx(Columns3, { "aria-hidden": "true" }), label: "Horns", active: pathname === hornsPath(datastoreId) })] }) })] }), _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "For builders" }), _jsx(SidebarGroupContent, { children: _jsxs(SidebarMenu, { children: [_jsx(NavLink, { to: shapesPath(datastoreId), icon: _jsx(Boxes, { "aria-hidden": "true" }), label: "Data shapes", active: pathname.startsWith(shapesPath(datastoreId)) }), _jsx(NavLink, { to: rulesPath(datastoreId), icon: _jsx(Sigma, { "aria-hidden": "true" }), label: "Rules", active: pathname.startsWith(rulesPath(datastoreId)) })] }) })] })] })) : null, _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "All datastores" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(NavLink, { to: "/", icon: _jsx(Database, { "aria-hidden": "true" }), label: `Datastores (${datastores.length})`, active: pathname === "/" }) }) })] })] }) }), _jsx(SidebarFooter, { children: _jsx(NavUser, { name: user?.name ?? user?.email ?? "Signed in", currentDatastore: { name: current?.name ?? "No datastore" }, onNavigateToAccount: () => window.location.assign("/"), onLogout: () => window.location.assign("/logout") }) })] }), _jsx(MainContent, { className: "pb-8", children: _jsxs("div", { className: "flex w-full flex-col gap-4 px-4 sm:px-6", children: [_jsx(SidebarTrigger, { "aria-label": "Toggle Sidebar" }), _jsx(Outlet, {})] }) })] }));
+}

package/dist/components/catalog-card-body.d.ts

@@ -0,0 +1,8 @@
+import type { SnapshotView } from "@manta-eu/horns/render";
+type CatalogCardBodyProps = {
+    content: Extract<SnapshotView["content"], {
+        lane: "component";
+    }>;
+};
+export declare function CatalogCardBody({ content }: CatalogCardBodyProps): import("react").JSX.Element;
+export {};

package/dist/components/catalog-card-body.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader } from "@manta-eu/react";
+import { isPresent } from "@manta-eu/lib/present";
+import { createNodeRouter, useEntityNodes } from "@manta-eu/react/ldo-ui";
+// The card fetches its own entity against the SPARQL context this app mounts, so the snapshot carries IRIs
+// rather than rows — and a card draws in a browser only, as a written view does.
+// `wrap`/`fallback` are for the graph canvas; only `getEntityView` is wanted here.
+const router = createNodeRouter({
+    wrap: () => () => null,
+    fallback: () => null,
+});
+export function CatalogCardBody({ content }) {
+    const { nodesByIri, isLoading } = useEntityNodes([...content.iris]);
+    if (isLoading)
+        return _jsx(Loader, {});
+    if (!isPresent(content.iris)) {
+        return _jsx("p", { className: "text-muted-foreground m-0 text-sm", children: "Nothing to show here yet." });
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [content.iris.map((iri) => {
+                const node = nodesByIri.get(iri);
+                if (node === undefined)
+                    return null;
+                // By the entity's own type, which is how the design system itself chooses. The snapshot's `component`
+                // records what the Studio pinned; where the two could disagree, the package's own routing wins,
+                // because it is what knows which card can draw a given type today.
+                const View = router.getEntityView(node.data.type);
+                return View === undefined ? null : _jsx(View, { data: node.data }, iri);
+            }), content.truncated ? (_jsxs("p", { className: "text-muted-foreground m-0 text-xs", children: ["More than this fit; showing the first ", content.iris.length, "."] })) : null] }));
+}

package/dist/components/catalog-card-view.d.ts

@@ -0,0 +1,2 @@
+import type { HornSnapshotViewProps } from "@manta-eu/horns-kit";
+export declare const catalogCardView: NonNullable<HornSnapshotViewProps["catalogCard"]>;

package/dist/components/catalog-card-view.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
+import { Loader } from "@manta-eu/react";
+import { MantaSparqlProvider } from "../lib/manta/providers";
+// Behind `lazy`: the body pulls in the graph routing and every typed entity card.
+const CatalogCardBody = lazy(async () => {
+    const body = await import("./catalog-card-body");
+    return { default: body.CatalogCardBody };
+});
+// The provider comes with it, because a card fetches its own entity and the page it draws on may have no
+// providers of its own — a server-rendered Horn document hydrates embeds and nothing else, so a shared link
+// with a card on it spun for ever without this.
+export const catalogCardView = (content, _view, context) => (_jsx(MantaSparqlProvider, { datastoreId: context.datastoreId, children: _jsx(Suspense, { fallback: _jsx(Loader, {}), children: _jsx(CatalogCardBody, { content: content }) }) }));

package/dist/components/chat-column.d.ts

@@ -0,0 +1,22 @@
+import type { ArrowUp } from "lucide-react";
+export type ChatTurn = {
+    role: "user" | "assistant";
+    content: string;
+};
+type ChatColumnProps = {
+    title: string;
+    subtitle: string;
+    starters: readonly {
+        id: string;
+        title: string;
+    }[];
+    turns: readonly ChatTurn[];
+    /** What the turn is doing, as it happens. Empty when nothing is running. */
+    progress: readonly string[];
+    pending: boolean;
+    placeholder: string;
+    submitIcon: typeof ArrowUp;
+    onSend: (text: string) => void;
+};
+export declare function ChatColumn(props: ChatColumnProps): import("react").JSX.Element;
+export {};

package/dist/components/chat-column.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { isPresent } from "@manta-eu/lib/present";
+import { Sparkles } from "lucide-react";
+import { ChatConversationStarters, ChatInput, ChatInputSubmit, ChatInputTextarea, ChatMessage, ChatPanel, ChatReasoning, ChatWelcome, chatPanelWidth, } from "@manta-eu/react";
+export function ChatColumn(props) {
+    const { title, subtitle, starters, turns, progress, pending, placeholder, submitIcon, onSend } = props;
+    const scroller = useRef(null);
+    // A conversation's newest line is the one being read, so the panel follows it down.
+    useEffect(() => {
+        const element = scroller.current;
+        if (isPresent(element))
+            element.scrollTop = element.scrollHeight;
+    }, [turns, progress]);
+    return (_jsxs("div", { className: "sticky top-4 flex min-w-0 flex-col gap-3", 
+        // The column is as wide as the layout gives it and no wider than the panel's own width. The height is
+        // the one thing the utilities cannot say — no compiled max-height is a viewport — and without it the
+        // panel hugs its content, so the composer walks down the page as the conversation grows.
+        style: { maxWidth: chatPanelWidth, height: "calc(100svh - 11rem)" }, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-default-foreground", children: [_jsx(Sparkles, { size: 16, "aria-hidden": "true" }), title] }), _jsx(ChatPanel, { children: _jsxs("div", { ref: scroller, "data-chat-history": true, className: "flex flex-col gap-3 p-4", children: [!isPresent(turns) ? (_jsxs(_Fragment, { children: [_jsx(ChatWelcome, { channel: "MANTA", title: subtitle, subtitle: "" }), _jsx(ChatConversationStarters, { starters: starters.map((starter) => ({ id: starter.id, title: starter.title })), onStarterClick: (starter) => onSend(starter.title) })] })) : (turns.map((turn, index) => (_jsx(ChatMessage, { role: turn.role, children: turn.content }, index)))), isPresent(progress) ? (_jsx(ChatReasoning, { phase: "pending", text: "Working", items: progress.map((line) => ({ icon: null, title: line })) })) : null] }) }), _jsxs(ChatInput, { onSubmit: (value) => onSend(value), children: [_jsx(ChatInputTextarea, { placeholder: placeholder, "aria-label": placeholder }), _jsx(ChatInputSubmit, { icon: submitIcon, "aria-label": "Send", isLoading: pending, disabled: pending })] })] }));
+}

package/dist/components/page-header.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export declare function PageHeader({ title, description, meta, actions, }: {
+    title: string;
+    description?: string;
+    meta?: ReactNode;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Card({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CardTitle({ children, aside }: {
+    children: ReactNode;
+    aside?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/page-header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+export function PageHeader({ title, description, meta, actions, }) {
+    return (_jsxs("header", { "data-page-header": true, className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-semibold text-default-foreground", children: title }), meta] }), isPresent(description) ? _jsx("p", { className: "max-w-2xl text-sm text-muted-foreground", children: description }) : null] }), isPresent(actions) ? _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null] }));
+}
+export function Card({ children, className }) {
+    return (_jsx("section", { className: `rounded-lg border border-default-border bg-card p-5 ${className ?? ""}`, children: children }));
+}
+export function CardTitle({ children, aside }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [_jsx("h2", { className: "text-base font-medium text-default-foreground", children: children }), isPresent(aside) ? _jsx("span", { className: "text-sm text-muted-foreground", children: aside }) : null] }));
+}

package/dist/components/plan-runs.d.ts

@@ -0,0 +1,28 @@
+import type { Realm } from "@manta-eu/horns";
+import { type SnapshotPlan } from "@manta-eu/horns/render";
+import { type PlanActions } from "@manta-eu/horns-kit";
+export type PlanRuns = {
+    actions: PlanActions;
+    /** The plan waiting for the viewer to say yes to a real run. */
+    confirming: SnapshotPlan | undefined;
+    confirm: () => void;
+    cancel: () => void;
+    problem: string | undefined;
+    dismiss: () => void;
+};
+/**
+ * Previews and runs of the action plans a Horn shows. A preview starts straight away: it changes nothing. A real
+ * run waits for a yes in `PlanRunDialog`. Either way the graph is then asked every few seconds how the run went,
+ * and a real run that finished redraws the Horn, because the things it changed now look different.
+ */
+export declare function usePlanRuns(args: {
+    datastoreId: string;
+    realm: Realm;
+    onChanged: () => void;
+}): PlanRuns;
+type PlanRunDialogProps = {
+    runs: PlanRuns;
+    labels: Readonly<Record<string, string>>;
+};
+export declare function PlanRunDialog(props: PlanRunDialogProps): import("react").JSX.Element;
+export {};