@alexgorbatchev/shadcn 0.0.45 → 0.0.46

package/README.md

@@ -368,6 +368,12 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, listed in its `options` or, when they depend on runtime data, in the `options` prop of `DataGridFilters` and `DataGridFilterSummary` keyed by column ID, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
 
+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.
+
+`TreeItem linkProps` places the registered tree item, roving focus, and native drag handlers on an anchor. Pass `href` and anchor events directly, or compose a router link through `linkProps.render`. The outer `render` and `ref` remain available for row overlays; disclosure and `endEnhancer` controls remain siblings of the link. Enter and modified clicks retain native link behavior, while tree arrows retain navigation and expansion behavior. Optional `dropHint={{ content, open, side }}` displays caller-controlled drag feedback without adding a focus target.
+
+`PageHeader` accepts an optional `eyebrow` above its single page title. It accepts any React content without introducing another heading. Breadcrumbs, description, actions, and density remain independent slots; long action content wraps within narrow layouts.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/dist/{chunk-pp0qdx0f.js → chunk-0qgd06td.js}

@@ -3140,7 +3140,7 @@ function AppShell2({
 }
 // src/components/PageHeader.tsx
 import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
-function PageHeader2({ title, description, breadcrumbs, actions, density }) {
+function PageHeader2({ title, eyebrow, description, breadcrumbs, actions, density }) {
   return /* @__PURE__ */ jsxs19("header", {
     "data-density": density,
     "data-slot": "page-header",
@@ -3154,6 +3154,10 @@ function PageHeader2({ title, description, breadcrumbs, actions, density }) {
           /* @__PURE__ */ jsxs19("div", {
             className: "min-w-0",
             children: [
+              eyebrow != null && /* @__PURE__ */ jsx32("div", {
+                className: "mb-2 text-xs font-medium tracking-widest text-muted-foreground",
+                children: eyebrow
+              }),
               /* @__PURE__ */ jsx32("h1", {
                 className: "text-xl font-semibold text-foreground",
                 children: title
@@ -3165,7 +3169,7 @@ function PageHeader2({ title, description, breadcrumbs, actions, density }) {
             ]
           }),
           actions && /* @__PURE__ */ jsx32("div", {
-            className: "flex shrink-0 flex-wrap items-center gap-control-gap",
+            className: "flex min-w-0 max-w-full flex-wrap items-center gap-control-gap wrap-anywhere",
             children: actions
           })
         ]

package/dist/{chunk-9w9berq8.js → chunk-caz81rnv.js}

@@ -7,7 +7,7 @@ import {
 
 // src/components/Checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 function Checkbox2({ analytics, density, className, ...props }) {
   const trackedOnCheckedChange = useAnalyticsCallback("Checkbox", analytics, { name: "ui.change-request" }, props.onCheckedChange);
@@ -20,7 +20,14 @@ function Checkbox2({ analytics, density, className, ...props }) {
     children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
       "data-slot": "checkbox-indicator",
       className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
-      children: /* @__PURE__ */ jsx(CheckIcon, {})
+      render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+        ...indicatorProps,
+        children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {
+          "data-slot": "checkbox-mixed-indicator"
+        }) : /* @__PURE__ */ jsx(CheckIcon, {
+          "data-slot": "checkbox-checked-indicator"
+        })
+      })
     })
   });
 }

package/dist/{chunk-k455qwx2.js → chunk-dy4ghe9p.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-1xncv9gb.js";
 import {
   Checkbox2
-} from "./chunk-9w9berq8.js";
+} from "./chunk-caz81rnv.js";
 import {
   useReceiptFocus
 } from "./chunk-vxvaaptq.js";

package/dist/{chunk-55s7v2mw.js → chunk-mqea74ex.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-vxvaaptq.js";
 import {
   OptionList2
-} from "./chunk-k455qwx2.js";
+} from "./chunk-dy4ghe9p.js";
 
 // src/components/assistant-ui/elements/QuestionFlow.tsx
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";

package/dist/components/PageHeader.d.ts

@@ -2,10 +2,12 @@ import type { ReactElement, ReactNode } from "react";
 import type { IDensityProps } from "../density/types.js";
 type PageHeaderProps = IDensityProps & {
     title: string;
+    /** Context above the page title without introducing another heading. */
+    eyebrow?: ReactNode;
     description?: ReactNode;
     breadcrumbs?: ReactNode;
     actions?: ReactNode;
 };
-declare function PageHeader({ title, description, breadcrumbs, actions, density }: PageHeaderProps): ReactElement;
+declare function PageHeader({ title, eyebrow, description, breadcrumbs, actions, density }: PageHeaderProps): ReactElement;
 export { PageHeader };
 export type { PageHeaderProps };

package/dist/components/assistant-ui/elements/OptionList.js

@@ -1,10 +1,10 @@
 import {
   OptionList2
-} from "../../../chunk-k455qwx2.js";
+} from "../../../chunk-dy4ghe9p.js";
 import"../../../chunk-71efbr5n.js";
 import"../../../chunk-vxvaaptq.js";
 import"../../../chunk-1xncv9gb.js";
-import"../../../chunk-9w9berq8.js";
+import"../../../chunk-caz81rnv.js";
 import"../../../chunk-38301e40.js";
 import"../../../chunk-x90xmrba.js";
 import"../../../chunk-jpvw9xqy.js";

package/dist/components/assistant-ui/elements/QuestionFlow.js

@@ -1,11 +1,11 @@
 import {
   QuestionFlow2
-} from "../../../chunk-55s7v2mw.js";
-import"../../../chunk-k455qwx2.js";
+} from "../../../chunk-mqea74ex.js";
+import"../../../chunk-dy4ghe9p.js";
 import"../../../chunk-71efbr5n.js";
 import"../../../chunk-vxvaaptq.js";
 import"../../../chunk-1xncv9gb.js";
-import"../../../chunk-9w9berq8.js";
+import"../../../chunk-caz81rnv.js";
 import"../../../chunk-38301e40.js";
 import"../../../chunk-x90xmrba.js";
 import"../../../chunk-jpvw9xqy.js";

package/dist/components/assistant-ui/index.js

@@ -427,13 +427,13 @@ import {
   OpenAILogo2
 } from "../../chunk-pa07b92f.js";
 import"../../chunk-1xncv9gb.js";
-import"../../chunk-9w9berq8.js";
+import"../../chunk-caz81rnv.js";
 import {
   OptionText2
 } from "../../chunk-71efbr5n.js";
 import {
   OptionList2
-} from "../../chunk-k455qwx2.js";
+} from "../../chunk-dy4ghe9p.js";
 import {
   PermissionGrant2
 } from "../../chunk-8jnfvgvk.js";
@@ -442,7 +442,7 @@ import {
 } from "../../chunk-10t1w38s.js";
 import {
   QuestionFlow2
-} from "../../chunk-55s7v2mw.js";
+} from "../../chunk-mqea74ex.js";
 import {
   QuotaBanner2
 } from "../../chunk-zp3wrbve.js";

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

@@ -0,0 +1,12 @@
+import { type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import type { DataGridRow, IDataGridControlProps } from "./DataGrid.js";
+interface DataGridSelectCellProps<T extends RowData> extends IDensityProps, IDataGridControlProps<T> {
+    row: DataGridRow<T>;
+    /** Names this row's selection control, such as "Select project Atlas". */
+    label: string;
+}
+/** Uses the row's native selection rules, including disabled and partially selected parent rows. */
+export declare function DataGridSelectCell<T extends RowData>({ row, table, label, density, }: DataGridSelectCellProps<T>): ReactElement;
+export type { DataGridSelectCellProps };

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

@@ -0,0 +1,8 @@
+import { type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import type { IDataGridControlProps } from "./DataGrid.js";
+type DataGridSelectHeaderProps<T extends RowData> = IDataGridControlProps<T> & IDensityProps;
+/** Selects the selectable filtered rows across every page, preserving selections hidden by filters. */
+export declare function DataGridSelectHeader<T extends RowData>({ table, label, density, }: DataGridSelectHeaderProps<T>): ReactElement;
+export type { DataGridSelectHeaderProps };

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

@@ -3,3 +3,7 @@ export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridPr
 export { DataGridColumnOptions } from "./DataGridColumnOptions.js";
 export { DataGridFilters } from "./DataGridFilters.js";
 export { DataGridFilterSummary } from "./DataGridFilterSummary.js";
+export { DataGridSelectHeader } from "./DataGridSelectHeader.js";
+export type { DataGridSelectHeaderProps } from "./DataGridSelectHeader.js";
+export { DataGridSelectCell } from "./DataGridSelectCell.js";
+export type { DataGridSelectCellProps } from "./DataGridSelectCell.js";

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

@@ -22,7 +22,7 @@ import {
 } from "../../chunk-77xfccfq.js";
 import {
   Checkbox2
-} from "../../chunk-9w9berq8.js";
+} from "../../chunk-caz81rnv.js";
 import {
   Label2
 } from "../../chunk-jcxxjkqx.js";
@@ -514,6 +514,56 @@ function DataGridFilterSummary({
     }
   });
 }
+// src/components/data-grid/DataGridSelectHeader.tsx
+import { Subscribe as Subscribe4 } from "@tanstack/react-table";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function DataGridSelectHeader({
+  table,
+  label = "Select all filtered rows",
+  density
+}) {
+  return /* @__PURE__ */ jsx4(Subscribe4, {
+    source: table.store,
+    selector: (state) => ({
+      selection: state.rowSelection,
+      filters: state.columnFilters,
+      filter: state.globalFilter
+    }),
+    children: () => {
+      const rows = table.getFilteredRowModel().flatRows.filter((row) => row.getCanSelect() && row.getParentRows().every((parent) => parent.getCanSelectSubRows()));
+      const selected = rows.filter((row) => row.getIsSelected()).length;
+      return /* @__PURE__ */ jsx4(Checkbox2, {
+        "aria-label": label,
+        density,
+        disabled: rows.length === 0,
+        checked: rows.length > 0 && selected === rows.length,
+        indeterminate: selected > 0 && selected < rows.length,
+        onCheckedChange: (checked) => table.toggleAllRowsSelected(checked)
+      });
+    }
+  });
+}
+// src/components/data-grid/DataGridSelectCell.tsx
+import { Subscribe as Subscribe5 } from "@tanstack/react-table";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DataGridSelectCell({
+  row,
+  table,
+  label,
+  density
+}) {
+  return /* @__PURE__ */ jsx5(Subscribe5, {
+    source: table.atoms.rowSelection,
+    children: () => /* @__PURE__ */ jsx5(Checkbox2, {
+      "aria-label": label,
+      density,
+      checked: row.getIsSelected(),
+      indeterminate: row.getIsSomeSelected(),
+      disabled: !row.getCanSelect(),
+      onCheckedChange: (checked) => row.toggleSelected(checked)
+    })
+  });
+}
 export {
   DataGrid2 as DataGrid,
   DataGridCells2 as DataGridCells,
@@ -523,5 +573,7 @@ export {
   DataGridFilterSummary,
   DataGridFilters,
   DataGridPagination2 as DataGridPagination,
+  DataGridSelectCell,
+  DataGridSelectHeader,
   dataGridFeatures2 as dataGridFeatures
 };

package/dist/components/event-calendar/index.js

@@ -22,7 +22,7 @@ import {
 } from "../../chunk-0fmrwsgp.js";
 import {
   Checkbox2
-} from "../../chunk-9w9berq8.js";
+} from "../../chunk-caz81rnv.js";
 import {
   Spinner2
 } from "../../chunk-1xncv9gb.js";

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

@@ -36,7 +36,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-pp0qdx0f.js";
+} from "../../chunk-0qgd06td.js";
 import {
   DropdownMenu2,
   DropdownMenuTrigger2,
@@ -105,7 +105,7 @@ import {
 import"../../chunk-9de1htr5.js";
 import {
   Checkbox2
-} from "../../chunk-9w9berq8.js";
+} from "../../chunk-caz81rnv.js";
 import"../../chunk-1j2hz3w9.js";
 import"../../chunk-k99h6evz.js";
 import {

package/dist/components/tree/TreeItem.d.ts

@@ -17,7 +17,15 @@ type TreeItemProps<T> = useRender.ComponentProps<"div", TreeItemState> & IDensit
     expandOn?: "click" | "doubleClick" | "disclosure";
     isEditing?: boolean;
     isDropTarget?: boolean;
+    /** The registered native link owns row focus; disclosure and actions remain siblings. */
+    linkProps?: useRender.ComponentProps<"a", TreeItemState>;
+    /** Domain-controlled drag feedback; omitted rows have no tooltip wrapper. */
+    dropHint?: {
+        content: ReactNode;
+        open: boolean;
+        side?: "top" | "right" | "bottom" | "left";
+    };
 };
 /** Registered tree row; compose menus with render and place counts/actions in endEnhancer. */
-export declare function TreeItem<T>({ analytics, item, children, startEnhancer, endEnhancer, expandOn, isEditing, isDropTarget, density, render, ref, ...props }: TreeItemProps<T>): ReactElement;
+export declare function TreeItem<T>({ analytics, item, children, startEnhancer, endEnhancer, expandOn, isEditing, isDropTarget, linkProps, dropHint, density, render, ref, ...props }: TreeItemProps<T>): ReactElement;
 export type { TreeItemProps };

package/dist/components/tree/index.js

@@ -9,6 +9,9 @@ import"../../chunk-e6hk39ev.js";
 import"../../chunk-x90xmrba.js";
 import"../../chunk-jpvw9xqy.js";
 import {
+  Tooltip2,
+  TooltipTrigger2,
+  TooltipContent2,
   Button2
 } from "../../chunk-38301e40.js";
 import {
@@ -19,9 +22,10 @@ import {
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
+import { useId } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 function isRowControl(event) {
-  return event.target !== event.currentTarget && event.target instanceof Element && Boolean(event.target.closest("button,input,textarea,select,form"));
+  return event.target !== event.currentTarget && event.target instanceof Element && Boolean(event.target.closest("a,button,input,textarea,select,form"));
 }
 function TreeItem({
   analytics,
@@ -32,16 +36,26 @@ function TreeItem({
   expandOn = "click",
   isEditing = false,
   isDropTarget = false,
+  linkProps,
+  dropHint,
   density,
   render,
   ref,
   ...props
 }) {
   const nativeProps = item.getProps();
+  const hintId = useId();
   const activate = useAnalyticsCallback("TreeItem", analytics, { name: "ui.activate" }, undefined);
   const isExpanded = item.isExpanded();
   const isSelected = item.isSelected?.() ?? false;
   const isInsideTarget = item.isUnorderedDragTarget?.() ?? false;
+  const state = {
+    slot: "tree-item",
+    selected: isSelected,
+    expanded: isExpanded,
+    dropTarget: isInsideTarget || isDropTarget,
+    density
+  };
   const toggle = () => {
     if (isExpanded)
       item.collapse();
@@ -62,12 +76,44 @@ function TreeItem({
       item.getTree().getDataRef().current.selectUpToAnchorId = item.getId();
     item.primaryAction();
   };
-  return useRender({
+  const label = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        "aria-hidden": "true",
+        className: "flex shrink-0 [&>svg]:size-4",
+        children: startEnhancer ?? (item.isFolder() ? isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, {}))
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "min-w-0 flex-1 truncate",
+        children: children ?? item.getItemName()
+      })
+    ]
+  });
+  const link = useRender({
+    defaultTagName: "a",
+    render: linkProps?.render,
+    ref: [item.registerElement, linkProps?.ref ?? null],
+    props: mergeProps({
+      ...nativeProps,
+      ref: undefined,
+      className: "flex min-w-0 flex-1 items-center gap-2 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      children: label,
+      onFocus: () => item.setFocused(),
+      onClick: (event) => {
+        item.setFocused();
+        if (!event.ctrlKey && !event.metaKey && !event.shiftKey)
+          item.getTree().setSelectedItems?.([item.getId()]);
+        activate(event);
+      }
+    }, linkProps ?? {}),
+    state
+  });
+  const element = useRender({
     defaultTagName: "div",
     render,
-    ref: [item.registerElement, ref ?? null],
+    ref: [linkProps && !isEditing ? null : item.registerElement, ref ?? null],
     props: mergeProps({
-      ...nativeProps,
+      ...linkProps && !isEditing ? {} : nativeProps,
       ref: undefined,
       onKeyDown: (event) => {
         if (event.target !== event.currentTarget || event.defaultPrevented || event.key !== "Enter" || event.repeat || item.getTree().getState().dnd)
@@ -78,8 +124,15 @@ function TreeItem({
         if (expandOn !== "click" && item.isFolder())
           toggle();
       },
-      ...expandOn !== "click" ? {
-        onClick: select,
+      ...!linkProps ? {
+        onClick: (event) => {
+          if (isRowControl(event))
+            return;
+          if (expandOn === "click")
+            nativeProps.onClick?.(event);
+          else
+            select(event);
+        },
         onDoubleClick: (event) => {
           if (expandOn === "doubleClick" && !isRowControl(event) && item.isFolder())
             toggle();
@@ -116,15 +169,7 @@ function TreeItem({
           }) : /* @__PURE__ */ jsx("span", {
             className: cn2("shrink-0", expandOn === "disclosure" ? "size-control-xs" : "size-3.5")
           }),
-          /* @__PURE__ */ jsx("span", {
-            "aria-hidden": "true",
-            className: "flex shrink-0 [&>svg]:size-4",
-            children: startEnhancer ?? (item.isFolder() ? isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}) : /* @__PURE__ */ jsx(FileIcon, {}))
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: "min-w-0 flex-1 truncate",
-            children: children ?? item.getItemName()
-          }),
+          linkProps && !isEditing ? link : label,
           endEnhancer && /* @__PURE__ */ jsx("div", {
             className: "flex shrink-0 items-center gap-1 text-xs tabular-nums",
             onClick: (event) => event.stopPropagation(),
@@ -142,14 +187,22 @@ function TreeItem({
           activate(event);
       }
     }),
-    state: {
-      slot: "tree-item",
-      selected: isSelected,
-      expanded: isExpanded,
-      dropTarget: isInsideTarget || isDropTarget,
-      density
-    }
+    state
   });
+  return dropHint ? /* @__PURE__ */ jsxs(Tooltip2, {
+    open: dropHint.open,
+    triggerId: hintId,
+    children: [
+      /* @__PURE__ */ jsx(TooltipTrigger2, {
+        id: hintId,
+        render: element
+      }),
+      /* @__PURE__ */ jsx(TooltipContent2, {
+        side: dropHint.side,
+        children: dropHint.content
+      })
+    ]
+  }) : element;
 }
 
 // src/components/tree/Tree.tsx

package/dist/index.js

@@ -178,7 +178,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-pp0qdx0f.js";
+} from "./chunk-0qgd06td.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -307,7 +307,7 @@ import {
 } from "./chunk-1xncv9gb.js";
 import {
   Checkbox2
-} from "./chunk-9w9berq8.js";
+} from "./chunk-caz81rnv.js";
 import {
   Kbd2,
   KbdGroup2

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.45",
+  version: "0.0.46",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {

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

@@ -8,8 +8,8 @@ Source: src/components/stories/data-display/DataGrid.stories.tsx
 ## Public imports
 
 ```tsx
-import { DataGrid, DataGridColumnHeader, DataGridFilter, dataGridFeatures } from "@alexgorbatchev/shadcn/data-grid";
-import { Checkbox, Button } from "@alexgorbatchev/shadcn";
+import { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridSelectHeader, DataGridSelectCell, dataGridFeatures } from "@alexgorbatchev/shadcn/data-grid";
+import { Button } from "@alexgorbatchev/shadcn";
 ```
 
 ## Supporting imports
@@ -50,6 +50,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### FilteredSelection
+
+```tsx
+{
+    render: () => <Example restricted/>
+}
+```
+
 ### CombinedSortHeader
 
 ```tsx

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

@@ -0,0 +1,28 @@
+# DataGridSelectCell
+
+Story: @alexgorbatchev/shadcn/components/data-display/DataGridSelectCell
+Source: src/components/stories/data-display/DataGridSelectCell.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/DataGridSelectCell.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DataGridSelectCell } from "@alexgorbatchev/shadcn/data-grid";
+```
+
+## Default component
+
+```tsx
+DataGridSelectCell
+```
+
+## Default render
+
+```tsx
+() => <SelectionControls />
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.

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

@@ -0,0 +1,36 @@
+# DataGridSelectHeader
+
+Story: @alexgorbatchev/shadcn/components/data-display/DataGridSelectHeader
+Source: src/components/stories/data-display/DataGridSelectHeader.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/DataGridSelectHeader.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DataGridSelectHeader } from "@alexgorbatchev/shadcn/data-grid";
+```
+
+## Default component
+
+```tsx
+DataGridSelectHeader
+```
+
+## Default render
+
+```tsx
+() => <SelectionControls selectChildren={false}/>
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### ChangedRows
+
+```tsx
+{
+    render: () => <SelectionControls />
+}
+```

package/llms/components/forms/Checkbox.md

@@ -94,6 +94,21 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### MixedToChecked
+
+```tsx
+{
+    render: function Render() {
+        const [isMixed, setMixed] = useState(true);
+        const [isChecked, setChecked] = useState(false);
+        return (<Checkbox aria-label="Select visible items" indeterminate={isMixed} checked={isChecked} onCheckedChange={(checked) => {
+                setMixed(false);
+                setChecked(checked);
+            }}/>);
+    }
+}
+```
+
 ### ReadOnly
 
 ```tsx

package/llms/components/layout/PageHeader.md

@@ -47,3 +47,28 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     args: { description: undefined, breadcrumbs: undefined, actions: undefined }
 }
 ```
+
+### WithEyebrow
+
+```tsx
+{
+    args: { eyebrow: "ENGINE LIBRARY" }
+}
+```
+
+### NarrowWithLongAddress
+
+```tsx
+{
+    globals: { theme: "light", density: "compact" },
+    decorators: [
+        (Story) => (<div className="w-80 max-w-full">
+        <Story />
+      </div>),
+    ],
+    args: {
+        eyebrow: <strong>ENGINE LIBRARY</strong>,
+        actions: "https://music.example.com/a-very-long-server-address-without-spaces-for-the-collection-endpoint",
+    }
+}
+```

package/llms/components/navigation/Tree.md

@@ -28,6 +28,22 @@ import { useState } from "react";
 
 Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
 
+### LinkRows
+
+```tsx
+{
+    render: () => <LinkExample />
+}
+```
+
+### ControlledDropHint
+
+```tsx
+{
+    render: () => <LinkExample />
+}
+```
+
 ### ConstrainedRows
 
 ```tsx

package/llms/setup.md

@@ -368,6 +368,12 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, listed in its `options` or, when they depend on runtime data, in the `options` prop of `DataGridFilters` and `DataGridFilterSummary` keyed by column ID, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
 
+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.
+
+`TreeItem linkProps` places the registered tree item, roving focus, and native drag handlers on an anchor. Pass `href` and anchor events directly, or compose a router link through `linkProps.render`. The outer `render` and `ref` remain available for row overlays; disclosure and `endEnhancer` controls remain siblings of the link. Enter and modified clicks retain native link behavior, while tree arrows retain navigation and expansion behavior. Optional `dropHint={{ content, open, side }}` displays caller-controlled drag feedback without adding a focus target.
+
+`PageHeader` accepts an optional `eyebrow` above its single page title. It accepts any React content without introducing another heading. Breadcrumbs, description, actions, and density remain independent slots; long action content wraps within narrow layouts.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/llms.txt

@@ -336,6 +336,8 @@ Generated from the public package exports and Storybook sources.
 - [DataGridColumnOptions](./llms/components/data-display/DataGridColumnOptions.md)
 - [DataGridFilterSummary](./llms/components/data-display/DataGridFilterSummary.md)
 - [DataGridFilters](./llms/components/data-display/DataGridFilters.md)
+- [DataGridSelectCell](./llms/components/data-display/DataGridSelectCell.md)
+- [DataGridSelectHeader](./llms/components/data-display/DataGridSelectHeader.md)
 - [DataViewer](./llms/components/data-display/DataViewer.md)
 - [Item](./llms/components/data-display/Item.md)
 - [JsonRender](./llms/components/data-display/JsonRender.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {