@alexgorbatchev/shadcn 0.0.57 → 0.0.59

package/README.md

@@ -439,7 +439,7 @@ 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` and a preferred `size`; required columns' minima plus that minimum must fit the smallest supported container. The grid reserves the fill column's preferred size, bounded by its native sizing limits, and temporarily hides optional columns that do not fit, prioritizing their chosen order. When only required columns remain, the fill column can shrink toward its minimum. The grid lists hidden columns and explains how to reveal them. This mode replaces `meta.visibleFrom` breakpoints and offers resize handles on leaf headers only.
+For grids that must fit their container, set `VirtualDataGrid fitColumns`. Use exactly one `meta.fill` column with an explicit `minSize` and a preferred `size`; required columns' minima plus that minimum must fit the smallest supported container. The grid reserves the fill column's native current size, including controlled sizing state and its min/max bounds, and temporarily hides optional columns that do not fit, prioritizing their chosen order. When only required columns remain, the fill column can shrink toward its minimum. The grid lists hidden 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. Widening a required column can hide optional columns again; widening an optional column preserves its fitted neighbours and the fill column's preferred space. Container changes never overwrite user visibility, order, or width preferences. The `VirtualDataGridExample` fixture demonstrates this controlled integration.
 

package/dist/{chunk-kyctwprg.js → chunk-8m97h03v.js}

@@ -56,18 +56,13 @@ var DataGridColumnFitContext = createContext(undefined);
 import { Subscribe } from "@tanstack/react-table";
 import { useContext } from "react";
 
-// src/components/data-grid/getDataGridFillPreferredSize.ts
-function getDataGridFillPreferredSize(column) {
-  return Math.min(column.maxSize ?? Number.MAX_SAFE_INTEGER, Math.max(column.minSize ?? 20, column.size ?? 150));
-}
-
 // 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 -= getDataGridFillPreferredSize(column.columnDef);
+      remaining -= column.getSize();
     else if (!column.getCanHide())
       remaining -= column.getSize();
   }
@@ -92,7 +87,7 @@ function getDataGridColumnFitMaximum(table, columnId, width) {
     if (other.id === columnId)
       return sum;
     if (other.columnDef.meta?.fill) {
-      return sum + (isRequired ? other.columnDef.minSize ?? 20 : getDataGridFillPreferredSize(other.columnDef));
+      return sum + (isRequired ? other.columnDef.minSize ?? 20 : other.getSize());
     }
     if (isRequired && other.getCanHide() || hidden.includes(other.id))
       return sum;

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

@@ -7,7 +7,7 @@ import {
   DataGridColumnHeader2,
   DataGridFilter2,
   DataGridPagination2
-} from "../../chunk-kyctwprg.js";
+} from "../../chunk-8m97h03v.js";
 import"../../chunk-7ny0vyek.js";
 import"../../chunk-8ssktt4b.js";
 import"../../chunk-en44w1pn.js";

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

@@ -9,7 +9,7 @@ interface IVirtualDataGridProps<T extends RowData, TSelected> {
     estimateRowHeight?: number;
     overscan?: number;
     /**
-     * Reserve one fill column's preferred `size` and hide optional columns that do not fit, in their chosen order.
+     * Reserve one fill column's native current size and hide optional columns that do not fit, in their chosen order.
      * The fill column may shrink toward `minSize` when only required columns remain. 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.

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

@@ -10,7 +10,7 @@ import {
   DataGridHeaderRows,
   DataGridCells2,
   DataGridColumns
-} from "../../chunk-kyctwprg.js";
+} from "../../chunk-8m97h03v.js";
 import"../../chunk-7ny0vyek.js";
 import"../../chunk-8ssktt4b.js";
 import"../../chunk-e6hk39ev.js";

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.57",
+  version: "0.0.59",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {
@@ -3107,9 +3107,10 @@ var package_default = {
   },
   scripts: {
     test: "vitest run --config .storybook/vitest.config.ts && bun run test:native && bun run test:package",
-    "test:package": "bun run build && bun test scripts/__tests__ ./.storybook/__tests__/createStorybookViteConfig.test.ts",
-    "test:preview": "bun test scripts/storybookPreview.test.ts",
-    "test:prototype": "bun test --config=./cli/bunfig.toml --coverage cli && vitest run --config .storybook/vitest.prototype.config.ts --coverage",
+    "test:package": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts package",
+    "test:preview": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts preview",
+    "test:prototype": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts prototype",
+    "test:cli": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts cli",
     "test:native": "vitest run --config .storybook/vitest.native.config.ts",
     "test:coverage": "vitest run --config .storybook/vitest.coverage.config.ts --coverage",
     "test:contrast": "vitest run --config .storybook/vitest.contrast.config.ts",
@@ -3118,7 +3119,7 @@ var package_default = {
     lint: "oxlint --deny-warnings src .storybook scripts cli templates/prototype/src templates/prototype/vite.config.ts && oxfmt --check . && bun run lint:unused",
     "lint:unused": "ts-unused check tsconfig.json",
     storybook: "bun scripts/buildLlmDocs.ts && storybook dev --host 127.0.0.1 -p 6006 --no-open",
-    "build-storybook": "bun scripts/buildLlmDocs.ts && storybook build",
+    "build-storybook": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts storybook",
     prepack: "bun run build",
     "test:reduced-motion": "vitest run --config .storybook/vitest.reduced-motion.config.ts",
     "test:visual": "vitest run --config .storybook/vitest.visual.config.ts Button.stories.tsx Badge.stories.tsx Card.stories.tsx Input.stories.tsx ScrollArea.stories.tsx",
@@ -3187,6 +3188,7 @@ var package_default = {
     "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "^8.6.0",
     "es-toolkit": "1.52.0",
+    execa: "10.2.1",
     "heat-graph": "0.0.25",
     "input-otp": "1.5.0",
     leaflet: "^1.9.4",
@@ -3577,28 +3579,55 @@ async function runWorkspace(directory, action, port) {
 
 // cli/createProgram.ts
 function createProgram(options) {
+  const width = Number.isFinite(options.width) && options.width >= 1 ? Math.floor(options.width) : 100;
   const program = new Command("shadcn-prototype").description("Create and preview editable React mockups.").version(package_default.version).exitOverride().showHelpAfterError();
   program.configureOutput({ writeOut: options.writeOut, writeErr: options.writeErr });
   program.configureHelp({
+    helpWidth: width,
+    minWidthToWrap: 1,
+    displayWidth: Bun.stringWidth,
     formatHelp(command, helper) {
-      const lines = [`Usage: ${helper.commandUsage(command)}`, "", command.description(), "", "Options:"];
-      for (const option of helper.visibleOptions(command))
-        lines.push(`  ${option.flags}  ${option.description}`);
+      const wrap = (text) => options.isAgent ? text : helper.boxWrap(text, width);
+      const formatItem = (term, description, prefix = "  ", continuation = "  ") => {
+        const prefixWidth = helper.displayWidth(prefix);
+        const descriptionColumn = Math.max(prefixWidth + 2, Math.min(45, Math.floor(width / 2)));
+        const termWidth = descriptionColumn - 4;
+        const connect = (line) => continuation + line.slice(continuation.length);
+        if (prefixWidth + helper.displayWidth(term) + 2 > descriptionColumn) {
+          const wrappedTerm = helper.boxWrap(term, Math.max(1, width - prefixWidth)).split(`
+`).map((line, index) => `${index === 0 ? prefix : continuation}${line}`).join(`
+`);
+          if (!description)
+            return wrappedTerm;
+          const wrappedDescription = helper.formatItem("", termWidth, description, helper).split(`
+`).map(connect);
+          return [wrappedTerm, ...wrappedDescription].join(`
+`);
+        }
+        return helper.formatItem(`${prefix.slice(2)}${term}`, termWidth, description, helper).split(`
+`).map((line, index) => index === 0 ? line : connect(line)).join(`
+`);
+      };
+      const lines = [wrap(`Usage: ${helper.commandUsage(command)}`), "", wrap(command.description()), "", "Options:"];
+      for (const option of helper.visibleOptions(command)) {
+        lines.push(options.isAgent ? `  ${option.flags}  ${option.description}` : formatItem(option.flags, option.description));
+      }
       const visit = (parent, prefix) => {
         const commands = helper.visibleCommands(parent);
         for (const [index, child] of commands.entries()) {
           const isLast = index === commands.length - 1;
           const marker = options.isAgent ? "- " : isLast ? "\u2570\u2500 " : "\u251C\u2500 ";
-          const name = `${prefix}${marker}${helper.subcommandTerm(child)}`;
-          lines.push(options.isAgent ? `${name}: ${child.description()}` : `${name.padEnd(44)} ${child.description()}`);
-          visit(child, `${prefix}${options.isAgent ? "  " : isLast ? "   " : "\u2502  "}`);
+          const term = helper.subcommandTerm(child);
+          const continuation = `${prefix}${options.isAgent ? "  " : isLast ? "   " : "\u2502  "}`;
+          lines.push(options.isAgent ? `${prefix}${marker}${term}: ${child.description()}` : formatItem(term, child.description(), `${prefix}${marker}`, continuation));
+          visit(child, continuation);
         }
       };
       if (command.commands.length) {
         lines.push("", "Commands:");
         visit(command, "  ");
       }
-      const body = lines.map((line) => !options.isAgent && line.length > options.width ? `${line.slice(0, Math.max(0, options.width - 3))}...` : line).join(`
+      const body = lines.join(`
 `) + `
 `;
       return options.isAgent ? "ALERT: Agents must read `AGENT=1 shadcn-prototype skill` before using this tool.\n" + body : body;

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

@@ -84,6 +84,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### PreferredFillWidth
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} width={420} fitColumns preferredFillSize={240}/>
+}
+```
+
 ### FittedColumnGroups
 
 ```tsx

package/llms/setup.md

@@ -439,7 +439,7 @@ 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` and a preferred `size`; required columns' minima plus that minimum must fit the smallest supported container. The grid reserves the fill column's preferred size, bounded by its native sizing limits, and temporarily hides optional columns that do not fit, prioritizing their chosen order. When only required columns remain, the fill column can shrink toward its minimum. The grid lists hidden columns and explains how to reveal them. This mode replaces `meta.visibleFrom` breakpoints and offers resize handles on leaf headers only.
+For grids that must fit their container, set `VirtualDataGrid fitColumns`. Use exactly one `meta.fill` column with an explicit `minSize` and a preferred `size`; required columns' minima plus that minimum must fit the smallest supported container. The grid reserves the fill column's native current size, including controlled sizing state and its min/max bounds, and temporarily hides optional columns that do not fit, prioritizing their chosen order. When only required columns remain, the fill column can shrink toward its minimum. The grid lists hidden 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. Widening a required column can hide optional columns again; widening an optional column preserves its fitted neighbours and the fill column's preferred space. Container changes never overwrite user visibility, order, or width preferences. The `VirtualDataGridExample` fixture demonstrates this controlled integration.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1056,9 +1056,10 @@
   },
   "scripts": {
     "test": "vitest run --config .storybook/vitest.config.ts && bun run test:native && bun run test:package",
-    "test:package": "bun run build && bun test scripts/__tests__ ./.storybook/__tests__/createStorybookViteConfig.test.ts",
-    "test:preview": "bun test scripts/storybookPreview.test.ts",
-    "test:prototype": "bun test --config=./cli/bunfig.toml --coverage cli && vitest run --config .storybook/vitest.prototype.config.ts --coverage",
+    "test:package": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts package",
+    "test:preview": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts preview",
+    "test:prototype": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts prototype",
+    "test:cli": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts cli",
     "test:native": "vitest run --config .storybook/vitest.native.config.ts",
     "test:coverage": "vitest run --config .storybook/vitest.coverage.config.ts --coverage",
     "test:contrast": "vitest run --config .storybook/vitest.contrast.config.ts",
@@ -1067,7 +1068,7 @@
     "lint": "oxlint --deny-warnings src .storybook scripts cli templates/prototype/src templates/prototype/vite.config.ts && oxfmt --check . && bun run lint:unused",
     "lint:unused": "ts-unused check tsconfig.json",
     "storybook": "bun scripts/buildLlmDocs.ts && storybook dev --host 127.0.0.1 -p 6006 --no-open",
-    "build-storybook": "bun scripts/buildLlmDocs.ts && storybook build",
+    "build-storybook": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts storybook",
     "prepack": "bun run build",
     "test:reduced-motion": "vitest run --config .storybook/vitest.reduced-motion.config.ts",
     "test:visual": "vitest run --config .storybook/vitest.visual.config.ts Button.stories.tsx Badge.stories.tsx Card.stories.tsx Input.stories.tsx ScrollArea.stories.tsx",
@@ -1136,6 +1137,7 @@
     "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "^8.6.0",
     "es-toolkit": "1.52.0",
+    "execa": "10.2.1",
     "heat-graph": "0.0.25",
     "input-otp": "1.5.0",
     "leaflet": "^1.9.4",

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

@@ -1,3 +0,0 @@
-import type { ColumnDef_ColumnSizing } from "@tanstack/react-table";
-/** The fill reservation before optional columns are admitted, bounded by the column's native sizing limits. */
-export declare function getDataGridFillPreferredSize(column: ColumnDef_ColumnSizing): number;