@photon-ai/pho-ui 2.12.0 → 2.14.0

package/dist/index.js

@@ -1,101 +1,140 @@
 "use client";
-import { t as a } from "./chunks/cn-ChIgwEl3.js";
-import { t } from "./chunks/is-react-component-DSnjtBmo.js";
-import { t as r } from "./chunks/resolve-variant-CcD8iG5l.js";
-import { n as o, t as A } from "./chunks/link-provider-DXzDQ08N.js";
-import { BAR_RISE_PX as I, BLUR_PX as i, EASE_POP as T, EASE_STACK as m, FADE_ENTRANCE as e, FADE_SWAP as n, PRESS_SCALE as P, PRESS_SCALE_ROW as C, RISE_PX as N, SPRING_ENTRANCE as B, SPRING_PRESS as p, SPRING_PRESS_INLINE as O, SPRING_PRESS_QUICK as f, SPRING_SETTLE as u, TRAVEL_LINEAR as L, fadeThroughBlur as D, riseIn as l } from "./motion.js";
-import { n as c, r as G, t as U } from "./chunks/use-press-pulse-IbNstUT0.js";
+import { t as s } from "./chunks/cn-ChIgwEl3.js";
+import { t as r } from "./chunks/is-react-component-DSnjtBmo.js";
+import { t as E } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as _, t as i } from "./chunks/link-provider-DXzDQ08N.js";
+import { BAR_RISE_PX as e, BLUR_PX as A, EASE_POP as n, EASE_STACK as T, FADE_ENTRANCE as R, FADE_SWAP as I, PRESS_SCALE as p, PRESS_SCALE_ROW as C, RISE_PX as P, SPRING_ENTRANCE as f, SPRING_PRESS as B, SPRING_PRESS_INLINE as N, SPRING_PRESS_QUICK as u, SPRING_SETTLE as O, TRAVEL_LINEAR as L, fadeThroughBlur as l, riseIn as D } from "./motion.js";
+import { n as V, r as G, t as U } from "./chunks/use-press-pulse-IbNstUT0.js";
+import { n as h, t as F } from "./chunks/use-copy-D6JwKUll.js";
 import "./utils.js";
-import { a as F, c as W, d as b, i as g, l as h, n as k, o as X, r as v, s as Z, t as w, u as x } from "./chunks/button-CdqS_t5a.js";
-import { a as K, c as Y, i as z, l as Q, n as j, o as q, r as y, s as J, t as $ } from "./chunks/error-D0yoFxCv.js";
-import { a as as, c as Es, d as ts, f as _s, i as rs, l as Ss, m as os, n as As, o as Rs, p as Is, r as is, s as Ts, t as ms, u as es } from "./chunks/basic-page-CJwG4I83.js";
-import { o as Ps } from "./chunks/data-table-CHLJfGkS.js";
-import { a as Ns, c as Bs, i as ps, n as Os, o as fs, r as us, s as Ls, t as Ds } from "./chunks/sidebar-DVzZsCts.js";
-import { t as Vs } from "./chunks/input-DjvZoF8v.js";
-import { t as Gs } from "./chunks/close-button-GvqWbLl0.js";
-import { t as ds } from "./chunks/input-group-fc9_jD4d.js";
-import { n as Fs, t as Ws } from "./chunks/card-DSW3Uhag.js";
-import { n as gs, t as hs } from "./chunks/dialog-BxKACOj5.js";
-import { i as Xs, n as vs, r as Zs, t as ws } from "./chunks/status-view-C8tabjDu.js";
-import "./components/status-view.js";
+import { a as k, c as b, d as W, i as X, l as Y, n as Z, o as v, r as w, s as y, t as H, u as K } from "./chunks/button-CdqS_t5a.js";
+import { a as z, c as J, i as Q, l as j, n as q, o as $, r as aa, s as sa, t as ta } from "./chunks/error-D0yoFxCv.js";
+import { o as oa } from "./chunks/data-table-CHLJfGkS.js";
+import { n as Sa, t as _a } from "./chunks/copy-button-B_B15mEi.js";
+import { a as ma, c as ea, i as Aa, n as na, o as Ta, r as Ra, s as Ia, t as pa } from "./chunks/sidebar-DVzZsCts.js";
+import { t as Pa } from "./chunks/input-DjvZoF8v.js";
+import { i as Ba, n as Na, r as ua, t as Oa } from "./chunks/filter-bar-Cjjq38xo.js";
+import { n as la, t as Da } from "./chunks/code-block-CdozzaHM.js";
+import { n as Va, t as Ga } from "./chunks/stat-hnNqjWVG.js";
+import { t as da } from "./chunks/close-button-GvqWbLl0.js";
+import { t as Fa } from "./chunks/input-group-fc9_jD4d.js";
+import { n as Ma, t as ka } from "./chunks/card-DSW3Uhag.js";
+import { n as Wa, t as Xa } from "./chunks/dialog-BxKACOj5.js";
+import { i as Za, n as va, r as wa, t as ya } from "./chunks/status-view-C8tabjDu.js";
+import { a as Ka, c as xa, d as za, f as Ja, i as Qa, l as ja, m as qa, n as $a, o as as, p as ss, r as ts, s as rs, t as os, u as Es } from "./chunks/basic-page-CdmVeL_Z.js";
+import { i as _s, n as is, r as ms, t as es } from "./chunks/legend-C0mU7dqd.js";
+import "./components/chart.js";
+import { t as Ts } from "./chunks/bar-chart-BJfr3eyd.js";
+import { t as Is } from "./chunks/line-chart-CUR3AxrR.js";
+import { i as Cs, n as Ps, r as fs, t as Bs } from "./chunks/log-list-0AXnjFrk.js";
+import { t as us } from "./chunks/description-list-C-mwe4ki.js";
+import { a as Ls, i as ls, n as Ds, r as cs, t as Vs } from "./chunks/trace-CbH0IohX.js";
 export {
-  ms as AUTO_SAVE_DELAY_MS,
-  I as BAR_RISE_PX,
-  As as BASIC_PAGE_CALLOUT,
-  is as BASIC_PAGE_CARD,
-  rs as BASIC_PAGE_ITEM,
-  as as BASIC_PAGE_ITEM_PANEL,
-  Rs as BASIC_PAGE_ITEM_PANEL_DIVIDED,
-  Ts as BASIC_PAGE_ROW,
-  i as BLUR_PX,
-  w as BUTTON_COLORS,
-  k as BUTTON_SHAPES,
-  v as BUTTON_SIZES,
-  g as BUTTON_VARIANTS,
-  Es as BasicPage,
-  F as Button,
-  X as ButtonLink,
-  Ws as CARD_SURFACE,
-  Ss as CONDENSE_BAR_ENTER,
-  es as CONDENSE_BAR_RISE_PX,
-  ts as CONDENSE_BAR_TRAVEL,
+  os as AUTO_SAVE_DELAY_MS,
+  e as BAR_RISE_PX,
+  $a as BASIC_PAGE_CALLOUT,
+  ts as BASIC_PAGE_CARD,
+  Qa as BASIC_PAGE_ITEM,
+  Ka as BASIC_PAGE_ITEM_PANEL,
+  as as BASIC_PAGE_ITEM_PANEL_DIVIDED,
+  rs as BASIC_PAGE_ROW,
+  A as BLUR_PX,
+  H as BUTTON_COLORS,
+  Z as BUTTON_SHAPES,
+  w as BUTTON_SIZES,
+  X as BUTTON_VARIANTS,
+  Ts as BarChart,
+  xa as BasicPage,
+  k as Button,
+  v as ButtonLink,
+  ka as CARD_SURFACE,
+  ms as CHART_SLOTS,
+  ja as CONDENSE_BAR_ENTER,
+  Es as CONDENSE_BAR_RISE_PX,
+  za as CONDENSE_BAR_TRAVEL,
   U as CONTROL_PRESS_SCALE,
-  c as CONTROL_PRESS_SPRING,
-  Fs as Card,
-  Gs as CloseButton,
-  hs as Dialog,
-  T as EASE_POP,
-  m as EASE_STACK,
-  Z as EFFECT_BUTTON_SIZES,
-  W as EffectButton,
-  h as EffectButtonLink,
-  $ as Error,
-  j as ErrorView,
-  e as FADE_ENTRANCE,
-  n as FADE_SWAP,
-  y as GENERIC_ERROR_TITLE,
-  Vs as Input,
-  ds as InputGroup,
-  A as LinkProvider,
-  P as PRESS_SCALE,
+  V as CONTROL_PRESS_SPRING,
+  _a as COPY_BUTTON_SIZES,
+  F as COPY_FEEDBACK_MS,
+  Ma as Card,
+  es as ChartLegend,
+  is as ChartSwatch,
+  da as CloseButton,
+  Da as CodeBlock,
+  Sa as CopyButton,
+  us as DescriptionList,
+  Xa as Dialog,
+  n as EASE_POP,
+  T as EASE_STACK,
+  y as EFFECT_BUTTON_SIZES,
+  b as EffectButton,
+  Y as EffectButtonLink,
+  ta as Error,
+  q as ErrorView,
+  R as FADE_ENTRANCE,
+  I as FADE_SWAP,
+  Oa as FILTER_DATE_PRESETS,
+  Na as FilterBar,
+  aa as GENERIC_ERROR_TITLE,
+  Pa as Input,
+  Fa as InputGroup,
+  Is as LineChart,
+  i as LinkProvider,
+  Bs as LogList,
+  p as PRESS_SCALE,
   C as PRESS_SCALE_ROW,
-  N as RISE_PX,
-  Ds as SIDEBAR_HEADER_INSET,
-  Os as SIDEBAR_ITEM,
-  us as SIDEBAR_ITEM_ACTIVE,
-  ps as SIDEBAR_ITEM_INACTIVE,
-  Ns as SIDEBAR_ROOT,
-  fs as SIDEBAR_ROOT_BASE,
-  Ls as SIDEBAR_ROOT_INSET,
-  B as SPRING_ENTRANCE,
-  p as SPRING_PRESS,
-  O as SPRING_PRESS_INLINE,
-  f as SPRING_PRESS_QUICK,
-  u as SPRING_SETTLE,
-  ws as STATUS_VIEW,
-  vs as STATUS_VIEW_COPY,
-  Zs as STATUS_VIEW_SIZES,
-  Bs as Sidebar,
-  Xs as StatusView,
+  P as RISE_PX,
+  pa as SIDEBAR_HEADER_INSET,
+  na as SIDEBAR_ITEM,
+  Ra as SIDEBAR_ITEM_ACTIVE,
+  Aa as SIDEBAR_ITEM_INACTIVE,
+  ma as SIDEBAR_ROOT,
+  Ta as SIDEBAR_ROOT_BASE,
+  Ia as SIDEBAR_ROOT_INSET,
+  f as SPRING_ENTRANCE,
+  B as SPRING_PRESS,
+  N as SPRING_PRESS_INLINE,
+  u as SPRING_PRESS_QUICK,
+  O as SPRING_SETTLE,
+  ya as STATUS_VIEW,
+  va as STATUS_VIEW_COPY,
+  wa as STATUS_VIEW_SIZES,
+  ea as Sidebar,
+  Ga as Stat,
+  Va as StatGroup,
+  Za as StatusView,
   L as TRAVEL_LINEAR,
-  x as buttonVariants,
-  z as capitalizeFirst,
-  a as cn,
-  Ps as createColumns,
-  K as describeError,
-  b as effectButtonVariants,
-  D as fadeThroughBlur,
-  _s as formToasts,
-  q as httpReasonPhrase,
-  J as httpStatusExplanation,
-  Y as isProblem,
-  t as isReactComponent,
-  Q as parseProblem,
-  r as resolveVariant,
-  l as riseIn,
-  Is as useAutoSave,
-  os as useCondense,
-  gs as useDialogPending,
-  o as useLinkComponent,
+  Vs as Trace,
+  K as buttonVariants,
+  Q as capitalizeFirst,
+  _s as chartColor,
+  s as cn,
+  oa as createColumns,
+  z as describeError,
+  W as effectButtonVariants,
+  l as fadeThroughBlur,
+  Ja as formToasts,
+  Ds as formatDuration,
+  ua as formatFilterValue,
+  cs as formatTick,
+  $ as httpReasonPhrase,
+  sa as httpStatusExplanation,
+  Ba as isFilterSet,
+  J as isProblem,
+  r as isReactComponent,
+  ls as layoutTrace,
+  Ps as logStatusColor,
+  fs as logStatusLabel,
+  Ls as niceStep,
+  j as parseProblem,
+  E as resolveVariant,
+  D as riseIn,
+  la as tokenizeJson,
+  Cs as truncateMiddle,
+  ss as useAutoSave,
+  qa as useCondense,
+  h as useCopy,
+  Wa as useDialogPending,
+  _ as useLinkComponent,
   G as usePressPulse
 };

package/dist/primitives.js

@@ -51,6 +51,8 @@ export * from "@base-ui/react/menu";
 export * from "@base-ui/react/checkbox";
 export * from "@base-ui/react/checkbox-group";
 export * from "@base-ui/react/toast";
+export * from "@base-ui/react/tooltip";
+export * from "@base-ui/react/toggle";
 export * from "@base-ui/react/accordion";
 export * from "@base-ui/react/alert-dialog";
 export * from "@base-ui/react/autocomplete";
@@ -76,7 +78,5 @@ export * from "@base-ui/react/select";
 export * from "@base-ui/react/slider";
 export * from "@base-ui/react/switch";
 export * from "@base-ui/react/tabs";
-export * from "@base-ui/react/toggle";
 export * from "@base-ui/react/toggle-group";
 export * from "@base-ui/react/toolbar";
-export * from "@base-ui/react/tooltip";

package/dist/sections/basic-page.js

@@ -1,20 +1,20 @@
 "use client";
-import { a as s, c as A, d as E, f as a, i as C, l as S, m as o, n as I, o as e, p as B, r as P, s as N, t as r, u as t } from "../chunks/basic-page-CJwG4I83.js";
-import { o as R } from "../chunks/data-table-CHLJfGkS.js";
+import { o as s } from "../chunks/data-table-CHLJfGkS.js";
+import { a as E, c as a, d as C, f as S, i as o, l as I, m as e, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-CdmVeL_Z.js";
 export {
-  r as AUTO_SAVE_DELAY_MS,
-  I as BASIC_PAGE_CALLOUT,
-  P as BASIC_PAGE_CARD,
-  C as BASIC_PAGE_ITEM,
-  s as BASIC_PAGE_ITEM_PANEL,
-  e as BASIC_PAGE_ITEM_PANEL_DIVIDED,
-  N as BASIC_PAGE_ROW,
-  A as BasicPage,
-  S as CONDENSE_BAR_ENTER,
-  t as CONDENSE_BAR_RISE_PX,
-  E as CONDENSE_BAR_TRAVEL,
-  R as createColumns,
-  a as formToasts,
-  B as useAutoSave,
-  o as useCondense
+  D as AUTO_SAVE_DELAY_MS,
+  B as BASIC_PAGE_CALLOUT,
+  r as BASIC_PAGE_CARD,
+  o as BASIC_PAGE_ITEM,
+  E as BASIC_PAGE_ITEM_PANEL,
+  P as BASIC_PAGE_ITEM_PANEL_DIVIDED,
+  t as BASIC_PAGE_ROW,
+  a as BasicPage,
+  I as CONDENSE_BAR_ENTER,
+  R as CONDENSE_BAR_RISE_PX,
+  C as CONDENSE_BAR_TRAVEL,
+  s as createColumns,
+  S as formToasts,
+  N as useAutoSave,
+  e as useCondense
 };

package/dist/src/components/accordion/index.d.ts

@@ -1 +1 @@
-export { Accordion } from './accordion';
+export { Accordion, type AccordionRootProps, type AccordionSize, } from './accordion';

package/dist/src/components/bar-chart/bar-chart.d.ts

@@ -0,0 +1,9 @@
+import { ChartBaseProps, ChartDatum } from '../chart/types';
+export interface BarChartProps<T extends ChartDatum> extends ChartBaseProps<T> {
+    /** Stack the series in one column per bucket, first series at the bottom. */
+    stacked?: boolean;
+}
+export declare function BarChart<T extends ChartDatum>({ data, series, label, description, height, width: fixedWidth, valueFormat, timeFormat, locale, legend, baseline, stacked, breakdownTitle, loading, empty, className, ...props }: BarChartProps<T>): import("react").JSX.Element;
+export declare namespace BarChart {
+    var displayName: string;
+}

package/dist/src/components/bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart, type BarChartProps } from './bar-chart';
+export type { ChartBreakdownItem, ChartColor, ChartDatum, ChartSeries, ChartValueKey, } from '../chart/types';

package/dist/src/components/chart/axes.d.ts

@@ -0,0 +1,22 @@
+import { ChartLayout } from './shell';
+export interface YAxisProps {
+    layout: ChartLayout;
+    ticks: ReadonlyArray<number>;
+    labels: ReadonlyArray<string>;
+    scale: (value: number) => number;
+}
+/**
+ * Gridlines across the plot with their labels on the left: hairlines one
+ * step off the surface, the zero line a touch stronger so bars read as
+ * standing on something.
+ */
+export declare function YAxis({ layout, ticks, labels, scale }: YAxisProps): import("react").JSX.Element;
+export interface XAxisProps {
+    layout: ChartLayout;
+    ticks: ReadonlyArray<{
+        x: number;
+        label: string;
+    }>;
+}
+/** Time labels along the bottom band; the end labels tuck inside the plot. */
+export declare function XAxis({ layout, ticks }: XAxisProps): import("react").JSX.Element;

package/dist/src/components/chart/color.d.ts

@@ -0,0 +1,10 @@
+import { ChartColor } from './types';
+/** The categorical slots, in the order series take them. */
+export declare const CHART_SLOTS: readonly ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "chart-6"];
+/**
+ * The CSS value for a series colour: the named colour, or the categorical
+ * slot at `index` when the series names none. Slots are an ordered,
+ * validated set — a seventh series wraps, so fold a long tail into
+ * "Other" before it gets there.
+ */
+export declare function chartColor(color: ChartColor | undefined, index: number): string;

package/dist/src/components/chart/format.d.ts

@@ -0,0 +1,25 @@
+import { ChartDatum, ChartSeries } from './types';
+/**
+ * The default number format: grouped digits for a value someone reads
+ * ("12,001"), compact for an axis tick ("12K") where room is short.
+ */
+export declare function numberFormatter(locale: string | undefined, compact?: boolean): (value: number) => string;
+/** A number under a series key, or nothing: missing, null, or not a number. */
+export declare function readValue(datum: object, key: string): number | null;
+/** "Inbound and outbound", "p50, p90 and p99". */
+export declare function joinNames(names: ReadonlyArray<string>): string;
+interface DescribeOptions<T extends ChartDatum> {
+    data: ReadonlyArray<T>;
+    series: ReadonlyArray<ChartSeries<T>>;
+    /** Bars sum to a total; lines run between a low and a high. */
+    kind: "bar" | "line";
+    valueFormat: (value: number) => string;
+    timeFormat: (date: Date) => string;
+}
+/**
+ * What the figure says about itself to assistive tech: which series, over
+ * what range, and for each one the total (bars) or the low and high
+ * (lines), plus where it peaked.
+ */
+export declare function describeChart<T extends ChartDatum>({ data, series, kind, valueFormat, timeFormat, }: DescribeOptions<T>): string;
+export {};

package/dist/src/components/chart/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Chart foundation — what `BarChart` and `LineChart` share and a page may
+ * want on its own: the data contract, the series colour resolver, and the
+ * legend. Axes, scales, the shell and the tooltip stay internal.
+ */
+export type { ChartBaseProps, ChartBreakdownItem, ChartColor, ChartDatum, ChartSeries, ChartValueKey, } from './types';
+export { chartColor, CHART_SLOTS } from './color';
+export { ChartLegend, ChartSwatch, type ChartLegendItem, type ChartLegendProps, type ChartSwatchKind, type ChartSwatchProps, } from './legend';

package/dist/src/components/chart/legend.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps } from 'react';
+/** A legend or tooltip key mirrors its mark: a square for a bar, a stroke for a line. */
+export type ChartSwatchKind = "rect" | "line";
+export interface ChartSwatchProps {
+    /** A CSS colour value — what `chartColor` returns. */
+    color: string;
+    kind?: ChartSwatchKind;
+    dashed?: boolean;
+}
+export declare function ChartSwatch({ color, kind, dashed, }: ChartSwatchProps): import("react").JSX.Element;
+export interface ChartLegendItem {
+    label: string;
+    /** A CSS colour value — what `chartColor` returns. */
+    color: string;
+    kind?: ChartSwatchKind;
+    dashed?: boolean;
+}
+export interface ChartLegendProps extends Omit<ComponentProps<"ul">, "children"> {
+    items: ReadonlyArray<ChartLegendItem>;
+}
+/**
+ * The legend a chart of two or more series carries below the plot: a key
+ * per series, in series order, wrapping when the row runs out. Text stays
+ * in the UI ink; the swatch alone carries the colour.
+ */
+export declare function ChartLegend({ items, className, ...props }: ChartLegendProps): import("react").JSX.Element;

package/dist/src/components/chart/scale.d.ts

@@ -0,0 +1,34 @@
+/** Epoch milliseconds for a datum's `x`. */
+export declare function toTime(x: Date | number): number;
+/** A linear map from `domain` to `range`; a flat domain maps to its start. */
+export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): (value: number) => number;
+/**
+ * A y domain on round numbers with three to five ticks, the last tick on
+ * or above the data's high end so the top of the plot is labelled.
+ */
+export declare function niceLinearDomain(min: number, max: number): {
+    domain: [number, number];
+    ticks: number[];
+};
+/** The gap between buckets, in ms — the median step, so one hole doesn't skew it. */
+export declare function bucketSpan(times: ReadonlyArray<number>): number;
+/**
+ * Time ticks for a plot `width` px wide: one every ~96px, on the round
+ * boundaries d3-time picks (5 minutes, an hour, a day, a month…).
+ */
+export declare function timeAxisTicks(start: number, stop: number, width: number): Date[];
+/**
+ * Labels a tick by the boundary it sits on: a time within a day, a date at
+ * midnight, month and year at a new year. `Intl` does the wording, so the
+ * labels follow the locale.
+ */
+export declare function timeTickFormatter(locale?: string): (date: Date) => string;
+/**
+ * The tooltip's heading for a bucket: the date alone when buckets are a
+ * day or longer, date and time below that.
+ */
+export declare function bucketTimeFormatter(locale: string | undefined, span: number): (date: Date) => string;
+/** Keep every nth tick so the labels fit the width without touching. */
+export declare function thinTicks<T>(values: ReadonlyArray<T>, labelOf: (value: T) => string, width: number): T[];
+/** The index of the position nearest `px` in an ascending list. */
+export declare function nearestIndex(positions: ReadonlyArray<number>, px: number): number;

package/dist/src/components/chart/shell.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, PointerEvent, ReactNode, RefObject } from 'react';
+/** The inner box the marks draw in, once the axes have taken their bands. */
+export interface ChartLayout {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    innerWidth: number;
+    innerHeight: number;
+}
+/** The plot's box for a measured width and the y-axis labels it must fit. */
+export declare function chartLayout(width: number, height: number, yLabels: ReadonlyArray<string>): ChartLayout;
+export interface ChartShellProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The figure's `aria-label`. */
+    label: string;
+    /** The figure's spoken summary. */
+    description: string;
+    height: number;
+    /** The measured width; 0 before the browser has measured. */
+    width: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    legend?: ReactNode;
+    tooltip?: ReactNode;
+    loading?: boolean;
+    empty?: ReactNode;
+    /** The frame says `empty` instead of drawing. */
+    showEmpty?: boolean;
+    /** The pointer over the plot — the chart snaps to the nearest bucket. */
+    onPlotPointerMove?: (event: PointerEvent<SVGSVGElement>) => void;
+    onPlotPointerLeave?: () => void;
+    children?: ReactNode;
+}
+/**
+ * The frame every chart draws in: a fixed-height plot box holding the
+ * SVG (`role="img"`, labelled and described for assistive tech), the
+ * tooltip layer over it, the legend on its own line below. Width comes
+ * from the parent; `height` covers the plot and the x-axis band, so a
+ * card never grows a nested scroll.
+ */
+export declare function ChartShell({ label, description, height, width, containerRef, legend, tooltip, loading, empty, showEmpty, onPlotPointerMove, onPlotPointerLeave, className, children, ...props }: ChartShellProps): import("react").JSX.Element;

package/dist/src/components/chart/tooltip.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ChartSwatchKind } from './legend';
+import { ChartBreakdownItem } from './types';
+export interface ChartTooltipRow {
+    label: string;
+    value: string;
+    color: string;
+    kind?: ChartSwatchKind;
+    dashed?: boolean;
+}
+export interface ChartTooltipProps {
+    /** The snapped x of the hovered bucket, in container px. */
+    x: number;
+    /** The container's width — the tooltip flips to the left past the middle. */
+    width: number;
+    /** Where the tooltip's top sits — the plot's top. */
+    top: number;
+    heading: string;
+    rows: ReadonlyArray<ChartTooltipRow>;
+    breakdown?: ReadonlyArray<ChartBreakdownItem>;
+    breakdownTitle?: ReactNode;
+    valueFormat: (value: number) => string;
+}
+/**
+ * The readout for one bucket: its time, then every series' value (values
+ * lead, in primary ink; labels follow), then the bucket's breakdown when
+ * it carries one. Presentational — the figure's description already
+ * speaks the data — and it never takes the pointer.
+ */
+export declare function ChartTooltip({ x, width, top, heading, rows, breakdown, breakdownTitle, valueFormat, }: ChartTooltipProps): import("react").JSX.Element;

package/dist/src/components/chart/types.d.ts

@@ -0,0 +1,76 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A series colour: the six ordered categorical slots, the two status
+ * inks (a series that MEANS successful / failed), or the monochrome ink
+ * for a one-series chart on the site's black and white.
+ */
+export type ChartColor = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "success" | "error" | "ink";
+/** One line of the per-bucket detail a tooltip lists under the series. */
+export interface ChartBreakdownItem {
+    label: string;
+    value: number;
+}
+/**
+ * One bucket on the time axis. Series values sit beside `x` under the
+ * keys the `series` name — `{ x, inbound: 12, outbound: 4 }`.
+ */
+export interface ChartDatum {
+    /** When the bucket starts: a `Date` or epoch milliseconds. */
+    x: Date | number;
+    /**
+     * Detail for this bucket — errors by route, say — listed in the tooltip
+     * under the series rows.
+     */
+    breakdown?: ReadonlyArray<ChartBreakdownItem>;
+}
+/** The keys of `T` that hold a number (or nothing yet). */
+export type ChartValueKey<T> = {
+    [K in keyof T]-?: K extends "x" | "breakdown" ? never : T[K] extends number | null | undefined ? K : never;
+}[keyof T] & string;
+export interface ChartSeries<T extends ChartDatum = ChartDatum> {
+    /** The field of each datum this series plots. */
+    key: ChartValueKey<T>;
+    /** The name in the legend and the tooltip. */
+    label: string;
+    /** Defaults to the next categorical slot, in series order. */
+    color?: ChartColor;
+    /** Line charts: a dashed stroke — a min / max beside an average. */
+    dashed?: boolean;
+}
+/** What every chart takes, on top of the div it renders. */
+export interface ChartBaseProps<T extends ChartDatum> extends Omit<ComponentProps<"div">, "children"> {
+    /** The buckets, oldest first, evenly spaced in time. */
+    data: ReadonlyArray<T>;
+    /**
+     * One entry per series, in drawing (and legend) order. `T` comes from
+     * `data`; the keys here are checked against it.
+     */
+    series: ReadonlyArray<ChartSeries<NoInfer<T>>>;
+    /** Names the chart for assistive tech — the figure's `aria-label`. */
+    label: string;
+    /**
+     * What the figure says about itself to assistive tech. Generated from
+     * the series (range, totals or extremes, peaks) unless given.
+     */
+    description?: string;
+    /** Plot plus x-axis band, in px; the legend adds its own line below. @default 200 */
+    height?: number;
+    /** A fixed width instead of measuring the parent — SSR renders, tests. */
+    width?: number;
+    /** Formats a value on the y-axis and in the tooltip. */
+    valueFormat?: (value: number) => string;
+    /** Formats a bucket's time in the tooltip heading and the description. */
+    timeFormat?: (date: Date) => string;
+    /** Locale for the default number and time formats. Runtime locale by default. */
+    locale?: string;
+    /** Show the legend. On for two or more series; a lone series is named by its title. */
+    legend?: boolean;
+    /** Where the y-axis starts: at zero, or at the data's low end. @default "zero" */
+    baseline?: "zero" | "auto";
+    /** A heading over a datum's `breakdown` list in the tooltip. */
+    breakdownTitle?: ReactNode;
+    /** Data is on its way: the chart holds its last render at half opacity. */
+    loading?: boolean;
+    /** What the frame says with no buckets to draw. */
+    empty?: ReactNode;
+}

package/dist/src/components/chart/use-measure.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * The width of the element the ref lands on, kept current through a
+ * ResizeObserver. Nothing runs on the server: the first render is 0 wide
+ * and the plot fills in once the browser has measured. A `fixed` width
+ * skips measuring altogether.
+ */
+export declare function useMeasuredWidth<T extends HTMLElement>(fixed?: number): [RefObject<T | null>, number];