@howells/hairline 0.0.0-stage → 0.2.0

package/lib/types/charts/big/force-galaxy-model.d.ts

@@ -0,0 +1,109 @@
+import type { SimulationLinkDatum, SimulationNodeDatum } from "d3-force";
+import type { GalaxyData } from "./force-galaxy.data.js";
+/** A ramp step for a domain, or ink for the hero. */
+export type Tone = "ink" | "l2" | "l3" | "l4" | "l5";
+/** A node in the simulation. d3-force writes x, y, vx, vy, fx, fy. */
+export interface Star extends SimulationNodeDatum {
+    domain: string;
+    hub: boolean;
+    id: string;
+    r: number;
+    tone: Tone;
+    volume: number;
+}
+export type EdgeKind = "cross" | "mesh" | "spoke";
+/** A link in the simulation; `a`/`b` keep typed handles on its ends. */
+export interface Edge extends SimulationLinkDatum<Star> {
+    a: Star;
+    b: Star;
+    id: string;
+    kind: EdgeKind;
+    weight: number;
+}
+/**
+ * How the hubs are laid out: `free` lets the forces find a layout across a
+ * wide plot; `ring` sets them on an ellipse (labels outside), for plots too
+ * narrow for the forces to settle without crowding.
+ */
+export type GalaxyMode = "free" | "ring";
+export interface Galaxy {
+    cx: number;
+    cy: number;
+    edges: Edge[];
+    floor: number;
+    mode: GalaxyMode;
+    neighbours: Map<string, string[]>;
+    /** Re-sets every satellite on its hub's ring (after a hub moves). */
+    orbit: () => void;
+    place: () => void;
+    /** Rings by hub id. */
+    rings: Map<string, Ring>;
+    scale: number;
+    /** Ring mode: each hub's home on the circle. */
+    slots: Map<string, Point>;
+    stars: Star[];
+    width: number;
+}
+/** A position in the plot, in px. */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface StarTip {
+    degree: number;
+    id: string;
+    volume: number;
+    x: number;
+    y: number;
+}
+/** DOM handles, so the simulation writes positions without a React render per frame. */
+export interface Handles {
+    edges: Map<string, SVGLineElement>;
+    /** The <svg> itself, under the key "root". */
+    frame: Map<"root", SVGSVGElement>;
+    labels: Map<string, SVGGElement>;
+    stars: Map<string, SVGCircleElement>;
+}
+/** A hub and its satellites, set on one ring at an even angular pitch. */
+export interface Ring {
+    /** Room the ring and its label need, from the hub's centre. */
+    extent: number;
+    hub: Star;
+    /** The hub's name, as set in `t-label`. */
+    labelW: number;
+    /** Distance from the hub's centre to the satellites' centres. */
+    orbit: number;
+    /** Satellites, busiest first, clockwise from noon. */
+    sats: Star[];
+}
+/** Below this plot width the hubs sit on a ring rather than float free. */
+export declare const RING_BELOW = 520;
+export declare const buildGalaxy: (data: GalaxyData, width: number, floor: number) => Galaxy;
+/**
+ * A hub's name, centred on its ring: under it on a free layout; on a ring
+ * layout, on the side away from the centre (above the upper half, below the
+ * lower), so every name sits outside the ring of hubs.
+ */
+export declare const labelAt: (galaxy: Galaxy, ring: Ring) => Point;
+/**
+ * Whether a hub's name, set at `spot`, lands on another hub's engraved disc:
+ * there it sits on a plate; over lines and satellites it keeps its halo.
+ */
+export declare const labelOnEngraving: (galaxy: Galaxy, ring: Ring, spot: Point) => boolean;
+/**
+ * The nearest hub centre to (x, y) that keeps the ring and its name inside
+ * the plot. A ring too big for the plot is centred in it.
+ */
+export declare const fitHub: (galaxy: Galaxy, ring: Ring, x: number, y: number) => Point;
+/** Pulls every hub back inside the plot, then sets the satellites on their rings. */
+export declare const constrain: (galaxy: Galaxy) => void;
+export declare const drawGalaxy: (galaxy: Galaxy, handles: Handles) => void;
+/**
+ * Only hubs move. Free: the mesh pulls them together, charge and their
+ * rings keep them apart, and a pull to the centre keeps the whole inside the
+ * plot. Ring: each hub is pulled to its home on the ellipse. Every tick ends
+ * with `constrain`, so nothing leaves the plot.
+ */
+export declare const makeSimulation: (galaxy: Galaxy, onTick: () => void) => import("d3-force").Simulation<Star, Edge>;
+/** The settled layout at once, for reduced motion: manual ticks fire no tick events, so each is constrained here. */
+export declare const settle: (galaxy: Galaxy, sim: ReturnType<typeof makeSimulation>) => void;

package/lib/types/charts/big/force-galaxy.d.ts

@@ -0,0 +1,18 @@
+import type { NoteProps } from "../../schema/options.js";
+import type { GalaxyData } from "./force-galaxy.data.js";
+interface ForceGalaxyProps extends NoteProps {
+    data?: GalaxyData;
+    format?: (v: number) => string;
+    height?: number;
+    /** Unit after the volume in the tooltip. */
+    unit?: string;
+}
+/**
+ * B2 Lines and stations. Stations round the lines they sit on: d3-force lays out the hubs,
+ * and each hub carries its satellites on one ring at an even angular pitch,
+ * busiest first from noon. Drag a hub (or any of its satellites) and it
+ * springs back when released; hover to focus a node and its neighbours;
+ * click empty space to replay the big bang.
+ */
+export declare const ForceGalaxy: (props: ForceGalaxyProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/big/force-galaxy.data.d.ts

@@ -0,0 +1,48 @@
+/**
+ * B2 Lines and stations: each Underground line a hub, its busiest stations
+ * round it, and the interchanges that tie the lines together.
+ * Sources: Transport for London, annual station counts 2025,
+ * https://crowding.data.tfl.gov.uk/ (Annual Station Counts/2025/
+ * AC2025_AnnualisedEntryExit_public.xlsx, "Annualised En/Ex", entries plus
+ * exits in millions a year, TfL open data), and the TfL Unified API,
+ * https://api.tfl.gov.uk/Line/{id}/StopPoints for which lines serve which
+ * station (type NaptanMetroStation). Both fetched 2026-10-15.
+ * Transform: eight lines (Bakerloo, Central, District, Jubilee, Metropolitan,
+ * Northern, Piccadilly, Victoria; Circle, Hammersmith and City, and Waterloo
+ * and City are left out as they share nearly all their stations with the
+ * others). Station names are joined to the count rows by name, with these
+ * by-hand matches: Bank and Monument are one complex and one node; St. Paul's,
+ * St. James's Park and St. John's Wood lose the full stop; Edgware Road
+ * (Bakerloo) is "Edgware Road (Bak)" and Edgware Road (Circle Line) is
+ * "Edgware Road (DIS)"; Hammersmith (Dist&Picc Line) is "Hammersmith (DIS)";
+ * Heathrow Terminals 2 and 3 is "Heathrow Terminals 123 LU"; the rest of the
+ * "LU" and "TfL" suffixes are dropped. Kensington (Olympia) has no count
+ * ("---") and is left out. A station is kept if its count is at least 5
+ * million. It hangs from the line it serves that has the fewest stations,
+ * and also calls the hub of every other line that serves it. A hub's volume
+ * is the sum over all its stations (interchanges count once for each line).
+ * Hub-to-hub weight is the number of stations two lines share: 1 to 2 is 1,
+ * 3 to 4 is 2, 5 or more is 3. The station "Victoria" is renamed "Victoria
+ * station" so it differs from the Victoria line.
+ */
+export interface GalaxyNode {
+    /** Group (cluster) the node belongs to. */
+    domain: string;
+    /** The group's hub: labelled, larger, anchors its satellites. */
+    hub?: boolean;
+    id: string;
+    /** Size measure, e.g. entries and exits a year. Drives the dot area. */
+    volume: number;
+}
+export interface GalaxyLink {
+    source: string;
+    target: string;
+    /** Relative strength; drives the hub-to-hub line weight. */
+    weight?: number;
+}
+export interface GalaxyData {
+    links: GalaxyLink[];
+    nodes: GalaxyNode[];
+}
+/** Eight Underground lines, each with the stations of 5 million or more entries and exits a year. */
+export declare const forceGalaxyDemo: GalaxyData;

package/lib/types/charts/big/thread-triptych.d.ts

@@ -0,0 +1,17 @@
+import type { NoteProps } from "../../schema/options.js";
+import type { TriptychData } from "./thread-triptych.data.js";
+interface ThreadTriptychProps extends NoteProps {
+    data?: TriptychData;
+    height?: number;
+    /** Column titles, left to right, one per column. */
+    headings?: string[];
+}
+/**
+ * B3 Mammal tree. Columns from genus to superorder, one thread per genus;
+ * each stop after the first centres on the stops that feed it. Hover a
+ * thread to trace its route or a label to pull its whole bundle; click to
+ * pin, Escape or click empty space to release. Each column heading carries
+ * its count: all stops at rest, the lit ones under focus.
+ */
+export declare const ThreadTriptych: (props: ThreadTriptychProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/big/thread-triptych.data.d.ts

@@ -0,0 +1,41 @@
+/**
+ * B3 Mammal tree: the largest genera of the largest families of the largest
+ * orders of living mammals, each one thread from genus to family to order to
+ * superorder.
+ * Source: GBIF Backbone Taxonomy (CC BY 4.0), species search,
+ * https://api.gbif.org/v1/species/search?highertaxonKey=359&rank=SPECIES&status=ACCEPTED&isExtinct=false
+ * (Mammalia is key 359). Fetched 2026-10-15; the raw pages are in
+ * reference/raw/B3/api.
+ * Rule: only accepted species the backbone flags extinct=false count as
+ * living (6,318 of them); each carries its genus, family and order. Species
+ * are counted per genus, family and order. The six orders with most living
+ * species (Rodentia, Chiroptera, Primates, Soricomorpha, Carnivora,
+ * Artiodactyla); of each, the three families with most; of each family, the
+ * two genera with most (ties broken alphabetically). Extinct genera and
+ * species, and any taxon with no extinct flag, are left out. Names follow the
+ * backbone, so the shrews and moles sit in Soricomorpha. Soricomorpha's third
+ * family, Solenodontidae, has one genus, so there are 35 paths.
+ *
+ * Superorders: the backbone has no superorder rank, so each family's comes
+ * from the Mammal Diversity Database v2.5 (CC BY 4.0),
+ * MDD_v2.5_6904species.csv, column "superorder", for its living species.
+ *   https://doi.org/10.5281/zenodo.21654811
+ * Fetched 2026-10-16. Every living species of each of the 18 families has
+ * one superorder: Euarchontoglires for the rodent and primate families,
+ * Laurasiatheria for the rest (MDD files the shrews, moles and solenodons
+ * under Eulipotyphla). Orders are listed by superorder, then by size.
+ * Script: reference/scripts/B3-mdd/superorders.py.
+ */
+/** One path: a genus and every rank above it, left to right. */
+export interface ThreadPath {
+    id: string;
+    /** One name per column, e.g. genus, family, order, superorder. */
+    stops: string[];
+}
+export interface TriptychData {
+    /** Each column's names, top to bottom. */
+    columns: string[][];
+    paths: ThreadPath[];
+}
+/** 35 living genera, 18 families, 6 orders, 2 superorders: one thread per genus. */
+export declare const threadTriptychDemo: TriptychData;

package/lib/types/charts/board/room.d.ts

@@ -0,0 +1,18 @@
+import type { FontMetrics } from "../../schema/metrics.js";
+/** The widest label on a value scale, px (tabular figures: a 1 is as wide as a 0). */
+export declare const scaleWidth: (axis: {
+    format?: (v: number) => string;
+    ticks?: readonly number[];
+}) => number;
+/**
+ * The widest of some category or series names, px. sansWidth runs a little
+ * wide for the medium weight, so it is shaved; `shave` lets a caller whose
+ * text is heavier (names with values) keep more of it.
+ */
+export declare const nameWidth: (names: readonly string[], shave?: number, metrics?: FontMetrics) => number;
+/** Gap between a plot's right edge and the names set beside it, px. */
+export declare const SIDE_GAP = 12;
+/** Right margin for labels set beside the plot: their gap and widest name. */
+export declare const sideRoom: (items: readonly {
+    label?: string;
+}[]) => number;

package/lib/types/charts/board/slope.d.ts

@@ -0,0 +1,14 @@
+import type { SlopeProps } from "../../schema/slope.js";
+/**
+ * Before/after slope chart, the bare plot: the biggest fall inked, the biggest
+ * rise red, or the `emphasis` row inked alone. Name, source and notes belong
+ * to the host.
+ *
+ * Props are the `slopeSchema` payload (src/schema/slope.ts); `rows` is
+ * required and never defaults to demo data. Give `width` and `height` for a
+ * fixed-size chart that is complete on the first (server) render. Bad input
+ * is tolerated: a row with a value that is not a finite number is skipped,
+ * duplicate names each get a line (give them `id`s to tell them apart), and
+ * no rows draws the two headed columns alone.
+ */
+export declare const Slope: (props: SlopeProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/lib/types/charts/board/spread.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Nudge label positions apart so none sit closer than `gap`, keeping order
+ * and staying within [min, max].
+ */
+export declare const relax: (ys: number[], gap: number, min: number, max: number) => number[];

package/lib/types/charts/control.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+interface ControlProps {
+    children: ReactNode;
+    className?: string;
+    /** Accessible name when the visible text is not enough. */
+    label?: string;
+    onClick: () => void;
+    /** Set for a toggle or one of a set of views; omit for a plain action. */
+    pressed?: boolean;
+}
+/**
+ * The one chart control: a 28px pill (sentence case, the label
+ * role) inside a 44px-tall transparent hit area. Used for Play / Pause /
+ * Replay / Live and for view pickers.
+ */
+export declare const Control: (props: ControlProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/core.d.ts

@@ -0,0 +1,77 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { ScaleOptions } from "../schema/scale.js";
+import type { Animate } from "./hooks.js";
+interface ChartProps {
+    bottom?: ReactNode;
+    children: (width: number) => ReactNode;
+    className?: string;
+    top?: ReactNode;
+}
+/**
+ * The panel every board chart lives in: measures its width, plays the entry
+ * animation when it scrolls into view, and slots optional HTML above/below.
+ */
+export declare const Chart: (props: ChartProps) => import("react").JSX.Element;
+interface PlotProps {
+    /**
+     * When the entry draws in: "scroll" when scrolled into view, "mount" at
+     * once, "off" never. The default is "off" for a fixed-size chart (`width`
+     * given) and "scroll" for a responsive one. Off draws the chart and marks it
+     * ready (`data-hl-ready="true"`) in the first HTML. Under reduced motion the
+     * stylesheet draws the plot in the first paint; `ready` follows hydration,
+     * when the reader's preference is known.
+     */
+    animate?: Animate;
+    children: (width: number) => ReactNode;
+    className?: string;
+    /**
+     * Initial width for responsive mode: the first render (the server's too)
+     * draws at this width until the real one is measured. Ignored if `width` is set.
+     */
+    initialWidth?: number;
+    /** Called when the chart has settled, as `data-hl-ready` turns "true". */
+    onReady?: () => void;
+    overlay?: ReactNode;
+    /** Change it to replay the entry without remounting. */
+    replayKey?: number | string;
+    /** Slide scale (see schema/scale.ts), applied to every ChartSvg inside. */
+    scaling?: ScaleOptions;
+    style?: CSSProperties;
+    /**
+     * The chart's data table (<DataTable>), rendered after the marks whether or
+     * not a width is known yet, so it is in the first server HTML.
+     */
+    table?: ReactNode;
+    /**
+     * Fixed mode: draw at exactly this width, in px. Nothing is measured, so
+     * the first render, on the server too, is the complete chart. Leave it out
+     * for responsive mode, which measures the container.
+     */
+    width?: number;
+}
+export declare const Plot: (props: PlotProps) => import("react").JSX.Element;
+interface TooltipProps {
+    below?: boolean;
+    children: ReactNode;
+    x: number;
+    y: number;
+}
+/** Dark pill tooltip, anchored at (x, y) inside the nearest Plot. */
+export declare const Tooltip: (props: TooltipProps) => import("react").JSX.Element;
+interface SplitClipsProps {
+    height: number;
+    id: string;
+    width: number;
+    x: number;
+}
+/**
+ * Clip paths splitting the plot at the cursor: `${id}-past` and `${id}-future`.
+ * Also defines `${id}-sweep`, the left-to-right entry reveal.
+ */
+export declare const SplitClips: (props: SplitClipsProps) => import("react").JSX.Element;
+export interface LegendItem {
+    color: string;
+    hollow?: boolean;
+    label: string;
+}
+export {};

package/lib/types/charts/data-table.d.ts

@@ -0,0 +1,18 @@
+interface DataTableProps {
+    /** Column headings; every row has one cell per heading. */
+    columns: string[];
+    /** Names the table for screen readers. */
+    caption: string;
+    rows: string[][];
+    /** Show the table to sighted readers. Otherwise it is visually hidden. */
+    visible?: boolean;
+}
+/**
+ * The chart's data as a table, made from the same validated payload as the
+ * marks. Every chart that adopts the accessible-data mechanism renders one
+ * through `Plot`'s `table` prop, so it is in the first server HTML. Hidden,
+ * it sits in an `sr-only` box and still reads out; `visible` is the opt-in
+ * table view.
+ */
+export declare const DataTable: (props: DataTableProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/fills.d.ts

@@ -0,0 +1,103 @@
+/** The tone steps a fill may take, darkest first. */
+export declare const FILL_TONES: readonly [{
+    readonly cls: "fill-hero";
+    readonly id: "ink";
+    readonly label: "Ink";
+}, {
+    readonly cls: "fill-l2";
+    readonly id: "strong";
+    readonly label: "Strong";
+}, {
+    readonly cls: "fill-l3";
+    readonly id: "mid";
+    readonly label: "Mid";
+}, {
+    readonly cls: "fill-l4";
+    readonly id: "quiet";
+    readonly label: "Quiet";
+}, {
+    readonly cls: "fill-l5";
+    readonly id: "faint";
+    readonly label: "Faint";
+}, {
+    readonly cls: "fill-alert";
+    readonly id: "alert";
+    readonly label: "Alert";
+}];
+export type FillTone = (typeof FILL_TONES)[number]["id"];
+/**
+ * The families, each with the tones it is drawn in. Hatch may run either
+ * diagonal (rising by default; falling to tell a neighbour apart); every
+ * engraved family sits on paper inside a 1px rule.
+ */
+export declare const FILL_FAMILIES: readonly [{
+    readonly id: "solid";
+    readonly label: "Solid";
+    readonly tones: readonly ["ink", "strong", "mid", "quiet", "faint", "alert"];
+}, {
+    readonly id: "hatch";
+    readonly label: "Hatch";
+    readonly pitch: 4;
+    readonly tones: readonly ["ink", "strong", "mid", "quiet", "faint", "alert"];
+}, {
+    readonly id: "cross";
+    readonly label: "Crosshatch";
+    readonly pitch: 6;
+    readonly tones: readonly ["ink", "strong", "mid", "quiet", "alert"];
+}, {
+    readonly id: "rules";
+    readonly label: "Rules";
+    readonly pitch: 3;
+    readonly tones: readonly ["ink", "strong", "mid", "quiet", "faint"];
+}, {
+    readonly id: "upright";
+    readonly label: "Upright rules";
+    readonly pitch: 3;
+    readonly tones: readonly ["ink", "strong", "mid", "quiet", "faint"];
+}, {
+    readonly id: "stipple";
+    readonly label: "Stipple";
+    readonly pitch: 4;
+    readonly tones: readonly ["strong", "mid", "quiet", "faint"];
+}, {
+    readonly id: "dense";
+    readonly label: "Dense stipple";
+    readonly pitch: 3;
+    readonly tones: readonly ["strong", "mid", "quiet", "faint"];
+}, {
+    readonly id: "beads";
+    readonly label: "Broken rungs";
+    readonly pitch: 3;
+    readonly tones: readonly ["mid"];
+}];
+export type FillFamily = (typeof FILL_FAMILIES)[number]["id"];
+/**
+ * The value ladders: when a fill encodes a quantity, it steps along one of
+ * these, lightest first. Halftone grows its dots on a 4px screen; hatch
+ * density tightens its pitch.
+ */
+export declare const FILL_LADDERS: readonly [{
+    readonly id: "halftone";
+    readonly label: "Halftone";
+    readonly steps: {
+        pitch: 4;
+        r: 0.75 | 1 | 1.3 | 1.6 | 1.85;
+    }[];
+    readonly tones: readonly ["mid", "quiet"];
+}, {
+    readonly id: "density";
+    readonly label: "Hatch density";
+    readonly steps: readonly [{
+        readonly pitch: 6;
+        readonly r: 0;
+    }, {
+        readonly pitch: 4;
+        readonly r: 0;
+    }, {
+        readonly pitch: 3;
+        readonly r: 0;
+    }];
+    readonly tones: readonly ["mid"];
+}];
+/** Ramp class for a tone. */
+export declare const toneClass: (tone: FillTone) => "fill-alert" | "fill-hero" | "fill-l2" | "fill-l3" | "fill-l4" | "fill-l5";

package/lib/types/charts/forms/area-difference.d.ts

@@ -0,0 +1,9 @@
+import type { PlanWeek } from "./area-difference.data.js";
+/**
+ * O5 Against normal. Two weekly lines; the gap between them is an ink
+ * crosshatch where 2022 runs above the normal and a single grey hatch where
+ * it runs below.
+ */
+export declare const AreaDifference: (props: {
+    data?: PlanWeek[];
+}) => import("react").JSX.Element;

package/lib/types/charts/forms/area-difference.data.d.ts

@@ -0,0 +1,26 @@
+/**
+ * O5 Against normal: weekly Central England temperature in 2022 against the
+ * 1991 to 2020 normal.
+ * Source: Met Office Hadley Centre Central England Temperature (HadCET),
+ * v2.1.1.0 + provisional, https://www.metoffice.gov.uk/hadobs/hadcet/data/download.html
+ * Fetched 2026-10-15.
+ * File: meantemp_daily_totals.txt (daily mean CET, date and value to 0.1 °C,
+ * -99.9 for a missing day; none are missing in the years used).
+ * Transform: 52 consecutive blocks of 7 days from 1 January 2022 (the last
+ * ends on 30 December; 31 December is left out). `actual` is the mean of the
+ * block's seven 2022 daily values. `plan` is the normal: for each calendar
+ * date in the block, the mean of that date's daily value over the 30 years
+ * 1991 to 2020, then the mean of those seven dates. Both are rounded to
+ * 0.1 °C once, at the end.
+ */
+/** One week of Central England mean temperature against its normal, in °C. */
+export interface PlanWeek {
+    /** The week's mean temperature in 2022. */
+    actual: number;
+    /** The 1991 to 2020 normal for the same seven dates. */
+    plan: number;
+    /** The week's first day. */
+    week: Date;
+}
+/** Central England weekly mean temperature against the 1991 to 2020 normal, 2022. */
+export declare const planWeeksDemo: PlanWeek[];

package/lib/types/charts/forms/brush-math.d.ts

@@ -0,0 +1,19 @@
+/** The brushed window: first and last day index, inclusive. */
+export interface Span {
+    a: number;
+    b: number;
+}
+/** What the pointer took hold of; "outside" recentres the window first. */
+export type Grip = "body" | "end" | "outside" | "start";
+/** A drag in progress: the window it started from, in day units. */
+export interface Drag {
+    from: Span;
+    grip: Exclude<Grip, "outside">;
+    origin: number;
+}
+/** Where the window lands after a drag of `delta` days. */
+export declare const dragTo: (d: Drag, delta: number, last: number) => Span;
+/** The same window, centred as near `day` as the year allows. */
+export declare const centreOn: (s: Span, day: number, last: number) => Span;
+/** Arrow keys move the window a week; Home and End send it to either end. */
+export declare const keyTo: (key: string, s: Span, last: number) => Span | null;

package/lib/types/charts/forms/brush-strip.d.ts

@@ -0,0 +1,19 @@
+import type { Span } from "./brush-math.js";
+import type { DayValue } from "./brushed-overview.data.js";
+interface StripProps {
+    data: DayValue[];
+    /** Each day's 7-day mean: the strip draws this, a smooth silhouette. */
+    mean: number[];
+    onChange: (s: Span) => void;
+    span: Span;
+    width: number;
+    x0: number;
+    x1: number;
+}
+/**
+ * The overview: the whole year's 7-day mean as a quiet silhouette, the window an outlined
+ * rectangle to drag, resize at either edge, or move with the arrow keys.
+ * Keys go to a visually hidden range input; its focus thickens the outline.
+ */
+export declare const BrushStrip: (props: StripProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/forms/brushed-overview.d.ts

@@ -0,0 +1,12 @@
+import type { DayValue } from "./brushed-overview.data.js";
+/**
+ * O8 Overview and detail. A year of daily maximum temperatures as a thin
+ * strip, drawn as its 7-day average so the year reads as one smooth
+ * silhouette; the outlined window on it chooses the days the detail above
+ * draws: the average as a calm line, each day a stem off it, the window's
+ * hottest day in ink, read off a right-hand scale. Opens on a two-month
+ * window centred on the year's hottest day.
+ */
+export declare const BrushedOverview: (props: {
+    data?: DayValue[];
+}) => import("react").JSX.Element;

package/lib/types/charts/forms/brushed-overview.data.d.ts

@@ -0,0 +1,16 @@
+/**
+ * O8 Hot year: the daily maximum Central England temperature through 2022.
+ * Source: Met Office Hadley Centre Central England Temperature (HadCET),
+ * v2.1.1.0 + provisional, https://www.metoffice.gov.uk/hadobs/hadcet/data/download.html
+ * Fetched 2026-10-15.
+ * File: maxtemp_daily_totals.txt (date and value to 0.1 °C, -99.9 for a
+ * missing day; none are missing in 2022). Transform: the 365 values from
+ * 2022-01-01 to 2022-12-31, copied as they stand.
+ */
+/** One day's maximum temperature, in °C. */
+export interface DayValue {
+    date: Date;
+    value: number;
+}
+/** Central England daily maximum temperature, 2022. */
+export declare const activeDaysDemo: DayValue[];

package/lib/types/charts/forms/chord-ring.d.ts

@@ -0,0 +1,12 @@
+import type { SharedWork } from "./chord-ring.data.js";
+/**
+ * O6 Goods exports. Partners and kinds of goods on a thin ring; every pair that trades is
+ * tied by a bundle of one to three hairlines through the centre, more
+ * threads for more pounds, so the ring reads as an engraved web on paper.
+ * The busiest group is the ink hero, its pairs drawn as ribbons in an ink
+ * hatch on paper; hovering another group crossfades the hatch to its pairs
+ * and dims the threads.
+ */
+export declare const ChordRing: (props: {
+    data?: SharedWork;
+}) => import("react").JSX.Element;

package/lib/types/charts/forms/chord-ring.data.d.ts

@@ -0,0 +1,29 @@
+/**
+ * O6 Goods exports: what the UK sold to its five largest export markets in
+ * 2025, by kind of goods.
+ * Source: Office for National Statistics, "Trade in goods: country by
+ * commodity" (Open Government Licence), dataset trade, edition time-series,
+ * version 65 (released 2026-02-18), https://www.ons.gov.uk/economy/nationalaccounts/balanceofpayments/datasets/uktradecountrybycommodityexports
+ * through the ONS API https://api.beta.ons.gov.uk/v1/datasets/trade/editions/time-series/versions/65/observations
+ * (UK, direction EX, monthly, GBP million, not seasonally adjusted). Fetched
+ * 2026-10-15; every response is saved in reference/raw/O6/api.
+ * Transform: each cell is the sum of the twelve months of 2025, rounded to
+ * GBP 1 million. Partners: the five countries with the largest 2025 goods
+ * exports total (United States including Puerto Rico, Germany, Netherlands,
+ * Ireland, France). Goods: the five SITC sections with the largest 2025
+ * exports to the whole world, leaving out section 9 (unspecified): 7 Machinery
+ * and transport equipment, 5 Chemicals, 8 Miscellaneous manufactures, 6
+ * Material manufactures, 3 Fuels; the names are shortened to Machinery,
+ * Chemicals, Manufactures, Materials and Fuels. The matrix is symmetric: the
+ * first five rows and columns are the partners, the last five the goods, and a
+ * ribbon joins a partner to a kind of goods, never two partners or two goods.
+ * A group's total is therefore its trade within these five by five.
+ */
+/** Groups on a ring and the flows between them. */
+export interface SharedWork {
+    /** Symmetric: `matrix[a][b]` is GBP million of exports between group a and group b. */
+    matrix: number[][];
+    teams: string[];
+}
+/** UK goods exports in 2025, GBP million: five partners, five kinds of goods. */
+export declare const sharedWorkDemo: SharedWork;

package/lib/types/charts/forms/circle-pack.d.ts

@@ -0,0 +1,9 @@
+import type { OrgNode } from "./circle-pack.data.js";
+/**
+ * O9 Towers by county. Countries as stippled hairline circles, counties as
+ * paper discs on them; the county with most towers is the only ink mark.
+ * Hover any circle for its count.
+ */
+export declare const CirclePack: (props: {
+    data?: OrgNode;
+}) => import("react").JSX.Element;