@llmnative/react 1.38.0 → 1.39.1

package/dist/types/src/components/charts/ListCharts.d.ts

@@ -32,6 +32,46 @@ export interface BarListProps {
 }
 /** CR-112 — horizontal bars, label on the left and value at the end: rankings, funnels, averages per group. */
 export declare function BarList({ rows, ariaLabel, color, format: formatProp, max: fixedMax, labelWidth, legend, className, onRowClick }: BarListProps): React.JSX.Element;
+export interface MeasureBarPart {
+    readonly id: string;
+    readonly label: string;
+    readonly color?: ChartColor;
+}
+export interface MeasureBarColumn {
+    readonly id: string;
+    /** Its name in the legend and in the tooltip. */
+    readonly label: string;
+    readonly format?: (value: number) => string;
+    readonly color?: ChartColor;
+    /** The parts of each of its bars, left to right, each of its colour (in the legend in place of the measure): input and output tokens. */
+    readonly parts?: readonly MeasureBarPart[];
+}
+export interface MeasureBarRow {
+    readonly id: string;
+    readonly label: string;
+    /** For each column, by its id: a number, or one number per part. */
+    readonly values: Readonly<Record<string, number | readonly number[]>>;
+    readonly trailing?: {
+        readonly text: string;
+        readonly tone: 'good' | 'bad' | 'neutral';
+    };
+    readonly tooltip?: readonly ChartTooltipRow[];
+}
+export interface MeasureBarListProps {
+    columns: readonly MeasureBarColumn[];
+    rows: readonly MeasureBarRow[];
+    ariaLabel: string;
+    /** Room for the labels, in px. */
+    labelWidth?: number;
+    className?: string;
+    onRowClick?: (row: MeasureBarRow) => void;
+}
+/**
+ * CR-115 — grouped bars: each item once, and next to it a bar per measure one under the other, each
+ * measure of its colour (the legend) and on its own scale (time, cost, tokens: quantities of different
+ * units read together). A bar of a measure with parts is split in proportion, each part of its colour.
+ */
+export declare function MeasureBarList({ columns, rows, ariaLabel, labelWidth, className, onRowClick }: MeasureBarListProps): React.JSX.Element;
 export interface HeatmapProps {
     /** values[row][column]. */
     values: ReadonlyArray<readonly number[]>;

package/dist/types/src/components/charts/index.d.ts

@@ -4,8 +4,8 @@ export { LineChart, AreaChart, Sparkline } from './LineCharts';
 export type { LineSeries, LineChartProps, AreaChartProps, SparklineProps } from './LineCharts';
 export { ScatterChart } from './ScatterChart';
 export type { ScatterPoint, ScatterChartProps } from './ScatterChart';
-export { BarList, Heatmap, CalendarHeatmap, AnimatedNumber } from './ListCharts';
-export type { BarListRow, BarListProps, HeatmapProps, CalendarHeatmapProps } from './ListCharts';
+export { BarList, MeasureBarList, Heatmap, CalendarHeatmap, AnimatedNumber } from './ListCharts';
+export type { BarListRow, BarListProps, MeasureBarPart, MeasureBarColumn, MeasureBarRow, MeasureBarListProps, HeatmapProps, CalendarHeatmapProps } from './ListCharts';
 export { ChartLegend, ChartDataTable, useChartTooltip } from './ChartParts';
 export type { ChartLegendItem, ChartTooltipRow } from './ChartParts';
 export { chartToken, chartFill, niceMax, ticks, useAnimatedValues, useReveal, useChartWidth, useChartFormat } from './chartCore';

package/llms-full.txt

@@ -881,6 +881,10 @@ finché sono al massimo 40), tabella dei dati `sr-only` con `ariaLabel` come did
 <StackedColumnChart ariaLabel="Ore per agente" labels={days} labelEvery={2} format={(v) => `${v} h`}
   series={[{ id: 'dev', label: 'Developer', values: dev }, { id: 'qa', label: 'Tester', values: qa, color: 3 }]}
   comparison={previousTotals} comparisonLabel="periodo precedente" />
+<MeasureBarList ariaLabel="Agenti"   // CR-115: barre raggruppate, ogni agente una volta, una barra per misura (colore in legenda), ognuna sulla sua scala
+  columns={[{ id: 'time', label: 'Ore', format: (v) => `${v} h` }, { id: 'cost', label: 'Costo' },
+    { id: 'tokens', label: 'Token', parts: [{ id: 'in', label: 'Input' }, { id: 'out', label: 'Output' }] }]}   // parts: la barra divisa in proporzione
+  rows={[{ id: 'dev', label: 'Developer', values: { time: 18, cost: 4.27, tokens: [2400000, 190000] }, trailing: { text: '18 back', tone: 'bad' } }]} />
 <SequenceColumnChart ariaLabel="Turni per CR" format={(v) => `${v} min`}   // CR-114: ogni colonna nel suo ordine, una serie può tornare
   series={[{ id: 'dev', label: 'Developer' }, { id: 'rev', label: 'Reviewer' }]}
   columns={[{ label: '#34', title: 'CR #34', segments: [{ series: 'dev', value: 18 }, { series: 'rev', value: 6 }, { series: 'dev', value: 11 }] }]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.38.0",
+  "version": "1.39.1",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",