@siyahi/ui 0.1.9-next.20 → 0.1.9-next.22

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

@@ -1,4 +1,5 @@
 "use client";
+import { useTableWidth } from "../../../../lib/compact-columns.js";
 import { useGeneratedOptions } from "../hooks/use-generated-options.js";
 import { useHeaderMinWidths } from "../lib/use-header-min-widths.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -113,7 +114,7 @@ function useFlashSet() {
 		}
 	}, [])];
 }
-function DataTableProvider({ children, table, columns, isLoading: externalIsLoading }) {
+function DataTableProvider({ children, table, columns, isLoading: externalIsLoading, isCompact, onWidthChange, compactColumns }) {
 	const [state, dispatch] = useReducer(dataTableReducer, deriveInitialState(externalIsLoading));
 	const setIsLoading = useCallback((value) => {
 		dispatch({
@@ -127,25 +128,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 	}, []);
 	const [scrollContainer, setScrollContainer] = React.useState(null);
 	const registerScrollContainer = useCallback((el) => setScrollContainer(el), []);
-	const [isCompact, setIsCompact] = React.useState(false);
-	React.useLayoutEffect(() => {
-		if (!scrollContainer) return;
-		const measure = () => {
-			const width = scrollContainer.clientWidth;
-			if (width > 0) {
-				const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-				setIsCompact(width < 40 * rem);
-			}
-		};
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(scrollContainer);
-		window.addEventListener("resize", measure);
-		return () => {
-			observer.disconnect();
-			window.removeEventListener("resize", measure);
-		};
-	}, [scrollContainer]);
+	useTableWidth(scrollContainer, onWidthChange);
 	const scrollRowIntoView = useCallback((index, opts) => {
 		if (rowScrollerRef.current) {
 			rowScrollerRef.current(index, opts);
@@ -289,6 +272,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		registerRowScroller,
 		scrollContainer,
 		isCompact,
+		compactColumns,
 		registerScrollContainer,
 		headerMinWidths,
 		setColumnResizePreview: setManualResizePreview,
@@ -307,6 +291,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		registerRowScroller,
 		scrollContainer,
 		isCompact,
+		compactColumns,
 		registerScrollContainer,
 		headerMinWidths,
 		setManualResizePreview,

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

@@ -1,5 +1,6 @@
 import { TooltipProvider } from "../../../ui/tooltip.js";
 import { cn } from "../../../../lib/utils.js";
+import { fitColumns, isCompactWidth } from "../../../../lib/compact-columns.js";
 import { FILTER_VARIANTS, SYSTEM_COLUMN_IDS, SYSTEM_COLUMN_ID_LIST } from "../lib/constants.js";
 import { DataTableProvider } from "./data-table-context.js";
 import { detectFeaturesFromChildren } from "../config/feature-detection.js";
@@ -216,7 +217,23 @@ function DataTableRootInternal({ columns, data, children, className, config, get
 		...detectFeatures.enableColumnResizing ? { minSize: 40 } : {}
 	}), [detectFeatures.enableColumnResizing, detectFeatures.enableSorting]);
 	const controlledSorting = restState?.sorting ?? sorting;
-	const controlledColumnVisibility = restState?.columnVisibility ?? columnVisibility;
+	const [tableWidth, setTableWidth] = React.useState(0);
+	const isCompact = isCompactWidth(tableWidth);
+	const [showAllColumns, setShowAllColumns] = React.useState(false);
+	const requestedColumnVisibility = restState?.columnVisibility ?? columnVisibility;
+	const requestedColumnOrder = restState?.columnOrder ?? columnOrder;
+	const fitted = React.useMemo(() => fitColumns(columns, requestedColumnOrder, requestedColumnVisibility, tableWidth), [
+		columns,
+		requestedColumnOrder,
+		requestedColumnVisibility,
+		tableWidth
+	]);
+	const controlledColumnVisibility = fitted && !showAllColumns ? fitted.visibility : requestedColumnVisibility;
+	const compactColumns = React.useMemo(() => fitted && fitted.hidden.size > 0 ? {
+		collapsed: !showAllColumns,
+		hidden: showAllColumns ? NOTHING_HIDDEN : fitted.hidden,
+		setCollapsed: (value) => setShowAllColumns(!value)
+	} : null, [fitted, showAllColumns]);
 	const controlledRowSelection = restState?.rowSelection ?? rowSelection;
 	const controlledColumnFilters = restState?.columnFilters ?? columnFilters;
 	const controlledGlobalFilter = restState?.globalFilter !== void 0 ? restState.globalFilter : globalFilter$1;
@@ -369,6 +386,9 @@ function DataTableRootInternal({ columns, data, children, className, config, get
 		table,
 		columns: processedColumns,
 		isLoading,
+		isCompact,
+		onWidthChange: setTableWidth,
+		compactColumns,
 		children: /* @__PURE__ */ jsx(TooltipProvider, {
 			...tooltipProviderDelay,
 			children: /* @__PURE__ */ jsx("div", {
@@ -378,11 +398,16 @@ function DataTableRootInternal({ columns, data, children, className, config, get
 		})
 	});
 }
-function DataTableRoot({ table: externalTable, columns, data, children, className, isLoading, ...rest }) {
-	if (externalTable) return /* @__PURE__ */ jsx(DataTableProvider, {
-		table: externalTable,
+function ExternalTableRoot({ table, columns, children, className, isLoading }) {
+	const [tableWidth, setTableWidth] = React.useState(0);
+	const isCompact = isCompactWidth(tableWidth);
+	return /* @__PURE__ */ jsx(DataTableProvider, {
+		table,
 		columns,
 		isLoading,
+		isCompact,
+		onWidthChange: setTableWidth,
+		compactColumns: null,
 		children: /* @__PURE__ */ jsx(TooltipProvider, {
 			...tooltipProviderDelay,
 			children: /* @__PURE__ */ jsx("div", {
@@ -391,6 +416,16 @@ function DataTableRoot({ table: externalTable, columns, data, children, classNam
 			})
 		})
 	});
+}
+const NOTHING_HIDDEN = /* @__PURE__ */ new Set();
+function DataTableRoot({ table: externalTable, columns, data, children, className, isLoading, ...rest }) {
+	if (externalTable) return /* @__PURE__ */ jsx(ExternalTableRoot, {
+		table: externalTable,
+		columns,
+		className,
+		isLoading,
+		children
+	});
 	if (!columns || !data) throw new Error("DataTableRoot: Either provide a 'table' prop or both 'columns' and 'data' props");
 	return /* @__PURE__ */ jsx(DataTableRootInternal, {
 		columns,

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

@@ -41,6 +41,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 			};
 			return /* @__PURE__ */ jsxs(TableHead, {
 				"data-col-id": header.column.id,
+				"data-numeric": header.column.columnDef.meta?.variant === "number" || void 0,
 				style: headerStyle,
 				className: cn(!isCompact && header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),
 				children: [header.isPlaceholder ? null : /* @__PURE__ */ jsx(DataTableColumnHeaderRoot, {
@@ -82,6 +83,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 			return /* @__PURE__ */ jsx(TableCell, {
 				"data-flash": flashing ? "true" : void 0,
 				"data-col-id": cell.column.id,
+				"data-numeric": cell.column.columnDef.meta?.variant === "number" || void 0,
 				style: cellStyle,
 				className: cn(!cell.getIsGrouped() && "truncate", !isCompact && 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)

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

@@ -17,7 +17,7 @@ const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true)
 		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/sidebar-07/nav-main.d.ts

@@ -10,6 +10,7 @@ export declare function NavMain({ items, label }: {
     items?: {
       title: string;
       url: string;
+      isActive?: boolean;
     }[];
   }[];
 }): import("react").JSX.Element;

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

@@ -29,14 +29,21 @@ function NavMain({ items, label = "Navigation" }) {
 		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,24 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/siyahi/callout.d.ts
+declare const TONES: {
+  readonly neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground";
+  readonly accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link";
+  readonly warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning";
+  readonly positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive";
+  readonly negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative";
+};
+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?: keyof typeof TONES;
+  /** 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 Alert or
+ * WarningAlert instead.
+ */
+export declare function Callout({ tone, icon, title, className, children, ...props }: CalloutProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/callout.js

@@ -0,0 +1,40 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/callout.tsx
+const TONES = {
+	neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground",
+	accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link",
+	warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning",
+	positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive",
+	negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative"
+};
+/**
+* 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 Alert or
+* WarningAlert 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], className),
+		...props,
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			"data-slot": "callout-icon",
+			"aria-hidden": true,
+			className: "mt-0.5 shrink-0 [&>svg]:size-4",
+			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 rounded-full bg-muted",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "change-bar-fill",
+				className: "absolute inset-y-0 rounded-full 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/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

package/dist/components/siyahi/delta.js

@@ -1,24 +1,29 @@
 import { useFormat } from "../../lib/format.js";
 import { cn } from "cn";
+import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/delta.tsx
-/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+const MINUS = "−";
+/**
+* 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.
+*/
 function Delta({ value, format = "pct", className }) {
 	const f = useFormat();
 	const size = format === "money" ? f.money(Math.abs(value)) : f.pct(Math.abs(value));
-	const direction = value > 0 ? "up" : value < 0 ? "down" : null;
+	const direction = value > 0 ? "up" : value < 0 ? "down" : "none";
+	const Icon = direction === "up" ? TrendingUpIcon : direction === "down" ? TrendingDownIcon : MinusIcon;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "delta",
-		className: cn("inline-flex items-center gap-1 tabular-nums", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === null && "text-muted-foreground", className),
+		"data-direction": direction,
+		className: cn("inline-flex items-center gap-1 whitespace-nowrap", className),
 		children: [
-			direction && /* @__PURE__ */ jsx("span", {
+			/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
-				children: direction === "up" ? "▲" : "▼"
-			}),
-			direction && /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: direction
+				className: cn("size-3.5 shrink-0", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
 			}),
+			direction === "up" ? "+" : direction === "down" ? MINUS : "",
 			size
 		]
 	});

package/dist/components/siyahi/page-hero.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/page-hero.d.ts
+export interface PageHeroProps {
+  /** A short line above the title in the link colour, such as a package or a section name. */
+  eyebrow?: ReactNode;
+  /** The page's h1, set large. */
+  title: ReactNode;
+  /** What the page is, in a sentence or two, in the body colour. */
+  lead?: ReactNode;
+  /** Muted detail under the lead: scope, sources, what is left out. */
+  detail?: ReactNode;
+  /** The one or two places a reader goes next, usually a primary Button and an outline one. */
+  actions?: ReactNode;
+  /**
+   * A large decorative mark drawn faintly in the accent behind the top right, such as the product's logo as an
+   * SVG that paints with currentColor. It is hidden from assistive technology.
+   */
+  mark?: ReactNode;
+}
+/**
+ * The introduction at the top of a front page or a long explainer: a large title, what the page is, and where to
+ * go next, on a card with an optional watermark. 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;
+//#endregion

package/dist/components/siyahi/page-hero.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/page-hero.tsx
+/**
+* The introduction at the top of a front page or a long explainer: a large title, what the page is, and where to
+* go next, on a card with an optional watermark. One per page, above everything else; a section uses PageSection.
+*/
+function PageHero({ eyebrow, title, lead, detail, actions, mark }) {
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "page-hero",
+		className: "relative isolate flex flex-col gap-4 overflow-hidden rounded-2xl border bg-card px-6 py-8 sm:px-10 sm:py-10",
+		children: [
+			mark && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute -top-8 -right-10 -z-10 size-80 text-chart-1 opacity-10 sm:-top-12 sm:right-4 [&>svg]:size-full",
+				children: mark
+			}),
+			eyebrow && /* @__PURE__ */ jsx("p", {
+				className: "font-mono text-xs text-link",
+				children: eyebrow
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-5xl font-semibold tracking-tighter text-balance sm:text-6xl",
+				children: title
+			}),
+			lead && /* @__PURE__ */ jsx("div", {
+				className: "max-w-xl text-lg text-pretty",
+				children: lead
+			}),
+			detail && /* @__PURE__ */ jsx("div", {
+				className: "max-w-xl text-pretty text-muted-foreground",
+				children: detail
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "mt-2 flex flex-wrap gap-2",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+export { PageHero };

package/dist/components/siyahi/page-toc.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/siyahi/page-toc.d.ts
+export interface PageTocItem {
+  /** The `id` of the PageSection it jumps to. */
+  id: string;
+  title: string;
+}
+export interface PageTocProps {
+  items: PageTocItem[];
+  /** Names the navigation for screen readers. */
+  label?: string;
+  /** Layout only, such as `top-14` under a sticky page header. */
+  className?: string;
+}
+/**
+ * A long page's sections as one sticky "On this page" index. It stays at the top while the reader scrolls,
+ * underlines the section in view in the link colour, and scrolls sideways on a phone with the current link kept
+ * in sight.
+ */
+export declare function PageToc({ items, label, className }: PageTocProps): import("react").JSX.Element;
+//#endregion