@manta-eu/horns-client 0.1.0 → 0.1.1

package/dist/app/plans-page.js

@@ -0,0 +1,59 @@
+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 } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
+import { ChevronRight } from "lucide-react";
+import { Badge, Skeleton } from "@manta-eu/react";
+import { planNameFromIri, plansQuery, readPlans, planStatusQuery, readPlanStatus, } from "@manta-eu/horns/render";
+import { newHornAboutPath } from "./paths";
+import { Card, CardTitle, PageHeader } from "../components/page-header";
+import { DatastoreMissing, EmptyState, ErrorState } from "../components/states";
+import { useSparqlSelect } from "../lib/manta/sparql-select";
+import { shapesRealm } from "../lib/shapes/catalog";
+// The work Manta has drafted, and the way to make a Horn out of one. A plan is a named graph, so it has no
+// page of its own here: the Horn is the page, and this is where you start one.
+const stateWords = {
+    draft: { text: "Not run yet", variant: "info" },
+    running: { text: "Running", variant: "info" },
+    completed: { text: "Done", variant: "success" },
+    failed: { text: "Did not go through", variant: "warning" },
+    "timed-out": { text: "Took too long", variant: "warning" },
+};
+// Not the SDK's `PlanRow` (`@manta-eu/react/plan-row`): its `PlanRowPlan` wants `actionCount`,
+// `completedActionCount`, `subjects` and a `GQLIntegration`, which come from agents' GraphQL — and the
+// browser gets no GraphQL route (AGENTS.md §Writes). This list reads the plans graph over SPARQL, so it
+// holds the IRI, the name and the state and nothing that would fill those fields honestly.
+function ListedPlan({ plan }) {
+    const said = stateWords[plan.status.state];
+    return (_jsxs("li", { "data-plan": plan.iri, className: "flex flex-wrap items-center justify-between gap-3 px-4 py-2.5", children: [_jsx("span", { className: "flex min-w-0 flex-col", children: _jsx("span", { className: "text-default-foreground truncate text-sm font-medium", children: plan.status.name ?? planNameFromIri(plan.iri) ?? "Untitled plan" }) }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: said.variant, children: said.text }), _jsxs(Link, { className: "text-muted-foreground hover:text-default-foreground flex items-center gap-1 text-sm", to: newHornAboutPath(plan.iri), children: ["Make a Horn from this", _jsx(ChevronRight, { size: 14, "aria-hidden": "true" })] })] })] }));
+}
+function Plans({ datastoreId }) {
+    const select = useSparqlSelect();
+    const realm = shapesRealm();
+    const listed = useQuery({
+        queryKey: ["plans", datastoreId],
+        queryFn: async ({ signal }) => {
+            const iris = readPlans(await select(plansQuery(realm), signal));
+            if (iris.length === 0)
+                return [];
+            // Names and states come from the plans graph, not from the IRIs, which say nothing.
+            const statuses = readPlanStatus(await select(planStatusQuery(realm, iris), signal));
+            return iris.map((iri) => ({ iri, status: statuses.get(iri) ?? { state: "draft" } }));
+        },
+    });
+    if (listed.isPending)
+        return _jsx(Skeleton, { className: "h-64 w-full" });
+    if (listed.isError)
+        return _jsx(ErrorState, { title: "The plans could not be read.", hint: listed.error.message });
+    if (!isPresent(listed.data)) {
+        return (_jsx(EmptyState, { title: "No action plans yet", hint: "Manta drafts these when a rule finds work to do. When one appears, you can make a Horn from it here." }));
+    }
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: "What Manta has drafted" }), _jsx("ul", { className: "divide-default-border divide-y", children: listed.data.map((plan) => (_jsx(ListedPlan, { plan: plan }, plan.iri))) })] }));
+}
+export function PlansPage() {
+    const { datastoreId } = useActiveDatastore();
+    if (!isPresent(datastoreId))
+        return _jsx(DatastoreMissing, {});
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: "Action plans", description: "The changes Manta has worked out and not made. Open one as a Horn to see what it would do." }), _jsx(Plans, { datastoreId: datastoreId })] }));
+}

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

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

package/dist/app/reference-page.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { hornSchema } from "@manta-eu/horns";
+import { buildHornSnapshot } from "@manta-eu/horns/render";
+import { HornSnapshotView } from "@manta-eu/horns-kit";
+import { writtenHornView } from "../components/written-horn-view";
+import { catalogCardView } from "../components/catalog-card-view";
+import { useExplainDialog } from "../components/explain-dialog";
+import { ErrorState, Loading } from "../components/states";
+import { PageHeader } from "../components/page-header";
+import { useHornVariables } from "../lib/horn-variables";
+import { fakeSparqlSelect, referenceEntity } from "../lib/reference/fake-sparql";
+import { appTheme } from "../lib/theme";
+// The reference Horn from docs/standard.md, drawn against a datastore that does not exist. Dev only, and the
+// document and its fixture are imported lazily so neither reaches a deployed bundle.
+//
+// It is the whole real path — the binding compiles, the label pass runs, the written source is transpiled and
+// bound to the design system — with `select` swapped for a stub. That is what makes it worth looking at: what
+// is on screen is what a datastore holding this data would show.
+/** Parsed once: the document is a static import and re-parsing it per render would rebuild every view. */
+function useReferenceHorn() {
+    return useMemo(async () => {
+        const document = (await import("../../../../docs/reference/supply-chain-360.horn.json")).default;
+        return hornSchema.parse(document);
+    }, []);
+}
+export function ReferencePage() {
+    const explain = useExplainDialog();
+    const pending = useReferenceHorn();
+    const loaded = useQuery({ queryKey: ["reference-horn-document"], queryFn: () => pending });
+    // What the page is narrowed to, in the URL. A view sets one and every binding taking it as a parameter is
+    // asked again, which is the whole of how one card filters another.
+    const filters = useHornVariables(loaded.data);
+    const drawn = useQuery({
+        enabled: loaded.data !== undefined,
+        // The page it drew stays up while the next one is asked for, so narrowing does not blink.
+        placeholderData: keepPreviousData,
+        queryKey: ["reference-horn", filters.values],
+        queryFn: async ({ signal }) => {
+            const horn = loaded.data;
+            if (horn === undefined)
+                throw new Error("The reference Horn has not loaded.");
+            return await buildHornSnapshot({
+                horn,
+                select: fakeSparqlSelect,
+                variables: { entity: referenceEntity, ...filters.values },
+                // Plans come from a datastore, and there is none.
+                plans: false,
+                signal,
+            });
+        },
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: "Supply Chain 360", description: "The reference Horn from docs/standard.md, drawn against a fixture. No datastore is read." }), drawn.isPending && drawn.data === undefined ? (_jsx(Loading, { label: "Drawing the reference Horn\u2026", rows: 4 })) : drawn.isError ? (_jsx(ErrorState, { title: "The reference Horn could not be drawn", hint: drawn.error.message })) : (_jsxs("div", { "data-horn-preview": true, className: "w-full overflow-hidden rounded-xl", children: [_jsx(HornSnapshotView, { snapshot: drawn.data, mode: "page", theme: appTheme(), writtenView: writtenHornView, catalogCard: catalogCardView, explain: explain.open, onVariableChange: filters.set }), explain.dialog] }))] }));
+}

package/dist/app/routes.js

@@ -1,21 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Navigate, Outlet, Route, Routes } from "react-router";
+import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
 import { AppShell } from "../components/app-shell";
 import { HomePage } from "./home-page";
 import { HornPage } from "./horn-page";
 import { HornsPage } from "./horns-page";
 import { HornViewPage } from "./horn-view-page";
 import { NewHornPage } from "./new-horn-page";
-import { SessionGate } from "./session-gate";
 import { RulePage } from "./rule-page";
+import { PlansPage } from "./plans-page";
 import { RulesPage } from "./rules-page";
 import { ShapeEntityPage } from "./shape-entity-page";
 import { ShapeZooPage } from "./shape-zoo-page";
 import { ShapesPage } from "./shapes-page";
 import { ShowcasePage } from "./showcase-page";
-function GatedOutlet() {
-    return (_jsx(SessionGate, { children: _jsx(Outlet, {}) }));
-}
+import { ReferencePage } from "./reference-page";
 /**
  * Horns' routes as `<Route>` children, for a host that splices them into its own `<Routes>`. A nested
  * `<Routes>` would rebase every path on its parent's match, so a host mounting Horns under a prefix would
@@ -25,7 +24,10 @@ function GatedOutlet() {
  * of its own leaves it off and keeps its own 404.
  */
 export function hornsRoutes({ catchAll = false } = {}) {
-    return (_jsxs(Route, { element: _jsx(GatedOutlet, {}), children: [_jsx(Route, { path: "d/:datastoreId/horns/new", element: _jsx(NewHornPage, {}) }), _jsx(Route, { path: "d/:datastoreId/horns/:slug", element: _jsx(HornPage, {}) }), _jsxs(Route, { element: _jsx(AppShell, {}), children: [_jsx(Route, { path: "d/:datastoreId/horns", element: _jsx(HornsPage, {}) }), _jsx(Route, { path: "d/:datastoreId/horns/:slug/view", element: _jsx(HornViewPage, {}) }), _jsx(Route, { path: "d/:datastoreId/showcase", element: _jsx(ShowcasePage, {}) }), _jsx(Route, { path: "d/:datastoreId/rules", element: _jsx(RulesPage, {}) }), _jsx(Route, { path: "d/:datastoreId/rules/:rule", element: _jsx(RulePage, {}) }), _jsx(Route, { path: "d/:datastoreId/shapes", element: _jsx(ShapesPage, {}) }), _jsx(Route, { path: "d/:datastoreId/shapes/:schema", element: _jsx(ShapeZooPage, {}) }), _jsx(Route, { path: "d/:datastoreId/shapes/:schema/entity", element: _jsx(ShapeEntityPage, {}) }), catchAll ? _jsx(Route, { index: true, element: _jsx(HomePage, {}) }) : null] }), catchAll ? _jsx(Route, { path: "*", element: _jsx(Navigate, { to: "/", replace: true }) }) : null] }));
+    return (
+    // Here rather than at the mount: a host splicing these into its own router gets it too, and a Horn page
+    // reads its variables through nuqs on every render — without an adapter that throws rather than degrades.
+    _jsxs(Route, { element: _jsx(NuqsAdapter, { children: _jsx(Outlet, {}) }), children: [_jsx(Route, { path: "horns/new", element: _jsx(NewHornPage, {}) }), _jsx(Route, { path: "horns/:slug", element: _jsx(HornPage, {}) }), _jsxs(Route, { element: _jsx(AppShell, {}), children: [_jsx(Route, { path: "horns", element: _jsx(HornsPage, {}) }), _jsx(Route, { path: "horns/:slug/view", element: _jsx(HornViewPage, {}) }), _jsx(Route, { path: "horns/showcase", element: _jsx(ShowcasePage, {}) }), _jsx(Route, { path: "horns/plans", element: _jsx(PlansPage, {}) }), _jsx(Route, { path: "horns/rules", element: _jsx(RulesPage, {}) }), _jsx(Route, { path: "horns/rules/:rule", element: _jsx(RulePage, {}) }), _jsx(Route, { path: "horns/shapes", element: _jsx(ShapesPage, {}) }), _jsx(Route, { path: "horns/shapes/:schema", element: _jsx(ShapeZooPage, {}) }), _jsx(Route, { path: "horns/shapes/:schema/entity", element: _jsx(ShapeEntityPage, {}) }), import.meta.env.DEV ? _jsx(Route, { path: "horns/reference", element: _jsx(ReferencePage, {}) }) : null, catchAll ? _jsx(Route, { index: true, element: _jsx(HomePage, {}) }) : null] }), catchAll ? _jsx(Route, { path: "*", element: _jsx(Navigate, { to: "/", replace: true }) }) : null] }));
 }
 export function AppRoutes() {
     return _jsx(Routes, { children: hornsRoutes({ catchAll: true }) });

package/dist/app/rule-page.js

@@ -1,24 +1,26 @@
 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 { useParams } from "react-router";
-import { Badge, Skeleton } from "@manta-eu/react";
+import { Link, useParams } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
+import { Badge, Button, Skeleton } from "@manta-eu/react";
 import { buildHornSnapshot, maxSnapshotRows } from "@manta-eu/horns/render";
 import { standaloneHorn } from "@manta-eu/horns/shapes";
 import { rulesQuery, readRules } from "@manta-eu/horns/shapes";
 import { ruleCoverage, ruleHornView, ruleViewId } from "@manta-eu/horns/rules";
 import { Card, CardTitle, PageHeader } from "../components/page-header";
+import { newHornAboutPath } from "./paths";
 import { DatastoreMissing, EmptyState, ErrorState } from "../components/states";
-import { MantaSparqlProvider } from "../lib/manta/providers";
-import { useMantaSession } from "../lib/manta/session";
-import { browserSparqlSelect } from "../lib/manta/sparql-select";
+import { useSparqlSelect } from "../lib/manta/sparql-select";
 import { shapesRealm } from "../lib/shapes/catalog";
 import { SnapshotViewBody } from "../components/snapshot-view";
+import { useAuthContext } from "@manta-eu/react/providers/AuthContext";
 // One rule, drawn. The view is built from the rule's own tree, so what is on screen is what the rule does —
 // and the Datalog sits under it, because a person judging the view has to be able to check it against the
 // rule rather than trust the parser.
 const ruleRowLimit = 60;
 function Drawn({ entry, datastoreId }) {
+    const select = useSparqlSelect();
     const realm = shapesRealm();
     const spec = entry.spec;
     const snapshot = useQuery({
@@ -36,7 +38,7 @@ function Drawn({ entry, datastoreId }) {
                     realm,
                     datastoreId,
                 }),
-                select: browserSparqlSelect(datastoreId),
+                select: select,
                 plans: false,
                 rowLimit: Math.min(ruleRowLimit, maxSnapshotRows),
                 signal,
@@ -56,10 +58,11 @@ function Drawn({ entry, datastoreId }) {
     return _jsx(SnapshotViewBody, { snapshot: snapshot.data, view: view });
 }
 function Rule({ datastoreId, ruleId }) {
+    const select = useSparqlSelect();
     const realm = shapesRealm();
     const rules = useQuery({
         queryKey: ["rules", datastoreId],
-        queryFn: async ({ signal }) => readRules(await browserSparqlSelect(datastoreId)(rulesQuery(realm, [], 200), signal)),
+        queryFn: async ({ signal }) => readRules(await select(rulesQuery(realm, [], 200), signal)),
     });
     if (rules.isPending)
         return _jsx(Skeleton, { className: "h-64 w-full" });
@@ -70,15 +73,19 @@ function Rule({ datastoreId, ruleId }) {
         return _jsx(EmptyState, { title: "This datastore runs no rule by that name." });
     return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: entry.spec?.title ?? ruleId, description: entry.spec === undefined
                     ? "Read, but it describes no view."
-                    : `What this rule works out, over the rows its own body selects.`, ...(entry.spec?.kind === "plan" ? { meta: _jsx(Badge, { variant: "info", children: "Drafts work" }) } : {}) }), _jsx(Drawn, { entry: entry, datastoreId: datastoreId }), _jsxs(Card, { children: [_jsx(CardTitle, { children: "The rule itself" }), _jsx("pre", { className: "text-muted-foreground overflow-auto px-4 pb-4 font-mono text-xs whitespace-pre-wrap", children: entry.rule.body })] })] }));
+                    : `What this rule works out, over the rows its own body selects.`, ...(entry.spec?.kind === "plan" ? { meta: _jsx(Badge, { variant: "info", children: "Drafts work" }) } : {}), actions: 
+                // The same Horn this page draws, opened in the Studio to change and keep. Unsaved until somebody
+                // saves it, and `about` is what makes it the Horn for this rule from then on.
+                entry.spec === undefined ? undefined : (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(Link, { to: newHornAboutPath(entry.rule.iri), children: "Make a Horn from this" }) })) }), _jsx(Drawn, { entry: entry, datastoreId: datastoreId }), _jsxs(Card, { children: [_jsx(CardTitle, { children: "The rule itself" }), _jsx("pre", { className: "text-muted-foreground overflow-auto px-4 pb-4 font-mono text-xs whitespace-pre-wrap", children: entry.rule.body })] })] }));
 }
 export function RulePage() {
-    const { datastoreId, rule } = useParams();
-    const { datastores } = useMantaSession();
+    const { datastoreId } = useActiveDatastore();
+    const { rule } = useParams();
+    const { datastores = [] } = useAuthContext();
     if (!isPresent(datastoreId) || !datastores.some((one) => one.id === datastoreId)) {
         return _jsx(DatastoreMissing, {});
     }
     if (!isPresent(rule))
         return _jsx(EmptyState, { title: "No rule was named." });
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastoreId, children: _jsx(Rule, { datastoreId: datastoreId, ruleId: rule }) }));
+    return _jsx(Rule, { datastoreId: datastoreId, ruleId: rule });
 }

package/dist/app/rules-page.js

@@ -1,7 +1,8 @@
 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 { Link } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { ChevronRight } from "lucide-react";
 import { Badge, Progress, Skeleton } from "@manta-eu/react";
 import { rulesQuery, readRules } from "@manta-eu/horns/shapes";
@@ -9,10 +10,9 @@ import { ruleCoverage, ruleViewId } from "@manta-eu/horns/rules";
 import { rulePath } 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 { useSparqlSelect } from "../lib/manta/sparql-select";
 import { shapesRealm } from "../lib/shapes/catalog";
+import { useAuthContext } from "@manta-eu/react/providers/AuthContext";
 // The other half of what a datastore knows. A shape says what a thing is and the shapes page covers those;
 // a rule says what Manta worked out about it, and until this page nothing drew one.
 function percentOf(part, whole) {
@@ -20,14 +20,14 @@ function percentOf(part, whole) {
 }
 function StatusBadge({ entry }) {
     if (entry.status === "covered") {
-        return entry.spec?.kind === "plan" ? _jsx(Badge, { variant: "info", children: "Drafts work" }) : _jsx(Badge, { variant: "success", children: "View" });
+        return entry.spec?.kind === "plan" ? (_jsx(Badge, { variant: "info", children: "Drafts work" })) : (_jsx(Badge, { variant: "success", children: "View" }));
     }
     // Two different gaps: one the parser could close, one Datalog itself will not.
     if (entry.status === "unparsed")
         return _jsx(Badge, { variant: "warning", children: "Not read yet" });
     return _jsx(Badge, { variant: "secondary", children: "No query" });
 }
-function RuleRow({ entry, datastoreId }) {
+function RuleRow({ entry }) {
     const spec = entry.spec;
     const derived = spec?.derives === undefined
         ? undefined
@@ -43,14 +43,14 @@ function RuleRow({ entry, datastoreId }) {
             .filter((part) => part !== undefined)
             .join(" · ")
         : (entry.issues?.[0] ?? "No view.");
-    return (_jsxs("li", { "data-rule": entry.rule.iri, "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: "text-default-foreground truncate text-sm font-medium", children: spec?.title ?? entry.rule.iri.slice(entry.rule.iri.lastIndexOf("#") + 1) }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: said })] }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx(StatusBadge, { entry: entry }), spec ? (_jsxs(Link, { className: "text-muted-foreground hover:text-default-foreground flex items-center gap-1 text-sm", to: rulePath(datastoreId, ruleViewId(entry.rule.iri)), children: ["Look at it", _jsx(ChevronRight, { size: 14, "aria-hidden": "true" })] })) : null] })] }));
+    return (_jsxs("li", { "data-rule": entry.rule.iri, "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: "text-default-foreground truncate text-sm font-medium", children: spec?.title ?? entry.rule.iri.slice(entry.rule.iri.lastIndexOf("#") + 1) }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: said })] }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx(StatusBadge, { entry: entry }), spec ? (_jsxs(Link, { className: "text-muted-foreground hover:text-default-foreground flex items-center gap-1 text-sm", to: rulePath(ruleViewId(entry.rule.iri)), children: ["Look at it", _jsx(ChevronRight, { size: 14, "aria-hidden": "true" })] })) : null] })] }));
 }
 function Rules({ datastoreId }) {
+    const select = useSparqlSelect();
     const realm = shapesRealm();
     const rules = useQuery({
         queryKey: ["rules", datastoreId],
         queryFn: async ({ signal }) => {
-            const select = browserSparqlSelect(datastoreId);
             // Every rule, not a search: this page is the coverage, so it cannot filter by a word.
             return readRules(await select(rulesQuery(realm, [], allRules), signal));
         },
@@ -60,15 +60,15 @@ function Rules({ datastoreId }) {
     if (rules.isError)
         return _jsx(ErrorState, { title: "The rules could not be read.", hint: rules.error.message });
     const coverage = ruleCoverage({ rules: rules.data, realm });
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { children: [_jsx(CardTitle, { children: "Covered" }), _jsxs("div", { className: "flex items-center gap-3 px-4 pb-4", children: [_jsx(Progress, { value: percentOf(coverage.covered, coverage.total), className: "grow" }), _jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: `${coverage.covered} of ${coverage.total}` })] }), _jsx("p", { className: "text-muted-foreground px-4 pb-4 text-sm", children: `${coverage.plans} of them draft work rather than working a value out.` })] }), _jsxs(Card, { children: [_jsx(CardTitle, { children: "Every rule this datastore runs" }), _jsx("ul", { className: "divide-default-border border-default-border divide-y border-t", children: coverage.entries.map((entry) => (_jsx(RuleRow, { entry: entry, datastoreId: datastoreId }, `${entry.rule.iri}-${entry.rule.body.length}`))) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { children: [_jsx(CardTitle, { children: "Covered" }), _jsxs("div", { className: "flex items-center gap-3 px-4 pb-4", children: [_jsx(Progress, { value: percentOf(coverage.covered, coverage.total), className: "grow" }), _jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: `${coverage.covered} of ${coverage.total}` })] }), _jsx("p", { className: "text-muted-foreground px-4 pb-4 text-sm", children: `${coverage.plans} of them draft work rather than working a value out.` })] }), _jsxs(Card, { children: [_jsx(CardTitle, { children: "Every rule this datastore runs" }), _jsx("ul", { className: "divide-default-border border-default-border divide-y border-t", children: coverage.entries.map((entry) => (_jsx(RuleRow, { entry: entry }, `${entry.rule.iri}-${entry.rule.body.length}`))) })] })] }));
 }
 /** Enough for every rule a realm has; the query caps itself well below what a datastore holds. */
 const allRules = 200;
 export function RulesPage() {
-    const { datastoreId } = useParams();
-    const { datastores } = useMantaSession();
+    const { datastoreId } = useActiveDatastore();
+    const { datastores = [] } = useAuthContext();
     if (!isPresent(datastoreId) || !datastores.some((one) => one.id === datastoreId)) {
         return _jsx(DatastoreMissing, {});
     }
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: "Rules", description: "What Manta works out about this datastore, and whether it can be looked at." }), _jsx(MantaSparqlProvider, { datastoreId: datastoreId, children: _jsx(Rules, { datastoreId: datastoreId }) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: "Rules", description: "What Manta works out about this datastore, and whether it can be looked at." }), _jsx(Rules, { datastoreId: datastoreId })] }));
 }

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

@@ -2,6 +2,7 @@ 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, useSearchParams } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { shapeViewSpecs } from "@manta-eu/horns-kit";
 import { buildShapeDetail, shapeLinks } from "@manta-eu/horns/shapes";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@manta-eu/react";
@@ -9,9 +10,7 @@ import { shapeZooPath } from "./paths";
 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 { useSparqlSelect } from "../lib/manta/sparql-select";
 import { ldkitShapeCatalog, shapesRealm } from "../lib/shapes/catalog";
 const specOf = (schema) => shapeViewSpecs.find((spec) => spec.schema === schema);
 function Section({ page }) {
@@ -21,6 +20,7 @@ function Section({ page }) {
     return _jsx(SnapshotViewBody, { snapshot: page.snapshot, view: { ...view, title: page.section.title } });
 }
 function Detail({ datastoreId, schema, entity }) {
+    const select = useSparqlSelect();
     const realm = shapesRealm();
     const shape = ldkitShapeCatalog().shapes.find((candidate) => candidate.schema === schema);
     const spec = specOf(schema);
@@ -30,7 +30,6 @@ function Detail({ datastoreId, schema, entity }) {
         queryFn: async ({ signal }) => {
             if (!shape || !spec)
                 throw new Error("The shape has no view to open.");
-            const select = browserSparqlSelect(datastoreId);
             const links = await shapeLinks({ shape, shapes: ldkitShapeCatalog().shapes, realm, select, signal });
             return buildShapeDetail({ spec, links, specOf, realm, datastoreId, entity, select, signal });
         },
@@ -57,12 +56,11 @@ function Detail({ datastoreId, schema, entity }) {
     return (_jsxs(Tabs, { defaultValue: first.section.id, children: [_jsx(TabsList, { className: "flex flex-wrap", children: pages.map((page) => (_jsx(TabsTrigger, { value: page.section.id, children: page.section.title }, page.section.id))) }), pages.map((page) => (_jsx(TabsContent, { value: page.section.id, "data-detail-section": page.section.id, children: _jsx(Section, { page: page }) }, page.section.id)))] }));
 }
 export function ShapeEntityPage() {
-    const { datastoreId, schema } = useParams();
+    const { datastoreId } = useActiveDatastore();
+    const { schema } = useParams();
     const [params] = useSearchParams();
     const entity = params.get("iri");
-    const { datastores } = useMantaSession();
-    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
-    if (!isPresent(datastore) || !isPresent(schema) || !isPresent(entity))
+    if (!isPresent(datastoreId) || !isPresent(schema) || !isPresent(entity))
         return _jsx(DatastoreMissing, {});
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: schema.replace(/Schema$/, ""), description: entity, actions: _jsx(Link, { className: "text-sm text-muted-foreground hover:text-default-foreground", to: shapeZooPath(datastore.id, schema), children: "Back to zoo" }) }), _jsx(Detail, { datastoreId: datastore.id, schema: schema, entity: entity })] }) }));
+    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsx(PageHeader, { title: schema.replace(/Schema$/, ""), description: entity, actions: _jsx(Link, { className: "text-sm text-muted-foreground hover:text-default-foreground", to: shapeZooPath(schema), children: "Back to zoo" }) }), _jsx(Detail, { datastoreId: datastoreId, schema: schema, entity: entity })] }));
 }

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useQuery } from "@tanstack/react-query";
 import { isPresent } from "@manta-eu/lib/present";
 import { Link, useParams } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { ChevronRight } from "lucide-react";
 import { Badge } from "@manta-eu/react";
 import { shapeViewSpecs } from "@manta-eu/horns-kit";
@@ -11,9 +12,7 @@ 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 { useSparqlSelect } from "../lib/manta/sparql-select";
 import { ldkitShapeCatalog, shapesRealm } from "../lib/shapes/catalog";
 function Problems({ heading, problems }) {
     if (!isPresent(problems))
@@ -21,13 +20,14 @@ function Problems({ heading, problems }) {
     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 select = useSparqlSelect();
     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 }),
+        queryFn: ({ signal }) => buildShapeZoo({ spec, realm, datastoreId, select: select, signal }),
     });
     if (zoo.isPending)
         return _jsx(Loading, { label: "Sampling instances\u2026", rows: 4 });
@@ -39,20 +39,19 @@ function Zoo(props) {
     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: {
+    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(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))
+    const { datastoreId } = useActiveDatastore();
+    const { schema } = useParams();
+    if (!isPresent(datastoreId) || !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 })] })) }))] }) }));
+    return (_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(), 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: datastoreId, 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: datastoreId, spec: current, version: version })] })) }))] }));
 }

package/dist/app/shapes-page.js

@@ -1,7 +1,8 @@
 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 { Link } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { ChevronRight } from "lucide-react";
 import { Badge, Progress, Skeleton } from "@manta-eu/react";
 import { compactIri } from "@manta-eu/horns";
@@ -11,9 +12,7 @@ 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 { useSparqlSelect } 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;
@@ -27,16 +26,17 @@ function StatusBadge({ status }) {
         return _jsx(Badge, { variant: "info", children: "Drafted" });
     return _jsx(Badge, { variant: "secondary", children: "No view" });
 }
-function ShapeRow({ entry, realm, datastoreId, }) {
+function ShapeRow({ entry, realm }) {
     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)" }))] })] }));
+    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(shape.schema), children: entry.status === "curated" ? "Zoo" : "Zoo (draft)" }))] })] }));
 }
 function ShapeCoverageDashboard({ datastoreId }) {
+    const select = useSparqlSelect();
     const realm = shapesRealm();
     const catalog = ldkitShapeCatalog();
     const observed = useQuery({
         queryKey: ["observed-classes", datastoreId],
-        queryFn: async ({ signal }) => readObservedClasses(await browserSparqlSelect(datastoreId)(observedClassesQuery(realm), signal)),
+        queryFn: async ({ signal }) => readObservedClasses(await select(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.
@@ -47,7 +47,7 @@ function ShapeCoverageDashboard({ datastoreId }) {
             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));
+            return readInstanceCounts(await select(instanceCountsQuery(held), signal));
         },
     });
     const coverage = shapeCoverage({
@@ -61,15 +61,13 @@ function ShapeCoverageDashboard({ datastoreId }) {
     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
+                                        : ""] }), 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(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))) })] }));
+                                                        : ` · ${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 }, 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))
+    const { datastoreId } = useActiveDatastore();
+    if (!isPresent(datastoreId))
         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 })] }) }));
+    return (_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: datastoreId })] }));
 }

package/dist/app/showcase-page.js

@@ -2,7 +2,8 @@ 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 { Link } from "react-router";
+import { useActiveDatastore } from "@manta-eu/react/providers";
 import { Columns3, Plus } from "lucide-react";
 import { Button, cn } from "@manta-eu/react";
 import { hornSchema, hornSources, isRealm } from "@manta-eu/horns";
@@ -10,8 +11,6 @@ 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
@@ -44,12 +43,10 @@ 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))
+    const { datastoreId } = useActiveDatastore();
+    if (!isPresent(datastoreId))
         return _jsx(DatastoreMissing, {});
-    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(Showcase, { datastoreId: datastore.id }) }));
+    return _jsx(Showcase, { datastoreId: datastoreId });
 }
 function Showcase({ datastoreId }) {
     const [showing, setShowing] = useState(everyone);
@@ -90,10 +87,10 @@ function Showcase({ datastoreId }) {
     ];
     // 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
+    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(), 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) => {
+                        : "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(), 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));
+                    return (_jsx("li", { children: _jsxs(Link, { "data-showcase-card": card.slug, to: hornViewPath(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));
                 }) }))] }));
 }