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

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

@@ -1,4 +1,6 @@
 import { cn } from "../../../lib/utils.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 import { format } from "date-fns";
@@ -16,13 +18,12 @@ const calculateLevel = (value, minValue, maxValue, levels, isNormalized) => {
 	const percentage = value / maxValue;
 	return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
 };
-const getLevelFill = (level, levels, isNormalized, highlighted = false, colors) => {
+const getLevelFill = (level, levels, isNormalized, colors) => {
 	const emptyColor = colors?.empty ?? "var(--color-secondary)";
 	const scaleColor = colors?.scale ?? "var(--color-chart-1)";
 	if (level === 0) return emptyColor;
 	const steps = colorStepCount(levels, isNormalized);
-	const opacity = steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1));
-	return `color-mix(in oklch, ${scaleColor} ${highlighted ? Math.round(opacity * .6) : opacity}%, transparent)`;
+	return `color-mix(in oklch, ${scaleColor} ${steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1))}%, transparent)`;
 };
 const DEFAULT_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0"));
 const TWELVE_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => {
@@ -47,6 +48,10 @@ const generateWeekdayLabels = (locale) => Array.from({ length: 7 }, (_, i) => {
 });
 const EMPTY_STYLE = {};
 const LABEL_MARGIN = 8;
+const LEGEND_SWATCH = 12;
+const MIN_FITTED_BLOCK = 14;
+const MAX_FITTED_BLOCK = 44;
+const DEFAULT_BLOCK = 24;
 const WeekdayHeatmapContext = createContext(null);
 const useWeekdayHeatmap = () => {
 	const context = use(WeekdayHeatmapContext);
@@ -84,8 +89,10 @@ const useWeekdayHeatmap = () => {
 * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
 * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
 */
-const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
+const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displayedWeekdays, use12Hour = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
+	const [rootRef, rootWidth] = useElementWidth();
+	const weekdays = useMemo(() => displayedWeekdays ?? Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7), [displayedWeekdays, weekStart]);
 	const dataWithLevels = useMemo(() => {
 		if (data.length === 0) return [];
 		const maxRegular = data.reduce((m, d) => Math.max(m, d.value), 1);
@@ -141,7 +148,7 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		const weekdayLabels = locale ? generateWeekdayLabels(locale) : DEFAULT_WEEKDAY_LABELS;
 		return {
 			hours: use12Hour ? TWELVE_HOUR_LABELS : DEFAULT_HOUR_LABELS,
-			endHour: use12Hour ? "12" : "00",
+			endHour: hours.at(-1) === 23 ? use12Hour ? "12" : "00" : (use12Hour ? TWELVE_HOUR_LABELS : DEFAULT_HOUR_LABELS)[(hours.at(-1) ?? -1) + 1],
 			weekdays: weekdayLabels,
 			cellLabel: "{{weekday}} {{hour}}: {{value}}",
 			heatmapLabel: "Activity heatmap by weekday and hour",
@@ -152,16 +159,20 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 	}, [
 		locale,
 		use12Hour,
-		labelsProp
+		labelsProp,
+		hours
 	]);
 	const labelWidth = fontSize * 3.5 + LABEL_MARGIN;
 	const totalCount = typeof totalCountProp === "number" ? totalCountProp : dataWithLevels.reduce((sum, a) => sum + a.value, 0);
+	const hasExtraColumn = resolvedExtraColumn !== null;
+	const columns = hours.length + (hasExtraColumn ? 2 : 0);
+	const fitted = (rootWidth - 24 - labelWidth - columns * blockMargin + (hasExtraColumn ? 0 : blockMargin)) / (columns + (hasExtraColumn ? 1 / (2 * blockAspectRatio) : 0));
+	const blockSize = blockSizeProp ?? (rootWidth > 0 ? Math.min(MAX_FITTED_BLOCK, Math.max(MIN_FITTED_BLOCK, fitted)) / blockAspectRatio : DEFAULT_BLOCK);
 	const blockWidth = blockSize * blockAspectRatio;
 	const labelHeight = fontSize + LABEL_MARGIN;
-	const hasExtraColumn = resolvedExtraColumn !== null;
 	const hasExtraRow = resolvedExtraRow !== null;
-	const width = 24 * (blockWidth + blockMargin) + (hasExtraColumn ? blockSize / 2 + (blockWidth + blockMargin) * 2 : 0) - blockMargin + labelWidth;
-	const rowCount = hasExtraRow ? 8 : 7;
+	const width = hours.length * (blockWidth + blockMargin) + (hasExtraColumn ? blockSize / 2 + (blockWidth + blockMargin) * 2 : 0) - blockMargin + labelWidth;
+	const rowCount = weekdays.length + (hasExtraRow ? 1 : 0);
 	const extraRowGap = hasExtraRow ? blockSize + blockMargin : 0;
 	const height = rowCount * (blockSize + blockMargin) + extraRowGap - blockMargin + labelHeight;
 	const contextValue = useMemo(() => ({
@@ -183,6 +194,8 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		width,
 		height,
 		weekStart,
+		hours,
+		weekdays,
 		colors
 	}), [
 		dataWithLevels,
@@ -203,14 +216,17 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		width,
 		height,
 		weekStart,
+		hours,
+		weekdays,
 		colors
 	]);
 	if (data.length === 0) return emptyState ? emptyState : null;
 	return /* @__PURE__ */ jsx(WeekdayHeatmapContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
 			"data-slot": "weekday-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			className: cn("flex flex-col gap-2", blockSizeProp === void 0 ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -220,16 +236,18 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		})
 	});
 };
-const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
-	const { blockSize, blockWidth, blockMargin, blockRadius, labelWidth, labelHeight, levels, isNormalized, weekStart, labels, colors } = useWeekdayHeatmap();
+const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+	const { blockSize, blockWidth, blockMargin, blockRadius, labelWidth, labelHeight, levels, isNormalized, hours, weekdays, labels, colors } = useWeekdayHeatmap();
 	const level = Math.max(0, Math.min(colorStepCount(levels, isNormalized), activity.level));
 	const isExtraRow = extra === "row";
 	const isExtraColumn = extra === "column";
-	const rowIndex = isExtraRow ? 7 : (activity.weekday - weekStart + 7) % 7;
+	const rowIndex = isExtraRow ? weekdays.length : weekdays.findIndex((day) => day === activity.weekday);
+	const hourIndex = isExtraColumn ? hours.length : hours.findIndex((hour) => hour === activity.hour);
+	if (rowIndex < 0 || hourIndex < 0) return null;
 	const extraRowGap = isExtraRow ? blockSize + blockMargin : 0;
 	const yPosition = labelHeight + (blockSize + blockMargin) * rowIndex + extraRowGap;
 	const extraColumnGap = isExtraColumn ? blockWidth + blockMargin : 0;
-	const xPosition = isExtraColumn ? labelWidth + 24 * (blockWidth + blockMargin) + blockSize / 2 + extraColumnGap : labelWidth + (blockWidth + blockMargin) * activity.hour;
+	const xPosition = isExtraColumn ? labelWidth + hours.length * (blockWidth + blockMargin) + blockSize / 2 + extraColumnGap : labelWidth + (blockWidth + blockMargin) * hourIndex;
 	const weekdayToken = isExtraRow ? "extra" : labels.weekdays?.[activity.weekday] ?? String(activity.weekday);
 	const hourToken = isExtraColumn ? "extra" : `${String(activity.hour).padStart(2, "0")}:00`;
 	const ariaLabel = (labels.cellLabel ?? "{{weekday}} {{hour}}: {{value}}").replace("{{weekday}}", weekdayToken).replace("{{hour}}", hourToken).replace("{{value}}", String(activity.value));
@@ -237,14 +255,16 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		ref,
 		"data-slot": "weekday-heatmap-block",
 		role: onCellClick ? "button" : "img",
+		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
-		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+		className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer", className),
 		"data-value": activity.value,
 		"data-weekday": isExtraRow ? "extra" : activity.weekday,
 		"data-hour": isExtraColumn ? "extra" : activity.hour,
 		"data-level": level,
 		"data-highlighted": highlighted || void 0,
+		"data-selected": selected || void 0,
 		height: blockSize,
 		rx: blockRadius,
 		ry: blockRadius,
@@ -252,7 +272,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		x: xPosition,
 		y: yPosition,
 		style: {
-			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			fill: getLevelFill(level, levels, isNormalized, colors),
 			...styleProp
 		},
 		onClick: (event) => {
@@ -279,7 +299,8 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 };
 WeekdayHeatmapBlock.displayName = "WeekdayHeatmapBlock";
 const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false, className, labelClassName, children, renderExtraRow, renderExtraColumn, ...props }) => {
-	const { data, extraRow, extraColumn, blockSize, blockWidth, blockMargin, labels, labelWidth, labelHeight, fontSize, weekStart } = useWeekdayHeatmap();
+	const navigation = useHeatmapNavigation();
+	const { data, extraRow, extraColumn, blockSize, blockWidth, blockMargin, labels, labelWidth, labelHeight, fontSize, hours, weekdays } = useWeekdayHeatmap();
 	const hasExtraRow = extraRow !== null;
 	const hasExtraColumn = extraColumn !== null;
 	const activityMap = useMemo(() => {
@@ -299,24 +320,24 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 	}, [extraColumn]);
 	const regularActivities = useMemo(() => {
 		const activities = [];
-		for (let di = 0; di < 7; di++) {
-			const weekday = (weekStart + di) % 7;
-			for (let hour = 0; hour < 24; hour++) activities.push({
-				activity: activityMap.get(`${weekday}-${hour}`) ?? {
-					weekday,
-					hour,
-					value: 0,
-					level: 0
-				},
-				weekdayIndex: di
-			});
-		}
+		for (const [di, weekday] of weekdays.entries()) for (const hour of hours) activities.push({
+			activity: activityMap.get(`${weekday}-${hour}`) ?? {
+				weekday,
+				hour,
+				value: 0,
+				level: 0
+			},
+			weekdayIndex: di
+		});
 		return activities;
-	}, [activityMap, weekStart]);
+	}, [
+		activityMap,
+		weekdays,
+		hours
+	]);
 	const extraColumnActivities = useMemo(() => {
 		if (!extraColumnMap) return [];
-		return Array.from({ length: 7 }, (_, di) => {
-			const weekday = (weekStart + di) % 7;
+		return weekdays.map((weekday, di) => {
 			const entry = extraColumnMap.get(weekday);
 			return entry ? {
 				activity: {
@@ -328,44 +349,53 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 				weekdayIndex: di
 			} : null;
 		}).filter((a) => a !== null);
-	}, [extraColumnMap, weekStart]);
+	}, [extraColumnMap, weekdays]);
 	const extraRowActivities = useMemo(() => {
 		if (!extraRow) return [];
-		return extraRow.values.map(({ hour, value, level }) => ({
+		return extraRow.values.filter(({ hour }) => hours.includes(hour)).map(({ hour, value, level }) => ({
 			activity: {
 				weekday: 0,
 				hour,
 				value,
 				level
 			},
-			weekdayIndex: 7
+			weekdayIndex: weekdays.length
 		}));
-	}, [extraRow]);
-	const rowCount = hasExtraRow ? 8 : 7;
+	}, [
+		extraRow,
+		hours,
+		weekdays.length
+	]);
+	const rowCount = weekdays.length + (hasExtraRow ? 1 : 0);
 	const extraRowGap = hasExtraRow ? blockSize + blockMargin : 0;
 	const svgHeight = rowCount * (blockSize + blockMargin) + extraRowGap - blockMargin + labelHeight;
 	const extraColumnGap = hasExtraColumn ? blockWidth + blockMargin : 0;
-	const svgWidth = hasExtraColumn ? labelWidth + 24 * (blockWidth + blockMargin) + blockSize / 2 + (blockWidth + blockMargin) + extraColumnGap : labelWidth + 24 * (blockWidth + blockMargin) - blockMargin;
-	const orderedWeekdayIndices = Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7);
+	const svgWidth = hasExtraColumn ? labelWidth + hours.length * (blockWidth + blockMargin) + blockSize / 2 + (blockWidth + blockMargin) + extraColumnGap : labelWidth + hours.length * (blockWidth + blockMargin) - blockMargin;
+	const orderedWeekdayIndices = weekdays;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "weekday-heatmap-body",
+		ref: navigation.ref,
 		className: cn("max-w-full overflow-x-auto overflow-y-hidden", className),
 		...props,
+		onKeyDown: (event) => {
+			props.onKeyDown?.(event);
+			if (!event.defaultPrevented) navigation.onKeyDown(event);
+		},
 		children: /* @__PURE__ */ jsxs("svg", {
 			role: "img",
 			"aria-label": labels.heatmapLabel ?? "Activity heatmap by weekday and hour",
 			className: "block overflow-visible rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-			height: svgHeight + 40,
-			viewBox: `-20 -20 ${svgWidth + 40} ${svgHeight + 40}`,
-			width: svgWidth + 40,
+			height: svgHeight + 24,
+			viewBox: `-12 -12 ${svgWidth + 24} ${svgHeight + 24}`,
+			width: svgWidth + 24,
 			children: [
 				!hideHourLabels && /* @__PURE__ */ jsxs("g", {
 					className: cn("fill-current font-mono", labelClassName),
 					children: [
-						HOURS.map((hour) => {
+						hours.map((hour, index) => {
 							const label = labels.hours?.[hour] ?? "";
 							return /* @__PURE__ */ jsx("text", {
-								x: labelWidth + (blockWidth + blockMargin) * hour,
+								x: labelWidth + (blockWidth + blockMargin) * index,
 								y: 0,
 								textAnchor: "middle",
 								dominantBaseline: "hanging",
@@ -374,7 +404,7 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 							}, `hour-${hour}`);
 						}),
 						labels.endHour != null && /* @__PURE__ */ jsx("text", {
-							x: labelWidth + (blockWidth + blockMargin) * 24,
+							x: labelWidth + (blockWidth + blockMargin) * hours.length,
 							y: 0,
 							textAnchor: "middle",
 							dominantBaseline: "hanging",
@@ -382,7 +412,7 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 							children: labels.endHour
 						}, "hour-end"),
 						hasExtraColumn && /* @__PURE__ */ jsx("text", {
-							x: labelWidth + 24 * (blockWidth + blockMargin) + blockSize / 2 + (blockWidth + blockMargin) + blockWidth / 2,
+							x: labelWidth + hours.length * (blockWidth + blockMargin) + blockSize / 2 + (blockWidth + blockMargin) + blockWidth / 2,
 							y: 0,
 							textAnchor: "middle",
 							dominantBaseline: "hanging",
@@ -406,7 +436,7 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 						}, `weekday-${weekday}`);
 					}), hasExtraRow && /* @__PURE__ */ jsx("text", {
 						x: labelWidth - 8,
-						y: labelHeight + (blockSize + blockMargin) * 7 + (blockSize + blockMargin) + blockSize / 2,
+						y: labelHeight + (blockSize + blockMargin) * weekdays.length + (blockSize + blockMargin) + blockSize / 2,
 						dominantBaseline: "middle",
 						textAnchor: "end",
 						style: { fontSize: `${fontSize * .75}px` },
@@ -450,7 +480,7 @@ const WeekdayHeatmapStat = ({ compute, label, className, children, ...props }) =
 	});
 };
 const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { levels, isNormalized, blockSize, blockWidth, blockRadius, colors, labels } = useWeekdayHeatmap();
+	const { levels, isNormalized, blockRadius, colors, labels } = useWeekdayHeatmap();
 	const lessLabel = labelsProp?.less ?? "Less";
 	const moreLabel = labelsProp?.more ?? "More";
 	const legendLevels = Array.from({ length: levels }, (_, i) => isNormalized ? i + 1 : i);
@@ -467,15 +497,15 @@ const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...prop
 			legendLevels.map((level) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({ level }) }, `legend-level-${level}`) : /* @__PURE__ */ jsx("svg", {
 				role: "img",
 				"aria-label": (labels.legendLevelLabel ?? "{{level}} contributions").replace("{{level}}", String(level)),
-				height: blockSize,
-				width: blockWidth,
+				height: LEGEND_SWATCH,
+				width: LEGEND_SWATCH,
 				children: /* @__PURE__ */ jsx("rect", {
 					"data-level": level,
-					height: blockSize,
+					height: LEGEND_SWATCH,
 					rx: blockRadius,
 					ry: blockRadius,
-					width: blockWidth,
-					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
+					width: LEGEND_SWATCH,
+					style: { fill: getLevelFill(level, levels, isNormalized, colors) }
 				})
 			}, `legend-level-${level}`)),
 			/* @__PURE__ */ jsx("span", {

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

@@ -91,6 +91,13 @@ type DataTableContextProps<TData extends RowData> = DataTableContextState & {
    * `null` until the container mounts (or when no `<DataTable>` is used).
    */
   scrollContainer: HTMLElement | null;
+  /** True below 40rem of table space; use for compact toolbar and record layouts. */
+  isCompact: boolean;
+  /**
+   * Set while some columns do not fit and the table has `meta.compact`
+   * columns: they hide, rightmost first, until the reader asks for all.
+   */
+  compactColumns: CompactColumns | null;
   /** Internal: `<DataTable>` registers its scroll container element here. */
   registerScrollContainer: (el: HTMLElement | null) => void;
   /**
@@ -146,12 +153,22 @@ export declare enum DataTableActions {
   SET = 0,
   SET_IS_LOADING = 1
 }
+export interface CompactColumns {
+  /** True while columns are hidden to fit; false once the reader shows them all. */
+  collapsed: boolean;
+  /** The columns hidden to fit right now, for a cell to fold one under a kept figure. */
+  hidden: ReadonlySet<string>;
+  setCollapsed: (collapsed: boolean) => void;
+}
 interface DataTableProviderProps<TData extends RowData> {
   children: React.ReactNode;
   table: DataTableInstance<TData>;
   columns?: DataTableColumnDef<TData>[];
   isLoading?: boolean;
+  isCompact: boolean;
+  onWidthChange: (width: number) => void;
+  compactColumns: CompactColumns | null;
 }
-export declare function DataTableProvider<TData extends RowData>({ children, table, columns, isLoading: externalIsLoading }: DataTableProviderProps<TData>): React.JSX.Element;
+export declare function DataTableProvider<TData extends RowData>({ children, table, columns, isLoading: externalIsLoading, isCompact, onWidthChange, compactColumns }: DataTableProviderProps<TData>): React.JSX.Element;
 //#endregion
 export { DataTableContext };

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,6 +128,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 	}, []);
 	const [scrollContainer, setScrollContainer] = React.useState(null);
 	const registerScrollContainer = useCallback((el) => setScrollContainer(el), []);
+	useTableWidth(scrollContainer, onWidthChange);
 	const scrollRowIntoView = useCallback((index, opts) => {
 		if (rowScrollerRef.current) {
 			rowScrollerRef.current(index, opts);
@@ -269,6 +271,8 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		scrollRowIntoView,
 		registerRowScroller,
 		scrollContainer,
+		isCompact,
+		compactColumns,
 		registerScrollContainer,
 		headerMinWidths,
 		setColumnResizePreview: setManualResizePreview,
@@ -286,6 +290,8 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		scrollRowIntoView,
 		registerRowScroller,
 		scrollContainer,
+		isCompact,
+		compactColumns,
 		registerScrollContainer,
 		headerMinWidths,
 		setManualResizePreview,

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

@@ -1,5 +1,6 @@
 import { Button } from "../../../ui/button.js";
 import { cn } from "../../../../lib/utils.js";
+import { useDataTable } from "./data-table-context.js";
 import { DataTableGroupRowProvider, useDataTableGroupRow } from "../components/data-table-grouped-rows.js";
 import { TableCell, TableRow } from "../ui/table.js";
 import { isInteractiveClickTarget } from "../lib/row-click.js";
@@ -18,12 +19,13 @@ import { flexRender } from "@tanstack/react-table";
 * groups you don't want to special-case.
 */
 function DataTableGroupedRowCells() {
+	const { isCompact } = useDataTable();
 	const { row, groupLabel, count, isExpanded, toggle, columnWidths } = useDataTableGroupRow();
 	const countLabel = `${count} ${count === 1 ? "row" : "rows"}`;
 	return /* @__PURE__ */ jsx(Fragment, { children: row.getVisibleCells().map((cell) => {
 		const cellStyle = {
 			width: columnWidths.get(cell.column.id),
-			...getCommonPinningStyles(cell.column, false)
+			...getCommonPinningStyles(cell.column, false, !isCompact)
 		};
 		let content = null;
 		if (cell.getIsGrouped()) content = /* @__PURE__ */ jsxs("div", {

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

@@ -20,11 +20,11 @@ import React from "react";
 import { flexRender } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/core/data-table-structure.tsx
 const DataTableHeader = React.memo(function DataTableHeader({ className, sticky = true }) {
-	const { table, headerMinWidths, setColumnResizePreview } = useDataTable();
+	const { table, headerMinWidths, setColumnResizePreview, isCompact } = useDataTable();
 	const resizing = table?.options.enableColumnResizing ?? false;
 	const headerGroups = table?.getHeaderGroups() ?? [];
 	if (headerGroups.length === 0) return null;
-	const flexColumnIds = resolveFlexColumnIds(table);
+	const flexColumnIds = resolveFlexColumnIds(table, !isCompact);
 	const columnSizing = table.state.columnSizing;
 	return /* @__PURE__ */ jsx(TableHeader, {
 		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),
@@ -37,12 +37,13 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 					columnSizing,
 					headerMinWidths
 				}),
-				...getCommonPinningStyles(header.column, true)
+				...getCommonPinningStyles(header.column, true, !isCompact)
 			};
 			return /* @__PURE__ */ jsxs(TableHead, {
 				"data-col-id": header.column.id,
+				"data-numeric": header.column.columnDef.meta?.variant === "number" || void 0,
 				style: headerStyle,
-				className: cn(header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),
+				className: cn(!isCompact && header.column.getIsPinned() && "bg-background", resizing && "relative overflow-hidden"),
 				children: [header.isPlaceholder ? null : /* @__PURE__ */ jsx(DataTableColumnHeaderRoot, {
 					column: header.column,
 					children: resizing && typeof header.column.columnDef.header === "string" ? /* @__PURE__ */ jsx("span", {
@@ -61,7 +62,7 @@ const DataTableHeader = React.memo(function DataTableHeader({ className, sticky
 DataTableHeader.displayName = "DataTableHeader";
 /** Fade-pulse animation applied to a flashing cell (keyframe in the provider). */
 const FLASH_ANIMATION = "niko-row-flash 1.2s ease-out";
-const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu }) {
+const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId, isCompact, isClickable, isExpanded, isSelected, columnWidths, isRowFlashing, flashingCellKeys, renderRowContextMenu }) {
 	const expandCell = isExpanded && expandColumnId ? row.getAllCells().find((c) => c.column.id === expandColumnId) : void 0;
 	const visibleCells = row.getVisibleCells();
 	const rowElement = /* @__PURE__ */ jsx(TableRow, {
@@ -76,14 +77,15 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 			const flashing = isRowFlashing || flashingCellKeys.has(flashCellKey(row.id, cell.column.id));
 			const cellStyle = {
 				width: columnWidths.get(cell.column.id),
-				...getCommonPinningStyles(cell.column, false),
+				...getCommonPinningStyles(cell.column, false, !isCompact),
 				...flashing ? { animation: FLASH_ANIMATION } : {}
 			};
 			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", 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"),
+				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)
 			}, cell.id);
 		})
@@ -101,7 +103,7 @@ const BodyRow = React.memo(function BodyRow({ row, displayIndex, expandColumnId,
 });
 BodyRow.displayName = "BodyRow";
 function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolledBottom, scrollThreshold = 50, onRowClick, getRowMemoKey, renderRowContextMenu }) {
-	const { table, columns, isLoading, flashingRowIds, flashingCellKeys, registerRowScroller, headerMinWidths } = useDataTable();
+	const { table, columns, isLoading, flashingRowIds, flashingCellKeys, registerRowScroller, headerMinWidths, isCompact } = useDataTable();
 	const { rows } = table.getRowModel();
 	const containerRef = React.useRef(null);
 	React.useEffect(() => {
@@ -139,13 +141,14 @@ function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolle
 	const expandColumnId = React.useMemo(() => table.getAllColumns().find((col) => col.columnDef.meta?.expandedContent)?.id, [table, columns]);
 	const { columnVisibility, columnOrder, columnPinning, columnSizing } = table.state;
 	const resizing = table.options.enableColumnResizing ?? false;
-	const flexColumnIds = React.useMemo(() => resolveFlexColumnIds(table), [
+	const flexColumnIds = React.useMemo(() => resolveFlexColumnIds(table, !isCompact), [
 		table,
 		columnVisibility,
 		columnOrder,
 		columnPinning,
 		columnSizing,
-		resizing
+		resizing,
+		isCompact
 	]);
 	const columnWidths = React.useMemo(() => {
 		const widths = /* @__PURE__ */ new Map();
@@ -166,14 +169,15 @@ function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolle
 		resizing
 	]);
 	const columnLayoutSignature = React.useMemo(() => table.getVisibleLeafColumns().map((c) => {
-		const pinned = c.getIsPinned();
+		const pinned = !isCompact && c.getIsPinned();
 		const base = pinned ? `${c.id}:${pinned}` : c.id;
 		return resizing ? `${base}:${columnWidths.get(c.id) ?? "flex"}` : base;
 	}).join(","), [
 		table,
 		columns,
 		columnWidths,
-		resizing
+		resizing,
+		isCompact
 	]);
 	const isClickable = !!onRowClick;
 	const resolvedRenderRowContextMenu = useResolvedRowContextMenuRenderer(renderRowContextMenu, children);
@@ -232,6 +236,7 @@ function DataTableBody({ children, className, onScroll, onScrolledTop, onScrolle
 			row,
 			displayIndex,
 			expandColumnId,
+			isCompact,
 			isClickable,
 			isExpanded: row.getIsExpanded(),
 			isSelected: row.getIsSelected(),

package/dist/components/registry/niko-table/core/data-table.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 //#region src/components/registry/niko-table/core/data-table.d.ts
-export interface DataTableContainerProps {
+export interface DataTableContainerProps extends React.AriaAttributes {
   children: React.ReactNode;
   /**
    * Additional CSS classes for the container.
@@ -23,7 +23,7 @@ export interface DataTableContainerProps {
    */
   maxHeight?: number | string;
 }
-export declare function DataTable({ children, className, height, maxHeight }: DataTableContainerProps): React.JSX.Element;
+export declare function DataTable({ children, className, height, maxHeight, "aria-label": label, "aria-labelledby": labelledBy }: DataTableContainerProps): React.JSX.Element;
 export declare namespace DataTable {
   var displayName: string;
 }

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

@@ -105,7 +105,7 @@ function ColumnResizePreviewLine() {
 		}
 	});
 }
-function DataTable({ children, className, height, maxHeight }) {
+function DataTable({ children, className, height, maxHeight, "aria-label": label = "Data table", "aria-labelledby": labelledBy }) {
 	const parsed = React.useMemo(() => parseHeightFromClassName(className), [className]);
 	const finalHeight = height ?? parsed.height;
 	const finalMaxHeight = maxHeight ?? parsed.maxHeight ?? finalHeight;
@@ -113,6 +113,10 @@ function DataTable({ children, className, height, maxHeight }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref: registerScrollContainer,
 		"data-slot": "table-container",
+		role: "region",
+		"aria-label": labelledBy ? void 0 : label,
+		"aria-labelledby": labelledBy,
+		tabIndex: 0,
 		className: cn("relative isolate w-full overflow-auto rounded-lg border", "[&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40", "hover:[&::-webkit-scrollbar-thumb]:bg-border", "[&::-webkit-scrollbar-thumb:hover]:bg-border/80!", "scrollbar-thin scrollbar-thumb-border/40 scrollbar-track-transparent", "hover:scrollbar-thumb-border", parsed.safeClassName),
 		style: {
 			height: finalHeight,