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

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-faceted-filter.js

@@ -149,7 +149,7 @@ function TableFacetedFilter({ column, title, options = [], multiple, onValueChan
 				] })
 			]
 		}) }), /* @__PURE__ */ jsx(PopoverContent, {
-			className: "w-52 p-0",
+			className: "w-max min-w-52 max-w-(--available-width) p-0",
 			align: "start",
 			children: /* @__PURE__ */ jsx(TableFacetedFilterContent, {
 				title,
@@ -177,16 +177,16 @@ function TableFacetedFilterContent({ title, options, selectedValues, onItemSelec
 						onSelect: () => onItemSelect(option, isSelected),
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: cn("mr-2 flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+								className: cn("mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
 								children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
 							}),
 							option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 size-4" }),
 							/* @__PURE__ */ jsx("span", {
-								className: "truncate",
+								className: "min-w-0 flex-1 whitespace-normal wrap-anywhere",
 								children: option.label
 							}),
 							option.count !== void 0 && /* @__PURE__ */ jsx("span", {
-								className: "ml-auto font-mono text-xs",
+								className: "ml-auto shrink-0 font-mono text-xs",
 								children: option.count
 							})
 						]

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

@@ -62,7 +62,7 @@ function TableSearchFilter({ table, className, placeholder = "Search...", label
 	]);
 	const hasValue = currentValue.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex flex-1 items-center", className),
+		className: cn("relative flex min-w-0 max-w-full flex-1 items-center", className),
 		role: "search",
 		children: [
 			/* @__PURE__ */ jsx(Search, {

package/dist/components/registry/niko-table/lib/flex-columns.d.ts

@@ -26,7 +26,7 @@ import { ColumnSizingState, RowData } from "@tanstack/react-table";
  * Returns the set of column ids to render widthless (empty when fill is off or
  * no eligible column exists — the table then sizes to its columns as before).
  */
-export declare function resolveFlexColumnIds<TData extends RowData>(table: DataTableInstance<TData>): ReadonlySet<string>;
+export declare function resolveFlexColumnIds<TData extends RowData>(table: DataTableInstance<TData>, pinningEnabled?: boolean): ReadonlySet<string>;
 /**
  * The width to render for a single column. Centralizes the flex + header-fit
  * rules so the header, body cells, and the min-width lock all agree.

package/dist/components/registry/niko-table/lib/flex-columns.js

@@ -24,19 +24,19 @@
 * Returns the set of column ids to render widthless (empty when fill is off or
 * no eligible column exists — the table then sizes to its columns as before).
 */
-function resolveFlexColumnIds(table) {
+function resolveFlexColumnIds(table, pinningEnabled = true) {
 	const ids = /* @__PURE__ */ new Set();
 	if (!table.options.enableColumnResizing) return ids;
 	if (table.options.meta?.disableFlexFill) return ids;
 	const leafColumns = table.getVisibleLeafColumns();
 	const columnSizing = table.state.columnSizing;
 	let hasExplicit = false;
-	for (const column of leafColumns) if (column.columnDef.meta?.flex === true && !column.getIsPinned() && columnSizing[column.id] == null) {
+	for (const column of leafColumns) if (column.columnDef.meta?.flex === true && !(pinningEnabled && column.getIsPinned()) && columnSizing[column.id] == null) {
 		ids.add(column.id);
 		hasExplicit = true;
 	}
 	if (hasExplicit) return ids;
-	const auto = leafColumns.find((column) => column.getCanResize() && !column.getIsPinned() && column.columnDef.meta?.flex !== false && columnSizing[column.id] == null);
+	const auto = leafColumns.find((column) => column.getCanResize() && !(pinningEnabled && column.getIsPinned()) && column.columnDef.meta?.flex !== false && columnSizing[column.id] == null);
 	if (auto) ids.add(auto.id);
 	return ids;
 }

package/dist/components/registry/niko-table/lib/styles.d.ts

@@ -2,5 +2,5 @@ import { DataTableFeatures } from "./data-table-features.js";
 import React from "react";
 import { Column, RowData } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/lib/styles.d.ts
-export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean) => React.CSSProperties;
+export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean, pinningEnabled?: boolean) => React.CSSProperties;
 //#endregion

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

@@ -1,8 +1,8 @@
 import "@tanstack/react-table";
 //#region src/components/registry/niko-table/lib/styles.ts
-const getCommonPinningStyles = (column, isHeader = false) => {
+const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true) => {
 	const isPinned = column.getIsPinned();
-	if (!isPinned) return {};
+	if (!isPinned || !pinningEnabled) return {};
 	const isLeft = isPinned === "start";
 	const columnSize = column.getSize();
 	return {

package/dist/components/registry/niko-table/ui/table.js

@@ -52,14 +52,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }

package/dist/components/registry/sidebar-07/app-sidebar.d.ts

@@ -14,5 +14,5 @@ export interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar>
   projects?: React$1.ComponentProps<typeof NavProjects>["projects"];
   user?: React$1.ComponentProps<typeof NavUser>["user"];
 }
-export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible, ...props }: AppSidebarProps): React$1.JSX.Element;
+export declare function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible, className, ...props }: AppSidebarProps): React$1.JSX.Element;
 //#endregion

package/dist/components/registry/sidebar-07/app-sidebar.js

@@ -1,5 +1,6 @@
 "use client";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "../../ui/sidebar.js";
+import { cn } from "../../../lib/utils.js";
 import { NavMain } from "./nav-main.js";
 import { NavProjects } from "./nav-projects.js";
 import { NavUser } from "./nav-user.js";
@@ -7,9 +8,10 @@ import { TeamSwitcher } from "./team-switcher.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/sidebar-07/app-sidebar.tsx
-function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible = "icon", ...props }) {
+function AppSidebar({ navMain, navLabel, header, teams, projects, user, collapsible = "icon", className, ...props }) {
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible,
+		className: cn(collapsible !== "none" && "h-auto", className),
 		...props,
 		children: [
 			(header || teams) && /* @__PURE__ */ jsx(SidebarHeader, { children: header ?? (teams && /* @__PURE__ */ jsx(TeamSwitcher, { teams })) }),

package/dist/components/registry/sidebar-07/nav-main.d.ts

@@ -4,7 +4,7 @@ export declare function NavMain({ items, label }: {
   items: {
     title: string;
     url: string;
-    icon?: React.ReactNode;
+    icon: React.ReactNode;
     isActive?: boolean;
     linkProps?: Omit<React.ComponentProps<"a">, "href">;
     items?: {

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

@@ -2,9 +2,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/co
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from "../../ui/sidebar.js";
 import { ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/registry/sidebar-07/nav-main.tsx
 function NavMain({ items, label = "Navigation" }) {
 	const { isMobile, setOpenMobile } = useSidebar();
+	const [expanded, setExpanded] = useState({});
 	const closeDrawer = () => {
 		if (isMobile) setOpenMobile(false);
 	};
@@ -19,7 +21,11 @@ function NavMain({ items, label = "Navigation" }) {
 		onClick: closeDrawer,
 		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
 	}) }, item.title) : /* @__PURE__ */ jsxs(Collapsible, {
-		defaultOpen: item.isActive,
+		open: expanded[item.title] ?? !!item.isActive,
+		onOpenChange: (open) => setExpanded((previous) => ({
+			...previous,
+			[item.title]: open
+		})),
 		className: "group/collapsible",
 		render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {