@howells/hairline 0.0.0-stage → 0.2.0

package/lib/types/charts/maps/legend.d.ts

@@ -0,0 +1,14 @@
+interface LegendProps {
+    active: number | null;
+    pid: string;
+    /** Label for the no-value key; omitted when every region has a value. */
+    emptyLabel?: string;
+    onStep: (bin: number | null) => void;
+    short: (v: number) => string;
+    thresholds: readonly number[];
+    width: number;
+    y: number;
+}
+/** The key row, centred under the map: one KeySwatch per step. */
+export declare const Legend: (props: LegendProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/maps/step-fill.d.ts

@@ -0,0 +1,6 @@
+export interface StepFill {
+    className: string;
+    fill?: string;
+}
+/** Fill for a shade step under the pattern id prefix `pid`; −1 (no value) is bare paper. */
+export declare const stepFill: (bin: number, pid: string) => StepFill;

package/lib/types/charts/maps/us-choropleth.d.ts

@@ -0,0 +1,25 @@
+import type { NoteProps } from "../../schema/options.js";
+import type { StateDatum } from "./us-choropleth.data.js";
+interface USChoroplethProps extends NoteProps {
+    data?: StateDatum[];
+    /** Legend and tooltip text for states with no value. */
+    emptyLabel?: string;
+    format?: (v: number) => string;
+    /** Upper cap on the map height; otherwise the map keeps its own aspect. */
+    height?: number;
+    /** Postal code(s) printed on the map; defaults to the three states that cut most. */
+    highlight?: string | string[];
+    /** Short value for legend and labels, e.g. 96k. */
+    short?: (v: number) => string;
+    /** Four ascending breaks between the five shades. */
+    thresholds?: [number, number, number, number];
+    /** Unit after the tooltip value, e.g. "trees". */
+    unit?: string;
+}
+/**
+ * M1 Christmas trees. Real state outlines (Alaska and Hawaii inset lower left),
+ * value as a dot screen in five steps, 1px outlines, a hover tooltip
+ * and a legend scale that isolates a step.
+ */
+export declare const USChoropleth: (props: USChoroplethProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/maps/us-choropleth.data.d.ts

@@ -0,0 +1,23 @@
+/**
+ * M1 Christmas trees: cultivated Christmas trees cut, by state, 2022.
+ * Source: USDA National Agricultural Statistics Service, 2022 Census of
+ * Agriculture, Volume 1 Chapter 2, Table 35 "Cultivated Christmas Trees: 2022
+ * and 2017", https://www.nass.usda.gov/Publications/AgCensus/2022/Full_Report/Volume_1,_Chapter_2_US_State_Level/st99_2_035_035.pdf
+ * Fetched 2026-10-15.
+ * Transform: the 2022 "Trees cut, Number" column for the 50 states, copied as
+ * printed. Alaska, Arizona and Nevada print (D), withheld to protect
+ * individual farms, and are left out so they draw as no data. The United
+ * States total (14,548,694) exceeds the 47 published states by 1,590 trees,
+ * the withheld three. The District of Columbia and Puerto Rico are not in the
+ * table and also draw as no data.
+ */
+import type { Region } from "./geo.js";
+/** Every state (plus DC and Puerto Rico) keyed by postal code, from us-atlas states-10m. */
+export declare const usStates: Region[];
+export interface StateDatum {
+    /** USPS postal code, e.g. "CA". */
+    state: string;
+    value: number;
+}
+/** Cultivated Christmas trees cut by state in 2022, most first. */
+export declare const usChoroplethDemo: StateDatum[];

package/lib/types/charts/maps/world-choropleth.d.ts

@@ -0,0 +1,22 @@
+import type { NoteProps } from "../../schema/options.js";
+import type { CountryDatum } from "./world-choropleth.data.js";
+interface WorldChoroplethProps extends NoteProps {
+    data?: CountryDatum[];
+    /** Legend and tooltip text for countries with no value. */
+    emptyLabel?: string;
+    format?: (v: number) => string;
+    /** Upper cap on the map height; otherwise the map keeps its own aspect. */
+    height?: number;
+    /** Countries (by name) printed on the map, with their code; defaults to five leaders. */
+    highlight?: string | string[];
+    short?: (v: number) => string;
+    thresholds?: [number, number, number, number];
+    unit?: string;
+}
+/**
+ * M2 Wine drinking. Equal Earth projection, value as a dot screen in five
+ * steps, countries with no figure as bare paper, 1px outlines, a hover tooltip and a
+ * legend scale that isolates a step.
+ */
+export declare const WorldChoropleth: (props: WorldChoroplethProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/maps/world-choropleth.data.d.ts

@@ -0,0 +1,35 @@
+/**
+ * M2 Wine drinking: litres of pure alcohol from wine per adult, 2022.
+ * Source: World Health Organization, Global Health Observatory, as published
+ * by Our World in Data (CC BY 4.0), "Wine consumption per person",
+ * https://ourworldindata.org/grapher/wine-consumption-per-capita
+ * Fetched 2026-10-15.
+ * File: wine-consumption-per-capita.csv (Entity, Code, Year, litres of pure
+ * alcohol per person aged 15 and over). Transform: the Year = 2022 rows that
+ * carry a country code (187), each value copied as it stands and joined to the
+ * Natural Earth short names the polygons use. Eleven names differ and are
+ * mapped by hand: Bosnia and Herzegovina, Central African Republic, Cote
+ * d'Ivoire, Democratic Republic of Congo, Dominican Republic, Equatorial
+ * Guinea, Solomon Islands, East Timor (Timor-Leste), United States (United
+ * States of America), Eswatini (eSwatini), North Macedonia (Macedonia). 24
+ * small states and islands in the file have no polygon at this scale and are
+ * left out. 12 polygons have no value in the file and show as no data:
+ * Falkland Is., Greenland, Kosovo, N. Cyprus, New Caledonia, Palestine,
+ * Puerto Rico, S. Sudan, Saudi Arabia, Somaliland, Taiwan and W. Sahara. A
+ * recorded 0 is a value, not a gap.
+ */
+import type { Region } from "./geo.js";
+/** Every country except the Antarctic ones, keyed by Natural Earth short name, from world-atlas countries-110m. */
+export declare const worldCountries: Region[];
+export interface CountryDatum {
+    /** Short code printed on the map when labelled. */
+    code?: string;
+    /** Natural Earth short name, as in world-atlas ("United States of America", "Dem. Rep. Congo"). */
+    country: string;
+    /** Label offset from the country's centre in px, drawn with a leader. */
+    dx?: number;
+    dy?: number;
+    value: number;
+}
+/** Litres of pure alcohol from wine per person aged 15 and over, 2022, highest first. */
+export declare const worldChoroplethDemo: CountryDatum[];

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

@@ -0,0 +1,42 @@
+import type { SVGProps } from "react";
+import type { DotSize, RingWeight } from "./marks.js";
+import type { CapDirection } from "./shapes.js";
+type CircleProps = Omit<SVGProps<SVGCircleElement>, "r" | "strokeWidth">;
+/** A solid point marker of one of the four sizes; tone and motion via className. */
+export declare const Dot: ({ size, ...rest }: CircleProps & {
+    size?: DotSize;
+}) => import("react").JSX.Element;
+/**
+ * A hollow point marker: paper inside a ring whose outer edge sits exactly
+ * on the size's radius, the stroke drawn inside it. Pass the stroke tone in
+ * className; `open` leaves the inside see-through instead of paper.
+ */
+export declare const Ring: ({ className, open, size, weight, ...rest }: CircleProps & {
+    open?: boolean;
+    size?: DotSize;
+    weight?: RingWeight;
+}) => import("react").JSX.Element;
+type BarProps = Omit<SVGProps<SVGPathElement>, "d" | "fill"> & {
+    /** The way the bar grows from its base; its outer end is rounded. */
+    dir: CapDirection;
+    /**
+     * A texture, `paint(id)`: the bar is engraved inside a crisp 1px outline.
+     * Omit for a solid bar, toned by a fill class in className.
+     */
+    fill?: string;
+    /** Outer box, base included: x, y, width and height in px. */
+    h: number;
+    /** The engraved outline's tone. */
+    outline?: string;
+    w: number;
+    x: number;
+    y: number;
+};
+/**
+ * A bar, square at its base and rounded at its outer end. Solid bars sit
+ * where the scale puts them; an engraved bar snaps its outline to the
+ * half pixel and runs a whole number of px along its length, one less
+ * across it, so the outline is crisp on every side.
+ */
+export declare const Bar: ({ className, dir, fill, h, outline, w, x, y, ...rest }: BarProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+/**
+ * Point markers, by radius in px: the outer edge of the painted mark, so a
+ * solid dot and a hollow ring of one size cover the same ground.
+ * - xs: secondary marks on dense data, retired or minor events
+ * - sm: every point at rest, and the hover dot
+ * - md: the hero, the active point, an endpoint, the cursor ring
+ * - lg: the hero on a large-format layout with room to spare
+ */
+export declare const DOT: {
+    readonly lg: 6;
+    readonly md: 4.5;
+    readonly sm: 3;
+    readonly xs: 2;
+};
+export type DotSize = keyof typeof DOT;
+/** A hollow ring's stroke: 1px at rest, 1.5px for the cursor or hover ring. */
+export declare const RING_WEIGHT: {
+    readonly cursor: 1.5;
+    readonly rest: 1;
+};
+export type RingWeight = keyof typeof RING_WEIGHT;
+/**
+ * Tick lengths in px, all 1px thick: a ruler's one, five and ten (sm, md,
+ * lg), and the long dimension mark (xl). Axis ticks are md. A tick centred
+ * on its line runs half its length either side.
+ */
+export declare const TICK: {
+    readonly lg: 9;
+    readonly md: 6;
+    readonly sm: 4;
+    readonly xl: 14;
+};
+export type TickSize = keyof typeof TICK;
+/**
+ * The 2px family: hero stems, medians, caps, grips and label ticks. Rest
+ * stems are 1px; the hero's stem is 2px.
+ */
+export declare const MARK_WEIGHT = 2;
+export declare const STEM: {
+    readonly hero: 2;
+    readonly rest: 1;
+};
+/** The tick beside a label in a column of names: 2px tall, 6px long. */
+export declare const LABEL_TICK: {
+    readonly h: 2;
+    readonly w: 6;
+};
+/** Dot pitch of a dotted ring: 4 for guides and grids, 3 for a ring that marks one point. */
+export declare const RING_STEP: {
+    readonly guide: 4;
+    readonly mark: 3;
+};
+/** Key swatch size, swatch-to-label gap and gap between key entries. */
+export declare const KEY: {
+    readonly entryGap: 16;
+    readonly gap: 6;
+    readonly swatch: 12;
+};

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

@@ -0,0 +1,12 @@
+/** --hl-ease-travel, cubic-bezier(0.77, 0, 0.175, 1): ease-in-out-quart. */
+export declare const easeTravel: (t: number) => number;
+/** The --duration-* tokens, in ms. */
+export declare const DURATION: {
+    readonly change: 400;
+    readonly enter: 600;
+    readonly grow: 800;
+    readonly hover: 150;
+    readonly long: 1200;
+};
+/** The --stagger-* tiers: dense (hundreds), fine (dozens), mark (a handful), series (a few). */
+export type StaggerTier = "dense" | "fine" | "mark" | "series";

package/lib/types/charts/originals/daily-users.d.ts

@@ -0,0 +1,13 @@
+import type { DayCount } from "./daily-users.data.js";
+interface DailyUsersProps {
+    data?: DayCount[];
+    height?: number;
+}
+/**
+ * O1 Summer of 1976. The 7-day mean as one quiet line, and every day hung from
+ * it as a stem out to its own maximum: each day reaches above the
+ * week or falls short of it, so the heatwave and the break in the weather read
+ * as a comb along the trend. The hottest day is in ink.
+ */
+export declare const DailyUsers: (props: DailyUsersProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/originals/daily-users.data.d.ts

@@ -0,0 +1,17 @@
+/**
+ * O1 Summer of 1976: the daily maximum Central England temperature, June to
+ * August 1976.
+ * 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 1976). Transform: the 92 values from
+ * 1976-06-01 to 1976-08-31, copied as they stand.
+ */
+/** One day's maximum temperature, in °C. */
+export interface DayCount {
+    date: Date;
+    value: number;
+}
+/** Daily maximum Central England temperature, June to August 1976. */
+export declare const dailyUsers: DayCount[];

package/lib/types/charts/originals/feature-rank.d.ts

@@ -0,0 +1,13 @@
+import type { FeatureUse } from "./feature-rank.data.js";
+interface FeatureRankProps {
+    data?: FeatureUse[];
+}
+/**
+ * O3 Arable crops. Crops ranked by area in each year, set like a staff:
+ * each crop holds its rank on a rule for the quarter, then
+ * switches rows in the gap before the next. Each track is an engraved band
+ * as thick as its area: fine hatch, and the year's leader
+ * crosshatched in ink, thickening as it climbs.
+ */
+export declare const FeatureRank: (props: FeatureRankProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/originals/feature-rank.data.d.ts

@@ -0,0 +1,29 @@
+/**
+ * O3 Arable crops: the area of eight arable crops in the United Kingdom,
+ * ranked in each of five years.
+ * Source: Defra with the Scottish Government, Welsh Government and DAERA,
+ * "Agricultural land use in the United Kingdom" (Open Government Licence),
+ * https://www.gov.uk/government/statistics/agricultural-land-use-in-the-united-kingdom
+ * Fetched 2026-10-15.
+ * File: Agricultural-land-use-uk-june25-20251211.ods, sheet Arable_crops (crop
+ * areas on agricultural holdings on 1 June, hectares, from the June Survey
+ * and Census of Agriculture). Transform: the rows Wheat, Barley, Oilseed rape,
+ * Oats, Field beans, Sugar beet, Potatoes and Maize (including fodder and
+ * green maize) for 1984, 1994, 2004, 2014 and 2024, in thousands of hectares
+ * to 0.1. Not shown: peas for harvesting dry and the other arable crops.
+ * Caveat from the source: from 2010 England's figures cover commercial
+ * holdings only, so the 2014 and 2024 columns are not strictly on the same
+ * footing as the earlier ones. Surveys are samples, subject to sampling error.
+ */
+/** One crop's area in thousands of hectares, one value per year. */
+export interface FeatureUse {
+    feature: string;
+    weekly: number[];
+}
+/** The years shown, as broadsheet ticks. */
+export declare const QUARTERS: string[];
+/**
+ * Eight arable crops by area, 1984 to 2024. Barley led in 1984; maize climbs
+ * from last place to fourth.
+ */
+export declare const featureUse: FeatureUse[];

package/lib/types/charts/originals/format.d.ts

@@ -0,0 +1,2 @@
+/** A percentage to the tenth, without a needless ".0": "38.5%", "10%". */
+export declare const fmtPercent: (v: number) => string;

package/lib/types/charts/originals/key.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface KeyItem {
+    label: string;
+    /** The mark, drawn in a 12px box centred on y = 0. */
+    mark: ReactNode;
+}
+interface KeyProps {
+    items: KeyItem[];
+    /** Right edge of the key. */
+    right: number;
+    /** Centre line of the key. */
+    y: number;
+}
+/** A short key of marks and names, set in `t-axis`, flush to `right`. */
+export declare const Key: (props: KeyProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/originals/response-time.d.ts

@@ -0,0 +1,11 @@
+import type { ChannelTimes } from "./response-time.data.js";
+interface ResponseTimeProps {
+    data?: ChannelTimes[];
+}
+/**
+ * O4 Vote share. Each party's constituency vote shares as a comb on one
+ * percentage scale: a tick at every tenth percentile over a halftone band
+ * whose dots swell where constituencies crowd. The highest median is in ink.
+ */
+export declare const ResponseTime: (props: ResponseTimeProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/originals/response-time.data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * O4 Vote share: how each party's share of the vote ran across the
+ * constituencies it contested at the 2024 general election.
+ * Source: House of Commons Library, UK Parliament Election Results website
+ * (Open Parliament Licence), https://electionresults.parliament.uk/general-elections/6
+ * File: candidacies.csv (one row per candidate, with "Candidate vote share"
+ * as a fraction of valid votes). Fetched 2026-10-15.
+ * Transform: for each of five parties (Labour 631 candidates, Conservative
+ * 635, Reform UK 609, Liberal Democrat 630, Green 574; the five that stood
+ * in more than 570 constituencies of 650), the vote shares in percent were
+ * sorted and the 5th, 10th, 20th ... 90th and 95th percentiles taken by
+ * linear interpolation (as d3.quantileSorted does), each rounded to 0.1.
+ */
+/** One party's constituency vote shares, as percentiles in percent. */
+export interface ChannelTimes {
+    channel: string;
+    /** 5th, 10th, 20th … 90th, 95th percentiles; the median is index 5. */
+    q: number[];
+}
+/** The percentiles kept: the 5–95 span, and every tenth between. */
+export declare const LEVELS: number[];
+export declare const MEDIAN = 5;
+/** Vote share by constituency at the 2024 general election, five parties. */
+export declare const responseTimes: ChannelTimes[];

package/lib/types/charts/originals/revenue-by-plan.d.ts

@@ -0,0 +1,12 @@
+import type { PlanRevenue } from "./revenue-by-plan.data.js";
+interface RevenueByPlanProps {
+    data?: PlanRevenue[];
+}
+/**
+ * O2 Everyday prices. Four prices as one 0–100% ruler over a slim engraved
+ * bar, each good called out below like a dimension on a drawing: a fine tick
+ * down to its name, share and price. Under that, each price's rise on ten
+ * years earlier. The dearest good is crosshatched in ink.
+ */
+export declare const RevenueByPlan: (props: RevenueByPlanProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/originals/revenue-by-plan.data.d.ts

@@ -0,0 +1,26 @@
+/**
+ * O2 Everyday prices: four goods in 2014 and in 2024.
+ * Source: Office for National Statistics, Average prices (RPI) in dataset
+ * MM23, https://www.ons.gov.uk/economy/inflationandpriceindices/timeseries/czms/mm23
+ * Fetched 2026-10-15 (release of 16 September 2026).
+ * File: the full MM23 CSV (mm23.csv), series CZMS (draught lager, per pint),
+ * CZOH (white loaf, sliced, 800g), CZNT (milk, pasteurised, per pint) and
+ * CZNQ (tea bags, per 250g). The series' own annual rows "2014" and "2024"
+ * are the figures, in pence. Transform: pence divided by 100 to pounds, no
+ * other change. The ONS egg series (CZNU) stops in January 2022, so tea
+ * stands in for the dozen eggs the plan had.
+ */
+/** One good's average price in pounds, and the same good ten years earlier. */
+export interface PlanRevenue {
+    /** The good's name. */
+    plan: string;
+    /** Its average price in 2014, in pounds. */
+    prior: number;
+    /** Its average price in 2024, in pounds. */
+    revenue: number;
+}
+/**
+ * Average shop prices, 2014 and 2024: a pint of lager is £3.37 then and
+ * £4.77 now; a loaf £1.16 then and £1.40 now.
+ */
+export declare const planRevenue: PlanRevenue[];

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

@@ -0,0 +1,42 @@
+import type { RefObject } from "react";
+/** Live visibility: unlike useReveal, it flips back when scrolled away. */
+export declare const useInView: (ref: RefObject<HTMLElement | null>, threshold?: number) => boolean;
+/** True once the box has scrolled into view, and only while it stays there. */
+export declare const useLive: (box: RefObject<HTMLElement | null>) => boolean;
+/** Calls `onFrame(dt)` on every animation frame while `running`; dt in ms, capped. */
+export declare const useFrame: (running: boolean, onFrame: (dt: number) => void) => void;
+interface PlayheadOptions {
+    /** The chart's box: playback waits for it to be revealed and on screen. */
+    box: RefObject<HTMLElement | null>;
+    /** Where playback stops; Infinity for a loop that never ends. */
+    end: number;
+    /** ms of real time per unit of the playhead. */
+    rate: number;
+    /**
+     * Under reduced motion the playhead does not glide. "end": it starts
+     * finished. "step": it starts at `start` and paused, and Play moves it a
+     * whole `step.unit` every `step.every` ms.
+     */
+    reduced: "end" | "step";
+    /** Where a reduced-motion "step" playhead starts (default 0). */
+    start?: number;
+    step?: {
+        every: number;
+        unit: number;
+    };
+}
+/**
+ * A playhead from 0 to `end` that advances while playing and live. Toggle
+ * plays and pauses (and restarts once finished), seek jumps and pauses,
+ * replay starts again from 0.
+ */
+export declare const usePlayhead: (o: PlayheadOptions) => {
+    done: boolean;
+    handleReplay: () => void;
+    handleSeek: (k: number) => void;
+    handleToggle: () => void;
+    playing: boolean;
+    reduced: boolean;
+    t: number;
+};
+export {};

package/lib/types/charts/plot-note.d.ts

@@ -0,0 +1,37 @@
+import type { FontMetrics } from "../schema/metrics.js";
+interface PlotNoteProps {
+    /** Text alignment at `x`. Defaults to "middle". */
+    anchor?: "end" | "middle" | "start";
+    /** The face's metrics for wrapping; Inter's when omitted. */
+    metrics?: FontMetrics;
+    /** Entry-stagger slot for the fade-in. Defaults to 6, after most marks. */
+    order?: number;
+    /** The footnote; " · " separates the segments it may wrap at. */
+    text?: string;
+    /** Room available for one line. */
+    width: number;
+    x: number;
+    /** Baseline of the last line; extra lines stack upward from it. */
+    y: number;
+}
+/**
+ * The in-plot unit footnote ("One dot = one day"), fading in with the
+ * labels. Wraps at " · " to fit `width` and renders nothing when even one
+ * segment can't fit. Reserve room for it with `noteSpace` from ./util,
+ * using the same width.
+ */
+export declare const PlotNote: (props: PlotNoteProps) => import("react").JSX.Element | null;
+/**
+ * The footnote in its usual place: centred under the plot, 6px off the
+ * bottom of a chart `width` wide and `height` tall, `gutter` px clear of
+ * either side (8 by default; the daily charts keep 12).
+ */
+export declare const FootNote: (props: {
+    gutter?: number;
+    height: number;
+    metrics?: FontMetrics;
+    order?: number;
+    text?: string;
+    width: number;
+}) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+/** The panel each board chart sits in. */
+export declare const PANEL = "relative min-w-0 rounded-xs bg-panel px-2 py-3 [&_svg]:block [&_svg]:overflow-visible [&_svg]:select-none [&_svg:focus]:outline-none [&_svg:focus-visible]:outline-1 [&_svg:focus-visible]:outline-offset-4 [&_svg:focus-visible]:outline-muted [&_svg:focus-visible]:outline-solid";
+/** Ticks, scale labels and small secondary labels (the axis role). */
+export declare const TICK = "t-axis";
+/** Category and series names. */
+export declare const LABEL = "text-tick font-medium";
+/** Data values (the value role). */
+export declare const VALUE = "t-value";
+/** A small heading over an HTML block, in the axis voice. */
+export declare const CAPTION = "text-tick text-muted";
+/** Gridlines: solid 1px hairlines, snapped. */
+export declare const GRID_H = "grid-line";
+export declare const GRID_V = "grid-line";
+/** Baselines and zero rules. */
+export declare const RULE_ZERO = "hairline";
+/** A limit or plan line: the one dash, because it marks a target. */
+export declare const RULE_TARGET = "stroke-l3 dash-rule shape-crisp";
+/** The scrub cursor: a solid hairline. */
+export declare const CURSOR = "stroke-faint shape-crisp";
+/** The 1px rule around every textured fill. */
+export declare const OUTLINE = "fill-none stroke-l5 shape-crisp";
+export declare const LINE = "fill-none stroke-medium cap-round";
+/** Cursor dots sit on the cursor (no glide) and recolour across a threshold. */
+export declare const DOT = "transition-tone";
+/** Scatter points swell on hover. */
+export declare const POINT = "transition-radius";
+/** Bars recolour as the cursor passes them. */
+export declare const MARK = "transition-tone";

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

@@ -0,0 +1,62 @@
+import type { SVGProps } from "react";
+import type { TickSize } from "./marks.js";
+/**
+ * What a rule is for, which sets its tone and dash. "plain" sets nothing:
+ * the tone comes in className.
+ */
+export type RuleKind = "cursor" | "grid" | "hairline" | "plain" | "rule" | "target";
+type LineProps = Omit<SVGProps<SVGLineElement>, "x1" | "x2" | "y1" | "y2">;
+/** A level rule from x0 to x1, on the half pixel of y. */
+export declare const HRule: ({ className, kind, x0, x1, y, ...rest }: LineProps & {
+    kind?: RuleKind;
+    x0: number;
+    x1: number;
+    y: number;
+}) => import("react").JSX.Element;
+/** An upright rule from y0 to y1, on the half pixel of x. */
+export declare const VRule: ({ className, kind, x, y0, y1, ...rest }: LineProps & {
+    kind?: RuleKind;
+    x: number;
+    y0: number;
+    y1: number;
+}) => import("react").JSX.Element;
+/**
+ * A mark's stem from y0 to y1: 1px on the half pixel at rest, 2px on the
+ * whole pixel for the hero. Tone and motion come in `className`.
+ */
+export declare const Stem: ({ className, hero, x, y0, y1, ...rest }: LineProps & {
+    hero?: boolean;
+    x: number;
+    y0: number;
+    y1: number;
+}) => import("react").JSX.Element;
+/**
+ * A ruler tick at x, standing on y: hanging below it by default, or rising
+ * above it. Its length is one of the TICK sizes.
+ */
+export declare const Tick: ({ className, rise, size, x, y, ...rest }: LineProps & {
+    rise?: boolean;
+    size?: TickSize;
+    x: number;
+    y: number;
+}) => import("react").JSX.Element;
+/** Level gridlines at each y, from x0 to x1. */
+export declare const HGrid: (props: {
+    className?: string;
+    x0: number;
+    x1: number;
+    ys: number[];
+}) => import("react").JSX.Element;
+/** Upright gridlines at each x, from y0 to y1. */
+export declare const VGrid: (props: {
+    xs: number[];
+    y0: number;
+    y1: number;
+}) => import("react").JSX.Element;
+/** The scrub cursor: an upright hairline at x. */
+export declare const Cursor: (props: {
+    x: number;
+    y0: number;
+    y1: number;
+}) => import("react").JSX.Element;
+export {};

package/lib/types/charts/scale-context.d.ts

@@ -0,0 +1,3 @@
+import type { ScaleOptions } from "../schema/scale.js";
+/** The slide-scale options of the nearest Plot, read by ChartSvg. */
+export declare const ScaleContext: import("react").Context<ScaleOptions>;

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

@@ -0,0 +1,9 @@
+export type CapDirection = "down" | "left" | "right" | "up";
+/** Corner radius of a bar's outer end: small cells on the radius scale. */
+export declare const BAR_RADIUS = 2;
+/**
+ * A bar: square at the base, squared at the outer end with a 2px
+ * corner. `dir` is the direction the bar grows from its base. A bar shorter
+ * than its corner gets a smaller one.
+ */
+export declare const barPath: (x: number, y: number, w: number, h: number, dir: CapDirection) => string;

package/lib/types/charts/shared-options.d.ts

@@ -0,0 +1,25 @@
+import type { PointerEvent, ReactElement, ReactNode } from "react";
+import type { z } from "zod";
+import type { SharedCallbacks, sharedShape } from "../schema/options.js";
+/** The shared options as a chart's props carry them. */
+export type SharedProps = Partial<z.infer<z.ZodObject<typeof sharedShape>>> & SharedCallbacks;
+/** What `Plot` takes from a chart's shared options. */
+export declare const plotOptions: (props: SharedProps) => {
+    animate: "mount" | "off" | "scroll" | undefined;
+    onReady: (() => void) | undefined;
+    replayKey: string | number | undefined;
+    scaling: {
+        fit: boolean | undefined;
+        scale: number | undefined;
+        strokes: "device" | "proportional" | undefined;
+    };
+};
+/** A chart's ids under its `idPrefix`, when it has one. */
+export declare const scoped: (idPrefix: string | undefined, children: ReactNode) => ReactElement;
+/** The chart's data table: hidden for sighted readers unless `table` is set. */
+export declare const chartTable: (props: SharedProps, caption: string, columns: string[], rows: string[][]) => ReactElement;
+/**
+ * A pointer's x in the chart's own pixels. The svg may be shown larger or
+ * smaller than it is drawn (`scale`, `fit`), so the box is read back.
+ */
+export declare const pointerX: (e: PointerEvent<SVGSVGElement>, width: number) => number;