@siyahi/ui 0.1.9-next.24 → 0.1.9-next.25

package/dist/components/siyahi/waterfall-chart.d.ts

@@ -0,0 +1,51 @@
+import { SeriesChartProps } from "../../lib/chart-series.js";
+//#region src/components/siyahi/waterfall-chart.d.ts
+/**
+ * One bar of a waterfall. A change moves the running total by its value. A total draws the running total from zero;
+ * give it a value to set the total instead, as an opening balance does. Labels may repeat, such as "Balance" at
+ * both ends: each bar is placed by its position.
+ */
+export type WaterfallStep = {
+  kind: "change";
+  label: string;
+  value: number;
+} | {
+  kind: "total";
+  label: string;
+  value?: number;
+};
+/** A step as drawn: the running total after it, and the span its bar covers. */
+export interface WaterfallBar {
+  /** The step's position, as text: the category the bar is placed by. */
+  key: string;
+  label: string;
+  kind: "rise" | "fall" | "total";
+  /** How far the step moved the running total. */
+  change: number;
+  /** The running total after the step. */
+  level: number;
+  /** The bar's low and high ends, low first whichever way the step moved: Recharts reads a range that way. */
+  span: [number, number];
+  /** The bar picks up at the level the one before left, so a dashed line joins them. */
+  continues: boolean;
+}
+/** Walks the steps in order, keeping the running total. */
+export declare function waterfallBars(steps: readonly WaterfallStep[]): WaterfallBar[];
+export interface WaterfallChartCardProps extends Pick<SeriesChartProps<WaterfallBar, "key">, "title" | "description" | "action" | "height" | "valueFormatter" | "yTickFormatter" | "yLabel" | "referenceLines" | "placeholder" | "footer"> {
+  /** The bars in order: usually a total to start from, the changes, and a total to end on. */
+  steps: readonly WaterfallStep[];
+  /** Bars run sideways with the labels down the left, for long names such as product categories. */
+  horizontal?: boolean;
+  /** What the legend calls each kind of bar. */
+  labels?: {
+    rise: string;
+    fall: string;
+    total: string;
+  };
+}
+/**
+ * A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a
+ * year's profit built up month by month. Rises and falls float at the level the one before left; totals stand on zero.
+ */
+export declare function WaterfallChartCard({ steps, horizontal, labels, ...props }: WaterfallChartCardProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/waterfall-chart.js

@@ -0,0 +1,147 @@
+import { useLocale } from "./siyahi-provider.js";
+import { ChartFrame } from "../../lib/chart-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Bar, BarChart, Cell, ReferenceLine } from "recharts";
+//#region src/components/siyahi/waterfall-chart.tsx
+const span = (a, b) => [Math.min(a, b), Math.max(a, b)];
+/** Walks the steps in order, keeping the running total. */
+function waterfallBars(steps) {
+	let level = 0;
+	return steps.map((step, index) => {
+		const before = level;
+		const key = String(index);
+		if (step.kind === "total") {
+			level = step.value ?? level;
+			const continues = level === before;
+			return {
+				key,
+				label: step.label,
+				kind: "total",
+				change: level - before,
+				level,
+				span: span(0, level),
+				continues
+			};
+		}
+		level += step.value;
+		const kind = step.value < 0 ? "fall" : "rise";
+		return {
+			key,
+			label: step.label,
+			kind,
+			change: step.value,
+			level,
+			span: span(before, level),
+			continues: true
+		};
+	});
+}
+/**
+* The first step whose figure is not a number. Every bar after it stands on the running total, so a missing change
+* cannot be skipped without drawing wrong balances; the card says which step is missing instead.
+*/
+const unknownStep = (steps) => steps.find((step) => step.value !== void 0 && !Number.isFinite(step.value));
+const COLOR = {
+	rise: "var(--positive)",
+	fall: "var(--negative)",
+	total: "var(--chart-1)"
+};
+const LABELS = {
+	rise: "Increase",
+	fall: "Decrease",
+	total: "Total"
+};
+const MINUS = "−";
+const fill = (kind) => kind === "total" ? COLOR.total : `color-mix(in oklab, ${COLOR[kind]} 35%, var(--card))`;
+function Legend({ labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center gap-4 pt-3",
+		children: [
+			"rise",
+			"fall",
+			"total"
+		].map((kind) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "size-2 shrink-0 rounded-xs border",
+				style: {
+					backgroundColor: fill(kind),
+					borderColor: COLOR[kind]
+				}
+			}), labels[kind]]
+		}, kind))
+	});
+}
+/**
+* A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a
+* year's profit built up month by month. Rises and falls float at the level the one before left; totals stand on zero.
+*/
+function WaterfallChartCard({ steps, horizontal = false, labels = LABELS, ...props }) {
+	const { numberLocale } = useLocale();
+	const bars = useMemo(() => waterfallBars(steps), [steps]);
+	const format = props.valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const signed = (value) => `${value > 0 ? "+" : value < 0 ? MINUS : ""}${format(Math.abs(value))}`;
+	const names = new Map(bars.map((bar) => [bar.key, bar.label]));
+	const unknown = unknownStep(steps);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		chart: BarChart,
+		...props,
+		placeholder: props.placeholder ?? (unknown && /* @__PURE__ */ jsxs("p", {
+			className: "text-sm text-muted-foreground",
+			children: [unknown.label, " has no figure, so the running total after it is unknown."]
+		})),
+		horizontal,
+		data: bars,
+		xKey: "key",
+		xFormatter: (key) => names.get(key) ?? key,
+		series: [{
+			key: "level",
+			label: labels.total,
+			color: COLOR.total
+		}],
+		legend: /* @__PURE__ */ jsx(Legend, { labels }),
+		tooltipRow: (_value, _name, item) => {
+			const bar = item.payload;
+			return (bar.kind === "total" ? [[labels.total, format(bar.level)]] : [[bar.kind === "rise" ? labels.rise : labels.fall, signed(bar.change)], ["Running total", format(bar.level)]]).map(([name, figure]) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+					children: figure
+				})]
+			}, name));
+		},
+		children: [bars.slice(0, -1).map((bar, i) => {
+			const next = bars[i + 1];
+			if (!next.continues) return null;
+			const at = (key) => horizontal ? {
+				x: bar.level,
+				y: key
+			} : {
+				x: key,
+				y: bar.level
+			};
+			return /* @__PURE__ */ jsx(ReferenceLine, {
+				segment: [at(bar.key), at(next.key)],
+				stroke: "var(--muted-foreground)",
+				strokeDasharray: "2 2",
+				"data-slot": "waterfall-connector"
+			}, bar.key);
+		}), /* @__PURE__ */ jsx(Bar, {
+			dataKey: "span",
+			name: labels.total,
+			maxBarSize: horizontal ? 24 : 48,
+			radius: 2,
+			children: bars.map((bar) => /* @__PURE__ */ jsx(Cell, {
+				fill: fill(bar.kind),
+				stroke: COLOR[bar.kind],
+				strokeWidth: 1.5
+			}, bar.key))
+		})]
+	});
+}
+//#endregion
+export { WaterfallChartCard, waterfallBars };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./lib/chart-series.js";
+import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericKey, NumericXProps, SeriesChartProps } from "./lib/chart-series.js";
 import { AreaChartCard, AreaChartCardProps } from "./components/registry/charts/area-chart-card.js";
 import { BarChartCard, BarChartCardProps } from "./components/registry/charts/bar-chart-card.js";
 import { LineChartCard, LineChartCardProps } from "./components/registry/charts/line-chart-card.js";
@@ -52,6 +52,7 @@ import { AppSidebar, AppSidebarProps } from "./components/registry/sidebar-07/ap
 import { Callout, CalloutProps } from "./components/siyahi/callout.js";
 import { Delta, DeltaProps } from "./components/siyahi/delta.js";
 import { ChangeBar, ChangeBarProps } from "./components/siyahi/change-bar.js";
+import { ChangeGrid, ChangeGridProps, ChangeGridRow } from "./components/siyahi/change-grid.js";
 import { DataBar, DataBarProps } from "./components/siyahi/data-bar.js";
 import { DataList, DataListItem, DataListItemProps } from "./components/siyahi/data-list.js";
 import { DataTableCompactColumnsToggle } from "./components/siyahi/data-table-compact-columns-toggle.js";
@@ -59,6 +60,8 @@ import { DataTableFootnote, DataTableFootnoteProps } from "./components/siyahi/d
 import { DataTableRowCount, DataTableRowCountProps } from "./components/siyahi/data-table-row-count.js";
 import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
 import { defaultSidebarOpen } from "./components/siyahi/default-sidebar-open.js";
+import { DrawdownChartCard, DrawdownChartCardProps, DrawdownPoint, drawdowns } from "./components/siyahi/drawdown-chart.js";
+import { HistogramBin, HistogramChartCard, HistogramChartCardProps, HistogramMark, bucketOf, histogram, markLines, percentile } from "./components/siyahi/histogram-chart.js";
 import { InlineCode } from "./components/siyahi/inline-code.js";
 import { LocalTime, LocalTimeProps } from "./components/siyahi/local-time.js";
 import { PageHero, PageHeroProps } from "./components/siyahi/page-hero.js";
@@ -68,8 +71,11 @@ import { PanelGrid, PanelGridProps } from "./components/siyahi/panel-grid.js";
 import { PriceChart, PriceChartProps } from "./components/siyahi/price-chart.js";
 import { Quote, QuoteProps } from "./components/siyahi/quote.js";
 import { RangePosition, RangePositionProps } from "./components/siyahi/range-position.js";
+import { ScatterQuadrants } from "./lib/scatter.js";
+import { ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint } from "./components/siyahi/scatter-chart.js";
 import { SiyahiLocale, defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, SiyahiProviderProps, Surface, useLocale, useSurface } from "./components/siyahi/siyahi-provider.js";
+import { SlopeChart, SlopeChartProps, SlopeItem, spread } from "./components/siyahi/slope-chart.js";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/ui/alert.js";
 import { StatusAlert, StatusAlertProps } from "./components/siyahi/status-alert.js";
 import { Badge, badgeVariants } from "./components/ui/badge.js";
@@ -78,6 +84,7 @@ import { TargetRow, TargetRows, TargetRowsProps, TargetStatus } from "./componen
 import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./components/ui/progress.js";
 import { ToneProgress, ToneProgressProps } from "./components/siyahi/tone-progress.js";
 import { Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps } from "./components/siyahi/treemap.js";
+import { WaterfallBar, WaterfallChartCard, WaterfallChartCardProps, WaterfallStep, waterfallBars } from "./components/siyahi/waterfall-chart.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./components/ui/avatar.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/ui/breadcrumb.js";
@@ -101,4 +108,4 @@ import { Textarea } from "./components/ui/textarea.js";
 import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
 import { Formatters, TimeOptions, count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Callout, CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeBarProps, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CompactColumns, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableCompactColumnsToggle, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableFootnoteProps, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericXProps, type Option, PageHero, PageHeroProps, PageSection, PageSectionProps, PageSubheading, PageToc, PageTocItem, PageTocProps, PanelGrid, PanelGridProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, Quote, QuoteProps, RangePosition, RangePositionProps, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, Sparkline, SparklineProps, StatusActivity, StatusAlert, StatusAlertProps, StatusBadge, StatusBadgeProps, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Surface, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TargetRow, TargetRows, TargetRowsProps, TargetStatus, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, buttonVariants, count, defaultLocale, defaultSidebarOpen, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Callout, CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeBarProps, ChangeGrid, ChangeGridProps, ChangeGridRow, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CompactColumns, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableCompactColumnsToggle, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableFootnoteProps, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DrawdownChartCard, DrawdownChartCardProps, DrawdownPoint, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, HistogramBin, HistogramChartCard, HistogramChartCardProps, HistogramMark, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericKey, NumericXProps, type Option, PageHero, PageHeroProps, PageSection, PageSectionProps, PageSubheading, PageToc, PageTocItem, PageTocProps, PanelGrid, PanelGridProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, Quote, QuoteProps, RangePosition, RangePositionProps, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint, type ScatterQuadrants, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, SlopeChart, SlopeChartProps, SlopeItem, Sparkline, SparklineProps, StatusActivity, StatusAlert, StatusAlertProps, StatusBadge, StatusBadgeProps, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Surface, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TargetRow, TargetRows, TargetRowsProps, TargetStatus, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, WaterfallBar, WaterfallChartCard, WaterfallChartCardProps, WaterfallStep, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };

package/dist/index.js

@@ -77,6 +77,7 @@ import { TeamSwitcher } from "./components/registry/sidebar-07/team-switcher.js"
 import { AppSidebar } from "./components/registry/sidebar-07/app-sidebar.js";
 import { Callout } from "./components/siyahi/callout.js";
 import { ChangeBar } from "./components/siyahi/change-bar.js";
+import { ChangeGrid } from "./components/siyahi/change-grid.js";
 import { DataBar } from "./components/siyahi/data-bar.js";
 import { DataList, DataListItem } from "./components/siyahi/data-list.js";
 import { DataTableCompactColumnsToggle } from "./components/siyahi/data-table-compact-columns-toggle.js";
@@ -84,6 +85,8 @@ import { DataTableFootnote } from "./components/siyahi/data-table-footnote.js";
 import { DataTableRowCount } from "./components/siyahi/data-table-row-count.js";
 import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
 import { defaultSidebarOpen } from "./components/siyahi/default-sidebar-open.js";
+import { DrawdownChartCard, drawdowns } from "./components/siyahi/drawdown-chart.js";
+import { HistogramChartCard, bucketOf, histogram, markLines, percentile } from "./components/siyahi/histogram-chart.js";
 import { InlineCode } from "./components/siyahi/inline-code.js";
 import { LocalTime } from "./components/siyahi/local-time.js";
 import { PageHero } from "./components/siyahi/page-hero.js";
@@ -93,9 +96,12 @@ import { PanelGrid } from "./components/siyahi/panel-grid.js";
 import { PriceChart } from "./components/siyahi/price-chart.js";
 import { Quote } from "./components/siyahi/quote.js";
 import { RangePosition } from "./components/siyahi/range-position.js";
+import { ScatterChartCard } from "./components/siyahi/scatter-chart.js";
+import { SlopeChart, spread } from "./components/siyahi/slope-chart.js";
 import { StatusAlert } from "./components/siyahi/status-alert.js";
 import { StatusBadge } from "./components/siyahi/status-badge.js";
 import { TargetRows } from "./components/siyahi/target-rows.js";
 import { ToneProgress } from "./components/siyahi/tone-progress.js";
 import { Treemap, TreemapLegend } from "./components/siyahi/treemap.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableCompactColumnsToggle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, MetricStrip, NavMain, NavProjects, NavUser, PageHero, PageSection, PageSubheading, PageToc, PanelGrid, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Quote, RangePosition, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, Sparkline, StatusAlert, StatusBadge, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TargetRows, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, buttonVariants, count, defaultLocale, defaultSidebarOpen, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter };
+import { WaterfallChartCard, waterfallBars } from "./components/siyahi/waterfall-chart.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableCompactColumnsToggle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DrawdownChartCard, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, HistogramChartCard, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, MetricStrip, NavMain, NavProjects, NavUser, PageHero, PageSection, PageSubheading, PageToc, PanelGrid, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Quote, RangePosition, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScatterChartCard, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, SlopeChart, Sparkline, StatusAlert, StatusBadge, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TargetRows, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WaterfallChartCard, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };

package/dist/lib/chart-frame.d.ts

@@ -1,5 +1,6 @@
 import { ChartColor, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./chart-series.js";
-import { ComponentProps, ReactNode } from "react";
+import { ChartTooltipContent } from "../components/ui/chart.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
 import { AreaChart, BarChart, LineChart, YAxisProps } from "recharts";
 //#region src/lib/chart-frame.d.ts
 interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps {
@@ -17,6 +18,10 @@ interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<Seri
   /** "sign" stacks negative values below zero and positive ones above, rather than on one running total. */
   stackOffset?: "sign";
   onClick?: ComponentProps<typeof BarChart>["onClick"];
+  /** A tooltip row per hovered mark; by default each series' colour, label and formatted value (seriesRow). */
+  tooltipRow?: ComponentProps<typeof ChartTooltipContent>["formatter"];
+  /** The legend under the plot; by default one chip per series. */
+  legend?: ReactElement;
 }
 /**
  * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
@@ -42,6 +47,6 @@ export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value
  * that gave its category axis its own id (dash#88) got a plot split in two
  * and every tooltip headed with the series name instead of the category.
  */
-export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, onClick, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks }: ChartFrameProps<T, K>): import("react").JSX.Element;
+export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, onClick, tooltipRow, legend, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks }: ChartFrameProps<T, K>): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/lib/chart-frame.js

@@ -9,6 +9,31 @@ import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAx
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const TICK = { className: "fill-muted-foreground font-mono" };
 const NO_LINES = [];
+const SERIES_LEGEND = /* @__PURE__ */ jsx(ChartLegendContent, { className: "flex-wrap gap-y-1" });
+/**
+* A reference line over a card-coloured band, so it stays traceable where it crosses a bar or an area: the text
+* colour on --chart-1 is only 2:1, but each against the card is well over 3:1.
+*/
+function haloLine({ x1, y1, x2, y2, stroke, strokeDasharray }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		"data-slot": "reference-line-halo",
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke: "var(--card)",
+		strokeWidth: 4
+	}), /* @__PURE__ */ jsx("line", {
+		className: "recharts-reference-line-line",
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke,
+		strokeDasharray,
+		strokeWidth: 1
+	})] });
+}
 /**
 * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
 * zero, since each bar's own Cell follows its sign but the chip follows the Bar.
@@ -161,7 +186,7 @@ function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, tooltipRow, legend = SERIES_LEGEND, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
 	const { numberLocale } = useLocale();
 	const formatValue = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
@@ -293,23 +318,32 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 								y: at.x
 							} : at,
 							stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+							shape: haloLine,
 							strokeDasharray: at.y === void 0 ? void 0 : "4 4",
 							label: label === void 0 ? void 0 : {
 								value: label,
 								position: labelPosition,
-								className: "fill-muted-foreground text-xs"
+								className: "fill-muted-foreground stroke-card text-xs",
+								style: {
+									paintOrder: "stroke",
+									strokeWidth: 3,
+									strokeLinejoin: "round"
+								}
 							}
 						}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
-						/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-							labelFormatter: (_, payload) => {
-								const row = payload[0]?.payload;
-								return row ? xTooltipFormatter(row[xKey]) : null;
-							},
-							formatter: seriesRow(series, formatValue)
-						}) }),
+						/* @__PURE__ */ jsx(ChartTooltip, {
+							cursor: { fillOpacity: .4 },
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								labelFormatter: (_, payload) => {
+									const row = payload[0]?.payload;
+									return row ? xTooltipFormatter(row[xKey]) : null;
+								},
+								formatter: tooltipRow ?? seriesRow(series, formatValue)
+							})
+						}),
 						children,
 						/* @__PURE__ */ jsx(ChartLegend, {
-							content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+							content: legend,
 							itemSorter: null
 						})
 					]

package/dist/lib/chart-series.d.ts

@@ -6,7 +6,7 @@ import { ReactNode } from "react";
  */
 export type ChartColor = "var(--chart-1)" | "var(--chart-2)" | "var(--chart-3)" | "var(--chart-4)" | "var(--chart-5)" | "var(--muted-foreground)" | "var(--positive)" | "var(--negative)";
 /** The fields of a row that hold numbers: the ones a series can plot. */
-type NumericKey<T> = { [K in keyof T]-?: T[K] extends number | null | undefined ? K : never; }[keyof T] & string;
+export type NumericKey<T> = { [K in keyof T]-?: T[K] extends number | null | undefined ? K : never; }[keyof T] & string;
 /** One series: the field it plots, its name in the legend and tooltip, and its colour. */
 export interface ChartSeriesItem<T> {
   key: NumericKey<T>;
@@ -94,5 +94,4 @@ export interface NumericXProps {
  * be drawn; "monotone", the default, smooths between them without overshooting a point.
  */
 export type ChartCurve = "monotone" | "linear";
-//#endregion
-export {};
+//#endregion

package/dist/lib/fit-text.d.ts

@@ -0,0 +1,6 @@
+//#region src/lib/fit-text.d.ts
+/** About how wide a text-xs label draws, in pixels. */
+export declare const textWidth: (text: string) => number;
+/** The label, cut with an ellipsis when it would draw wider than `width` pixels at text-xs. */
+export declare function fit(text: string, width: number): string;
+//#endregion

package/dist/lib/fit-text.js

@@ -0,0 +1,11 @@
+//#region src/lib/fit-text.ts
+const CHAR_PX = 6.6;
+/** About how wide a text-xs label draws, in pixels. */
+const textWidth = (text) => text.length * CHAR_PX;
+/** The label, cut with an ellipsis when it would draw wider than `width` pixels at text-xs. */
+function fit(text, width) {
+	const room = Math.floor(width / CHAR_PX);
+	return text.length <= room ? text : `${text.slice(0, Math.max(room - 1, 1)).trimEnd()}…`;
+}
+//#endregion
+export { fit, textWidth };

package/dist/lib/heat.d.ts

@@ -0,0 +1,7 @@
+//#region src/lib/heat.d.ts
+export declare const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+export declare const heatRange: (range?: number) => number;
+export declare const heatFill: (side: "positive" | "negative", step: number) => string;
+export declare function heat(change: number | null, range?: number): string;
+//#endregion

package/dist/lib/heat.js

@@ -0,0 +1,14 @@
+//#region src/lib/heat.ts
+/** The signed heat scale a Treemap tile and a ChangeGrid cell share: five steps of gain or loss mixed into the card. */
+const DEFAULT_RANGE = .05;
+const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
+const heatFill = (side, step) => `color-mix(in oklab, var(--${side}) var(--heat-${step}), var(--card))`;
+function heat(change, range) {
+	if (!change || !Number.isFinite(change)) return "var(--muted)";
+	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
+	return heatFill(change > 0 ? "positive" : "negative", step);
+}
+//#endregion
+export { HEAT_STEPS, heat, heatFill, heatRange };

package/dist/lib/scatter.d.ts

@@ -0,0 +1,98 @@
+//#region src/lib/scatter.d.ts
+/**
+ * Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+ * over max, so the axis ends on a tick and every label reads as a round number.
+ */
+export declare function logTicks(min: number, max: number): number[];
+/**
+ * Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+ * of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+ * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+ */
+export declare function linearTicks(min: number, max: number, count?: number): number[];
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export interface LabelCandidate {
+  key: string;
+  text: string;
+  /** The dot's centre, in pixels. */
+  cx: number;
+  cy: number;
+  /** The dot's radius, its edge included: a sized dot keeps names off all of itself. */
+  r: number;
+}
+export interface PlacedLabel {
+  key: string;
+  text: string;
+  /** Where the text starts and its baseline, with textAnchor="start". */
+  x: number;
+  y: number;
+}
+/** How labels are set: their type size in pixels and a name's width in that type. */
+export interface LabelType {
+  size: number;
+  measure: (text: string) => number;
+}
+/**
+ * Names beside dots, in the candidates' order, up to `limit`: each tries the right of its dot, then the left, above,
+ * below and the four corners, and takes the first spot inside the plot that covers no other label, no other dot and
+ * nothing `reserved` (such as a quadrant's name). A name that finds no spot is left to the tooltip, so labels never sit
+ * on top of each other.
+ */
+export declare function placeLabels(candidates: readonly LabelCandidate[], plot: Box, limit: number, { size, measure }: LabelType, reserved?: readonly Box[]): PlacedLabel[];
+/**
+ * Splits the plot into four at a value on each axis, such as zero, with an optional name in each corner. On a log
+ * axis x must be above zero, or no split is drawn. A name that does not fit its quadrant in two lines is left out.
+ */
+export interface ScatterQuadrants {
+  x: number;
+  y: number;
+  labels?: {
+    topLeft?: string;
+    topRight?: string;
+    bottomLeft?: string;
+    bottomRight?: string;
+  };
+}
+export type QuadrantLabels = ScatterQuadrants["labels"];
+/** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
+export declare function quadrantSplit(quadrants: ScatterQuadrants | undefined, xScale: "linear" | "log"): ScatterQuadrants | undefined;
+/** The largest sized dot; the smallest stays big enough to see and to tap. */
+export declare const MAX_RADIUS = 20;
+/**
+ * Each dot's radius. Area, not radius, follows size, so a holding twice as large has twice the ink. A size that weighs
+ * nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
+ */
+export declare function dotSizes(points: readonly {
+  size?: number;
+}[], plain: number): {
+  radiusOf: (p: {
+    size?: number;
+  }) => number;
+  sized: boolean;
+};
+/**
+ * Each corner's name in the plot's corner, in the band the y axis keeps clear above or below the data, wrapped to its
+ * own quadrant's width so two names on one edge never meet: where its lines are drawn, and the box they take.
+ */
+export declare function corners(plot: Box, names: QuadrantLabels, split: {
+  x: number;
+  y: number;
+} | null, type: LabelType): {
+  key: string;
+  lines: string[];
+  x: number;
+  y: number;
+  line: number;
+  box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}[];
+//#endregion