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

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

@@ -2,8 +2,8 @@
 import { Badge } from "../../../ui/badge.js";
 import { Button } from "../../../ui/button.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { Separator } from "../../../ui/separator.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS } from "../lib/constants.js";
 import { Check, PlusCircle, XCircle } from "lucide-react";
@@ -149,7 +149,7 @@ function TableFacetedFilter({ column, title, options = [], multiple, onValueChan
 				] })
 			]
 		}) }), /* @__PURE__ */ jsx(PopoverContent, {
-			className: "w-52 p-0",
+			className: "w-max min-w-52 max-w-(--available-width) p-0",
 			align: "start",
 			children: /* @__PURE__ */ jsx(TableFacetedFilterContent, {
 				title,
@@ -177,16 +177,16 @@ function TableFacetedFilterContent({ title, options, selectedValues, onItemSelec
 						onSelect: () => onItemSelect(option, isSelected),
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: cn("mr-2 flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+								className: cn("mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
 								children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
 							}),
 							option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 size-4" }),
 							/* @__PURE__ */ jsx("span", {
-								className: "truncate",
+								className: "min-w-0 flex-1 whitespace-normal wrap-anywhere",
 								children: option.label
 							}),
 							option.count !== void 0 && /* @__PURE__ */ jsx("span", {
-								className: "ml-auto font-mono text-xs",
+								className: "ml-auto shrink-0 font-mono text-xs",
 								children: option.count
 							})
 						]

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

@@ -62,7 +62,7 @@ function TableSearchFilter({ table, className, placeholder = "Search...", label
 	]);
 	const hasValue = currentValue.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex flex-1 items-center", className),
+		className: cn("relative flex min-w-0 max-w-full flex-1 items-center", className),
 		role: "search",
 		children: [
 			/* @__PURE__ */ jsx(Search, {

package/dist/components/registry/niko-table/lib/flex-columns.d.ts

@@ -26,7 +26,7 @@ import { ColumnSizingState, RowData } from "@tanstack/react-table";
  * Returns the set of column ids to render widthless (empty when fill is off or
  * no eligible column exists — the table then sizes to its columns as before).
  */
-export declare function resolveFlexColumnIds<TData extends RowData>(table: DataTableInstance<TData>): ReadonlySet<string>;
+export declare function resolveFlexColumnIds<TData extends RowData>(table: DataTableInstance<TData>, pinningEnabled?: boolean): ReadonlySet<string>;
 /**
  * The width to render for a single column. Centralizes the flex + header-fit
  * rules so the header, body cells, and the min-width lock all agree.

package/dist/components/registry/niko-table/lib/flex-columns.js

@@ -24,19 +24,19 @@
 * Returns the set of column ids to render widthless (empty when fill is off or
 * no eligible column exists — the table then sizes to its columns as before).
 */
-function resolveFlexColumnIds(table) {
+function resolveFlexColumnIds(table, pinningEnabled = true) {
 	const ids = /* @__PURE__ */ new Set();
 	if (!table.options.enableColumnResizing) return ids;
 	if (table.options.meta?.disableFlexFill) return ids;
 	const leafColumns = table.getVisibleLeafColumns();
 	const columnSizing = table.state.columnSizing;
 	let hasExplicit = false;
-	for (const column of leafColumns) if (column.columnDef.meta?.flex === true && !column.getIsPinned() && columnSizing[column.id] == null) {
+	for (const column of leafColumns) if (column.columnDef.meta?.flex === true && !(pinningEnabled && column.getIsPinned()) && columnSizing[column.id] == null) {
 		ids.add(column.id);
 		hasExplicit = true;
 	}
 	if (hasExplicit) return ids;
-	const auto = leafColumns.find((column) => column.getCanResize() && !column.getIsPinned() && column.columnDef.meta?.flex !== false && columnSizing[column.id] == null);
+	const auto = leafColumns.find((column) => column.getCanResize() && !(pinningEnabled && column.getIsPinned()) && column.columnDef.meta?.flex !== false && columnSizing[column.id] == null);
 	if (auto) ids.add(auto.id);
 	return ids;
 }

package/dist/components/registry/niko-table/lib/styles.d.ts

@@ -2,5 +2,5 @@ import { DataTableFeatures } from "./data-table-features.js";
 import React from "react";
 import { Column, RowData } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/lib/styles.d.ts
-export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean) => React.CSSProperties;
+export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean, pinningEnabled?: boolean) => React.CSSProperties;
 //#endregion

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

@@ -1,8 +1,8 @@
 import "@tanstack/react-table";
 //#region src/components/registry/niko-table/lib/styles.ts
-const getCommonPinningStyles = (column, isHeader = false) => {
+const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true) => {
 	const isPinned = column.getIsPinned();
-	if (!isPinned) return {};
+	if (!isPinned || !pinningEnabled) return {};
 	const isLeft = isPinned === "start";
 	const columnSize = column.getSize();
 	return {
@@ -17,7 +17,7 @@ const getCommonPinningStyles = (column, isHeader = false) => {
 		flexShrink: 0,
 		zIndex: isHeader ? 20 : 10,
 		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)" }
+		boxShadow: isLeft ? "inset -1px 0 0 0 var(--border)" : "inset 1px 0 0 0 var(--border)"
 	};
 };
 //#endregion

package/dist/components/registry/niko-table/types/index.d.ts

@@ -23,6 +23,15 @@ declare module "@tanstack/react-table" {
      * `TableMeta.disableFlexFill`.
      */
     flex?: boolean;
+    /**
+     * Never hide this column to fit. Once any column sets it, a table whose
+     * columns do not fit its width hides the others, rightmost first, until
+     * they do, and `<DataTableCompactColumnsToggle />` shows them all again.
+     * Mark the few a reader needs to answer the table's question: the name and
+     * its result. Read `useDataTable().compactColumns?.hidden` in a cell to
+     * fold a hidden figure under a kept one.
+     */
+    compact?: boolean;
     variant?: FilterVariant;
     options?: Option[];
     range?: [number, number];

package/dist/components/registry/niko-table/ui/table.js

@@ -52,14 +52,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }

package/dist/components/registry/sidebar-07/app-sidebar.d.ts

@@ -14,5 +14,5 @@ export interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar>
   projects?: React$1.ComponentProps<typeof NavProjects>["projects"];
   user?: React$1.ComponentProps<typeof NavUser>["user"];
 }
-export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible, ...props }: AppSidebarProps): React$1.JSX.Element;
+export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible, className, ...props }: AppSidebarProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/sidebar-07/app-sidebar.js

@@ -1,5 +1,6 @@
 "use client";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "../../ui/sidebar.js";
+import { cn } from "../../../lib/utils.js";
 import { NavMain } from "./nav-main.js";
 import { NavProjects } from "./nav-projects.js";
 import { NavUser } from "./nav-user.js";
@@ -7,9 +8,10 @@ import { TeamSwitcher } from "./team-switcher.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/sidebar-07/app-sidebar.tsx
-function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible = "icon", ...props }) {
+function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible = "icon", className, ...props }) {
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible,
+		className: cn(collapsible !== "none" && "h-auto", className),
 		...props,
 		children: [
 			(header || teams) && /* @__PURE__ */ jsx(SidebarHeader, { children: header ?? (teams && /* @__PURE__ */ jsx(TeamSwitcher, { teams })) }),

package/dist/components/registry/sidebar-07/nav-main.d.ts

@@ -4,12 +4,13 @@ export declare function NavMain({ items, label }: {
   items: {
     title: string;
     url: string;
-    icon?: React.ReactNode;
+    icon: React.ReactNode;
     isActive?: boolean;
     linkProps?: Omit<React.ComponentProps<"a">, "href">;
     items?: {
       title: string;
       url: string;
+      isActive?: boolean;
     }[];
   }[];
 }): import("react").JSX.Element;

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

@@ -2,9 +2,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/co
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from "../../ui/sidebar.js";
 import { ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/registry/sidebar-07/nav-main.tsx
 function NavMain({ items, label = "Navigation" }) {
 	const { isMobile, setOpenMobile } = useSidebar();
+	const [expanded, setExpanded] = useState({});
 	const closeDrawer = () => {
 		if (isMobile) setOpenMobile(false);
 	};
@@ -19,18 +21,29 @@ function NavMain({ items, label = "Navigation" }) {
 		onClick: closeDrawer,
 		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
 	}) }, item.title) : /* @__PURE__ */ jsxs(Collapsible, {
-		defaultOpen: item.isActive,
+		open: expanded[item.title] ?? !!item.isActive,
+		onOpenChange: (open) => setExpanded((previous) => ({
+			...previous,
+			[item.title]: open
+		})),
 		className: "group/collapsible",
 		render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-			render: /* @__PURE__ */ jsx(SidebarMenuButton, { tooltip: item.title }),
+			render: /* @__PURE__ */ jsx(SidebarMenuButton, {
+				tooltip: item.title,
+				isActive: item.isActive && !item.items?.some((subItem) => subItem.isActive)
+			}),
 			children: [
 				item.icon,
 				/* @__PURE__ */ jsx("span", { children: item.title }),
 				/* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })
 			]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
-			render: /* @__PURE__ */ jsx("a", { href: subItem.url }),
+			isActive: subItem.isActive,
+			render: /* @__PURE__ */ jsx("a", {
+				href: subItem.url,
+				"aria-current": subItem.isActive ? "page" : void 0
+			}),
 			onClick: closeDrawer,
 			children: /* @__PURE__ */ jsx("span", { children: subItem.title })
 		}) }, subItem.title)) }) })]

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

@@ -0,0 +1,17 @@
+import { Tone } from "../../lib/tone.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/siyahi/callout.d.ts
+export interface CalloutProps extends Omit<ComponentProps<"aside">, "title"> {
+  /** neutral for an aside, accent for a key point, warning for a caution, positive or negative for a gain or a loss. */
+  tone?: Tone;
+  /** A lucide icon, drawn in the tone's colour. */
+  icon?: ReactNode;
+  title?: ReactNode;
+}
+/**
+ * A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
+ * inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use StatusAlert
+ * instead.
+ */
+export declare function Callout({ tone, icon, title, className, children, ...props }: CalloutProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/callout.js

@@ -0,0 +1,34 @@
+import { TONES } from "../../lib/tone.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/callout.tsx
+/**
+* A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
+* inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use StatusAlert
+* instead.
+*/
+function Callout({ tone = "neutral", icon, title, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		"data-slot": "callout",
+		"data-tone": tone,
+		className: cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", TONES[tone].box, className),
+		...props,
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			"data-slot": "callout-icon",
+			"aria-hidden": true,
+			className: cn("mt-0.5 shrink-0 [&>svg]:size-4", TONES[tone].ink),
+			children: icon
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1",
+			children: [title && /* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: title
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-pretty text-muted-foreground [&_strong]:text-foreground",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+export { Callout };

package/dist/components/siyahi/change-bar.d.ts

@@ -0,0 +1,21 @@
+import { DeltaProps } from "./delta.js";
+//#region src/components/siyahi/change-bar.d.ts
+export interface ChangeBarProps {
+  /** The signed change, as Delta takes it. */
+  value: number;
+  /** The column's largest change by size: Math.max(...rows.map((row) => Math.abs(row.change))). */
+  max: number;
+  /**
+   * Draws the bar from a centre line, losses leftward and gains rightward. Pass it when the column holds both signs:
+   * rows.some((row) => row.change < 0) && rows.some((row) => row.change > 0).
+   */
+  diverging?: boolean;
+  format?: DeltaProps["format"];
+  className?: string;
+}
+/**
+ * A table cell's change as a Delta over a 3px bar whose length is the change's size against the column's largest, so
+ * the rows rank by eye. The bar is neutral because it shows size; the Delta above it carries the gain or loss colour.
+ */
+export declare function ChangeBar({ value, max, diverging, format, className }: ChangeBarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/change-bar.js

@@ -0,0 +1,35 @@
+import { Delta } from "./delta.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/change-bar.tsx
+/**
+* A table cell's change as a Delta over a 3px bar whose length is the change's size against the column's largest, so
+* the rows rank by eye. The bar is neutral because it shows size; the Delta above it carries the gain or loss colour.
+*/
+function ChangeBar({ value, max, diverging = false, format, className }) {
+	const share = max > 0 ? Math.min(1, Math.abs(value) / max) : 0;
+	const half = diverging ? 50 : 100;
+	const side = diverging && value < 0 ? "right" : "left";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "change-bar",
+		className: cn("flex w-full flex-col items-end gap-1.5", className),
+		children: [/* @__PURE__ */ jsx(Delta, {
+			value,
+			format,
+			className: "font-medium"
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "relative h-0.75 w-full bg-muted",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "change-bar-fill",
+				className: "absolute inset-y-0 bg-foreground",
+				style: {
+					[side]: diverging ? "50%" : 0,
+					width: `${share * half}%`
+				}
+			}), diverging && /* @__PURE__ */ jsx("div", { className: "absolute -inset-y-1 left-1/2 w-px -translate-x-1/2 bg-muted-foreground" })]
+		})]
+	});
+}
+//#endregion
+export { ChangeBar };

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

@@ -0,0 +1,31 @@
+//#region src/components/siyahi/change-grid.d.ts
+export interface ChangeGridRow {
+  label: string;
+  /** One figure per column, in column order; null where there is none, such as a month still to come. NaN counts as none. */
+  values: readonly (number | null)[];
+  /** The row's total as the page works it out: monthly returns compound rather than add. Leave it out for no total. */
+  total?: number | null;
+  /** Unique key when labels repeat. Defaults to `label`. */
+  key?: string;
+}
+export interface ChangeGridProps {
+  /** The column heads, such as the months of a financial year. */
+  columns: readonly string[];
+  rows: readonly ChangeGridRow[];
+  /** "pct" takes fractions, 0.025 for 2.5%; "money" takes amounts, written short in one unit. */
+  format?: "pct" | "money";
+  /** The change that takes the deepest tint, as a size. Defaults to the grid's largest, totals aside. */
+  range?: number;
+  /** Heads the total column, which draws when any row has a total. */
+  totalLabel?: string;
+  /** Names the table for a screen reader, such as "Monthly sales growth by year". */
+  label: string;
+  className?: string;
+}
+/**
+ * Signed changes laid out rows by columns, such as each month of each year, every cell tinted by its sign and size
+ * as a Treemap tile is and written with its sign, with an optional total per row. The figure is always written, so
+ * the tint only helps the eye find the large months.
+ */
+export declare function ChangeGrid({ columns, rows, format, range, totalLabel, label, className }: ChangeGridProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,74 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { useFormat } from "../../lib/format.js";
+import { heat } from "../../lib/heat.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/change-grid.tsx
+const MINUS = "−";
+/** A figure the grid can draw: anything that is not a finite number, NaN included, is no figure at all. */
+const known = (value) => value != null && Number.isFinite(value) ? value : null;
+/**
+* Signed changes laid out rows by columns, such as each month of each year, every cell tinted by its sign and size
+* as a Treemap tile is and written with its sign, with an optional total per row. The figure is always written, so
+* the tint only helps the eye find the large months.
+*/
+function ChangeGrid({ columns, rows, format = "pct", range, totalLabel = "Total", label, className }) {
+	const f = useFormat();
+	const sizes = rows.flatMap(({ values }) => values.flatMap((value) => known(value) ?? []).map(Math.abs));
+	const deepest = known(range) ?? Math.max(0, ...sizes);
+	const write = (value) => {
+		if (value === null) return "—";
+		const size = format === "money" ? f.moneyCompact(Math.abs(value), deepest) : f.pct(Math.abs(value));
+		return `${value > 0 ? "+" : value < 0 ? MINUS : ""}${size}`;
+	};
+	const totals = rows.some((row) => row.total !== void 0);
+	return /* @__PURE__ */ jsxs(Table, {
+		"aria-label": label,
+		"data-slot": "change-grid",
+		className: cn("border-separate border-spacing-0.5", className),
+		children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
+			className: "hover:bg-transparent",
+			children: [
+				/* @__PURE__ */ jsx(TableHead, {
+					className: "sticky left-0 bg-card",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Row"
+					})
+				}),
+				columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+					className: "text-right",
+					children: column
+				}, column)),
+				totals && /* @__PURE__ */ jsx(TableHead, {
+					className: "text-right",
+					children: totalLabel
+				})
+			]
+		}) }), /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+			className: "border-0 hover:bg-transparent",
+			children: [
+				/* @__PURE__ */ jsx(TableHead, {
+					scope: "row",
+					className: "sticky left-0 bg-card font-medium",
+					children: row.label
+				}),
+				columns.map((column, index) => {
+					const value = known(row.values[index]);
+					return /* @__PURE__ */ jsx(TableCell, {
+						"data-slot": "change-grid-cell",
+						className: cn("rounded-sm text-right font-mono tabular-nums", value === null && "text-muted-foreground"),
+						style: { backgroundColor: heat(value, deepest) },
+						children: write(value)
+					}, column);
+				}),
+				totals && /* @__PURE__ */ jsx(TableCell, {
+					className: "text-right font-mono font-medium tabular-nums",
+					children: write(known(row.total))
+				})
+			]
+		}, row.key ?? row.label)) })]
+	});
+}
+//#endregion
+export { ChangeGrid };

package/dist/components/siyahi/data-bar.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-bar.d.ts
+export interface DataBarProps {
+  value: number;
+  /** The value a full bar stands for, usually the column's largest: Math.max(...rows.map((row) => row.value)). */
+  max: number;
+  /** "sign" draws a gain in --positive and a loss in --negative; by default every bar is --chart-1. */
+  tone?: "chart" | "sign";
+  /** The figure, as the page formats it. */
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
+ * The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
+ * keeps its height.
+ */
+export declare function DataBar({ value, max, tone, children, className }: DataBarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-bar.js

@@ -0,0 +1,29 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-bar.tsx
+/**
+* A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
+* The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
+* keeps its height.
+*/
+function DataBar({ value, max, tone = "chart", children, className }) {
+	const share = max > 0 ? Math.min(1, Math.abs(value) / max) : 0;
+	const fill = tone === "chart" ? "bg-chart-1" : value < 0 ? "bg-negative" : "bg-positive";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-bar",
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "h-1.5 w-16 shrink-0 overflow-hidden bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full", fill),
+				style: { width: `${share * 100}%` }
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children
+		})]
+	});
+}
+//#endregion
+export { DataBar };

package/dist/components/siyahi/data-table-compact-columns-toggle.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/siyahi/data-table-compact-columns-toggle.d.ts
+/** Renders only while some columns are hidden to fit, or the reader has shown them all. */
+export declare function DataTableCompactColumnsToggle(): import("react").JSX.Element | null;
+//#endregion

package/dist/components/siyahi/data-table-compact-columns-toggle.js

@@ -0,0 +1,19 @@
+import { Button } from "../ui/button.js";
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-compact-columns-toggle.tsx
+/** Renders only while some columns are hidden to fit, or the reader has shown them all. */
+function DataTableCompactColumnsToggle() {
+	const { compactColumns } = useDataTable();
+	if (!compactColumns) return null;
+	const { collapsed, setCollapsed } = compactColumns;
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm",
+		"aria-pressed": !collapsed,
+		onClick: () => setCollapsed(!collapsed),
+		children: collapsed ? `All columns (+${compactColumns.hidden.size})` : "Key columns"
+	});
+}
+//#endregion
+export { DataTableCompactColumnsToggle };

package/dist/components/siyahi/data-table-footnote.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-table-footnote.d.ts
+export interface DataTableFootnoteProps {
+  /** One sentence on how to read the table, such as what each bar measures. */
+  children: ReactNode;
+}
+/**
+ * A full-width last row, inside `DataTable` after its body, that explains the table's encoding. On a table wider than
+ * its card the note stays put at the card's width while the columns scroll under it.
+ */
+export declare function DataTableFootnote({ children }: DataTableFootnoteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-table-footnote.js

@@ -0,0 +1,35 @@
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/siyahi/data-table-footnote.tsx
+/**
+* A full-width last row, inside `DataTable` after its body, that explains the table's encoding. On a table wider than
+* its card the note stays put at the card's width while the columns scroll under it.
+*/
+function DataTableFootnote({ children }) {
+	const { table, scrollContainer } = useDataTable();
+	const [viewport, setViewport] = useState();
+	useEffect(() => {
+		if (!scrollContainer) return;
+		const observer = new ResizeObserver(() => setViewport(scrollContainer.clientWidth));
+		observer.observe(scrollContainer);
+		return () => observer.disconnect();
+	}, [scrollContainer]);
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "data-table-footnote",
+		children: /* @__PURE__ */ jsx("tr", {
+			className: "border-t",
+			children: /* @__PURE__ */ jsx("td", {
+				colSpan: table.getVisibleLeafColumns().length,
+				className: "p-0",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "sticky left-0 px-2 py-3 text-sm whitespace-normal text-muted-foreground",
+					style: { maxWidth: viewport },
+					children
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { DataTableFootnote };

package/dist/components/siyahi/default-sidebar-open.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/siyahi/default-sidebar-open.d.ts
+/**
+ * SidebarProvider's `defaultOpen` for an app shell: the reader's last choice, which the provider keeps in the
+ * `sidebar_state` cookie, else open — except on a short landscape screen, a phone held sideways, where an open
+ * sidebar leaves no room for the page. There it starts as the icon rail.
+ */
+export declare function defaultSidebarOpen(): boolean;
+//#endregion

package/dist/components/siyahi/default-sidebar-open.js

@@ -0,0 +1,13 @@
+//#region src/components/siyahi/default-sidebar-open.ts
+/**
+* SidebarProvider's `defaultOpen` for an app shell: the reader's last choice, which the provider keeps in the
+* `sidebar_state` cookie, else open — except on a short landscape screen, a phone held sideways, where an open
+* sidebar leaves no room for the page. There it starts as the icon rail.
+*/
+function defaultSidebarOpen() {
+	const saved = document.cookie.split("; ").find((entry) => entry.startsWith("sidebar_state="))?.slice(14);
+	if (saved !== void 0) return saved === "true";
+	return !matchMedia("(orientation: landscape) and (max-height: 30rem)").matches;
+}
+//#endregion
+export { defaultSidebarOpen };

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

@@ -5,6 +5,10 @@ export interface DeltaProps {
   format?: "pct" | "money";
   className?: string;
 }
-/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+/**
+ * A signed change: the figure in the surrounding text colour with its sign, and a trend icon in --positive or
+ * --negative. The sign and the icon's shape carry the direction, so colour is never the only cue, and a column of
+ * changes reads as figures rather than a wall of red and green.
+ */
 export declare function Delta({ value, format, className }: DeltaProps): import("react").JSX.Element;
 //#endregion