@cube-dev/ui-kit 0.0.0-canary-e056095 → 0.0.0-canary-31f7f8e

package/dist/icons/ArrowsMaximizeIcon.js

@@ -1,11 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { wrapIcon } from "./wrap-icon.js";
-import { jsx } from "react/jsx-runtime";
-import { IconArrowsMaximize } from "@tabler/icons-react";
-
-//#region src/icons/ArrowsMaximizeIcon.tsx
-const ArrowsMaximizeIcon = wrapIcon("ArrowsMaximizeIcon", /* @__PURE__ */ jsx(IconArrowsMaximize, {}));
-
-//#endregion
-export { ArrowsMaximizeIcon };
-//# sourceMappingURL=ArrowsMaximizeIcon.js.map

package/dist/icons/ArrowsMaximizeIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArrowsMaximizeIcon.js","names":[],"sources":["../../src/icons/ArrowsMaximizeIcon.tsx"],"sourcesContent":["import { IconArrowsMaximize } from '@tabler/icons-react';\n\nimport { wrapIcon } from './wrap-icon';\n\nexport const ArrowsMaximizeIcon = wrapIcon(\n  'ArrowsMaximizeIcon',\n  <IconArrowsMaximize />,\n);\n"],"mappings":";;;;;;AAIA,MAAa,qBAAqB,SAChC,sBACA,oBAAC,uBAAqB,CACvB"}

package/dist/icons/ArrowsMinimizeIcon.d.ts

@@ -1,12 +0,0 @@
-
-import { CubeIconProps } from "./Icon.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/icons/ArrowsMinimizeIcon.d.ts
-declare const ArrowsMinimizeIcon: {
-  (props: CubeIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { ArrowsMinimizeIcon };
-//# sourceMappingURL=ArrowsMinimizeIcon.d.ts.map

package/dist/icons/ArrowsMinimizeIcon.js

@@ -1,11 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { wrapIcon } from "./wrap-icon.js";
-import { jsx } from "react/jsx-runtime";
-import { IconArrowsMinimize } from "@tabler/icons-react";
-
-//#region src/icons/ArrowsMinimizeIcon.tsx
-const ArrowsMinimizeIcon = wrapIcon("ArrowsMinimizeIcon", /* @__PURE__ */ jsx(IconArrowsMinimize, {}));
-
-//#endregion
-export { ArrowsMinimizeIcon };
-//# sourceMappingURL=ArrowsMinimizeIcon.js.map

package/dist/icons/ArrowsMinimizeIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArrowsMinimizeIcon.js","names":[],"sources":["../../src/icons/ArrowsMinimizeIcon.tsx"],"sourcesContent":["import { IconArrowsMinimize } from '@tabler/icons-react';\n\nimport { wrapIcon } from './wrap-icon';\n\nexport const ArrowsMinimizeIcon = wrapIcon(\n  'ArrowsMinimizeIcon',\n  <IconArrowsMinimize />,\n);\n"],"mappings":";;;;;;AAIA,MAAa,qBAAqB,SAChC,sBACA,oBAAC,uBAAqB,CACvB"}

package/dist/icons/ArrowsVerticalIcon.d.ts

@@ -1,12 +0,0 @@
-
-import { CubeIconProps } from "./Icon.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/icons/ArrowsVerticalIcon.d.ts
-declare const ArrowsVerticalIcon: {
-  (props: CubeIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { ArrowsVerticalIcon };
-//# sourceMappingURL=ArrowsVerticalIcon.d.ts.map

package/dist/icons/ArrowsVerticalIcon.js

@@ -1,11 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { wrapIcon } from "./wrap-icon.js";
-import { jsx } from "react/jsx-runtime";
-import { IconArrowsVertical } from "@tabler/icons-react";
-
-//#region src/icons/ArrowsVerticalIcon.tsx
-const ArrowsVerticalIcon = wrapIcon("ArrowsVerticalIcon", /* @__PURE__ */ jsx(IconArrowsVertical, {}));
-
-//#endregion
-export { ArrowsVerticalIcon };
-//# sourceMappingURL=ArrowsVerticalIcon.js.map

package/dist/icons/ArrowsVerticalIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArrowsVerticalIcon.js","names":[],"sources":["../../src/icons/ArrowsVerticalIcon.tsx"],"sourcesContent":["import { IconArrowsVertical } from '@tabler/icons-react';\n\nimport { wrapIcon } from './wrap-icon';\n\nexport const ArrowsVerticalIcon = wrapIcon(\n  'ArrowsVerticalIcon',\n  <IconArrowsVertical />,\n);\n"],"mappings":";;;;;;AAIA,MAAa,qBAAqB,SAChC,sBACA,oBAAC,uBAAqB,CACvB"}

package/dist/icons/CirclePlusIcon.d.ts

@@ -1,12 +0,0 @@
-
-import { CubeIconProps } from "./Icon.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/icons/CirclePlusIcon.d.ts
-declare const CirclePlusIcon: {
-  (props: CubeIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { CirclePlusIcon };
-//# sourceMappingURL=CirclePlusIcon.d.ts.map

package/dist/icons/CirclePlusIcon.js

@@ -1,11 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { wrapIcon } from "./wrap-icon.js";
-import { jsx } from "react/jsx-runtime";
-import { IconCirclePlus } from "@tabler/icons-react";
-
-//#region src/icons/CirclePlusIcon.tsx
-const CirclePlusIcon = wrapIcon("CirclePlusIcon", /* @__PURE__ */ jsx(IconCirclePlus, {}));
-
-//#endregion
-export { CirclePlusIcon };
-//# sourceMappingURL=CirclePlusIcon.js.map

package/dist/icons/CirclePlusIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CirclePlusIcon.js","names":[],"sources":["../../src/icons/CirclePlusIcon.tsx"],"sourcesContent":["import { IconCirclePlus } from '@tabler/icons-react';\n\nimport { wrapIcon } from './wrap-icon';\n\nexport const CirclePlusIcon = wrapIcon('CirclePlusIcon', <IconCirclePlus />);\n"],"mappings":";;;;;;AAIA,MAAa,iBAAiB,SAAS,kBAAkB,oBAAC,mBAAiB,CAAC"}

package/dist/icons/MaximizeIcon.d.ts

@@ -1,12 +0,0 @@
-
-import { CubeIconProps } from "./Icon.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/icons/MaximizeIcon.d.ts
-declare const MaximizeIcon: {
-  (props: CubeIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { MaximizeIcon };
-//# sourceMappingURL=MaximizeIcon.d.ts.map

package/dist/icons/MaximizeIcon.js

@@ -1,11 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e056095 | Cube Dev Team */
-import { wrapIcon } from "./wrap-icon.js";
-import { jsx } from "react/jsx-runtime";
-import { IconMaximize } from "@tabler/icons-react";
-
-//#region src/icons/MaximizeIcon.tsx
-const MaximizeIcon = wrapIcon("MaximizeIcon", /* @__PURE__ */ jsx(IconMaximize, {}));
-
-//#endregion
-export { MaximizeIcon };
-//# sourceMappingURL=MaximizeIcon.js.map

package/dist/icons/MaximizeIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MaximizeIcon.js","names":[],"sources":["../../src/icons/MaximizeIcon.tsx"],"sourcesContent":["import { IconMaximize } from '@tabler/icons-react';\n\nimport { wrapIcon } from './wrap-icon';\n\nexport const MaximizeIcon = wrapIcon('MaximizeIcon', <IconMaximize />);\n"],"mappings":";;;;;;AAIA,MAAa,eAAe,SAAS,gBAAgB,oBAAC,iBAAe,CAAC"}

package/docs/components/layout/Dashboard.md

@@ -1,409 +0,0 @@
-# Dashboard
-
-Dashboard is a standalone compound layout for authoring full-width dashboards on one shared 12-column scale. A nested container exposes its own current column span as child capacity, while all containers share one row height and gap configuration. Consumers register their widget and container types, then retain ownership of the serializable layout state and custom widget rendering. Dashboard resolves collisions itself and reports the resolved set, so a consumer writes placements rather than reimplementing reflow.
-
-## When to Use
-
-- Analytics and reporting pages with mixed widget sizes
-- User-customizable dashboards with selectable widgets and containers
-- Nested dashboard sections that need one consistent column system
-
-## Component
-
-The Playground owns a recursive serializable tree and registers five constrained widget types plus the available container types with Dashboard. The permanent root add button creates Grid, HorizontalStack, VerticalStack, or Tabs containers. Hovering a Grid reveals only that Grid's vacant cells and moves its add button to the current cell; crossing a gap preserves the last valid cell. The entire outlined cell is pressable, and its matching resting fill transitions directly to the hovered colors while the CirclePlus icon appears. An open menu keeps that trigger and destination locked while the pointer crosses into the popover. HorizontalStack and VerticalStack expose one insertion point at the end. Every tab owns an independent layout and, while empty, offers one full-panel add button for Grid, HorizontalStack, or VerticalStack only. The menu disables registered items that cannot fit and stops offering nested containers at depth three. Pressing and dragging a Grid's add button claims an area — clamped to the free cells reachable from the anchor — and the button grows to occupy it, after which the menu offers only items that can _be_ that size. `Shift` with the arrow keys claims the same area from the keyboard. Every node's own actions, including its size commands, sit behind one menu button in its top-right corner.
-
----
-
-## Components
-
-- **`Dashboard`** — Full-width root that owns metrics and selection.
-- **`Dashboard.Grid`** — Explicit row and column placement.
-- **`Dashboard.HorizontalStack`** — Children arranged across one row and stretched vertically within their row constraints.
-- **`Dashboard.VerticalStack`** — Children arranged vertically and stretched horizontally within their column constraints.
-- **`Dashboard.Tabs`** — Root-only tabbed container.
-- **`Dashboard.Tab`** — Declarative panel inside `Dashboard.Tabs`.
-- **`Dashboard.Widget`** — Customizable widget surface.
-
-## Properties
-
-### Dashboard
-
-- **`rowHeight`** `number` (default: `80`) — Height in pixels of a content row in every container.
-- **`gap`** `number | [number, number]` (default: `16`) — Shared gap, or horizontal and vertical gaps, in pixels, **inside** every container's grid. The channel between top-level containers is a fixed `1x` and is not configurable; because a depth-one container's selectable box protrudes `8px` into that channel, adjacent top-level boundaries meet when both are outlined, and Dashboard's own box does not clip the protrusion — leave padding around the component.
-- **`isEditing`** `boolean` (default: `false`) — Reveals transparent, rounded container boundaries on hover; boundaries persist during resize, every boundary is revealed during a move, and a newly mounted container remains revealed briefly.
-- **`selectionMode`** `'none' | 'single' | 'multiple'` (default: `'multiple'`) — Whether and how Dashboard nodes can be selected.
-- **`selectedKeys`** `string[]` — Controlled selected widget and container ids.
-- **`defaultSelectedKeys`** `string[]` (default: `[]`) — Initial selection for uncontrolled usage.
-- **`onSelectionChange`** `(keys: string[]) => void` — Called with the normalized selection.
-- **`addItems`** `readonly DashboardAddItemDefinition[]` — Consumer registry used by Dashboard's contextual add menus.
-- **`onAddItem`** `(itemId, info) => void` — Reports the selected registry id, exact placement, parent kind/depth, and tab identity when applicable.
-
-### Containers
-
-- **`id`** `string` (required) — Stable layout and selection identity.
-- **`title`** `ReactNode` — Optional accessible title for Tabs. Grid, HorizontalStack, and VerticalStack never render a heading.
-- **`column`** `number` (default: `0`) — Zero-based starting column inside a Grid or tab panel.
-- **`row`** `number` (default: `0`) — Zero-based starting row inside a Grid or tab panel.
-- **`columns`** `number` (default: `12`, clamped to the parent) — Width in the immediate parent's available columns and the capacity exposed to this container's children.
-- **`rows`** `number` (default: `1`) — Reserved height in content rows.
-- **`isSelectable`** `boolean` (default: `true`) — Whether the container participates in selection.
-- **`isMovable`** `boolean` (default: `false`) — Makes the non-action area of the container draggable when `onPlacementChange` is supplied.
-- **`isResizable`** `boolean` (default: `false`) — Makes a context-sensitive resize handle available after the container is selected when `onPlacementChange` is supplied.
-- **`minColumns`** `number` (default: `1`) — Explicit minimum width; occupied child bounds may raise it.
-- **`maxColumns`** `number` (default: `12`, clamped to the parent) — Maximum nested-container width.
-- **`minRows`** `number` (default: `1`) — Explicit minimum height; occupied child bounds may raise it.
-- **`maxRows`** `number` (default: `12` at root or parent rows when nested) — Maximum container height.
-- **`onPlacementChange`** `(placement, info) => void` — Reports preview and committed container movement/resizing. Every placement Dashboard resolved for the gesture — the grabbed group and any displaced sibling — arrives through `info.items`.
-- **`moveLabel`** `string` — Accessible name for the focused movable container.
-- **`resizeLabel`** `string` — Accessible label for the container resize handle.
-- **`onSettingsPress`** `() => void` — Adds Settings to the container's action menu.
-- **`settingsLabel`** `string` — Label for the settings menu item.
-- **`onDuplicatePress`** `() => void` — Adds Duplicate to the menu. Opt-in: without it the item is absent.
-- **`duplicateLabel`** `string` — Label for the duplicate menu item.
-- **`onDeletePress`** `() => void` — Adds the danger-themed Delete to the menu.
-- **`deleteLabel`** `string` — Label for the delete menu item.
-- **`actions`** `readonly DashboardNodeAction[]` — Consumer menu items, placed between the standard actions and the size commands. Each carries `id`, `name`, and optional `icon`, `description`, and `isDisabled`.
-- **`onMenuAction`** `(key: string) => void` — Receives the `id` of a pressed consumer item.
-- **`aria-label`** `string` — Accessible name; falls back to a string title and then the id.
-
-### Tabs
-
-- **`activeKey`** `string` — Controlled active tab id.
-- **`defaultActiveKey`** `string` — Initially active tab id for uncontrolled usage.
-- **`onActiveChange`** `(key: string) => void` — Called when the active tab changes.
-
-Tabs is root-only. Its tab strip ends with a delimiter and keeps a `1x` gap before the active layout. Each tab is a separate, layout-less 12-column destination and therefore accepts exactly one Grid, HorizontalStack, or VerticalStack container as its layout root. An empty tab shows its add button permanently; a populated tab has no additional tab-level insertion point. Widgets cannot be direct tab children.
-
-### Tab
-
-- **`id`** `string` (required) — Stable tab id.
-- **`title`** `ReactNode` (required) — Tab label.
-- **`keepMounted`** `boolean` (default: `true`) — Whether the panel remains mounted while inactive.
-
-### Widget
-
-- **`id`** `string` (required) — Stable layout and selection identity.
-- **`column`** `number` (default: `0`) — Zero-based starting column inside a Grid or tab panel.
-- **`row`** `number` (default: `0`) — Zero-based starting row inside a Grid or tab panel.
-- **`columns`** `number` (default: `12`, clamped to the parent) — Width in the immediate parent's available columns.
-- **`rows`** `number` (default: `1`) — Reserved height in content rows.
-- **`isCard`** `boolean` (default: `false`) — Adds the widget's outside card shadow. Widgets remain rounded by default.
-- **`isSelectable`** `boolean` (default: `true`) — Whether the widget participates in selection.
-- **`isMovable`** `boolean` (default: `false`) — Makes the non-action area of the widget draggable when `onPlacementChange` is supplied.
-- **`isResizable`** `boolean` (default: `false`) — Makes a resize handle available after the widget is selected when at least one configured size axis can change.
-- **`minColumns`** `number` (default: `1`) — Minimum widget width in columns.
-- **`maxColumns`** `number` (default: `12`, clamped to the parent) — Maximum widget width in columns.
-- **`minRows`** `number` (default: `1`) — Minimum widget height in rows.
-- **`maxRows`** `number` (default: parent row count) — Maximum widget height in rows.
-- **`onPlacementChange`** `(placement, info) => void` — Reports preview and committed movement/resizing. Every placement Dashboard resolved for the gesture — the grabbed group and any displaced sibling — arrives through `info.items`; the consumer owns layout state and persistence.
-- **`moveLabel`** `string` — Accessible name for the focused movable widget.
-- **`resizeLabel`** `string` — Accessible label for the resize handle.
-- **`onSettingsPress`** `() => void` — Adds Settings to the widget's action menu.
-- **`settingsLabel`** `string` — Label for the settings menu item.
-- **`onDuplicatePress`** `() => void` — Adds Duplicate to the menu. Opt-in: without it the item is absent.
-- **`duplicateLabel`** `string` — Label for the duplicate menu item.
-- **`onDeletePress`** `() => void` — Adds the danger-themed Delete to the menu.
-- **`deleteLabel`** `string` — Label for the delete menu item.
-- **`actions`** `readonly DashboardNodeAction[]` — Consumer menu items, placed between the standard actions and the size commands.
-- **`onMenuAction`** `(key: string) => void` — Receives the `id` of a pressed consumer item.
-- **`aria-label`** `string` — Accessible widget name; falls back to the id.
-
-### Node action menu
-
-A selected widget or container exposes one round menu button in its top-right corner, holding — in order — Settings, Duplicate, the consumer's own `actions`, the size commands, and Delete. The button appears only when the node has at least one action or one available size command.
-
-The size commands are Widen, Narrow, Make taller, Make shorter, Grow on both axes, Shrink on both axes, and Fill available space. They require `onPlacementChange` and cover only the axes that can actually change — a VerticalStack child cannot change columns, a HorizontalStack child cannot change rows, and a node whose own minimum equals its maximum on both axes gets no size section at all. Each remaining command is disabled when pressing it would change nothing — because the node is at a bound, because the parent has no room left at its origin, or because a sibling occupies the space. Occupancy is read when the menu opens, not on every render. A container's shrink commands additionally respect the minimum derived from its own children.
-
-A size command reports through the same `onPlacementChange` contract as the resize handle: one call with `reason: 'resize'`, `phase: 'commit'`, and `input: 'command'`. Note that it is a commit with **no preview behind it** — a consumer that applies previews during a drag and only announces the commit still has to write this one, which `input === 'command'` identifies. The commands are also the accessible route to resizing.
-
-### Base Properties
-
-Supports [Base properties](../../BaseProperties.md).
-
-### Styling Properties
-
-The root, containers, and widgets accept `styles` plus direct container style props. Widget styles apply to the rounded content surface; placement remains controlled by Dashboard.
-
-### Style Properties
-
-These properties allow direct style application without using the `styles` prop:
-
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
-- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
-- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
-
-### Modifiers
-
-Dashboard owns these visual modifiers. Consumer `mods` are merged underneath them.
-
-| Modifier | Applies to | Description |
-| --- | --- | --- |
-| `selected` | Container and Widget | Draws the selected treatment. |
-| `hovered` | Container and Widget | Draws the hover treatment. |
-| `arriving` | Container | Briefly reveals a container mounted after the initial layout. |
-| `empty` | Container | Keeps an empty container's neutral outline visible while editing. |
-| `focus-within` | Container and Widget | Keeps controls and chrome visible for keyboard users. |
-| `editing` | Container and Widget | Enables authoring chrome. |
-| `dragging` | Container and Widget | Reveals every container with a neutral one-pixel boundary while any node is moving. |
-| `movable` | Container and Widget | Enables the surface grab cursor. |
-| `moving` | Container and Widget | Gives the node that owns the active move its two-pixel brand boundary. |
-| `resizing` | Container and Widget | Indicates the node that owns the active resize. |
-| `depth` | Container | Selects depth-one, depth-two, or depth-three chrome. |
-| `titled` | Tabs | Reserves an optional heading above the tab list. |
-| `card` | Widget | Draws the opt-in card shadow. |
-
-Containers have no visible fill or CSS border. At rest, a populated container has no boundary, while an empty container keeps a neutral outline visible in edit mode. All chrome uses a rounded outside shadow: hover, resize, emptiness, and arrival use a neutral one-pixel boundary; selection and the actively moved container use a two-pixel brand boundary. While any node is moving, every other container receives the neutral boundary so destinations remain legible without appearing selected. A container mounted after the initial layout keeps its boundary for one second. The arrival treatment covers both newly added containers and containers reparented by a cross-container move, including the case where the stationary pointer is already inside the new surface. Each depth balances padding with an equal negative margin (`8px`, `5px`, then `2px`), keeping child grid tracks aligned to the parent's top-left origin while the selectable container box protrudes into the surrounding gap.
-
-The widget placement wrapper never paints a border or outline. All widget chrome follows the rounded surface: `isCard` draws its resting one-pixel boundary with an outside shadow, keyboard focus uses a rounded focus shadow, and selection or active movement replaces either treatment with a two-pixel `#primary` brand shadow. The surface itself has no CSS border.
-
-## Examples
-
-### Registered authoring items
-
-Dashboard owns the contextual controls and fit checks, while the consumer owns the catalog metadata and layout mutation. `kind` defaults to `widget`; container definitions use `grid`, `horizontal-stack`, `vertical-stack`, or `tabs`. The callback receives the exact cell chosen by the user rather than asking the consumer to scan for a vacancy again.
-
-```jsx
-const addItems = [
-  {
-    id: 'compact',
-    name: 'Compact KPI',
-    description: 'Fixed 1×1',
-    defaultColumns: 1,
-    defaultRows: 1,
-    minColumns: 1,
-    maxColumns: 1,
-    minRows: 1,
-    maxRows: 1,
-  },
-  {
-    id: 'wide',
-    name: 'Wide metric',
-    defaultColumns: 2,
-    defaultRows: 1,
-    minColumns: 2,
-    maxColumns: 6,
-    minRows: 1,
-    maxRows: 1,
-  },
-  { id: 'grid', name: 'Grid', kind: 'grid', defaultColumns: 12, defaultRows: 3 },
-];
-
-<Dashboard
-  isEditing
-  addItems={addItems}
-  onAddItem={(itemId, { parentId, placement, tabsId, tabId }) => {
-    insertLayoutItem({ itemId, parentId, placement, tabsId, tabId });
-  }}
->
-  {renderLayout(layout)}
-</Dashboard>;
-```
-
-Dashboard applies the following contextual filtering before the menu opens:
-
-- The root offers registered container kinds only and always keeps one add button after the top-level content.
-- Grid offers every widget or nestable container that fits the hovered vacant origin.
-- HorizontalStack and VerticalStack expose only their single trailing insertion point.
-- An empty tab offers Grid, HorizontalStack, and VerticalStack only; Tabs and widgets are disabled there.
-- Nestable containers are disabled when adding them would exceed depth three.
-- `isDisabled` lets product logic disable a type in addition to Dashboard's geometric checks.
-
-### Basic grid
-
-```jsx
-import { Dashboard } from '@cube-dev/ui-kit';
-
-<Dashboard rowHeight={72} gap={16}>
-  <Dashboard.Grid id="overview" aria-label="Overview" rows={2}>
-    <Dashboard.Widget
-      id="revenue"
-      column={0}
-      row={0}
-      columns={4}
-      rows={1}
-      isCard
-    >
-      <RevenueMetric />
-    </Dashboard.Widget>
-    <Dashboard.Widget
-      id="trend"
-      column={4}
-      row={0}
-      columns={8}
-      rows={2}
-      isCard
-    >
-      <RevenueChart />
-    </Dashboard.Widget>
-  </Dashboard.Grid>
-</Dashboard>;
-```
-
-### Nested containers
-
-```jsx
-<Dashboard>
-  <Dashboard.Grid id="root-section" rows={2}>
-    <Dashboard.VerticalStack
-      id="metrics"
-      column={0}
-      row={0}
-      columns={5}
-      rows={2}
-    >
-      <Dashboard.Widget id="orders" rows={1} isCard>
-        <OrdersMetric />
-      </Dashboard.Widget>
-      <Dashboard.Widget id="customers" rows={1} isCard>
-        <CustomersMetric />
-      </Dashboard.Widget>
-    </Dashboard.VerticalStack>
-  </Dashboard.Grid>
-</Dashboard>
-```
-
-### Consumer-owned settings panel
-
-```jsx
-const [settingsId, setSettingsId] = useState(null);
-
-return (
-  <div style={{ position: 'relative' }}>
-    <Dashboard>
-      <Dashboard.Grid id="main" rows={2}>
-        <Dashboard.Widget
-          id="trend"
-          columns={12}
-          rows={2}
-          isCard
-          settingsLabel="Settings for revenue trend"
-          onSettingsPress={() => setSettingsId('trend')}
-        >
-          <RevenueChart />
-        </Dashboard.Widget>
-      </Dashboard.Grid>
-    </Dashboard>
-    {settingsId ? <Panel isFloating>{/* settings form */}</Panel> : null}
-  </div>
-);
-```
-
-### Controlled movement and resizing
-
-Dashboard quantizes pointer and keyboard gestures to whole grid units, applies the node's bounds, and reports the proposed placement. A move starts from any point on a movable widget or container except buttons, inputs, links, tabs, resize grips, and descendants marked with `data-dashboard-no-move`. The consumer accepts a placement by writing it to state, which keeps persistence — and the final say — outside the component. Collision resolution is Dashboard's: it reports placements that already account for the occupants in the destination.
-
-```jsx
-const [placement, setPlacement] = useState({
-  column: 0,
-  row: 0,
-  columns: 2,
-  rows: 1,
-});
-
-<Dashboard rowHeight={96} gap={16}>
-  <Dashboard.Grid id="editor" rows={6}>
-    <Dashboard.Widget
-      id="revenue"
-      {...placement}
-      minColumns={2}
-      maxColumns={6}
-      minRows={1}
-      maxRows={1}
-      isMovable
-      isResizable
-      moveLabel="Move revenue"
-      resizeLabel="Resize revenue"
-      onPlacementChange={(nextPlacement) => {
-        if (!collides(nextPlacement)) {
-          setPlacement(nextPlacement);
-        }
-      }}
-    >
-      <RevenueMetric />
-    </Dashboard.Widget>
-  </Dashboard.Grid>
-</Dashboard>;
-```
-
-`info.phase` is `'preview'` while a gesture is active and `'commit'` when it ends. `info.reason` identifies a move or resize, and `info.input` is `'pointer'`, `'keyboard'`, or `'command'` for a size command pressed in the node menu.
-
-Dashboard resolves occupancy before it reports. `info.items` carries every placement the resolution produced, `info.displaced` carries only the siblings Dashboard moved out of the way, and `info.isBlocked` is `true` when no resolution exists — the destination shows the danger placeholder and the consumer should reject the proposal. In a Grid, a single blocker is swapped into the box the moving node vacated; in a stack, the affected siblings are reflowed around the insertion point. A consumer applies `info.items` (plus `info.displaced`) verbatim and can still refuse a proposal simply by not writing it. When a pointer crosses into another container, the move proposal is expressed in that destination's local coordinates and `info.sourceParentId` plus `info.destinationParentId` identify the atomic tree transfer. The destination id is `null` for the Dashboard root. Those fields are omitted for movement within one parent and for resizing.
-
-Containers use the same controlled placement callback for movement and resizing. Inside one parent, a top-level container moves vertically, a HorizontalStack child horizontally, a VerticalStack child vertically, and Grid children on both axes. A tab panel holds one layout root and primarily acts as a cross-parent origin or destination. When a node enters a HorizontalStack, its proposed `rows` expands to the lesser of the stack height and its `maxRows`; when it enters a VerticalStack, its proposed `columns` expands to the lesser of the stack width and its `maxColumns`. A node that reaches its constraint before filling the cross axis remains aligned to the top in HorizontalStack or the left in VerticalStack. Pointer movement may also target the deepest valid container under the pointer. Widgets cannot target the Dashboard root or a tab panel, Tabs cannot target a nested container, and containers cannot target themselves, descendants, or a fourth nesting level. Keyboard movement remains within the immediate parent. A root container resizes vertically; a nested container resizes on the axes its parent layout permits. Dashboard derives a minimum from the occupied bounds of direct children, so a container cannot be resized across existing content. A nested container's current `columns` and `rows` are its child capacity; child placement and resizing are clamped to those bounds and never grow the parent.
-
-```jsx
-<Dashboard.Grid
-  id="section"
-  aria-label="Section"
-  rows={4}
-  maxRows={10}
-  isResizable
-  onPlacementChange={setSectionPlacement}
->
-  {children}
-</Dashboard.Grid>
-```
-
-## Selection
-
-Plain click selects one node. Shift-click, Command-click, or Control-click toggles sibling nodes in `multiple` mode. A descendant cannot be added while its ancestor is selected, and items from different immediate parents cannot form a multi-selection. Clicking Dashboard whitespace outside every widget and container clears the selection.
-
-Use controlled selection when another editor surface needs to coordinate with Dashboard:
-
-```jsx
-const [selectedKeys, setSelectedKeys] = useState([]);
-
-<Dashboard
-  selectedKeys={selectedKeys}
-  onSelectionChange={setSelectedKeys}
->
-  {/* containers */}
-</Dashboard>;
-```
-
-## Accessibility
-
-### Keyboard Navigation
-
-- `Tab` moves among selectable nodes and their interactive contents.
-- `Space` selects a focused Dashboard node.
-- Arrow keys on a focused movable widget or container move it by one unit on the axes its parent permits.
-- Selecting a widget or container reveals its action menu button and resize grip and adds them to the keyboard sequence. The menu button sits in the top-right corner and holds the node's size commands, which are the accessible equivalent of the resize gesture.
-- Arrow keys on a focused resize handle resize the selected widget or container by one column or row on its available axes.
-- `Shift` with the arrow keys on a focused Grid add button claims an insertion area; `Enter` opens the menu for it.
-- `Escape` during a pointer move, a pointer resize, or an add-region claim cancels the gesture and leaves the layout untouched.
-- Menu buttons and Tabs retain their standard keyboard behavior.
-
-### Screen Reader Support
-
-Containers and widgets are named groups with descriptive role descriptions. Supply meaningful `aria-label` values for non-text titles and user-visible widgets. `settingsLabel` should describe the target, for example “Settings for revenue trend”.
-
-### Interaction Scope
-
-This release supplies surface-based pointer and keyboard movement, cross-container pointer destinations, selected-sibling pointer groups, controlled resizing, node menus with discrete size commands, contextual free-cell affordances, claimed add regions, and registered add menus. A pointer move tries every container under the pointer from the deepest outward and lands in the first one that can take the geometry, rather than dead-ending on the deepest; candidate geometry is snapshotted once per gesture, so applying previews to layout state cannot feed back into the hit test. Dashboard renders one destination placeholder per moving item: primary when the landing is available, danger — with an icon, not colour alone — when occupancy blocks the drop, and no placeholder when the destination cannot satisfy the minimum geometry. If that placeholder covers Dashboard's add slot, Dashboard temporarily hides the add control so the two affordances never overlap. Cross-parent previews keep the source mounted for the active gesture, then atomically remove and insert a single item or selected sibling group on commit.
-
-Node chrome — the action menu, the resize grip, and the drop placeholders — is ordered inside a single stacking context that Dashboard opens at its root, so it paints above every node body at every depth, including the node being dragged and any add slot in an adjacent cell.
-
-## Best Practices
-
-1. Keep every id stable across renders and persistence cycles.
-2. Express placement relative to the immediate parent, not the root.
-3. Use `isCard` for widgets that need an outside boundary; rounding is already provided.
-4. Keep layout state, widget rendering, data configuration, and settings panels in consumer code; pass catalog names and size constraints through `addItems` so Dashboard can provide consistent contextual menus. Apply `info.items` and `info.displaced` as reported instead of recomputing collisions.
-5. Do not nest `Dashboard.Tabs`; Tabs is root-only.
-6. Hide nested-container actions at depth three rather than allowing Dashboard's development error to become an authoring dead end.
-
-## Suggested Improvements
-
-- Add a compact floating group preview and source-vacancy placeholders.
-- Add spring-loaded tab switching, so a drag can enter an inactive tab panel.
-- Give the resize handle full `separator` semantics: `aria-valuenow`/`min`/`max`, Home/End, and a Shift-accelerated step.
-- Add an optional consumer hook for product-specific availability rules that depend on the destination, beyond the static `isDisabled` flag.
-
-## Related Components
-
-- [Panel](./Panel.md) — A consumer-owned surface for widget settings.
-- [Tabs](../navigation/Tabs.md) — The tab primitive composed by `Dashboard.Tabs`.