@crewlethq/ui 0.4.3 → 0.5.0

package/dist/Card/Card.d.ts

@@ -1,11 +1,14 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
 export type CardVariant = 
-/** One step above the page. */
+/**
+ * The card rung inside the default hairline, flat: no shadow and no rim.
+ * What finds it on the sheet is the rung's step and the hairline's.
+ */
 'default'
 /**
- * The TILE: the panel's ground with none of its lift, at the tighter inset,
- * for one of many records in a grid. Its default padding is `tight`.
+ * The TILE: the card at the tighter inset, for one of many records in a
+ * grid. Its default padding is `tight`.
  */
  | 'subtle'
 /** Transparent, with a strong border. */
@@ -23,8 +26,9 @@ export type CardVariant =
 /** Lifted off the page. */
  | 'elevated'
 /**
- * A dashed boundary: something that is not quite a record yet. A seat held
- * by a person rather than an agent, a slot waiting to be filled.
+ * A dashed boundary: something that is not quite a record yet, a slot
+ * waiting to be filled. Never a person: a seat a person holds is a record
+ * like any other, and its badge's circle is what says who holds it.
  */
  | 'dashed';
 /**

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-NDCATSW7.js';
+export { Card } from '../chunk-V34H2YCY.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Card-RLR254LD.css → Card-GLP7SUV6.css}

@@ -27,23 +27,24 @@
 }
 
 /*
- * TWO GROUNDS, TWO DEVICES. On light the shadow is the elevation; on dark a
- * shadow over a dark page is nearly invisible, so the hairline along the top
- * edge does the job instead.
+ * THE CARD IS FLAT: the card rung inside the default hairline, at the 12px
+ * corner, and nothing else, which is the approved design's card in both
+ * palettes. It casts no shadow and draws no rim of light, because what finds a
+ * card on the sheet is the pair the palette suite holds together: the rung a
+ * visible step off the sheet, and the hairline a clear step off both. A
+ * shadow under every panel of a screen made a list of records into a relief
+ * map, and a rim along every top edge was a second hairline nobody measured.
+ * Lift belongs to what genuinely stands OVER the page, which is `elevated`.
  *
- * THE HAIRLINE IS ON ITS OWN ELEMENT, and that is the whole reason the rule is
- * two rules. `--shadow-hairline` is `none` in the light theme, and `none` is a
- * value a shadow list may not carry: `box-shadow: <shadow>, none` is invalid at
- * computed-value time, so the declaration is dropped and the light card loses
- * the elevation the list was built around. Alone on a pseudo element the same
- * token is valid in both themes, and it composes with the selection ring
- * rather than replacing whichever was declared last, exactly as the rail does.
+ * THE RIM IS ON ITS OWN ELEMENT where it is still drawn, and that is the whole
+ * reason the elevated card's rule is two rules. `--shadow-hairline` is `none`
+ * in the light theme, and `none` is a value a shadow list may not carry:
+ * `box-shadow: <shadow>, none` is invalid at computed-value time, so the
+ * declaration is dropped and the light card loses the elevation the list was
+ * built around. Alone on a pseudo element the same token is valid in both
+ * themes, and it composes with the selection ring rather than replacing
+ * whichever was declared last, exactly as the rail does.
  */
-.crewlet-card--default:not(.crewlet-card--flush) {
-  box-shadow: var(--shadow-xs);
-}
-
-.crewlet-card--default:not(.crewlet-card--flush)::after,
 .crewlet-card--elevated::after {
   content: '';
   position: absolute;
@@ -58,8 +59,9 @@
 }
 
 /*
- * THE TILE: the panel's ground with none of its lift. One of many in a grid,
- * where a shadow under every card turns a list of records into a relief map.
+ * THE TILE: the card at the tile's tighter inset. One of many records in a
+ * grid, where at the panel's own step each tile spends a third of its height
+ * on air.
  *
  * It used to take the PAGE's ground, which is a card drawn in the colour of
  * the thing behind it: on the light palette a white tile on a white page, held
@@ -186,9 +188,14 @@
     box-shadow var(--motion-duration-base) var(--motion-easing-default);
 }
 
+/*
+ * Under the pointer the hairline steps up and nothing lifts: a flat card that
+ * rose on hover would be the one shadow on the screen, and it would move as
+ * the pointer crossed a grid of them. The approved design's card answers the
+ * pointer with its boundary alone.
+ */
 .crewlet-card.is-interactive:hover {
   border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-md);
 }
 
 .crewlet-card.is-interactive:focus-visible {

package/dist/Charts/BarList.d.ts

@@ -21,8 +21,25 @@ export interface BarDatum {
     /** What pressing the row does, where it is not a destination. */
     onSelect?: () => void;
 }
+/**
+ * Where a row's bar stands against its words.
+ *
+ * `stacked`, the default, is the UNDERLINE register: the label and its value
+ * on one line, and a thin bar across the whole row under them, for a list
+ * read as a list of names with a measure under each.
+ *
+ * `beside` is the design's own ranked figure, the Home screen's "Tokens by
+ * team" and Spend's "By model": the label (and its `sub`) in a column of its
+ * own, then a bar up to 12px thick, then the value at the bar's END, so a
+ * reader's eye runs from the name along the bar to the number. It draws no
+ * track: the bars share one baseline and the longest reaches the end of the
+ * scale, which is all a track would say.
+ */
+export type BarListLayout = 'stacked' | 'beside';
 export interface BarListProps {
     data: BarDatum[];
+    /** Where the bar stands against the words: see the type. Defaults to `stacked`. */
+    layout?: BarListLayout;
     /** The value the longest bar stands for. Defaults to the largest present. */
     max?: number;
     /** How many rows to draw. The rest are counted by `moreLabel`. */
@@ -48,4 +65,4 @@ export interface BarListProps {
  * so the bar adds a shape to a number that is already readable, and a reader
  * who cannot see it has lost nothing.
  */
-export declare function BarList({ data, max, limit, moreLabel, emptyLabel, className, }: BarListProps): import("react").JSX.Element;
+export declare function BarList({ data, layout, max, limit, moreLabel, emptyLabel, className, }: BarListProps): import("react").JSX.Element;

package/dist/Charts/ChartTooltip.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+export interface ChartTooltipRow {
+    /** The series this row reads, so a row keeps its node as the reading moves. */
+    id: string;
+    name: ReactNode;
+    /** The value, already formatted: "1.2M", "38 turns". */
+    value: ReactNode;
+    /**
+     * The series' colour, drawn as a SWATCH beside the name and never as the
+     * colour of any text: a data hue is a mark measured against the surface as
+     * a mark, and read as text it holds none of the contrast a word needs.
+     */
+    color?: string | undefined;
+}
+export interface ChartTooltipProps {
+    /** Whether a reading is showing. Closed, the live region stays and is empty. */
+    open: boolean;
+    /**
+     * Where the mark being read stands, as fractions of the plot's width: its
+     * `start` and `end` edges, or one `start` for a mark with no width (the
+     * crosshair on a time series). The tooltip stands beside the mark, on the
+     * side with more room, and never over it.
+     */
+    anchor?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    /** The line naming what is read: the bucket's time, the column's label. */
+    title?: ReactNode;
+    rows?: readonly ChartTooltipRow[];
+    /** The sum, where the rows are parts of one whole. */
+    total?: {
+        label?: ReactNode;
+        value: ReactNode;
+    } | undefined;
+    className?: string;
+}
+/**
+ * The reading of one mark, beside it.
+ *
+ * POSITIONED BY A STYLE PROPERTY, NEVER BY A STYLE ELEMENT. The one value that
+ * varies (how far across the plot the mark stands) is set as `left` on the
+ * element React draws, which a strict Content-Security-Policy allows because it
+ * goes through the CSSOM rather than through markup the policy has to trust;
+ * everything else is a rule in the stylesheet. It is ABSOLUTE in the nearest
+ * positioned ancestor, which is the chart's plot frame, so a chart in a
+ * scrolled panel, a dialog or a transformed canvas needs no measuring at all.
+ *
+ * THE SIDE IS THE ROOMIER ONE. A mark in the first half of the plot has its
+ * tooltip after it and one in the second half before it, so the box never runs
+ * off the end of a plot that ends at the edge of a card, and it never covers
+ * the mark being read.
+ *
+ * TEXT TOKENS ONLY, ON GLASS. Every word is a text step: the title the
+ * tertiary step, a series' name the secondary and every number the primary.
+ * The box stands over the marks beside the one it reads, so its ground is the
+ * frosted glass rather than the card, which is translucent in the marketing
+ * palette and let a column's hue through the words; the palette suite holds
+ * each step over 4.5:1 on the glass with every data hue behind it.
+ * A series' hue is its swatch, which is a mark; painted into its name it would
+ * be a word at whatever contrast a chart hue happens to have.
+ *
+ * IT IS THE LIVE REGION. The element that is always there is polite, and the
+ * box is drawn inside it only while a reading shows, so a keyboard reader
+ * walking the marks hears each one as they land on it: the tooltip is what
+ * they would have read with their eyes, said once.
+ */
+export declare function ChartTooltip({ open, anchor, title, rows, total, className }: ChartTooltipProps): import("react").JSX.Element;

package/dist/Charts/StackedBar.d.ts

@@ -17,22 +17,40 @@ export interface StackedBarProps {
         value: number;
         percent: number;
     }[]) => string;
+    /**
+     * How a value reads out, in the default sentence and in a part's reading.
+     * Defaults to the reader's own number format.
+     */
+    format?: (value: number) => string;
     className?: string;
 }
 /**
  * One whole, split into its parts.
  *
  * ALWAYS BESIDE ITS LEGEND. The bar carries no labels of its own, so without
- * a Legend the parts are anonymous colours; pair the two, always, and key
- * both from the same list.
+ * a Legend the parts are anonymous colours at a glance, and only a reader who
+ * stops on each one learns what it is; pair the two, always, and key both from
+ * the same list.
+ *
+ * THE PARTS STAND 2PX APART, and the gap comes out of the parts: each part
+ * GROWS by its value into the track's width less the gaps, rather than taking
+ * a percentage of the whole, which with a gap between them would add up to
+ * more than the track and push the last part out of it.
  *
  * A ZERO PART IS NOT DRAWN. Every segment used to get at least two pixels so
  * that it existed, which drew a phase that never ran as a thin slice of one
  * that did, and made the eleven-part bar of a quiet company look busy.
  *
- * THE VALUES ARE IN THE MARKUP, not only in a `title`. A tooltip on a
- * fragment of a bar is reachable by a mouse and by nothing else: no keyboard,
- * no screen reader, no touch. The summary sentence is what a reader who
- * cannot hover is left with, so it says everything the picture does.
+ * THE VALUES ARE IN THE MARKUP, not only in a tooltip. The summary sentence
+ * is what a reader who cannot see the bar is left with, so it says everything
+ * the picture does, and it is the NAME of the plot, so a keyboard reader who
+ * tabs onto the bar hears it before reading a single part.
+ *
+ * AND EACH PART CAN BE READ ON ITS OWN, by the reading layer every chart here
+ * shares (see `useChartHover`): pointing at a part, or walking the parts with
+ * ←/→ once the bar has focus, opens a tooltip beside it with the part's name,
+ * its value and share, and the whole. A part's colour is its place in
+ * `segments`, zero parts included, so the swatch in its reading is the hue the
+ * Legend keyed from the same list shows.
  */
-export declare function StackedBar({ segments, summary, className }: StackedBarProps): import("react").JSX.Element;
+export declare function StackedBar({ segments, summary, format, className }: StackedBarProps): import("react").JSX.Element;

package/dist/Charts/StackedColumns.d.ts

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+export interface StackedColumnsSeries {
+    /** What the series is, as a stable identity: its colour and its node follow it. */
+    id: string;
+    name: string;
+    /** Defaults to the series' own place in `series`, in the data ramp. */
+    color?: string;
+}
+export interface StackedColumnsBucket {
+    /** The bucket's start, epoch milliseconds. It is the column's identity. */
+    t: number;
+    /** Each series' value in this bucket, by series id. A missing id is zero. */
+    values: Readonly<Record<string, number>>;
+}
+/**
+ * Where the chart draws its legend.
+ *
+ * `below`, the default, under the dates. `head` at the END of the chart's head
+ * row, top right, where the design's Spend card draws it beside the card's
+ * title: pass that title as `head` and the two share one line. `none` draws no
+ * legend, for a screen that names the series somewhere the chart cannot reach;
+ * the chart is then that screen's to caption, and a stacked figure without its
+ * legend is a picture of some numbers.
+ */
+export type StackedColumnsLegend = 'below' | 'head' | 'none';
+export interface StackedColumnsProps {
+    /**
+     * Every series the figure CAN draw, in stacking order: the first stands on
+     * the baseline. Filter with `hidden`, never by leaving one out of this list,
+     * because a series' colour is its place here.
+     */
+    series: readonly StackedColumnsSeries[];
+    /** One column per bucket, oldest first. */
+    buckets: readonly StackedColumnsBucket[];
+    /**
+     * The series not drawn, by id. They leave the columns, the scale, the
+     * tooltip and its total, and every other series keeps its colour.
+     */
+    hidden?: readonly string[];
+    /** What the chart is, read in place of the picture: "tokens per day by phase". */
+    label: string;
+    /** Where the legend goes: see the type. Defaults to `below`. */
+    legend?: StackedColumnsLegend;
+    /**
+     * The chart's head: a title and what qualifies it, drawn at the START of a
+     * row over the plot, with the legend at its end when `legend` is `head`.
+     */
+    head?: ReactNode;
+    /** How tall the plot is, as a CSS length. */
+    height?: string;
+    /** How a value reads out, on the scale and in the tooltip. Defaults to a compact number. */
+    format?: (value: number) => string;
+    /** How a bucket reads out, under the plot and in the tooltip. Defaults to the reader's date. */
+    formatTime?: (at: number) => string;
+    /** The chart's own sentence. The default names the window, the tallest column and each series' total. */
+    summary?: (facts: {
+        from: number | null;
+        to: number | null;
+        peak: number;
+        series: {
+            name: string;
+            total: number;
+        }[];
+    }) => string;
+    className?: string;
+}
+/**
+ * The scale's top and its step: a round number at or above the tallest
+ * column, in about four steps of 1, 2, 2.5 or 5 of a power of ten. A scale
+ * that stops at the peak itself labels its lines 0, 0.33M and 0.66M, which
+ * nobody reads at a glance.
+ */
+export declare function niceScale(peak: number, steps?: number): {
+    top: number;
+    step: number;
+};
+/**
+ * A quantity per bucket over time, split into its parts: the column chart.
+ *
+ * A COLUMN IS ITS BUCKET'S TOTAL, and its parts share that height in
+ * proportion. The parts stand 2px apart, and the gap comes out of the parts
+ * rather than being added on top, so the column's top is exactly where its
+ * total reads on the scale. Only the VALUE END is rounded, the top of the
+ * topmost part, because the baseline is where every column starts and a
+ * rounded foot would lift it off the axis.
+ *
+ * COLOUR FOLLOWS THE SERIES ID. A series' hue is its place in `series`, and
+ * filtering is `hidden` rather than a shorter list, so hiding one part never
+ * repaints the survivors: the blue a reader learnt for "execute" is still
+ * "execute" after they switched "review" off. A Legend beside the chart lists
+ * the same series in the same order, or passes each `color`.
+ *
+ * A ZERO PART IS NOT DRAWN, and an empty bucket is a column of no height: the
+ * bucket happened and nothing happened in it.
+ *
+ * THE READING IS PER COLUMN. Pointing at a column, or walking the columns with
+ * ←/→ once the plot has focus, opens a tooltip beside it with every part and
+ * the total (see `useChartHover`); the tooltip is the live region, so a screen
+ * reader hears the same.
+ *
+ * IT DRAWS ITS OWN LEGEND, from the same list and in the same colours, with
+ * the hidden series left out. A legend written beside the chart by its caller
+ * was a second copy of `series` that had to be kept in step by hand, and the
+ * figure is never meant to be drawn without one; `legend` says only WHERE,
+ * under the dates or at the end of the chart's head, top right, as the
+ * design's Spend card has it.
+ *
+ * All of it is HTML positioned by style properties, so it holds a crisp 2px
+ * gap and a true 4px corner at any width, which a stretched SVG cannot, and no
+ * style element is ever drawn.
+ */
+export declare function StackedColumns({ series, buckets, hidden, label, legend, head, height, format, formatTime, summary, className, }: StackedColumnsProps): import("react").JSX.Element;

package/dist/Charts/TimeSeries.d.ts

@@ -61,6 +61,12 @@ export interface TimeSeriesProps {
  * scale, then the whole of it again. A name is how a graphic carries its
  * meaning; a second copy in the text is not a fallback, it is a repeat.
  *
+ * A READING, BY POINTER OR BY KEY. Over the plot a crosshair stands on the
+ * nearest instant any series has a point at, and a tooltip beside it reads
+ * every series at that instant. The plot is one tab stop, and ←/→ walk the
+ * same instants (see `useChartHover`), so what a mouse can read a keyboard
+ * can too; the tooltip is the live region, so a screen reader hears each one.
+ *
  * The plot is hand drawn rather than taken from a charting library for one
  * reason that decides it: every mark here reads tokens, in two themes, at the
  * contrast floors the palette suite measures, and a library's theming surface
@@ -69,8 +75,23 @@ export interface TimeSeriesProps {
 export declare function TimeSeries({ series, from, to, label, height, format, formatTime, summary, className, }: TimeSeriesProps): import("react").JSX.Element;
 export interface SparklineProps {
     values: readonly number[];
-    /** The line's colour. Defaults to the accent, which is what a trend takes. */
+    /**
+     * The line's colour. Defaults to the residual neutral, `DATA_COLOR_OTHER`:
+     * a shape beside a number is named by that number rather than by a legend,
+     * and a series hue is spent only inside a figure that names it.
+     */
     color?: string;
+    /**
+     * Marks the LAST value as now, with a point in the accent at the line's
+     * end: the approved design's "you are here" on a trend. The accent means
+     * where the reader is, and on a trend that is the present.
+     *
+     * The point is cut out of the ground it stands on by a 2px ring of
+     * `--crewlet-spark-ground`, the card by default, because a sparkline sits
+     * beside a number on a card; one drawn on another rung sets the variable on
+     * itself or an ancestor.
+     */
+    current?: boolean | undefined;
     /** How tall the shape is, as a CSS length. */
     height?: string;
     className?: string;
@@ -86,7 +107,17 @@ export interface SparklineProps {
  * already say; a shape that genuinely carries a fact on its own is a
  * TimeSeries, which has a window, a peak and a sentence.
  *
+ * THE LINE IS THE NEUTRAL AND THE PRESENT IS THE ACCENT. With `current` the
+ * last value is marked by one accent point, which is the only colour the
+ * shape spends: the trend is a quiet mark and "now" is where the eye lands.
+ *
+ * THE POINT IS NOT PART OF THE PLOT. The plot is stretched to whatever box it
+ * is given, so a circle drawn in its viewBox would come out as an ellipse as
+ * wide as the box is long; the point is its own element over the plot,
+ * placed by the last value's height as a fraction of the box, and stays
+ * round at every width.
+ *
  * Fewer than two values draw nothing, and the box keeps its height, so a row
  * of figures does not jump as one of them gains its second point.
  */
-export declare function Sparkline({ values, color, height, className }: SparklineProps): import("react").JSX.Element;
+export declare function Sparkline({ values, color, current, height, className, }: SparklineProps): import("react").JSX.Element;

package/dist/Charts/dataColor.d.ts

@@ -1,20 +1,28 @@
 /**
- * The data ramp: five series and a residual, in a fixed order.
+ * The data ramp: four series and a residual, in a fixed order.
  *
- * FIVE, AND THEN EVERYTHING ELSE. The ramp is measured for five hues that a
- * reader can tell apart from each other and from the accent under normal,
- * protan and deutan vision; a sixth would have to sit between two of them,
- * and the honest answer to "what colour is the eleventh series" is that
- * eleven series are not a comparison anybody can read. Past the fifth, a
- * series takes the residual, which is the neutral that means "the rest".
+ * FOUR, AND THEN EVERYTHING ELSE. The ramp is measured for four hues that a
+ * reader can tell apart from their neighbours, from the reserved danger red and
+ * from the accent, under normal, protan and deutan vision; a fifth would have
+ * to sit between two of them, and the honest answer to "what colour is the
+ * eleventh series" is that eleven series are not a comparison anybody can
+ * read. Past the fourth, a series takes the residual, which is the neutral
+ * that means "the rest".
  *
- * A DATA HUE IS ONLY EVER USED INSIDE A CHART THAT CARRIES A LEGEND. It says
- * "this series", and a mark with no legend says nothing at all. Status,
- * phase and the accent have their own families for exactly that reason: a
- * chart colour never means success, and never means "you are here".
+ * A DATA HUE IS ONLY EVER USED INSIDE A FIGURE THAT NAMES IT: a legend for two
+ * series or more, the label for one. It says "this series", and a mark nothing
+ * names says nothing at all. State and the accent have their own families for
+ * exactly that reason: a chart colour never means done or stopped, and never
+ * means "you are here".
+ *
+ * A CATEGORY IS A SERIES HERE, and only here. A phase, a unit or a model has no
+ * hue of its own anywhere else in the kit, so a figure that draws one per phase
+ * takes its series from this ramp in an order the APPLICATION declares, phase
+ * to index, and keeps that order across every figure it draws them in; the
+ * legend is what says which is which.
  */
-export declare const DATA_COLORS: readonly ["var(--color-data-1)", "var(--color-data-2)", "var(--color-data-3)", "var(--color-data-4)", "var(--color-data-5)"];
-/** The neutral for everything past the fifth series. */
+export declare const DATA_COLORS: readonly ["var(--color-data-1)", "var(--color-data-2)", "var(--color-data-3)", "var(--color-data-4)"];
+/** The neutral for everything past the fourth series. */
 export declare const DATA_COLOR_OTHER = "var(--color-data-other)";
-/** The colour of series `index`, with everything past the fifth as the residual. */
+/** The colour of series `index`, with everything past the fourth as the residual. */
 export declare function dataColor(index: number): string;

package/dist/Charts/index.d.ts

@@ -10,3 +10,9 @@ export { ActivityStrip } from './ActivityStrip.js';
 export type { ActivityBucket, ActivityStripProps } from './ActivityStrip.js';
 export { TimeSeries, Sparkline } from './TimeSeries.js';
 export type { Series, SeriesPoint, SparklineProps, TimeSeriesProps } from './TimeSeries.js';
+export { StackedColumns, niceScale } from './StackedColumns.js';
+export type { StackedColumnsBucket, StackedColumnsProps, StackedColumnsSeries } from './StackedColumns.js';
+export { ChartTooltip } from './ChartTooltip.js';
+export type { ChartTooltipProps, ChartTooltipRow } from './ChartTooltip.js';
+export { useChartHover } from './useChartHover.js';
+export type { ChartHover, ChartHoverSource } from './useChartHover.js';

package/dist/Charts/index.js

@@ -1,3 +1,3 @@
-export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor } from '../chunk-F4PJZ4ED.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-RJM4QCGG.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Charts/useChartHover.d.ts

@@ -0,0 +1,56 @@
+import type { FocusEvent, KeyboardEvent, PointerEvent } from 'react';
+/** What moved the reading: a pointer over the plot, or a key on the focused plot. */
+export type ChartHoverSource = 'pointer' | 'keyboard';
+export interface ChartHover {
+    /**
+     * The mark being read, as an index into the chart's own marks, or null when
+     * nothing is. Always inside `0..count-1`: a push that shortens the data
+     * clamps it to the last mark rather than pointing past the end.
+     */
+    active: number | null;
+    /** What put `active` there, or null when nothing is being read. */
+    source: ChartHoverSource | null;
+    /**
+     * Point at a mark, or at nothing, from a pointer. A chart calls it from its
+     * own pointer handler, because only the chart knows which mark lies under a
+     * position: a column chart per column, a time series by nearest instant.
+     */
+    point: (index: number | null) => void;
+    /**
+     * Spread on the ONE focusable element that holds the plot. It is what takes
+     * the keys, and what ends a reading when focus or the pointer leaves it.
+     */
+    plotProps: {
+        tabIndex: 0;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+    };
+}
+/**
+ * The reading layer every chart here shares: which mark a reader is on, moved
+ * by a pointer or by the keyboard, and dismissed by Escape.
+ *
+ * THE KEYBOARD IS NOT AN AFTERTHOUGHT OF THE POINTER. A tooltip a mouse alone
+ * can open is a figure a keyboard reader cannot read, so the plot is ONE tab
+ * stop and ←/→ walk its marks (Home and End jump to the ends). The first key on
+ * a plot nobody has read yet opens where that key points: ← and End at the last
+ * mark, which is "now" on every chart this kit draws, → and Home at the first.
+ * After that a key moves from where the reading stands, and it stops at an end
+ * rather than wrapping: a time axis does not come round again.
+ *
+ * ESCAPE CLOSES THE READING AND ONLY THAT. It stops at the plot when it closed
+ * something, so a chart inside a dialog does not take the dialog down with its
+ * tooltip; with nothing open it passes through untouched. The place is
+ * remembered, so the next arrow reopens where the reader left off rather than
+ * throwing them back to an end.
+ *
+ * A READING ENDS WHERE ITS READER LEFT. Focus leaving the plot ends any
+ * reading. The pointer leaving ends a POINTER reading only: a keyboard reader
+ * whose mouse happens to drift off the card has not stopped reading.
+ *
+ * It holds an index and nothing else. What an index MEANS (a column, an
+ * instant) and where its tooltip stands are the chart's, so this never
+ * measures anything and never draws anything.
+ */
+export declare function useChartHover(count: number): ChartHover;