@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

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

@@ -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,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-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 rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-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/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-section.d.ts

@@ -12,7 +12,10 @@ export interface PageSectionProps {
   action?: ReactNode;
   children?: ReactNode;
 }
-/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+/**
+ * One part of a long page: a rule above, then the heading and lead on the canvas, then its content. Spaced for
+ * density, 24px under the rule and 16px to the content, so sections stacked 24px apart sit 24px either side of it.
+ */
 export declare function PageSection({ id, eyebrow, title, lead, action, children }: PageSectionProps): import("react").JSX.Element;
 /** A heading inside a PageSection, one level under its title. */
 export declare function PageSubheading({ children }: {

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

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/page-section.tsx
-/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+/**
+* One part of a long page: a rule above, then the heading and lead on the canvas, then its content. Spaced for
+* density, 24px under the rule and 16px to the content, so sections stacked 24px apart sit 24px either side of it.
+*/
 function PageSection({ id, eyebrow, title, lead, action, children }) {
 	return /* @__PURE__ */ jsxs("section", {
 		id,
 		"data-slot": "page-section",
-		className: "flex scroll-mt-6 flex-col gap-6 border-t pt-10",
+		className: "flex scroll-mt-6 flex-col gap-4 border-t pt-6",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-end justify-between gap-4",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -16,7 +19,7 @@ function PageSection({ id, eyebrow, title, lead, action, children }) {
 						children: eyebrow
 					}),
 					/* @__PURE__ */ jsx("h2", {
-						className: "text-2xl font-semibold tracking-tight",
+						className: "text-xl font-semibold tracking-tight",
 						children: title
 					}),
 					lead && /* @__PURE__ */ jsx("div", {

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