@siyahi/ui 0.1.9-next.17 → 0.1.9-next.18

package/agents/report-rules.json

@@ -0,0 +1,7 @@
+[
+  "Never paint html or body beyond the base styles report.css sets.",
+  "Fluid width. No outer card and no banner title.",
+  "A panel with its own background gets 16px padding and var(--radius).",
+  "Charts get fixed pixel heights.",
+  "Never use 100vh."
+]

package/dist/components/registry/charts/bar-chart-card.js

@@ -22,6 +22,7 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 				dataKey: key,
 				name: label,
 				fill: seriesFill(item, props.data),
+				maxBarSize: props.horizontal ? 24 : void 0,
 				stackId: stacked ? "stack" : void 0,
 				radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
 					0,

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

@@ -6,10 +6,11 @@ import * as React$1 from "react";
 //#region src/components/registry/dashboardcn/bar-list.tsx
 function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, max: scale, onItemClick, className, ...props }) {
 	const locale = useLocale();
-	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
+	const defaultFormat = React$1.useMemo(() => new Intl.NumberFormat(locale.numberLocale, {
 		notation: "compact",
 		maximumFractionDigits: 1
-	}).format(value));
+	}).format, [locale.numberLocale]);
+	const format = valueFormatter ?? defaultFormat;
 	const items = React$1.useMemo(() => {
 		if (sortOrder === "none") return data;
 		const sorted = [...data].sort((a, b) => a.value - b.value);
@@ -19,7 +20,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "bar-list",
-		className: cn("flex flex-col gap-1.5", className),
+		className: cn("@container/bar-list flex flex-col gap-1.5", className),
 		...props,
 		children: items.map((item) => {
 			const width = max > 0 ? item.value / max * 100 : 0;
@@ -28,13 +29,13 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 			const Label = item.href ? "a" : onItemClick ? "button" : "div";
 			return /* @__PURE__ */ jsxs("div", {
 				"data-slot": "bar-list-row",
-				className: "flex items-center gap-3 text-sm",
+				className: "flex items-center gap-3 text-sm @max-sm/bar-list:items-start",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "relative flex h-8 min-w-0 flex-1 items-center",
+					className: "relative flex h-8 min-w-0 flex-1 items-center @max-sm/bar-list:h-auto @max-sm/bar-list:min-h-8 @max-sm/bar-list:items-start @max-sm/bar-list:pb-3",
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							"aria-hidden": "true",
-							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
+							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300 @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5",
 							style: {
 								width: `${width}%`,
 								backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
@@ -51,7 +52,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 								className: "text-muted-foreground shrink-0 [&>svg]:size-4",
 								children: item.icon
 							}) : null, /* @__PURE__ */ jsx("span", {
-								className: "truncate",
+								className: "truncate @max-sm/bar-list:whitespace-normal",
 								children: item.name
 							})]
 						}),

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

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.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 { differenceInCalendarDays, eachDayOfInterval, format, formatISO, getDay, getMonth, getYear, nextDay, parseISO, subWeeks } from "date-fns";
@@ -290,7 +291,7 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "calendar-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			className: cn("flex w-max max-w-full flex-col gap-2", className),
 			style: {
 				fontSize,
 				...style
@@ -349,6 +350,7 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 };
 CalendarHeatmapBlock.displayName = "CalendarHeatmapBlock";
 const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = false, hideYearLabels = false, className, labelClassName, yearClassName, children, renderYearFooter, ...props }) => {
+	const navigation = useHeatmapNavigation();
 	const { yearRows, blockSize, blockWidth, blockMargin, labels, labelHeight, fontSize, weekStart, data } = useCalendarHeatmap();
 	const weekdayLabelWidth = hideWeekdayLabels ? 0 : 40;
 	const strokePadding = 3;
@@ -374,8 +376,13 @@ const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = fals
 	const totalWidth = weekdayLabelWidth + Math.max(...rowData.map((r) => r.width)) + 6;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "calendar-heatmap-body",
+		ref: navigation.ref,
 		className: cn("flex max-w-full flex-col gap-6 overflow-x-auto overflow-y-hidden py-4", className),
 		...props,
+		onKeyDown: (event) => {
+			props.onKeyDown?.(event);
+			if (!event.defaultPrevented) navigation.onKeyDown(event);
+		},
 		children: rowData.map(({ yearRow, height, monthLabels, yearTotalCount }) => /* @__PURE__ */ jsxs("div", { children: [
 			!hideYearLabels && /* @__PURE__ */ jsx("div", {
 				className: cn("mb-2 text-muted-foreground", yearClassName),

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

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.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";
@@ -155,7 +156,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "status-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			className: cn("flex w-max max-w-full flex-col gap-2", className),
 			style: {
 				fontSize,
 				...style
@@ -214,6 +215,7 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 };
 StatusHeatmapBlock.displayName = "StatusHeatmapBlock";
 const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, className, labelClassName, children, ...props }) => {
+	const navigation = useHeatmapNavigation();
 	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels } = useStatusHeatmap();
 	const activityMap = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
@@ -234,8 +236,13 @@ const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, classNa
 	const labelHeight = hideDateLabels ? 0 : labelFontSize * 2;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "status-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 ?? "Status heatmap",

package/dist/components/registry/heatmap/weekday-heatmap.d.ts

@@ -36,6 +36,10 @@ export type ColorConfig = {
 export type WeekdayHeatmapProps = HTMLAttributes<HTMLDivElement> & {
   data: WeekdayHourlyActivity[];
   weekStart?: Day;
+  /** Displayed hours, in order; defaults to the full day. */
+  hours?: readonly WeekdayHour[];
+  /** Displayed days, in order; defaults to the full week from weekStart. */
+  weekdays?: readonly WeekdayIndex[];
   use12Hour?: boolean;
   blockSize?: number;
   blockMargin?: number;
@@ -86,7 +90,7 @@ export type WeekdayHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  * @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`.
  */
-export declare const WeekdayHeatmap: ({ data, weekStart, use12Hour, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare const WeekdayHeatmap: ({ data, weekStart, hours, weekdays: displayedWeekdays, use12Hour, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   activity: WeekdayHourlyActivityWithLevel;
   extra?: "row" | "column";
@@ -97,7 +101,7 @@ export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
 };
 export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare namespace WeekdayHeatmapBlock {
   var displayName: string;
 }

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

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.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";
@@ -84,8 +85,9 @@ 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 = 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 levels = Math.max(1, levelsProp);
+	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 +143,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,7 +154,8 @@ 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);
@@ -160,8 +163,8 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 	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 +186,8 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		width,
 		height,
 		weekStart,
+		hours,
+		weekdays,
 		colors
 	}), [
 		dataWithLevels,
@@ -203,6 +208,8 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		width,
 		height,
 		weekStart,
+		hours,
+		weekdays,
 		colors
 	]);
 	if (data.length === 0) return emptyState ? emptyState : null;
@@ -210,7 +217,7 @@ const WeekdayHeatmap = ({ data, weekStart = 0, use12Hour = false, blockSize = 24
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "weekday-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			className: cn("flex w-max max-w-full flex-col gap-2", className),
 			style: {
 				fontSize,
 				...style
@@ -221,15 +228,17 @@ 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 { 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));
@@ -279,7 +288,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 +309,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,29 +338,38 @@ 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",
@@ -362,10 +381,10 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 				!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 +393,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 +401,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 +425,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` },

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

@@ -91,6 +91,8 @@ 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;
   /** Internal: `<DataTable>` registers its scroll container element here. */
   registerScrollContainer: (el: HTMLElement | null) => void;
   /**

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

@@ -127,6 +127,25 @@ 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]);
 	const scrollRowIntoView = useCallback((index, opts) => {
 		if (rowScrollerRef.current) {
 			rowScrollerRef.current(index, opts);
@@ -269,6 +288,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		scrollRowIntoView,
 		registerRowScroller,
 		scrollContainer,
+		isCompact,
 		registerScrollContainer,
 		headerMinWidths,
 		setColumnResizePreview: setManualResizePreview,
@@ -286,6 +306,7 @@ function DataTableProvider({ children, table, columns, isLoading: externalIsLoad
 		scrollRowIntoView,
 		registerRowScroller,
 		scrollContainer,
+		isCompact,
 		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-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,12 @@ 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,
 				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 +61,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 +76,14 @@ 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,
 				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 +101,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 +139,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 +167,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 +234,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,

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.