@cube-dev/ui-kit 0.144.0 → 0.145.1

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.145.1 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.144.0";
+const VERSION = "0.145.1";
 const TASTY_VERSION = "2.8.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/layout/Board.md

@@ -45,7 +45,7 @@ clipped by an ancestor's `overflow: hidden`.
 - **`cols`** `number` (default: `12`) — Number of columns.
 - **`rowHeight`** `number` (default: `100`) — Row height in pixels.
 - **`margin`** `[number, number]` (default: `[8, 8]`) — Horizontal/vertical gap between widgets.
-- **`containerPadding`** `[number, number]` — Inner padding. Defaults to `margin`.
+- **`containerPadding`** `[number, number]` — Inner padding. Defaults to `margin`, or to `[0, 0]` for an aligned nested board (`isAligned`) so its grid lines up with the ancestor board's.
 - **`maxRows`** `number` (default: `Infinity`) — Maximum number of rows.
 - **`compact`** `'vertical' | 'horizontal' | 'free' | null` (default: `'vertical'`) — Compaction behavior. `'vertical'`/`'horizontal'` reflow widgets to remove gaps; `'free'` places each widget exactly where dropped and never pushes its neighbours (blocked from occupied cells unless `allowOverlap`); `null` disables compaction but still resolves collisions the legacy react-grid-layout way.
 - **`allowOverlap`** `boolean` (default: `false`) — Allow widgets to overlap (stack). In `'free'` mode this is what distinguishes stacking from blocking a drop onto an occupied cell.
@@ -56,22 +56,29 @@ clipped by an ancestor's `overflow: hidden`.
 - **`resizeHandles`** `ResizeHandleAxis[]` (default: `['se']`) — Which resize handles to show. Corner handles (`ne`/`nw`/`se`/`sw`) show an angle grip; edge handles (`n`/`s`/`e`/`w`) show a dotted grip. Both are revealed on hover/focus/resize. A single edge (e.g. `['e']` or `['s']`) gives a horizontally- or vertically-only resizable widget.
 - **`dragCancel`** `string` — CSS selector for elements that must not start a pointer drag (e.g. form controls inside a widget: `"input,textarea,button,a,.no-drag"`). Keyboard moves are unaffected. Can be overridden per widget.
 - **`dragHandle`** `string` — CSS selector for the only elements from which a pointer drag may start. Can be overridden per widget.
-- **`showGridLines`** `boolean | 'drag'` (default: `false`) — Show grid lines behind the widgets. `true` always, `'drag'` only while a widget is being dragged or resized.
-- **`isAligned`** `boolean` (default: `false`) — Align a nested board with its ancestor `Board`'s layout. Only takes effect when the board is nested inside another `Board`'s widget. When set, the board inherits the parent's column pitch (deriving its own column count from its measured width so cells stay parent-sized as the container is resized) and inherits the parent's row height as a target, shrinking rows slightly when needed to fit the height the container widget grants it. `cols`/`rowHeight` then act as fallbacks used only until the parent metrics resolve.
+- **`showGridLines`** `boolean | 'drag'` (default: `false`) — Show grid lines behind the widgets. `true` always, `'drag'` only while a widget is being dragged or resized. A nested board that does not set this inherits an enabled ancestor's grid lines, showing its own while a drag is in progress.
+- **`isAligned`** `boolean` (default: `false`) — Align a nested board with its ancestor `Board`'s layout. Only takes effect when the board is nested inside another `Board`'s widget. When set, every cell matches the parent's cell size exactly: the board inherits the parent's column pitch (deriving its own column count from its measured width so cells stay parent-sized as the container is resized) and uses the parent's row height verbatim. It never shrinks rows to fit — pair it with an `isAutoHeight` container so the widget grows to fit its rows at that height. `cols`/`rowHeight` then act as fallbacks used only until the parent metrics resolve.
 - **`constraints`** `LayoutConstraint[]` — Grid/item layout constraints.
 - **`width`** `number` — Explicit width (disables measurement; useful for SSR/tests).
+- **`widgetProps`** `Partial<Board.Widget props>` — Default props applied to every widget this board hosts (per-widget `Board.Widget` props override these). Use it to add a card border to every widget (`widgetProps={{ isCard: true }}`) or set shared `styles`/sizing defaults without repeating them on each widget.
 - **`place`** `Styles['place']` — Style prop shorthand for `place-items`/`place-content`.
 - **`scrollMargin`** `Styles['scrollMargin']` — Style prop for scroll margin.
 
 ### Board.Widget
 
 - **`id`** `string` (required) — Must match the `i` of a layout item.
+- **`isCard`** `boolean` (default: `false`) — Render this widget as a card by adding a border. Widgets are always filled (`#surface-2`) and rounded (`1cr`); `isCard` adds the border on top. Defaults to `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts in; set it per widget to override that default.
 - **`isDraggable`** `boolean` — Disable dragging for this widget.
 - **`isResizable`** `boolean` — Disable resizing for this widget.
 - **`resizeHandles`** `ResizeHandleAxis[]` — Override the board's handles.
+- **`minW`** `number` — Minimum width in grid columns. Used when the layout item omits `minW`; the resize handle stops here.
+- **`maxW`** `number` — Maximum width in grid columns. Used when the layout item omits `maxW`.
+- **`minH`** `number` — Minimum height in grid rows. Used when the layout item omits `minH`.
+- **`maxH`** `number` — Maximum height in grid rows. Used when the layout item omits `maxH`.
 - **`constraints`** `LayoutConstraint[]` — Per-widget constraints.
 - **`qa`** `string` — Test id for the rendered widget element.
 - **`styles`** `Styles` — Style overrides for the rendered widget element.
+- **Style properties** — `Board.Widget` also accepts container style props directly (e.g. `fill`, `padding`, `radius`, `border`, `shadow`, `color`, `flow`, `gap`), just like `Board`. They are merged into `styles` (a direct prop wins over the same key in the `styles` object). Shared `widgetProps.styles` from the owning `Board` are merged underneath, so a per-widget style only overrides the matching keys instead of replacing the whole default.
 - **`isAutoHeight`** `boolean` (default: `false`) — Grow this widget's height in its board to fit its content (only ever increases, never shrinks). Pair it with a nested `Board isAligned` so the container expands until the inner board's rows fit at the parent's row height. It also pins the widget's resize floor: you cannot drag the widget shorter than the height its content currently needs.
 - **`dragCancel`** `string` — Override the board's `dragCancel` selector for this widget.
 - **`dragHandle`** `string` — Override the board's `dragHandle` selector for this widget.
@@ -148,10 +155,20 @@ blocked from occupied cells.
 
 ### Non-resizable
 
+### Min/max widget size
+
+Bound resizing with per-widget `minW`/`maxW` (columns) and `minH`/`maxH` (rows).
+
 ### Grid lines
 
 Show grid lines behind the widgets while dragging or resizing (or always).
 
+### Card widgets
+
+Widgets are filled (`#surface-2`) and rounded by default, but borderless. Add a
+card border per widget with `isCard`, or for the whole board at once with
+`widgetProps={{ isCard: true }}`. Per-widget `isCard` overrides the board default.
+
 ### Drag cancel
 
 Keep interactive controls inside a widget clickable by excluding them from the
@@ -170,16 +187,22 @@ Wrap boards in `Board.Provider` to drag widgets between them.
 A `Board` can be placed inside a `Board.Widget`, making the whole container
 draggable while its children can be dragged out into sibling boards.
 
-Set `isAligned` on the nested board to align it with the surrounding layout: its
-columns keep the parent's pixel pitch (so resizing the container adds or removes
-columns instead of stretching them), and its rows inherit the parent's row
-height, shrinking slightly when needed to fit the space the container widget
-gives it.
+Set `isAligned` on the nested board to align it with the surrounding layout:
+every cell matches the parent's cell size exactly. Its columns keep the parent's
+pixel pitch (so resizing the container adds or removes columns instead of
+stretching them) and its rows use the parent's row height verbatim.
+
+Because an aligned board never shrinks its rows to fit, add `isAutoHeight` to the
+container `Board.Widget` so it grows (only ever taller) until the inner board's
+rows fit at the parent's row height. It also stops the container's resize handle
+at that height, so you can't drag it shorter than the inner board needs.
+
+### Aligned nested boards
 
-Add `isAutoHeight` to the container `Board.Widget` to grow it (only ever taller)
-until the inner board's rows fit at the parent's row height, so an aligned board
-never has to squeeze its rows. It also stops the container's resize handle at
-that height, so you can't drag it shorter than the inner board needs.
+A nested `Board` with `isAligned` and no padding, fill, border, or radius of its
+own — only a header above the grid — inherits the parent column pitch with zero
+offset, so its columns line up exactly with the outer board. Grid lines are
+shown on both boards while dragging to verify the alignment.
 
 ### Boards inside Tabs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.144.0",
+  "version": "0.145.1",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -106,7 +106,7 @@
     "dedent": "^0.7.0",
     "husky": "^6.0.0",
     "jsdom": "^29.1.1",
-    "lint-staged": "^10.0.0",
+    "lint-staged": "^17.0.8",
     "markdown-table": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "oxlint": "^1.72.0",
@@ -133,7 +133,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=24.0.0",
+    "node": ">=22.0.0",
     "pnpm": "^10.0.0"
   },
   "scripts": {

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

package/dist/components/portal/PortalProvider.d.ts

@@ -1,2 +0,0 @@
-
-import { RefObject } from "react";