@cube-dev/ui-kit 0.159.0 → 0.161.0

package/docs/components/content/Item.md

@@ -22,7 +22,7 @@ A foundational component that provides a standardized layout and styling for ite
 - **`suffix`** `ReactNode` — Element rendered after the content (before rightIcon)
 - **`description`** `ReactNode` — Description text displayed with the item
 - **`descriptionPlacement`** `'inline' | 'block'` (default: `inline`) — How the description is positioned relative to the main content. Defaults to `'block'` for `type="card"` and `type="header"`
-- **`type`** `'item' | 'header' | 'primary' | 'outline' | 'outline-2' | 'clear' | 'link' | 'card'` (default: `item`) — Visual style variant
+- **`type`** `'item' | 'header' | 'primary' | 'outline' | 'outline-2' | 'clear' | 'link' | 'card' | 'current'` (default: `item`) — Visual style variant
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `default`) — Semantic colour palette theme
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number` (default: `medium`) — Item size. Accepts custom number or string values
 - **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `button`) — Shape of the item border radius. Defaults to `'card'` for `type="card"`
@@ -84,7 +84,7 @@ The `mods` property accepts the following modifiers:
 - **`disabled`** `boolean` — Applied when isDisabled is true or when loading
 - **`loading`** `boolean` — Applied when isLoading is true
 - **`size`** `string` — Applied based on size prop value (xsmall, small, medium, large, xlarge, inline)
-- **`type`** `string` — Applied based on type prop value (item, header, primary, outline, outline-2, clear, link, card)
+- **`type`** `string` — Applied based on type prop value (item, header, primary, outline, outline-2, clear, link, card, current)
 - **`theme`** `string` — Applied based on theme prop value (default, danger, success, special, warning, note)
 - **`shape`** `string` — Applied based on shape prop value (card, button, sharp, pill)
 
@@ -100,6 +100,7 @@ The `mods` property accepts the following modifiers:
 - `clear` - Transparent item with minimal styling; `isSelected` adds brand-tinted fill
 - `link` - Link-styled item appearance (does not support icons or loading state)
 - `card` - Card appearance for notifications (supports `default`, `success`, `danger`, `warning`, `note` themes; defaults to `shape="card"`, `descriptionPlacement="block"`, uses semantic heading tags via `level` prop, and has `.5x` padding)
+- `current` - Same shape as `item` — no border, nothing painted at rest — but every color is derived from the inherited text color (`#current`) instead of the fixed `#surface-text`, so the item adopts the color of whatever container it sits in. The fill steps in on hover (`.04`), pressed (`.06`) and selected (`.09` → `.15`); the label stays fully opaque. Theme-agnostic: only supports the `default` theme (any other theme warns, since there is nothing for it to change). Use it inside colored containers — alerts, banners, dark overlays, tooltips. `Button` has a `current` type too, shaped like a standalone control instead: a resting `#current.03` chip inside a `#current.08` border
 
 ### Themes
 
@@ -256,6 +257,20 @@ Like headers, card labels use semantic heading tags (h1-h6) controlled by the `l
 </Item>
 ```
 
+### Current Type
+
+Use `type="current"` inside a container that paints its own text color. The fill and label are mixed from that inherited color, so the item matches the container without picking a theme — and keeps matching it if the container's color changes:
+
+```jsx
+<Block fill="#note-surface" color="#note-accent-text" padding="1.5x" radius="1cr">
+  <Item type="current" icon={<IconInfo />}>Adopts the note color</Item>
+</Block>
+
+<Block fill="#fixed-dark" color="#white" padding="1.5x" radius="1cr">
+  <Item type="current" icon={<IconInfo />}>Adopts white on a dark banner</Item>
+</Block>
+```
+
 ### With Loading State
 
 The `isLoading` prop displays a loading indicator and disables the item. The `loadingSlot` prop controls which slot the loading icon replaces:

package/docs/components/layout/Board.md

@@ -153,6 +153,8 @@ Every widget host exposes these as `data-*` attributes, and any style map passed
 through `widgetProps.styles` or a per-widget `styles` resolves against them.
 
 - **`selected`** — the widget is in the board's selection.
+- **`pre-selected`** — a live marquee covers the widget, so releasing the pointer
+  will select it. Never set at the same time as `selected`.
 - **`card`** — the widget draws a card border (`isCard`).
 - **`draggable`** — the widget can be dragged and no drag is in flight.
 - **`drag`** — the widget is being dragged.
@@ -166,15 +168,17 @@ Selection is an *edge* treatment — a `#primary-border` border plus a `#primary
 ring — because it reads as a focus-like state rather than a fill. `outline` stays
 reserved for the real focus ring, which is what keeps the two legible together:
 they use different tokens and the focus outline sits one border-width further
-out. To restyle it, override the same keys:
+out. `pre-selected` draws the same edge with the ring dimmed, so committing a
+lasso only changes the strength of something already on screen. To restyle
+either, override the same keys:
 
 ```jsx
 <Board
   selectionMode="multiple"
   widgetProps={{
     styles: {
-      border: { '': true, selected: '#note-border' },
-      shadow: { '': false, selected: '0 0 0 1bw #note' },
+      border: { '': true, 'pre-selected': '#note-border', selected: '#note-border' },
+      shadow: { '': false, 'pre-selected': '0 0 0 1bw #note.40', selected: '0 0 0 1bw #note' },
     },
   }}
 />
@@ -188,6 +192,8 @@ Supported hooks for tests, E2E, and building your own selection overlay:
 - **`data-board-widget-host`** on every widget host — presence only, "this is a widget host".
 - **`data-board-widget-id`** on every widget host — which widget.
 - **`data-selected`** on a selected host.
+- **`data-pre-selected`** on a host a live marquee currently covers.
+- **`data-marquee`** on the board element while a marquee gesture is in progress.
 
 ### Base Properties
 
@@ -293,19 +299,24 @@ touch drags capture the pointer, so they do not trigger it.
 
 ### Selection
 
-Click to select, Shift/Cmd/Ctrl-click to add or remove, and drag from empty board
 Press a widget to select it, <kbd>Shift</kbd>-press to add or remove one, and
 drag from empty board space to lasso. Because the press both selects and arms the
 drag, grabbing a widget you have not selected simply makes it the selection and
 moves it; grabbing one that *is* selected moves the whole block rigidly — keeping
-its shape horizontally, clamping against the grid edge as a unit rather than
-collapsing, and committing once.
-
-A group reflows exactly like a single widget: it is compacted by the same rules,
-so on a `vertical` board it can no more be parked in empty space than one widget
-can, and the widgets around it close the gap in the same frame. Under
-`compact="free"` (or `null`) nothing compacts, so the block stays precisely where
-it was dropped.
+its shape, clamping against the grid edge as a unit rather than collapsing, and
+committing once. While the band is out, the widgets it covers show a dimmed
+version of the selected edge (`pre-selected`), and no text can be selected under
+it.
+
+A group reflows like a single widget — it is compacted by the same rules, so on a
+`vertical` board it can no more be parked in empty space than one widget can, and
+the widgets around it close the gap in the same frame — but it does so as one
+block. Its members keep their exact offsets for the whole drag, and the widgets
+standing where it lands move out of its way rather than being packed between its
+members — whether it is dragged against the compaction axis or across it. When
+the drag ends the board compacts normally, so a group whose members could each
+float further settles on release. Under `compact="free"` (or `null`) nothing compacts,
+so the block stays precisely where it was dropped.
 
 ### Interactive content keeps its clicks
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.159.0",
+  "version": "0.161.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -18,6 +18,10 @@
     "./eslint-plugin": {
       "import": "./dist/eslint-plugin/index.js",
       "types": "./dist/eslint-plugin/index.d.ts"
+    },
+    "./probe": {
+      "import": "./dist/probe/index.js",
+      "types": "./dist/probe/index.d.ts"
     }
   },
   "files": [