@manta-eu/horns-kit 0.1.0 → 0.1.1

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

@@ -1,7 +1,8 @@
 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";
+import type { PlanActions } from "./plan-strip.tsx";
+import { type ExplainedFact } from "./view-powers.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
@@ -24,6 +25,17 @@ export type HornSnapshotViewProps = {
     theme?: ChartTheme;
     /** What the viewer may do with the action plans behind a view. Without it plans are shown, never run. */
     planActions?: PlanActions;
+    /**
+     * Opens the explanation behind a value a view marked with `WhyThis`. Drawing one needs the design system,
+     * which the kit has not got; without this the marks are left off and the values draw alone, which is what
+     * a server render and a capture always see.
+     */
+    explain?: (fact: ExplainedFact) => void;
+    /**
+     * Narrows the Horn when a view asks. Every binding taking that variable as a parameter is re-run by the
+     * host, which is how a tile filters a list it knows nothing about. Without it a view draws no controls.
+     */
+    onVariableChange?: (id: string, value: unknown) => void;
     /**
      * 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.

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

@@ -3,7 +3,8 @@ 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";
+import { PlanPlacementProvider } from "./plan-placement.js";
+import { ExplainPlacementProvider, HornFiltersProvider } from "./view-powers.js";
 /**
  * Where each of a snapshot's IRIs opens, ready to hand a view.
  *
@@ -34,11 +35,20 @@ const surfaces = {
 function asOf(iso) {
     return `Data as of ${iso.slice(0, 10)} ${iso.slice(11, 16)} UTC`;
 }
+/**
+ * What the Horn was drawn for, in the header. A value that is an IRI is shown by the name the snapshot
+ * already holds for it: the IRIs are opaque, and one printed here says nothing to the person reading it.
+ */
 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(" · ");
+    const said = (value) => {
+        if (typeof value !== "string")
+            return JSON.stringify(value);
+        return snapshot.labels[value] ?? value;
+    };
+    return set.map((variable) => `${variable.label}: ${said(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) {
@@ -69,12 +79,17 @@ function ViewCard(props) {
                     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] }));
+                }, 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" ? (
+            // The plans behind this view, offered to the source rather than stapled under it. A view that draws
+            // none of them shows none: where the buttons go is what the view decides.
+            _jsx(PlanPlacementProvider, { value: {
+                    plans,
+                    labels,
+                    links,
+                    palette: chartPalette(theme, hornStyle),
+                    ...(planActions ? { actions: planActions } : {}),
+                    shown: Object.fromEntries((content.plans ?? []).map((behind) => [behind.plan, behind.entities])),
+                }, children: _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 }))] }));
 }
 /**
  * The theme a Horn draws in: its own, and the host's only when it declares none. Exported because a host that
@@ -84,14 +99,15 @@ 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 { snapshot, mode = "page", theme = "light", planActions, viewControls, writtenView, catalogCard } = props;
+    const { explain, onVariableChange } = 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, 
+        return (_jsx("main", { style: { width: captureWidth, background: colors.card, color: colors.ink, 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))) }));
@@ -117,26 +133,28 @@ export function HornSnapshotView(props) {
         // 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))) })] }) }));
+    return (
+    // One placement for the page: a mark asks, and the host opens the single explanation it owns.
+    _jsx(ExplainPlacementProvider, { value: { palette: chartPalette(surface, style), ...(explain ? { open: explain } : {}) }, children: _jsx(HornFiltersProvider, { value: { variables: snapshot.variables, ...(onVariableChange ? { onChange: onVariableChange } : {}) }, children: _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-placement.d.ts

@@ -0,0 +1,29 @@
+import type { PlanStatus, SnapshotPlan } from "@manta-eu/horns/render";
+import type { ChartPalette } from "../look/palette.ts";
+import type { EntityLink } from "../look/types.ts";
+import { type PlanActions } from "./plan-strip.tsx";
+export type PlanPlacement = {
+    plans: readonly SnapshotPlan[];
+    labels: Readonly<Record<string, string>>;
+    links: Readonly<Record<string, EntityLink>>;
+    palette: ChartPalette;
+    /** Absent where nothing can be run — a capture, an embed without a viewer. The plan still draws. */
+    actions?: PlanActions | undefined;
+    /** The things each plan changes that this view draws, by plan IRI. */
+    shown?: Readonly<Record<string, readonly string[]>>;
+};
+export declare const PlanPlacementProvider: import("react").Provider<PlanPlacement | undefined>;
+export type SuggestedChangesProps = {
+    /** The plan's IRI, as the view's rows carry it. */
+    plan: string;
+};
+/**
+ * One plan's changes and what may be done about them, drawn where the view puts it.
+ *
+ * Says so plainly when there is nothing to draw rather than rendering an empty box: a view naming a plan the
+ * Horn does not hold is a mistake worth seeing while somebody is reading the code.
+ */
+export declare function SuggestedChanges({ plan }: SuggestedChangesProps): import("react").JSX.Element | null;
+/** The plans behind the view being drawn, so a view can name them without being handed callbacks. */
+export declare function usePlansBehindView(): readonly SnapshotPlan[];
+export type { PlanStatus };

package/dist/embed/plan-placement.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { PlanStrip } from "./plan-strip.js";
+const PlanPlacementContext = createContext(undefined);
+export const PlanPlacementProvider = PlanPlacementContext.Provider;
+/**
+ * One plan's changes and what may be done about them, drawn where the view puts it.
+ *
+ * Says so plainly when there is nothing to draw rather than rendering an empty box: a view naming a plan the
+ * Horn does not hold is a mistake worth seeing while somebody is reading the code.
+ */
+export function SuggestedChanges({ plan }) {
+    const placement = useContext(PlanPlacementContext);
+    if (placement === undefined)
+        return null;
+    const found = placement.plans.find((one) => one.iri === plan);
+    if (found === undefined)
+        return null;
+    return (_jsx(PlanStrip, { plan: found, onView: placement.shown?.[plan] ?? [], labels: placement.labels, links: placement.links, palette: placement.palette, actions: placement.actions }));
+}
+/** The plans behind the view being drawn, so a view can name them without being handed callbacks. */
+export function usePlansBehindView() {
+    return useContext(PlanPlacementContext)?.plans ?? [];
+}

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

@@ -1,4 +1,4 @@
-import type { PlanChange, PlanStatus, SnapshotPlan } from "@manta-eu/horns/render";
+import { type PlanChange, type PlanStatus, type 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;

package/dist/embed/plan-strip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { match } from "ts-pattern";
+import { planNameFromIri } from "@manta-eu/horns/render";
 import { formatMeasure, missingValue } from "../look/format.js";
 export const maxShownChanges = 4;
 // "Campaign Budget" → "campaign budgets". English only, like every other word the kit prints.
@@ -25,6 +26,10 @@ function listed(parts) {
 export function planTitle(plan, labels) {
     if (plan.name !== undefined)
         return plan.name;
+    // What agents calls it, so one plan does not read as two things in two of Manta's own surfaces.
+    const named = planNameFromIri(plan.iri);
+    if (named !== undefined)
+        return named;
     const settings = [
         ...new Set(plan.changes.flatMap((change) => {
             const label = labels[change.property];
@@ -73,12 +78,12 @@ 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("running", () => ({ text: preview ? "Validating…" : "Making the changes…", tone: "busy" }))
         .with("completed", () => preview
-        ? { text: "Preview finished — nothing was changed", tone: "good" }
+        ? { text: "Validated — 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",
+        text: preview ? "Validation found a problem" : "The changes did not go through",
         tone: "bad",
     }))
         .with("timed-out", () => ({ text: "It took too long and stopped", tone: "bad" }))
@@ -137,5 +142,5 @@ export function PlanStrip(props) {
                     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")] }))] }));
+                }) })) : (_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("Validate", () => 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" : "Validate it first")] }))] }));
 }

package/dist/embed/view-powers.d.ts

@@ -0,0 +1,76 @@
+import { type ReactNode } from "react";
+import type { HornSnapshot } from "@manta-eu/horns/render";
+import type { ChartPalette } from "../look/palette.ts";
+/** The fact a mark explains, as the host's explainer will ask for it. */
+export type ExplainedFact = {
+    subject: string;
+    predicate?: string;
+    object: string;
+    /**
+     * The explanation itself, opaque here: its shape is the design system's, and only the host reads it.
+     * Without it the host's explainer would have to fetch, which a written view cannot make it do.
+     */
+    data?: unknown;
+    /** What to call the explanation when it opens. */
+    title?: string;
+};
+export type ExplainPlacement = {
+    palette: ChartPalette;
+    /** Opens the explanation. Absent on a server render and in a capture, where the mark is not drawn at all. */
+    open?: ((fact: ExplainedFact) => void) | undefined;
+};
+export declare const ExplainPlacementProvider: import("react").Provider<ExplainPlacement | undefined>;
+export type WhyThisProps = ExplainedFact & {
+    /** The value being claimed: a number, a badge, a word. Drawn as it is, with the mark beside it. */
+    children: ReactNode;
+};
+/**
+ * A value that can say why it is what it is.
+ *
+ * Draws the thing it wraps unchanged and puts a small mark beside it, so a reader can tell at a glance which
+ * numbers on a page were worked out rather than recorded. Where nothing can open an explanation — a server
+ * render, a captured picture — the mark is left off and the value draws alone.
+ */
+export declare function WhyThis({ children, ...fact }: WhyThisProps): import("react").JSX.Element;
+export type HornFilters = {
+    /** The Horn's variables as the snapshot was built with them. */
+    variables: HornSnapshot["variables"];
+    /**
+     * Narrows the Horn to a value, or clears it with `undefined`. Absent where nothing can re-query — a
+     * capture, a server render — and then a view draws its marks as plain text rather than as controls.
+     */
+    onChange?: ((id: string, value: unknown) => void) | undefined;
+};
+export declare const HornFiltersProvider: import("react").Provider<HornFilters | undefined>;
+export type HornFilter = {
+    /** What the Horn is narrowed to now, or undefined. */
+    value: unknown;
+    /** Whether narrowing is possible at all. A view checks this before drawing something that looks clickable. */
+    live: boolean;
+    /** Narrows to `value`, or clears it when it is already that. */
+    toggle: (value: unknown) => void;
+    /** True when `value` is what the Horn is narrowed to. */
+    is: (value: unknown) => boolean;
+};
+/**
+ * One of the Horn's variables, as a filter a view can set.
+ *
+ * Setting it re-runs every binding that takes it as a parameter, which is how one view narrows another: the
+ * tile is not wired to the list, they both answer to the same variable. A view naming a variable the Horn
+ * does not declare gets a dead filter rather than an error — the document is what says which exist.
+ */
+export declare function useHornFilter(id: string): HornFilter;
+export type NothingProps = {
+    /** What is not here: "No tier 1 suppliers", not "No data". */
+    title: string;
+    /** What would put something here, or why there is nothing. */
+    hint?: string;
+};
+/**
+ * A view with no rows, said in words.
+ *
+ * The design system's `EmptyState` takes a required `icon` component, and a written view has no icon module
+ * to give it — it renders, then throws. This is the same state drawn the way the frame around it is drawn,
+ * out of palette and inline style, so it works wherever the frame does.
+ */
+export declare function Nothing({ title, hint }: NothingProps): import("react").JSX.Element;

package/dist/embed/view-powers.js

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ExplainPlacementContext = createContext(undefined);
+export const ExplainPlacementProvider = ExplainPlacementContext.Provider;
+/**
+ * A value that can say why it is what it is.
+ *
+ * Draws the thing it wraps unchanged and puts a small mark beside it, so a reader can tell at a glance which
+ * numbers on a page were worked out rather than recorded. Where nothing can open an explanation — a server
+ * render, a captured picture — the mark is left off and the value draws alone.
+ */
+export function WhyThis({ children, ...fact }) {
+    const placement = useContext(ExplainPlacementContext);
+    if (placement?.open === undefined)
+        return _jsx(_Fragment, { children: children });
+    const { palette, open } = placement;
+    return (_jsxs("button", { type: "button", "data-horn-why": fact.predicate ?? fact.subject, title: "Why this value?", onClick: () => open(fact), style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            padding: 0,
+            border: "none",
+            background: "none",
+            font: "inherit",
+            color: "inherit",
+            cursor: "pointer",
+        }, children: [children, _jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", style: { flex: "0 0 auto" }, children: _jsx("path", { d: "M8 1.5 L9.3 6.1 L13.5 7.5 L9.3 8.9 L8 13.5 L6.7 8.9 L2.5 7.5 L6.7 6.1 Z", fill: palette.series[0] ?? palette.secondary }) }), _jsx("span", { style: {
+                    position: "absolute",
+                    width: 1,
+                    height: 1,
+                    overflow: "hidden",
+                    clip: "rect(0 0 0 0)",
+                    whiteSpace: "nowrap",
+                }, children: "Why this value?" })] }));
+}
+const HornFiltersContext = createContext(undefined);
+export const HornFiltersProvider = HornFiltersContext.Provider;
+/**
+ * One of the Horn's variables, as a filter a view can set.
+ *
+ * Setting it re-runs every binding that takes it as a parameter, which is how one view narrows another: the
+ * tile is not wired to the list, they both answer to the same variable. A view naming a variable the Horn
+ * does not declare gets a dead filter rather than an error — the document is what says which exist.
+ */
+export function useHornFilter(id) {
+    const filters = useContext(HornFiltersContext);
+    const declared = filters?.variables.find((variable) => variable.id === id);
+    const value = declared?.value ?? undefined;
+    // Both have to hold: somewhere to send the change, and a variable that can carry it. A Horn's variable
+    // travels in the URL, so one that declares no parameter is settable nowhere and `live` says so.
+    const onChange = declared?.settable === true ? filters?.onChange : undefined;
+    const is = (candidate) => value !== undefined && value === candidate;
+    return {
+        value,
+        live: onChange !== undefined,
+        is,
+        toggle: (candidate) => onChange?.(id, is(candidate) ? undefined : candidate),
+    };
+}
+/**
+ * A view with no rows, said in words.
+ *
+ * The design system's `EmptyState` takes a required `icon` component, and a written view has no icon module
+ * to give it — it renders, then throws. This is the same state drawn the way the frame around it is drawn,
+ * out of palette and inline style, so it works wherever the frame does.
+ */
+export function Nothing({ title, hint }) {
+    const placement = useContext(ExplainPlacementContext);
+    const palette = placement?.palette;
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            alignItems: "flex-start",
+            justifyContent: "center",
+            padding: "12px 0",
+        }, children: [_jsx("span", { style: { fontSize: 14, fontWeight: 500, color: palette?.ink ?? "currentColor" }, children: title }), hint === undefined ? null : (_jsx("span", { style: { fontSize: 13, color: palette?.muted ?? "currentColor", opacity: palette ? 1 : 0.7 }, children: hint }))] }));
+}

package/dist/written/runtime.js

@@ -56,12 +56,45 @@ export async function transpileWritten(source) {
 function isCallable(value) {
     return typeof value === "function";
 }
+/**
+ * Names bound to `undefined` around the view, so they shadow the page's own.
+ *
+ * `tsxViolations` refuses these in the source, but that is a regex over text: a name put together at
+ * runtime slips past it. A parameter does not care how the name was spelled. This is not containment — a
+ * constructor chain still reaches the realm from inside any function — so it stands with the page's CSP and
+ * with a person reading the source, and replaces neither. `eval` is not here because the transpiled module
+ * is strict, where it cannot be a parameter name; the source check is all there is for that one.
+ */
+const shadowed = [
+    "fetch",
+    "XMLHttpRequest",
+    "WebSocket",
+    "EventSource",
+    "navigator",
+    "Function",
+    "globalThis",
+    "window",
+    "self",
+    "document",
+    "parent",
+    "top",
+    "opener",
+    "frames",
+    "localStorage",
+    "sessionStorage",
+    "indexedDB",
+    "caches",
+    "cookieStore",
+    "process",
+    "importScripts",
+    "postMessage",
+];
 /** `new Function` rather than an import: by now the source is CommonJS, and its only way out is `require`. */
 export function evaluateWritten(code, load) {
     const moduleRecord = { exports: {} };
     try {
-        const factory = new Function("require", "exports", "module", "React", code);
-        factory(load, moduleRecord.exports, moduleRecord, reactModule);
+        const factory = new Function("require", "exports", "module", "React", ...shadowed, code);
+        factory(load, moduleRecord.exports, moduleRecord, reactModule, ...shadowed.map(() => undefined));
     }
     catch (cause) {
         if (cause instanceof WrittenViewError)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manta-eu/horns-kit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Manta Horns component kit: charts and snapshot views that render on a server and hydrate in any React host, and the components the HornView sandbox runs.",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,14 @@
     "./written": {
       "types": "./dist/written/index.d.ts",
       "default": "./dist/written/index.js"
+    },
+    "./plan": {
+      "types": "./dist/embed/plan-placement.d.ts",
+      "default": "./dist/embed/plan-placement.js"
+    },
+    "./view": {
+      "types": "./dist/embed/view-powers.d.ts",
+      "default": "./dist/embed/view-powers.js"
     }
   },
   "publishConfig": {
@@ -47,7 +55,7 @@
   "dependencies": {
     "sucrase": "^3.35.1",
     "ts-pattern": "^5.9.0",
-    "@manta-eu/horns": "0.1.0"
+    "@manta-eu/horns": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18",