@manta-eu/horns-kit 0.1.0

package/dist/catalog.d.ts

@@ -0,0 +1,21 @@
+export declare const mantaReactCatalog: {
+    catalogVersion: 1;
+    source: {
+        package: string;
+        repository: string;
+        commit: string;
+    };
+    components: {
+        id: string;
+        export: string;
+        module: string;
+        role: "entity-detail" | "entity-plural" | "entity-card" | "action-card" | "generic-card";
+        input: "iri" | "entity" | "iris";
+        appliesTo: {
+            classes: string[];
+            actionShapes: string[];
+        };
+        stories: string[];
+        sandbox: "unverified" | "compatible" | "incompatible";
+    }[];
+};

package/dist/catalog.js

@@ -0,0 +1,7 @@
+import { componentCatalogSchema } from "@manta-eu/horns";
+import mantaReact from "./catalog/manta-react.json" with { type: "json" };
+// Built-in components the Studio can pin before writing anything new. Regenerate with `catalog:snapshot`.
+//
+// It lives in a module of its own, apart from the package index, because it is data: a node script can
+// import this without loading the kit's `.tsx`, which node's type-stripping cannot read.
+export const mantaReactCatalog = componentCatalogSchema.parse(mantaReact);

package/dist/embed/client.d.ts

@@ -0,0 +1,15 @@
+import { type Root } from "react-dom/client";
+import { type HornSnapshotViewProps } from "./horn-snapshot-view.tsx";
+export declare const hornHydrationAttribute = "data-horn-hydration";
+export type HydrateHornEmbedsOptions = {
+    root?: ParentNode;
+    onRecoverableError?: (error: unknown, embedId: string) => void;
+    /**
+     * Draws a written view once the page is live. The server sent a placeholder for it, so this is the one
+     * thing hydration adds rather than adopts — a host that passes nothing keeps the placeholder.
+     */
+    writtenView?: HornSnapshotViewProps["writtenView"];
+    /** Draws a catalog card once the page is live, for the same reason as `writtenView`. */
+    catalogCard?: HornSnapshotViewProps["catalogCard"];
+};
+export declare function hydrateHornEmbeds(options?: HydrateHornEmbedsOptions): Root[];

package/dist/embed/client.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode, useEffect } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { hornEmbedAttribute, hornReadyAttribute, hornSnapshotAttribute, parseHornSnapshot, } from "@manta-eu/horns/render";
+import { HornSnapshotView } from "./horn-snapshot-view.js";
+// Set when React had to discard server markup: a determinism bug in a view, worth surfacing loudly.
+export const hornHydrationAttribute = "data-horn-hydration";
+const hydrated = new WeakSet();
+function MarkReady({ element, children }) {
+    useEffect(() => {
+        element.setAttribute(hornReadyAttribute, "true");
+    }, [element]);
+    return children;
+}
+function modeOf(value) {
+    return value === "embed" || value === "capture" ? value : "page";
+}
+function themeOf(value) {
+    return value === "dark" ? "dark" : "light";
+}
+// Hydrates every server-rendered embed under `root` from its own snapshot script, with no fetch: the data is
+// already on the page. Safe to call again after a host inserts more embeds.
+export function hydrateHornEmbeds(options = {}) {
+    const scope = options.root ?? document;
+    const scripts = [...scope.querySelectorAll(`script[${hornSnapshotAttribute}]`)];
+    return [...scope.querySelectorAll(`[${hornEmbedAttribute}]`)].flatMap((element) => {
+        if (hydrated.has(element))
+            return [];
+        const embedId = element.getAttribute(hornEmbedAttribute) ?? "";
+        const text = scripts.find((script) => script.getAttribute(hornSnapshotAttribute) === embedId)?.textContent;
+        if (!text)
+            return [];
+        hydrated.add(element);
+        const snapshot = parseHornSnapshot(text);
+        const view = (_jsx(HornSnapshotView, { snapshot: snapshot, mode: modeOf(element.getAttribute("data-horn-mode")), theme: themeOf(element.getAttribute("data-horn-theme")), ...(options.writtenView ? { writtenView: options.writtenView } : {}), ...(options.catalogCard ? { catalogCard: options.catalogCard } : {}) }));
+        return [
+            hydrateRoot(element, _jsx(StrictMode, { children: _jsx(MarkReady, { element: element, children: view }) }), {
+                onRecoverableError: (error) => {
+                    element.setAttribute(hornHydrationAttribute, "recovered");
+                    options.onRecoverableError?.(error, embedId);
+                },
+            }),
+        ];
+    });
+}

package/dist/embed/horn-snapshot-view.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from "react";
+import { type HornSnapshot, type SnapshotView } from "@manta-eu/horns/render";
+import { type ChartTheme, type EntityLink } from "../look/index.ts";
+import { type PlanActions } from "./plan-strip.tsx";
+export type HornViewMode = "page" | "embed" | "capture";
+/**
+ * What a written view gets beyond its own rows: the snapshot's names and where each IRI opens. A view is
+ * handed these rather than composing an href, because the path belongs to the host, not to the source.
+ */
+export type WrittenViewContext = {
+    labels: Readonly<Record<string, string>>;
+    links: Readonly<Record<string, EntityLink>>;
+    /**
+     * The datastore the Horn belongs to.
+     *
+     * A catalog card fetches its own entity, so it needs somewhere to fetch from — and a server-rendered Horn
+     * document mounts no providers of its own. Without this the card spins for ever on a shared link.
+     */
+    datastoreId: string;
+};
+export type HornSnapshotViewProps = {
+    snapshot: HornSnapshot;
+    mode?: HornViewMode;
+    theme?: ChartTheme;
+    /** What the viewer may do with the action plans behind a view. Without it plans are shown, never run. */
+    planActions?: PlanActions;
+    /**
+     * Controls a host hangs on each view's own card — renaming it, taking it out. The kit only makes room: the
+     * markup is the host's, so a capture, which passes none, draws exactly what it drew before.
+     */
+    viewControls?: (view: SnapshotView) => ReactNode;
+    /**
+     * Draws a written view. The kit knows neither `@manta-eu/react` nor how to run model-written source, so a
+     * host that wants written views supplies this — `WrittenView` from `@manta-eu/horns-kit` does the work,
+     * given the host's own surface. Without it a written view stays a placeholder, which is also what a server
+     * render and a JavaScript-off capture always see.
+     */
+    writtenView?: (content: Extract<SnapshotView["content"], {
+        lane: "sandbox";
+    }>, view: SnapshotView, context: WrittenViewContext) => ReactNode;
+    /**
+     * Draws a catalog card. Same bargain as `writtenView`: the kit knows nothing of `@manta-eu/react`, so a
+     * host that wants cards supplies this and the card fetches its own entity in a browser. Without it a card
+     * stays a placeholder, which is what a server render and a capture always see.
+     */
+    catalogCard?: (content: Extract<SnapshotView["content"], {
+        lane: "component";
+    }>, view: SnapshotView, context: WrittenViewContext) => ReactNode;
+};
+/**
+ * Where each of a snapshot's IRIs opens, ready to hand a view.
+ *
+ * The snapshot stores what the link says; the path is composed here, because it belongs to the host rather
+ * than to anything a model wrote. Exported for hosts that draw one view on their own — a zoo, an entity page.
+ */
+export declare function entityLinks(snapshot: HornSnapshot): Record<string, EntityLink>;
+/** The widest a page is allowed to get. */
+export declare const maxPageWidth = 1600;
+/**
+ * The theme a Horn draws in: its own, and the host's only when it declares none. Exported because a host that
+ * wraps the markup has to name the same theme it rendered with, or hydration draws a different Horn.
+ */
+export declare function hornSurface(snapshot: HornSnapshot, theme: ChartTheme): ChartTheme;
+export declare function HornSnapshotView(props: HornSnapshotViewProps): import("react").JSX.Element;

package/dist/embed/horn-snapshot-view.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { gridColumns } from "@manta-eu/horns";
+import { captureWidth, entityLinkPath } from "@manta-eu/horns/render";
+import { chartPalette, hornChrome } from "../look/index.js";
+import { PlanStrip } from "./plan-strip.js";
+/**
+ * Where each of a snapshot's IRIs opens, ready to hand a view.
+ *
+ * The snapshot stores what the link says; the path is composed here, because it belongs to the host rather
+ * than to anything a model wrote. Exported for hosts that draw one view on their own — a zoo, an entity page.
+ */
+export function entityLinks(snapshot) {
+    return Object.fromEntries(Object.entries(snapshot.links).map(([iri, label]) => [
+        iri,
+        { href: entityLinkPath(snapshot.horn.datastoreId, iri), label },
+    ]));
+}
+const font = "Inter, system-ui, sans-serif";
+/** The widest a page is allowed to get. */
+export const maxPageWidth = 1600;
+/** One row of the layout: what a view with `h: 1` is at least as tall as. */
+const rowHeight = 72;
+const pagePadding = 24;
+/** Narrower than this a card of any span is not worth drawing; it flows onto its own row instead. */
+const minPageWidth = 720;
+const minCard = 220;
+const surfaces = {
+    light: { ink: "#111827", muted: "#6b7280", card: "#ffffff", canvas: "#f4f5f7", border: "#e5e7eb", error: "#b91c1c" },
+    dark: { ink: "#f3f4f6", muted: "#9ca3af", card: "#111827", canvas: "#030712", border: "#1f2937", error: "#fca5a5" },
+};
+// Rendered twice from one snapshot — to a string on a server, then hydrated in a browser — so nothing here
+// may read the clock, the locale or the window.
+function asOf(iso) {
+    return `Data as of ${iso.slice(0, 10)} ${iso.slice(11, 16)} UTC`;
+}
+function filtersOf(snapshot) {
+    const set = snapshot.variables.filter((variable) => variable.value !== null);
+    if (set.length === 0)
+        return undefined;
+    return set.map((variable) => `${variable.label}: ${JSON.stringify(variable.value)}`).join(" · ");
+}
+/** What share of a row `span` columns is, as a percentage with a third's trailing noise left off. */
+function share(span) {
+    return Math.round(((span / gridColumns) * 100 + Number.EPSILON) * 1e4) / 1e4;
+}
+/**
+ * Holds a written view's place through hydration.
+ *
+ * The server sent the placeholder, so the first client render has to be the placeholder too or React
+ * discards the whole tree and re-renders it — which is a real bug, not a cosmetic one, because every other
+ * view on the page gets thrown away with it. Drawing waits for the pass after mount, which is also the first
+ * pass where there is a browser to transpile in.
+ */
+function WrittenSlot({ placeholder, draw }) {
+    const [live, setLive] = useState(false);
+    useEffect(() => setLive(true), []);
+    return live ? draw() : placeholder;
+}
+function ViewCard(props) {
+    const { view, theme, chrome, hornStyle, labels, links, plans, planActions, controls, writtenView } = props;
+    const { catalogCard, datastoreId, style } = props;
+    const context = { labels, links, datastoreId };
+    const colors = surfaces[theme];
+    const { content } = view;
+    return (_jsxs("section", { "data-horn-view": view.id, style: { background: colors.card, padding: chrome.padding, ...style }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 8,
+                    margin: `0 0 ${chrome.padding - 4}px`,
+                }, children: [_jsx("h2", { style: { margin: 0, fontSize: 15, lineHeight: "20px", color: colors.ink }, children: view.title }), controls === undefined ? null : _jsx("div", { "data-view-controls": true, children: controls })] }), content.lane === "component" ? (_jsx(WrittenSlot, { placeholder: _jsx("p", { style: { margin: 0, color: colors.muted, fontSize: 14 }, children: "This view is a catalog card, which draws in the browser rather than here." }), draw: () => catalogCard?.(content, view, context) })) : content.lane === "sandbox" ? (_jsx(WrittenSlot, { placeholder: _jsx("p", { style: { margin: 0, color: colors.muted, fontSize: 14 }, children: "This view is written code, which draws in the browser rather than here." }), draw: () => writtenView?.(content, view, context) })) : (_jsx("p", { role: "alert", style: { margin: 0, color: colors.error, fontSize: 14 }, children: content.message })), content.lane === "sandbox"
+                ? (content.plans ?? []).map((behind) => {
+                    const plan = plans.find((one) => one.iri === behind.plan);
+                    return plan === undefined ? null : (_jsx(PlanStrip, { plan: plan, onView: behind.entities, labels: labels, links: links, palette: chartPalette(theme, hornStyle), actions: planActions }, plan.iri));
+                })
+                : null] }));
+}
+/**
+ * The theme a Horn draws in: its own, and the host's only when it declares none. Exported because a host that
+ * wraps the markup has to name the same theme it rendered with, or hydration draws a different Horn.
+ */
+export function hornSurface(snapshot, theme) {
+    return snapshot.style.theme ?? theme;
+}
+export function HornSnapshotView(props) {
+    const { snapshot, mode = "page", theme = "light", planActions, viewControls, writtenView, catalogCard, } = props;
+    const style = snapshot.style;
+    const surface = hornSurface(snapshot, theme);
+    const colors = surfaces[surface];
+    const chrome = hornChrome(style);
+    const links = entityLinks(snapshot);
+    if (mode === "capture") {
+        return (_jsx("main", { style: { width: captureWidth, background: colors.card, fontFamily: font }, children: snapshot.views.map((view) => (_jsx(ViewCard, { view: view, theme: surface, chrome: chrome, hornStyle: style, labels: snapshot.labels, links: links, datastoreId: snapshot.horn.datastoreId, plans: snapshot.plans, 
+                // A capture on a server has no browser to draw written source in and passes neither of these, so
+                // it still gets the placeholder. A capture taken *by* a browser passes them and gets the view.
+                writtenView: writtenView, catalogCard: catalogCard }, view.id))) }));
+    }
+    if (mode === "embed") {
+        return (_jsx("div", { style: { display: "grid", gap: chrome.gap, fontFamily: font, color: colors.ink }, children: snapshot.views.map((view) => (_jsx(ViewCard, { view: view, theme: surface, chrome: chrome, hornStyle: style, labels: snapshot.labels, links: links, datastoreId: snapshot.horn.datastoreId, plans: snapshot.plans, planActions: planActions, writtenView: writtenView, catalogCard: catalogCard, style: { borderRadius: chrome.radius, border: `1px solid ${colors.border}` } }, view.id))) }));
+    }
+    const byId = new Map(snapshot.views.map((view) => [view.id, view]));
+    const order = new Map(snapshot.views.map((view, index) => [view.id, index]));
+    const filters = filtersOf(snapshot);
+    // The layout is read as rows: down the page by `y`, across it by `x`. A card takes the share of the row its
+    // `w` asks for and the row holds as many cards as fit, so a narrow screen drops to fewer per row rather than
+    // squeezing every card into a sliver — and a chart drawn for the box it lands in never has to be scaled.
+    const placed = [...snapshot.layout.items]
+        .filter((item) => byId.has(item.viewId))
+        .sort((a, b) => a.y - b.y || a.x - b.x || (order.get(a.viewId) ?? 0) - (order.get(b.viewId) ?? 0));
+    const laidOut = new Set(placed.map((item) => item.viewId));
+    const cards = [
+        ...placed.flatMap((item) => {
+            const view = byId.get(item.viewId);
+            return view ? [{ view, span: item.w, rows: item.h }] : [];
+        }),
+        // A view the layout does not place still gets drawn: the document is what is shown, not the placement.
+        ...snapshot.views.filter((view) => !laidOut.has(view.id)).map((view) => ({ view, span: gridColumns, rows: 4 })),
+    ];
+    return (_jsx("main", { style: { minHeight: "100vh", background: colors.canvas, color: colors.ink, fontFamily: font }, children: _jsxs("div", { style: {
+                maxWidth: maxPageWidth,
+                margin: "0 auto",
+                padding: pagePadding,
+                boxSizing: "border-box",
+                display: "flex",
+                flexDirection: "column",
+                gap: 16,
+            }, children: [_jsxs("header", { children: [_jsx("h1", { style: { margin: 0, fontSize: 24, lineHeight: "32px" }, children: snapshot.horn.title }), _jsx("p", { style: { margin: "4px 0 0", fontSize: 13, color: colors.muted }, children: `${asOf(snapshot.generatedAt)}${filters ? ` · ${filters}` : ""}` })] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "stretch", gap: chrome.gap }, children: cards.map(({ view, span, rows }) => (_jsx("div", { style: {
+                            display: "flex",
+                            flexGrow: 1,
+                            flexShrink: 1,
+                            flexBasis: `calc(${share(span)}% - ${chrome.gap}px)`,
+                            minWidth: `min(100%, ${Math.max(minCard, (span / gridColumns) * minPageWidth)}px)`,
+                            minHeight: rows * rowHeight + (rows - 1) * chrome.gap,
+                            boxSizing: "border-box",
+                        }, children: _jsx(ViewCard, { view: view, theme: surface, chrome: chrome, hornStyle: style, labels: snapshot.labels, links: links, datastoreId: snapshot.horn.datastoreId, plans: snapshot.plans, planActions: planActions, writtenView: writtenView, catalogCard: catalogCard, ...(viewControls ? { controls: viewControls(view) } : {}), style: {
+                                flex: "1 1 auto",
+                                minWidth: 0,
+                                borderRadius: chrome.radius,
+                                boxShadow: "0 1px 2px rgba(17, 24, 39, 0.06)",
+                            } }) }, view.id))) })] }) }));
+}

package/dist/embed/plan-strip.d.ts

@@ -0,0 +1,49 @@
+import type { PlanChange, PlanStatus, SnapshotPlan } from "@manta-eu/horns/render";
+import type { ChartPalette } from "../look/palette.ts";
+import type { EntityLink } from "../look/types.ts";
+export declare const maxShownChanges = 4;
+/**
+ * What a host lets a viewer do with a plan. The kit only asks: the host confirms, calls agents as the viewer and
+ * reports back through `status`, so a Horn rendered without actions — a capture, an embed that cannot run
+ * anything — shows the same plan with no buttons.
+ */
+export type PlanActions = {
+    onPreview: (plan: SnapshotPlan) => void;
+    onRun: (plan: SnapshotPlan) => void;
+    /** Newer than the snapshot, by plan: how a run the host started is going. */
+    status?: Readonly<Record<string, PlanStatus>>;
+    /** Plans the host is sending a request for right now. */
+    pending?: ReadonlySet<string>;
+};
+/**
+ * What the plan is called: its own name when the graph gives one, else what it would change — "Change status",
+ * "Change budget amount and daily budget" — so two plans behind one view read as two different things.
+ */
+export declare function planTitle(plan: SnapshotPlan, labels: Readonly<Record<string, string>>): string;
+/** "Changes 1 campaign and 3 campaign budgets." */
+export declare function planSummary(plan: SnapshotPlan, labels: Readonly<Record<string, string>>): string;
+export declare function planValue(value: PlanChange["from"], change: PlanChange, labels: Readonly<Record<string, string>>): string;
+/**
+ * How the plan's last run went, in words. A run from before this page was opened says when it was, because a
+ * preview from last week says little about the plan as it stands now.
+ */
+export declare function planStateText(status: PlanStatus, earlier?: boolean): {
+    text: string;
+    tone: "quiet" | "busy" | "good" | "bad";
+};
+/**
+ * A real run is offered only once a preview has finished cleanly while the viewer watched: one from before the
+ * page was opened checked the plan as it was then.
+ */
+export declare function runnable(live: PlanStatus | undefined): boolean;
+type PlanStripProps = {
+    plan: SnapshotPlan;
+    /** The things the plan changes that this view draws, shown first. */
+    onView: readonly string[];
+    labels: Readonly<Record<string, string>>;
+    links: Readonly<Record<string, EntityLink>>;
+    palette: ChartPalette;
+    actions?: PlanActions | undefined;
+};
+export declare function PlanStrip(props: PlanStripProps): import("react").JSX.Element;
+export {};

package/dist/embed/plan-strip.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { match } from "ts-pattern";
+import { formatMeasure, missingValue } from "../look/format.js";
+export const maxShownChanges = 4;
+// "Campaign Budget" → "campaign budgets". English only, like every other word the kit prints.
+function plural(noun, count) {
+    const word = noun.toLowerCase();
+    if (count === 1)
+        return word;
+    if (/[^aeiou]y$/.test(word))
+        return `${word.slice(0, -1)}ies`;
+    if (/(s|x|ch|sh)$/.test(word))
+        return `${word}es`;
+    return `${word}s`;
+}
+function listed(parts) {
+    if (parts.length <= 1)
+        return parts.join("");
+    return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1] ?? ""}`;
+}
+/**
+ * What the plan is called: its own name when the graph gives one, else what it would change — "Change status",
+ * "Change budget amount and daily budget" — so two plans behind one view read as two different things.
+ */
+export function planTitle(plan, labels) {
+    if (plan.name !== undefined)
+        return plan.name;
+    const settings = [
+        ...new Set(plan.changes.flatMap((change) => {
+            const label = labels[change.property];
+            return label === undefined ? [] : [label.toLowerCase()];
+        })),
+    ];
+    return settings.length === 0 ? "Suggested changes" : `Change ${listed(settings)}`;
+}
+/** "Changes 1 campaign and 3 campaign budgets." */
+export function planSummary(plan, labels) {
+    const typed = plan.kinds.filter((kind) => kind.type !== undefined && labels[kind.type] !== undefined);
+    if (typed.length === 0) {
+        const count = Math.max(0, ...plan.kinds.map((kind) => kind.count));
+        return count === 0 ? "Changes nothing yet." : `Changes ${count} ${count === 1 ? "thing" : "things"}.`;
+    }
+    return `Changes ${listed(typed.map((kind) => `${kind.count} ${plural(labels[kind.type ?? ""] ?? "", kind.count)}`))}.`;
+}
+// Platforms name states in capitals: "PAUSED" reads "Paused".
+function spoken(text) {
+    if (!/^[A-Z][A-Z0-9_]*$/.test(text))
+        return text;
+    const words = text.replace(/_/g, " ").toLowerCase();
+    return `${words.charAt(0).toUpperCase()}${words.slice(1)}`;
+}
+export function planValue(value, change, labels) {
+    if (value === null)
+        return "not set";
+    if (typeof value === "boolean")
+        return value ? "Yes" : "No";
+    if (typeof value === "number")
+        return formatMeasure(value, { unit: change.unit, currency: change.currency });
+    return labels[value] ?? spoken(value);
+}
+/**
+ * How the plan's last run went, in words. A run from before this page was opened says when it was, because a
+ * preview from last week says little about the plan as it stands now.
+ */
+export function planStateText(status, earlier = false) {
+    const said = planStateWords(status);
+    const day = status.lastRun?.startedAt.slice(0, 10);
+    return earlier && status.state !== "draft" && day !== undefined && day !== ""
+        ? { ...said, text: `${said.text} (${day})` }
+        : said;
+}
+function planStateWords(status) {
+    const preview = status.lastRun?.preview === true;
+    return match(status.state)
+        .with("draft", () => ({ text: "Not run yet", tone: "quiet" }))
+        .with("running", () => ({ text: preview ? "Previewing…" : "Making the changes…", tone: "busy" }))
+        .with("completed", () => preview
+        ? { text: "Preview finished — nothing was changed", tone: "good" }
+        : { text: "Changes made", tone: "good" })
+        .with("failed", () => ({
+        text: preview ? "The preview found a problem" : "The changes did not go through",
+        tone: "bad",
+    }))
+        .with("timed-out", () => ({ text: "It took too long and stopped", tone: "bad" }))
+        .exhaustive();
+}
+/**
+ * A real run is offered only once a preview has finished cleanly while the viewer watched: one from before the
+ * page was opened checked the plan as it was then.
+ */
+export function runnable(live) {
+    return live?.state === "completed" && live.lastRun?.preview === true && live.lastRun.error === undefined;
+}
+export function PlanStrip(props) {
+    const { plan, onView, labels, links, palette, actions } = props;
+    const live = actions?.status?.[plan.iri];
+    const status = live ?? plan;
+    const state = planStateText(status, live === undefined);
+    const title = planTitle(plan, labels);
+    const pending = actions?.pending?.has(plan.iri) === true;
+    const near = new Set(onView);
+    const changes = [...plan.changes].sort((a, b) => Number(near.has(b.entity)) - Number(near.has(a.entity)));
+    const shown = changes.slice(0, maxShownChanges);
+    const hidden = plan.changes.length - shown.length;
+    const toneColor = {
+        quiet: palette.muted,
+        busy: palette.secondary,
+        good: palette.series[2] ?? palette.ink,
+        bad: palette.alert,
+    }[state.tone];
+    const nameOf = (entity) => labels[entity] ?? missingValue;
+    const reasonsFor = (entity) => plan.reasons.filter((reason) => reason.entity === entity);
+    const busy = pending || status.state === "running";
+    const button = (label, onClick, enabled, primary, hint) => (_jsx("button", { type: "button", onClick: onClick, disabled: !enabled, title: hint, style: {
+            font: "inherit",
+            fontSize: 13,
+            fontWeight: 600,
+            padding: "6px 12px",
+            borderRadius: 6,
+            cursor: enabled ? "pointer" : "not-allowed",
+            opacity: enabled ? 1 : 0.5,
+            border: `1px solid ${primary ? palette.ink : palette.baseline}`,
+            background: primary ? palette.ink : "transparent",
+            color: primary ? palette.surface : palette.ink,
+        }, children: label }));
+    return (_jsxs("section", { "data-horn-plan": plan.iri, "data-plan-state": status.state, "aria-label": title, style: {
+            marginTop: 12,
+            padding: 12,
+            borderRadius: 8,
+            border: `1px solid ${palette.grid}`,
+            background: palette.surface,
+            color: palette.ink,
+            fontSize: 13,
+            lineHeight: "18px",
+        }, children: [_jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", justifyContent: "space-between", gap: 8 }, children: [_jsx("strong", { style: { fontSize: 14 }, children: title }), _jsx("span", { "data-plan-status": true, style: { color: toneColor }, children: pending ? "Sending…" : state.text })] }), _jsx("p", { style: { margin: "2px 0 8px", color: palette.secondary }, children: planSummary(plan, labels) }), status.lastRun?.error !== undefined && (status.state === "failed" || status.state === "timed-out") ? (_jsx("p", { role: "alert", style: { margin: "0 0 8px", color: palette.alert }, children: status.lastRun.error })) : null, shown.length > 0 ? (_jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 6 }, children: shown.map((change, index) => {
+                    const link = links[change.entity];
+                    const name = nameOf(change.entity);
+                    const why = reasonsFor(change.entity);
+                    return (_jsxs("li", { "data-plan-change": true, children: [link === undefined ? (_jsx("span", { style: { fontWeight: 600 }, children: name })) : (_jsx("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", title: link.label, style: { fontWeight: 600, color: "inherit", textUnderlineOffset: 3 }, children: name })), _jsxs("span", { style: { color: palette.secondary }, children: [` — ${labels[change.property] ?? "A setting"}: `, _jsx("span", { style: { textDecoration: "line-through", textDecorationColor: palette.muted }, children: planValue(change.from, change, labels) }), " → "] }), _jsx("span", { style: { fontWeight: 600 }, children: planValue(change.to, change, labels) }), why.length > 0 ? (_jsx("div", { style: { color: palette.muted }, children: `Why: ${why.map((reason) => reason.text).join("; ")}` })) : null] }, index));
+                }) })) : (_jsx("p", { style: { margin: 0, color: palette.muted }, children: "Nothing here differs from how things are now." })), hidden > 0 ? (_jsx("p", { style: { margin: "6px 0 0", color: palette.muted }, children: `And ${hidden} more ${hidden === 1 ? "change" : "changes"}.` })) : null, actions === undefined ? null : (_jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }, children: [button("Preview", () => actions.onPreview(plan), !busy, false, "Check the changes without making them"), button("Make these changes", () => actions.onRun(plan), !busy && runnable(live), true, runnable(live) ? "Changes them in the platforms they came from" : "Preview it first")] }))] }));
+}

package/dist/embed/server.d.ts

@@ -0,0 +1,10 @@
+import { type HornSnapshot } from "@manta-eu/horns/render";
+import type { ChartTheme } from "../look/index.ts";
+import { type HornViewMode } from "./horn-snapshot-view.tsx";
+export type RenderHornEmbedOptions = {
+    snapshot: HornSnapshot;
+    mode?: HornViewMode;
+    theme?: ChartTheme;
+    embedId?: string;
+};
+export declare function renderHornEmbed(options: RenderHornEmbedOptions): string;

package/dist/embed/server.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import { hornEmbedAttribute, hornSnapshotAttribute, serializeHornSnapshot, } from "@manta-eu/horns/render";
+import { hornSurface, HornSnapshotView } from "./horn-snapshot-view.js";
+const embedIdPattern = /^[a-z0-9-]{1,64}$/;
+// For hosts that assemble HTML as a string. React hosts render <HornSnapshotView> in their own tree; either
+// way `hydrateHornEmbeds` (`@manta-eu/horns-kit/client`) picks the markup up from the snapshot beside it.
+export function renderHornEmbed(options) {
+    const { snapshot, mode = "page", theme = "light", embedId = "horn" } = options;
+    if (!embedIdPattern.test(embedId))
+        throw new Error(`"${embedId}" is not a valid embed id.`);
+    const markup = renderToString(_jsx(HornSnapshotView, { snapshot: snapshot, mode: mode, theme: theme }));
+    // The theme the markup was drawn in, which is the Horn's own when it declared one.
+    const surface = hornSurface(snapshot, theme);
+    return (`<div ${hornEmbedAttribute}="${embedId}" data-horn-mode="${mode}" data-horn-theme="${surface}">${markup}</div>` +
+        `<script type="application/json" ${hornSnapshotAttribute}="${embedId}">${serializeHornSnapshot(snapshot)}</script>`);
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { mantaReactCatalog } from "./catalog.ts";
+export * from "./look/index.ts";
+export { shapeViewSpecs } from "./shape-views/index.ts";
+export { entityLinks, HornSnapshotView, type HornSnapshotViewProps, type HornViewMode, type WrittenViewContext, } from "./embed/horn-snapshot-view.tsx";
+export { planStateText, planSummary, planTitle, runnable, type PlanActions } from "./embed/plan-strip.tsx";
+export type { WrittenSurface } from "./written/runtime.ts";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { mantaReactCatalog } from "./catalog.js";
+export * from "./look/index.js";
+export { shapeViewSpecs } from "./shape-views/index.js";
+export { entityLinks, HornSnapshotView, } from "./embed/horn-snapshot-view.js";
+export { planStateText, planSummary, planTitle, runnable } from "./embed/plan-strip.js";

package/dist/look/chrome.d.ts

@@ -0,0 +1,11 @@
+import type { HornStyle } from "@manta-eu/horns";
+export type HornChrome = {
+    /** Inside a card. */
+    padding: number;
+    /** Between cards. */
+    gap: number;
+    /** Card and chart-frame corners. */
+    radius: number;
+};
+/** How much room a Horn takes, as numbers rather than classes: the capture browser has no stylesheet. */
+export declare function hornChrome(style?: HornStyle): HornChrome;

package/dist/look/chrome.js

@@ -0,0 +1,7 @@
+const radii = { sharp: 0, soft: 8, round: 16 };
+const densities = { compact: 12, comfortable: 16 };
+/** How much room a Horn takes, as numbers rather than classes: the capture browser has no stylesheet. */
+export function hornChrome(style) {
+    const padding = densities[style?.density ?? "comfortable"];
+    return { padding, gap: padding, radius: radii[style?.radius ?? "soft"] };
+}

package/dist/look/format.d.ts

@@ -0,0 +1,15 @@
+import type { cardValueFormats } from "@manta-eu/horns";
+import type { ValueUnit } from "@manta-eu/horns/render";
+export type ValueFormat = (typeof cardValueFormats)[number];
+export declare const missingValue = "\u2014";
+/**
+ * How to print one number: what the ontology says it measures, and the currency the view's amounts are in.
+ * The amounts are already scaled; this only decides how they read.
+ */
+export type Measure = {
+    format?: ValueFormat | undefined;
+    unit?: ValueUnit | undefined;
+    currency?: string | undefined;
+};
+export declare function currencyPrefix(code: string): string;
+export declare function formatMeasure(value: number | null | undefined, measure?: Measure): string;

package/dist/look/format.js

@@ -0,0 +1,44 @@
+// Fixed locales, never the runtime's, so the server and the hydrating browser print identical digits.
+// Compact uses en-US for the conventional capital "K"/"M" (en-GB prints "12.9k").
+const formatters = {
+    number: new Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }),
+    integer: new Intl.NumberFormat("en-GB", { maximumFractionDigits: 0 }),
+    percent: new Intl.NumberFormat("en-GB", { style: "percent", maximumFractionDigits: 1 }),
+    compact: new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }),
+};
+export const missingValue = "—";
+// A symbol where one is unambiguous to an English reader, the code everywhere else. A table rather than
+// `Intl`'s currency style: runtimes disagree on symbols ("$" or "US$"), and the server and the hydrating
+// browser must print the same text.
+const currencySymbols = {
+    USD: "$",
+    EUR: "€",
+    GBP: "£",
+    JPY: "¥",
+    AUD: "A$",
+    CAD: "CA$",
+    NZD: "NZ$",
+    INR: "₹",
+};
+export function currencyPrefix(code) {
+    return currencySymbols[code] ?? `${code} `;
+}
+export function formatMeasure(value, measure = {}) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return missingValue;
+    const { unit, currency } = measure;
+    // The ontology's PERCENT is already out of a hundred, so it is printed with its sign and never multiplied.
+    // RATIO is not a share of one: it is ROAS (3.2), a click-through fraction or a score alike, so it stays the
+    // plain number it is.
+    if (unit === "percent") {
+        const format = measure.format === undefined || measure.format === "percent" ? "number" : measure.format;
+        return `${formatters[format].format(value)}%`;
+    }
+    const format = measure.format ?? "number";
+    const digits = formatters[format].format(value === 0 ? 0 : Math.abs(value));
+    const sign = value < 0 ? "-" : "";
+    if (unit === "currency" && currency !== undefined && format !== "percent") {
+        return `${sign}${currencyPrefix(currency)}${digits}`;
+    }
+    return `${sign}${digits}`;
+}

package/dist/look/index.d.ts

@@ -0,0 +1,4 @@
+export { hornChrome, type HornChrome } from "./chrome.ts";
+export { accentPalette, chartPalette, chartPalettes, type ChartPalette } from "./palette.ts";
+export { formatMeasure, missingValue } from "./format.ts";
+export type { ChartTheme, EntityLink } from "./types.ts";

package/dist/look/index.js

@@ -0,0 +1,5 @@
+// What the kit still draws itself: the frame around a view, the plan strip under it, and the numbers in
+// both. Everything inside a view is written source composing `@manta-eu/react`.
+export { hornChrome } from "./chrome.js";
+export { accentPalette, chartPalette, chartPalettes } from "./palette.js";
+export { formatMeasure, missingValue } from "./format.js";