@alexgorbatchev/shadcn 0.0.55 → 0.0.56

package/README.md

@@ -429,6 +429,8 @@ import {
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Set `hasChanges={false}` to cancel an unchanged edit before calling `onCommit`; the caller owns normalization and comparison. It defaults to true, so creation sessions can commit their initial value. Rejected saves display a generic error and allow retry; `renderError` can map the unknown failure to application-authored guidance.
 
+The editor inherits the containing label's font size and line height and occupies that single line. Keep the same text context around display and edit states. Validation appears in an anchored tooltip with an announced alert, so errors do not move neighboring content.
+
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
 `VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
@@ -437,6 +439,10 @@ Column `meta.filter` offers a column in `DataGridFilters`, hidden columns includ
 
 Import `DataGridSelectHeader` and `DataGridSelectCell` from `@alexgorbatchev/shadcn/data-grid`. Pass the current `useTable` result as `table` to both controls, and pass `row` and an accessible `label` to each cell. The header selects selectable filtered rows across all pages and preserves selections hidden by filters. It shows a mixed state when some of those rows are selected and disables itself when none are selectable. Its default label is "Select all filtered rows"; provide `label` to name the scope in your application. Cells follow native row selection rules, including disabled rows and partially selected parents. The controls observe selection changes without requiring the parent table selector to include selection state.
 
+For grids that must fit their container, set `VirtualDataGrid fitColumns`. Use exactly one `meta.fill` column with an explicit `minSize`; required columns' minima plus that minimum must fit the smallest supported container. The grid reserves that space and temporarily hides optional columns that do not fit, prioritizing their chosen order. It lists those columns and explains how to reveal them. This mode replaces `meta.visibleFrom` breakpoints and offers resize handles on leaf headers only.
+
+Keep preferred widths separate from the table's rendered sizing atom. In `onFitWidthChange`, store the reported width in a ref and write `fitDataGridColumnSizing(table, preferredWidths, width)` into the sizing atom. The helper temporarily shrinks required resizable columns toward their minima when needed and restores their preferred widths when space returns. In `onColumnSizingChange`, obtain new preferences with `constrainDataGridColumnSizing(table, updater, widthRef.current, preferredWidths)`, then derive the sizing atom with `fitDataGridColumnSizing`. Persist only the preferred widths, after the resize settles. Native pointer and keyboard resizing starts at the displayed width, stays within the available space, and leaves other columns' preferences unchanged. Container changes never overwrite user visibility, order, or width preferences. The `VirtualDataGridExample` fixture demonstrates this controlled integration.
+
 `ActionsMenu` shares one `items` definition between a dropdown action and an optional context menu. Supply an accessible `label`; the default trigger is a ghost icon button. `size="sm"` displays the label, and `variant`, `disabled`, and `trigger` customize the action. Supplying `contextTarget` composes the native context trigger with that element and adds its popup. Compose items with `MenuItem`, `MenuLinkItem`, checkbox/radio parts, groups, labels, separators, shortcuts, and submenu parts; dropdown and context menus share these implementations. `MenuLinkItem` retains its native anchor and menu keyboard semantics.
 
 For nested layouts, compose `ActionsMenuTrigger`, `ActionsMenuContextTarget`, and `ActionsMenuContextContent` explicitly inside `ActionsMenu`. The dropdown trigger owns its local native dropdown root and popup; the context target and content share an independent context root. A tree row can use `TreeItem render={<ActionsMenuContextTarget />}` and put the trigger in its action slot. For a table row, render the context target as the actual `tr`, then place the dropdown trigger and context content inside a `td`: native popup portals insert focus guards at their declaration, which must remain valid table children.

package/dist/{chunk-x7emg3jx.js → chunk-74xynyzg.js}

@@ -46,10 +46,51 @@ import {
   tableFeatures
 } from "@tanstack/react-table";
 import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
-import { useId } from "react";
+import { useContext as useContext2, useId } from "react";
+
+// src/components/data-grid/DataGridColumnFitContext.ts
+import { createContext } from "react";
+var DataGridColumnFitContext = createContext(undefined);
 
 // src/components/data-grid/DataGridColumnResizer.tsx
 import { Subscribe } from "@tanstack/react-table";
+import { useContext } from "react";
+
+// src/components/data-grid/getDataGridColumnFit.ts
+function getDataGridColumnFit(table, width) {
+  const columns = table.getVisibleLeafColumns();
+  let remaining = width;
+  for (const column of columns) {
+    if (column.columnDef.meta?.fill)
+      remaining -= column.columnDef.minSize ?? 20;
+    else if (!column.getCanHide())
+      remaining -= column.getSize();
+  }
+  const hidden = [];
+  for (const column of columns) {
+    if (column.columnDef.meta?.fill || !column.getCanHide())
+      continue;
+    if (column.getSize() <= remaining)
+      remaining -= column.getSize();
+    else
+      hidden.push(column.id);
+  }
+  return hidden;
+}
+
+// src/components/data-grid/getDataGridColumnFitMaximum.ts
+function getDataGridColumnFitMaximum(table, columnId, width) {
+  const hidden = getDataGridColumnFit(table, width);
+  const column = table.getColumn(columnId);
+  const occupied = table.getVisibleLeafColumns().reduce((sum, other) => {
+    if (other.id === columnId || hidden.includes(other.id))
+      return sum;
+    return sum + (other.columnDef.meta?.fill ? other.columnDef.minSize ?? 20 : other.getSize());
+  }, 0);
+  return Math.max(column?.columnDef.minSize ?? 20, Math.min(column?.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER, Math.floor(width - occupied)));
+}
+
+// src/components/data-grid/DataGridColumnResizer.tsx
 import { jsx } from "react/jsx-runtime";
 var KEYBOARD_STEP = 16;
 function DataGridColumnResizer({
@@ -58,14 +99,16 @@ function DataGridColumnResizer({
 }) {
   const column = header.column;
   const table = column.table;
+  const fit = useContext(DataGridColumnFitContext);
   const minSize = column.columnDef.minSize ?? 0;
-  const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+  const getMaxSize = () => fit ? getDataGridColumnFitMaximum(table, column.id, fit.width) : column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
   const resize = header.getResizeHandler();
-  const setSize = (size) => table.setColumnSizing((sizes) => ({ ...sizes, [column.id]: Math.min(maxSize, Math.max(minSize, size)) }));
+  const setSize = (size) => table.setColumnSizing((sizes) => ({ ...sizes, [column.id]: Math.min(getMaxSize(), Math.max(minSize, size)) }));
   const onKeyDown = (event) => {
     const growKey = table.options.columnResizeDirection === "rtl" ? "ArrowLeft" : "ArrowRight";
     const shrinkKey = growKey === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
     const size = column.getSize();
+    const maxSize = getMaxSize();
     const next = event.key === growKey ? size + KEYBOARD_STEP : event.key === shrinkKey ? size - KEYBOARD_STEP : event.key === "Home" ? minSize : event.key === "End" && maxSize < Number.MAX_SAFE_INTEGER ? maxSize : undefined;
     if (next === undefined)
       return;
@@ -74,14 +117,14 @@ function DataGridColumnResizer({
   };
   return /* @__PURE__ */ jsx(Subscribe, {
     source: table.store,
-    selector: (state) => `${state.columnSizing[column.id]}:${state.columnResizing.isResizingColumn === column.id}`,
+    selector: (state) => `${state.columnSizing[column.id]}:${getMaxSize()}:${state.columnResizing.isResizingColumn === column.id}`,
     children: () => /* @__PURE__ */ jsx("div", {
       role: "separator",
       "aria-orientation": "vertical",
       "aria-label": `Resize ${label}`,
       "aria-valuenow": column.getSize(),
       "aria-valuemin": minSize,
-      "aria-valuemax": maxSize < Number.MAX_SAFE_INTEGER ? maxSize : undefined,
+      "aria-valuemax": getMaxSize() < Number.MAX_SAFE_INTEGER ? getMaxSize() : undefined,
       tabIndex: 0,
       "data-slot": "data-grid-column-resizer",
       "data-resizing": column.getIsResizing() || undefined,
@@ -139,18 +182,23 @@ function getAriaSort(column) {
   const sorted = sortable.map((candidate) => candidate?.getIsSorted()).find(Boolean);
   return sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
 }
-function DataGridHeaderCell({ header, isResizable }) {
+function DataGridHeaderCell({
+  header,
+  isResizable,
+  colSpan
+}) {
   const contentId = useId();
+  const fit = useContext2(DataGridColumnFitContext);
   const meta = header.column.columnDef.meta;
-  const hasResizer = isResizable && !meta?.fill && header.column.getCanResize();
+  const hasResizer = isResizable && !meta?.fill && header.column.getCanResize() && (!fit || header.subHeaders.length === 0);
   return /* @__PURE__ */ jsx2(TableHead2, {
     scope: "col",
-    colSpan: header.colSpan,
+    colSpan,
     "aria-sort": getAriaSort(header.column),
     "aria-labelledby": hasResizer ? contentId : undefined,
     textAlign: meta?.textAlign,
     truncate: meta?.truncate,
-    visibleFrom: meta?.visibleFrom,
+    visibleFrom: fit ? undefined : meta?.visibleFrom,
     className: hasResizer ? "relative" : undefined,
     children: hasResizer ? /* @__PURE__ */ jsxs(Fragment, {
       children: [
@@ -174,23 +222,29 @@ function DataGridHeaderRows({
   table,
   isResizable = false
 }) {
+  const fit = useContext2(DataGridColumnFitContext);
   return /* @__PURE__ */ jsx2(Fragment, {
     children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx2(TableRow2, {
-      children: group.headers.map((header) => /* @__PURE__ */ jsx2(DataGridHeaderCell, {
-        header,
-        isResizable
-      }, header.id))
+      children: group.headers.map((header) => {
+        const colSpan = fit ? header.getLeafHeaders().filter((leaf) => leaf.subHeaders.length === 0 && !fit.hiddenColumnIds.includes(leaf.column.id)).length : header.colSpan;
+        return colSpan > 0 ? /* @__PURE__ */ jsx2(DataGridHeaderCell, {
+          header,
+          isResizable,
+          colSpan
+        }, header.id) : null;
+      })
     }, group.id))
   });
 }
 function DataGridCells2({ row }) {
+  const fit = useContext2(DataGridColumnFitContext);
   return /* @__PURE__ */ jsx2(Fragment, {
-    children: row.getVisibleCells().map((cell) => {
+    children: row.getVisibleCells().filter((cell) => !fit?.hiddenColumnIds.includes(cell.column.id)).map((cell) => {
       const meta = cell.column.columnDef.meta;
       return /* @__PURE__ */ jsx2(TableCell2, {
         textAlign: meta?.textAlign,
         truncate: meta?.truncate,
-        visibleFrom: meta?.visibleFrom,
+        visibleFrom: fit ? undefined : meta?.visibleFrom,
         children: /* @__PURE__ */ jsx2(FlexRender, {
           cell
         })
@@ -199,13 +253,14 @@ function DataGridCells2({ row }) {
   });
 }
 function DataGridColumns({ table }) {
+  const fit = useContext2(DataGridColumnFitContext);
   const variables = getDataGridColumnSizeVariables(table);
   return /* @__PURE__ */ jsx2(TableColumnGroup2, {
-    children: table.getVisibleLeafColumns().map((column) => {
+    children: table.getVisibleLeafColumns().filter((column) => !fit?.hiddenColumnIds.includes(column.id)).map((column) => {
       const meta = column.columnDef.meta;
       const variable = variables.get(column.id);
       return /* @__PURE__ */ jsx2(TableColumn2, {
-        visibleFrom: meta?.visibleFrom,
+        visibleFrom: fit ? undefined : meta?.visibleFrom,
         width: meta?.fill ? undefined : `var(${variable}, ${column.getSize()}px)`
       }, column.id);
     })
@@ -364,4 +419,4 @@ function DataGridPagination2({ table }) {
   });
 }
 
-export { getDataGridColumnSizeVariables, dataGridFeatures2, getDataGridColumnLabel, DataGridHeaderRows, DataGridCells2, DataGridColumns, DataGrid2, DataGridColumnHeader2, DataGridFilter2, DataGridPagination2 };
+export { DataGridColumnFitContext, getDataGridColumnFit, getDataGridColumnFitMaximum, getDataGridColumnSizeVariables, dataGridFeatures2, getDataGridColumnLabel, DataGridHeaderRows, DataGridCells2, DataGridColumns, DataGrid2, DataGridColumnHeader2, DataGridFilter2, DataGridPagination2 };

package/dist/{chunk-aye7r5mq.js → chunk-zwnba1pb.js}

@@ -2542,7 +2542,7 @@ function AttachmentGroup2({ density, className, ...props }) {
   });
 }
 // src/components/InlineEdit.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function InlineEdit2({
   analytics,
@@ -2558,6 +2558,8 @@ function InlineEdit2({
   onCancel
 }) {
   const track = useAnalytics2("InlineEdit", analytics);
+  const triggerId = useId2();
+  const errorId = `${triggerId}-error`;
   const input = useRef2(null);
   const isFinished = useRef2(false);
   const shouldCancel = useRef2(false);
@@ -2588,48 +2590,63 @@ function InlineEdit2({
       setSaving(false);
     }
   };
-  return /* @__PURE__ */ jsxs15("form", {
-    className: "flex min-w-0 flex-col gap-1",
+  return /* @__PURE__ */ jsx26("form", {
+    className: "min-w-0",
     onSubmit: (event) => {
       event.preventDefault();
       save();
     },
-    children: [
-      /* @__PURE__ */ jsx26(Input2, {
-        analytics: false,
-        ref: input,
-        density,
-        "aria-label": label,
-        "aria-invalid": Boolean(error),
-        "aria-description": "Enter saves. Escape cancels.",
-        value,
-        disabled: isDisabled || isSaving,
-        onChange: (event) => onValueChange(event.target.value),
-        onBlur: () => {
-          if (shouldCancel.current && !isFinished.current) {
-            isFinished.current = true;
-            onCancel();
-          } else
-            save();
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Escape") {
-            event.preventDefault();
-            event.stopPropagation();
-            shouldCancel.current = true;
-            event.currentTarget.blur();
-          } else if (event.key === "Enter") {
-            event.preventDefault();
-            event.currentTarget.blur();
-          }
-        }
-      }),
-      error && /* @__PURE__ */ jsx26("p", {
-        role: "alert",
-        className: "text-xs text-destructive",
-        children: error
-      })
-    ]
+    children: /* @__PURE__ */ jsxs15(Tooltip2, {
+      open: Boolean(error),
+      triggerId,
+      children: [
+        /* @__PURE__ */ jsx26(TooltipTrigger2, {
+          id: triggerId,
+          render: /* @__PURE__ */ jsx26(Input2, {
+            analytics: false,
+            ref: input,
+            density,
+            className: "h-[1lh] rounded-none border-0 px-0 py-0 text-[length:inherit] leading-[inherit]",
+            "aria-label": label,
+            "aria-invalid": Boolean(error),
+            "aria-errormessage": error ? errorId : undefined,
+            "aria-description": "Enter saves. Escape cancels.",
+            value,
+            disabled: isDisabled || isSaving,
+            onChange: (event) => onValueChange(event.target.value),
+            onBlur: () => {
+              if (shouldCancel.current && !isFinished.current) {
+                isFinished.current = true;
+                onCancel();
+              } else
+                save();
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                shouldCancel.current = true;
+                event.currentTarget.blur();
+              } else if (event.key === "Enter") {
+                event.preventDefault();
+                event.currentTarget.blur();
+              }
+            }
+          })
+        }),
+        error && /* @__PURE__ */ jsx26(TooltipContent2, {
+          density,
+          side: "bottom",
+          align: "start",
+          children: /* @__PURE__ */ jsx26("p", {
+            id: errorId,
+            role: "alert",
+            className: "text-destructive",
+            children: error
+          })
+        })
+      ]
+    })
   });
 }
 // src/components/StarRating.tsx
@@ -3805,7 +3822,7 @@ function StatCard2({
   });
 }
 // src/components/AuthForm.tsx
-import { useId as useId2, useState as useState5 } from "react";
+import { useId as useId3, useState as useState5 } from "react";
 import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 function AuthForm2({
   mode = "sign-in",
@@ -3815,7 +3832,7 @@ function AuthForm2({
   disabled = false,
   density
 }) {
-  const id = useId2();
+  const id = useId3();
   const [pending, setPending] = useState5(false);
   const [error, setError] = useState5("");
   const title = mode === "sign-up" ? "Create an account" : mode === "reset-password" ? "Reset your password" : "Sign in";

package/dist/components/InlineEdit.d.ts

@@ -12,6 +12,6 @@ interface IInlineEditProps extends IDensityProps, IAnalyticsProps {
     onCommit: (value: string) => void | Promise<void>;
     onCancel: () => void;
 }
-/** A mounted edit session. The consumer replaces its display with this field while editing. */
+/** A mounted edit session that inherits its text line's size; validation floats without moving adjacent content. */
 export declare function InlineEdit({ analytics, label, value, density, isDisabled, shouldSelectOnMount, hasChanges, renderError, onValueChange, onCommit, onCancel, }: IInlineEditProps): ReactElement;
 export {};

package/dist/components/data-grid/DataGridColumnFitContext.d.ts

@@ -0,0 +1,6 @@
+export interface IDataGridColumnFit {
+    width: number;
+    hiddenColumnIds: readonly string[];
+}
+/** Layout-only visibility; the table's column choices remain unchanged. */
+export declare const DataGridColumnFitContext: import("react").Context<IDataGridColumnFit | undefined>;

package/dist/components/data-grid/DataGridColumnResizer.d.ts

@@ -1,5 +1,5 @@
 import { type CellData, type Header, type RowData } from "@tanstack/react-table";
-import type { ReactElement } from "react";
+import { type ReactElement } from "react";
 import type { DataGridFeatures } from "./DataGrid.js";
 interface IDataGridColumnResizerProps<T extends RowData> {
     header: Header<DataGridFeatures, T, CellData>;

package/dist/components/data-grid/constrainDataGridColumnSizing.d.ts

@@ -0,0 +1,9 @@
+import { type ColumnSizingState, type RowData, type Table, type Updater } from "@tanstack/react-table";
+import type { DataGridFeatures } from "./DataGrid.js";
+/**
+ * Apply a user resize without displacing another fitted column or collapsing a fill column. Use in the table's
+ * `onColumnSizingChange`, passing the width reported by `VirtualDataGrid.onFitWidthChange`, then store the result in
+ * preferred sizes. Then pass those preferences through `fitDataGridColumnSizing` into the table's sizing atom.
+ * Container changes never call this helper or rewrite preferred sizes.
+ */
+export declare function constrainDataGridColumnSizing<T extends RowData>(table: Table<DataGridFeatures, T>, updater: Updater<ColumnSizingState>, width: number, preferred: ColumnSizingState): ColumnSizingState;

package/dist/components/data-grid/fitDataGridColumnSizing.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnSizingState, RowData, Table } from "@tanstack/react-table";
+import type { DataGridFeatures } from "./DataGrid.js";
+/**
+ * Derive rendered sizes from preferred sizes. Required resizable columns give up space toward their minima only
+ * when needed to preserve the fill minimum; widening restores the preferences. Store this result in the table's
+ * sizing atom, separately from preferences, so native resize handlers start at the width the user sees.
+ */
+export declare function fitDataGridColumnSizing<T extends RowData>(table: Table<DataGridFeatures, T>, preferred: ColumnSizingState, width: number): ColumnSizingState;

package/dist/components/data-grid/getDataGridColumnFit.d.ts

@@ -0,0 +1,4 @@
+import type { RowData, Table } from "@tanstack/react-table";
+import type { DataGridFeatures } from "./DataGrid.js";
+/** Columns that do not fit after reserving each fill column's minimum and every required fixed column. */
+export declare function getDataGridColumnFit<T extends RowData>(table: Table<DataGridFeatures, T>, width: number): string[];

package/dist/components/data-grid/getDataGridColumnFitMaximum.d.ts

@@ -0,0 +1,4 @@
+import type { RowData, Table } from "@tanstack/react-table";
+import type { DataGridFeatures } from "./DataGrid.js";
+/** The resize ceiling that keeps the current fitted columns and the fill columns' minimum space. */
+export declare function getDataGridColumnFitMaximum<T extends RowData>(table: Table<DataGridFeatures, T>, columnId: string, width: number): number;

package/dist/components/data-grid/hooks/useDataGridColumnFit.d.ts

@@ -0,0 +1,6 @@
+import type { RowData, Table } from "@tanstack/react-table";
+import { type RefObject } from "react";
+import type { DataGridFeatures } from "../DataGrid.js";
+import type { IDataGridColumnFit } from "../DataGridColumnFitContext.js";
+/** Measures the rendered table and derives temporary visibility without changing the table's saved choices. */
+export declare function useDataGridColumnFit<T extends RowData>(table: Table<DataGridFeatures, T>, scope: RefObject<HTMLElement | null>, isEnabled: boolean, onWidthChange?: (width: number) => void): IDataGridColumnFit | undefined;

package/dist/components/data-grid/index.d.ts

@@ -1,6 +1,8 @@
 export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures, } from "./DataGrid.js";
 export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, IDataGridControlProps, DataGridFilterOptions, IDataGridFilterControlProps, IDataGridOptionsFilter, IDataGridRangeFilter, } from "./DataGrid.js";
 export { DataGridColumnOptions } from "./DataGridColumnOptions.js";
+export { constrainDataGridColumnSizing } from "./constrainDataGridColumnSizing.js";
+export { fitDataGridColumnSizing } from "./fitDataGridColumnSizing.js";
 export { DataGridFilters } from "./DataGridFilters.js";
 export { DataGridFilterSummary } from "./DataGridFilterSummary.js";
 export { DataGridSelectHeader } from "./DataGridSelectHeader.js";

package/dist/components/data-grid/index.js

@@ -1,3 +1,13 @@
+import {
+  getDataGridColumnFitMaximum,
+  dataGridFeatures2,
+  getDataGridColumnLabel,
+  DataGridCells2,
+  DataGrid2,
+  DataGridColumnHeader2,
+  DataGridFilter2,
+  DataGridPagination2
+} from "../../chunk-74xynyzg.js";
 import"../../chunk-7ny0vyek.js";
 import"../../chunk-8ssktt4b.js";
 import"../../chunk-en44w1pn.js";
@@ -11,15 +21,6 @@ import"../../chunk-tmr0jqv8.js";
 import"../../chunk-p6z2m3zp.js";
 import"../../chunk-7jpsybag.js";
 import"../../chunk-7vg045gd.js";
-import {
-  dataGridFeatures2,
-  getDataGridColumnLabel,
-  DataGridCells2,
-  DataGrid2,
-  DataGridColumnHeader2,
-  DataGridFilter2,
-  DataGridPagination2
-} from "../../chunk-x7emg3jx.js";
 import {
   Checkbox2
 } from "../../chunk-b5s5y5wq.js";
@@ -170,6 +171,45 @@ function DataGridColumnOptions({
     ]
   });
 }
+// src/components/data-grid/constrainDataGridColumnSizing.ts
+import {
+  functionalUpdate
+} from "@tanstack/react-table";
+function constrainDataGridColumnSizing(table, updater, width, preferred) {
+  const previous = table.atoms.columnSizing.get();
+  const next = functionalUpdate(updater, previous);
+  return Object.fromEntries(Object.entries(next).map(([id, size]) => {
+    const column = table.getColumn(id);
+    if (size === previous[id])
+      return [id, preferred[id]];
+    const fitted = width <= 0 || !column?.getIsVisible() || column.columnDef.meta?.fill ? size : Math.max(column.columnDef.minSize ?? 20, Math.min(size, getDataGridColumnFitMaximum(table, id, width)));
+    return [id, fitted === (column?.getSize() ?? previous[id]) ? preferred[id] : fitted];
+  }).filter(([, size]) => size !== undefined));
+}
+// src/components/data-grid/fitDataGridColumnSizing.ts
+function fitDataGridColumnSizing(table, preferred, width) {
+  const next = { ...preferred };
+  if (width > 0) {
+    const required = table.getVisibleLeafColumns().filter((column) => !column.getCanHide() || column.columnDef.meta?.fill);
+    const preferredSize = (column) => Math.min(column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER, Math.max(column.columnDef.minSize ?? 20, preferred[column.id] ?? column.columnDef.size ?? 150));
+    let excess = required.reduce((sum, column) => sum + (column.columnDef.meta?.fill ? column.columnDef.minSize ?? 20 : preferredSize(column)), 0) - width;
+    for (const column of required.toReversed()) {
+      if (excess <= 0)
+        break;
+      if (column.columnDef.meta?.fill || !column.getCanResize())
+        continue;
+      const size = preferredSize(column);
+      const shrink = Math.min(excess, size - (column.columnDef.minSize ?? 20));
+      if (shrink > 0) {
+        next[column.id] = size - shrink;
+        excess -= shrink;
+      }
+    }
+  }
+  const current = table.atoms.columnSizing.get();
+  const entries = Object.entries(next);
+  return entries.length === Object.keys(current).length && entries.every(([id, size]) => current[id] === size) ? current : next;
+}
 // src/components/data-grid/DataGridFilters.tsx
 import { Subscribe as Subscribe2 } from "@tanstack/react-table";
 import { ListFilterIcon } from "lucide-react";
@@ -577,5 +617,7 @@ export {
   DataGridPagination2 as DataGridPagination,
   DataGridSelectCell,
   DataGridSelectHeader,
-  dataGridFeatures2 as dataGridFeatures
+  constrainDataGridColumnSizing,
+  dataGridFeatures2 as dataGridFeatures,
+  fitDataGridColumnSizing
 };

package/dist/components/json-render/index.js

@@ -31,7 +31,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-aye7r5mq.js";
+} from "../../chunk-zwnba1pb.js";
 import {
   MenuPopup,
   MenuItem2,

package/dist/components/virtual-data-grid/VirtualDataGrid.d.ts

@@ -8,6 +8,16 @@ interface IVirtualDataGridProps<T extends RowData, TSelected> {
     maxHeight?: number | string;
     estimateRowHeight?: number;
     overscan?: number;
+    /**
+     * Reserve one fill column's `minSize` and hide optional columns that do not fit, in their chosen order. Replaces
+     * `meta.visibleFrom` breakpoints; saved visibility and widths are unchanged. Use exactly one fill column, and
+     * ensure required columns' minima plus its minimum fit the smallest supported container. Only leaf headers resize.
+     * Pair with `fitDataGridColumnSizing` and `constrainDataGridColumnSizing` to preserve preferred widths separately
+     * from rendered widths and constrain native pointer resizing.
+     */
+    fitColumns?: boolean;
+    /** Reports usable width; derive the sizing atom with `fitDataGridColumnSizing`, keeping preferences unchanged. */
+    onFitWidthChange?: (width: number) => void;
     /** Row IDs that stay rendered while scrolled out of view, such as rows with an open editor. */
     retainedRowIds?: readonly string[];
     /**
@@ -22,5 +32,5 @@ interface IVirtualDataGridProps<T extends RowData, TSelected> {
  * Column widths change through CSS variables, so a `useTable` selector can leave out sizing state and resizing never
  * renders rows again.
  */
-export declare function VirtualDataGrid<T extends RowData, TSelected>({ table, label, maxHeight, estimateRowHeight, overscan, retainedRowIds, renderRow, }: IVirtualDataGridProps<T, TSelected>): ReactElement;
+export declare function VirtualDataGrid<T extends RowData, TSelected>({ table, label, maxHeight, estimateRowHeight, overscan, fitColumns, onFitWidthChange, retainedRowIds, renderRow, }: IVirtualDataGridProps<T, TSelected>): ReactElement;
 export {};

package/dist/components/virtual-data-grid/index.js

@@ -2,6 +2,15 @@ import"../../chunk-en44w1pn.js";
 import {
   TableRow2
 } from "../../chunk-tmr0jqv8.js";
+import {
+  DataGridColumnFitContext,
+  getDataGridColumnFit,
+  getDataGridColumnSizeVariables,
+  getDataGridColumnLabel,
+  DataGridHeaderRows,
+  DataGridCells2,
+  DataGridColumns
+} from "../../chunk-74xynyzg.js";
 import"../../chunk-7ny0vyek.js";
 import"../../chunk-8ssktt4b.js";
 import"../../chunk-e6hk39ev.js";
@@ -11,12 +20,6 @@ import"../../chunk-bd09gygt.js";
 import"../../chunk-p6z2m3zp.js";
 import"../../chunk-7jpsybag.js";
 import"../../chunk-7vg045gd.js";
-import {
-  getDataGridColumnSizeVariables,
-  DataGridHeaderRows,
-  DataGridCells2,
-  DataGridColumns
-} from "../../chunk-x7emg3jx.js";
 import {
   VirtualTable2
 } from "../../chunk-bmyw7q4w.js";
@@ -45,8 +48,39 @@ function useDataGridColumnSizes(table, scope) {
   });
 }
 
+// src/components/data-grid/hooks/useDataGridColumnFit.ts
+import { useLayoutEffect as useLayoutEffect2, useState } from "react";
+function useDataGridColumnFit(table, scope, isEnabled, onWidthChange) {
+  const [fit, setFit] = useState();
+  useLayoutEffect2(() => {
+    const element = scope.current;
+    if (!isEnabled || !element)
+      return;
+    const container = element.querySelector('[data-slot="table-container"]');
+    if (!container)
+      return;
+    const update = () => {
+      const width = container.clientWidth;
+      if (width <= 0)
+        return;
+      onWidthChange?.(width);
+      const hiddenColumnIds = getDataGridColumnFit(table, width);
+      setFit((previous) => previous?.width === width && previous.hiddenColumnIds.join("\x00") === hiddenColumnIds.join("\x00") ? previous : { width, hiddenColumnIds });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    const subscription = table.atoms.columnSizing.subscribe(update);
+    return () => {
+      observer.disconnect();
+      subscription.unsubscribe();
+    };
+  });
+  return isEnabled ? fit : undefined;
+}
+
 // src/components/virtual-data-grid/VirtualDataGrid.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function renderDefaultRow(row, props) {
   return /* @__PURE__ */ jsx(TableRow2, {
     ...props,
@@ -62,31 +96,55 @@ function VirtualDataGrid({
   maxHeight,
   estimateRowHeight,
   overscan,
+  fitColumns = false,
+  onFitWidthChange,
   retainedRowIds,
   renderRow = renderDefaultRow
 }) {
   const scope = useRef(null);
   useDataGridColumnSizes(table, scope);
+  const fit = useDataGridColumnFit(table, scope, fitColumns, onFitWidthChange);
+  const hiddenLabels = table.getVisibleLeafColumns().filter((column) => fit?.hiddenColumnIds.includes(column.id)).map(getDataGridColumnLabel);
   return /* @__PURE__ */ jsx("div", {
     ref: scope,
     "data-testid": "VirtualDataGrid",
     className: "min-w-0",
-    children: /* @__PURE__ */ jsx(VirtualTable2, {
-      items: table.getPrePaginatedRowModel().rows,
-      getItemKey: (row) => row.id,
-      label,
-      maxHeight,
-      estimateRowHeight,
-      overscan,
-      retainedKeys: retainedRowIds,
-      columns: /* @__PURE__ */ jsx(DataGridColumns, {
-        table
-      }),
-      header: /* @__PURE__ */ jsx(DataGridHeaderRows, {
-        table,
-        isResizable: true
-      }),
-      renderRow
+    children: /* @__PURE__ */ jsxs(DataGridColumnFitContext, {
+      value: fit,
+      children: [
+        hiddenLabels.length > 0 && /* @__PURE__ */ jsxs("div", {
+          className: "mb-2 text-xs text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsxs("p", {
+              children: [
+                "Hidden to fit: ",
+                hiddenLabels.join(", "),
+                "."
+              ]
+            }),
+            /* @__PURE__ */ jsx("p", {
+              children: "Widen the table or choose fewer columns. Move a column earlier to prioritize it."
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(VirtualTable2, {
+          items: table.getPrePaginatedRowModel().rows,
+          getItemKey: (row) => row.id,
+          label,
+          maxHeight,
+          estimateRowHeight,
+          overscan,
+          retainedKeys: retainedRowIds,
+          columns: /* @__PURE__ */ jsx(DataGridColumns, {
+            table
+          }),
+          header: /* @__PURE__ */ jsx(DataGridHeaderRows, {
+            table,
+            isResizable: true
+          }),
+          renderRow
+        })
+      ]
     })
   });
 }

package/dist/index.js

@@ -171,7 +171,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-aye7r5mq.js";
+} from "./chunk-zwnba1pb.js";
 import {
   Tabs2,
   tabsListVariants2,

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.55",
+  version: "0.0.56",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {
@@ -3149,8 +3149,10 @@ var package_default = {
     "@storybook/addon-vitest": "^10.6.1",
     "@storybook/react-vite": "^10.6.1",
     "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-store": "0.11.2",
     "@tanstack/react-table": "9.2.8",
     "@tanstack/react-virtual": "3.14.13",
+    "@tanstack/table-core": "9.2.8",
     "@testing-library/react": "^16.3.3",
     "@tiptap/core": "3.32.0",
     "@tiptap/pm": "3.32.0",

package/llms/components/data-display/VirtualDataGrid.md

@@ -75,3 +75,19 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     render: () => <VirtualDataGridExample files={fixture_gridFiles} width={360}/>
 }
 ```
+
+### FittedColumns
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} width={420} fitColumns/>
+}
+```
+
+### FittedColumnGroups
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} width={420} fitColumns grouped/>
+}
+```

package/llms/components/forms/InlineEdit.md

@@ -8,7 +8,7 @@ Source: src/components/stories/forms/InlineEdit.stories.tsx
 ## Public imports
 
 ```tsx
-import { InlineEdit } from "@alexgorbatchev/shadcn";
+import { InlineEdit, Button } from "@alexgorbatchev/shadcn";
 ```
 
 ## Supporting imports
@@ -98,3 +98,25 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     }
 }
 ```
+
+### StableRowLayout
+
+```tsx
+{
+    render: function Example(args): ReactElement {
+        const [isEditing, setEditing] = useState(false);
+        const [title, setTitle] = useState("Playlist title");
+        return (<div className="w-64 text-sm leading-5">
+        <div data-testid="editable-row" className="grid">
+          {isEditing ? (<InlineEdit {...args} value={title} onValueChange={setTitle} onCancel={() => setEditing(false)} onCommit={async (value) => {
+                    await args.onCommit(value);
+                    setEditing(false);
+                }}/>) : (<Button size="inline" variant="link" align="start" onClick={() => setEditing(true)}>
+              <span className="leading-5">{title}</span>
+            </Button>)}
+        </div>
+        <p>Next row</p>
+      </div>);
+    }
+}
+```

package/llms/components/forms/RichTextEditor.md

@@ -11,6 +11,12 @@ Source: src/components/stories/forms/RichTextEditor.stories.tsx
 import { RichTextEditor, useEditor, StarterKit } from "@alexgorbatchev/shadcn/editor";
 ```
 
+## Supporting imports
+
+```tsx
+import { isMacOS, isiOS } from "@tiptap/core";
+```
+
 ## Default component
 
 ```tsx

package/llms/setup.md

@@ -429,6 +429,8 @@ import {
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Set `hasChanges={false}` to cancel an unchanged edit before calling `onCommit`; the caller owns normalization and comparison. It defaults to true, so creation sessions can commit their initial value. Rejected saves display a generic error and allow retry; `renderError` can map the unknown failure to application-authored guidance.
 
+The editor inherits the containing label's font size and line height and occupies that single line. Keep the same text context around display and edit states. Validation appears in an anchored tooltip with an announced alert, so errors do not move neighboring content.
+
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
 `VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
@@ -437,6 +439,10 @@ Column `meta.filter` offers a column in `DataGridFilters`, hidden columns includ
 
 Import `DataGridSelectHeader` and `DataGridSelectCell` from `@alexgorbatchev/shadcn/data-grid`. Pass the current `useTable` result as `table` to both controls, and pass `row` and an accessible `label` to each cell. The header selects selectable filtered rows across all pages and preserves selections hidden by filters. It shows a mixed state when some of those rows are selected and disables itself when none are selectable. Its default label is "Select all filtered rows"; provide `label` to name the scope in your application. Cells follow native row selection rules, including disabled rows and partially selected parents. The controls observe selection changes without requiring the parent table selector to include selection state.
 
+For grids that must fit their container, set `VirtualDataGrid fitColumns`. Use exactly one `meta.fill` column with an explicit `minSize`; required columns' minima plus that minimum must fit the smallest supported container. The grid reserves that space and temporarily hides optional columns that do not fit, prioritizing their chosen order. It lists those columns and explains how to reveal them. This mode replaces `meta.visibleFrom` breakpoints and offers resize handles on leaf headers only.
+
+Keep preferred widths separate from the table's rendered sizing atom. In `onFitWidthChange`, store the reported width in a ref and write `fitDataGridColumnSizing(table, preferredWidths, width)` into the sizing atom. The helper temporarily shrinks required resizable columns toward their minima when needed and restores their preferred widths when space returns. In `onColumnSizingChange`, obtain new preferences with `constrainDataGridColumnSizing(table, updater, widthRef.current, preferredWidths)`, then derive the sizing atom with `fitDataGridColumnSizing`. Persist only the preferred widths, after the resize settles. Native pointer and keyboard resizing starts at the displayed width, stays within the available space, and leaves other columns' preferences unchanged. Container changes never overwrite user visibility, order, or width preferences. The `VirtualDataGridExample` fixture demonstrates this controlled integration.
+
 `ActionsMenu` shares one `items` definition between a dropdown action and an optional context menu. Supply an accessible `label`; the default trigger is a ghost icon button. `size="sm"` displays the label, and `variant`, `disabled`, and `trigger` customize the action. Supplying `contextTarget` composes the native context trigger with that element and adds its popup. Compose items with `MenuItem`, `MenuLinkItem`, checkbox/radio parts, groups, labels, separators, shortcuts, and submenu parts; dropdown and context menus share these implementations. `MenuLinkItem` retains its native anchor and menu keyboard semantics.
 
 For nested layouts, compose `ActionsMenuTrigger`, `ActionsMenuContextTarget`, and `ActionsMenuContextContent` explicitly inside `ActionsMenu`. The dropdown trigger owns its local native dropdown root and popup; the context target and content share an independent context root. A tree row can use `TreeItem render={<ActionsMenuContextTarget />}` and put the trigger in its action slot. For a table row, render the context target as the actual `tr`, then place the dropdown trigger and context content inside a `td`: native popup portals insert focus guards at their declaration, which must remain valid table children.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1098,8 +1098,10 @@
     "@storybook/addon-vitest": "^10.6.1",
     "@storybook/react-vite": "^10.6.1",
     "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-store": "0.11.2",
     "@tanstack/react-table": "9.2.8",
     "@tanstack/react-virtual": "3.14.13",
+    "@tanstack/table-core": "9.2.8",
     "@testing-library/react": "^16.3.3",
     "@tiptap/core": "3.32.0",
     "@tiptap/pm": "3.32.0",