@manta-eu/horns-client 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Manta AI AS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/app/coverage-run.d.ts

@@ -0,0 +1,5 @@
+type CoverageRunProps = {
+    datastoreId: string;
+};
+export declare function CoverageRun({ datastoreId }: CoverageRunProps): import("react").JSX.Element;
+export {};

package/dist/app/coverage-run.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link } from "react-router";
+import { match } from "ts-pattern";
+import { Check, Minus, Play, Square, TriangleAlert, X } from "lucide-react";
+import { Badge, Button, cn } from "@manta-eu/react";
+import { buildShapeZoo, shapeViewSpecSchema } from "@manta-eu/horns/shapes";
+import { Card, CardTitle } from "../components/page-header";
+import { SnapshotViewBody } from "../components/snapshot-view";
+import { ErrorState, Loading } from "../components/states";
+import { shapeZooPath } from "./paths";
+import { isRecord } from "@manta-eu/horns";
+import { readNdjson } from "@manta-eu/horns-server/shared";
+import { problemFrom, problemOf } from "../lib/problem";
+import { browserSparqlSelect } from "../lib/manta/sparql-select";
+import { shapesRealm } from "../lib/shapes/catalog";
+// The Studio designing a view, watched while it does it. A shape takes minutes and most of that is spent before
+// the model says anything, so the run is shown as the four stages it actually goes through, each round the zoo
+// judged, and what the zoo said when it refused one — the reason being the part worth reading.
+const stages = ["sampling", "reading", "designing", "verdict"];
+const stageLabels = {
+    sampling: "Looking at real instances",
+    reading: "Reading what fields point at",
+    designing: "Designing the card",
+    verdict: "Showing it to the zoo",
+};
+const stepKinds = ["sampling", "reading", "round", "rejected", "accepted"];
+function readStrings(value) {
+    return Array.isArray(value) ? value.filter((one) => typeof one === "string") : [];
+}
+function readNumber(value) {
+    return typeof value === "number" ? value : undefined;
+}
+/** Fold one streamed step into the shape it belongs to, keeping every shape the run has touched. */
+function applyStep(runs, line) {
+    const kind = stepKinds.find((candidate) => candidate === line["kind"]);
+    const schema = line["schema"];
+    const index = readNumber(line["index"]);
+    const total = readNumber(line["total"]);
+    if (kind === undefined || typeof schema !== "string" || index === undefined || total === undefined)
+        return runs;
+    const round = readNumber(line["round"]) ?? 1;
+    const existing = runs.find((run) => run.schema === schema);
+    const base = existing ?? { schema, index, total, stage: "sampling", rounds: [] };
+    const next = match(kind)
+        .with("sampling", () => ({ ...base, stage: "sampling" }))
+        .with("reading", () => ({ ...base, stage: "reading" }))
+        .with("round", () => ({
+        ...base,
+        stage: "designing",
+        rounds: base.rounds.some((one) => one.round === round) ? base.rounds : [...base.rounds, { round }],
+    }))
+        .with("rejected", () => ({
+        ...base,
+        stage: "verdict",
+        rounds: base.rounds.map((one) => one.round === round ? { ...one, refused: readStrings(line["problems"])[0] ?? "no reason given" } : one),
+    }))
+        .with("accepted", () => ({ ...base, stage: "verdict" }))
+        .exhaustive();
+    return isPresent(existing) ? runs.map((run) => (run.schema === schema ? next : run)) : [...runs, next];
+}
+/** Fold the finished-shape event in: the verdict, and the card it designed when there is one. */
+function applyFinished(runs, line) {
+    const schema = line["schema"];
+    const status = ["accepted", "gave-up", "no-data", "failed"].find((candidate) => candidate === line["status"]);
+    if (typeof schema !== "string" || status === undefined)
+        return runs;
+    const parsed = shapeViewSpecSchema.safeParse(line["spec"]);
+    const verdict = {
+        status: match(status)
+            .with("accepted", () => "accepted")
+            .with("gave-up", () => "gave-up")
+            .with("no-data", () => "no-data")
+            .otherwise(() => "failed"),
+        ...(readNumber(line["rounds"]) === undefined ? {} : { rounds: readNumber(line["rounds"]) }),
+        ...(typeof line["error"] === "string" ? { error: line["error"] } : {}),
+        ...(isPresent(readStrings(line["problems"])) ? { problems: readStrings(line["problems"]) } : {}),
+        ...(isPresent(readStrings(line["advice"])) ? { advice: readStrings(line["advice"]) } : {}),
+        ...(parsed.success ? { spec: parsed.data } : {}),
+    };
+    const index = readNumber(line["index"]) ?? 1;
+    const total = readNumber(line["total"]) ?? 1;
+    const existing = runs.find((run) => run.schema === schema);
+    const next = { ...(existing ?? { schema, index, total, rounds: [] }), stage: "verdict", verdict };
+    return isPresent(existing) ? runs.map((run) => (run.schema === schema ? next : run)) : [...runs, next];
+}
+function stageState(run, stage) {
+    const reached = stages.indexOf(run.stage);
+    const at = stages.indexOf(stage);
+    if (isPresent(run.verdict)) {
+        if (run.verdict.status === "accepted")
+            return "done";
+        // A shape with no data never got past sampling; a failure stops wherever it was.
+        if (at < reached)
+            return "done";
+        return at === reached ? "stopped" : "waiting";
+    }
+    if (at < reached)
+        return "done";
+    return at === reached ? "active" : "waiting";
+}
+function StageRail({ run }) {
+    return (_jsx("ol", { "data-stages": true, className: "flex flex-col gap-1.5 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-2 sm:gap-y-2", children: stages.map((stage, index) => {
+            const state = stageState(run, stage);
+            return (_jsxs("li", { "data-stage": stage, "data-state": state, className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn("flex size-5 shrink-0 items-center justify-center rounded-full border text-[10px]", 
+                        // Only the classes the design system's own build compiled exist here: its tokens sit in plain
+                        // `:root` blocks, so Tailwind cannot mint `bg-success/15` and the like from them (globals.css).
+                        state === "done" && "border-success text-success", state === "active" && "animate-pulse border-info text-info", state === "stopped" && "border-error text-error-foreground", state === "waiting" && "border-default-border text-muted-foreground"), children: match(state)
+                            .with("done", () => _jsx(Check, { size: 12 }))
+                            .with("stopped", () => _jsx(X, { size: 12 }))
+                            .with("waiting", () => _jsx(Minus, { size: 12 }))
+                            .otherwise(() => (_jsx("span", { className: "size-1.5 rounded-full bg-info" }))) }), _jsx("span", { className: cn("text-xs", state === "waiting" ? "text-muted-foreground" : "text-default-foreground", state === "active" && "font-medium"), children: stageLabels[stage] }), index < stages.length - 1 ? (_jsx("span", { "aria-hidden": "true", className: "hidden h-px w-4 bg-default-border sm:block" })) : null] }, stage));
+        }) }));
+}
+function Rounds({ rounds }) {
+    if (!isPresent(rounds))
+        return null;
+    return (_jsx("div", { "data-rounds": true, className: "flex flex-col gap-1.5", children: rounds.map((round) => (_jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [_jsx(Badge, { variant: isPresent(round.refused) ? "destructive" : "secondary", size: "sm", children: `Round ${round.round}` }), isPresent(round.refused) ? (_jsx("span", { className: "text-xs text-muted-foreground", children: `the zoo refused it — ${round.refused}` })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "designing\u2026" }))] }, round.round))) }));
+}
+/** The card the Studio just designed, drawn on real instances — the thing the run is for. */
+function DesignedCard({ datastoreId, spec }) {
+    const realm = shapesRealm();
+    const zoo = useQuery({
+        queryKey: ["coverage-preview", datastoreId, spec.schema],
+        queryFn: ({ signal }) => buildShapeZoo({ spec, realm, datastoreId, select: browserSparqlSelect(datastoreId), signal }),
+    });
+    if (zoo.isPending)
+        return _jsx(Loading, { label: "Drawing it on real instances\u2026", rows: 3 });
+    if (zoo.isError)
+        return _jsx("p", { className: "text-xs text-muted-foreground", children: `Could not draw it: ${zoo.error.message}` });
+    const view = zoo.data.snapshot.views[0];
+    const content = view?.content;
+    const variant = zoo.data.variants[0];
+    if (!view || content?.lane !== "sandbox" || !isPresent(variant))
+        return null;
+    return (_jsxs("div", { "data-designed-card": true, className: "flex flex-col gap-2 rounded-lg border border-default-border bg-card p-4", children: [_jsx(SnapshotViewBody, { snapshot: zoo.data.snapshot, view: {
+                    ...view,
+                    title: `${spec.schema} as the Studio designed it`,
+                    content: { ...content, rows: content.rows.filter((row) => row["this"] === variant.entity) },
+                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: `One of ${zoo.data.distinct} variants, from ${zoo.data.sampled} sampled instances.` })] }));
+}
+function VerdictPanel({ datastoreId, run }) {
+    const verdict = run.verdict;
+    if (verdict === undefined)
+        return null;
+    return match(verdict.status)
+        .with("accepted", () => (_jsxs("div", { "data-verdict": "accepted", className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-sm text-default-foreground", children: `The zoo accepted it in ${verdict.rounds ?? 1} round${verdict.rounds === 1 ? "" : "s"}.` }), isPresent(verdict.spec) ? (_jsxs(_Fragment, { children: [_jsx("ul", { className: "flex flex-wrap gap-1.5", children: verdict.spec.fields.map((field) => (_jsx("li", { "data-field": field.name, className: "rounded-md border border-default-border px-2 py-0.5 font-mono text-xs text-muted-foreground", children: `${field.name} · ${field.type}` }, field.name))) }), _jsx(DesignedCard, { datastoreId: datastoreId, spec: verdict.spec })] })) : null, isPresent(verdict.advice) ? (_jsxs("div", { "data-advice": true, className: "flex flex-col gap-2 rounded-lg border border-warning px-4 py-3", children: [_jsx("p", { className: "text-sm font-medium text-default-foreground", children: "What a stranger would not understand" }), _jsx("ul", { className: "flex list-disc flex-col gap-1 pl-5 text-sm text-muted-foreground", children: verdict.advice.map((one) => (_jsx("li", { children: one }, one))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "The zoo still accepted this view. This is advice for whoever reviews it, not a reason it failed." })] })) : null, _jsx(Link, { className: "text-sm text-muted-foreground underline hover:text-default-foreground", to: shapeZooPath(datastoreId, run.schema), children: "Open its zoo to keep it" })] })))
+        .with("gave-up", () => (_jsxs("div", { "data-verdict": "gave-up", className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-sm text-default-foreground", children: `It gave up after ${verdict.rounds ?? stages.length} round${verdict.rounds === 1 ? "" : "s"}. What the zoo kept saying:` }), _jsx("ul", { className: "flex list-disc flex-col gap-1 pl-5 text-sm text-muted-foreground", children: (verdict.problems ?? []).map((problem) => (_jsx("li", { children: problem }, problem))) })] })))
+        .with("no-data", () => (_jsx("p", { "data-verdict": "no-data", className: "text-sm text-muted-foreground", children: "Nothing to design from \u2014 this datastore holds no instances of it." })))
+        .otherwise(() => (_jsxs("p", { "data-verdict": "failed", className: "flex items-start gap-2 text-sm text-error-foreground", children: [_jsx(TriangleAlert, { size: 16, "aria-hidden": "true", className: "mt-0.5 shrink-0" }), verdict.error ?? "It broke, with no reason given."] })));
+}
+function verdictBadge(run) {
+    if (run.verdict === undefined)
+        return _jsx(Badge, { variant: "info", children: "Working" });
+    return match(run.verdict.status)
+        .with("accepted", () => _jsx(Badge, { variant: "success", children: "Accepted" }))
+        .with("gave-up", () => _jsx(Badge, { variant: "warning", children: "Gave up" }))
+        .with("no-data", () => _jsx(Badge, { variant: "secondary", children: "No data" }))
+        .otherwise(() => _jsx(Badge, { variant: "destructive", children: "Failed" }));
+}
+export function CoverageRun({ datastoreId }) {
+    const [runs, setRuns] = useState([]);
+    const [tally, setTally] = useState();
+    const [running, setRunning] = useState(false);
+    const [failure, setFailure] = useState();
+    const [stopped, setStopped] = useState(false);
+    const stop = useRef(undefined);
+    async function run() {
+        const controller = new AbortController();
+        stop.current = controller;
+        setRunning(true);
+        setFailure(undefined);
+        setStopped(false);
+        setTally(undefined);
+        setRuns([]);
+        try {
+            const response = await fetch(`/api/d/${encodeURIComponent(datastoreId)}/shapes/cover`, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ limit: 1 }),
+                signal: controller.signal,
+            });
+            if (!response.ok) {
+                setFailure(await problemFrom(response, `The run could not start (${response.status}).`));
+                return;
+            }
+            const body = await readNdjson(response, (line) => {
+                if (line["type"] === "progress")
+                    setRuns((sofar) => applyStep(sofar, line));
+                if (line["type"] === "shape")
+                    setRuns((sofar) => applyFinished(sofar, line));
+            });
+            if (isRecord(body) && body["type"] === "error") {
+                setFailure(problemOf(body, "The run failed."));
+                return;
+            }
+            if (isRecord(body)) {
+                setTally({
+                    accepted: readStrings(body["accepted"]),
+                    gaveUp: readNumber(body["gaveUp"]) ?? 0,
+                    noData: readNumber(body["noData"]) ?? 0,
+                    failed: readNumber(body["failed"]) ?? 0,
+                });
+            }
+        }
+        catch (caught) {
+            if (controller.signal.aborted)
+                setStopped(true);
+            else
+                setFailure(caught instanceof Error ? caught.message : String(caught));
+        }
+        finally {
+            setRunning(false);
+            stop.current = undefined;
+        }
+    }
+    const working = runs.find((one) => one.verdict === undefined);
+    return (_jsx(Card, { children: _jsxs("section", { "aria-labelledby": "coverage-run", className: "flex flex-col gap-4", children: [_jsx(CardTitle, { aside: running ? _jsx(Badge, { variant: "info", children: "Running" }) : undefined, children: _jsx("span", { id: "coverage-run", children: "Watch the Studio design one" }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: "It takes the shape at the top of the queue, looks at real instances, designs a card and shows it to the zoo until the zoo accepts it. Nothing is saved: this is for watching it work." }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "primary", size: "sm", disabled: running, onClick: () => void run(), children: [_jsx(Play, { size: 14, "aria-hidden": "true" }), running ? "Working…" : "Run the next one"] }), running ? (_jsxs(Button, { variant: "secondary", size: "sm", onClick: () => stop.current?.abort(), children: [_jsx(Square, { size: 14, "aria-hidden": "true" }), "Stop"] })) : null] }), _jsx("p", { "aria-live": "polite", className: "sr-only", children: isPresent(working) ? `${working.schema}: ${stageLabels[working.stage]}` : "" }), isPresent(failure) ? _jsx(ErrorState, { title: "That run did not start", hint: failure }) : null, isPresent(runs) ? (_jsx("ol", { "data-coverage-log": true, "aria-label": "What the Studio is doing", className: "flex flex-col gap-3", children: runs.map((one) => (_jsxs("li", { "data-shape": one.schema, className: "flex flex-col gap-3 rounded-lg border border-default-border bg-card/60 p-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-mono text-sm text-default-foreground", children: one.schema }), _jsx("span", { className: "text-xs text-muted-foreground", children: `Shape ${one.index} of ${one.total}` })] }), verdictBadge(one)] }), _jsx(StageRail, { run: one }), _jsx(Rounds, { rounds: one.rounds }), _jsx(VerdictPanel, { datastoreId: datastoreId, run: one })] }, one.schema))) })) : null, stopped ? _jsx("p", { className: "text-sm text-muted-foreground", children: "Stopped." }) : null, isPresent(tally) ? (_jsx("p", { "data-tally": true, className: "text-sm text-muted-foreground", children: `Finished: ${tally.accepted.length} designed, ${tally.gaveUp} gave up, ${tally.noData} with no data, ${tally.failed} broke. Nothing was saved.` })) : null] }) }));
+}

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

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

package/dist/app/home-page.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Link } from "react-router";
+import { ChevronRight, Database } from "lucide-react";
+import { EmptyState } from "../components/states";
+import { hornsPath } from "./paths";
+import { useMantaSession } from "../lib/manta/session";
+export function HomePage() {
+    const { datastores } = useMantaSession();
+    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsxs("header", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-2xl font-semibold text-default-foreground", children: "Manta Horns" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a datastore to see the Horns made from its data, or to make a new one." })] }), !isPresent(datastores) ? (_jsx(EmptyState, { title: "Your account has no datastores yet", hint: "A datastore is where your connected data lives. Ask the person who manages Manta at your company to give you access to one.", icon: _jsx(Database, { size: 20 }) })) : (_jsx("ul", { "data-datastores": true, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: datastores.map((datastore) => (_jsx("li", { children: _jsxs(Link, { to: hornsPath(datastore.id), className: "flex items-center gap-3 rounded-lg border border-default-border bg-card px-4 py-3 transition-colors hover:bg-card/70", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Database, { size: 16, "aria-hidden": "true" }) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-default-foreground", children: datastore.name }), _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground" })] }) }, datastore.id))) }))] }));
+}

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

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

package/dist/app/horn-page.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { useParams, useSearchParams } from "react-router";
+import { variablesFromSearch } from "@manta-eu/horns/render";
+import { BackLink, DatastoreMissing, ErrorState, Loading } from "../components/states";
+import { hornsPath } from "./paths";
+import { HornStudio } from "./horn-studio";
+import { useSavedHorn } from "./saved-horn";
+import { VariableBar } from "./variable-bar";
+import { MantaSparqlProvider } from "../lib/manta/providers";
+import { useMantaSession } from "../lib/manta/session";
+// A saved Horn, as the Studio's whole screen: the document comes back from the datastore and the snapshot is
+// built from it, so what is on screen is what is stored rather than what a client happened to be holding.
+export function HornPage() {
+    const { datastoreId, slug } = useParams();
+    const { datastores } = useMantaSession();
+    const datastore = datastores.find((candidate) => candidate.id === datastoreId);
+    if (!isPresent(datastore)) {
+        return (_jsx(Centered, { children: _jsx(DatastoreMissing, {}) }));
+    }
+    // The provider supplies the query client, so the reader has to sit inside it.
+    return (_jsx(MantaSparqlProvider, { datastoreId: datastore.id, children: _jsx(SavedHornPage, { slug: slug ?? "", datastoreId: datastore.id }) }));
+}
+/** Until there is a Horn to put in the Studio, the screen is just this. */
+function Centered({ children }) {
+    return (_jsx("main", { className: "flex h-svh w-full flex-col items-center justify-center gap-4 bg-sidebar p-6", children: _jsx("div", { className: "flex w-full max-w-2xl flex-col gap-4", children: children }) }));
+}
+function SavedHornPage({ datastoreId, slug }) {
+    const [search] = useSearchParams();
+    const horn = useSavedHorn(datastoreId, slug);
+    if (horn.isError) {
+        return (_jsxs(Centered, { children: [_jsx(BackLink, { to: hornsPath(datastoreId), label: "All Horns" }), _jsx(ErrorState, { title: "That Horn could not be opened", hint: horn.error instanceof Error ? horn.error.message : "It may have been removed." })] }));
+    }
+    if (!isPresent(horn.data)) {
+        return (_jsx(Centered, { children: _jsx(Loading, { label: "Opening the Horn\u2026" }) }));
+    }
+    return (_jsx(HornStudio, { datastoreId: datastoreId, slug: slug, stored: horn.data.horn, revision: horn.data.revision, backTo: hornsPath(datastoreId), variables: variablesFromSearch(horn.data.horn, search.toString()), toolbar: _jsx(VariableBar, { horn: horn.data.horn }) }));
+}

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { type Horn } from "@manta-eu/horns";
+type HornStudioProps = {
+    datastoreId: string;
+    /** Absent for a Horn that has never been saved: its first save names it from its title. */
+    slug?: string;
+    stored: Horn;
+    /** Absent for a Horn that has never been saved: there is no revision to build on. */
+    revision?: string;
+    /** Where the way out goes. */
+    backTo: string;
+    welcome?: string;
+    reassurance?: string;
+    placeholder?: string;
+    starters?: readonly string[];
+    /** What the URL sets, so a share link redraws the Horn it names. */
+    variables?: Readonly<Record<string, unknown>>;
+    /** Controls for the preview's own bar, such as the variables a share link carries. */
+    toolbar?: ReactNode;
+};
+/**
+ * The Studio as a whole screen, the way Lovable lays out a project: the conversation down the left, the Horn in
+ * a frame on the right, and saving in the bar across the top.
+ *
+ * The draft lives here and nowhere else. Each turn that changes it adds a version, the chat keeps a card for
+ * each, and the preview shows whichever one is picked — the latest unless someone went back to look. Saving is
+ * a separate, deliberate act, which is what makes the conversation free to be wrong.
+ */
+export declare function HornStudio(props: HornStudioProps): import("react").JSX.Element;
+export {};