@manta-eu/horns-client 0.1.0

package/dist/app/paths.d.ts

@@ -0,0 +1,13 @@
+export declare function hornsPath(datastoreId: string): string;
+export declare function newHornPath(datastoreId: string): string;
+export declare function hornPath(datastoreId: string, slug: string): string;
+/** A saved Horn as the thing itself: what a shared link opens, with the variables it carries. */
+export declare function hornViewPath(datastoreId: string, slug: string): string;
+export declare function shapesPath(datastoreId: string): string;
+export declare function shapeZooPath(datastoreId: string, schema: string): string;
+export declare function shapeEntityPath(datastoreId: string, schema: string, entity: string): string;
+/** A datastore's Horns as cards: what each one answers, who it is for, what it reads. */
+export declare const showcasePath: (datastoreId: string) => string;
+/** What Manta works out about a datastore: every rule, and whether it can be looked at. */
+export declare function rulesPath(datastoreId: string): string;
+export declare function rulePath(datastoreId: string, ruleId: string): string;

package/dist/app/paths.js

@@ -0,0 +1,32 @@
+export function hornsPath(datastoreId) {
+    return `/d/${encodeURIComponent(datastoreId)}/horns`;
+}
+export function newHornPath(datastoreId) {
+    return `${hornsPath(datastoreId)}/new`;
+}
+export function hornPath(datastoreId, slug) {
+    return `${hornsPath(datastoreId)}/${encodeURIComponent(slug)}`;
+}
+/** A saved Horn as the thing itself: what a shared link opens, with the variables it carries. */
+export function hornViewPath(datastoreId, slug) {
+    return `${hornPath(datastoreId, slug)}/view`;
+}
+export function shapesPath(datastoreId) {
+    return `/d/${encodeURIComponent(datastoreId)}/shapes`;
+}
+export function shapeZooPath(datastoreId, schema) {
+    return `${shapesPath(datastoreId)}/${encodeURIComponent(schema)}`;
+}
+// An entity IRI carries slashes and colons, so the entity travels as a query parameter rather than a segment.
+export function shapeEntityPath(datastoreId, schema, entity) {
+    return `${shapeZooPath(datastoreId, schema)}/entity?iri=${encodeURIComponent(entity)}`;
+}
+/** A datastore's Horns as cards: what each one answers, who it is for, what it reads. */
+export const showcasePath = (datastoreId) => `/d/${encodeURIComponent(datastoreId)}/showcase`;
+/** What Manta works out about a datastore: every rule, and whether it can be looked at. */
+export function rulesPath(datastoreId) {
+    return `/d/${encodeURIComponent(datastoreId)}/rules`;
+}
+export function rulePath(datastoreId, ruleId) {
+    return `${rulesPath(datastoreId)}/${encodeURIComponent(ruleId)}`;
+}

package/dist/app/routes.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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
+ * push `d/:datastoreId/...` a segment too deep; spliced in, the paths are the ones `paths.ts` writes.
+ *
+ * `catchAll` is for the host that gives Horns the whole URL space, as `mountHorns` does. A host with routes
+ * of its own leaves it off and keeps its own 404.
+ */
+export declare function hornsRoutes({ catchAll }?: {
+    catchAll?: boolean;
+}): import("react").JSX.Element;
+export declare function AppRoutes(): import("react").JSX.Element;

package/dist/app/routes.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Navigate, Outlet, Route, Routes } from "react-router";
+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 { 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, {}) }));
+}
+/**
+ * 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
+ * push `d/:datastoreId/...` a segment too deep; spliced in, the paths are the ones `paths.ts` writes.
+ *
+ * `catchAll` is for the host that gives Horns the whole URL space, as `mountHorns` does. A host with routes
+ * 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] }));
+}
+export function AppRoutes() {
+    return _jsx(Routes, { children: hornsRoutes({ catchAll: true }) });
+}

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

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

package/dist/app/rule-page.js

@@ -0,0 +1,84 @@
+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 { 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 { 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 { shapesRealm } from "../lib/shapes/catalog";
+import { SnapshotViewBody } from "../components/snapshot-view";
+// 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 realm = shapesRealm();
+    const spec = entry.spec;
+    const snapshot = useQuery({
+        enabled: spec !== undefined,
+        queryKey: ["rule-view", datastoreId, entry.rule.iri],
+        queryFn: async ({ signal }) => {
+            if (!spec)
+                throw new Error("This rule describes no view.");
+            const view = ruleHornView(spec);
+            return buildHornSnapshot({
+                horn: standaloneHorn({
+                    id: view.id,
+                    title: view.title,
+                    views: [view],
+                    realm,
+                    datastoreId,
+                }),
+                select: browserSparqlSelect(datastoreId),
+                plans: false,
+                rowLimit: Math.min(ruleRowLimit, maxSnapshotRows),
+                signal,
+            });
+        },
+    });
+    if (!spec) {
+        return (_jsx(EmptyState, { title: "This rule has no view.", hint: entry.issues?.[0] ?? "Its body does not translate to a query." }));
+    }
+    if (snapshot.isPending)
+        return _jsx(Skeleton, { className: "h-64 w-full" });
+    if (snapshot.isError)
+        return _jsx(ErrorState, { title: "The rule could not be drawn.", hint: snapshot.error.message });
+    const view = snapshot.data.views[0];
+    if (!view)
+        return _jsx(EmptyState, { title: "The rule drew nothing." });
+    return _jsx(SnapshotViewBody, { snapshot: snapshot.data, view: view });
+}
+function Rule({ datastoreId, ruleId }) {
+    const realm = shapesRealm();
+    const rules = useQuery({
+        queryKey: ["rules", datastoreId],
+        queryFn: async ({ signal }) => readRules(await browserSparqlSelect(datastoreId)(rulesQuery(realm, [], 200), signal)),
+    });
+    if (rules.isPending)
+        return _jsx(Skeleton, { className: "h-64 w-full" });
+    if (rules.isError)
+        return _jsx(ErrorState, { title: "The rules could not be read.", hint: rules.error.message });
+    const entry = ruleCoverage({ rules: rules.data, realm }).entries.find((candidate) => ruleViewId(candidate.rule.iri) === ruleId);
+    if (!entry)
+        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 })] })] }));
+}
+export function RulePage() {
+    const { datastoreId, rule } = useParams();
+    const { datastores } = useMantaSession();
+    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 }) }));
+}

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

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

package/dist/app/rules-page.js

@@ -0,0 +1,74 @@
+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 { rulesQuery, readRules } from "@manta-eu/horns/shapes";
+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 { shapesRealm } from "../lib/shapes/catalog";
+// 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) {
+    return whole === 0 ? 0 : Math.round((part / whole) * 1000) / 10;
+}
+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" });
+    }
+    // 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 }) {
+    const spec = entry.spec;
+    const derived = spec?.derives === undefined
+        ? undefined
+        : spec.derives.kind === "column"
+            ? `works out ${spec.derives.column.name}`
+            : `marks them ${spec.derives.value}`;
+    const said = spec
+        ? [
+            spec.columns.map((column) => column.name).join(", "),
+            derived,
+            isPresent(spec.conditions) ? `when ${spec.conditions.join(" and ")}` : undefined,
+        ]
+            .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] })] }));
+}
+function Rules({ datastoreId }) {
+    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));
+        },
+    });
+    if (rules.isPending)
+        return _jsx(Skeleton, { className: "h-64 w-full" });
+    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}`))) })] })] }));
+}
+/** 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();
+    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 }) })] }));
+}

package/dist/app/saved-horn.d.ts

@@ -0,0 +1,7 @@
+import { type UseQueryResult } from "@tanstack/react-query";
+import { type Horn } from "@manta-eu/horns";
+export type SavedHorn = {
+    horn: Horn;
+    revision: string;
+};
+export declare function useSavedHorn(datastoreId: string, slug: string): UseQueryResult<SavedHorn>;

package/dist/app/saved-horn.js

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { hornSchema } from "@manta-eu/horns";
+import { isRecord } from "@manta-eu/horns";
+export function useSavedHorn(datastoreId, slug) {
+    return useQuery({
+        queryKey: ["horn", datastoreId, slug],
+        enabled: isPresent(slug),
+        // The chat turns a loaded Horn into a draft; refetching underneath it would swap the draft for a Horn the
+        // user has moved past.
+        staleTime: Infinity,
+        queryFn: async ({ signal }) => {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/horns/${encodeURIComponent(slug)}`, {
+                signal,
+            });
+            if (!response.ok)
+                throw new Error(`That Horn could not be read (${response.status}).`);
+            const body = await response.json();
+            const record = isRecord(body) ? body : {};
+            return {
+                horn: hornSchema.parse(record["horn"]),
+                revision: typeof record["revision"] === "string" ? record["revision"] : "",
+            };
+        },
+    });
+}

package/dist/app/session-gate.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+type SessionGateProps = {
+    children: ReactNode;
+};
+export declare function SessionGate({ children }: SessionGateProps): ReactNode;
+export {};

package/dist/app/session-gate.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocation } from "react-router";
+import { match } from "ts-pattern";
+import { sessionGate, signInHref, useMantaSession } from "../lib/manta/session";
+function Centered({ children }) {
+    return _jsx("main", { className: "grid min-h-screen place-items-center p-8 text-center", children: children });
+}
+export function SessionGate({ children }) {
+    const session = useMantaSession();
+    const location = useLocation();
+    const signIn = signInHref(`${location.pathname}${location.search}`);
+    return match(sessionGate(session))
+        .with("loading", () => (_jsx(Centered, { children: _jsx("p", { className: "text-sm opacity-70", children: "Loading\u2026" }) })))
+        .with("sign-in", () => (_jsx(Centered, { children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("h1", { className: "text-xl font-semibold", children: "Sign in to Manta Horns" }), _jsx("a", { className: "rounded-md border px-4 py-2", href: signIn, children: "Sign in" })] }) })))
+        .with("looped", () => (_jsx(Centered, { children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("p", { role: "alert", children: "Signing in did not complete. Try again, or ask an admin to check your access." }), _jsx("a", { className: "rounded-md border px-4 py-2", href: signIn, children: "Sign in" })] }) })))
+        .with("blocked", () => (_jsx(Centered, { children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("p", { role: "alert", children: session.authError ?? session.error ?? "Manta Horns is unavailable." }), _jsx("a", { className: "rounded-md border px-4 py-2", href: signIn, children: "Try again" })] }) })))
+        .with("ready", () => children)
+        .exhaustive();
+}

package/dist/app/shape-entity-page.d.ts

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

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

@@ -0,0 +1,68 @@
+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 { shapeViewSpecs } from "@manta-eu/horns-kit";
+import { buildShapeDetail, shapeLinks } from "@manta-eu/horns/shapes";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@manta-eu/react";
+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 { ldkitShapeCatalog, shapesRealm } from "../lib/shapes/catalog";
+const specOf = (schema) => shapeViewSpecs.find((spec) => spec.schema === schema);
+function Section({ page }) {
+    const view = page.snapshot.views[0];
+    if (!view)
+        return null;
+    return _jsx(SnapshotViewBody, { snapshot: page.snapshot, view: { ...view, title: page.section.title } });
+}
+function Detail({ datastoreId, schema, entity }) {
+    const realm = shapesRealm();
+    const shape = ldkitShapeCatalog().shapes.find((candidate) => candidate.schema === schema);
+    const spec = specOf(schema);
+    const detail = useQuery({
+        queryKey: ["shape-entity", datastoreId, schema, entity],
+        enabled: isPresent(shape) && isPresent(spec),
+        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 });
+        },
+    });
+    if (!isPresent(spec)) {
+        return _jsx(EmptyState, { title: `${schema} has no HornView yet.`, hint: "There is no page to open for its instances." });
+    }
+    if (detail.isPending)
+        return _jsx(Loading, { label: "Reading this instance\u2026", rows: 3 });
+    if (detail.isError)
+        return _jsx(ErrorState, { title: "This instance could not be read.", hint: detail.error.message });
+    if (!isPresent(detail.data)) {
+        return _jsx(EmptyState, { title: "This instance is not in the datastore." });
+    }
+    const pages = detail.data;
+    const first = pages[0];
+    if (!first)
+        return null;
+    // A lens for an entity the datastore does not hold returns no rows, and an empty card is not an answer.
+    const card = first.snapshot.views[0]?.content;
+    if (card?.lane === "sandbox" && !isPresent(card.rows)) {
+        return _jsx(EmptyState, { title: "This instance is not in the datastore." });
+    }
+    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 [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))
+        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 })] }) }));
+}

package/dist/app/shape-view-studio.d.ts

@@ -0,0 +1,14 @@
+import { type ShapeViewSpec } from "@manta-eu/horns/shapes";
+type ShapeViewStudioProps = {
+    datastoreId: string;
+    stored: ShapeViewSpec;
+    /** The zoo, redrawn from the view as it stands and a number that changes whenever it does. */
+    children: (spec: ShapeViewSpec, version: number) => React.ReactNode;
+};
+/**
+ * Chat beside the zoo it redraws. The view lives here and nowhere else: a turn swaps in what the model
+ * returned, the zoo rebuilds from it, and saving is a separate act — which is what makes the conversation
+ * free to be wrong. Nothing here reaches a datastore; the save writes the kit's own file, in dev only.
+ */
+export declare function ShapeViewStudio(props: ShapeViewStudioProps): import("react").JSX.Element;
+export {};

package/dist/app/shape-view-studio.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowUp } from "lucide-react";
+import { Badge, Button } from "@manta-eu/react";
+import { shapeViewSpecSchema } from "@manta-eu/horns/shapes";
+import { ChatColumn } from "../components/chat-column";
+import { ErrorState } from "../components/states";
+import { isRecord } from "@manta-eu/horns";
+import { readNdjson } from "@manta-eu/horns-server/shared";
+import { problemFrom, problemOf } from "../lib/problem";
+const starters = [
+    "Title the card with something a person would say out loud",
+    "Show fewer fields — only what tells two of these apart",
+    "The link should be the one that goes somewhere on the web",
+];
+/** What to say about a round while it is happening, which is the only feedback a minute-long turn has. */
+function progressLine(progress) {
+    if (progress.kind === "round")
+        return progress.round === 1 ? "Designing the card…" : `Round ${progress.round}: trying again…`;
+    if (progress.kind === "accepted")
+        return "The zoo is happy with it.";
+    const [first] = progress.problems;
+    return `The zoo refused it: ${first ?? "no reason given"}`;
+}
+function readProgress(line) {
+    const round = line["round"];
+    if (typeof round !== "number")
+        return undefined;
+    if (line["kind"] === "round")
+        return { kind: "round", round };
+    if (line["kind"] === "accepted")
+        return { kind: "accepted", round };
+    if (line["kind"] !== "rejected")
+        return undefined;
+    const problems = Array.isArray(line["problems"])
+        ? line["problems"].filter((one) => typeof one === "string")
+        : [];
+    return { kind: "rejected", round, problems };
+}
+function readReply(body) {
+    if (!isRecord(body))
+        return undefined;
+    const spec = shapeViewSpecSchema.safeParse(body["spec"]);
+    if (!spec.success)
+        return undefined;
+    const problems = Array.isArray(body["problems"])
+        ? body["problems"].filter((one) => typeof one === "string")
+        : [];
+    return {
+        spec: spec.data,
+        reply: typeof body["reply"] === "string" ? body["reply"] : "",
+        status: body["status"] === "gave-up" ? "gave-up" : "accepted",
+        problems,
+    };
+}
+/** What to show when the model proposed the change without saying anything about it. */
+function said(reply) {
+    if (isPresent(reply.reply))
+        return reply.reply;
+    if (reply.status === "accepted")
+        return "Changed the card.";
+    return `I could not make that fit the data:\n${reply.problems.map((problem) => `- ${problem}`).join("\n")}`;
+}
+/**
+ * Chat beside the zoo it redraws. The view lives here and nowhere else: a turn swaps in what the model
+ * returned, the zoo rebuilds from it, and saving is a separate act — which is what makes the conversation
+ * free to be wrong. Nothing here reaches a datastore; the save writes the kit's own file, in dev only.
+ */
+export function ShapeViewStudio(props) {
+    const { datastoreId, stored, children } = props;
+    const [spec, setSpec] = useState(stored);
+    const [turns, setTurns] = useState([]);
+    const [version, setVersion] = useState(0);
+    const [saveState, setSaveState] = useState("idle");
+    const [failure, setFailure] = useState();
+    const [pending, setPending] = useState(false);
+    const [progress, setProgress] = useState([]);
+    const changed = version > 0;
+    async function send(asked) {
+        const conversation = [...turns, { role: "user", content: asked }];
+        setTurns(conversation);
+        setPending(true);
+        setFailure(undefined);
+        // The shape, its fill rates and its links are read before the first model call, and that is not nothing.
+        setProgress(["Reading the shape and the data behind it…"]);
+        try {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/shape-views/${encodeURIComponent(spec.schema)}/studio`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ spec, messages: conversation }),
+            });
+            if (!response.ok) {
+                setFailure(await problemFrom(response, `The Studio could not answer (${response.status}).`));
+                return;
+            }
+            const body = await readNdjson(response, (line) => {
+                if (line["type"] !== "progress")
+                    return;
+                const progress = readProgress(line);
+                if (isPresent(progress))
+                    setProgress((lines) => [...lines, progressLine(progress)]);
+            });
+            if (!isPresent(body)) {
+                setFailure("That turn ended without an answer.");
+                return;
+            }
+            if (body["type"] === "error") {
+                setFailure(problemOf(body, "The Studio failed."));
+                return;
+            }
+            const reply = readReply(body);
+            if (!isPresent(reply)) {
+                setFailure("The Studio answered with something that is not a view.");
+                return;
+            }
+            setTurns([...conversation, { role: "assistant", content: said(reply) }]);
+            setSpec(reply.spec);
+            setVersion((current) => current + 1);
+            setSaveState("idle");
+        }
+        catch (caught) {
+            setFailure(caught instanceof Error ? caught.message : String(caught));
+        }
+        finally {
+            setPending(false);
+            setProgress([]);
+        }
+    }
+    function discard() {
+        setSpec(stored);
+        setTurns([]);
+        setVersion((current) => current + 1);
+        setSaveState("idle");
+        setFailure(undefined);
+    }
+    async function save() {
+        setSaveState("saving");
+        setFailure(undefined);
+        try {
+            const response = await fetch(`/api/kit/shape-views/${encodeURIComponent(spec.schema)}`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ spec }),
+            });
+            const body = await response.json().catch(() => undefined);
+            if (!response.ok) {
+                setSaveState("failed");
+                setFailure(problemOf(body, `That save was refused (${response.status}).`));
+                return;
+            }
+            setSaveState("saved");
+        }
+        catch (caught) {
+            setSaveState("failed");
+            setFailure(caught instanceof Error ? caught.message : String(caught));
+        }
+    }
+    return (
+    // Plain utilities: this app's stylesheet is the design system's, precompiled, so a responsive variant of a
+    // utility it already defines does not necessarily win.
+    _jsxs("div", { className: "flex flex-row items-start gap-6", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-6", children: [_jsxs("div", { className: "flex items-center justify-end gap-2", children: [changed && saveState !== "saved" ? _jsx(Badge, { variant: "warning", children: "Unsaved" }) : null, saveState === "saved" ? _jsx(Badge, { variant: "success", children: "Saved" }) : null, changed ? (_jsx(Button, { variant: "secondary", size: "sm", disabled: saveState === "saving", onClick: discard, children: "Discard" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !changed || saveState === "saving", onClick: () => void save(), children: saveState === "saving" ? "Saving…" : "Save to kit" })] }), isPresent(failure) ? _jsx(ErrorState, { title: "That did not work", hint: failure }) : null, children(spec, version)] }), _jsx(ChatColumn, { title: "Talk to this view", subtitle: "Tell me how the card should read", starters: starters.map((starter, index) => ({ id: `starter-${index}`, title: starter })), turns: turns, progress: progress, pending: pending, placeholder: "Change the card\u2026", submitIcon: ArrowUp, onSend: (value) => void send(value) })] }));
+}

package/dist/app/shape-zoo-page.d.ts

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