@siyahi/ui 0.1.9-next.29 → 0.1.9-next.30

package/dist/lib/chart-marks.js

@@ -0,0 +1,216 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { usePlotArea, useXAxisScale, useYAxisScale } from "recharts";
+//#region src/lib/chart-marks.tsx
+/** The colour a series takes when it is one of many drawn quietly behind the few a page names in colour. */
+const QUIET = "var(--muted-foreground)";
+/** Quiet series first, so the named ones draw over them; otherwise the page's order. */
+function drawOrder(series) {
+	return [...series.filter(({ color }) => color === QUIET), ...series.filter(({ color }) => color !== QUIET)];
+}
+const NAME_START = 24;
+const NAME_FONT = "500 11px \"Geist Variable\", \"Geist Fallback\", ui-sans-serif, sans-serif";
+const NAME_WIDTH_GUESS = 7.5;
+const NAME_GAP = 14;
+let measure;
+/** A name's width as the browser draws it, measured on a canvas; a wide guess where there is none. */
+function nameWidth(name) {
+	if (measure === void 0) measure = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	if (!measure) return name.length * NAME_WIDTH_GUESS;
+	measure.font = NAME_FONT;
+	return measure.measureText(name).width;
+}
+/** Room the names need right of the plot: the widest name as drawn, after its leader and colour square. */
+function endLabelRoom(names) {
+	return Math.ceil(NAME_START + Math.max(0, ...names.map(nameWidth)) + 8);
+}
+/**
+* Whether every line ends on the plot's right edge: each series has a value in the last row, there is more than one
+* row, and a numeric x axis runs no further than the data. A line that stops short would need a long leader across
+* the others to reach its name, so the chart keeps its legend then.
+*/
+function linesEndAtEdge(data, xKey, series, xDomain) {
+	const last = data.at(-1);
+	if (!last || data.length < 2) return false;
+	if (xDomain && Number(last[xKey]) < xDomain[1]) return false;
+	return series.every(({ key }) => Number.isFinite(last[key]));
+}
+const END_LABELS_MIN_WIDTH = 400;
+/**
+* Whether the names fit at the line ends: a card at least 400px wide, names taking at most 30% of it, and a plot
+* tall enough to hold them all 14px apart. Otherwise the chart keeps its legend below.
+*/
+function endLabelsFit(names, width, plotHeight) {
+	return width >= END_LABELS_MIN_WIDTH && endLabelRoom(names) <= width * .3 && (names.length - 1) * NAME_GAP + 12 <= plotHeight;
+}
+/**
+* Where each name goes: every line's name at its end's level, spread to 14px apart, top to bottom, pushed back up
+* from the plot's foot and never above its top. A point that maps to no number (a scale being replaced) is left out.
+*/
+function placeEnds(lines, plot) {
+	const gutter = plot.x + plot.width;
+	const ends = [];
+	for (const end of lines) if (Number.isFinite(end.x) && Number.isFinite(end.y)) ends.push({
+		...end,
+		at: end.y,
+		gutter,
+		leader: false
+	});
+	ends.sort((a, b) => a.y - b.y);
+	let previous = -Infinity;
+	for (const end of ends) {
+		end.at = Math.max(end.y, previous + NAME_GAP);
+		previous = end.at;
+	}
+	let limit = plot.y + plot.height;
+	for (const end of ends.toReversed()) {
+		end.at = Math.min(end.at, limit);
+		limit = end.at - NAME_GAP;
+	}
+	for (const end of ends) {
+		end.at = Math.max(end.at, plot.y + 4);
+		end.leader = Math.abs(end.at - end.y) > 3 || end.x < gutter - 1;
+	}
+	return ends;
+}
+/**
+* Each series' name in the gutter right of the plot, in the text colour beside a square of the line's colour, in
+* place of a legend the reader has to match colours against. A leader joins each name to its line's end where the
+* name was moved off the end's level or the line ends short of the plot's edge. A quiet (grey) series' name is
+* muted, with no square: its place beside its line's end says which line it is.
+*/
+function EndLabels({ data, xKey, series }) {
+	const xScale = useXAxisScale();
+	const yScale = useYAxisScale();
+	const plot = usePlotArea();
+	if (!xScale || !yScale || !plot) return null;
+	const lines = [];
+	for (const { key, label, color } of series) {
+		const row = data.findLast((candidate) => Number.isFinite(candidate[key]));
+		const x = row && xScale(row[xKey]);
+		const y = row && yScale(row[key]);
+		if (x !== void 0 && y !== void 0) lines.push({
+			id: String(key),
+			name: label,
+			color,
+			x,
+			y,
+			quiet: color === QUIET
+		});
+	}
+	return /* @__PURE__ */ jsx("g", {
+		"data-slot": "end-labels",
+		children: placeEnds(lines, plot).map(({ gutter, ...end }) => /* @__PURE__ */ jsxs("g", { children: [
+			end.leader && /* @__PURE__ */ jsx("polyline", {
+				points: `${end.x + 4},${end.y} ${Math.max(end.x + 4, gutter) + 6},${end.at}`,
+				fill: "none",
+				stroke: end.color,
+				strokeOpacity: .55
+			}),
+			!end.quiet && /* @__PURE__ */ jsx("rect", {
+				x: gutter + 13,
+				y: end.at - 3.5,
+				width: 7,
+				height: 7,
+				fill: end.color
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: gutter + (end.quiet ? 13 : NAME_START),
+				y: end.at + 4,
+				className: end.quiet ? "fill-muted-foreground text-2xs" : "fill-foreground text-2xs font-medium",
+				children: end.name
+			})
+		] }, end.id))
+	});
+}
+const MARK_LABEL = "stroke-card font-mono text-2xs uppercase";
+const HALO = {
+	paintOrder: "stroke",
+	strokeWidth: 3,
+	strokeLinejoin: "round"
+};
+/**
+* A forecast stretch, from forecastFrom to the last point: a faint hatched band labelled FORECAST behind the lines,
+* and the clip paths that keep each line solid before it and dashed after. And a "today" rule: 1px in the link
+* colour with a small mono capital label.
+*/
+function TimeMarks({ data, xKey, forecastFrom, today, clipId, hatch }) {
+	const xScale = useXAxisScale();
+	const plot = usePlotArea();
+	if (!xScale || !plot) return null;
+	const top = plot.y;
+	const bottom = plot.y + plot.height;
+	const cut = forecastFrom === void 0 ? void 0 : xScale(forecastFrom);
+	const last = data.at(-1);
+	const end = (last && xScale(last[xKey])) ?? plot.x + plot.width;
+	const now = today === void 0 ? void 0 : xScale(today);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-slot": "time-marks",
+		children: [cut !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsx("clipPath", {
+					id: `${clipId}-actual`,
+					children: /* @__PURE__ */ jsx("rect", {
+						x: -1e4,
+						y: -1e4,
+						width: cut + 1e4,
+						height: 2e4
+					})
+				}),
+				/* @__PURE__ */ jsx("clipPath", {
+					id: `${clipId}-forecast`,
+					children: /* @__PURE__ */ jsx("rect", {
+						x: cut,
+						y: -1e4,
+						width: 2e4,
+						height: 2e4
+					})
+				}),
+				/* @__PURE__ */ jsx("pattern", {
+					id: `${clipId}-hatch`,
+					width: 7,
+					height: 7,
+					patternUnits: "userSpaceOnUse",
+					patternTransform: "rotate(45)",
+					children: /* @__PURE__ */ jsx("line", {
+						x1: 0,
+						y1: 0,
+						x2: 0,
+						y2: 7,
+						stroke: "var(--foreground)",
+						strokeOpacity: .16
+					})
+				})
+			] }),
+			hatch && /* @__PURE__ */ jsx("rect", {
+				x: cut,
+				y: top,
+				width: Math.max(0, end - cut),
+				height: plot.height,
+				fill: `url(#${clipId}-hatch)`
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: end - 4,
+				y: top + 12,
+				textAnchor: "end",
+				className: `${MARK_LABEL} fill-muted-foreground`,
+				style: HALO,
+				children: "Forecast"
+			})
+		] }), now !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("line", {
+			x1: now,
+			x2: now,
+			y1: top,
+			y2: bottom,
+			stroke: "var(--link)"
+		}), /* @__PURE__ */ jsx("text", {
+			x: now - 5,
+			y: top + 12,
+			textAnchor: "end",
+			className: `${MARK_LABEL} fill-link`,
+			style: HALO,
+			children: "Today"
+		})] })]
+	});
+}
+//#endregion
+export { EndLabels, QUIET, TimeMarks, drawOrder, endLabelRoom, endLabelsFit, linesEndAtEdge, placeEnds };

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

@@ -84,6 +84,21 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   placeholder?: ReactNode;
   /** Lines under the chart, such as a caption or a takeaway, in the card's footer. */
   footer?: ReactNode;
+  /**
+   * Marks the data as old, with since when, such as "3 Nov": the chart greys out and a small "Stale · 3 Nov" note
+   * sits under the title. The page decides; nothing is inferred from dates.
+   */
+  stale?: ReactNode;
+}
+/** What a chart of lines takes, LineChartCard and AreaChartCard: a forecast stretch and today. */
+export interface LineMarksProps<T extends object, K extends keyof T> {
+  /**
+   * The x value from which the data is a forecast, such as the last month-end: each line goes dashed from it, a faint
+   * hatched band labelled FORECAST covers the stretch, and the end dots are hollow.
+   */
+  forecastFrom?: NoInfer<T[K]>;
+  /** The x value of today: a 1px rule in the link colour with a small TODAY label. */
+  today?: NoInfer<T[K]>;
 }
 /** A numeric x axis, for samples in time or any measure where a mark can sit between two rows. */
 export interface NumericXProps {

package/package.json

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

package/report.css

@@ -23,7 +23,7 @@
   --destructive: oklch(0.49 0.19 27.325);
   --border: oklch(0.145 0 0 / 18%);
   --input: oklch(0.64 0 0);
-  --ring: oklch(0.62 0.16 275);
+  --ring: oklch(0.145 0 0);
   --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
   --negative: oklch(0.577 0.235 27.325);
@@ -37,6 +37,7 @@
   --heat-5: 60%;
   --wash: 7%;
   --wash-edge: 45%;
+  --field-wash: 8%;
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
@@ -50,7 +51,7 @@
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.45 0.2 275);
   --sidebar-border: oklch(0.145 0 0 / 18%);
-  --sidebar-ring: oklch(0.62 0.16 275);
+  --sidebar-ring: oklch(0.145 0 0);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -72,7 +73,7 @@
     --destructive: oklch(0.8 0.1 22.216);
     --border: oklch(1 0 0 / 20%);
     --input: oklch(0.62 0 0);
-    --ring: oklch(0.6 0.14 275);
+    --ring: oklch(0.922 0 0);
     --positive: oklch(0.69 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
     --negative: oklch(0.704 0.187 22.216);
@@ -85,6 +86,7 @@
     --heat-4: 51.25%;
     --wash: 12%;
     --wash-edge: 55%;
+    --field-wash: 12%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -98,7 +100,7 @@
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.8 0.1 275);
     --sidebar-border: oklch(1 0 0 / 20%);
-    --sidebar-ring: oklch(0.6 0.14 275);
+    --sidebar-ring: oklch(0.922 0 0);
   }
 }
 

package/styles/siyahi.css

@@ -1,9 +1,9 @@
 /*
  * Siyahi theme: the only file in the package that holds colour values.
  * shadcn/ui `neutral` greys for both schemes, with ink indigo (hue 275)
- * placed, not spread: links, focus rings, the selected sidebar item's text
- * and the first chart series. Buttons, badges and toggles stay monochrome,
- * where black and white read strongest. Plus three meaning
+ * placed, not spread: links, the selected sidebar item's text and the first
+ * chart series. Buttons, badges, toggles and focus stay monochrome, where
+ * black and white read strongest. Plus three meaning
  * colours and a five-hue chart palette. `packages/tools/contrast.mjs` checks every value
  * here in the build; when a check fails, change the value, never the bar.
  */
@@ -113,7 +113,8 @@
   --border: oklch(0.145 0 0 / 18%);
   /* The edge of a field (input, textarea, select, input group) at 3:1: --border stays faint for dividers. */
   --input: oklch(0.64 0 0);
-  --ring: oklch(0.62 0.16 275);
+  /* Focus is the text colour, as black reads strongest: a field's edge thickens in it, any other control takes a halo. */
+  --ring: oklch(0.145 0 0);
   /* Tailwind green-700, red-600, amber-700, with their chroma lowered to the sRGB edge. */
   --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
@@ -137,6 +138,8 @@
    */
   --wash: 7%;
   --wash-edge: 45%;
+  /* An invalid field's wash: this share of --destructive over the card. */
+  --field-wash: 8%;
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
@@ -160,7 +163,7 @@
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.45 0.2 275);
   --sidebar-border: oklch(0.145 0 0 / 18%);
-  --sidebar-ring: oklch(0.62 0.16 275);
+  --sidebar-ring: oklch(0.145 0 0);
 
   @variant dark {
     /*
@@ -191,7 +194,7 @@
     --destructive: oklch(0.8 0.1 22.216);
     --border: oklch(1 0 0 / 20%);
     --input: oklch(0.62 0 0);
-    --ring: oklch(0.6 0.14 275);
+    --ring: oklch(0.922 0 0);
     /*
      * Green toned down from Tailwind green-400, below red-400's lightness so a
      * treemap's deepest green tile keeps its light label at 4.5:1; amber-400.
@@ -216,6 +219,7 @@
      */
     --wash: 12%;
     --wash-edge: 55%;
+    --field-wash: 12%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -229,7 +233,7 @@
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.8 0.1 275);
     --sidebar-border: oklch(1 0 0 / 20%);
-    --sidebar-ring: oklch(0.6 0.14 275);
+    --sidebar-ring: oklch(0.922 0 0);
   }
 }
 
@@ -295,6 +299,59 @@
   }
 }
 
+/*
+ * A component that lifts a part of itself with a z-index is a stacking context
+ * of its own: SectionCards' picker button, an avatar's badge, a calendar's
+ * days, a focused toggle, a code block's buttons, a price chart's layers. The
+ * lifted part then ranks only against the rest of its component, and can never
+ * sit over, or take a tap from, a page's sticky header or section strip (also
+ * z-10, where the later element in the page won the tie). In a group, the
+ * group is the context, so a badge still sits over the next, overlapping
+ * avatar. The data table's scroll container isolates itself.
+ */
+:is(
+  [data-slot="card"],
+  [data-slot="avatar-group"],
+  [data-slot="avatar"]:not([data-slot="avatar-group"] > *),
+  [data-slot="calendar"],
+  [data-slot="toggle-group"],
+  [data-slot="code-block"],
+  [data-slot="price-chart"]
+) {
+  isolation: isolate;
+}
+
+/*
+ * A copy button sits in a row above the code, never over it. Core floats a
+ * CodeBlockActions written straight in the block over the code's top right
+ * (z-10, shown on hover), where it covers the end of a line and painted over
+ * the page's sticky section strip; here it takes a row of its own, as in a
+ * CodeBlockHeader, always shown, with the header's plain button.
+ */
+[data-slot="code-block"] > [data-slot="code-block-actions"] {
+  position: static;
+  align-self: flex-end;
+  margin: 0.5rem 0.5rem 0;
+  opacity: 1;
+}
+/*
+ * Core's floating fill and faint resting ring go. Its fill outranks the ghost
+ * button's own hover fill, so that is set again here, as a header's button
+ * shows it; the focus ring is left alone.
+ */
+[data-slot="code-block"] > [data-slot="code-block-actions"] > button {
+  background-color: transparent;
+  &:hover {
+    background-color: var(--muted);
+    @variant dark {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+  &:not(:focus-visible) {
+    --tw-ring-shadow: 0 0 #0000;
+  }
+}
+
 /*
  * --input is the edge of a field, where the reader types or picks. A button,
  * a toggle and a code block are framed by their label or their content, so
@@ -321,17 +378,70 @@
 }
 
 /*
- * Focus is opaque wherever the ring is the only sign of it: stock draws the
- * ring at half strength (under 2:1 on the canvas) and relies on an opaque
- * border these controls do not have. The slider's thumb is a div around a
- * hidden range input, so it shows the input's focus.
+ * Focus is drawn inside the control, never outside it, so no neighbour and no
+ * box that clips can cover it: a 2px ring in the text colour (--ring) on the
+ * control's edge, and a 2px ring of the page colour just inside that, so the
+ * pair reads on any fill, black, white or hovered, and the outer ring meets
+ * the page around the control at the text's contrast. A field shows focus as
+ * its own edge, 2px in the text colour; an input group and the command search
+ * show it round the whole group. A chart mark is drawn in SVG, where these
+ * rings do not paint: it takes a dashed stroke in the text colour, apart from a
+ * picked mark's solid one. Menu items and options show focus as their
+ * highlight, and popups as themselves, so they take none.
  */
-:is([data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="scroll-area-viewport"]):focus-visible,
-[class~="group/button"][data-day]:focus-visible {
-  --tw-ring-color: var(--ring);
-}
+:focus-visible:not(
+  svg,
+  svg *,
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="option"],
+  [role="dialog"],
+  [role="alertdialog"],
+  [role="menu"],
+  [role="listbox"],
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="input-group-control"],
+  [data-slot="command-input"]
+),
 [data-slot="slider-thumb"]:has(input:focus-visible) {
-  box-shadow: 0 0 0 3px var(--ring);
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px var(--ring),
+    inset 0 0 0 4px var(--background);
+}
+:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"]):focus-visible,
+[data-slot="input-group"]:has(:is([data-slot="input-group-control"], [data-slot="command-input"]):focus-visible) {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: inset 0 0 0 1px var(--ring);
+}
+:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"])[aria-invalid="true"]:focus-visible,
+[data-slot="input-group"]:has([data-slot="input-group-control"][aria-invalid="true"]:focus-visible) {
+  border-color: var(--destructive);
+  box-shadow: inset 0 0 0 1px var(--destructive);
+}
+[class~="group/button"][class~="text-destructive"]:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--destructive),
+    inset 0 0 0 4px var(--background);
+}
+/* A code block shows its scrolling content's focus itself; its own frame keeps no halo. */
+[data-slot="code-block"]:has(> [data-slot="code-block-content"]:focus-visible) {
+  --tw-ring-shadow: 0 0 #0000;
+}
+svg :is(rect, circle, path)[tabindex]:focus-visible,
+[data-slot="treemap-tile"]:focus-visible > rect:first-child {
+  outline: none;
+  stroke: var(--ring);
+  stroke-width: 2px;
+  stroke-dasharray: 3 2;
+}
+/* A treemap tile clips at its own edge, so half its stroke shows: twice the width keeps 2px. */
+[data-slot="treemap-tile"]:focus-visible > rect:first-child {
+  stroke-width: 4px;
 }
 
 /*
@@ -349,6 +459,22 @@
 [data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
   border-color: var(--destructive);
 }
+/* An invalid field also takes a faint wash of the red, so it reads as the one to fix before its message is read. */
+:is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"])[aria-invalid="true"],
+[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+  background-color: color-mix(in oklab, var(--destructive) var(--field-wash), var(--card));
+}
+
+/*
+ * A field's label sits above it in small monospaced capitals, muted, as the
+ * labels over figures do: FieldLabel in a Field (directly or in its
+ * FieldContent), the home a page gets it from. A label for a checkbox, a
+ * switch or a radio reads as a sentence and keeps the sans face, whatever the
+ * Field's orientation.
+ */
+[data-slot="field"]:not(:has([role="checkbox"], [role="switch"], [role="radio"])) [data-slot="field-label"] {
+  @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
+}
 
 /* Progress is a bar, square as every bar is; stock draws it as a pill. */
 [data-slot="progress-track"] {
@@ -391,6 +517,36 @@
     text-transform: inherit;
   }
 }
+/*
+ * Tables are dense, as a ledger is: compact rows, a rule in the text colour
+ * under the column heads, the first column (what each row is) in medium
+ * weight, and figures in the mono face, a size down so a column of them takes
+ * no more room than the sans did. A figure is a cell marked data-numeric (the
+ * data table's number columns, or a plain TableCell the page marks), which
+ * also right-aligns it, and any Delta in a cell. Alignment alone says nothing:
+ * a right-aligned word stays in the sans. Row hairlines stay; no stripes, no
+ * column rules.
+ */
+[data-slot="table-head"] {
+  height: 1.75rem;
+}
+[data-slot="table-cell"] {
+  padding-block: 0.2rem;
+}
+[data-slot="table-header"] [data-slot="table-row"] {
+  border-bottom-color: var(--foreground);
+}
+/* A data table's sticky header draws its rule as a line of its own, which stays when the rows scroll under it. */
+[data-slot="table-header"]::after {
+  background-color: var(--foreground);
+}
+[data-slot="table-body"] [data-slot="table-cell"]:first-child {
+  font-weight: 500;
+}
+:is([data-slot="table-cell"][data-numeric], [data-slot="table-cell"] [data-slot="delta"]) {
+  @apply font-mono;
+  font-size: 0.8125rem;
+}
 [data-slot="table-footer"] {
   background: none;
   border-top: 1px solid var(--foreground);
@@ -461,13 +617,99 @@
 }
 
 /*
- * Chart gridlines take the full border colour: stock shadcn draws them at half
- * of it, which all but vanishes on a dark card (5% white).
+ * A series in a forecast is drawn twice (LineChartCard, AreaChartCard): solid
+ * up to forecastFrom and dashed after it, each copy clipped to its side by the
+ * clip paths lib/chart-marks draws. The chart sets the two clip paths' urls.
+ */
+[data-slot="chart"] .chart-actual {
+  clip-path: var(--chart-actual);
+}
+[data-slot="chart"] .chart-forecast {
+  clip-path: var(--chart-forecast);
+}
+
+/*
+ * Pen-stroke motion: a chart's lines draw in left to right over 1.3s, and a
+ * stack's fills are revealed with them (Recharts' own animation, which reduced
+ * motion turns off). Then the names at the line ends fade in; a line's end
+ * dots appear once it has drawn and fade in then; bars, with no line to wait
+ * for, fade in at once rather than grow. The names are Siyahi's own element,
+ * kept across data updates, so they fade in once. Reduced motion shows them
+ * all at once.
+ */
+@keyframes chart-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+[data-slot="chart"] :is(.recharts-bar-rectangles, .recharts-line-dots, .recharts-area-dots) {
+  animation: chart-fade-in 0.6s ease-out backwards;
+}
+[data-slot="chart"] [data-slot="end-labels"] {
+  animation: chart-fade-in 0.6s ease-out 1.3s backwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="chart"]
+    :is(.recharts-bar-rectangles, .recharts-line-dots, .recharts-area-dots, [data-slot="end-labels"]) {
+    animation: none;
+  }
+}
+
+/*
+ * A block the page marks stale (stale on a chart card or a SectionCards tile)
+ * loses its colour: its chart, sparkline and badge turn grey, and a tile's
+ * figure and badge turn muted. The chart and sparkline also draw at 65%, so a
+ * dark slot's line does not read heavier than a fresh one: a stale block is
+ * meant to be harder to read, so its marks are exempt from the 3:1 mark bar.
+ * The small "Stale · 3 Nov" note under the title and the figure keep their
+ * text contrast.
+ */
+[data-slot="card"][data-stale] :is([data-slot="chart"], [data-slot="sparkline"], [data-slot="badge"]) {
+  filter: grayscale(1);
+}
+[data-slot="card"][data-stale] :is([data-slot="chart"], [data-slot="sparkline"]) {
+  opacity: 0.65;
+}
+[data-slot="section-card"] [data-slot="card"][data-stale] :is([data-slot="card-title"], [data-slot="badge"]) {
+  color: var(--muted-foreground);
+}
+
+/*
+ * Chart gridlines take the full border colour, solid: stock shadcn draws them
+ * dashed at half of it, which all but vanishes on a dark card (5% white).
  */
 [data-slot="chart"] .recharts-cartesian-grid line {
   stroke: var(--border);
 }
 
+/*
+ * The sidebar is parted from the page by a hairline on its page-side edge,
+ * its group labels are small monospaced capitals, as every label over content
+ * is, and its rows are compact. Fill, icons and the current-page mark stay as
+ * shadcn draws them.
+ */
+/* shadcn edges a collapsible sidebar on its page side already; a non-collapsible one, set in the page's flow, has none. */
+div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
+  border-inline-end: 1px solid var(--sidebar-border);
+}
+[data-slot="sidebar-group-label"] {
+  @apply font-mono text-2xs tracking-wider uppercase;
+}
+[data-slot="sidebar-menu"] {
+  gap: 0;
+}
+/* A row that opens a group renders as its collapsible trigger, which takes that slot, so rows are found by data-sidebar. */
+[data-sidebar="menu-button"]:not([data-size="lg"]) {
+  height: 1.75rem;
+}
+[data-slot="sidebar-menu-sub"] {
+  gap: 0;
+  padding-block: 0.125rem;
+}
+[data-sidebar="menu-sub-button"] {
+  height: 1.5rem;
+}
+
 /*
  * The selected sub-page marks its stretch of the sidebar's rail in the accent,
  * so the current place reads at a glance in a long list, as a docs index does.