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

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

@@ -1,7 +1,8 @@
 import { cn } from "../../../lib/utils.js";
 import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
+import { Fragment as Fragment$1, createContext, use, useLayoutEffect, useMemo } from "react";
 import { differenceInCalendarDays, eachDayOfInterval, format, formatISO, getDay, getMonth, getYear, nextDay, parseISO, subWeeks } from "date-fns";
 //#region src/components/registry/heatmap/calendar-heatmap.tsx
 const colorStepCount = (levels, isNormalized) => Math.max(1, isNormalized ? levels : levels - 1);
@@ -41,6 +42,12 @@ const generateWeekdayLabels = (locale) => {
 };
 const EMPTY_STYLE = {};
 const LABEL_MARGIN = 8;
+const WEEKDAY_LABEL_WIDTH = 40;
+const STROKE_PADDING = 3;
+const LEGEND_SWATCH = 12;
+const MIN_FITTED_BLOCK = 10;
+const MAX_FITTED_BLOCK = 20;
+const DEFAULT_BLOCK = 12;
 const CalendarHeatmapContext = createContext(null);
 const useCalendarHeatmap = () => {
 	const context = use(CalendarHeatmapContext);
@@ -132,26 +139,18 @@ const groupContinuous = (activities, weekStart = 0) => {
 	const padded = [...new Array(leadingPad).fill(void 0), ...normalizedActivities];
 	const numberOfWeeks = Math.ceil(padded.length / 7);
 	const allWeeks = new Array(numberOfWeeks).fill(void 0).map((_, i) => padded.slice(i * 7, i * 7 + 7));
-	const yearMap = /* @__PURE__ */ new Map();
-	for (const week of allWeeks) {
-		const firstActivity = week.find((a) => a !== void 0);
-		const year = firstActivity ? getYear(parseISO(firstActivity.date)) : void 0;
-		if (year !== void 0) {
-			if (!yearMap.has(year)) yearMap.set(year, []);
-			yearMap.get(year)?.push(week);
-		}
-	}
-	return Array.from(yearMap.entries()).sort(([a], [b]) => a - b).map(([year, weeks]) => ({
-		year,
+	return [{
+		year: getYear(firstDate),
 		startMonth: 0,
-		weeks
-	}));
+		weeks: allWeeks
+	}];
 };
-const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
-	return weeks.reduce((labels, week, weekIndex) => {
+const getMonthLabels = (weeks, monthNames = generateMonthLabels(), yearTicks = false) => {
+	const ticks = weeks.reduce((labels, week, weekIndex) => {
 		const firstActivity = week.find((activity) => activity !== void 0);
 		if (!firstActivity) return labels;
-		const month = monthNames[getMonth(parseISO(firstActivity.date))];
+		const date = parseISO(firstActivity.date);
+		const month = monthNames[getMonth(date)];
 		if (!month) {
 			const monthName = new Date(firstActivity.date).toLocaleString("en-US", { month: "short" });
 			throw new Error(`Unexpected error: undefined month label for ${monthName}.`);
@@ -159,7 +158,8 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
 		const prevLabel = labels.at(-1);
 		if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) return labels.concat({
 			weekIndex,
-			label: month
+			label: month,
+			year: getMonth(date) === 0 ? getYear(date) : void 0
 		});
 		return labels;
 	}, []).filter(({ weekIndex }, index, labels) => {
@@ -168,6 +168,22 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
 		if (index === labels.length - 1) return weeks.slice(weekIndex).length >= minWeeks;
 		return true;
 	});
+	if (!yearTicks) return ticks;
+	const hasJanuary = ticks.some(({ year }) => year !== void 0);
+	return ticks.map((tick, index) => {
+		if (tick.year !== void 0) return {
+			...tick,
+			label: String(tick.year)
+		};
+		if (index === 0 && !hasJanuary) {
+			const week = weeks[tick.weekIndex]?.find((activity) => activity !== void 0);
+			return week ? {
+				...tick,
+				label: `${tick.label} ${getYear(parseISO(week.date))}`
+			} : tick;
+		}
+		return tick;
+	});
 };
 /**
 * Calendar Heatmap
@@ -202,8 +218,9 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
 * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
 * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
 */
-const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize = 12, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
+const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
+	const [rootRef, rootWidth] = useElementWidth();
 	const dataWithLevels = useMemo(() => {
 		if (data.length === 0) return [];
 		const maxCount = data.reduce((max, d) => Math.max(max, d.value), 1);
@@ -236,6 +253,8 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 	const labelHeight = fontSize + LABEL_MARGIN;
 	const year = data.length > 0 ? getYear(parseISO(data[0].date)) : (/* @__PURE__ */ new Date()).getFullYear();
 	const totalCount = typeof totalCountProp === "number" ? totalCountProp : dataWithLevels.reduce((sum, activity) => sum + activity.value, 0);
+	const fitted = (rootWidth - WEEKDAY_LABEL_WIDTH - 6 + blockMargin) / Math.max(weeks.length, 1) - blockMargin;
+	const blockSize = blockSizeProp ?? (rootWidth > 0 ? Math.min(MAX_FITTED_BLOCK, Math.max(MIN_FITTED_BLOCK, fitted)) / blockAspectRatio : DEFAULT_BLOCK);
 	const blockWidth = blockSize * blockAspectRatio;
 	const width = weeks.length * (blockWidth + blockMargin) - blockMargin;
 	const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;
@@ -290,8 +309,9 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 	return /* @__PURE__ */ jsx(CalendarHeatmapContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
 			"data-slot": "calendar-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2", className),
+			className: cn("flex flex-col gap-2", blockSizeProp === void 0 ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -301,7 +321,7 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 		})
 	});
 };
-const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
 	const { blockSize, blockWidth, blockMargin, blockRadius, labelHeight, labels, levels, isNormalized, colors } = useCalendarHeatmap();
 	const level = Math.max(0, Math.min(colorStepCount(levels, isNormalized), activity.level));
 	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{value}} contributions").replace("{{date}}", activity.date).replace("{{value}}", String(activity.value));
@@ -309,6 +329,7 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		ref,
 		"data-slot": "calendar-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),
@@ -316,6 +337,7 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		"data-date": activity.date,
 		"data-level": level,
 		"data-highlighted": highlighted || void 0,
+		"data-selected": selected || void 0,
 		height: blockSize,
 		rx: blockRadius,
 		ry: blockRadius,
@@ -324,6 +346,10 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		y: labelHeight + (blockSize + blockMargin) * dayIndex,
 		style: {
 			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			...selected ? {
+				stroke: "var(--foreground)",
+				strokeWidth: 2
+			} : {},
 			...styleProp
 		},
 		onClick: (event) => {
@@ -351,17 +377,17 @@ 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;
+	const { yearRows, blockSize, blockWidth, blockMargin, labels, labelHeight, fontSize, weekStart, continuousMonths } = useCalendarHeatmap();
+	const weekdayLabelWidth = hideWeekdayLabels ? 0 : WEEKDAY_LABEL_WIDTH;
+	const strokePadding = STROKE_PADDING;
 	const rowData = useMemo(() => {
 		return yearRows.map((yearRow) => {
 			return {
 				yearRow,
 				width: yearRow.weeks.length * (blockWidth + blockMargin) - blockMargin,
 				height: labelHeight + (blockSize + blockMargin) * 7 - blockMargin,
-				monthLabels: getMonthLabels(yearRow.weeks, labels.months),
-				yearTotalCount: data.filter((activity) => getYear(parseISO(activity.date)) === yearRow.year).reduce((sum, activity) => sum + activity.value, 0)
+				monthLabels: getMonthLabels(yearRow.weeks, labels.months, continuousMonths),
+				yearTotalCount: yearRow.weeks.flat().reduce((sum, activity) => sum + (activity?.value ?? 0), 0)
 			};
 		});
 	}, [
@@ -371,9 +397,17 @@ const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = fals
 		blockMargin,
 		labelHeight,
 		labels.months,
-		data
+		continuousMonths
 	]);
 	const totalWidth = weekdayLabelWidth + Math.max(...rowData.map((r) => r.width)) + 6;
+	const scroller = navigation.ref;
+	useLayoutEffect(() => {
+		if (continuousMonths && scroller.current) scroller.current.scrollLeft = scroller.current.scrollWidth;
+	}, [
+		continuousMonths,
+		scroller,
+		totalWidth
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "calendar-heatmap-body",
 		ref: navigation.ref,
@@ -384,7 +418,7 @@ const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = fals
 			if (!event.defaultPrevented) navigation.onKeyDown(event);
 		},
 		children: rowData.map(({ yearRow, height, monthLabels, yearTotalCount }) => /* @__PURE__ */ jsxs("div", { children: [
-			!hideYearLabels && /* @__PURE__ */ jsx("div", {
+			!hideYearLabels && !continuousMonths && /* @__PURE__ */ jsx("div", {
 				className: cn("mb-2 text-muted-foreground", yearClassName),
 				children: yearRow.year
 			}),
@@ -465,7 +499,7 @@ const CalendarHeatmapStat = ({ compute, label, className, children, ...props })
 	});
 };
 const CalendarHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { levels, isNormalized, blockSize, blockWidth, blockRadius, colors, labels } = useCalendarHeatmap();
+	const { levels, isNormalized, blockRadius, colors, labels } = useCalendarHeatmap();
 	const lessLabel = labelsProp?.less ?? "Less";
 	const moreLabel = labelsProp?.more ?? "More";
 	const legendLevels = Array.from({ length: levels }, (_, i) => isNormalized ? i + 1 : i);
@@ -482,14 +516,14 @@ const CalendarHeatmapLegend = ({ labels: labelsProp, className, children, ...pro
 			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,
+					width: LEGEND_SWATCH,
 					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
 				})
 			}, `legend-level-${level}`)),

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

@@ -69,11 +69,13 @@ export type StatusHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  *
  * @param data - Array of activities with date (YYYY-MM-DD) and status value (0-3)
  * @param dateFormat - Date format string for tooltips. Default: "MMM d"
- * @param blockAspectRatio - Width/height ratio of blocks. Default: 0.2 (narrow vertical bars)
+ * @param blockAspectRatio - Width/height ratio of blocks. Default: bars share the full width
  * @param colors - Custom colors for critical, degraded, and healthy states
  */
-export declare const StatusHeatmap: ({ data, dateFormat, blockSize, blockMargin, blockRadius, blockAspectRatio, colors, locale, labels: labelsProp, fontSize, emptyState, statusValues, healthyValue, style, className, children, ...props }: StatusHeatmapProps) => 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 StatusHeatmap: ({ data, dateFormat, blockSize, blockMargin, blockRadius, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize, emptyState, statusValues, healthyValue, style, className, children, ...props }: StatusHeatmapProps) => 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 StatusHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: StatusActivity;
   dayIndex: number;
   highlighted?: boolean;
@@ -81,7 +83,7 @@ export type StatusHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellHover?: (activity: StatusActivity | null) => void;
   className?: string;
 };
-export declare function StatusHeatmapBlock({ ref, activity, dayIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: StatusHeatmapBlockProps & {
+export declare function StatusHeatmapBlock({ ref, activity, dayIndex, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: StatusHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element;
 export declare namespace StatusHeatmapBlock {

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

@@ -1,14 +1,15 @@
 import { cn } from "../../../lib/utils.js";
 import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 import { format } from "date-fns";
 //#region src/components/registry/heatmap/status-heatmap.tsx
 const DEFAULT_COLORS = {
 	0: "var(--color-secondary)",
-	1: "var(--negative)",
+	1: "var(--destructive)",
 	2: "var(--warning)",
-	3: "var(--positive)"
+	3: "color-mix(in oklab, var(--muted-foreground) 40%, transparent)"
 };
 const SEMANTIC_KEYS = {
 	0: "noData",
@@ -52,6 +53,9 @@ const getStatusFill = (value, colors, highlighted = false) => {
 	return `color-mix(in oklch, ${base} 60%, transparent)`;
 };
 const EMPTY_STYLE = {};
+const LEGEND_SWATCH = 10;
+const MIN_FITTED_BAR = 2;
+const DEFAULT_ASPECT_RATIO = .2;
 const StatusHeatmapContext = createContext(null);
 const useStatusHeatmap = () => {
 	const context = use(StatusHeatmapContext);
@@ -85,15 +89,16 @@ const useStatusHeatmap = () => {
 *
 * @param data - Array of activities with date (YYYY-MM-DD) and status value (0-3)
 * @param dateFormat - Date format string for tooltips. Default: "MMM d"
-* @param blockAspectRatio - Width/height ratio of blocks. Default: 0.2 (narrow vertical bars)
+* @param blockAspectRatio - Width/height ratio of blocks. Default: bars share the full width
 * @param colors - Custom colors for critical, degraded, and healthy states
 */
-const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio = .2, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
+const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
 	0,
 	1,
 	2,
 	3
 ], healthyValue = 3, style = EMPTY_STYLE, className, children, ...props }) => {
+	const [rootRef, rootWidth] = useElementWidth();
 	const labels = useMemo(() => ({
 		statuses: {
 			noData: "No Data",
@@ -113,7 +118,10 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		});
 		return Array.from(uniqueDates).sort();
 	}, [data]);
-	const blockWidth = blockSize * blockAspectRatio;
+	const fits = blockAspectRatioProp === void 0;
+	const fitted = (rootWidth - 6 + blockMargin) / Math.max(dates.length, 1) - blockMargin;
+	const blockWidth = fits && rootWidth > 0 ? Math.max(MIN_FITTED_BAR, fitted) : blockSize * (blockAspectRatioProp ?? DEFAULT_ASPECT_RATIO);
+	const blockAspectRatio = blockWidth / blockSize;
 	const width = dates.length * (blockWidth + blockMargin) - blockMargin;
 	const height = blockSize;
 	const contextValue = useMemo(() => ({
@@ -155,8 +163,9 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 	return /* @__PURE__ */ jsx(StatusHeatmapContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
 			"data-slot": "status-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2", className),
+			className: cn("flex flex-col gap-2", fits ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -166,7 +175,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		})
 	});
 };
-const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
 	const { blockSize, blockWidth, blockMargin, blockRadius, labels, colors } = useStatusHeatmap();
 	const statusText = resolveStatusLabel(activity.value, labels.statuses);
 	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{status}}").replace("{{date}}", activity.date).replace("{{status}}", statusText);
@@ -175,12 +184,14 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 		ref,
 		"data-slot": "status-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),
 		"data-value": activity.value,
 		"data-date": activity.date,
 		"data-highlighted": highlighted || void 0,
+		"data-selected": selected || void 0,
 		height: blockSize,
 		rx: blockRadius,
 		ry: blockRadius,
@@ -189,6 +200,10 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 		y: 0,
 		style: {
 			fill: getStatusFill(activity.value, colors, highlighted),
+			...selected ? {
+				stroke: "var(--foreground)",
+				strokeWidth: 2
+			} : {},
 			...styleProp
 		},
 		onClick: (event) => {
@@ -247,9 +262,9 @@ const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, classNa
 			role: "img",
 			"aria-label": labels.heatmapLabel ?? "Status heatmap",
 			className: "block overflow-visible rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-			height: height + labelHeight + 40,
-			viewBox: `-20 -20 ${width + 40} ${height + labelHeight + 40}`,
-			width: width + 40,
+			height: height + labelHeight + 6,
+			viewBox: `-3 -3 ${width + 6} ${height + labelHeight + 6}`,
+			width: width + 6,
 			children: [!hideDateLabels && /* @__PURE__ */ jsx("g", {
 				className: cn("fill-current font-mono", labelClassName),
 				children: dates.map((date, dayIndex) => {
@@ -299,7 +314,7 @@ const StatusHeatmapStat = ({ compute, label, className, children, ...props }) =>
 	});
 };
 const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { labels, statusValues, blockSize, blockWidth, blockRadius, colors } = useStatusHeatmap();
+	const { labels, statusValues, blockRadius, colors } = useStatusHeatmap();
 	const statuses = statusValues.map((value) => ({
 		value,
 		label: resolveStatusLabel(value, labelsProp ?? labels.statuses)
@@ -307,7 +322,7 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 	return /* @__PURE__ */ jsx("fieldset", {
 		"data-slot": "status-heatmap-legend",
 		"aria-label": labels.legendLabel ?? "Status legend",
-		className: cn("ml-auto flex items-center gap-1", className),
+		className: cn("ml-auto flex items-center gap-3", className),
 		...props,
 		children: statuses.map((status) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({
 			value: status.value,
@@ -316,14 +331,14 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 			className: "flex items-center gap-1",
 			children: [/* @__PURE__ */ jsx("svg", {
 				"aria-hidden": "true",
-				height: blockSize / 2,
-				width: blockWidth,
+				height: LEGEND_SWATCH,
+				width: LEGEND_SWATCH,
 				children: /* @__PURE__ */ jsx("rect", {
 					"data-value": status.value,
-					height: blockSize / 2,
+					height: LEGEND_SWATCH,
 					rx: blockRadius,
 					ry: blockRadius,
-					width: blockWidth,
+					width: LEGEND_SWATCH,
 					style: { fill: getStatusFill(status.value, colors) }
 				})
 			}), /* @__PURE__ */ jsx("span", {

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

@@ -90,8 +90,10 @@ 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, 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 declare const WeekdayHeatmap: ({ data, weekStart, hours, weekdays: displayedWeekdays, use12Hour, blockSize: blockSizeProp, 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> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: WeekdayHourlyActivityWithLevel;
   extra?: "row" | "column";
   highlighted?: boolean;
@@ -99,7 +101,7 @@ export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellHover?: (activity: WeekdayHourlyActivityWithLevel | null) => void;
   className?: string;
 };
-export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
+export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element | null;
 export declare namespace WeekdayHeatmapBlock {

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

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 import { format } from "date-fns";
@@ -48,6 +49,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);
@@ -85,8 +90,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, 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 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 [];
@@ -159,9 +165,12 @@ const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displaye
 	]);
 	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 = hours.length * (blockWidth + blockMargin) + (hasExtraColumn ? blockSize / 2 + (blockWidth + blockMargin) * 2 : 0) - blockMargin + labelWidth;
 	const rowCount = weekdays.length + (hasExtraRow ? 1 : 0);
@@ -216,8 +225,9 @@ const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displaye
 	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", className),
+			className: cn("flex flex-col gap-2", blockSizeProp === void 0 ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -227,7 +237,7 @@ const WeekdayHeatmap = ({ data, weekStart = 0, hours = HOURS, weekdays: displaye
 		})
 	});
 };
-const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+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";
@@ -246,6 +256,7 @@ 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),
@@ -254,6 +265,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		"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,
@@ -262,6 +274,10 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, onCell
 		y: yPosition,
 		style: {
 			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			...selected ? {
+				stroke: "var(--foreground)",
+				strokeWidth: 2
+			} : {},
 			...styleProp
 		},
 		onClick: (event) => {
@@ -374,9 +390,9 @@ const WeekdayHeatmapBody = ({ hideHourLabels = false, hideWeekdayLabels = false,
 			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),
@@ -469,7 +485,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);
@@ -486,14 +502,14 @@ 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,
+					width: LEGEND_SWATCH,
 					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
 				})
 			}, `legend-level-${level}`)),

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

@@ -93,6 +93,11 @@ type DataTableContextProps<TData extends RowData> = DataTableContextState & {
   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;
   /**
@@ -148,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 };