@lilt-ui/charts 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.10.0
+
+Every chart family now moves with one motion language, and cards are softer by default.
+
+- Added `TreemapChartCard` for flat or grouped part-to-whole layouts, `CalendarHeatmapCard` for UTC daily activity, `TimelineChartCard` for intervals with overlapping lanes, and `StripChartCard` for strip/beeswarm distributions.
+- All four include flat/depth paint, shared shimmer/draw/breathe skeletons and the existing opacity exit, reduced motion, retained rows during refresh, header composition, keyboard inspection, pin/release, and consumer-owned selection readouts.
+- Treemap has its own showcase page. The other additions live as forms of Heatmap, Range, and Scatter, with matching Preview/Code, data, props, shared settings, and loading controls.
+- Period switches morph on lines and areas. When time or number data changes to rows that share x values with the old ones, such as 7 → 21 days, the chart draws both sets while the x and y domains glide: shared points move to their new places, new days arrive from the edge and dropped days leave through it, in one layer. Unrelated rows still cross-fade; reduced motion still switches instantly.
+- Every chart family moves the same way. Horizontal bar rows blur while they travel to a new rank and drain away on leaving; radial slices land on the spring, departing slices collapse and new ones blur in; activity ring columns regrow dot by dot round the day; progress and stat rings land on the spring; funnel stages, radar vertices and sankey flows reshape from where they are instead of redrawing; scatter points, observation marks (treemap, calendar, timeline, strip) travel on the spring and departing ones shrink away; heatmap and calendar cells re-colour in a diagonal ripple. A light motion blur passes over each family as its period changes (line, area, combo, range, box and finance charts included; live charts excepted), and nothing animates on a plain resize. Data arriving after the last row grows out of it, so a line draws itself forward.
+- Bars snap when the set of bars changes, such as a shorter period. New bars rise out of the floor with a soft blur, rippling in; leaving bars drain back into it and narrow toward the gap, which the rest start closing partway through; bars that stay spring to their new place, width and height. A light motion blur passes over the plot as it happens. Bars are tracked by category on category axes, so a reordered chart moves each bar to its new slot. The first entrance uses the same arrival, so loading a page and changing period feel like one motion. Value-only updates are unchanged, and reduced motion switches instantly.
+- Showing or hiding a line or area series glides the y scale in a single layer while the series fades, instead of cross-fading two charts. Bars and stacks keep their existing transitions.
+- Cards draw Lilt's own period select instead of the native one: a pill that opens a frosted list of periods, with a blur swap of the chosen label, a highlight that travels between options, and the listbox keys (arrows, Home/End, Enter, Escape, type-ahead) returning focus to the pill. `ChartComponentsProvider rangeSelect={…}` swaps in your own select for every card below it, typed by `ChartRangeSelectProps`.
+- Softer cards by default. Elevated cards use a 24px radius and are lifted by tone and a hairline shadow instead of a border. The period select, card actions, delta chip, and axis hover badges are pills. Legend tiles lose their outline. The soft and accent tooltips are frosted glass (opaque under reduced transparency) with an 18px radius. Area fills fade fully to transparent. Colors, palettes, plot backgrounds (dots stay the default), and geometry are unchanged; `--lilt-card-radius` still overrides the radius.
+
 ## 0.9.2
 
 Cards can fit inside an existing dashboard widget without duplicating its heading and legend.

package/README.md

@@ -76,16 +76,22 @@ That's the whole card: the headline, the change chip, value tiles, and hover all
   <img alt="Stat cards with sparklines, bars, and a goal meter above a needle bar chart and a retention heatmap" src="https://cdn.jsdelivr.net/npm/@lilt-ui/charts/media/cards-dark.webp" />
 </picture>
 
-| For                  | Cards                                                                |
-| -------------------- | -------------------------------------------------------------------- |
-| **Trends**           | Area, Line, Bar, and Combo cards, overlapping, stacked, or as shares |
-| **At a glance**      | Stat cards with a sparkline, bars, a meter, or a ring                |
-| **Parts and goals**  | Radial, Progress, and Activity ring                                  |
-| **Rankings**         | Horizontal bar, with shares and an "Other" row                       |
-| **Flows and change** | Funnel, Sankey, and Slope                                            |
-| **Patterns**         | Heatmap, Scatter, and Radar                                          |
-| **Spread**           | Range (floating or error bars) and Box plot, from raw samples        |
-| **Markets**          | Candlestick, Indicators, Price, Depth, Order book, and Portfolio     |
+| For                  | Cards                                                                   |
+| -------------------- | ----------------------------------------------------------------------- |
+| **Trends**           | Area, Line, Bar, and Combo cards, overlapping, stacked, or as shares    |
+| **At a glance**      | Stat cards with a sparkline, bars, a meter, or a ring                   |
+| **Parts and goals**  | Radial, Treemap, Progress, and Activity ring                            |
+| **Rankings**         | Horizontal bar, with shares and an "Other" row                          |
+| **Flows and change** | Funnel, Sankey, and Slope                                               |
+| **Patterns**         | Heatmap (matrix and calendar), Scatter (points, strip, beeswarm), Radar |
+| **Spread**           | Range (floating bars, error bars, timeline intervals) and Box plot      |
+| **Markets**          | Candlestick, Indicators, Price, Depth, Order book, and Portfolio        |
+
+### More ways to read observations
+
+`TreemapChartCard` reads `label`, `value`, and an optional `group` for one parent level. `CalendarHeatmapCard` reads `date` and `value`, with optional inclusive UTC `from`/`to` bounds. `TimelineChartCard` reads `label`, `start`, and `end`, and packs overlaps within optional `lane` categories. `StripChartCard` reads `category` and `value`; `display="beeswarm"` separates collisions without moving numeric positions.
+
+All four support `depth`, `loadingStyle="shimmer" | "draw" | "breathe"`, the shared skeleton fade, and reduced motion. Background refreshes keep accepted readings. They also accept `header={false}`, `onSelectionChange`, and `renderReadout` for your own presentation. Treemap areas must be nonnegative, calendar dates are UTC, and timeline durations are measured in milliseconds (displayed as hours by default).
 
 ## Finance charts
 
@@ -199,6 +205,26 @@ Cards that need attention rise, what you've seen calms down, and what clears set
 
 Omit `title` to render no visible title. `header={false}` removes the entire header, including the headline, delta and period controls. Cards with legend layouts accept `legend={false}` independently. `surface="ghost"` only removes the visual frame. Give embedded charts an `aria-label`; pass `data` directly when your app owns the period selector.
 
+Cards with `ranges` draw Lilt's period select: a pill that opens a frosted list, with arrows, Home/End, Enter, Escape and type-ahead. To use your design system's select in every card instead, wrap them once:
+
+```tsx
+import { ChartComponentsProvider, type ChartRangeSelectProps } from '@lilt-ui/charts';
+
+function PeriodSelect({ value, options, onValueChange, ...rest }: ChartRangeSelectProps) {
+  return (
+    <Select value={value} onValueChange={onValueChange} aria-label={rest['aria-label']}>
+      {options.map((option) => (
+        <SelectItem key={option.id} value={option.id}>
+          {option.label}
+        </SelectItem>
+      ))}
+    </Select>
+  );
+}
+
+<ChartComponentsProvider rangeSelect={PeriodSelect}>{children}</ChartComponentsProvider>;
+```
+
 `RadialChartCard` keeps its centre and pointer interaction with the legend hidden. Tab to the graphic and use arrows to inspect, Enter/Space to pin, and Escape to clear. With a controlled `selected`, Escape requests `onSelectedChange(null)` in every legend layout.
 
 Cards follow shadcn theme variables when your app defines them: `--card`, `--card-foreground`, `--muted-foreground`, `--border`, `--ring`, and `--chart-1` to `--chart-5`. Anything you leave out falls back to Lilt's own palette.

package/dist/cards/calendar-heatmap-card.d.ts

@@ -0,0 +1,18 @@
+import { NumericKey, TimeKey } from './keys';
+import { ObservationsCardProps, ObservationScene } from './observations-card';
+/** Calendar dates are UTC days. Date-only strings are validated rather than rolled over. */
+export declare function utcDate(value: unknown): number | null;
+export interface CalendarHeatmapCardProps<Row, Key extends NumericKey<Row>> extends Omit<ObservationsCardProps<Row>, 'legend' | 'legendSwatch'> {
+    date: TimeKey<Row>;
+    value: Key;
+    /** Inclusive UTC date bounds. Default to the observed range. */
+    from?: string | number | Date;
+    to?: string | number | Date;
+    /** Monday by default; Sunday is 0. */
+    weekStartsOn?: 0 | 1;
+    /** UTC day used to distinguish unobserved future dates. Defaults to today. */
+    today?: string | number | Date;
+    domain?: readonly [number, number];
+}
+export declare function calendarLayout<Row>(data: readonly Row[], date: string, value: string, width: number, height: number, options?: Pick<CalendarHeatmapCardProps<Row, NumericKey<Row>>, 'from' | 'to' | 'today' | 'weekStartsOn' | 'domain' | 'color' | 'locale'>): ObservationScene<Row>;
+export declare function CalendarHeatmapCard<Row, const Key extends NumericKey<Row>>({ date, value, from, to, weekStartsOn, today, domain, color, locale, ...props }: CalendarHeatmapCardProps<Row, Key>): import("react/jsx-runtime").JSX.Element;

package/dist/cards/chart-card.d.ts

@@ -85,5 +85,8 @@ export interface ChartCardRangeProps<Option extends ChartCardRangeOption> {
     value?: NoInfer<Option['id']>;
     onValueChange?: (id: NoInfer<Option['id']>) => void;
 }
-/** Period pill. Renders a native select when options are supplied. */
+/**
+ * Period pill. With options it becomes Lilt's period select, or the select supplied through
+ * `ChartComponentsProvider`.
+ */
 export declare function ChartCardRange<const Option extends ChartCardRangeOption>({ label, options, value, onValueChange, }: ChartCardRangeProps<Option>): import("react/jsx-runtime").JSX.Element;

package/dist/cards/keys.d.ts

@@ -8,6 +8,8 @@ export type NumericKey<Row> = KeysOfType<Row, number | null | undefined>;
 export type TextKey<Row> = KeysOfType<Row, string>;
 /** Row keys usable as an x position: labels, numbers, or dates. */
 export type XKey<Row> = KeysOfType<Row, string | number | Date>;
+/** Nullable time fields for observations whose endpoints may still be missing. */
+export type TimeKey<Row> = KeysOfType<Row, string | number | Date | null | undefined>;
 export type XKind = 'category' | 'number' | 'time';
 export interface ResolvedX<Row> {
     kind: XKind;

package/dist/cards/observations-card.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+import { CardLegend, ChartLegendSwatch, ChartLoadingStyle, CategorySelection } from '../types';
+import { ChartCardProps } from './chart-card';
+import { CardRange } from './cartesian-card';
+/** Shared presentation options for observation-based cards. */
+export interface ObservationsCardProps<Row> extends Omit<ChartCardProps, 'children'> {
+    title?: string;
+    header?: boolean;
+    data?: readonly Row[];
+    height?: number;
+    depth?: boolean;
+    color?: string;
+    headline?: number;
+    aggregate?: 'sum' | 'mean' | 'max';
+    delta?: number;
+    deltaTone?: 'default' | 'inverse' | 'neutral';
+    range?: string;
+    ranges?: readonly CardRange<Row>[];
+    defaultRange?: string;
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    legend?: CardLegend | false;
+    legendSwatch?: ChartLegendSwatch;
+    loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
+    onSelectionChange?: (selection: CategorySelection<Row | null> | null) => void;
+    /** Optional consumer-owned readout, also available when the header is hidden. */
+    renderReadout?: (selection: CategorySelection<Row | null> | null) => ReactNode;
+}
+export interface ObservationMark<Row> {
+    id: string;
+    label: string;
+    datum: Row | null;
+    value: number | null;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    group?: string;
+    text?: string;
+    detail?: string;
+    shape?: 'dot' | 'bar' | 'tile';
+    missing?: boolean;
+    future?: boolean;
+}
+export interface ObservationScene<Row> {
+    marks: ObservationMark<Row>[];
+    labels?: {
+        x: number;
+        y: number;
+        text: string;
+        anchor?: 'start' | 'middle' | 'end';
+    }[];
+    /** All readings, including observations with no visible area or position. */
+    readings?: {
+        id: string;
+        label: string;
+        value: number | null;
+        detail?: string;
+    }[];
+    groups?: {
+        id: string;
+        label: string;
+        color: string;
+        value: number | null;
+    }[];
+    note?: string;
+    error?: string;
+    height?: number;
+    width?: number;
+}
+export declare const seriesColor: (index: number) => string;
+export declare const readField: (row: unknown, key: string) => unknown;
+export declare const readNumber: (row: unknown, key: string) => number | null;
+/** Private shell: every family uses the same inspection, card and skeleton lifecycle. */
+export declare function ObservationsCard<Row>({ title, header, data: suppliedData, height, depth, headline, aggregate, delta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue, legend, legendSwatch, loading, loadingStyle, onSelectionChange, renderReadout, motion, className, color, layout, placeholder, family, ...frame }: ObservationsCardProps<Row> & {
+    family: string;
+    layout: (data: readonly Row[], width: number, height: number) => ObservationScene<Row>;
+    placeholder: (width: number, height: number) => ObservationScene<Row>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cards/range-select.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType, ReactNode } from 'react';
+/** What a card hands its period select: the periods, the chosen one, and how to change it. */
+export interface ChartRangeSelectProps {
+    value: string;
+    options: readonly {
+        id: string;
+        label: string;
+    }[];
+    onValueChange: (id: string) => void;
+    /** Accessible name for the control, e.g. "Period". */
+    'aria-label': string;
+}
+/**
+ * Swap in your own components for the controls cards draw. `rangeSelect` replaces every card's
+ * period select below it, so an app can use its design system's select (shadcn, Base UI, …).
+ * Without it, cards use Lilt's own.
+ */
+export declare function ChartComponentsProvider({ rangeSelect, children, }: {
+    rangeSelect?: ComponentType<ChartRangeSelectProps>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCustomRangeSelect(): ComponentType<ChartRangeSelectProps> | null;
+/**
+ * Lilt's period select: a pill that opens a frosted list of periods. It follows the listbox
+ * pattern, so arrows, Home, End, Enter, Escape and typing a period's first letter all work,
+ * and focus returns to the pill when the list closes.
+ */
+export declare function RangeSelect({ value, options, onValueChange, 'aria-label': ariaLabel, }: ChartRangeSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/strip-chart-card.d.ts

@@ -0,0 +1,15 @@
+import { NumericKey, TextKey } from './keys';
+import { ObservationsCardProps, ObservationScene } from './observations-card';
+export interface StripChartCardProps<Row, Key extends NumericKey<Row>> extends Omit<ObservationsCardProps<Row>, 'legend' | 'legendSwatch'> {
+    category: TextKey<Row>;
+    value: Key;
+    /** Unique point identity and accessible name. Falls back to the row index. */
+    label?: TextKey<Row>;
+    /** Strip uses deterministic vertical jitter; beeswarm avoids collisions. */
+    display?: 'strip' | 'beeswarm';
+    radius?: number;
+}
+/** Move only across the category band; each numeric position stays exact. */
+export declare function swarmOffsets(positions: readonly number[], diameter: number): number[];
+export declare function stripLayout<Row>(data: readonly Row[], category: string, value: string, label: string | undefined, width: number, height: number, display: 'strip' | 'beeswarm', radius: number, format: (value: number) => string, color?: string): ObservationScene<Row>;
+export declare function StripChartCard<Row, const Key extends NumericKey<Row>>({ category, value, label, display, radius, color, locale, valueFormat, formatValue, aggregate, ...props }: StripChartCardProps<Row, Key>): import("react/jsx-runtime").JSX.Element;

package/dist/cards/timeline-chart-card.d.ts

@@ -0,0 +1,18 @@
+import { TextKey, TimeKey } from './keys';
+import { ObservationsCardProps, ObservationScene } from './observations-card';
+export interface TimelineChartCardProps<Row> extends ObservationsCardProps<Row> {
+    label: TextKey<Row>;
+    /** Optional stable identity when labels repeat. */
+    id?: TextKey<Row>;
+    start: TimeKey<Row>;
+    end: TimeKey<Row>;
+    /** Intervals sharing a lane stack into subrows when they overlap. */
+    lane?: TextKey<Row>;
+    /** Optional color category, such as a machine state. */
+    group?: TextKey<Row>;
+    /** Formats UTC axis labels and interval endpoints. */
+    formatTime?: (timestamp: number) => string;
+}
+export declare function intervalTime(value: unknown): number | null;
+export declare function timelineLayout<Row>(data: readonly Row[], options: Pick<TimelineChartCardProps<Row>, 'label' | 'id' | 'start' | 'end' | 'lane' | 'group' | 'color'>, width: number, height: number, formatTime: (time: number) => string): ObservationScene<Row>;
+export declare function TimelineChartCard<Row>({ label, id, start, end, lane, group, color, formatTime: suppliedFormatTime, locale, formatValue, aggregate, ...props }: TimelineChartCardProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/cards/treemap-chart-card.d.ts

@@ -0,0 +1,24 @@
+import { NumericKey, TextKey } from './keys';
+import { ObservationsCardProps, ObservationScene } from './observations-card';
+export interface TreemapChartCardProps<Row, Key extends NumericKey<Row>> extends ObservationsCardProps<Row> {
+    /** Unique text field naming each leaf within its group. */
+    label: TextKey<Row>;
+    /** Nonnegative area. Null is missing; zero has no area. */
+    value: Key;
+    /** Optional parent category. Input rows are leaves, never parent totals. */
+    group?: TextKey<Row>;
+}
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Balanced binary tiling. Input order stays deterministic, with no random placement. */
+export declare function tileAreas<T>(items: readonly T[], weight: (item: T) => number, rect: Rect): {
+    item: T;
+    rect: Rect;
+}[];
+export declare function treemapLayout<Row>(data: readonly Row[], label: string, value: string, group: string | undefined, width: number, height: number, color?: string): ObservationScene<Row>;
+export declare function TreemapChartCard<Row, const Key extends NumericKey<Row>>({ label, value, group, color, ...props }: TreemapChartCardProps<Row, Key>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/engine/keyed.d.ts

@@ -0,0 +1,19 @@
+import { ChartSeries } from '../types';
+import { NormalizedData } from './normalize';
+/**
+ * Whether a change of rows can morph by x value rather than cross-fade: both frames are time or
+ * number data in ascending order, they keep the same series, and they share at least two x values
+ * to anchor the glide. A period switch such as 30 → 90 days qualifies; categories do not.
+ */
+export declare function canMorphByKey<T>(from: NormalizedData<T>, to: NormalizedData<T>, series: readonly ChartSeries<T>[]): boolean;
+/**
+ * One frame of a keyed morph: every row from both frames, in x order. Rows in both ease from
+ * their old values to their new ones; rows added after the old last row grow out of its value,
+ * so arriving data draws the line forward; other one-sided rows keep their own values, and the
+ * gliding domain carries them in or out past the plot edge.
+ */
+export declare function keyedFrame<T>(from: NormalizedData<T>, to: NormalizedData<T>, progress: number): NormalizedData<T>;
+/** Ease for something moving across the plot: slow out, quick through, soft landing. */
+export declare function morphEase(progress: number): number;
+/** A domain between two others, at the same eased progress as the data. */
+export declare function mixDomain(from: readonly [number, number], to: readonly [number, number], progress: number): readonly [number, number];

package/dist/engine/lifecycle.d.ts

@@ -5,6 +5,6 @@ export interface LifecycleGeneration {
     isCurrent: (generation: number) => boolean;
 }
 export declare function createLifecycleGeneration(): LifecycleGeneration;
-export declare function durationForPhase(phase: 'initial' | 'matched-update' | 'topology-update', reducedMotion: boolean, animateIn?: boolean): number;
+export declare function durationForPhase(phase: 'initial' | 'matched-update' | 'keyed-update' | 'topology-update', reducedMotion: boolean, animateIn?: boolean): number;
 /** Preserve full data fidelity while avoiding repeated per-sample geometry tweens. */
 export declare function skipDataTweenForWorkload(sampleCount: number, millisecondsSinceLastUpdate: number): boolean;

package/dist/engine/sankey.d.ts

@@ -34,3 +34,19 @@ export declare function layoutSankey(graph: SankeyGraph, width: number, height:
     nodes: PositionedSankeyNode[];
     links: PositionedSankeyLink[];
 };
+/**
+ * A frame between two layouts of the same flows, at `t` from 0 to 1 (a spring may pass 1).
+ * Nodes move and resize, links keep their ends attached as they thicken or thin, and nodes or
+ * links new to `to` grow from nothing. Matched by id, so a period change reads as the same
+ * flows changing rather than a redraw.
+ */
+export declare function mixSankeyLayout(from: {
+    nodes: readonly PositionedSankeyNode[];
+    links: readonly PositionedSankeyLink[];
+}, to: {
+    nodes: readonly PositionedSankeyNode[];
+    links: readonly PositionedSankeyLink[];
+}, t: number): {
+    nodes: PositionedSankeyNode[];
+    links: PositionedSankeyLink[];
+};

package/dist/finance.js

@@ -1,6 +1,6 @@
 "use client";
-import { A as e, C as t, I as n, J as r, L as i, P as a, R as o, S as s, T as c, X as l, Y as u, _ as d, _t as f, a as p, b as m, ct as h, et as g, f as _, i as v, it as y, n as b, q as x, t as S, u as C, v as w, w as T, x as E, y as D, z as O } from "./skeleton-block-Ha7mwDOY.js";
-import { S as k, d as A, g as j, h as M, p as ee, u as N } from "./report-context-CVNzZBRd.js";
+import { A as e, C as t, I as n, J as r, L as i, P as a, R as o, S as s, T as c, X as l, Y as u, _ as d, _t as f, a as p, b as m, ct as h, et as g, f as _, i as v, it as y, n as b, q as x, t as S, u as C, v as w, w as T, x as E, y as D, z as O } from "./skeleton-block-C8gOUsxn.js";
+import { C as k, d as A, g as j, h as M, p as ee, u as N } from "./report-context-UrwaoLYZ.js";
 import { useEffect as P, useMemo as F, useRef as I, useState as L } from "react";
 import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
 import { min as V } from "d3-array";

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export type { FunnelRow as FunnelStageSummary } from './engine/analysis';
 export type { ChartSummary, CsvColumn } from './data/chart-data';
 export { ChartRangeSummary } from './toolkit/chart-range-summary';
 export type { ChartRangeSummaryProps } from './toolkit/chart-range-summary';
+export { ChartComponentsProvider } from './cards/range-select';
+export type { ChartRangeSelectProps } from './cards/range-select';
 export { AreaChartCard } from './cards/area-chart-card';
 export type { AreaChartCardProps, CardSeries, CardRange } from './cards/area-chart-card';
 export { LineChartCard } from './cards/line-chart-card';
@@ -62,6 +64,14 @@ export type { ProgressCardProps, ProgressRange } from './cards/progress-card';
 export { FunnelChartCard } from './cards/funnel-chart-card';
 export type { FunnelChartCardProps } from './cards/funnel-chart-card';
 export { HeatmapChartCard } from './cards/heatmap-chart-card';
+export { TreemapChartCard } from './cards/treemap-chart-card';
+export type { TreemapChartCardProps } from './cards/treemap-chart-card';
+export { CalendarHeatmapCard } from './cards/calendar-heatmap-card';
+export type { CalendarHeatmapCardProps } from './cards/calendar-heatmap-card';
+export { TimelineChartCard } from './cards/timeline-chart-card';
+export type { TimelineChartCardProps } from './cards/timeline-chart-card';
+export { StripChartCard } from './cards/strip-chart-card';
+export type { StripChartCardProps } from './cards/strip-chart-card';
 export type { HeatmapAggregate, HeatmapChartCardProps } from './cards/heatmap-chart-card';
 export { ScatterChartCard } from './cards/scatter-chart-card';
 export type { ScatterAggregate, ScatterChartCardProps } from './cards/scatter-chart-card';
@@ -79,5 +89,5 @@ export { ActivityRingCard } from './cards/activity-ring-card';
 export type { ActivityAggregate, ActivityRingCardProps } from './cards/activity-ring-card';
 export { ChartCard, ChartCardHeader, ChartCardTitle, ChartCardValue, ChartCardDelta, ChartCardCaption, ChartCardRange, CardBadge, CardFrameContext, } from './cards/chart-card';
 export type { CardFrame, ChartCardProps, ChartCardHeaderProps, ChartCardValueProps, ChartCardDeltaProps, ChartCardRangeProps, ChartCardRangeOption, CardBadgeProps, } from './cards/chart-card';
-export type { KeysOfType, NumericKey, TextKey, XKey, XKind } from './cards/keys';
+export type { KeysOfType, NumericKey, TextKey, TimeKey, XKey, XKind } from './cards/keys';
 export type { NormalReport } from './watch/board/board-state';