@siyahi/ui 0.1.9-next.1 → 0.1.9-next.12

package/README.md

@@ -67,12 +67,13 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 
 ## What is in it
 
-- **shadcn/ui components** in the `base-luma` style, installed with the shadcn
-  CLI and never edited.
+- **shadcn/ui components** in the `base-nova` style, shadcn's flat and compact
+  one, installed with the shadcn CLI and never edited.
 - **Registry add-ons**, copied once with their origin and licence recorded:
   bar, area and line chart cards from shadcn's chart blocks, a data table on
   TanStack Table, calendar, weekday and status heatmaps, a ranked
-  bar list, the `SectionCards` stat tile and the `sidebar-07` app shell.
+  bar list, a `Sparkline`, the `MetricStrip` row of figures, the
+  `SectionCards` stat tile and the `sidebar-07` app shell.
 - **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
   (TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
   map; hover or tap a tile for its figures) with `TreemapLegend` (its colour
@@ -80,9 +81,13 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   in a tooltip), `ToneProgress` (Progress in a meaning colour), the page parts
   `PageSection`, `PageSubheading`, `DataList` and `InlineCode`, the data table
   parts `DataTableSortHeader` (sorts on one click) and `DataTableRowCount`
-  ("12 of 48"), and `SiyahiProvider`.
-- **Cards and badges as installed**: every `Card`, stat tiles included, keeps
-  luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
+  ("12 of 48"), `DataBar` (a figure in a table cell with a bar giving its size
+  against the column's largest), `PanelGrid` (data blocks side by side, with
+  hairlines between them on a ruled page), and `SiyahiProvider`.
+- **Surfaces**: by default a data block has no box. Every `Card` on a ruled
+  page, chart cards and stat tiles included, loses its fill, corner and ring,
+  and a `PanelGrid` draws hairlines between blocks; see Surfaces below. A
+  category (a sector, a
   broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
   colour is left to the four meaning colours and the charts. On a narrow card
   (header under 24rem, so any phone) a header action such as a toggle drops
@@ -104,8 +109,15 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | Counts or amounts per period, one series or several                     | `BarChartCard`; `stacked` when the series add up to a total         |
 | A running level, such as a portfolio's value against money put in       | `AreaChartCard`                                                     |
 | Series compared point by point, such as a return against an index       | `LineChartCard`                                                     |
-| Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`                                                           |
+| Samples in time with limits and events marked                           | `LineChartCard` with `xDomain`, `xTicks` and `referenceLines`       |
+| Long category names, such as sectors                                    | `BarChartCard` with `horizontal`                                    |
+| A gain above zero and a loss below it                                   | a series with `color` and `negativeColor`                           |
+| Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`; give two lists one `max` to share a scale                |
+| Where a budget sits, a split of a whole, or losses against gains        | `DistributionBar`                                                   |
 | Headline figures with their change                                      | `SectionCards`, with a `Delta` in each badge                        |
+| Many figures of equal weight, each with its change and recent run       | `MetricStrip`                                                       |
+| A run of values beside a figure, in a tile, a strip or a table cell     | `Sparkline`; in a tile, `SectionCards`' `trend`                     |
+| A table column that should read as a bar chart                          | `DataBar` in the column's cell                                      |
 | One instrument's price history                                          | `PriceChart`                                                        |
 | Holdings sized by weight and coloured by change                         | `Treemap`                                                           |
 | Activity by day, by weekday and hour, or a status over time             | `CalendarHeatmap`, `WeekdayHeatmap`, `StatusHeatmap`                |
@@ -117,6 +129,9 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | One part of a long page: rule, eyebrow, heading, lead, action           | `PageSection`, with `PageSubheading` inside                         |
 | Label and value pairs, such as a record's fields                        | `DataList` and `DataListItem`                                       |
 | A command or file to copy, wrapped or scrolling                         | `CodeBlock` with `CodeBlockCopyButton`                              |
+| A labelled copy action, such as "Copy all" for a section                | `CopyButton`                                                        |
+| Data blocks side by side: charts, tables, a strip of figures            | `PanelGrid`                                                         |
+| Boxes back, or no lines at all, for a page or a part of one             | `SiyahiProvider` with `surface="card"` or `surface="open"`          |
 | A command, file or identifier inside prose                              | `InlineCode`                                                        |
 | A signed figure (a gain, a loss, a change)                              | `Delta`                                                             |
 | A time, with the viewer's own clock on hover                            | `LocalTime`                                                         |
@@ -125,7 +140,10 @@ The three chart cards take the rows, the field the x axis reads and the series,
 and own everything else: the card and its header action (a range or mode
 toggle), the axes, the dashed horizontal grid, Geist Mono ticks, a tooltip that
 names the hovered point and gives each series' formatted value, and the legend
-below. A page never puts Recharts axes, grids or tooltips together itself.
+below. Props cover the rest: a footer, a placeholder while data loads,
+reference lines, a numeric x axis, a fixed value axis, axis titles, a second
+line under each tick, a picked category, sideways bars and straight segments.
+A page never puts Recharts axes, grids or tooltips together itself.
 
 ```tsx
 <BarChartCard
@@ -158,6 +176,32 @@ loss, a change) goes through `<Delta>`, which adds ▲ or ▼ and the meaning
 colour. Time zone names come from the runtime's ICU data; a slim Node or
 browser build may print `GMT+5:30` where a full one prints `IST`.
 
+## Surfaces
+
+A data block sits on the page in one of three ways, set by `SiyahiProvider`'s
+`surface`:
+
+- `"ruled"`, the default: no box. Every `Card` loses its fill, corner and ring,
+  and blocks side by side in a `PanelGrid` are parted by hairlines, with a rule
+  above and below the grid. One surface, as on a trading screen.
+- `"open"`: no box and no lines. The card's padding goes too, so a block's
+  content sits level with the page's text; for pages read top to bottom.
+- `"card"`: shadcn's own Nova card, a filled box with a 1px ring.
+
+A component outside any provider is ruled. A nested provider sets the surface
+for one part of a page. A picked `SectionCards` tile keeps its ring on every
+surface.
+
+```tsx
+<SiyahiProvider surface="open">
+  <PageSection title="Why XIRR fell">…</PageSection>
+</SiyahiProvider>
+```
+
+Pages are dense. A `PageSection` sits 24px under its rule with 16px to its
+content, so stack sections 24px apart (`flex flex-col gap-6`) and the rule sits
+midway. Stat tiles are 12px in from each edge with a 24px figure.
+
 ## Dark mode
 
 The colour scheme follows the device (`prefers-color-scheme`). There is no

package/THIRD_PARTY_NOTICES.md

@@ -8,16 +8,17 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 
 ## Copied into `@siyahi/ui`
 
-| What                                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
-| ------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| shadcn/ui core components (installed with `shadcn add`, never edited)                 | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn `tailwind.css` (variants and utilities the components use)                     | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `sidebar-07`                                                             | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `dashboard-01`, `SectionCards` only                                      | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                                                                          | MIT, Copyright (c) 2023 shadcn                                                      |
-| Heatmaps: calendar, weekday by hour, status timeline                                  | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
-| niko-table data table on TanStack Table                                               | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
-| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple` | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
-| dashboardcn ranked list (`BarList`)                                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| What                                                                                                | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
+| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| shadcn/ui core components (installed with `shadcn add`, never edited)                               | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn `tailwind.css` (variants and utilities the components use)                                   | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `sidebar-07`                                                                           | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `dashboard-01`, `SectionCards` only                                                    | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                                                                          | MIT, Copyright (c) 2023 shadcn                                                      |
+| Heatmaps: calendar, weekday by hour, status timeline                                                | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
+| niko-table data table on TanStack Table                                                             | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
+| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple`               | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
+| dashboardcn ranked list (`BarList`), stacked bar (`DistributionBar`), `Sparkline` and `MetricStrip` | `src/components/registry/dashboardcn/*`                  | https://dashboardcn.com/r/bar-list.json, https://dashboardcn.com/r/distribution-bar.json, https://dashboardcn.com/r/sparkline.json, https://dashboardcn.com/r/kpi-row-card.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| MiniDev copy button (`CopyButton`)                                                                  | `src/components/registry/minidev/copy-button.tsx`        | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui)                                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2026 MiniDev                                                     |
 
 ## Runtime dependencies with attribution terms
 

package/dist/components/registry/charts/area-chart-card.d.ts

@@ -1,9 +1,10 @@
-import { SeriesChartProps } from "../../../lib/chart-series.js";
+import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/area-chart-card.d.ts
-export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
+export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
   /** Stack the series into a total instead of overlapping them. */
   stacked?: boolean;
+  curve?: ChartCurve;
 }
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
-export declare function AreaChartCard<T extends object, K extends keyof T>({ stacked, ...props }: AreaChartCardProps<T, K>): import("react").JSX.Element;
+export declare function AreaChartCard<T extends object, K extends keyof T>({ stacked, curve, ...props }: AreaChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/area-chart-card.js

@@ -4,13 +4,13 @@ import { jsx } from "react/jsx-runtime";
 import { Area, AreaChart } from "recharts";
 //#region src/components/registry/charts/area-chart-card.tsx
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
-function AreaChartCard({ stacked = false, ...props }) {
+function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: AreaChart,
 		...props,
 		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Area, {
 			dataKey: key,
-			type: "monotone",
+			type: curve,
 			fill: color,
 			fillOpacity: stacked ? .4 : .2,
 			stroke: color,

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -3,7 +3,13 @@ import { SeriesChartProps } from "../../../lib/chart-series.js";
 export interface BarChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
   /** Stack the series in one bar per point instead of side by side. */
   stacked?: boolean;
+  /** Bars run sideways, categories down the left: for long names, such as sectors. */
+  horizontal?: boolean;
+  /** The picked category's x value: its bars stay solid and the rest fade. */
+  selected?: T[K] | null;
+  /** Called with a clicked category's x value, or null when the picked one is clicked again. */
+  onSelect?: (value: T[K] | null) => void;
 }
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
-export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
+export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, selected, onSelect, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/bar-chart-card.js

@@ -1,24 +1,45 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
+import { ChartFrame, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
-import { Bar, BarChart } from "recharts";
+import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
+const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
-function BarChartCard({ stacked = false, ...props }) {
+function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
 		...props,
-		children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Bar, {
-			dataKey: key,
-			fill: color,
-			stackId: stacked ? "stack" : void 0,
-			radius: !stacked ? 2 : index === props.series.length - 1 ? [
-				2,
-				2,
-				0,
-				0
-			] : 0
-		}, key))
+		yDomain: props.yDomain ?? (props.data.some((row) => props.series.some(({ key }) => Number(row[key]) > 0)) ? void 0 : DOWN_FROM_ZERO),
+		stackOffset: stacked ? "sign" : void 0,
+		children: props.series.map((item, index) => {
+			const { key, label, color, negativeColor } = item;
+			return /* @__PURE__ */ jsx(Bar, {
+				dataKey: key,
+				name: label,
+				fill: seriesFill(item, props.data),
+				stackId: stacked ? "stack" : void 0,
+				radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
+					0,
+					2,
+					2,
+					0
+				] : [
+					2,
+					2,
+					0,
+					0
+				] : 0,
+				className: onSelect ? "cursor-pointer" : void 0,
+				onClick: onSelect && ((bar) => {
+					const value = bar.payload?.[props.xKey];
+					if (value !== void 0) onSelect(value === selected ? null : value);
+				}),
+				children: (negativeColor || selected !== null) && props.data.map((row, i) => /* @__PURE__ */ jsx(Cell, {
+					fill: negativeColor && Number(row[key]) < 0 ? negativeColor : color,
+					fillOpacity: selected === null || row[props.xKey] === selected ? 1 : .35
+				}, i))
+			}, key);
+		})
 	});
 }
 //#endregion

package/dist/components/registry/charts/line-chart-card.d.ts

@@ -1,5 +1,8 @@
-import { SeriesChartProps } from "../../../lib/chart-series.js";
+import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/line-chart-card.d.ts
+export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
+  curve?: ChartCurve;
+}
 /** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
-export declare function LineChartCard<T extends object, K extends keyof T>(props: SeriesChartProps<T, K>): import("react").JSX.Element;
+export declare function LineChartCard<T extends object, K extends keyof T>({ curve, ...props }: LineChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/line-chart-card.js

@@ -4,13 +4,13 @@ import { jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
 /** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
-function LineChartCard(props) {
+function LineChartCard({ curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: LineChart,
 		...props,
 		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Line, {
 			dataKey: key,
-			type: "monotone",
+			type: curve,
 			stroke: color,
 			strokeWidth: 2,
 			dot: false

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -6,10 +6,14 @@ export interface SectionCard {
   value: React$1.ReactNode;
   /** Outline badge, top right; usually a <Delta />. */
   badge?: React$1.ReactNode;
+  /** A small chart under the value, usually a <Sparkline /> of the recent run. */
+  trend?: React$1.ReactNode;
   /** Bold first footer line. */
   headline?: React$1.ReactNode;
   /** Muted second footer line. */
   detail?: React$1.ReactNode;
+  /** In a picker, a tile that cannot be picked, such as one with nothing in it: faded, and its button disabled. */
+  disabled?: boolean;
 }
 export interface SectionCardsProps {
   items: SectionCard[];

package/dist/components/registry/dashboard-01/section-cards.js

@@ -1,7 +1,8 @@
 "use client";
 import { Badge } from "../../ui/badge.js";
-import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
 import { cn } from "../../../lib/utils.js";
+import { useSurface } from "../../siyahi/siyahi-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/dashboard-01/section-cards.tsx
@@ -13,42 +14,49 @@ const COLUMNS = {
 	6: "@3xl/main:grid-cols-3"
 };
 function SectionCards({ items, selected, onSelect }) {
+	const ruled = useSurface() === "ruled";
 	return /* @__PURE__ */ jsx("div", {
-		className: "@container/main",
+		className: cn("@container/main", ruled && "overflow-hidden border-y"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1 gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
-			children: items.map((item) => /* @__PURE__ */ jsxs(Card, {
-				className: cn("@container/card", onSelect && "relative", item.label === selected && "ring-2 ring-primary!"),
-				children: [
-					onSelect && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": item.label,
-						"aria-pressed": item.label === selected,
-						onClick: () => onSelect(item.label),
-						className: "absolute inset-0 z-10 rounded-4xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
-					}),
-					/* @__PURE__ */ jsxs(CardHeader, { children: [
-						/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
-						/* @__PURE__ */ jsx(CardTitle, {
-							className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
-							children: item.value
+			className: cn("grid grid-cols-1", ruled ? "-mt-px -ml-px" : "gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
+			children: items.map((item) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "section-card",
+				className: cn("min-w-0", ruled && "border-t border-l"),
+				children: /* @__PURE__ */ jsxs(Card, {
+					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
+					children: [
+						onSelect && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": item.label,
+							"aria-pressed": item.label === selected,
+							disabled: item.disabled,
+							onClick: () => onSelect(item.label),
+							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
 						}),
-						item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
-							variant: "outline",
-							children: item.badge
-						}) })
-					] }),
-					(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-						className: "flex-col items-start gap-1.5 text-sm",
-						children: [item.headline && /* @__PURE__ */ jsx("div", {
-							className: "line-clamp-1 flex gap-2 font-medium",
-							children: item.headline
-						}), item.detail && /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground",
-							children: item.detail
-						})]
-					})
-				]
+						/* @__PURE__ */ jsxs(CardHeader, { children: [
+							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
+							/* @__PURE__ */ jsx(CardTitle, {
+								className: "text-2xl font-semibold tabular-nums",
+								children: item.value
+							}),
+							item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								children: item.badge
+							}) })
+						] }),
+						item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
+						(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
+							className: "flex-col items-start gap-1 text-sm",
+							children: [item.headline && /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-2 font-medium",
+								children: item.headline
+							}), item.detail && /* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground",
+								children: item.detail
+							})]
+						})
+					]
+				})
 			}, item.label))
 		})
 	});

package/dist/components/registry/dashboardcn/bar-list.d.ts

@@ -19,8 +19,10 @@ export interface BarListProps extends React$1.ComponentProps<"div"> {
   color?: string;
   /** Show each row's share of the total next to its value. */
   showPercentage?: boolean;
+  /** The value a full-width bar stands for. Give two lists the same max to draw them on one scale. Defaults to the largest value. */
+  max?: number;
   onItemClick?: (item: BarListItem) => void;
 }
-declare function BarList({ data, valueFormatter, sortOrder, color, showPercentage, onItemClick, className, ...props }: BarListProps): React$1.JSX.Element;
+declare function BarList({ data, valueFormatter, sortOrder, color, showPercentage, max: scale, onItemClick, className, ...props }: BarListProps): React$1.JSX.Element;
 //#endregion
 export { BarList };

package/dist/components/registry/dashboardcn/bar-list.js

@@ -1,10 +1,10 @@
-import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { pct } from "../../../lib/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/registry/dashboardcn/bar-list.tsx
-function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, onItemClick, className, ...props }) {
+function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, max: scale, onItemClick, className, ...props }) {
 	const locale = useLocale();
 	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
 		notation: "compact",
@@ -15,7 +15,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 		const sorted = [...data].sort((a, b) => a.value - b.value);
 		return sortOrder === "descending" ? sorted.reverse() : sorted;
 	}, [data, sortOrder]);
-	const max = Math.max(...items.map((item) => item.value), 0);
+	const max = scale ?? Math.max(...items.map((item) => item.value), 0);
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "bar-list",

package/dist/components/registry/dashboardcn/distribution-bar.d.ts

@@ -0,0 +1,38 @@
+import { ChartColor } from "../../../lib/chart-series.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/distribution-bar.d.ts
+export interface DistributionSegment {
+  name: string;
+  value: number;
+  /** Defaults to chart-1 through chart-5 in order; var(--muted) for space that is free. */
+  color?: ChartColor | "var(--muted)";
+  /** Stable key when names can repeat. */
+  key?: string;
+}
+export interface DistributionMarker {
+  /** The value the line marks, on the bar's scale. */
+  at: number;
+  label?: string;
+}
+export interface DistributionBarProps extends Omit<React$1.ComponentProps<"div">, "onMouseLeave"> {
+  segments: DistributionSegment[];
+  valueFormatter?: (value: number) => string;
+  showLegend?: boolean;
+  /** Show absolute values in the legend in addition to the share. */
+  showValues?: boolean;
+  /** The value the bar's right end stands for. Defaults to the positive segments' total. */
+  max?: number;
+  /**
+   * The value the bar's left end stands for. Defaults to the negative segments' total, or 0 when there are none.
+   * Above zero, segments (which start at zero) fall off the bar.
+   */
+  min?: number;
+  markers?: DistributionMarker[];
+  /** The key (or name) of the one segment to keep solid; the rest fade. */
+  highlighted?: string | null;
+  /** Called with the segment under the pointer, and null when it leaves the bar. */
+  onHover?: (segment: DistributionSegment | null) => void;
+}
+declare function DistributionBar({ segments, valueFormatter, showLegend, showValues, max, min, markers, highlighted, onHover, className, "aria-label": ariaLabel, ...props }: DistributionBarProps): React$1.JSX.Element;
+//#endregion
+export { DistributionBar };

package/dist/components/registry/dashboardcn/distribution-bar.js

@@ -0,0 +1,118 @@
+import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
+import { pct } from "../../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/registry/dashboardcn/distribution-bar.tsx
+const defaultColors = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)"
+];
+function DistributionBar({ segments, valueFormatter, showLegend = true, showValues = false, max, min, markers = [], highlighted = null, onHover, className, "aria-label": ariaLabel, ...props }) {
+	const locale = useLocale();
+	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value));
+	const total = segments.reduce((sum, segment) => sum + Math.abs(segment.value), 0);
+	const gains = segments.reduce((sum, segment) => sum + Math.max(segment.value, 0), 0);
+	const losses = segments.reduce((sum, segment) => sum + Math.min(segment.value, 0), 0);
+	const bottom = min ?? losses;
+	const top = max ?? gains;
+	const span = top - bottom || 1;
+	const position = (value) => (value - bottom) / span * 100;
+	const shown = markers.filter((marker) => marker.at >= bottom && marker.at <= top).map((marker, index) => ({
+		...marker,
+		key: `${marker.at}:${marker.label ?? ""}:${index}`
+	}));
+	let above = 0;
+	let below = 0;
+	const resolved = segments.map((segment, index) => {
+		const key = segment.key ?? segment.name;
+		const size = Math.abs(segment.value);
+		const start = segment.value < 0 ? below -= size : (above += size) - size;
+		return {
+			...segment,
+			key,
+			color: segment.color ?? defaultColors[index % defaultColors.length],
+			share: total > 0 ? size / total : 0,
+			left: position(start),
+			width: size / span * 100
+		};
+	});
+	const figure = (segment) => max === void 0 ? pct(segment.share, locale) : format(segment.value);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "distribution-bar",
+		className: cn("flex flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				shown.some((m) => m.label) ? /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground relative h-4 font-mono text-xs",
+					children: shown.map((marker) => marker.label ? /* @__PURE__ */ jsx("span", {
+						className: cn("absolute top-0 whitespace-nowrap", position(marker.at) <= 5 ? "translate-x-0" : position(marker.at) >= 95 ? "-translate-x-full" : "-translate-x-1/2"),
+						style: { left: `${position(marker.at)}%` },
+						children: marker.label
+					}, marker.key) : null)
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": ariaLabel ?? resolved.map((segment) => `${segment.name} ${figure(segment)}`).join(", "),
+					className: "bg-muted relative h-2.5 w-full overflow-hidden rounded-full",
+					onMouseLeave: onHover ? () => onHover(null) : void 0,
+					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "distribution-segment",
+						className: "border-card absolute inset-y-0 border-x transition-[width,left,opacity] duration-300",
+						style: {
+							left: `${segment.left}%`,
+							width: `${segment.width}%`,
+							backgroundColor: segment.color,
+							opacity: highlighted === null || highlighted === segment.key ? 1 : .35
+						},
+						onMouseEnter: onHover ? () => onHover(segment) : void 0
+					}, segment.key) : null)
+				}),
+				shown.map((marker) => /* @__PURE__ */ jsx("div", {
+					"data-slot": "distribution-marker",
+					"aria-hidden": "true",
+					className: "bg-foreground absolute bottom-0 h-2.5 w-0.5 -translate-x-1/2",
+					style: { left: `${position(marker.at)}%` }
+				}, marker.key))
+			]
+		}), showLegend ? /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap gap-x-4 gap-y-1.5 text-sm",
+			children: resolved.map((segment) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-2.5 shrink-0 rounded-xs",
+						style: { backgroundColor: segment.color }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: segment.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: figure(segment)
+					}),
+					showValues && max === void 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground tabular-nums",
+						children: [
+							"(",
+							format(segment.value),
+							")"
+						]
+					}) : null
+				]
+			}, segment.key))
+		}) : null]
+	});
+}
+//#endregion
+export { DistributionBar };