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

package/dist/lib/chart-frame.js

@@ -1,17 +1,30 @@
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
+import { cn } from "./utils.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
 //#region src/lib/chart-frame.tsx
+const AXIS_TITLE = "fill-muted-foreground text-xs";
+const TICK = { className: "fill-muted-foreground font-mono" };
+const NO_LINES = [];
+/**
+* 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.
+*/
+function seriesFill(item, data) {
+	const values = data.map((row) => row[item.key]).filter((value) => Number.isFinite(value)).map(Number);
+	return item.negativeColor && values.length > 0 && values.every((value) => value < 0) ? item.negativeColor : item.color;
+}
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 function seriesRow(series, formatValue) {
 	return (value, _name, item) => {
 		const entry = series.find(({ key }) => key === item.dataKey);
+		const color = entry?.negativeColor && Number(value) < 0 ? entry.negativeColor : entry?.color;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "size-2.5 shrink-0 rounded-xs",
-				style: { backgroundColor: entry?.color }
+				style: { backgroundColor: color }
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground",
@@ -24,13 +37,63 @@ function seriesRow(series, formatValue) {
 		] });
 	};
 }
+const GEIST_WIDTH = 6.6;
+const MONO_WIDTH = 7.2;
+/**
+* Room to keep right of the plot when every named tick is drawn: half the last label, which centres on the
+* domain's right end, and at least 24px.
+*/
+function endRoom(xFormatter, xTicks) {
+	const last = xTicks.at(-1);
+	return Math.max(24, Math.ceil((last === void 0 ? 0 : xFormatter(last).length * MONO_WIDTH) / 2) + 4);
+}
+/** Squeezes a line into its column with SVG's own textLength when it would run into the next one. */
+const fitTo = (text, room, charWidth) => room > 0 && text.length * charWidth > room ? {
+	textLength: room,
+	lengthAdjust: "spacingAndGlyphs"
+} : {};
+/**
+* An x tick fitted to its column, drawn whenever a page names its ticks or gives each a second line: Recharts'
+* own ticks would rather drop a label than let it run into the next. With a detail, the second line comes from the
+* tick's row; under a column the lines hang below the axis, and beside a horizontal bar they straddle its middle.
+* A two-line tick is set in Geist, not Mono: a name with a figure under it reads as a label, as in BarList, and
+* sector names in Mono would take most of a phone's width.
+*/
+function fittedTick(data, xKey, xFormatter, detailOf, beside) {
+	const charWidth = detailOf ? GEIST_WIDTH : MONO_WIDTH;
+	return ({ x, y, width, visibleTicksCount, payload }) => {
+		const value = payload?.value;
+		const row = data.find((r) => r[xKey] === value);
+		const name = xFormatter(value);
+		const detail = row && detailOf ? detailOf(row) : null;
+		const room = beside || !visibleTicksCount ? 0 : Number(width) / visibleTicksCount - 6;
+		return /* @__PURE__ */ jsxs("text", {
+			x,
+			y,
+			textAnchor: beside ? "end" : "middle",
+			className: cn("recharts-cartesian-axis-tick-value fill-muted-foreground", !detailOf && "font-mono"),
+			children: [/* @__PURE__ */ jsx("tspan", {
+				x,
+				dy: beside ? -4 : 12,
+				...fitTo(name, room, charWidth),
+				children: name
+			}), detail !== null && /* @__PURE__ */ jsx("tspan", {
+				x,
+				dy: 15,
+				className: "tabular-nums",
+				...fitTo(detail, room, charWidth),
+				children: detail
+			})]
+		});
+	};
+}
 /**
 * The card, axes, grid, tooltip and legend the three chart cards share. Both
 * axes keep Recharts' default ids: marks find their axes by id, and a page
 * 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, title, description, action, data, xKey, series, xFormatter = String, valueFormatter, yTickFormatter, height }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, 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 = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
@@ -38,59 +101,123 @@ function ChartFrame({ chart: Chart, children, title, description, action, data,
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
-	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
-		/* @__PURE__ */ jsx(CardTitle, { children: title }),
-		description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
-		action && /* @__PURE__ */ jsx(CardAction, { children: action })
-	] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ChartContainer, {
-		config,
-		className: "aspect-auto w-full",
-		style: { height },
-		children: /* @__PURE__ */ jsxs(Chart, {
-			data,
-			margin: {
-				left: 0,
-				right: 8
-			},
-			children: [
-				/* @__PURE__ */ jsx(CartesianGrid, {
-					vertical: false,
-					strokeDasharray: "3 3"
-				}),
-				/* @__PURE__ */ jsx(XAxis, {
-					dataKey: xKey,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: (value) => xFormatter(value),
-					tick: { className: "font-mono" }
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					tickLine: false,
-					axisLine: false,
-					width: "auto",
-					tickFormatter: yTickFormatter ?? formatValue,
-					tick: { className: "font-mono" }
-				}),
-				crossesZero && /* @__PURE__ */ jsx(ReferenceLine, {
-					y: 0,
-					stroke: "var(--border)"
-				}),
-				/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-					labelFormatter: (_, payload) => {
-						const row = payload[0]?.payload;
-						return row ? xFormatter(row[xKey]) : null;
-					},
-					formatter: seriesRow(series, formatValue)
-				}) }),
-				children,
-				/* @__PURE__ */ jsx(ChartLegend, {
-					content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
-					itemSorter: null
-				})
-			]
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsxs(CardHeader, { children: [
+			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+			action && /* @__PURE__ */ jsx(CardAction, { children: action })
+		] }),
+		/* @__PURE__ */ jsx(CardContent, { children: placeholder ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "chart-placeholder",
+			className: "flex items-center justify-center",
+			style: { height },
+			children: placeholder
+		}) : /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: "aspect-auto w-full",
+			style: { height },
+			children: /* @__PURE__ */ jsxs(Chart, {
+				data,
+				layout: horizontal ? "vertical" : "horizontal",
+				stackOffset,
+				margin: {
+					left: 0,
+					right: xTicks ? endRoom(xFormatter, xTicks) : 8
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						vertical: horizontal,
+						horizontal: !horizontal,
+						strokeDasharray: "3 3"
+					}),
+					horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						type: "number",
+						hide: true,
+						domain: yDomain,
+						ticks: yTicks
+					}), /* @__PURE__ */ jsx(YAxis, {
+						dataKey: xKey,
+						type: "category",
+						width: "auto",
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: (value) => xFormatter(value),
+						tick: xTickDetail ? fittedTick(data, xKey, xFormatter, xTickDetail, horizontal) : TICK,
+						interval: 0
+					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						dataKey: xKey,
+						type: xDomain ? "number" : "category",
+						domain: xDomain,
+						ticks: xTicks,
+						height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
+						label: xLabel ? {
+							value: xLabel,
+							position: "insideBottom",
+							className: AXIS_TITLE
+						} : void 0,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: (value) => xFormatter(value),
+						tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
+						interval: xTickDetail || xTicks ? 0 : void 0
+					}), /* @__PURE__ */ jsx(YAxis, {
+						tickLine: false,
+						axisLine: false,
+						width: "auto",
+						domain: yDomain,
+						ticks: yTicks,
+						label: yLabel ? {
+							value: yLabel,
+							angle: -90,
+							position: "insideLeft",
+							style: { textAnchor: "middle" },
+							className: AXIS_TITLE
+						} : void 0,
+						tickFormatter: (value) => (yTickFormatter ?? formatValue)(value),
+						tick: TICK
+					})] }),
+					crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
+						x: 0,
+						stroke: "var(--border)"
+					}) : /* @__PURE__ */ jsx(ReferenceLine, {
+						y: 0,
+						stroke: "var(--border)"
+					})),
+					referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
+						...horizontal ? {
+							x: at.y,
+							y: at.x
+						} : at,
+						stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+						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"
+						}
+					}, `${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)
+					}) }),
+					children,
+					/* @__PURE__ */ jsx(ChartLegend, {
+						content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+						itemSorter: null
+					})
+				]
+			})
+		}) }),
+		footer && /* @__PURE__ */ jsx(CardFooter, {
+			className: "flex-col items-start gap-2 text-sm",
+			children: footer
 		})
-	}) })] });
+	] });
 }
 //#endregion
-export { ChartFrame, seriesRow };
+export { ChartFrame, seriesFill, seriesRow };

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

@@ -1,7 +1,10 @@
 import { ReactNode } from "react";
 //#region src/lib/chart-series.d.ts
-/** The colours a series may take: the five chart slots, and muted for an "Other" past five. */
-export type ChartColor = "var(--chart-1)" | "var(--chart-2)" | "var(--chart-3)" | "var(--chart-4)" | "var(--chart-5)" | "var(--muted-foreground)";
+/**
+ * The colours a series may take: the five chart slots, muted for an "Other" past five, and the two meaning
+ * colours for a gain and a loss.
+ */
+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;
 /** One series: the field it plots, its name in the legend and tooltip, and its colour. */
@@ -9,6 +12,8 @@ export interface ChartSeriesItem<T> {
   key: NumericKey<T>;
   label: string;
   color: ChartColor;
+  /** A bar below zero takes this colour instead, such as var(--negative) for a loss beside var(--positive). */
+  negativeColor?: ChartColor;
 }
 /**
  * The series in draw, stack and legend order; give the slots in order from
@@ -16,6 +21,23 @@ export interface ChartSeriesItem<T> {
  * number-like keys such as "2024" first whatever order the page wrote them in.
  */
 export type ChartSeries<T> = readonly ChartSeriesItem<T>[];
+/**
+ * A labelled line across the plot: a level on the value axis (y), such as a limit, or a point on the x axis, such
+ * as an event. A level is dashed, an event solid.
+ */
+export type ChartReferenceLine = ({
+  y: number;
+  x?: never;
+} | {
+  x: number | string;
+  y?: never;
+}) & {
+  label?: string;
+  /** "strong" draws it in the text colour, for the line that matters most; "muted" by default. */
+  emphasis?: "muted" | "strong";
+  /** Where the label sits against the line. Defaults to insideTopLeft. */
+  labelPosition?: "insideTopLeft" | "insideTopRight" | "insideBottomLeft" | "insideBottomRight";
+};
 /** What BarChartCard, AreaChartCard and LineChartCard all take. */
 export interface SeriesChartProps<T extends object, K extends keyof T> {
   title: ReactNode;
@@ -27,14 +49,47 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   /** The field the x axis reads: a month, an hour of day, a price bucket. One row per value; a repeated value is hidden behind the first. */
   xKey: K;
   series: ChartSeries<NoInfer<T>>;
-  /** The x axis ticks and the tooltip's heading. Defaults to the value as text. */
+  /** The x axis ticks, and the tooltip's heading unless xTooltipFormatter is set. Defaults to the value as text. */
   xFormatter?: (value: T[K]) => string;
+  /** The tooltip's heading, when it should say more than a tick: "19:34:13 IST, 10 s average" against "19:34". */
+  xTooltipFormatter?: (value: T[K]) => string;
   /** A series' value in the tooltip, and the y axis unless yTickFormatter is set. Defaults to the locale's numbers. */
   valueFormatter?: (value: number) => string;
   /** The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. */
   yTickFormatter?: (value: number) => string;
+  /**
+   * A fixed range for the value axis, such as [0, 100] for a percentage. By default it fits the data; a bar
+   * chart's always reaches zero.
+   */
+  yDomain?: [number, number];
+  /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */
+  yTicks?: readonly number[];
   /** Height of the plot and legend, in pixels. */
   height: number;
+  /** A second line under each x tick, so a row's figure reads without a hover: "FY24" then "▲₹1.2L". */
+  xTickDetail?: (row: T) => string;
+  /** A title under the x axis, such as "Hour of day (IST)". Not drawn on sideways bars. */
+  xLabel?: string;
+  /** A title beside the value axis, read bottom to top, such as "Orders". Not drawn on sideways bars. */
+  yLabel?: string;
+  /** Limits and events to mark on the plot. A zero line draws by itself when a value goes below zero. */
+  referenceLines?: readonly ChartReferenceLine[];
+  /** Shown in the plot's place, at its height, while the data loads or after it failed to. */
+  placeholder?: ReactNode;
+  /** Lines under the chart, such as a caption or a takeaway, in the card's footer. */
+  footer?: ReactNode;
 }
+/** A numeric x axis, for samples in time or any measure where a mark can sit between two rows. */
+export interface NumericXProps {
+  /** The x axis runs over this range of the xKey field, which must hold numbers; without it the axis is one slot per row. */
+  xDomain?: [number, number];
+  /** Where the x axis puts its ticks, in the xKey field's units; give xDomain with it, so the axis is numeric. */
+  xTicks?: readonly number[];
+}
+/**
+ * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should
+ * be drawn; "monotone", the default, smooths between them without overshooting a point.
+ */
+export type ChartCurve = "monotone" | "linear";
 //#endregion
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.1",
+  "version": "0.1.9-next.10",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/registry.lock.json

@@ -41,6 +41,30 @@
       "copied": "2026-10-20",
       "sha256": "bc19cf1f5e486fa11273e7d7ed620eb7b82ba360f72e5a15e6bf488f992d16ce"
     },
+    {
+      "file": "src/components/registry/dashboardcn/distribution-bar.tsx",
+      "registry": "@dashboardcn/distribution-bar",
+      "origin": "https://dashboardcn.com/r/distribution-bar.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-22",
+      "sha256": "9028368f1363732cef765dabad2eca3ba98b608f1e237123b09df701c41c8b5a"
+    },
+    {
+      "file": "src/components/registry/dashboardcn/kpi-row-card.tsx",
+      "registry": "@dashboardcn/kpi-row-card",
+      "origin": "https://dashboardcn.com/r/kpi-row-card.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-26",
+      "sha256": "b49fa95b3efa19086b3df2e3a18f6a0d5a95204951448c5d93fc41c2bdb6326f"
+    },
+    {
+      "file": "src/components/registry/dashboardcn/sparkline.tsx",
+      "registry": "@dashboardcn/sparkline",
+      "origin": "https://dashboardcn.com/r/sparkline.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-26",
+      "sha256": "54b43e63d866bcdf8071744df08e87f29385ba60d480ab9ee8aa1fac3eb33d5c"
+    },
     {
       "file": "src/components/registry/heatmap/calendar-heatmap.tsx",
       "registry": "@heatmap/calendar-heatmap",
@@ -65,6 +89,14 @@
       "copied": "2026-10-20",
       "sha256": "b7af6139e3764e1479880fb232988e758edb27ce4e4280d9e0349cbdf9b3d30c"
     },
+    {
+      "file": "src/components/registry/minidev/copy-button.tsx",
+      "registry": "@minidev/copy-button",
+      "origin": "https://ui.minidev.pro/r/copy-button.json",
+      "licence": "MIT, Copyright (c) 2026 MiniDev, https://github.com/amankaushik481/minidev-ui/blob/main/LICENSE",
+      "copied": "2026-10-22",
+      "sha256": "67f491ea6c947ebf3bf058423a373347badd49ad07861e022599ebdbb11cab44"
+    },
     {
       "file": "src/components/registry/niko-table/components/data-table-column-actions.tsx",
       "registry": "@niko-table/data-table",

package/report.css

@@ -48,20 +48,20 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    --background: oklch(0.18 0 0);
+    --foreground: oklch(0.922 0 0);
+    --card: oklch(0.18 0 0);
+    --card-foreground: oklch(0.922 0 0);
+    --popover: oklch(0.18 0 0);
+    --popover-foreground: oklch(0.922 0 0);
     --primary: oklch(0.922 0 0);
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
+    --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
+    --accent-foreground: oklch(0.922 0 0);
     --destructive: oklch(0.704 0.191 22.216);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
@@ -78,11 +78,11 @@
     --chart-3: oklch(0.86 0.13 80);
     --chart-4: oklch(0.55 0.25 293);
     --chart-5: oklch(0.84 0.085 12);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar: oklch(0.145 0 0);
+    --sidebar-foreground: oklch(0.922 0 0);
     --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-accent-foreground: oklch(0.922 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
   }

package/styles/siyahi.css

@@ -130,20 +130,30 @@
   --sidebar-ring: oklch(0.708 0 0);
 
   @variant dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    /*
+     * The canvas lifts just off black and text sits a step below white:
+     * near-white on near-black (19:1) blurs for many readers, and with the
+     * cards' grey gone on a ruled page the canvas is what text sits on.
+     * Claude Code (#181818, about #e8e8e8 text) and T3 Code (#0a0a0a, about
+     * #bebebe) both narrow that gap; this sits between them, at 14.9:1.
+     * The card matches the canvas, so the contrast check scores the colour
+     * a ruled chart is drawn on, and the sidebar is a shade darker, as in
+     * the light scheme.
+     */
+    --background: oklch(0.18 0 0);
+    --foreground: oklch(0.922 0 0);
+    --card: oklch(0.18 0 0);
+    --card-foreground: oklch(0.922 0 0);
+    --popover: oklch(0.18 0 0);
+    --popover-foreground: oklch(0.922 0 0);
     --primary: oklch(0.922 0 0);
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
+    --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
+    --accent-foreground: oklch(0.922 0 0);
     --destructive: oklch(0.704 0.191 22.216);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
@@ -161,12 +171,12 @@
     --chart-3: oklch(0.86 0.13 80);
     --chart-4: oklch(0.55 0.25 293);
     --chart-5: oklch(0.84 0.085 12);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar: oklch(0.145 0 0);
+    --sidebar-foreground: oklch(0.922 0 0);
     --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-primary-foreground: oklch(0.985 0 0);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-accent-foreground: oklch(0.922 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
   }
@@ -215,3 +225,35 @@
     }
   }
 }
+
+/*
+ * Surfaces, from SiyahiProvider's surface prop. Ruled, the default, and open
+ * take the box off every core Card: no fill, no corner, no ring, and no
+ * tinted footer band; PanelGrid draws the hairlines between ruled blocks.
+ * Open also drops the card's padding, so a block's content sits level with
+ * the page's text. A card provider gives shadcn's own card back. Each scope
+ * starts at the root, so a Card outside any provider is ruled too, and stops
+ * at a provider that says otherwise. Unlayered, like the rule above, to
+ * outrank the core components' utility classes; a picked SectionCards tile
+ * keeps its ring, which is important.
+ */
+@scope (:root, [data-surface="ruled"], [data-surface="open"]) to ([data-surface="card"]) {
+  [data-slot="card"] {
+    background: none;
+    border-radius: 0;
+    --tw-ring-color: transparent;
+  }
+  [data-slot="card-footer"] {
+    background: none;
+    border-top-width: 0;
+    /* The band's own top padding stacked on the card's gap, and with no band it read as a hole under the figure. */
+    padding-top: 0;
+  }
+}
+
+@scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
+  [data-slot="card"] {
+    --card-spacing: 0px;
+    gap: calc(var(--spacing) * 4);
+  }
+}

package/dist/lib/recharts.d.ts

@@ -1,2 +0,0 @@
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";
-export { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis };

package/dist/lib/recharts.js

@@ -1 +0,0 @@
-export { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";