@siyahi/ui 0.1.9-next.33 → 0.1.9-next.34

package/DESIGN.md

@@ -24,7 +24,9 @@ a meaning:
   inside a 1px border of the same colour all round. Large marks follow the same
   rule: every bar is a tint inside a 1px full-colour edge, not a solid slab.
   A bar is read by its edge, which reaches 3:1 against the card; the tint is a
-  fill carried by that edge.
+  fill carried by that edge: half its colour (`--bar-tint`, 50%), strong
+  enough that a thin stacked segment, mostly edge, still shows its colour
+  against the next, and a pale slot's bar does not read as the card.
 - **Never a stripe down one side.** Do not mark a notice, card, row or quote
   with a left (or any single-side) coloured border; tint the box or add an
   icon. 1px neutral dividers between columns are separators, not accents, and
@@ -83,10 +85,15 @@ mono face and the link colour, so the text can point to one.
 ## Shape
 
 - **Square corners everywhere**: panels, cards, buttons, fields, badges,
-  toggles, menus, and bars and tracks (data bars, progress) alike (`--radius`
-  is 0). Only a dot, an avatar, a slider, a spinner or a scrollbar is round;
-  the stock chart tooltip's colour chips keep shadcn's 2px. Never add a
-  `rounded-*` class to a box.
+  toggles, menus, bars and tracks (data bars, progress, a slider's track and
+  thumb, a scrollbar's thumb), heatmap cells, treemap tiles and the colour
+  chips of charts and legends alike (`--radius` is 0). Only what is round by
+  nature stays round: an avatar, a status dot, a line's end dot, a spinner,
+  and a signed calendar heatmap's loss day, whose shape carries its sign.
+  Never add a `rounded-*` class to a box.
+- **Floating surfaces lie flat.** A menu, a select's list, a popover, a
+  dialog, a sheet and a chart's tooltip take no drop shadow and the card's
+  hairline for their edge, so they read as a sheet of the page.
 - **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
   borders, one control; the pressed item fills with the foreground.
 - **A code block's copy button sits in a header row** (`CodeBlockHeader`),
@@ -97,7 +104,7 @@ mono face and the link colour, so the text can point to one.
 
 ## Page header
 
-An app page opens on its masthead, `PageHero`: a small mark and eyebrow in the
+An app page opens on its masthead, `PageHeader`: a small mark and eyebrow in the
 mono face and link colour, the title, one muted line saying what the page is,
 the actions at the right, and a hairline under it. One per page; no hero card.
 
@@ -186,7 +193,8 @@ from the catalogue.
 
 - **Labels are small monospaced capitals**: a stat tile's label and footer
   lines, a `MetricStrip` label, a table's column heads, a sidebar group's
-  label, and a form field's label (muted, above the field). The components and
+  label, a group's label in a menu, a select's list or the command palette,
+  and a form field's label (muted, above the field). The components and
   the theme set them; never set a label in this style by hand elsewhere, and
   never set a figure or a title in it.
 - **A total row reads as a ledger's**: in `TableFooter`, one rule above it and
@@ -211,6 +219,11 @@ from the catalogue.
   a stack's grey bands read in the legend's order, bottom to top.
 - **No fill under overlapping areas**: from three series on, fills bury each
   other. A stack fills each band with a flat tint, never a gradient.
+- **The value axis just covers the data.** Unless the page fixes it, it ends
+  on the round tick just past what is drawn (a 46,800 peak at 50,000, by
+  10,000s), a stack's totals for a stack. Bars and stacks reach zero, since
+  their length is the value; lines and overlapping areas need not, so a
+  revenue line from ₹38L to ₹45L fills the plot rather than its top fifth.
 - **Forecast and today.** `forecastFrom` dashes every line from that point,
   hatches the stretch faintly behind lines on card-coloured halos, labels it
   FORECAST and hollows the end dots (a stack keeps solid edges and no hatching:

package/agents/examples/chart-panels-three.tsx

@@ -0,0 +1,51 @@
+import { AreaChartCard, BarChartCard, LineChartCard, PanelGrid, useFormat } from "@siyahi/ui";
+
+// One fund over six months: its month-end growth, its value and what was added each month.
+const months = [
+  { month: "May", growth: 0, value: 410000, added: 20000 },
+  { month: "Jun", growth: 0.025, value: 432000, added: 15000 },
+  { month: "Jul", growth: 0.061, value: 455000, added: 10000 },
+  { month: "Aug", growth: 0.047, value: 461000, added: 25000 },
+  { month: "Sep", growth: 0.11, value: 498000, added: 15000 },
+  { month: "Oct", growth: 0.156, value: 527000, added: 20000 },
+];
+
+// Three short panels in a reading column about as wide as an article (max-w-4xl, 56rem): three across from 42rem.
+export default function ChartPanelsThreeExample() {
+  const { pct, money, moneyCompact } = useFormat();
+  return (
+    <div className="max-w-4xl">
+      <PanelGrid columns={3}>
+        <LineChartCard
+          title="Growth"
+          description="Since May, month-end"
+          data={months}
+          xKey="month"
+          series={[{ key: "growth", label: "Growth", color: "var(--chart-1)" }]}
+          valueFormatter={pct}
+          height={160}
+        />
+        <AreaChartCard
+          title="Value"
+          description="Month-end, ₹"
+          data={months}
+          xKey="month"
+          series={[{ key: "value", label: "Value", color: "var(--chart-1)" }]}
+          valueFormatter={money}
+          yTickFormatter={moneyCompact}
+          height={160}
+        />
+        <BarChartCard
+          title="Added"
+          description="Each month, ₹"
+          data={months}
+          xKey="month"
+          series={[{ key: "added", label: "Added", color: "var(--chart-1)" }]}
+          valueFormatter={money}
+          yTickFormatter={moneyCompact}
+          height={160}
+        />
+      </PanelGrid>
+    </div>
+  );
+}

package/agents/examples/context-menu.tsx

@@ -1,16 +1,26 @@
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@siyahi/ui";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuTrigger,
+} from "@siyahi/ui";
 
 export default function ContextMenuExample() {
   return (
     <ContextMenu>
       <ContextMenuTrigger className="w-full">
-        <div className="flex h-24 items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+        <div className="flex h-24 items-center justify-center border text-muted-foreground">
           Right-click or long-press here
         </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem>Copy order number</ContextMenuItem>
-        <ContextMenuItem>Open order</ContextMenuItem>
+        <ContextMenuGroup>
+          <ContextMenuLabel>Order</ContextMenuLabel>
+          <ContextMenuItem>Copy order number</ContextMenuItem>
+          <ContextMenuItem>Open order</ContextMenuItem>
+        </ContextMenuGroup>
       </ContextMenuContent>
     </ContextMenu>
   );

package/agents/examples/overview-dashboard.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
   Delta,
   Input,
-  PageHero,
+  PageHeader,
   PanelGrid,
   StatusBadge,
   Table,
@@ -126,7 +126,7 @@ export default function OverviewDashboard() {
   const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
   return (
     <div className="flex flex-col gap-6">
-      <PageHero
+      <PageHeader
         mark={<InkDrop />}
         eyebrow="The Book"
         title="Holdings"

package/agents/examples/{page-hero.tsx → page-header.tsx}

@@ -1,7 +1,7 @@
-import { Button, PageHero } from "@siyahi/ui";
+import { Button, PageHeader } from "@siyahi/ui";
 import { ArrowRightIcon } from "lucide-react";
 
-// The catalogue's own ink drop, painted with currentColor so the hero tints it.
+// The catalogue's own ink drop, painted with currentColor so the header tints it.
 function InkDrop() {
   return (
     <svg viewBox="0 0 16 16">
@@ -14,9 +14,9 @@ function InkDrop() {
   );
 }
 
-export default function PageHeroExample() {
+export default function PageHeaderExample() {
   return (
-    <PageHero
+    <PageHeader
       eyebrow="@siyahi/ui"
       title="Siyahi"
       lead="Ink for numbers. A design system for pages people read figures from: dashboards, ledgers, reports."

package/agents/examples/select.tsx

@@ -1,4 +1,4 @@
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@siyahi/ui";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@siyahi/ui";
 
 const stores = [
   { label: "All stores", value: "all" },
@@ -15,6 +15,7 @@ export default function SelectExample() {
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
+          <SelectLabel>Sales channel</SelectLabel>
           {stores.map((store) => (
             <SelectItem key={store.value} value={store.value}>
               {store.label}

package/agents/manifest.json

@@ -671,6 +671,16 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/chart-panels-three.tsx",
+      "components": [
+        "AreaChartCard",
+        "BarChartCard",
+        "LineChartCard",
+        "PanelGrid",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-panels.tsx",
       "components": [
@@ -717,7 +727,9 @@
       "components": [
         "ContextMenu",
         "ContextMenuContent",
+        "ContextMenuGroup",
         "ContextMenuItem",
+        "ContextMenuLabel",
         "ContextMenuTrigger"
       ]
     },
@@ -1038,7 +1050,7 @@
         "CardTitle",
         "Delta",
         "Input",
-        "PageHero",
+        "PageHeader",
         "PanelGrid",
         "StatusBadge",
         "Table",
@@ -1054,10 +1066,10 @@
       ]
     },
     {
-      "file": "agents/examples/page-hero.tsx",
+      "file": "agents/examples/page-header.tsx",
       "components": [
         "Button",
-        "PageHero"
+        "PageHeader"
       ]
     },
     {
@@ -1208,6 +1220,7 @@
         "SelectContent",
         "SelectGroup",
         "SelectItem",
+        "SelectLabel",
         "SelectTrigger",
         "SelectValue"
       ]

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

@@ -18,6 +18,7 @@ function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		logBlocked: stacked ? "Log cannot show stacked areas" : void 0,
+		stackOffset: stacked ? "none" : void 0,
 		endLabels: !stacked,
 		forecastHatch: !stacked,
 		curve,

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

@@ -3,13 +3,11 @@ import { ChartFrame, barFill, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 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, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
 		...props,
-		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,
 		onClick: onSelect ? ({ activeTooltipIndex, isTooltipActive }) => {
 			if (!isTooltipActive || activeTooltipIndex == null) return;

package/dist/components/registry/heatmap/calendar-heatmap.js

@@ -226,7 +226,7 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels(), yearTicks = f
 * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
 * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
 */
-const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, signed = false, range, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
+const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 0, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, signed = false, range, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
 	const [rootRef, rootWidth] = useElementWidth();
 	const dataWithLevels = useMemo(() => {

package/dist/components/registry/heatmap/status-heatmap.js

@@ -109,7 +109,7 @@ const useStatusHeatmap = () => {
 * @param blockAspectRatio - Width/height ratio of blocks. Default: bars share the full width
 * @param colors - Custom colors for critical, degraded, and healthy states
 */
-const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
+const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 0, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
 	0,
 	1,
 	2,

package/dist/components/registry/heatmap/weekday-heatmap.js

@@ -89,7 +89,7 @@ const useWeekdayHeatmap = () => {
 * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
 * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
 */
-const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
+const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 0, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
 	const [rootRef, rootWidth] = useElementWidth();
 	const weekdays = useMemo(() => displayedWeekdays ?? Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7), [displayedWeekdays, weekStart]);

package/dist/components/registry/niko-table/core/data-table-structure.js

@@ -19,6 +19,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { flexRender } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/core/data-table-structure.tsx
+const ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
 const DataTableHeader = React.memo(function DataTableHeader({ className, sticky = true }) {
 	const { table, headerMinWidths, setColumnResizePreview, isCompact } = useDataTable();
 	const resizing = table?.options.enableColumnResizing ?? false;
@@ -39,8 +43,10 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 				}),
 				...getCommonPinningStyles(header.column, true, !isCompact)
 			};
+			const sorted = !header.isPlaceholder && header.column.getSortIndex() === 0 && header.column.getIsSorted();
 			return /* @__PURE__ */ jsxs(TableHead, {
 				"data-col-id": header.column.id,
+				"aria-sort": sorted ? ARIA_SORT[sorted] : void 0,
 				"data-numeric": header.column.columnDef.meta?.variant === "number" || void 0,
 				style: headerStyle,
 				className: cn(!isCompact && header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),

package/dist/components/registry/niko-table/core/data-table.js

@@ -117,7 +117,7 @@ function DataTable({ children, className, height, maxHeight, "aria-label": label
 		"aria-label": labelledBy ? void 0 : label,
 		"aria-labelledby": labelledBy,
 		tabIndex: 0,
-		className: cn("relative isolate w-full overflow-auto rounded-lg border", "[&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40", "hover:[&::-webkit-scrollbar-thumb]:bg-border", "[&::-webkit-scrollbar-thumb:hover]:bg-border/80!", "scrollbar-thin scrollbar-thumb-border/40 scrollbar-track-transparent", "hover:scrollbar-thumb-border", parsed.safeClassName),
+		className: cn("relative isolate w-full overflow-auto rounded-lg border", "[&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-border/40", "hover:[&::-webkit-scrollbar-thumb]:bg-border", "[&::-webkit-scrollbar-thumb:hover]:bg-border/80!", "scrollbar-thin scrollbar-thumb-border/40 scrollbar-track-transparent", "hover:scrollbar-thumb-border", parsed.safeClassName),
 		style: {
 			height: finalHeight,
 			maxHeight: finalMaxHeight

package/dist/components/registry/niko-table/filters/table-column-sort.js

@@ -82,7 +82,7 @@ function TableColumnSortOptions({ column, table: propTable, variant: propVariant
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("span", { children: "Column Sort" }), showSortBadge && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					render: /* @__PURE__ */ jsx("span", { className: "flex size-4 cursor-help items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground" }),
+					render: /* @__PURE__ */ jsx("span", { className: "flex size-4 cursor-help items-center justify-center bg-primary text-[10px] font-medium text-primary-foreground" }),
 					children: sortIndex + 1
 				}), /* @__PURE__ */ jsx(TooltipContent, {
 					side: "right",
@@ -159,7 +159,7 @@ function TableColumnSortMenu({ column, table: propTable, variant: propVariant, c
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative flex items-center justify-center",
 			children: [/* @__PURE__ */ jsx(SortIcon, { className: "size-4" }), showSortBadge && /* @__PURE__ */ jsx("span", {
-				className: "absolute -top-1 -right-2 flex size-3 items-center justify-center rounded-full bg-primary text-[9px] text-primary-foreground",
+				className: "absolute -top-1 -right-2 flex size-3 items-center justify-center bg-primary text-[9px] text-primary-foreground",
 				children: sortIndex + 1
 			})]
 		}), /* @__PURE__ */ jsx("span", {

package/dist/components/registry/niko-table/filters/table-faceted-filter.js

@@ -107,7 +107,7 @@ function TableFacetedFilter({ column, title, options = [], multiple, onValueChan
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: trigger || /* @__PURE__ */ jsxs(Button, {
 			variant: "outline",
 			size: "sm",
-			className: "h-8 border-dashed",
+			className: "h-8",
 			children: [
 				selectedValues?.size > 0 ? /* @__PURE__ */ jsx("div", {
 					role: "button",

package/dist/components/registry/niko-table/lib/column-resize-handle.js

@@ -168,7 +168,7 @@ function DataTableColumnResizeHandle({ header, isFlex = false, setResizePreview
 			}
 		},
 		className: "group/resize absolute top-0 right-0 z-10 flex h-full w-2 cursor-col-resize touch-none justify-end outline-none select-none",
-		children: /* @__PURE__ */ jsx("div", { className: cn("my-1.5 w-px rounded bg-border opacity-0 transition-all", "group-hover/resize:my-0 group-hover/resize:w-0.5 group-hover/resize:bg-primary group-hover/resize:opacity-100", "group-focus-visible/resize:my-0 group-focus-visible/resize:w-0.5 group-focus-visible/resize:bg-primary group-focus-visible/resize:opacity-100", isResizing && "my-0 w-0.5 bg-primary opacity-100") })
+		children: /* @__PURE__ */ jsx("div", { className: cn("my-1.5 w-px bg-border opacity-0 transition-all", "group-hover/resize:my-0 group-hover/resize:w-0.5 group-hover/resize:bg-primary group-hover/resize:opacity-100", "group-focus-visible/resize:my-0 group-focus-visible/resize:w-0.5 group-focus-visible/resize:bg-primary group-focus-visible/resize:opacity-100", isResizing && "my-0 w-0.5 bg-primary opacity-100") })
 	});
 }
 //#endregion

package/dist/components/registry/sidebar-07/nav-user.js

@@ -1,5 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../../ui/sidebar.js";
 import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,25 +34,22 @@ function NavUser({ user }) {
 		align: "end",
 		sideOffset: 4,
 		children: [
-			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
-				className: "p-0 font-normal",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
-					children: [/* @__PURE__ */ jsxs(Avatar, { children: [/* @__PURE__ */ jsx(AvatarImage, {
-						src: user.avatar,
-						alt: user.name
-					}), /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })] }), /* @__PURE__ */ jsxs("div", {
-						className: "grid flex-1 text-left text-sm leading-tight",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate font-medium",
-							children: user.name
-						}), /* @__PURE__ */ jsx("span", {
-							className: "truncate text-xs",
-							children: user.email
-						})]
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
+				children: [/* @__PURE__ */ jsxs(Avatar, { children: [/* @__PURE__ */ jsx(AvatarImage, {
+					src: user.avatar,
+					alt: user.name
+				}), /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })] }), /* @__PURE__ */ jsxs("div", {
+					className: "grid flex-1 text-left text-sm leading-tight",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-medium",
+						children: user.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs",
+						children: user.email
 					})]
-				})
-			}) }),
+				})]
+			}),
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(SparklesIcon, {}), "Upgrade to Pro"] }) }),
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),

package/dist/components/siyahi/{page-hero.d.ts → page-header.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-//#region src/components/siyahi/page-hero.d.ts
-export interface PageHeroProps {
+//#region src/components/siyahi/page-header.d.ts
+export interface PageHeaderProps {
   /** A short line above the title in the mono face and the link colour, such as the app or a section name. */
   eyebrow?: ReactNode;
   /** The page's h1. */
@@ -19,5 +19,5 @@ export interface PageHeroProps {
  * the actions at the right, and a hairline under it all. One per page, above everything else; a section uses
  * PageSection.
  */
-export declare function PageHero({ eyebrow, title, lead, detail, actions, mark }: PageHeroProps): import("react").JSX.Element;
+export declare function PageHeader({ eyebrow, title, lead, detail, actions, mark }: PageHeaderProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/{page-hero.js → page-header.js}

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/siyahi/page-hero.tsx
+//#region src/components/siyahi/page-header.tsx
 /**
 * The masthead at the top of a page: a small mark and eyebrow, the title, one muted line saying what the page is,
 * the actions at the right, and a hairline under it all. One per page, above everything else; a section uses
 * PageSection.
 */
-function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
+function PageHeader({ eyebrow, title, lead, detail, actions, mark }) {
 	return /* @__PURE__ */ jsxs("header", {
-		"data-slot": "page-hero",
+		"data-slot": "page-header",
 		className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3 border-b pb-4",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-1",
@@ -40,4 +40,4 @@ function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
 	});
 }
 //#endregion
-export { PageHero };
+export { PageHeader };

package/dist/components/siyahi/panel-grid.d.ts

@@ -3,11 +3,14 @@ import { ReactNode } from "react";
 declare const COLUMNS: {
   readonly 1: "";
   readonly 2: "@2xl/panels:grid-cols-2";
-  readonly 3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3";
+  readonly 3: "@2xl/panels:grid-cols-3";
   readonly 4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4";
 };
 export interface PanelGridProps {
-  /** Blocks across on a wide page; two on a medium one, and one on a phone. */
+  /**
+   * Blocks across from a 42rem grid, so three short ones fit a reading column (an article's 55rem); 4 goes two across
+   * there and four from 64rem. Below 42rem they sit one under another.
+   */
   columns?: keyof typeof COLUMNS | undefined;
   children: ReactNode;
   className?: string | undefined;

package/dist/components/siyahi/panel-grid.js

@@ -6,7 +6,7 @@ import { Children } from "react";
 const COLUMNS = {
 	1: "",
 	2: "@2xl/panels:grid-cols-2",
-	3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3",
+	3: "@2xl/panels:grid-cols-3",
 	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
 };
 /**

package/dist/components/siyahi/range-position.js

@@ -26,7 +26,7 @@ function RangePosition({ low, high, value, lowLabel = "Low", highLabel = "High",
 			style: { width: at }
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "range-thumb",
-			className: cn("absolute top-1/2 -translate-1/2 rounded-full border-2 border-foreground bg-card", variant === "full" ? "size-3.5" : "size-2.5"),
+			className: cn("absolute top-1/2 -translate-1/2 border-2 border-foreground bg-card", variant === "full" ? "size-3.5" : "size-2.5"),
 			style: { left: at }
 		})]
 	});

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

@@ -3,6 +3,7 @@ import { ChartContainer } from "../ui/chart.js";
 import { LOG_BLOCKED, useAxisScale } from "./scale-toggle.js";
 import { useLocale } from "./siyahi-provider.js";
 import { fitsLog, ticksFor } from "../../lib/ticks.js";
+import { fontLoads, useRenderWhenFontsLoad } from "../../lib/use-render-when-fonts-load.js";
 import { corners, dotSizes, placeLabels, quadrantSplit } from "../../lib/scatter.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -43,6 +44,10 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 	const formatY = useMemo(() => yFormatter ?? new Intl.NumberFormat(numberLocale).format, [yFormatter, numberLocale]);
 	const formatSize = useMemo(() => sizeFormatter ?? new Intl.NumberFormat(numberLocale).format, [sizeFormatter, numberLocale]);
 	const drawn = useMemo(() => points.filter((p) => p.y !== null && Number.isFinite(p.y) && Number.isFinite(p.x)), [points]);
+	useRenderWhenFontsLoad(() => {
+		const { measure } = labelType();
+		return [...labels > 0 ? drawn.map(({ name }) => name) : [], ...Object.values(quadrants?.labels ?? {})].map((name) => name ? measure(name) : 0).join();
+	});
 	const both = xScaleToggle && yScaleToggle;
 	const across = useAxisScale({
 		initial: xScale,
@@ -297,8 +302,12 @@ function Dot({ cx, cy, payload, index, "data-recharts-item-id": itemId, selected
 		strokeWidth: RING
 	}), dot] });
 }
-/** A name's width in the labels' type, measured on a canvas once per font and name. */
+/**
+* A name's width in the labels' type, measured on a canvas once per font and name, and again after each font load:
+* the font string is the same before and after Geist arrives, and a width measured before was the fallback's.
+*/
 const widths = /* @__PURE__ */ new Map();
+let widthsAfter = 0;
 let canvas;
 /** The labels' type as the page sets it: text-xs is three quarters of the root size, which a reader may enlarge. */
 function labelType() {
@@ -309,6 +318,10 @@ function labelType() {
 	const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) * .75;
 	const font = `500 ${size}px ${getComputedStyle(document.body).fontFamily}`;
 	canvas ??= document.createElement("canvas").getContext("2d");
+	if (fontLoads() !== widthsAfter) {
+		widths.clear();
+		widthsAfter = fontLoads();
+	}
 	const measure = (text) => {
 		const id = `${font}\n${text}`;
 		let width = widths.get(id);

package/dist/components/siyahi/target-rows.js

@@ -37,7 +37,7 @@ function TargetRows({ rows, domain, valueFormatter, className }) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-baseline justify-between gap-3",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate font-medium",
+							className: "min-w-0 font-medium wrap-anywhere",
 							children: row.label
 						}), /* @__PURE__ */ jsx("span", {
 							className: "shrink-0 text-base font-semibold tabular-nums",
@@ -47,7 +47,7 @@ function TargetRows({ rows, domain, valueFormatter, className }) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex justify-between gap-3 text-muted-foreground",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate",
+							className: "min-w-0 wrap-anywhere",
 							children: row.detail
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "shrink-0 tabular-nums",

package/dist/components/siyahi/treemap.js

@@ -108,7 +108,6 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 						/* @__PURE__ */ jsx("rect", {
 							width: "100%",
 							height: "100%",
-							rx: 4,
 							style: { fill: heat(item.change, range) }
 						}),
 						key === selectedKey && /* @__PURE__ */ jsx("rect", {
@@ -116,7 +115,6 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 							y: 1,
 							width: box.width - 2,
 							height: box.height - 2,
-							rx: 3,
 							fill: "none",
 							strokeWidth: 2,
 							className: "stroke-foreground"
@@ -150,7 +148,6 @@ function Swatch({ label, fill }) {
 		children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("rect", {
 			width: "100%",
 			height: "100%",
-			rx: 2,
 			style: { fill }
 		})]
 	});

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -1,11 +1,11 @@
-import { ChartColor, ChartCurve, ChartSeries, ChartSeriesItem, LineMarksProps, NumericXProps, SeriesChartProps, ValueScaleProps } from "./chart-series.js";
+import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, LineMarksProps, NumericXProps, SeriesChartProps, ValueScaleProps } from "./chart-series.js";
 import { ChartTooltipContent } from "../components/ui/chart.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
-import { AreaChart, BarChart, LineChart, YAxisProps } from "recharts";
+import { AreaChart, BarChart, LineChart } from "recharts";
 //#region src/lib/chart-frame.d.ts
 /**
- * A bar's fill: a tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A selection dims
- * the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
+ * A bar's fill: the theme's --bar-tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A
+ * selection dims the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
  */
 export declare function barFill(color: string, dim?: boolean): string;
 interface QuietLegendProps<T> {
@@ -21,10 +21,35 @@ interface QuietLegendProps<T> {
  * the rest. A stack's grey bands sit in the legend's order, bottom to top.
  */
 export declare function QuietLegend<T>({ series, raisable, raised, onRaise }: QuietLegendProps<T>): import("react").JSX.Element;
-interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
+type StackOffset = "none" | "sign";
+/**
+ * The values a value axis must reach: each one drawn, or a stack's running totals, where its segments end. A "sign"
+ * stack runs a row's losses down from zero and its gains up, so the row reaches its two sums.
+ */
+export declare function axisValues<T>(data: readonly T[], series: ChartSeries<T>, stackOffset?: StackOffset): number[];
+/**
+ * A log value axis over the values and the page's levels above zero: a level at or under zero has no place on it, and
+ * must not turn Log off.
+ */
+export declare function logValueAxis(values: readonly number[], referenceLines: readonly ChartReferenceLine[], range?: readonly [number, number]): {
+  domain: [number, number];
+  ticks: number[];
+};
+/**
+ * A linear value axis that just covers what is drawn: the values (a stack's totals), the page's levels and ticks, and
+ * zero under bars, so no bar hangs from its smallest loss and no level falls off the plot.
+ */
+export declare function linearValueAxis<T>(data: readonly T[], series: ChartSeries<T>, { stackOffset, referenceLines, yTicks, bars }: {
+  stackOffset?: StackOffset | undefined;
+  referenceLines?: readonly ChartReferenceLine[] | undefined;
+  yTicks?: readonly number[] | undefined;
+  bars?: boolean | undefined;
+}): {
+  domain: [number, number];
+  ticks: number[];
+} | undefined;
+interface ChartFrameProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps, LineMarksProps<T, K> {
   chart: typeof AreaChart | typeof BarChart | typeof LineChart;
-  /** The value axis' range: a page's fixed one, or a card's rule such as bars reaching zero. */
-  yDomain?: YAxisProps["domain"] | undefined;
   /** One Bar, Area or Line per series. */
   children: ReactNode;
   /**
@@ -33,8 +58,11 @@ interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<Seri
    * otherwise. x and y keep their meaning: x is the category, y the value.
    */
   horizontal?: boolean | undefined;
-  /** "sign" stacks negative values below zero and positive ones above, rather than on one running total. */
-  stackOffset?: "sign" | undefined;
+  /**
+   * The series stack: "none" adds each onto the running total, as a stacked area does; "sign" stacks negative values
+   * below zero and positive ones above.
+   */
+  stackOffset?: StackOffset | undefined;
   onClick?: ComponentProps<typeof BarChart>["onClick"] | undefined;
   /** A tooltip row per hovered mark; by default each series' colour, label and formatted value (seriesRow). */
   tooltipRow?: ComponentProps<typeof ChartTooltipContent>["formatter"] | undefined;

package/dist/lib/chart-frame.js

@@ -5,34 +5,23 @@ import { useAxisScale } from "../components/siyahi/scale-toggle.js";
 import { StaleNote } from "../components/siyahi/stale-note.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { EndLabels, QUIET, TimeMarks, endLabelRoom, endLabelsFit, linesEndAtEdge } from "./chart-marks.js";
-import { fitsLog, logAxis } from "./ticks.js";
+import { fitsLog, linearAxis, logAxis } from "./ticks.js";
 import { useElementWidth } from "./use-element-width.js";
+import { useRenderWhenFontsLoad } from "./use-render-when-fonts-load.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useState } from "react";
-import { CartesianGrid, Line, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } from "recharts";
+import { useId, useMemo, useState } from "react";
+import { BarChart, CartesianGrid, Line, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } 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 = [];
 const SERIES_LEGEND = /* @__PURE__ */ jsx(ChartLegendContent, { className: "flex-wrap gap-y-1" });
 /**
-* A bar's fill: a tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A selection dims
-* the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
+* A bar's fill: the theme's --bar-tint of its colour, inside a 1px edge of the full colour the bar is drawn with. A
+* selection dims the bars it leaves out to a fainter tint; their edges stay, so they keep 3:1 against the card.
 */
 function barFill(color, dim = false) {
-	return `color-mix(in oklab, ${color} ${dim ? 10 : 25}%, var(--card))`;
-}
-/** Renders the component again once the page's fonts load, so text measured on a canvas is measured in Geist. */
-function useRenderWhenFontsLoad() {
-	const [loaded, setLoaded] = useState(() => typeof document === "undefined" || document.fonts?.status === "loaded");
-	useEffect(() => {
-		if (loaded || !document.fonts) return;
-		let live = true;
-		document.fonts.ready.then(() => live && setLoaded(true));
-		return () => {
-			live = false;
-		};
-	}, [loaded]);
+	return `color-mix(in oklab, ${color} ${dim ? "10%" : "var(--bar-tint)"}, var(--card))`;
 }
 /**
 * The legend when some series are quiet: every series by name. The grey ones share a colour, so a legend square
@@ -83,6 +72,43 @@ function haloLine({ x1, y1, x2, y2, stroke, strokeDasharray }) {
 		strokeWidth: 1
 	})] });
 }
+const sum = (values) => values.reduce((total, value) => total + value, 0);
+/**
+* The values a value axis must reach: each one drawn, or a stack's running totals, where its segments end. A "sign"
+* stack runs a row's losses down from zero and its gains up, so the row reaches its two sums.
+*/
+function axisValues(data, series, stackOffset) {
+	return data.flatMap((row) => {
+		const values = series.map(({ key }) => row[key]).filter((value) => typeof value === "number" && Number.isFinite(value));
+		if (stackOffset === "none") {
+			let total = 0;
+			return [0, ...values.map((value) => total += value)];
+		}
+		if (stackOffset === "sign") return [sum(values.filter((value) => value < 0)), sum(values.filter((value) => value > 0))];
+		return values;
+	});
+}
+/** The value levels a page marks with reference lines. */
+const levelsOf = (lines) => lines.flatMap(({ y }) => y === void 0 ? [] : [y]);
+/**
+* A log value axis over the values and the page's levels above zero: a level at or under zero has no place on it, and
+* must not turn Log off.
+*/
+function logValueAxis(values, referenceLines, range) {
+	return logAxis([...values, ...levelsOf(referenceLines).filter((level) => level > 0)], range);
+}
+/**
+* A linear value axis that just covers what is drawn: the values (a stack's totals), the page's levels and ticks, and
+* zero under bars, so no bar hangs from its smallest loss and no level falls off the plot.
+*/
+function linearValueAxis(data, series, { stackOffset, referenceLines = NO_LINES, yTicks = [], bars = false }) {
+	return linearAxis([
+		...axisValues(data, series, stackOffset),
+		...levelsOf(referenceLines),
+		...yTicks,
+		...bars ? [0] : []
+	]);
+}
 /**
 * 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.
@@ -246,10 +272,10 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 	const { numberLocale } = useLocale();
 	const clipId = useId();
 	const [contentRef, contentWidth] = useElementWidth();
-	useRenderWhenFontsLoad();
 	const [raisedKey, setRaisedKey] = useState();
 	const names = endLabels ? series.map(({ label }) => label) : [];
 	const labelRoom = endLabels ? endLabelRoom(names) : 0;
+	useRenderWhenFontsLoad(() => endLabels ? endLabelRoom(names) : 0);
 	const plotHeight = height - 12 - (xTickDetail ? 40 : 30) - (xLabel ? 18 : 0);
 	const ends = endLabels && linesEndAtEdge(data, xKey, series, xDomain) && endLabelsFit(names, contentWidth, plotHeight);
 	const quiet = series.some(({ color }) => color === QUIET);
@@ -260,16 +286,20 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
-	const [low, high] = Array.isArray(yDomain) ? yDomain : [];
-	const range = typeof low === "number" && typeof high === "number" ? [low, high] : void 0;
-	const values = [...data.flatMap((row) => series.map(({ key }) => row[key])), ...range ?? []].filter((value) => typeof value === "number" && Number.isFinite(value));
+	const values = [...data.flatMap((row) => series.map(({ key }) => row[key])), ...yDomain ?? []].filter((value) => typeof value === "number" && Number.isFinite(value));
 	const valueAxis = useAxisScale({
 		initial: yScale,
 		toggle: yScaleToggle,
 		label: yLabel ? `${yLabel} scale` : "Value axis scale",
 		logBlocked: logBlocked ?? (fitsLog(values) ? void 0 : "Log needs every value above zero")
 	});
-	const log = valueAxis.scale === "log" ? logAxis(values, range) : void 0;
+	const log = valueAxis.scale === "log" ? logValueAxis(values, referenceLines, yDomain) : void 0;
+	const linear = log || yDomain !== void 0 ? void 0 : linearValueAxis(data, series, {
+		stackOffset,
+		referenceLines,
+		yTicks,
+		bars: Chart === BarChart
+	});
 	const detailedRows = horizontal && xTickDetail !== void 0;
 	const rowCount = (xTicks ?? data).length;
 	const plotClass = detailedRows ? "min-h-(--wrapped-chart-height) @min-[24rem]/chart:min-h-0" : void 0;
@@ -336,10 +366,10 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 							}),
 							horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
 								type: "number",
-								niceTicks: "snap125",
+								niceTicks: linear ? void 0 : "snap125",
 								hide: !yTickFormatter,
-								domain: yDomain,
-								ticks: yTicks,
+								domain: linear?.domain ?? yDomain,
+								ticks: yTicks ?? linear?.ticks,
 								tickLine: false,
 								axisLine: false,
 								tickMargin: 8,
@@ -373,12 +403,12 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 								interval: xTickDetail || xTicks ? 0 : void 0
 							}), /* @__PURE__ */ jsx(YAxis, {
 								scale: valueAxis.scale,
-								niceTicks: log ? void 0 : "snap125",
+								niceTicks: log || linear ? void 0 : "snap125",
 								tickLine: false,
 								axisLine: false,
 								width: "auto",
-								domain: log?.domain ?? yDomain,
-								ticks: log?.ticks ?? yTicks,
+								domain: log?.domain ?? linear?.domain ?? yDomain,
+								ticks: log?.ticks ?? yTicks ?? linear?.ticks,
 								label: yLabel ? {
 									value: yLabel,
 									angle: -90,
@@ -477,4 +507,4 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 	});
 }
 //#endregion
-export { ChartFrame, QuietLegend, barFill, endDot, seriesFill, seriesRow };
+export { ChartFrame, QuietLegend, axisValues, barFill, endDot, linearValueAxis, logValueAxis, seriesFill, seriesRow };

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

@@ -64,8 +64,9 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
    */
   yTickFormatter?: ((value: number, scale: number) => string) | undefined;
   /**
-   * 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.
+   * A fixed range for the value axis, such as [0, 100] for a percentage. By default the axis ends on the round
+   * ticks that just cover the data (a 46,800 peak ends at 50,000), a stack's totals for a stack, and a bar chart's
+   * always reaches zero.
    */
   yDomain?: [number, number] | undefined;
   /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */

package/dist/lib/ticks.d.ts

@@ -10,6 +10,15 @@ export declare function logTicks(min: number, max: number): number[];
  * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
  */
 export declare function linearTicks(min: number, max: number, count?: number): number[];
+/**
+ * A value axis' ends and ticks: the round ticks that just cover the values, and their outer two as the ends. About
+ * six, not five, so a 46,800 peak ends at 50,000 by 10,000s rather than at 60,000 by 20,000s. None when the values
+ * span no range (no values, or one), which leaves the axis to the chart.
+ */
+export declare function linearAxis(values: readonly number[]): {
+  domain: [number, number];
+  ticks: number[];
+} | undefined;
 /** How an axis spaces its values: evenly, or by powers of ten for values that run from tiny to large. */
 export type AxisScale = "linear" | "log";
 /** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */

package/dist/lib/ticks.js

@@ -39,6 +39,29 @@ function linearTicks(min, max, count = 5) {
 	const last = Math.ceil(max / step - 1e-9);
 	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
 }
+/** The smallest and largest value, by a loop: Math.min(...values) overflows the call stack past about 100,000. */
+function extent(values) {
+	let low = Number.POSITIVE_INFINITY;
+	let high = Number.NEGATIVE_INFINITY;
+	for (const value of values) {
+		low = Math.min(low, value);
+		high = Math.max(high, value);
+	}
+	return [low, high];
+}
+/**
+* A value axis' ends and ticks: the round ticks that just cover the values, and their outer two as the ends. About
+* six, not five, so a 46,800 peak ends at 50,000 by 10,000s rather than at 60,000 by 20,000s. None when the values
+* span no range (no values, or one), which leaves the axis to the chart.
+*/
+function linearAxis(values) {
+	const ticks = linearTicks(...extent(values), 6);
+	const [low, high] = [ticks[0], ticks.at(-1)];
+	return low !== void 0 && high !== void 0 && low < high ? {
+		domain: [low, high],
+		ticks
+	} : void 0;
+}
 /** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
 const ticksFor = (scale, min, max) => scale === "log" ? logTicks(min, max) : linearTicks(min, max);
 /** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
@@ -55,8 +78,7 @@ function logAxis(values, range) {
 			ticks: logTicks(low, high).filter((tick) => tick >= low && tick <= high)
 		};
 	}
-	const low = Math.min(...values);
-	const high = Math.max(...values);
+	const [low, high] = extent(values);
 	const ticks = logTicks(low, high);
 	return {
 		domain: [ticks[0] ?? low, ticks.at(-1) ?? high],
@@ -64,4 +86,4 @@ function logAxis(values, range) {
 	};
 }
 //#endregion
-export { fitsLog, linearTicks, logAxis, logTicks, ticksFor };
+export { fitsLog, linearAxis, linearTicks, logAxis, logTicks, ticksFor };

package/dist/lib/use-render-when-fonts-load.d.ts

@@ -0,0 +1,11 @@
+//#region src/lib/use-render-when-fonts-load.d.ts
+/** How many font loads the page has finished: a width a canvas measured before the last one may be the fallback's. */
+export declare function fontLoads(): number;
+/**
+ * Renders the component again when a font load changes what `measure` returns: the width of the component's own
+ * text, measured on a canvas. Any face may change it, whenever it loads: Geist after the fallback, a subset for other
+ * characters, another family. A load that changes nothing the component measures leaves it alone, as Recharts redraws
+ * a chart's marks on every render and their fade-in would play again.
+ */
+export declare function useRenderWhenFontsLoad(measure: () => number | string): void;
+//#endregion

package/dist/lib/use-render-when-fonts-load.js

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useReducer, useRef } from "react";
+//#region src/lib/use-render-when-fonts-load.ts
+let loads = 0;
+const counted = /* @__PURE__ */ new WeakSet();
+/** How many font loads the page has finished: a width a canvas measured before the last one may be the fallback's. */
+function fontLoads() {
+	if (typeof document !== "undefined" && document.fonts && !counted.has(document.fonts)) {
+		counted.add(document.fonts);
+		document.fonts.addEventListener("loadingdone", () => loads++);
+	}
+	return loads;
+}
+/**
+* Renders the component again when a font load changes what `measure` returns: the width of the component's own
+* text, measured on a canvas. Any face may change it, whenever it loads: Geist after the fallback, a subset for other
+* characters, another family. A load that changes nothing the component measures leaves it alone, as Recharts redraws
+* a chart's marks on every render and their fade-in would play again.
+*/
+function useRenderWhenFontsLoad(measure) {
+	const drawn = measure();
+	const seen = fontLoads();
+	const committed = useRef({
+		measure,
+		drawn
+	});
+	const [, render] = useReducer((count) => count + 1, 0);
+	useLayoutEffect(() => {
+		committed.current = {
+			measure,
+			drawn
+		};
+		if (fontLoads() !== seen && measure() !== drawn) render();
+	}, [
+		measure,
+		drawn,
+		seen
+	]);
+	useLayoutEffect(() => {
+		const fonts = document.fonts;
+		if (!fonts) return;
+		const recheck = () => {
+			if (committed.current.measure() !== committed.current.drawn) render();
+		};
+		fonts.addEventListener("loadingdone", recheck);
+		return () => fonts.removeEventListener("loadingdone", recheck);
+	}, []);
+}
+//#endregion
+export { fontLoads, useRenderWhenFontsLoad };

package/package.json

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

package/report.css

@@ -38,6 +38,7 @@
   --wash: 7%;
   --wash-edge: 45%;
   --field-wash: 8%;
+  --bar-tint: 50%;
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);

package/styles/siyahi.css

@@ -140,6 +140,12 @@
   --wash-edge: 45%;
   /* An invalid field's wash: this share of --destructive over the card. */
   --field-wash: 8%;
+  /*
+   * Every bar takes this share of its colour over the card, inside a 1px edge of the full colour (lib/chart-frame
+   * barFill). At 25% a pale slot's bar barely left the card and a thin stacked segment was two edge lines; the
+   * contrast check holds each bar colour's tint against the card and each slot's against the next slot's.
+   */
+  --bar-tint: 50%;
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
@@ -220,6 +226,7 @@
     --wash: 12%;
     --wash-edge: 55%;
     --field-wash: 12%;
+    --bar-tint: 50%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -265,13 +272,15 @@
  * foreground, black on white and white on black, so the reader sees at once
  * what is on; stock shadcn marks it with a faint grey. A default (pill) tab
  * selects the same way: stock fills it with the canvas colour, 1.05:1 against
- * its grey list. Unlayered, to outrank the stock aria-pressed:bg-muted.
+ * its grey list, lifted on a drop shadow, which the fill makes needless. Unlayered, to outrank the stock
+ * aria-pressed:bg-muted.
  */
 :is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]),
 [data-slot="tabs-list"][data-variant="default"] [data-slot="tabs-trigger"][data-active] {
   background-color: var(--foreground);
   color: var(--background);
   border-color: var(--foreground);
+  --tw-shadow: 0 0 #0000;
 }
 
 /*
@@ -476,8 +485,47 @@ svg :is(rect, circle, path)[tabindex]:focus-visible,
   @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"] {
+/* A group's label in a menu, a select's list or the command palette is a label over its items, set as one. */
+:is(
+  [data-slot="dropdown-menu-label"],
+  [data-slot="context-menu-label"],
+  [data-slot="select-label"],
+  [data-slot="command-group"] [cmdk-group-heading]
+) {
+  @apply font-mono text-2xs tracking-wider text-muted-foreground uppercase;
+}
+
+/*
+ * A menu, a select's list, a popover, a dialog, a sheet and a chart's tooltip read as a sheet of the page, not a
+ * bubble floating over it: no drop shadow, and the card's hairline for an edge (stock rings them fainter).
+ */
+:is(
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="context-menu-sub-content"],
+  [data-slot="select-content"],
+  [data-slot="popover-content"],
+  [data-slot="dialog-content"],
+  [data-slot="sheet-content"],
+  [data-slot="chart"] .recharts-tooltip-wrapper > div
+) {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-color: var(--border);
+  border-color: var(--border);
+}
+
+/*
+ * Square as every box is: progress, a slider's track and thumb, a scrollbar's thumb, and the colour chips core's
+ * chart tooltip and legend draw at a fixed 2px, which no radius token reaches.
+ */
+:is(
+  [data-slot="progress-track"],
+  [data-slot="slider-track"],
+  [data-slot="slider-thumb"],
+  [data-slot="scroll-area-thumb"],
+  [data-slot="chart"] :is(.recharts-tooltip-wrapper, .recharts-legend-wrapper) [class~="rounded-[2px]"]
+) {
   border-radius: 0;
 }
 
@@ -750,7 +798,6 @@ div[data-slot="sidebar"]:not([data-side], [data-mobile]) {
   inset-block: 2px;
   left: -11px;
   width: 2px;
-  border-radius: 1px;
   background: var(--sidebar-accent-foreground);
 }