@lilt-ui/charts 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.12.1
+
+Pins let go the way you expect, and the hover band wears the colour of what it lights.
+
+- Every card that pins (radial, heatmap, funnel, horizontal bar, radar, sankey, scatter, slope, activity ring, and the treemap, calendar, timeline and strip cards) releases its pin on any press that misses the marks: empty plot, elsewhere in the card, or off it, as area and bar charts already did. Escape releases after a mouse pin too. Presses on controls, such as legend items and the period menu, keep the pin.
+- The band behind an inspected column takes that column's colour: a falling candle lights red, a rising one green, and the volume pane follows its bars. With several series in a column, it takes the colour of the one being read.
+- The docs offer `compare` (off, on, or `'badge'`) in Props on every chart that reads change over time.
+- The README covers loading and empty states, long series, and how pins let go, and drops the pre-1.0 upgrade notes.
+
+## 0.12.0
+
+Hover lands with the column it reads, and every chart moves a little more like a real object.
+
+- The crosshair, band, pills and pins share one quick, critically damped spring, so the readout arrives with the column instead of trailing it. Fast moves blur slightly and clear as they land; reduced motion never blurs.
+- Areas lift in on first load, from just below into place on the bars' spring, softly blurred until they land. A new period on an area chart runs left to right instead of moving every point at once.
+- Horizontal bar rows move in one movement: a leaving row fades where it was while the rest close its gap and re-rank together, and rows that cross pass over and under each other instead of clipping through.
+- Bars coloured per row, such as candlestick volume, keep their own colour while they leave.
+- Charts load only the Motion features they use: a minimal line card drops from about 137 kB to 125 kB of gzipped JavaScript. Layout animation, used only where rows or board cards reorder, arrives in its own chunk after first paint.
+- `llms.txt` groups the cards by job with a one-line hint each, and the READMEs end with a two-line prompt that hands Lilt to a coding agent.
+
 ## 0.11.0
 
 Every chart has a quiet empty state, and it can be yours.

package/README.md

@@ -39,6 +39,16 @@ Lilt needs React and React DOM 19. Every card, variant, and prop is documented a
 import '@lilt-ui/charts/styles.css';
 ```
 
+### With an agent
+
+Working with Claude Code, Cursor, or another coding agent? Paste this, then ask for the chart you want:
+
+```text
+Use Lilt Charts (@lilt-ui/charts) for charts. Read https://liltui.vercel.app/llms.txt first and follow its rules.
+```
+
+[llms.txt](https://liltui.vercel.app/llms.txt) lists every card by job with its rules; [llms-full.txt](https://liltui.vercel.app/llms-full.txt) adds every example, data shape, and prop.
+
 ## Your first card
 
 ```tsx
@@ -87,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
 
@@ -196,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.
 
@@ -225,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.
 
@@ -236,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/cards/range-select.d.ts

@@ -20,9 +20,5 @@ export declare function ChartComponentsProvider({ rangeSelect, children, }: {
     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;
+/** RangeSelect with its own MotionScope, so it animates wherever it is rendered. */
+export declare function RangeSelect(props: ChartRangeSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/finance.js

@@ -1,6 +1,6 @@
 "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-CPaKI7op.js";
-import { C as A, d as j, g as ee, h as M, p as N, u as P } from "./report-context-UrwaoLYZ.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";
 import { min as H } from "d3-array";
@@ -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;