@siyahi/ui 0.1.1-next.4 → 0.1.3-next.1

package/README.md

@@ -19,12 +19,14 @@ is Tailwind source, so a plain CSS import leaves every component unstyled.
 
 ```sh
 npm install @siyahi/ui@next tailwindcss @tailwindcss/vite
+npm install --save-dev @siyahi/tools@next
 ```
 
 ```ts
 // vite.config.ts
 import tailwindcss from "@tailwindcss/vite";
-export default defineConfig({ plugins: [react(), tailwindcss()] });
+import { preloadFonts } from "@siyahi/tools/vite";
+export default defineConfig({ plugins: [react(), tailwindcss(), preloadFonts()] });
 ```
 
 ```css
@@ -43,6 +45,14 @@ createRoot(root).render(
 );
 ```
 
+`preloadFonts()` adds `<link rel="preload">` tags for Geist and Geist Mono to
+the built `index.html`, so the fonts download with the scripts instead of after
+the first paint. Until they arrive the theme draws Arial (or its Linux twins,
+Liberation Sans and Arimo) scaled to Geist's metrics, so nothing moves when
+Geist swaps in. An app that renders its own HTML adds the tags itself, with
+the hashed URLs of `geist-latin-wght-normal.woff2`,
+`geist-latin-ext-wght-normal.woff2` and `geist-mono-latin-wght-normal.woff2`.
+
 Everything comes from `@siyahi/ui`: the shadcn components, the registry
 add-ons (data table, heatmaps, stat tiles, sidebar), Siyahi's own components
 and the Recharts pieces charts are built from. Add `lucide-react` only if your
@@ -137,17 +147,18 @@ npm install --save-dev @siyahi/tools@next oxlint
 ```
 
 `@siyahi/tools` also has `siyahi-shots` (screenshots of a page at 1920 and 390
-pixels wide in both schemes, with layout checks) and `siyahi-contrast` (the
+pixels wide in both schemes, with layout checks), `siyahi-cls` (how far a page
+moves after its first paint on a slow network) and `siyahi-contrast` (the
 theme contrast check). See [packages/tools](packages/tools/README.md).
 
 ## This repository
 
-| Path              | What                                                                              |
-| ----------------- | --------------------------------------------------------------------------------- |
-| `packages/ui`     | `@siyahi/ui`. The theme is `styles/siyahi.css`, the only file with colour values. |
-| `packages/tools`  | `@siyahi/tools`: lint plugin, contrast check, screenshot script.                  |
-| `apps/catalogue`  | The catalogue site, a Vite app deployed as a Cloudflare Worker.                   |
-| `assets/icon.svg` | The mark.                                                                         |
+| Path              | What                                                                               |
+| ----------------- | ---------------------------------------------------------------------------------- |
+| `packages/ui`     | `@siyahi/ui`. The theme is `styles/siyahi.css`, the only file with colour values.  |
+| `packages/tools`  | `@siyahi/tools`: lint plugin, font preload, contrast, screenshot and shift checks. |
+| `apps/catalogue`  | The catalogue site, a Vite app deployed as a Cloudflare Worker.                    |
+| `assets/icon.svg` | The mark.                                                                          |
 
 Development uses pnpm and [Vite+](https://viteplus.dev):
 

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

@@ -6,6 +6,8 @@ export interface BarListItem {
   /** Renders the label as a link. */
   href?: string;
   icon?: React$1.ReactNode;
+  /** Secondary figure after the label, such as a `Delta`. */
+  detail?: React$1.ReactNode;
   /** Stable key when names can repeat. */
   key?: string;
 }

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

@@ -31,28 +31,36 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 				className: "flex items-center gap-3 text-sm",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "relative flex h-8 min-w-0 flex-1 items-center",
-					children: [/* @__PURE__ */ jsx("div", {
-						"aria-hidden": "true",
-						className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
-						style: {
-							width: `${width}%`,
-							backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
-						}
-					}), /* @__PURE__ */ jsxs(Label, {
-						...item.href ? { href: item.href } : {},
-						...onItemClick && !item.href ? {
-							type: "button",
-							onClick: () => onItemClick(item)
-						} : {},
-						className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
-						children: [item.icon ? /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground shrink-0 [&>svg]:size-4",
-							children: item.icon
-						}) : null, /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: item.name
-						})]
-					})]
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
+							style: {
+								width: `${width}%`,
+								backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
+							}
+						}),
+						/* @__PURE__ */ jsxs(Label, {
+							...item.href ? { href: item.href } : {},
+							...onItemClick && !item.href ? {
+								type: "button",
+								onClick: () => onItemClick(item)
+							} : {},
+							className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
+							children: [item.icon ? /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground shrink-0 [&>svg]:size-4",
+								children: item.icon
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.name
+							})]
+						}),
+						item.detail ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "bar-list-detail",
+							className: "text-muted-foreground relative shrink-0 pr-2 text-xs tabular-nums",
+							children: item.detail
+						}) : null
+					]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex shrink-0 items-center gap-2 tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {

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

@@ -27,7 +27,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 	const flexColumnIds = resolveFlexColumnIds(table);
 	const columnSizing = table.state.columnSizing;
 	return /* @__PURE__ */ jsx(TableHeader, {
-		className: cn(sticky && "sticky top-0 z-30 bg-background", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
+		className: cn(sticky && "sticky top-0 z-30 bg-card", sticky && "after:absolute after:right-0 after:bottom-0 after:left-0 after:h-px after:bg-border", className),
 		children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
 			const isFlex = flexColumnIds.has(header.column.id);
 			const headerStyle = {
@@ -83,7 +83,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 				"data-flash": flashing ? "true" : void 0,
 				"data-col-id": cell.column.id,
 				style: cellStyle,
-				className: cn(!cell.getIsGrouped() && "truncate", cell.column.getIsPinned() && "bg-background group-hover:bg-muted/50 group-data-[context-menu-open]:bg-muted/50 group-data-[state=selected]:bg-muted"),
+				className: cn(!cell.getIsGrouped() && "truncate", cell.column.getIsPinned() && "bg-linear-to-r group-hover:from-muted/50 group-hover:to-muted/50 group-data-[context-menu-open]:from-muted/50 group-data-[context-menu-open]:to-muted/50 group-data-[state=selected]:from-muted group-data-[state=selected]:to-muted"),
 				children: renderCellContent(cell)
 			}, cell.id);
 		})

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

@@ -1,5 +1,5 @@
 import { Button } from "../../../ui/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
 import { cn } from "../../../../lib/utils.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,13 +34,13 @@ function TableColumnActions({ children, className, label = "Column Actions", isA
 			className: "sr-only",
 			children: label
 		})]
-	}) }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+	}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 		align,
 		className: "w-48",
-		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
 			className: "text-xs font-normal text-muted-foreground",
 			children: label
-		}), children]
+		}), children] })
 	})] });
 }
 TableColumnActions.displayName = "TableColumnActions";

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

@@ -1,6 +1,6 @@
 "use client";
 import { Button } from "../../../ui/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../ui/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../ui/tooltip.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_VARIANTS } from "../lib/constants.js";
@@ -76,8 +76,7 @@ function TableColumnSortOptions({ column, table: propTable, variant: propVariant
 			column.toggleSorting(isDesc, canMultiSort ? isMulti : false);
 		}
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		withSeparator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [withSeparator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 		/* @__PURE__ */ jsxs(DropdownMenuLabel, {
 			className: "flex items-center justify-between text-xs font-normal text-muted-foreground",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -122,7 +121,7 @@ function TableColumnSortOptions({ column, table: propTable, variant: propVariant
 			onClick: () => column.clearSorting(),
 			children: [/* @__PURE__ */ jsx(icons.unsorted, { className: "mr-2 size-4 text-muted-foreground/70" }), "Clear Sort"]
 		})
-	] });
+	] })] });
 }
 /**
 * Standalone dropdown menu for sorting.

package/dist/components/registry/niko-table/lib/styles.js

@@ -16,7 +16,7 @@ const getCommonPinningStyles = (column, isHeader = false) => {
 		maxWidth: columnSize,
 		flexShrink: 0,
 		zIndex: isHeader ? 20 : 10,
-		backgroundColor: "var(--background)",
+		backgroundColor: "var(--card)",
 		...isLeft ? { boxShadow: "inset -2px 0 0 0 color-mix(in oklab, var(--foreground) 40%, transparent), 4px 0 8px -2px color-mix(in oklab, var(--foreground) 14%, transparent)" } : { boxShadow: "inset 2px 0 0 0 color-mix(in oklab, var(--foreground) 40%, transparent), -4px 0 8px -2px color-mix(in oklab, var(--foreground) 14%, transparent)" }
 	};
 };

package/dist/components/siyahi/treemap.d.ts

@@ -1,14 +1,23 @@
 //#region src/components/siyahi/treemap.d.ts
 export interface TreemapItem {
   name: string;
-  /** Tile area, such as the holding's value. */
+  /** Tile area, such as the holding's value. Zero, negative and non-finite weights draw no tile. */
   weight: number;
-  /** Signed change as a fraction; sets the heat. */
-  change: number;
+  /** Signed change as a fraction; sets the heat. `null` when unknown: a muted tile marked "—". */
+  change: number | null;
+  /** Unique key when names repeat, such as one symbol held at two brokers. Defaults to `name`. */
+  key?: string;
+  /** Tiles of one group, such as a sector, sit together under the group's name, even a group of one. */
+  group?: string;
 }
-/** Holdings heat map: area by weight, colour by signed change, hand-drawn SVG. */
-export declare function Treemap({ items, height }: {
-  items: TreemapItem[];
+export interface TreemapProps<T extends TreemapItem> {
+  items: T[];
   height: number;
-}): import("react").JSX.Element;
+  /** ±range: the change, as a fraction, that takes the deepest heat step. Default 0.05 (±5%); a range that is not a positive number uses the default. */
+  range?: number;
+  /** Gets the item under the pointer, and null when the pointer moves onto a group's name or leaves the map. */
+  onHover?: (item: T | null) => void;
+}
+/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover }: TreemapProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/treemap.js

@@ -1,15 +1,10 @@
 import { useFormat } from "../../lib/format.js";
+import { heat, layout } from "../../lib/treemap.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
 //#region src/components/siyahi/treemap.tsx
-function heat(change) {
-	if (change === 0) return "var(--muted)";
-	const mix = Math.min(5, Math.ceil(Math.abs(change) * 100)) * 12;
-	return `color-mix(in oklab, var(${change > 0 ? "--positive" : "--negative"}) ${mix}%, var(--card))`;
-}
-/** Holdings heat map: area by weight, colour by signed change, hand-drawn SVG. */
-function Treemap({ items, height }) {
+/** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
+function Treemap({ items, height, range, onHover }) {
 	const ref = useRef(null);
 	const [width, setWidth] = useState(0);
 	const { pct } = useFormat();
@@ -18,39 +13,57 @@ function Treemap({ items, height }) {
 		if (ref.current) observer.observe(ref.current);
 		return () => observer.disconnect();
 	}, []);
-	const root = hierarchy({ children: items }).sum((d) => d.weight ?? 0);
-	const leaves = treemap().size([width, height]).paddingInner(2).tile(treemapSquarify)(root).leaves();
+	const { groups, tiles } = layout(items, width, height);
+	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "treemap",
 		style: { height },
-		children: /* @__PURE__ */ jsx("svg", {
+		children: /* @__PURE__ */ jsxs("svg", {
 			width,
 			height,
 			role: "img",
 			"aria-label": "Treemap of holdings by weight and change",
 			className: "text-xs",
-			children: leaves.map(({ data, x0, y0, x1, y1 }) => /* @__PURE__ */ jsxs("g", {
-				transform: `translate(${x0},${y0})`,
+			onPointerLeave: () => onHover?.(null),
+			children: [groups.map(({ group, ...box }) => /* @__PURE__ */ jsxs("svg", {
+				...box,
+				"data-slot": "treemap-group",
+				onPointerEnter: () => onHover?.(null),
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "100%",
+					height: "100%",
+					fill: "none",
+					pointerEvents: "all"
+				}), /* @__PURE__ */ jsx("text", {
+					x: 2,
+					y: 12,
+					className: "fill-muted-foreground font-medium",
+					children: group
+				})]
+			}, group)), tiles.map(({ item, ...box }) => /* @__PURE__ */ jsxs("svg", {
+				...box,
+				"data-slot": "treemap-tile",
+				onPointerEnter: () => onHover?.(item),
 				children: [/* @__PURE__ */ jsx("rect", {
-					width: x1 - x0,
-					height: y1 - y0,
+					width: "100%",
+					height: "100%",
 					rx: 4,
-					style: { fill: heat(data.change ?? 0) }
-				}), x1 - x0 > 56 && y1 - y0 > 36 && /* @__PURE__ */ jsxs("text", {
+					style: { fill: heat(item.change, range) }
+				}), box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
 					x: 8,
 					y: 18,
 					className: "fill-foreground",
 					children: [/* @__PURE__ */ jsx("tspan", {
 						className: "font-medium",
-						children: data.name
-					}), /* @__PURE__ */ jsxs("tspan", {
+						children: item.name
+					}), /* @__PURE__ */ jsx("tspan", {
 						x: 8,
 						dy: 16,
-						children: [(data.change ?? 0) > 0 ? "▲ " : (data.change ?? 0) < 0 ? "▼ " : "", pct(Math.abs(data.change ?? 0))]
+						children: change(item.change)
 					})]
 				})]
-			}, data.name))
+			}, item.key ?? item.name))]
 		})
 	});
 }

package/dist/index.d.ts

@@ -43,7 +43,7 @@ import { LocalTime, LocalTimeProps } from "./components/siyahi/local-time.js";
 import { PriceChart, PriceChartProps } from "./components/siyahi/price-chart.js";
 import { SiyahiLocale, defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, SiyahiProviderProps, useLocale } from "./components/siyahi/siyahi-provider.js";
-import { Treemap, TreemapItem } from "./components/siyahi/treemap.js";
+import { Treemap, TreemapItem, TreemapProps } from "./components/siyahi/treemap.js";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/ui/alert.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./components/ui/avatar.js";
 import { Badge, badgeVariants } from "./components/ui/badge.js";
@@ -70,4 +70,4 @@ import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
 import { Formatters, TimeOptions, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, 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, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, 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, DataTableRowMenuScope, DataTableSkeleton, DataTableSkeletonProps, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, 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, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, 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, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, 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, DataTableRowMenuScope, DataTableSkeleton, DataTableSkeletonProps, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, 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, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, XAxis, YAxis, badgeVariants, buttonVariants, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };

package/dist/lib/treemap.d.ts

@@ -0,0 +1,23 @@
+//#region src/lib/treemap.d.ts
+interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export interface Layout<T> {
+  groups: (Box & {
+    group: string;
+  })[];
+  tiles: (Box & {
+    item: T;
+  })[];
+}
+/** Squarified layout: items without a group are tiles of their own, the rest sit together under their group's label. */
+export declare function layout<T extends {
+  weight: number;
+  group?: string;
+}>(items: T[], width: number, height: number): Layout<T>;
+export declare function heat(change: number | null, range?: number): string;
+//#endregion
+export {};

package/dist/lib/treemap.js

@@ -0,0 +1,40 @@
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
+//#region src/lib/treemap.ts
+/** Height of a group's label row, above its tiles. */
+const GROUP_LABEL = 18;
+const box = ({ x0, y0, x1, y1 }) => ({
+	x: x0,
+	y: y0,
+	width: x1 - x0,
+	height: y1 - y0
+});
+const area = (weight) => weight !== void 0 && Number.isFinite(weight) && weight > 0 ? weight : 0;
+/** Squarified layout: items without a group are tiles of their own, the rest sit together under their group's label. */
+function layout(items, width, height) {
+	const nested = { children: [...Map.groupBy(items, (item) => item.group)].flatMap(([group, members]) => {
+		const tiles = members.map((item) => ({ item }));
+		return group === void 0 ? tiles : [{
+			group,
+			children: tiles
+		}];
+	}) };
+	const root = treemap().size([width, height]).paddingInner(2).paddingTop(({ data }) => data.group === void 0 ? 0 : GROUP_LABEL).tile(treemapSquarify)(hierarchy(nested).sum(({ item }) => area(item?.weight)));
+	return {
+		groups: (root.children ?? []).flatMap((node) => node.data.group === void 0 || !node.value ? [] : [{
+			...box(node),
+			height: GROUP_LABEL,
+			group: node.data.group
+		}]),
+		tiles: root.leaves().flatMap((node) => node.data.item === void 0 || !node.value ? [] : [{
+			...box(node),
+			item: node.data.item
+		}])
+	};
+}
+function heat(change, range = .05) {
+	if (!change) return "var(--muted)";
+	const mix = Math.min(5, Math.ceil(Math.abs(change) / (Number.isFinite(range) && range > 0 ? range : .05) * 5)) * 12;
+	return `color-mix(in oklab, var(${change > 0 ? "--positive" : "--negative"}) ${mix}%, var(--card))`;
+}
+//#endregion
+export { heat, layout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.1-next.4",
+  "version": "0.1.3-next.1",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -58,6 +58,7 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/node": "4.3.3",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/node": "24.19.2",
     "@types/react": "~19.3.0",

package/styles/fallback-fonts.css

@@ -0,0 +1,65 @@
+/*
+ * Generated by scripts/generate.ts. Do not edit.
+ * System fonts scaled to Geist's and Geist Mono's metrics. The theme names
+ * them right after Geist, so the text a browser draws while Geist loads takes
+ * the space Geist will, and nothing moves when Geist swaps in.
+ */
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo Regular"), local("Arimo-Regular");
+  font-weight: 100 450;
+  size-adjust: 102.87%;
+  ascent-override: 97.7%;
+  descent-override: 28.68%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo Regular"), local("Arimo-Regular");
+  font-weight: 451 550;
+  size-adjust: 105.29%;
+  ascent-override: 95.45%;
+  descent-override: 28.02%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
+  font-weight: 551 650;
+  size-adjust: 100.05%;
+  ascent-override: 100.45%;
+  descent-override: 29.49%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
+  font-weight: 651 900;
+  size-adjust: 102.09%;
+  ascent-override: 98.44%;
+  descent-override: 28.9%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Mono Fallback";
+  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Cousine Regular"), local("Cousine-Regular");
+  font-weight: 100 550;
+  size-adjust: 99.98%;
+  ascent-override: 100.52%;
+  descent-override: 29.5%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Mono Fallback";
+  src: local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold"), local("LiberationMono-Bold"), local("Cousine Bold"), local("Cousine-Bold");
+  font-weight: 551 900;
+  size-adjust: 99.98%;
+  ascent-override: 100.52%;
+  descent-override: 29.5%;
+  line-gap-override: 0%;
+}

package/styles/siyahi.css

@@ -9,6 +9,7 @@
 @import "./shadcn.css";
 @import "@fontsource-variable/geist";
 @import "@fontsource-variable/geist-mono";
+@import "./fallback-fonts.css";
 
 /* Tailwind does not scan node_modules, so name the package's own classes. */
 @source "../dist";
@@ -21,9 +22,15 @@
 @custom-variant dark (@media (prefers-color-scheme: dark));
 
 @theme inline {
-  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
+  --font-sans: "Geist Variable", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", "Geist Mono Fallback", ui-monospace, monospace;
   --font-heading: var(--font-sans);
+  /*
+   * Tailwind's 65ch, measured in Geist, whose "0" is 0.663em wide. A ch
+   * follows whichever font is drawing, so a plain 65ch is narrower while the
+   * fallback draws and every prose block rewraps when Geist arrives.
+   */
+  --max-width-prose: 43.1em;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);