@manta-eu/horns-client 0.1.4 → 0.2.1

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

@@ -4,6 +4,8 @@ type HornStudioProps = {
     datastoreId: string;
     /** Absent for a Horn that has never been saved: its first save names it from its title. */
     slug?: string;
+    /** Which Studio object holds this conversation. Defaults to the slug, which an unsaved Horn has not got. */
+    conversation?: string;
     stored: Horn;
     /** Absent for a Horn that has never been saved: there is no revision to build on. */
     revision?: string;

package/dist/app/horn-studio.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { useStudioConversation } from "../lib/manta/studio-conversation";
 import { useQuery } from "@tanstack/react-query";
 import { isPresent } from "@manta-eu/lib/present";
 import { useNavigate } from "react-router";
@@ -10,6 +11,7 @@ import { hornSnapshotSchema } from "@manta-eu/horns/render";
 import { describeHornChange, minViewWidth, visualEditOps } from "@manta-eu/horns/studio";
 import { HornSnapshotView } from "@manta-eu/horns-kit";
 import { writtenHornView } from "../components/written-horn-view";
+import { PlanChanges } from "../components/plan-changes";
 import { catalogCardView } from "../components/catalog-card-view";
 import { ReadTheCode, ReadTheCodeDialog, writtenReviewStates } from "../components/read-the-code";
 import { PlanRunDialog, usePlanRuns } from "../components/plan-runs";
@@ -18,25 +20,13 @@ import { nameOfView, reviewHorn } from "../lib/horn-review";
 import { StudioChat } from "../components/studio-chat";
 import { ErrorState, Loading } from "../components/states";
 import { isRecord } from "@manta-eu/horns";
-import { readNdjson } from "@manta-eu/horns-server/shared";
 import { problemOf } from "../lib/problem";
-import { studioProgressLine } from "../lib/studio-progress";
 import { appTheme } from "../lib/theme";
 const restyleStarters = [
     "Make it dark and give it a calmer accent",
     "Turn the biggest chart into a donut",
     "Tighter cards, and a KPI row across the top",
 ];
-function readReply(body) {
-    if (!isRecord(body))
-        return undefined;
-    const horn = hornSchema.safeParse(body["horn"]);
-    const reply = body["reply"];
-    if (!horn.success || typeof reply !== "string")
-        return undefined;
-    const status = body["status"];
-    return { horn: horn.data, reply, ...(typeof status === "string" ? { status } : {}) };
-}
 function failureOf(body, status) {
     return problemOf(body, `The Studio could not answer (${status}).`);
 }
@@ -62,6 +52,17 @@ export function HornStudio(props) {
     const navigate = useNavigate();
     const mobile = useIsMobile();
     const [pane, setPane] = useState("preview");
+    // One conversation per Horn: the worker holds its messages and its draft.
+    const looking = useRef({ horn: stored, asked: "" });
+    const studio = useStudioConversation({
+        datastoreId,
+        conversation: props.conversation ?? props.slug ?? stored.slug,
+        look: async (why) => {
+            const { horn, asked } = looking.current;
+            const seen = await reviewHorn({ datastoreId, horn, asked: why || asked, variables });
+            return describeReview(seen);
+        },
+    });
     const [versions, setVersions] = useState([{ id: 0, horn: stored }]);
     const nextId = useRef(1);
     const [viewing, setViewing] = useState();
@@ -84,6 +85,7 @@ export function HornStudio(props) {
         resizeFrom: "right",
     });
     const latest = versions[versions.length - 1] ?? { id: 0, horn: stored };
+    looking.current = { horn: studio.draft ?? latest.horn, asked: looking.current.asked };
     const shown = versions.find((version) => version.id === viewing) ?? latest;
     // Hashing is async, so the states are held rather than derived: a card shows what was last worked out for
     // the draft it is drawing.
@@ -140,35 +142,15 @@ export function HornStudio(props) {
         const base = latest;
         const fail = (content) => setEntries([...conversation, { kind: "failure", content }]);
         try {
-            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/studio`, {
-                method: "POST",
-                headers: { "content-type": "application/json" },
-                body: JSON.stringify({
-                    horn: base.horn,
-                    // Failures are the app's, not the conversation's; the model is shown only what was said.
-                    messages: conversation.flatMap((entry) => entry.kind === "failure" ? [] : [{ role: entry.kind, content: entry.content }]),
-                }),
-            });
-            if (!response.ok) {
-                fail(failureOf(await response.json().catch(() => undefined), response.status));
-                return;
-            }
-            const body = await readNdjson(response, (line) => {
-                const said = line["type"] === "progress" ? studioProgressLine(line) : undefined;
-                if (!isPresent(said))
-                    return;
-                thinking.push(said);
-                setProgress([...thinking]);
-            });
-            if (body?.["type"] === "error") {
-                fail(problemOf(body, "The Studio failed."));
-                return;
-            }
-            const reply = readReply(body);
-            if (!isPresent(reply)) {
+            // The object holds the conversation and the draft: a turn sends words and reads the Horn back.
+            looking.current = { horn: base.horn, asked };
+            await studio.open(base.horn);
+            const turn = await studio.ask(asked);
+            if (!isPresent(turn.horn)) {
                 fail("The Studio answered with something that is not a Horn.");
                 return;
             }
+            const reply = { horn: turn.horn, reply: turn.reply };
             const summary = describeHornChange(base.horn, reply.horn);
             const changed = isPresent(summary.details);
             const version = { id: nextId.current, horn: reply.horn };
@@ -444,7 +426,7 @@ export function HornStudio(props) {
                     // Only once the keep is in the draft: the save that follows the last one reads the draft, and
                     // a draft still missing it looks exactly like code nobody read.
                     void edit(change, `Read and kept the code for "${reading.title}".`).then(() => setToRead((was) => was.slice(1)));
-                } })), _jsxs("header", { className: "flex h-14 shrink-0 items-center gap-3 px-3", children: [mobile ? (_jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: ArrowLeft, "aria-label": "All Horns", onClick: () => navigate(backTo) })) : (_jsx(Button, { variant: "ghost", size: "sm", icon: ArrowLeft, showLeftIcon: true, onClick: () => navigate(backTo), children: "All Horns" })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-default-foreground", children: latest.horn.title }), _jsx("span", { "data-save-status": true, className: "truncate text-xs text-muted-foreground", children: status })] }), mobile ? (_jsx("div", { className: "flex items-center gap-1 rounded-full bg-muted p-1", role: "group", "aria-label": "Show", children: ["chat", "preview"].map((each) => (_jsx(Button, { variant: pane === each ? "secondary" : "ghost", size: "xs", "aria-pressed": pane === each, onClick: () => setPane(each), children: each === "chat" ? "Chat" : "Preview" }, each))) })) : null, _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [unsaved ? (_jsx(Button, { variant: "secondary", size: "sm", disabled: saveState === "saving" || pending, onClick: discard, children: mobile ? "Discard" : "Discard changes" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !unsaved || saveState === "saving" || pending, onClick: () => void save(), children: saveState === "saving" ? "Saving…" : mobile ? "Save" : "Save changes" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [showChat ? (_jsxs("aside", { ref: panelRef, "aria-label": "Studio chat", className: "flex min-h-0 shrink-0 flex-col", style: mobile ? { width: "100%" } : { width: panelWidth }, children: [isPresent(saveFailure) ? (_jsx("div", { className: "px-4 pt-2", children: _jsx(ErrorState, { title: "That save did not go through", hint: saveFailure }) })) : null, _jsx(StudioChat, { entries: entries, pending: pending, progress: progress, previewing: shown.id, welcome: welcome ?? "What would you like to change?", reassurance: reassurance ?? "Say it in your own words. Nothing is saved until you choose Save changes.", starters: starters ?? restyleStarters, placeholder: placeholder ?? "Describe a change, in your own words…", onSend: (text) => void send(text), onPreview: (id) => {
+                } })), _jsxs("header", { className: "flex h-14 shrink-0 items-center gap-3 px-3", children: [mobile ? (_jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: ArrowLeft, "aria-label": "All Horns", onClick: () => navigate(backTo) })) : (_jsx(Button, { variant: "ghost", size: "sm", icon: ArrowLeft, showLeftIcon: true, onClick: () => navigate(backTo), children: "All Horns" })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-default-foreground", children: latest.horn.title }), _jsx("span", { "data-save-status": true, className: "truncate text-xs text-muted-foreground", children: status })] }), mobile ? (_jsx("div", { className: "flex items-center gap-1 rounded-full bg-muted p-1", role: "group", "aria-label": "Show", children: ["chat", "preview"].map((each) => (_jsx(Button, { variant: pane === each ? "secondary" : "ghost", size: "xs", "aria-pressed": pane === each, onClick: () => setPane(each), children: each === "chat" ? "Chat" : "Preview" }, each))) })) : null, _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [unsaved ? (_jsx(Button, { variant: "secondary", size: "sm", disabled: saveState === "saving" || pending, onClick: discard, children: mobile ? "Discard" : "Discard changes" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !unsaved || saveState === "saving" || pending, onClick: () => void save(), children: saveState === "saving" ? "Saving…" : mobile ? "Save" : "Save changes" })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [showChat ? (_jsxs("aside", { ref: panelRef, "aria-label": "Studio chat", className: "flex min-h-0 shrink-0 flex-col", style: mobile ? { width: "100%" } : { width: panelWidth }, children: [isPresent(saveFailure) ? (_jsx("div", { className: "px-4 pt-2", children: _jsx(ErrorState, { title: "That save did not go through", hint: saveFailure }) })) : null, _jsx(StudioChat, { entries: entries, pending: pending, progress: isPresent(progress) ? progress : studio.steps, previewing: shown.id, welcome: welcome ?? "What would you like to change?", reassurance: reassurance ?? "Say it in your own words. Nothing is saved until you choose Save changes.", starters: starters ?? restyleStarters, placeholder: placeholder ?? "Describe a change, in your own words…", onSend: (text) => void send(text), onPreview: (id) => {
                                     setViewing(id === latest.id ? undefined : id);
                                     if (mobile)
                                         setPane("preview");
@@ -456,7 +438,7 @@ export function HornStudio(props) {
                                             const target = event.target;
                                             const card = target instanceof Element ? target.closest("[data-horn-view]") : undefined;
                                             setHovered(card?.getAttribute("data-horn-view") ?? undefined);
-                                        }, onMouseLeave: () => setHovered(undefined), children: [editFailure === undefined ? null : (_jsxs("div", { role: "alert", className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-muted-border bg-muted px-3 py-2 text-sm text-default-foreground", children: [_jsx("span", { className: "whitespace-pre-wrap", children: editFailure }), _jsx(Button, { variant: "ghost", size: "xs", onClick: () => setEditFailure(undefined), children: "Dismiss" })] })), planRuns.problem === undefined ? null : (_jsxs("div", { role: "alert", className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-muted-border bg-muted px-3 py-2 text-sm text-default-foreground", children: [_jsx("span", { children: planRuns.problem }), _jsx(Button, { variant: "ghost", size: "xs", onClick: planRuns.dismiss, children: "Dismiss" })] })), _jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, catalogCard: catalogCardView, ...(shown.id === latest.id
+                                        }, onMouseLeave: () => setHovered(undefined), children: [editFailure === undefined ? null : (_jsxs("div", { role: "alert", className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-muted-border bg-muted px-3 py-2 text-sm text-default-foreground", children: [_jsx("span", { className: "whitespace-pre-wrap", children: editFailure }), _jsx(Button, { variant: "ghost", size: "xs", onClick: () => setEditFailure(undefined), children: "Dismiss" })] })), planRuns.problem === undefined ? null : (_jsxs("div", { role: "alert", className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-muted-border bg-muted px-3 py-2 text-sm text-default-foreground", children: [_jsx("span", { children: planRuns.problem }), _jsx(Button, { variant: "ghost", size: "xs", onClick: planRuns.dismiss, children: "Dismiss" })] })), _jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, planStrip: PlanChanges, catalogCard: catalogCardView, ...(shown.id === latest.id
                                                     ? {
                                                         viewControls: (view) => (
                                                         // Six controls on every card is furniture; they belong to the card being reached
@@ -479,3 +461,13 @@ export function HornStudio(props) {
                                                                         }
                                                                     }, children: "Rename it" })] })] }) })] })) })] }) })) : null] })] }));
 }
+/** What the reviewer saw, as the turn is told it. */
+function describeReview(seen) {
+    const lines = [
+        ...seen.problems.map((problem) => `"${problem.viewId}" does not draw: ${problem.message}`),
+        ...seen.advice,
+    ];
+    if (isPresent(seen.unavailable))
+        return `Nobody could look at it: ${seen.unavailable}`;
+    return lines.length > 0 ? lines.join("\n") : "It draws, and nothing is wrong with how it looks.";
+}

package/dist/app/horn-view-page.js

@@ -9,6 +9,7 @@ import { Button, Input } from "@manta-eu/react";
 import { hornSnapshotSchema, variablesFromSearch } from "@manta-eu/horns/render";
 import { HornSnapshotView } from "@manta-eu/horns-kit";
 import { writtenHornView } from "../components/written-horn-view";
+import { PlanChanges } from "../components/plan-changes";
 import { catalogCardView } from "../components/catalog-card-view";
 import { PlanRunDialog, usePlanRuns } from "../components/plan-runs";
 import { sendHornScreenshot } from "../components/rasterize";
@@ -96,5 +97,5 @@ function Viewer({ datastoreId, slug }) {
         return _jsx(Loading, { label: "Opening the Horn\u2026", rows: 3 });
     return (_jsxs("div", { "data-horn-viewer": true, className: "flex w-full flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(Link, { to: hornsPath(), className: "text-sm text-muted-foreground hover:text-default-foreground", children: "All Horns" }), _jsx(VariableBar, { horn: horn })] }), _jsxs("div", { className: "flex items-center gap-2", children: [planRuns.problem === undefined ? null : (_jsx("span", { role: "alert", className: "text-xs text-muted-foreground", children: planRuns.problem })), _jsx(UpdatePicture, { datastoreId: datastoreId, slug: slug, snapshot: snapshot.data }), _jsx(ShareLink, {}), _jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: hornPath(slug), children: [_jsx(Pencil, { size: 14, "aria-hidden": "true" }), "Change it"] }) })] })] }), snapshot.isError ? (_jsx(ErrorState, { title: "The Horn could not be drawn", hint: snapshot.error.message })) : !isPresent(snapshot.data) ? (_jsx(Loading, { label: "Drawing the Horn\u2026", rows: 4 })) : (
             // The Horn draws its own page, title and canvas.
-            _jsxs("div", { "data-horn-preview": true, className: "w-full overflow-hidden rounded-xl", children: [_jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, catalogCard: catalogCardView, explain: explain.open, onVariableChange: urlVariables.set }), _jsx(PlanRunDialog, { runs: planRuns, labels: snapshot.data.labels }), explain.dialog] }))] }));
+            _jsxs("div", { "data-horn-preview": true, className: "w-full overflow-hidden rounded-xl", children: [_jsx(HornSnapshotView, { snapshot: snapshot.data, mode: "page", theme: appTheme(), planActions: planRuns.actions, writtenView: writtenHornView, planStrip: PlanChanges, catalogCard: catalogCardView, explain: explain.open, onVariableChange: urlVariables.set }), _jsx(PlanRunDialog, { runs: planRuns, labels: snapshot.data.labels }), explain.dialog] }))] }));
 }

package/dist/app/nav.d.ts

@@ -0,0 +1,20 @@
+import type { LucideIcon } from "lucide-react";
+export type HornsNavItem = {
+    to: string;
+    label: string;
+    icon: LucideIcon;
+    /** Exact for a page that is one page, a prefix where the page has children. */
+    isCurrent: (pathname: string) => boolean;
+};
+export type HornsNavSection = {
+    label: string;
+    items: HornsNavItem[];
+};
+/**
+ * Where a person can go inside Horns, in one list.
+ *
+ * `AppShell` draws it as its sidebar, and a host that supplies a `shell` of its own draws it wherever its
+ * own chrome puts navigation — `manta/agents` renders it beside the page, the way Data Explorer does. Two
+ * renderings of one list, so a page added here cannot go missing from the other.
+ */
+export declare function hornsNavSections(): HornsNavSection[];

package/dist/app/nav.js

@@ -0,0 +1,34 @@
+import { Boxes, Columns3, LayoutGrid, ListChecks, Sigma } from "lucide-react";
+import { hornsPath, plansPath, rulesPath, shapesPath, showcasePath } from "./paths";
+const exact = (path) => (pathname) => pathname === path;
+const under = (path) => (pathname) => pathname.startsWith(path);
+/**
+ * Where a person can go inside Horns, in one list.
+ *
+ * `AppShell` draws it as its sidebar, and a host that supplies a `shell` of its own draws it wherever its
+ * own chrome puts navigation — `manta/agents` renders it beside the page, the way Data Explorer does. Two
+ * renderings of one list, so a page added here cannot go missing from the other.
+ */
+export function hornsNavSections() {
+    return [
+        {
+            label: "Horns",
+            items: [
+                { to: showcasePath(), label: "Showcase", icon: LayoutGrid, isCurrent: exact(showcasePath()) },
+                { to: hornsPath(), label: "Horns", icon: Columns3, isCurrent: exact(hornsPath()) },
+            ],
+        },
+        // The tools behind a Horn: for the people who build them, kept apart so it is not the first thing
+        // everyone else is offered.
+        {
+            label: "For builders",
+            items: [
+                { to: shapesPath(), label: "Data shapes", icon: Boxes, isCurrent: under(shapesPath()) },
+                // The other half of what the datastore knows: not what a thing is, but what Manta works out.
+                { to: rulesPath(), label: "Rules", icon: Sigma, isCurrent: under(rulesPath()) },
+                // What those rules drafted, and where a Horn is started from one.
+                { to: plansPath(), label: "Action plans", icon: ListChecks, isCurrent: under(plansPath()) },
+            ],
+        },
+    ];
+}

package/dist/app/new-horn-page.js

@@ -15,10 +15,11 @@ import { shapesRealm } from "../lib/shapes/catalog";
 // The way in: a Horn from nothing. It opens straight into the Studio with an empty document, the way a new
 // Lovable project opens on its composer: the first thing typed is what it should show, the model names it as
 // it builds it, and the first save makes its address from that name.
+// Answerable on any datastore: these are offered before anyone knows what is in one.
 const starterPrompts = [
-    "Which campaigns are spending the most, and where is the waste?",
-    "Show me the accounts with the most pipeline movement this month",
-    "What happened in search last week that I should look at?",
+    "What is in here? Show me the main kinds of thing and how much there is of each.",
+    "Rank the most important things here and show what makes the top ones stand out.",
+    "What in this data is worth a second look, and why?",
 ];
 export function NewHornPage() {
     const { datastoreId } = useActiveDatastore();
@@ -71,6 +72,10 @@ function NewHornAbout({ datastoreId, about }) {
 function NewHorn({ datastoreId }) {
     // Made once: the route owns the IRI and the revision on save, and this is a document that has never been
     // stored. A new render must not make a new one underneath the draft.
-    const [horn] = useState(() => standaloneHorn({ id: "untitled", title: "Untitled Horn", views: [], realm: shapesRealm(), datastoreId }));
-    return (_jsx(HornStudio, { datastoreId: datastoreId, stored: horn, backTo: hornsPath(), welcome: "What should this Horn show?", reassurance: "Say it in your own words, and I will build it from this datastore's data.", placeholder: "Describe what you want to see\u2026", starters: starterPrompts }));
+    // Its own conversation, not its slug: every unsaved Horn has the same slug and would share one object.
+    const [{ horn, conversation }] = useState(() => ({
+        horn: standaloneHorn({ id: "untitled", title: "Untitled Horn", views: [], realm: shapesRealm(), datastoreId }),
+        conversation: `untitled-${crypto.randomUUID()}`,
+    }));
+    return (_jsx(HornStudio, { datastoreId: datastoreId, stored: horn, conversation: conversation, backTo: hornsPath(), welcome: "What should this Horn show?", reassurance: "Say it in your own words, and I will build it from this datastore's data.", placeholder: "Describe what you want to see\u2026", starters: starterPrompts }));
 }

package/dist/app/plans-page.js

@@ -14,7 +14,7 @@ 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" },
+    draft: { text: "Not checked yet", variant: "info" },
     running: { text: "Running", variant: "info" },
     completed: { text: "Done", variant: "success" },
     failed: { text: "Did not go through", variant: "warning" },

package/dist/app/reference-page.js

@@ -5,6 +5,7 @@ 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 { PlanChanges } from "../components/plan-changes";
 import { catalogCardView } from "../components/catalog-card-view";
 import { useExplainDialog } from "../components/explain-dialog";
 import { ErrorState, Loading } from "../components/states";
@@ -51,5 +52,5 @@ export function ReferencePage() {
             });
         },
     });
-    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] }))] }));
+    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, planStrip: PlanChanges, catalogCard: catalogCardView, explain: explain.open, onVariableChange: filters.set }), explain.dialog] }))] }));
 }

package/dist/app/routes.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 /**
  * 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
@@ -5,8 +6,15 @@
  *
  * `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.
+ *
+ * `shell` is the layout the listed pages draw inside, defaulting to Horns' own. A host that has a shell
+ * already passes it, and a Horn then reads as one of that host's pages rather than swapping the chrome for
+ * Horns'. It is a layout route's element, so it renders an `<Outlet />`; the Studio and a saved Horn ignore
+ * it, because each is a whole screen with nothing beside it.
  */
-export declare function hornsRoutes({ catchAll }?: {
+export type HornsRoutesOptions = {
     catchAll?: boolean;
-}): import("react").JSX.Element;
+    shell?: ReactNode;
+};
+export declare function hornsRoutes({ catchAll, shell }?: HornsRoutesOptions): import("react").JSX.Element;
 export declare function AppRoutes(): import("react").JSX.Element;

package/dist/app/routes.js

@@ -15,19 +15,11 @@ import { ShapeZooPage } from "./shape-zoo-page";
 import { ShapesPage } from "./shapes-page";
 import { ShowcasePage } from "./showcase-page";
 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
- * 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 } = {}) {
+export function hornsRoutes({ catchAll = false, shell } = {}) {
     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] }));
+    _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: shell ?? _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/components/app-shell.js

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

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

@@ -0,0 +1,2 @@
+import { type PlanStripArgs } from "@manta-eu/horns-kit";
+export declare function PlanChanges({ plan, onView, labels, links, actions }: PlanStripArgs): import("react").JSX.Element;

package/dist/components/plan-changes.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Status } from "@manta-eu/react";
+import { DisabledActionTooltip } from "@manta-eu/react/disabled-action-tooltip";
+import { maxShownChanges, planStateText, planSummary, planTitle, planValue, runnable, unreadableChanges, } from "@manta-eu/horns-kit";
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowRight } from "lucide-react";
+// The kit draws plans with inline styles because it knows nothing of `@manta-eu/react`. A host does, so it
+// draws its own and the Horn's buttons look like every other button in Manta.
+const statusVariant = { quiet: "neutral", busy: "neutral", good: "success", bad: "error" };
+export function PlanChanges({ plan, onView, labels, links, actions }) {
+    const live = actions?.status?.[plan.iri];
+    const status = live ?? plan;
+    const state = planStateText(status, live === undefined);
+    const pending = actions?.pending?.has(plan.iri) === true;
+    const busy = pending || status.state === "running";
+    const ready = runnable(live);
+    const near = new Set(onView);
+    const sorted = [...plan.changes].sort((a, b) => Number(near.has(b.entity)) - Number(near.has(a.entity)));
+    const shown = sorted.slice(0, maxShownChanges);
+    const hidden = plan.changes.length - shown.length;
+    const unreadable = unreadableChanges(plan);
+    const failed = status.state === "failed" || status.state === "timed-out";
+    return (_jsxs(Card, { "data-horn-plan": plan.iri, "data-plan-state": status.state, className: "mt-3", children: [_jsxs(CardHeader, { className: "flex flex-row flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(CardTitle, { className: "text-sm", children: planTitle(plan, labels) }), _jsx("p", { className: "text-muted-foreground m-0 text-xs", children: planSummary(plan, labels) })] }), _jsx(Status, { "data-plan-status": true, variant: statusVariant[state.tone], label: pending ? "Sending…" : state.text })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [failed && isPresent(status.lastRun?.error) ? (_jsx("p", { role: "alert", className: "text-destructive-foreground m-0 text-sm", children: status.lastRun.error })) : null, shown.length === 0 ? (_jsx("p", { className: "text-muted-foreground m-0 text-sm", children: "Nothing here differs from how things are now." })) : (_jsx("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: shown.map((change, index) => {
+                            const link = links[change.entity];
+                            const name = labels[change.entity] ?? "Untitled";
+                            const why = plan.reasons.filter((reason) => reason.entity === change.entity);
+                            return (_jsxs("li", { "data-plan-change": true, className: "m-0 flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm", children: [link === undefined ? (_jsx("span", { className: "font-semibold", children: name })) : (_jsx("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "font-semibold underline underline-offset-4", children: name })), _jsx("span", { className: "text-muted-foreground", children: labels[change.property] ?? "A setting" }), _jsx("span", { className: "sr-only", children: "now" }), _jsx("span", { className: "text-muted-foreground line-through", children: planValue(change.from, change, labels) }), _jsx(ArrowRight, { "aria-hidden": true, className: "text-muted-foreground size-3.5" }), _jsx("span", { className: "sr-only", children: "becomes" }), _jsx(Badge, { variant: "info", children: planValue(change.to, change, labels) })] }), why.length > 0 ? (_jsx("p", { className: "text-muted-foreground m-0 text-xs", children: `Why: ${why.map((reason) => reason.text).join("; ")}` })) : null] }, index));
+                        }) })), hidden > 0 ? (_jsx("p", { className: "text-muted-foreground m-0 text-xs", children: `And ${hidden} more ${hidden === 1 ? "change" : "changes"}.` })) : null, unreadable > 0 ? (_jsx("p", { className: "text-muted-foreground m-0 text-xs", children: `It also touches ${unreadable} more ${unreadable === 1 ? "thing" : "things"} whose before and after could not be read.` })) : null, actions === undefined ? null : (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => actions.onPreview(plan), children: "Check it" }), _jsx(DisabledActionTooltip, { ...(ready ? {} : { reason: "Check it first, so you can see what would change before anything does" }), children: _jsx(Button, { size: "sm", variant: "primary", disabled: busy || !ready, onClick: () => actions.onRun(plan), children: "Make these changes" }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: ready ? "Changes them where they came from" : "A check changes nothing" })] }))] })] }));
+}

package/dist/components/rasterize.js

@@ -3,7 +3,8 @@ import { createRoot } from "react-dom/client";
 import { toBlob } from "html-to-image";
 import { captureDeviceScaleFactor, captureWidth } from "@manta-eu/horns/render";
 import { HornSnapshotView } from "@manta-eu/horns-kit";
-import { makeWrittenHornView } from "./written-horn-view";
+import { drawingAttribute, makeWrittenHornView } from "./written-horn-view";
+import { PlanChanges } from "./plan-changes";
 import { isRecord } from "@manta-eu/horns";
 import { problemOf } from "../lib/problem";
 // A picture of a Horn, taken by the browser that already has it.
@@ -22,19 +23,24 @@ const settleTimeoutMs = 8000;
 /** No mutation for this long means the views have finished drawing. */
 const quietMs = 150;
 /**
- * Waits for the off-screen tree to stop changing.
+ * Waits for the off-screen tree to draw.
  *
- * A written view draws after a dynamic import and two effects, and nothing in the kit says when it is done, so
- * quiet is the signal: no mutation for `quietMs`, and the deadline wins either way. A picture of a view still
- * showing its placeholder is worth more than no picture.
+ * The gaps between a written view's import and its effects are longer than `quietMs`, so quiet counts only
+ * once no view is still drawing. The deadline wins either way.
  */
 function settled(node) {
+    const stillDrawing = () => node.querySelector(`[${drawingAttribute}]`) !== null;
     return new Promise((resolve) => {
         let quiet;
-        const observer = new MutationObserver(() => {
+        const restQuiet = () => {
             clearTimeout(quiet);
-            quiet = setTimeout(done, quietMs);
-        });
+            quiet = setTimeout(() => {
+                if (stillDrawing())
+                    return restQuiet();
+                done();
+            }, quietMs);
+        };
+        const observer = new MutationObserver(restQuiet);
         const done = () => {
             clearTimeout(quiet);
             clearTimeout(deadline);
@@ -42,7 +48,7 @@ function settled(node) {
             resolve();
         };
         const deadline = setTimeout(done, settleTimeoutMs);
-        quiet = setTimeout(done, quietMs);
+        restQuiet();
         observer.observe(node, { subtree: true, childList: true, attributes: true, characterData: true });
     });
 }
@@ -71,7 +77,7 @@ export async function rasterizeHorn(snapshot) {
     document.body.append(holder);
     const root = createRoot(holder);
     try {
-        root.render(_jsx(HornSnapshotView, { snapshot: snapshot, mode: "capture", writtenView: writtenView }));
+        root.render(_jsx(HornSnapshotView, { snapshot: snapshot, mode: "capture", writtenView: writtenView, planStrip: PlanChanges }));
         await settled(holder);
         const drawing = holder.firstElementChild;
         if (!(drawing instanceof HTMLElement))

package/dist/components/studio-chat.js

@@ -37,6 +37,20 @@ function ChangeCard(props) {
     const [open, setOpen] = useState(false);
     return (_jsxs("section", { "data-change-card": true, className: cn("flex flex-col gap-3 rounded-xl border bg-base-background p-3", previewing ? "border-primary" : "border-muted-border"), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(GitCommitHorizontal, { size: 16, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium text-default-foreground", children: change.title })] }), open ? (_jsx("ul", { className: "flex list-disc flex-col gap-1 pl-9 text-xs text-muted-foreground", children: change.details.map((detail) => (_jsx("li", { children: detail }, detail))) })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", "aria-expanded": open, onClick: () => setOpen((was) => !was), children: "Details" }), _jsx(Button, { variant: previewing ? "tertiary" : "secondary", size: "sm", disabled: previewing, onClick: onPreview, children: previewing ? "Previewing" : "Preview" })] })] }));
 }
+// `ChatReasoning` is handed the count rather than keeping one.
+function useElapsedSeconds(running) {
+    const [seconds, setSeconds] = useState(0);
+    useEffect(() => {
+        if (!running) {
+            setSeconds(0);
+            return;
+        }
+        const startedAt = Date.now();
+        const tick = setInterval(() => setSeconds(Math.floor((Date.now() - startedAt) / 1000)), 1000);
+        return () => clearInterval(tick);
+    }, [running]);
+    return seconds;
+}
 /**
  * The Studio's conversation as a rail beside the preview: what was asked, what the turn did while it thought,
  * what it said, and a card for each change that can put that version back in the preview.
@@ -44,6 +58,7 @@ function ChangeCard(props) {
 export function StudioChat(props) {
     const { entries, pending, progress, previewing, welcome, reassurance, starters, placeholder, onSend, onPreview } = props;
     const scroller = useRef(null);
+    const elapsed = useElapsedSeconds(pending);
     // The newest line is the one being read, so the rail follows it down.
     useEffect(() => {
         const element = scroller.current;
@@ -59,5 +74,5 @@ export function StudioChat(props) {
                         }
                         const change = entry.change;
                         return (_jsxs("div", { className: "flex flex-col gap-3", children: [isPresent(entry.thinking) ? (_jsx(ChatReasoning, { phase: "done", text: "Finished thinking", seconds: entry.seconds, items: entry.thinking.map(stepItem) })) : null, _jsx(ChatMessage, { role: "assistant", children: entry.content }), isPresent(change) ? (_jsx(ChangeCard, { change: change.summary, previewing: previewing === change.versionId, onPreview: () => onPreview(change.versionId) })) : null, isPresent(entry.advice) ? _jsx(ReviewCard, { advice: entry.advice, onSend: onSend }) : null, entry.unfinished === true ? (_jsx(Button, { size: "sm", variant: "secondary", className: "self-start", onClick: () => onSend("Continue where you left off."), children: "Keep going" })) : null] }, index));
-                    }), pending ? (_jsx(ChatReasoning, { phase: "pending", text: "Thinking", items: (isPresent(progress) ? progress : [{ title: "Sending" }]).map(stepItem) })) : null] }), _jsx("div", { className: "shrink-0 border-t border-muted-border p-3", children: _jsxs(ChatInput, { onSubmit: (value) => onSend(value), children: [_jsx(ChatInputTextarea, { placeholder: placeholder, "aria-label": placeholder }), _jsx(ChatInputSubmit, { icon: ArrowUp, "aria-label": "Send", isLoading: pending, disabled: pending })] }) })] }));
+                    }), pending ? (_jsx(ChatReasoning, { phase: "pending", text: "Thinking", seconds: elapsed, ...(isPresent(progress) ? { subtitle: progress[progress.length - 1]?.title } : {}), items: (isPresent(progress) ? progress : [{ title: "Sending" }]).map(stepItem) })) : null] }), _jsx("div", { className: "shrink-0 border-t border-muted-border p-3", children: _jsxs(ChatInput, { onSubmit: (value) => onSend(value), children: [_jsx(ChatInputTextarea, { placeholder: placeholder, "aria-label": placeholder }), _jsx(ChatInputSubmit, { icon: ArrowUp, "aria-label": "Send", isLoading: pending, disabled: pending })] }) })] }));
 }

package/dist/components/written-horn-view.d.ts

@@ -6,6 +6,8 @@ import type { HornSnapshotViewProps } from "@manta-eu/horns-kit";
  * about it — so the Studio cannot fix what it just wrote. A caller that wants to know passes `onError`; the
  * off-screen draw the picture is taken from passes one, which is how a broken view reaches the next turn.
  */
+/** On a view that has not drawn yet. The rasterizer waits for these to go. */
+export declare const drawingAttribute = "data-horn-drawing";
 export declare function makeWrittenHornView(onError?: (problem: {
     viewId: string;
     message: string;

package/dist/components/written-horn-view.js

@@ -15,8 +15,11 @@ const WrittenView = lazy(async () => {
  * about it — so the Studio cannot fix what it just wrote. A caller that wants to know passes `onError`; the
  * off-screen draw the picture is taken from passes one, which is how a broken view reaches the next turn.
  */
+/** On a view that has not drawn yet. The rasterizer waits for these to go. */
+export const drawingAttribute = "data-horn-drawing";
+const drawing = (_jsx("span", { [drawingAttribute]: "", children: _jsx(Loader, {}) }));
 export function makeWrittenHornView(onError) {
-    return (content, view, context) => (_jsx(Suspense, { fallback: _jsx(Loader, {}), children: _jsx(WrittenView, { source: content.source, rows: content.rows, columns: content.columns.map((column) => column.name), labels: context.labels, links: context.links, loadSurface: loadWrittenSurface, hooks: writtenHooks, fallback: _jsx(Loader, {}), renderError: (message) => {
+    return (content, view, context) => (_jsx(Suspense, { fallback: drawing, children: _jsx(WrittenView, { source: content.source, rows: content.rows, columns: content.columns.map((column) => column.name), labels: context.labels, links: context.links, loadSurface: loadWrittenSurface, hooks: writtenHooks, fallback: drawing, renderError: (message) => {
                 onError?.({ viewId: view.id, message });
                 // Plain words: the person reading this asked for a view, not a stack trace.
                 return (_jsx("p", { role: "alert", className: "text-destructive-foreground m-0 text-sm", children: message }));

package/dist/embed/horn-about.d.ts

@@ -0,0 +1,56 @@
+import { type Horn } from "@manta-eu/horns";
+import { type HornSnapshotViewProps } from "@manta-eu/horns-kit";
+/**
+ * Where the worker answers for a thing. The IRI goes in a query parameter and is encoded: a plan's carries
+ * a `#`, which would otherwise end the URL and ask about nothing.
+ */
+export declare function hornAboutPath(datastoreId: string, about: string): string;
+/** Where a Horn is turned into rows to draw. */
+export declare function hornSnapshotPath(datastoreId: string): string;
+/** Where every Horn about a thing is listed. */
+export declare function hornsAboutPath(datastoreId: string, about: string, limit?: number): string;
+/** What the drawing needs, apart from which Horn it is. */
+export type HornDrawProps = {
+    mode?: HornSnapshotViewProps["mode"];
+    planActions?: HornSnapshotViewProps["planActions"];
+    explain?: HornSnapshotViewProps["explain"];
+    onVariableChange?: HornSnapshotViewProps["onVariableChange"];
+};
+/**
+ * One Horn, turned into rows by the worker and drawn.
+ *
+ * Written views and catalog cards are bound here because they need `@manta-eu/react`, which the kit has
+ * not got. Everything else a host wants to hang on it is a prop.
+ */
+export type HornDrawnProps = HornDrawProps & {
+    datastoreId: string;
+    horn: Horn;
+    /** What a redraw keys on: the revision where there is one, or the thing the Horn was built for. */
+    cacheKey: string;
+    variables?: Record<string, unknown>;
+};
+export declare function HornDrawn(props: HornDrawnProps): import("react").JSX.Element;
+export type HornAboutProps = {
+    datastoreId: string;
+    /** The thing to show: an action plan, a rule. Opaque — it is only ever passed on. */
+    about: string;
+    /** Narrows the Horn. A host with no URL to keep these in can hold them in state. */
+    variables?: Record<string, unknown>;
+    /** Defaults to `embed`, which draws the views without the page around them. */
+    mode?: HornSnapshotViewProps["mode"];
+    /** What the viewer may do with the plans behind a view. Without it a plan is shown and never run. */
+    planActions?: HornSnapshotViewProps["planActions"];
+    explain?: HornSnapshotViewProps["explain"];
+    onVariableChange?: HornSnapshotViewProps["onVariableChange"];
+};
+/**
+ * The Horn for a thing, drawn wherever a host puts it.
+ *
+ * A host with an IRI gets something to look at whether or not anyone has made a Horn for it: the worker
+ * answers with the kept one, or builds one from the plan or rule itself. So this needs no saved Horn, no
+ * route of the host's and no Studio — it is the read-only half, for a plan shown beside its own screen.
+ *
+ * Written views and catalog cards are bound here because they need `@manta-eu/react`, which the kit has not
+ * got. Everything else a host wants to hang on it is a prop.
+ */
+export declare function HornAbout(props: HornAboutProps): import("react").JSX.Element;