@lilt-ui/charts 0.12.0 → 0.12.1

package/README.md

@@ -97,11 +97,11 @@ That's the whole card: the headline, the change chip, value tiles, and hover all
 | **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
+### Companion cards
 
 `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).
+They take the same `depth`, loading, empty, and header props as every other card, plus `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
 
@@ -206,8 +206,10 @@ Cards that need attention rise, what you've seen calms down, and what clears set
 
 - **Linked hover.** Give cards the same `sync` name and they read the same moment together.
 - **Targets and forecasts.** `target` draws a goal line and counts the points that reach it. `forecast` marks projected rows and keeps them out of the headline.
-- **Pin and compare.** Click to pin a point. Add `compare` and drag across a chart to see what changed.
+- **Pin and compare.** Click any mark to pin it; press anywhere off the marks, or Escape, to let go. Add `compare` and drag across a chart to see what changed, in the headline or, with `compare="badge"`, in the card's tab.
 - **Honest data.** `null` is a gap, never a zero, and missing values say so.
+- **Loading and empty.** `loading` shows a skeleton that `"shimmer"`s, `"draw"`s, or `"breathe"`s in the chart's own shape, then hands over to the data. A period with no rows shows a still empty state, or your own with `empty`, and the headline reads a dash, never zero.
+- **Long series.** Line and area cards draw tens of thousands of points from four per pixel column; hover, tiles, and exports still read every row.
 - **Watch.** `normal` flags what's unusual and says why; a `ChartBoard` raises what needs attention.
 - **Calm by default.** Keyboard navigation, screen reader labels, and motion that respects reduced-motion settings.
 
@@ -235,7 +237,7 @@ function PeriodSelect({ value, options, onValueChange, ...rest }: ChartRangeSele
 <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.
+Every card that pins works from the keyboard: Tab to the chart, arrows to inspect, Enter or Space to pin, and Escape to clear. Radial, Funnel, and Horizontal bar cards can hand their pin to you with a controlled `selected`; a click, Escape, or a press off the marks then asks `onSelectedChange` instead of changing it.
 
 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.
 
@@ -246,22 +248,6 @@ Every Lilt style lives in the `lilt` cascade layer, so your CSS wins without spe
 @import 'tailwindcss';
 ```
 
-## Upgrading from 0.1
-
-0.2 replaces a series' `interval` with named `fields`, which carry any companion values: a forecast's low and high, quartiles, or a candle's open, high, and low. `IntervalBand` now names the fields it reads:
-
-```tsx
-// 0.1
-{ id: 'revenue', accessor: (row) => row.revenue, interval: { lower: (row) => row.low, upper: (row) => row.high, meaning: 'Forecast' } }
-<IntervalBand series="revenue" />
-
-// 0.2
-{ id: 'revenue', accessor: (row) => row.revenue, fields: { low: { label: 'Low', accessor: (row) => row.low }, high: { label: 'High', accessor: (row) => row.high } } }
-<IntervalBand series="revenue" lower="low" upper="high" />
-```
-
-Cards are unchanged: `forecast={{ from, lower, upper }}` works as before. Tooltip content reads `series[].fields` instead of `series[].interval`.
-
 ## License
 
 MIT © Lilt UI

package/dist/finance.js

@@ -1,5 +1,5 @@
 "use client";
-import { $ as e, A as t, C as n, I as r, J as i, L as a, P as o, Q as s, R as c, S as l, T as u, X as d, Z as f, _ as p, a as m, b as h, bt as g, dt as _, f as v, i as y, n as b, rt as x, st as S, t as C, u as w, v as T, w as E, x as D, y as O, z as k } from "./skeleton-block-CxrRuqe0.js";
+import { $ as e, A as t, C as n, I as r, J as i, L as a, P as o, Q as s, R as c, S as l, T as u, X as d, Z as f, _ as p, a as m, b as h, bt as g, dt as _, f as v, i as y, n as b, rt as x, st as S, t as C, u as w, v as T, w as E, x as D, y as O, z as k } from "./skeleton-block-ClcPgFdK.js";
 import { C as A, d as j, g as ee, h as M, p as N, u as P } from "./report-context-DLA3I57K.js";
 import { useEffect as F, useMemo as I, useRef as L, useState as R } from "react";
 import { Fragment as z, jsx as B, jsxs as V } from "react/jsx-runtime";
@@ -191,6 +191,10 @@ var ae = c(function({ series: t, open: n, high: r, low: i, display: a = "candle"
 		e.high,
 		e.low
 	],
+	color: (e, { row: t, descriptor: n }) => {
+		let r = K(t, e.series, e);
+		return r ? q(n, t, r) : void 0;
+	},
 	highlight: (e, { row: t, snapshot: r, descriptor: i }) => {
 		let a = K(t, e.series, e);
 		if (!a) return null;