@cube-dev/ui-kit 0.164.0 → 0.166.0

package/dist/components/layout/Board/Widget.d.ts

@@ -37,6 +37,15 @@ interface CubeBoardWidgetProps extends ContainerStyleProps {
    * in. Override per widget to enable or disable.
    */
   isCard?: boolean;
+  /**
+   * Whether the widget shows the resting ring on hover. On by default: it is the
+   * affordance that says a widget can be picked up. Turn it off for a widget
+   * that is scenery rather than a thing to grab — a chromeless layout container,
+   * a spacer — where the ring advertises an interaction the widget does not
+   * really offer. Selection and drag treatments are unaffected.
+   * @default true
+   */
+  hoverRing?: boolean;
   /** Minimum width in grid columns (used when the layout item omits `minW`). */
   minW?: number;
   /** Maximum width in grid columns (used when the layout item omits `maxW`). */

package/dist/components/layout/Board/Widget.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useBoardRegistry } from "./board-context.js";
@@ -26,7 +26,7 @@ function shallowEqualStyles(a, b) {
 * which is what allows a widget to be transferred between boards.
 */
 function Widget(props) {
-	const { id, children, isDraggable, isResizable, resizeHandles, resizeGripPlacement, isCard, minW, maxW, minH, maxH, constraints, qa, isAutoHeight, dragCancel, dragHandle, isSelectable, selectionCancel, "aria-label": ariaLabel } = props;
+	const { id, children, isDraggable, isResizable, resizeHandles, resizeGripPlacement, isCard, hoverRing, minW, maxW, minH, maxH, constraints, qa, isAutoHeight, dragCancel, dragHandle, isSelectable, selectionCancel, "aria-label": ariaLabel } = props;
 	const registry = useBoardRegistry();
 	const extractedStyles = extractStyles(props, CONTAINER_STYLES);
 	const nextStyles = Object.keys(extractedStyles).length > 0 ? extractedStyles : void 0;
@@ -43,6 +43,7 @@ function Widget(props) {
 			resizeHandles,
 			resizeGripPlacement,
 			isCard,
+			hoverRing,
 			minW,
 			maxW,
 			minH,

package/dist/components/layout/Board/Widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":[],"sources":["../../../../src/components/layout/Board/Widget.tsx"],"sourcesContent":["import { CONTAINER_STYLES, ContainerStyleProps, Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\n/**\n * Where a corner resize grip sits relative to the widget's corner.\n *\n * - `'inside'` - tucked into the widget box (the default).\n * - `'corner'` - centred on the corner itself, so it lines up with a control\n *   centred on the opposite corner. The grip is drawn outside the widget's own\n *   clip to make this possible, so it needs the board to have at least half a\n *   grip's worth of `containerPadding` to show in full at the board's edge.\n *\n * Only affects corner handles (`ne`/`nw`/`se`/`sw`); the dotted edge grips\n * (`n`/`s`/`e`/`w`) always sit inside the widget.\n */\nexport type BoardResizeGripPlacement = 'inside' | 'corner';\n\nexport interface CubeBoardWidgetProps extends ContainerStyleProps {\n  /** Unique id, must match the `i` of a layout item in a `Board`. */\n  id: string;\n  /** Widget content. */\n  children?: ReactNode;\n  /** Disable dragging for this widget. */\n  isDraggable?: boolean;\n  /** Disable resizing for this widget. */\n  isResizable?: boolean;\n  /** Which resize handles to show (overrides the board default). */\n  resizeHandles?: ResizeHandleAxis[];\n  /** Where the corner resize grips sit (overrides the board default). */\n  resizeGripPlacement?: BoardResizeGripPlacement;\n  /**\n   * Render this widget as a card by adding a border. Widgets are always filled\n   * (`#surface-2`) and rounded; `isCard` adds the border on top. Defaults to\n   * `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts\n   * in. Override per widget to enable or disable.\n   */\n  isCard?: boolean;\n  /** Minimum width in grid columns (used when the layout item omits `minW`). */\n  minW?: number;\n  /** Maximum width in grid columns (used when the layout item omits `maxW`). */\n  maxW?: number;\n  /** Minimum height in grid rows (used when the layout item omits `minH`). */\n  minH?: number;\n  /** Maximum height in grid rows (used when the layout item omits `maxH`). */\n  maxH?: number;\n  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /**\n   * Style overrides applied to the rendered widget element. Individual style\n   * props (`fill`, `padding`, `radius`, `border`, ...) can also be passed\n   * directly on `Board.Widget`, just like on `Board`; they are merged into\n   * these styles (a direct prop wins over the same key in the `styles` object).\n   */\n  styles?: Styles;\n  /**\n   * Grow this widget's height in its board to fit its content (only ever\n   * increases). Pair with a nested `Board isAligned` to make the container\n   * expand until the inner board's rows fit at the parent's row height.\n   */\n  isAutoHeight?: boolean;\n  /**\n   * CSS selector for elements that must not start a pointer drag inside this\n   * widget (overrides the board's `dragCancel`).\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start\n   * inside this widget (overrides the board's `dragHandle`).\n   */\n  dragHandle?: string;\n  /**\n   * Disable selection for this widget while the board's `selectionMode` is on.\n   * Symmetric with `isDraggable` / `isResizable`.\n   */\n  isSelectable?: boolean;\n  /**\n   * CSS selector for descendants whose clicks must not change the selection\n   * inside this widget (overrides the board's `selectionCancel`).\n   */\n  selectionCancel?: string;\n  /**\n   * Accessible name for the widget. Falls back to `qa`, then the layout item id\n   * — both of which are developer-facing, so set this whenever the widget is\n   * user-visible. Also used for the single-selection announcement.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Shallow-compare two style maps by their top-level keys. Direct style props\n * (e.g. `fill`) are primitives, so this reliably detects a real change while\n * ignoring the fresh object identity `extractStyles` produces each render.\n */\nfunction shallowEqualStyles(a?: Styles, b?: Styles): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (\n      (a as Record<string, unknown>)[key] !==\n      (b as Record<string, unknown>)[key]\n    ) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Declares a widget's content and per-widget options. Rendering and positioning\n * are performed by the owning `Board` (the component itself renders nothing),\n * which is what allows a widget to be transferred between boards.\n */\nexport function Widget(props: CubeBoardWidgetProps) {\n  const {\n    id,\n    children,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    resizeGripPlacement,\n    isCard,\n    minW,\n    maxW,\n    minH,\n    maxH,\n    constraints,\n    qa,\n    isAutoHeight,\n    dragCancel,\n    dragHandle,\n    isSelectable,\n    selectionCancel,\n    'aria-label': ariaLabel,\n  } = props;\n  const registry = useBoardRegistry();\n\n  // Collect direct style props (e.g. `fill`, `padding`, `radius`) and merge them\n  // with the explicit `styles` prop, mirroring how `Board` extracts its own\n  // styles. Fall back to `undefined` when nothing was provided so widgets with\n  // no styling keep a stable registration (avoids needless store churn).\n  const extractedStyles = extractStyles(props, CONTAINER_STYLES);\n  const nextStyles =\n    Object.keys(extractedStyles).length > 0 ? extractedStyles : undefined;\n\n  // `extractStyles` returns a fresh object every render, so passing it straight\n  // to `register` would make the store treat every render as a style change,\n  // bump its version, and re-render the hosting board in a loop. Keep a stable\n  // reference across renders and only swap it when the shallow style values\n  // actually change (direct props are primitives; a `styles` object is compared\n  // per top-level key).\n  const stylesRef = useRef<Styles | undefined>(undefined);\n  if (!shallowEqualStyles(stylesRef.current, nextStyles)) {\n    stylesRef.current = nextStyles;\n  }\n  const styles = stylesRef.current;\n\n  // Stable per-instance token so a stale unregister (from an unmounting copy of\n  // this widget) can't wipe out a newer instance's registration.\n  const ownerRef = useRef({});\n\n  // Register/update content on every render so content stays fresh in the store.\n  useLayoutEffect(() => {\n    registry?.store.register(\n      {\n        id,\n        content: children,\n        isDraggable,\n        isResizable,\n        resizeHandles,\n        resizeGripPlacement,\n        isCard,\n        minW,\n        maxW,\n        minH,\n        maxH,\n        constraints,\n        qa,\n        styles,\n        isAutoHeight,\n        dragCancel,\n        dragHandle,\n        isSelectable,\n        selectionCancel,\n        'aria-label': ariaLabel,\n      },\n      ownerRef.current,\n    );\n  });\n\n  // Remove from the store on unmount.\n  useEffect(() => {\n    const owner = ownerRef.current;\n    return () => {\n      registry?.store.unregister(id, owner);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;AAqGA,SAAS,mBAAmB,GAAY,GAAqB;AAC3D,KAAI,MAAM,EAAG,QAAO;AACpB,KAAI,CAAC,KAAK,CAAC,EAAG,QAAO;CACrB,MAAM,QAAQ,OAAO,KAAK,EAAE;CAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,KAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,MAAK,MAAM,OAAO,MAChB,KACG,EAA8B,SAC9B,EAA8B,KAE/B,QAAO;AAGX,QAAO;;;;;;;AAQT,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,qBACA,QACA,MACA,MACA,MACA,MACA,aACA,IACA,cACA,YACA,YACA,cACA,iBACA,cAAc,cACZ;CACJ,MAAM,WAAW,kBAAkB;CAMnC,MAAM,kBAAkB,cAAc,OAAO,iBAAiB;CAC9D,MAAM,aACJ,OAAO,KAAK,gBAAgB,CAAC,SAAS,IAAI,kBAAkB;CAQ9D,MAAM,YAAY,OAA2B,OAAU;AACvD,KAAI,CAAC,mBAAmB,UAAU,SAAS,WAAW,CACpD,WAAU,UAAU;CAEtB,MAAM,SAAS,UAAU;CAIzB,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;GACf,EACD,SAAS,QACV;GACD;AAGF,iBAAgB;EACd,MAAM,QAAQ,SAAS;AACvB,eAAa;AACX,aAAU,MAAM,WAAW,IAAI,MAAM;;IAGtC,CAAC,GAAG,CAAC;AAER,QAAO"}
+{"version":3,"file":"Widget.js","names":[],"sources":["../../../../src/components/layout/Board/Widget.tsx"],"sourcesContent":["import { CONTAINER_STYLES, ContainerStyleProps, Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\n/**\n * Where a corner resize grip sits relative to the widget's corner.\n *\n * - `'inside'` - tucked into the widget box (the default).\n * - `'corner'` - centred on the corner itself, so it lines up with a control\n *   centred on the opposite corner. The grip is drawn outside the widget's own\n *   clip to make this possible, so it needs the board to have at least half a\n *   grip's worth of `containerPadding` to show in full at the board's edge.\n *\n * Only affects corner handles (`ne`/`nw`/`se`/`sw`); the dotted edge grips\n * (`n`/`s`/`e`/`w`) always sit inside the widget.\n */\nexport type BoardResizeGripPlacement = 'inside' | 'corner';\n\nexport interface CubeBoardWidgetProps extends ContainerStyleProps {\n  /** Unique id, must match the `i` of a layout item in a `Board`. */\n  id: string;\n  /** Widget content. */\n  children?: ReactNode;\n  /** Disable dragging for this widget. */\n  isDraggable?: boolean;\n  /** Disable resizing for this widget. */\n  isResizable?: boolean;\n  /** Which resize handles to show (overrides the board default). */\n  resizeHandles?: ResizeHandleAxis[];\n  /** Where the corner resize grips sit (overrides the board default). */\n  resizeGripPlacement?: BoardResizeGripPlacement;\n  /**\n   * Render this widget as a card by adding a border. Widgets are always filled\n   * (`#surface-2`) and rounded; `isCard` adds the border on top. Defaults to\n   * `false` (borderless) unless the owning `Board`'s `widgetProps.isCard` opts\n   * in. Override per widget to enable or disable.\n   */\n  isCard?: boolean;\n  /**\n   * Whether the widget shows the resting ring on hover. On by default: it is the\n   * affordance that says a widget can be picked up. Turn it off for a widget\n   * that is scenery rather than a thing to grab — a chromeless layout container,\n   * a spacer — where the ring advertises an interaction the widget does not\n   * really offer. Selection and drag treatments are unaffected.\n   * @default true\n   */\n  hoverRing?: boolean;\n  /** Minimum width in grid columns (used when the layout item omits `minW`). */\n  minW?: number;\n  /** Maximum width in grid columns (used when the layout item omits `maxW`). */\n  maxW?: number;\n  /** Minimum height in grid rows (used when the layout item omits `minH`). */\n  minH?: number;\n  /** Maximum height in grid rows (used when the layout item omits `maxH`). */\n  maxH?: number;\n  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /**\n   * Style overrides applied to the rendered widget element. Individual style\n   * props (`fill`, `padding`, `radius`, `border`, ...) can also be passed\n   * directly on `Board.Widget`, just like on `Board`; they are merged into\n   * these styles (a direct prop wins over the same key in the `styles` object).\n   */\n  styles?: Styles;\n  /**\n   * Grow this widget's height in its board to fit its content (only ever\n   * increases). Pair with a nested `Board isAligned` to make the container\n   * expand until the inner board's rows fit at the parent's row height.\n   */\n  isAutoHeight?: boolean;\n  /**\n   * CSS selector for elements that must not start a pointer drag inside this\n   * widget (overrides the board's `dragCancel`).\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start\n   * inside this widget (overrides the board's `dragHandle`).\n   */\n  dragHandle?: string;\n  /**\n   * Disable selection for this widget while the board's `selectionMode` is on.\n   * Symmetric with `isDraggable` / `isResizable`.\n   */\n  isSelectable?: boolean;\n  /**\n   * CSS selector for descendants whose clicks must not change the selection\n   * inside this widget (overrides the board's `selectionCancel`).\n   */\n  selectionCancel?: string;\n  /**\n   * Accessible name for the widget. Falls back to `qa`, then the layout item id\n   * — both of which are developer-facing, so set this whenever the widget is\n   * user-visible. Also used for the single-selection announcement.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Shallow-compare two style maps by their top-level keys. Direct style props\n * (e.g. `fill`) are primitives, so this reliably detects a real change while\n * ignoring the fresh object identity `extractStyles` produces each render.\n */\nfunction shallowEqualStyles(a?: Styles, b?: Styles): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (\n      (a as Record<string, unknown>)[key] !==\n      (b as Record<string, unknown>)[key]\n    ) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Declares a widget's content and per-widget options. Rendering and positioning\n * are performed by the owning `Board` (the component itself renders nothing),\n * which is what allows a widget to be transferred between boards.\n */\nexport function Widget(props: CubeBoardWidgetProps) {\n  const {\n    id,\n    children,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    resizeGripPlacement,\n    isCard,\n    hoverRing,\n    minW,\n    maxW,\n    minH,\n    maxH,\n    constraints,\n    qa,\n    isAutoHeight,\n    dragCancel,\n    dragHandle,\n    isSelectable,\n    selectionCancel,\n    'aria-label': ariaLabel,\n  } = props;\n  const registry = useBoardRegistry();\n\n  // Collect direct style props (e.g. `fill`, `padding`, `radius`) and merge them\n  // with the explicit `styles` prop, mirroring how `Board` extracts its own\n  // styles. Fall back to `undefined` when nothing was provided so widgets with\n  // no styling keep a stable registration (avoids needless store churn).\n  const extractedStyles = extractStyles(props, CONTAINER_STYLES);\n  const nextStyles =\n    Object.keys(extractedStyles).length > 0 ? extractedStyles : undefined;\n\n  // `extractStyles` returns a fresh object every render, so passing it straight\n  // to `register` would make the store treat every render as a style change,\n  // bump its version, and re-render the hosting board in a loop. Keep a stable\n  // reference across renders and only swap it when the shallow style values\n  // actually change (direct props are primitives; a `styles` object is compared\n  // per top-level key).\n  const stylesRef = useRef<Styles | undefined>(undefined);\n  if (!shallowEqualStyles(stylesRef.current, nextStyles)) {\n    stylesRef.current = nextStyles;\n  }\n  const styles = stylesRef.current;\n\n  // Stable per-instance token so a stale unregister (from an unmounting copy of\n  // this widget) can't wipe out a newer instance's registration.\n  const ownerRef = useRef({});\n\n  // Register/update content on every render so content stays fresh in the store.\n  useLayoutEffect(() => {\n    registry?.store.register(\n      {\n        id,\n        content: children,\n        isDraggable,\n        isResizable,\n        resizeHandles,\n        resizeGripPlacement,\n        isCard,\n        hoverRing,\n        minW,\n        maxW,\n        minH,\n        maxH,\n        constraints,\n        qa,\n        styles,\n        isAutoHeight,\n        dragCancel,\n        dragHandle,\n        isSelectable,\n        selectionCancel,\n        'aria-label': ariaLabel,\n      },\n      ownerRef.current,\n    );\n  });\n\n  // Remove from the store on unmount.\n  useEffect(() => {\n    const owner = ownerRef.current;\n    return () => {\n      registry?.store.unregister(id, owner);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;AA8GA,SAAS,mBAAmB,GAAY,GAAqB;AAC3D,KAAI,MAAM,EAAG,QAAO;AACpB,KAAI,CAAC,KAAK,CAAC,EAAG,QAAO;CACrB,MAAM,QAAQ,OAAO,KAAK,EAAE;CAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,KAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,MAAK,MAAM,OAAO,MAChB,KACG,EAA8B,SAC9B,EAA8B,KAE/B,QAAO;AAGX,QAAO;;;;;;;AAQT,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,qBACA,QACA,WACA,MACA,MACA,MACA,MACA,aACA,IACA,cACA,YACA,YACA,cACA,iBACA,cAAc,cACZ;CACJ,MAAM,WAAW,kBAAkB;CAMnC,MAAM,kBAAkB,cAAc,OAAO,iBAAiB;CAC9D,MAAM,aACJ,OAAO,KAAK,gBAAgB,CAAC,SAAS,IAAI,kBAAkB;CAQ9D,MAAM,YAAY,OAA2B,OAAU;AACvD,KAAI,CAAC,mBAAmB,UAAU,SAAS,WAAW,CACpD,WAAU,UAAU;CAEtB,MAAM,SAAS,UAAU;CAIzB,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;GACf,EACD,SAAS,QACV;GACD;AAGF,iBAAgB;EACd,MAAM,QAAQ,SAAS;AACvB,eAAa;AACX,aAAU,MAAM,WAAW,IAAI,MAAM;;IAGtC,CAAC,GAAG,CAAC;AAER,QAAO"}

package/dist/components/layout/Board/WidgetHost.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -38,7 +38,7 @@ const WidgetElement = tasty({
 		},
 		shadow: {
 			"": false,
-			"hovered & !card & (draggable | resizing)": "0 0 0 1bw #border",
+			"hovered & !card & !no-hover-ring & (draggable | resizing)": "0 0 0 1bw #border",
 			"pre-selected": "0 0 0 1bw #primary.40",
 			selected: "0 0 0 1bw #primary",
 			"drag | resizing": "$dialog-shadow"
@@ -305,7 +305,7 @@ function ResizeHandle({ axis, placement, onResize }) {
 * renders into the shared overlay portal so it can float outside its board.
 */
 function WidgetHost(props) {
-	const { boardId, item, positionParams, registration, isCard, styles: widgetStyles, isDraggable, isResizable, resizeHandles, resizeGripPlacement, isAutoHeight, qa, dragCancel, dragHandle, registry, dragState, settled, onResize, onAutoHeight, onDragLifecycle, isSelectable = false, isSelected = false, isPreSelected = false, selectionCancel, selectedHintId, onSelect, onSelectionReset, selectModifierKey = "metaKey" } = props;
+	const { boardId, item, positionParams, registration, isCard, hoverRing, styles: widgetStyles, isDraggable, isResizable, resizeHandles, resizeGripPlacement, isAutoHeight, qa, dragCancel, dragHandle, registry, dragState, settled, onResize, onAutoHeight, onDragLifecycle, isSelectable = false, isSelected = false, isPreSelected = false, selectionCancel, selectedHintId, onSelect, onSelectionReset, selectModifierKey = "metaKey" } = props;
 	const { t } = useI18n();
 	const ariaLabel = registration?.["aria-label"];
 	const hostRef = useRef(null);
@@ -467,6 +467,7 @@ function WidgetHost(props) {
 		static: !!item.static,
 		resizing: isResizing,
 		card: isCard,
+		"no-hover-ring": !hoverRing,
 		hovered: isHovered,
 		"focus-visible": isFocusVisible,
 		selected: isSelected,

package/dist/components/layout/Board/WidgetHost.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetHost.js","names":["mergeProps"],"sources":["../../../../src/components/layout/Board/WidgetHost.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { CSSProperties, useMemo, useRef, useState } from 'react';\nimport { useFocusRing, useFocusWithin, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\n\nimport {\n  BoardDragState,\n  BoardHost,\n  BoardHostContext,\n  BoardRegistryContextValue,\n  ViewportRect,\n} from './board-context';\nimport { WidgetRegistration } from './board-store';\nimport {\n  calcGridColWidth,\n  calcGridItemPosition,\n  LayoutItem,\n  PositionParams,\n  ResizeHandleAxis,\n} from './grid-core';\nimport { BoardSelectModifierKey } from './use-board-select-modifier-key';\n\nimport type { BoardResizeGripPlacement } from './Widget';\n\nexport type ResizePhase = 'start' | 'move' | 'end';\n\n/**\n * Slack (px) absorbed when converting an auto-height widget's content height to\n * whole rows, so sub-pixel measurement/rounding noise never bumps an extra row.\n */\nconst AUTO_HEIGHT_TOLERANCE = 4;\n\n/**\n * Corner grip size in px, and therefore how far a `corner`-placed grip hangs\n * outside the widget: exactly half of it, since it is centred on the corner. The\n * hit-zone reads the same number so what you see is what you can grab.\n */\nconst GRIP_SIZE = 10;\n\nconst WidgetElement = tasty({\n  qa: 'BoardWidget',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    // Widgets always carry a `#surface-2` fill and rounded corners. The `card`\n    // modifier (board-level `widgetProps.isCard` or per-widget `isCard`) adds a\n    // border on top; a non-card widget is borderless so nested boards can align\n    // their columns flush with the parent grid.\n    fill: '#surface-2',\n    radius: '1cr',\n    // Selection reads as a focus-like state here - it is transient, it follows\n    // what the user is working with, and it is dropped the moment they touch\n    // something else - so it is drawn as an edge treatment rather than as a\n    // fill. `outline` stays reserved for the real focus ring (the kit's\n    // convention everywhere), and the two are kept legible side by side by\n    // token: selection is a saturated `#primary` ring, focus a `#primary-text`\n    // outline sitting one border-width further out (`outlineOffset`).\n    // A widget a live marquee currently covers gets the same treatment with the\n    // ring dimmed, so releasing the pointer only changes the strength of an edge\n    // that is already there — no geometry shift, nothing to re-read. The border\n    // is *not* dimmed with it: `#primary-border` is close to `#border` on a dark\n    // scheme, so fading it lands below the border a widget already has and the\n    // preview would read as weaker than doing nothing.\n    border: {\n      '': false,\n      card: true,\n      'pre-selected': '#primary-border',\n      selected: '#primary-border',\n    },\n    shadow: {\n      '': false,\n      'hovered & !card & (draggable | resizing)': '0 0 0 1bw #border',\n      'pre-selected': '0 0 0 1bw #primary.40',\n      selected: '0 0 0 1bw #primary',\n      // `$dialog-shadow` uses Glaze `#shadow-lg`, which adapts to dark / high-contrast schemes.\n      'drag | resizing': '$dialog-shadow',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      'focus-visible': '1bw #primary-text',\n    },\n    outlineOffset: '1bw',\n    zIndex: {\n      '': 1,\n      'drag | resizing': 10,\n    },\n    // The pointer-drag ghost (the clone that floats in the overlay) is slightly\n    // translucent so the user can see through it to whatever it hovers over -\n    // e.g. a Tabs header underneath - and land a precise drop / tab switch. The\n    // in-place host (keyboard drags, which never float) stays fully opaque.\n    opacity: {\n      '': 1,\n      floating: 0.8,\n    },\n    // Reflowing widgets animate their position and size. The actively\n    // dragged/resized element - and the floating overlay clone - must track the\n    // pointer with no lag, so they drop geometry from the list. Geometry is also\n    // dropped until the board reports `settled`: on init widgets jump to their\n    // first measured positions, and without this gate they would slide/grow in\n    // from their default box. The board lifts the gate after the first\n    // positioned paint so subsequent reflows animate normally.\n    transition: {\n      '': 'theme, shadow, opacity',\n      settled: 'theme, shadow, opacity, inset, width, height',\n      'drag | floating | resizing': 'theme, shadow, opacity',\n    },\n    boxSizing: 'border-box',\n    userSelect: {\n      '': 'auto',\n      'drag | resizing': 'none',\n    },\n    cursor: {\n      '': 'auto',\n      draggable: 'grab',\n      drag: 'grabbing',\n    },\n    touchAction: 'none',\n    // A widget owns its grid cell and must not paint outside it: a nested board\n    // with more rows than currently fit, a mid-drag reflow (an auto-height\n    // container deliberately cannot grow while a drag is in flight), or a long\n    // unbreakable string would otherwise spill over its neighbours. Clipping\n    // holds regardless of `isCard` — a borderless widget has no drawn edge, but\n    // it still has a cell.\n    //\n    // The cost is that a descendant's `outline` is cropped at the edge, since an\n    // outline is clipped by an *ancestor's* overflow rather than its own. A\n    // widget whose content needs to paint outside — a control drawing its own\n    // active ring — opts out with `overflow=\"visible\"`, or draws the ring inset\n    // with a negative `outlineOffset`.\n    overflow: 'hidden',\n  },\n});\n\nconst HandleElement = tasty({\n  qa: 'BoardResizeHandle',\n  styles: {\n    position: 'absolute',\n    zIndex: 20,\n    fill: '#clear',\n    // The corner hit-zone is drawn inside the grip layer, which takes no pointer\n    // events; `pointer-events` inherits, so it has to opt back in. Inside the\n    // widget this is what it already got from the default.\n    pointerEvents: 'auto',\n    // Overhang: how far the hit-zone extends beyond the widget edge. A\n    // `corner`-placed grip hangs out by half its own size, and the hit-zone\n    // matches it exactly - a visible grip you cannot grab is worse than no grip.\n    '--handle-size': '3x',\n    '--handle-overhang': {\n      '': '-8px',\n      'placement=corner': `${-GRIP_SIZE / 2}px`,\n    },\n    '--handle-inset': '1x',\n    width: {\n      '': '$handle-size',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'auto',\n    },\n    height: {\n      '': '$handle-size',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'auto',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"n\"] | [data-axis=\"ne\"] | [data-axis=\"nw\"]':\n        '$handle-overhang',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-inset',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"s\"] | [data-axis=\"se\"] | [data-axis=\"sw\"]':\n        '$handle-overhang',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-inset',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"w\"] | [data-axis=\"nw\"] | [data-axis=\"sw\"]':\n        '$handle-overhang',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$handle-inset',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"e\"] | [data-axis=\"ne\"] | [data-axis=\"se\"]':\n        '$handle-overhang',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$handle-inset',\n    },\n    cursor: {\n      '': 'default',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'ns-resize',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'ew-resize',\n      '[data-axis=\"ne\"] | [data-axis=\"sw\"]': 'nesw-resize',\n      '[data-axis=\"nw\"] | [data-axis=\"se\"]': 'nwse-resize',\n    },\n    touchAction: 'none',\n  },\n});\n\nconst GripElement = tasty({\n  qa: 'BoardResizeGrip',\n  styles: {\n    position: 'absolute',\n    // Both placements derive from one number, so the grip can never drift out of\n    // step with its own size: `inside` tucks it into the widget box, `corner`\n    // centres it on the widget's corner - exactly half its own size back from\n    // each edge. Consumers pick between them with `resizeGripPlacement` instead\n    // of re-deriving these offsets from the outside.\n    '--grip-size': `${GRIP_SIZE}px`,\n    '--grip-inset': '4px',\n    '--grip-offset': {\n      '': '$grip-inset',\n      'placement=corner': '($grip-size / -2)',\n    },\n    width: '$grip-size',\n    height: '$grip-size',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      revealed: 1,\n    },\n    transition: 'opacity 120ms ease-in-out',\n    borderTop: {\n      '': '0',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '2px solid #dark.40',\n    },\n    borderBottom: {\n      '': '0',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '2px solid #dark.40',\n    },\n    borderLeft: {\n      '': '0',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '2px solid #dark.40',\n    },\n    borderRight: {\n      '': '0',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '2px solid #dark.40',\n    },\n    radius: {\n      '': '0',\n      '[data-axis=\"se\"]': '4px bottom-right',\n      '[data-axis=\"sw\"]': '4px bottom-left',\n      '[data-axis=\"ne\"]': '4px top-right',\n      '[data-axis=\"nw\"]': '4px top-left',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '$grip-offset',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '$grip-offset',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '$grip-offset',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '$grip-offset',\n    },\n  },\n});\n\n/**\n * Where the corner grips are drawn when `resizeGripPlacement` is `'corner'`.\n *\n * `WidgetElement` clips its children (`overflow: hidden`, and that clipping is\n * load-bearing - see its own note), so a grip centred on the widget's corner\n * would be cut in half if it stayed inside. This layer mirrors the widget's grid\n * rect as a *sibling* of it, clips nothing, and never takes pointer events: the\n * transparent `HandleElement` inside the widget still owns the gesture, so\n * escaping the clip costs no hit-testing behaviour.\n *\n * It sits above a resting widget (`zIndex: 1`) so a grip is never hidden by the\n * neighbour it overhangs, and below a dragged or resized one (`zIndex: 10`) so a\n * lifted widget still paints over its neighbours' grips. The board's own content\n * box still clips it, so a grip on a widget flush against the board edge needs\n * `containerPadding` >= half the grip size to show in full.\n */\nconst GripLayerElement = tasty({\n  qa: 'BoardResizeGripLayer',\n  styles: {\n    position: 'absolute',\n    overflow: 'visible',\n    pointerEvents: 'none',\n    zIndex: 5,\n  },\n});\n\n// Edge axes (n/s/e/w) get a dotted grip affordance, revealed on\n// hover/focus/resize. The dots line up along the edge (a vertical column for the\n// e/w handles, a horizontal row for n/s), matching the design-system pane grip\n// (see `Layout.Pane`). Purely visual - the interaction still lives on the\n// transparent `HandleElement` hit-zone above.\nconst EdgeGripElement = tasty({\n  qa: 'BoardResizeEdgeGrip',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    gap: '2bw',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      revealed: 1,\n    },\n    transition: 'opacity 120ms ease-in-out',\n    // A column of 5 dots for the vertical edges (e/w), a row of 5 for n/s.\n    gridColumns: {\n      '': '3px',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '3px 3px 3px 3px 3px',\n    },\n    gridRows: {\n      '': '3px 3px 3px 3px 3px',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '3px',\n    },\n    // Anchor to the relevant edge and center along it.\n    top: {\n      '': '50%',\n      '[data-axis=\"n\"]': '3px',\n      '[data-axis=\"s\"]': 'auto',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"s\"]': '3px',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"w\"]': '3px',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '50%',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"e\"]': '3px',\n    },\n    transform: {\n      '': 'translate(0, 0)',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'translate(0, -50%)',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'translate(-50%, 0)',\n    },\n\n    Dot: {\n      width: '3px',\n      height: '3px',\n      radius: 'round',\n      fill: {\n        '': '#dark-03',\n        resizing: '#dark-02',\n      },\n    },\n  },\n});\n\n/** Corner axes get a visible grip affordance on hover/focus/resize. */\nfunction isCornerAxis(axis: ResizeHandleAxis): boolean {\n  return axis.length === 2;\n}\n\n/** Edge axes (n/s/e/w) get a dotted grip affordance. */\nfunction isEdgeAxis(axis: ResizeHandleAxis): boolean {\n  return axis.length === 1;\n}\n\ninterface ResizeHandleProps {\n  axis: ResizeHandleAxis;\n  placement: BoardResizeGripPlacement;\n  onResize: (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n}\n\nfunction ResizeHandle({ axis, placement, onResize }: ResizeHandleProps) {\n  const { moveProps } = useMove({\n    onMoveStart() {\n      onResize(axis, 'start', 0, 0);\n    },\n    onMove(e) {\n      onResize(axis, 'move', e.deltaX, e.deltaY);\n    },\n    onMoveEnd() {\n      onResize(axis, 'end', 0, 0);\n    },\n  });\n\n  const stopProps = {\n    onPointerDown: (e: React.PointerEvent) => e.stopPropagation(),\n    onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),\n    onTouchStart: (e: React.TouchEvent) => e.stopPropagation(),\n  };\n\n  return (\n    <HandleElement\n      data-axis={axis}\n      mods={{ placement }}\n      {...mergeProps(stopProps, moveProps)}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nexport interface WidgetHostProps {\n  boardId: string;\n  item: LayoutItem;\n  positionParams: PositionParams;\n  registration: WidgetRegistration | undefined;\n  /**\n   * Whether this widget renders with card chrome (fill/border/radius). Resolved\n   * by the owning `Board` from the per-widget `isCard` and the board-level\n   * `widgetProps.isCard` default.\n   */\n  isCard: boolean;\n  /**\n   * Resolved style overrides for the rendered widget element (per-widget\n   * `styles` falling back to the board-level `widgetProps.styles`).\n   */\n  styles?: Styles;\n  isDraggable: boolean;\n  isResizable: boolean;\n  resizeHandles: ResizeHandleAxis[];\n  /**\n   * Where the corner grips sit. Resolved by the owning `Board` from the\n   * per-widget `resizeGripPlacement` and the board-level\n   * `widgetProps.resizeGripPlacement` default.\n   */\n  resizeGripPlacement: BoardResizeGripPlacement;\n  /**\n   * Whether this widget grows to fit its content. Resolved by the owning\n   * `Board` from the per-widget `isAutoHeight` and the board-level\n   * `widgetProps.isAutoHeight` default.\n   */\n  isAutoHeight: boolean;\n  /**\n   * Test id / accessible name for the rendered widget element. Resolved by the\n   * owning `Board` from the per-widget `qa` and the board-level `widgetProps.qa`\n   * default; falls back to the layout id.\n   */\n  qa?: string;\n  /**\n   * CSS selector for elements that must not start a pointer drag (e.g. form\n   * controls inside the widget). A pointer-down whose target matches this\n   * selector never begins a drag.\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start. A\n   * pointer-down outside a matching element never begins a drag.\n   */\n  dragHandle?: string;\n  /**\n   * Whether the owning board has settled its widgets' initial positions. While\n   * false, the widget does not animate `inset` (left/top) so the first\n   * positioned paint isn't seen as a transition. Lifted after the board's first\n   * measured render.\n   */\n  settled?: boolean;\n  registry: BoardRegistryContextValue;\n  dragState: BoardDragState | null;\n  onResize: (\n    id: string,\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n  /**\n   * Report the minimum number of rows this widget needs to fit its content\n   * (typically a nested board). The owning board grows the item to this height\n   * when it is taller than the current one, and treats it as the resize floor\n   * so the widget cannot be dragged shorter than its content requires.\n   */\n  onAutoHeight: (id: string, neededRows: number) => void;\n  /**\n   * Notify the owning board of a drag gesture's lifecycle so it can emit the\n   * public drag callbacks. Fires after the registry has updated drag state.\n   */\n  onDragLifecycle?: (id: string, phase: ResizePhase) => void;\n  /** Whether this widget can be selected (board selection on and not opted out). */\n  isSelectable?: boolean;\n  isSelected?: boolean;\n  /**\n   * A live marquee currently covers this widget, so it *will* be selected when\n   * the pointer is released. Provisional: it never reaches the selection model,\n   * the callbacks or the live region.\n   */\n  isPreSelected?: boolean;\n  /** CSS selector for descendants whose clicks must not change the selection. */\n  selectionCancel?: string;\n  /** Id of the board-owned node holding the shared \"Selected\" description. */\n  selectedHintId?: string;\n  /** Apply a selection gesture. `additive` toggles instead of replacing. */\n  onSelect?: (id: string, additive: boolean) => void;\n  /** Drop the whole selection. Called when the user interacts elsewhere. */\n  onSelectionReset?: () => void;\n  /** Pointer-event property carrying the platform additive-selection modifier. */\n  selectModifierKey?: BoardSelectModifierKey;\n}\n\n/**\n * The positioned, interactive wrapper a board renders for each layout item it\n * owns. Content is pulled from the shared store (by id), so any board can host\n * any widget. Dragging uses React Aria `useMove`; during a drag the widget\n * renders into the shared overlay portal so it can float outside its board.\n */\nexport function WidgetHost(props: WidgetHostProps) {\n  const {\n    boardId,\n    item,\n    positionParams,\n    registration,\n    isCard,\n    styles: widgetStyles,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    resizeGripPlacement,\n    isAutoHeight,\n    qa,\n    dragCancel,\n    dragHandle,\n    registry,\n    dragState,\n    settled,\n    onResize,\n    onAutoHeight,\n    onDragLifecycle,\n    isSelectable = false,\n    isSelected = false,\n    isPreSelected = false,\n    selectionCancel,\n    selectedHintId,\n    onSelect,\n    onSelectionReset,\n    selectModifierKey = 'metaKey',\n  } = props;\n\n  const { t } = useI18n();\n  const ariaLabel = registration?.['aria-label'];\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const isActiveDrag = dragState?.itemId === item.i;\n  // Every member of a group drag floats, not just the grabbed one — otherwise\n  // the rest sit motionless while their placeholders move, which reads as\n  // broken. Only the grabbed host owns a live `useMove` gesture, so hiding the\n  // others is trivially safe.\n  const isDragMember = !!dragState?.itemIds.includes(item.i);\n\n  // Translate a nested board's reported height deficit (signed px: positive when\n  // it is squeezed, negative when it has slack) into the absolute number of rows\n  // this widget needs, and report it to the owning board. The widget's chrome\n  // cancels out: the needed pixel height is the widget's current pixel height\n  // plus the deficit. A small tolerance keeps sub-pixel rounding from bumping an\n  // extra row. Skipped during a drag (the widget is floating in the overlay).\n  const requestHeightDeficit = useEvent((deficitPx: number) => {\n    if (!isAutoHeight || isActiveDrag) return;\n    const step = positionParams.rowHeight + positionParams.margin[1];\n    if (step <= 0) return;\n    const current = calcGridItemPosition(\n      positionParams,\n      item.x,\n      item.y,\n      item.w,\n      item.h,\n    );\n    const neededPx = current.height + deficitPx;\n    const neededRows = Math.max(\n      1,\n      Math.ceil(\n        (neededPx + positionParams.margin[1] - AUTO_HEIGHT_TOLERANCE) / step,\n      ),\n    );\n    onAutoHeight(item.i, neededRows);\n  });\n\n  const hostValue = useMemo<BoardHost>(\n    () => ({ isAutoHeight, requestHeightDeficit }),\n    [isAutoHeight, requestHeightDeficit],\n  );\n  // Keyboard drags stay in place: moving the focused element into the overlay\n  // portal would unmount it and stop arrow-key move events.\n  const useOverlay = isActiveDrag && dragState?.pointerType !== 'keyboard';\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { hoverProps, isHovered } = useHover({ isDisabled: isActiveDrag });\n  // A `corner` grip and its hit-zone live outside the widget box, so hovering the\n  // half that hangs out is not hovering the widget. Without this the grip fades\n  // away exactly as the pointer arrives on it - the affordance retreats from the\n  // gesture it is inviting.\n  const { hoverProps: layerHoverProps, isHovered: isLayerHovered } = useHover({\n    isDisabled: isActiveDrag,\n  });\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  // Reveal the resize grips when the widget is interacted with (but not while it\n  // is being dragged, where the widget floats in the overlay).\n  const gripsRevealed =\n    isResizable &&\n    !item.static &&\n    !isActiveDrag &&\n    (isHovered || isLayerHovered || isFocusWithin || isResizing);\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (!isDraggable) return;\n      const rect = hostRef.current?.getBoundingClientRect();\n      const pos = calcGridItemPosition(\n        positionParams,\n        item.x,\n        item.y,\n        item.w,\n        item.h,\n      );\n      const vr: ViewportRect = rect\n        ? {\n            left: rect.left,\n            top: rect.top,\n            width: rect.width,\n            height: rect.height,\n          }\n        : {\n            left: pos.left,\n            top: pos.top,\n            width: pos.width,\n            height: pos.height,\n          };\n      registry.onDragStart(boardId, item.i, vr, e.pointerType, hostRef.current);\n      onDragLifecycle?.(item.i, 'start');\n    },\n    onMove(e) {\n      if (!isDraggable) return;\n      if (e.pointerType === 'keyboard') {\n        // Amplify arrow-key steps to a full grid cell so items actually move.\n        const colWidth = calcGridColWidth(positionParams);\n        const stepX = colWidth + positionParams.margin[0];\n        const stepY = positionParams.rowHeight + positionParams.margin[1];\n        registry.onDragMove(\n          Math.sign(e.deltaX) * stepX,\n          Math.sign(e.deltaY) * stepY,\n          e.pointerType,\n        );\n        onDragLifecycle?.(item.i, 'move');\n        return;\n      }\n      registry.onDragMove(e.deltaX, e.deltaY, e.pointerType);\n      onDragLifecycle?.(item.i, 'move');\n    },\n    onMoveEnd() {\n      if (!isDraggable) return;\n      registry.onDragEnd();\n      onDragLifecycle?.(item.i, 'end');\n    },\n  });\n\n  // `role=\"group\"` is what makes `aria-roledescription` legal here - it is\n  // invalid on a role-less `div`, which is what this element used to be. A\n  // collection role (`option`, `gridcell`, ...) would be the only way to carry a\n  // real `aria-selected`, but those require presentational children and a\n  // widget hosts arbitrary interactive content, so selection is conveyed by the\n  // board's live region plus the shared description below instead.\n  const a11yProps = {\n    role: 'group',\n    tabIndex: isDraggable || isSelectable ? 0 : undefined,\n    'aria-roledescription': isDraggable\n      ? t('board.draggableWidget', 'Draggable widget')\n      : t('board.widget', 'Widget'),\n    'aria-label': ariaLabel ?? qa ?? item.i,\n    'aria-describedby': isSelected ? selectedHintId : undefined,\n    'aria-keyshortcuts': isSelectable ? 'Space' : undefined,\n  };\n\n  // True from the moment a real move begins until the click that ends the\n  // gesture has been swallowed. `useMove` binds only pointerdown/keydown, never\n  // click, so a click handler composes with it cleanly - but the click that\n  // *terminates* a drag would otherwise land as a selection. Event order is\n  // pointerdown -> onMove* -> pointerup -> onMoveEnd -> click, so this ref is\n  // always accurate by the time the click arrives. More reliable than a pixel\n  // threshold, which has to guess.\n  const isInteractiveTarget = (target: EventTarget | null) => {\n    const el = target as HTMLElement | null;\n\n    return !!(selectionCancel && el?.closest?.(selectionCancel));\n  };\n\n  /**\n   * Selecting and starting a drag are the *same* gesture: you grab the thing you\n   * are about to move. So the press selects immediately and the drag arms behind\n   * it — move and it drags, stay still and it was only a selection. This is what\n   * every canvas tool does, and it is why there is no ambiguity to resolve with a\n   * modifier.\n   *\n   *  - a press on an interactive descendant belongs to that control, so the\n   *    selection is dropped and the press is left alone;\n   *  - <kbd>Shift</kbd> or the platform modifier toggles membership;\n   *  - a press on an unselected widget makes it the selection, so the drag that\n   *    follows moves exactly what was grabbed;\n   *  - a press on an already-selected widget changes nothing, so the drag moves\n   *    the whole group.\n   *\n   * Runs before the drag handler (see the `mergeProps` order below), so the\n   * registry resolves the group against the selection this press just made.\n   */\n  const handleSelectPointerDown = (e: React.PointerEvent) => {\n    if (!isSelectable || !onSelect || e.button !== 0) return;\n\n    if (isInteractiveTarget(e.target)) {\n      onSelectionReset?.();\n\n      return;\n    }\n\n    // A press this widget owns must never reach an ancestor widget host: in a\n    // nested board the outer widget would otherwise select itself on top of the\n    // inner selection. This has to cover the already-selected case too, which\n    // changes nothing here but is still a press this board handled — and\n    // `stopBubbleProps` below only guards draggable widgets.\n    e.stopPropagation();\n\n    if (e.shiftKey || e[selectModifierKey]) {\n      onSelect(item.i, true);\n\n      return;\n    }\n\n    if (!isSelected) {\n      onSelect(item.i, false);\n    }\n  };\n\n  const handleSelectKeyDown = (e: React.KeyboardEvent) => {\n    // Same guard the arrow keys use: only act when the host itself is focused,\n    // so Space inside a nested input or button keeps its meaning.\n    if (e.target !== e.currentTarget) return;\n    if (!isSelectable || !onSelect) return;\n    if (e.key !== ' ' && e.key !== 'Spacebar') return;\n\n    // No modifier needed here: focus already says which widget is meant, and\n    // Space cannot be mistaken for the start of a drag. Only swallow the key\n    // once we know we are acting on it, so a board without selection still\n    // scrolls on Space.\n    e.preventDefault();\n    e.stopPropagation();\n    // Space is an explicit selection gesture (a click is also \"interact with\n    // this\"), so it toggles - that is the keyboard's way to deselect one widget.\n    onSelect(item.i, true);\n  };\n\n  // When this widget is draggable it owns its gesture, so stop the pointer-down\n  // from bubbling to an ancestor widget host (e.g. a container widget hosting a\n  // nested board / Tabs). Otherwise the ancestor's `useMove` would start a\n  // second drag from the same press and the whole parent widget would move too.\n  // Non-draggable widgets let the event bubble so their container stays grabbable\n  // through their content.\n  const stopBubbleProps = isDraggable\n    ? {\n        onPointerDown: (e: React.PointerEvent) => e.stopPropagation(),\n        onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),\n        onTouchStart: (e: React.TouchEvent) => e.stopPropagation(),\n      }\n    : {};\n\n  // Gate a pointer drag by `dragHandle` / `dragCancel` selectors. Returns true\n  // when the press must NOT start a drag (outside a `dragHandle`, or matching\n  // `dragCancel`).\n  const shouldGateDrag = (target: EventTarget | null) => {\n    if (!(target instanceof Element)) return false;\n    if (dragHandle && !target.closest(dragHandle)) return true;\n    if (dragCancel && target.closest(dragCancel)) return true;\n\n    // `selectionCancel` already declares which descendants are interactive, and\n    // a drag must not start from them either — otherwise `useMove`'s\n    // `preventDefault()` on pointer-down swallows the native focus and an input\n    // inside a widget cannot be typed into. Only for selectable widgets, so a\n    // board that never opted into selection keeps its exact previous behaviour\n    // and `dragCancel` stays the only thing that gates a drag there.\n    return !!(\n      isSelectable &&\n      selectionCancel &&\n      target.closest(selectionCancel)\n    );\n  };\n\n  // The gate wraps `useMove`'s own pointer-down handlers rather than a separate\n  // capture-phase listener. When a press is gated we simply do not forward it to\n  // `useMove`, so the drag never begins. This is deliberate: `useMove`'s\n  // pointer-down handler calls both `stopPropagation()` and `preventDefault()`.\n  // Calling it (or pre-empting it with a capture-phase `stopPropagation()`)\n  // would break the very controls `dragCancel` is meant to protect - a\n  // `preventDefault()` on pointer-down cancels a native `<input>`'s focus, and a\n  // capture-phase `stopPropagation()` swallows a `<button>`'s own press events.\n  // Skipping `useMove` entirely leaves the target's default behavior and its own\n  // handlers fully intact.\n  //\n  // Keyboard moves also go through `useMove` (`onKeyDown`). Arrow keys must only\n  // move the widget when the host itself is focused — not when focus is inside a\n  // nested input, textarea, or other descendant (those events bubble to the host\n  // and would otherwise steal caret / list navigation).\n  //\n  // A non-draggable widget must not carry `moveProps` at all: `useMove`'s\n  // pointer-down handler calls `preventDefault()`, which cancels native text\n  // selection inside the widget. Read-only boards (`isDraggable={false}`) still\n  // need selectable content, so we drop the handlers entirely instead of relying\n  // on the early-returns inside the `onMove*` callbacks.\n  const gatedMoveProps = !isDraggable\n    ? {}\n    : {\n        ...moveProps,\n        ...(moveProps.onPointerDown && {\n          onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => {\n            if (shouldGateDrag(e.target)) return;\n            hostRef.current?.focus({ preventScroll: true });\n            moveProps.onPointerDown!(e);\n          },\n        }),\n        ...(moveProps.onMouseDown && {\n          onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n            if (shouldGateDrag(e.target)) return;\n            hostRef.current?.focus({ preventScroll: true });\n            moveProps.onMouseDown!(e);\n          },\n        }),\n        ...(moveProps.onTouchStart && {\n          onTouchStart: (e: React.TouchEvent<HTMLDivElement>) => {\n            if (shouldGateDrag(e.target)) return;\n            moveProps.onTouchStart!(e);\n          },\n        }),\n        ...(moveProps.onKeyDown && {\n          onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (e.target !== e.currentTarget) return;\n            handleSelectKeyDown(e);\n            if (e.defaultPrevented) return;\n            moveProps.onKeyDown!(e);\n          },\n        }),\n      };\n\n  // A non-draggable widget gets no `moveProps` at all, so its Space handling and\n  // its focusability have to come from here instead.\n  const selectionProps = isSelectable\n    ? {\n        onPointerDown: handleSelectPointerDown,\n        // A draggable widget routes Space through the drag gate below, which\n        // already enforces the host-focused rule; a non-draggable one gets no\n        // `moveProps` at all and needs its own handler.\n        ...(isDraggable ? {} : { onKeyDown: handleSelectKeyDown }),\n      }\n    : {};\n\n  const handleResize = (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => {\n    if (phase === 'start') setIsResizing(true);\n    else if (phase === 'end') setIsResizing(false);\n    onResize(item.i, axis, phase, dx, dy);\n  };\n\n  const mods = {\n    drag: isActiveDrag,\n    draggable: isDraggable && !isActiveDrag,\n    static: !!item.static,\n    resizing: isResizing,\n    card: isCard,\n    hovered: isHovered,\n    'focus-visible': isFocusVisible,\n    selected: isSelected,\n    // Mutually exclusive with `selected` by construction, so the two never\n    // compete for precedence in a style map — and an additive lasso leaves the\n    // widgets it already owns looking fully selected rather than downgrading\n    // them to a preview.\n    'pre-selected': isPreSelected && !isSelected,\n  };\n\n  const content = (\n    <BoardHostContext.Provider value={hostValue}>\n      {registration?.content}\n      {isResizable && !item.static ? (\n        <>\n          {/* A `corner` grip and its hit-zone both move to the sibling\n              `GripLayerElement` below, which the widget's own `overflow: hidden`\n              cannot clip. They travel together: hoisting only the visual would\n              leave the half that hangs outside impossible to grab. */}\n          {(resizeGripPlacement === 'corner'\n            ? resizeHandles.filter((axis) => !isCornerAxis(axis))\n            : resizeHandles\n          ).map((axis) => (\n            <ResizeHandle\n              key={axis}\n              axis={axis}\n              placement={resizeGripPlacement}\n              onResize={handleResize}\n            />\n          ))}\n          {resizeGripPlacement === 'corner'\n            ? null\n            : resizeHandles\n                .filter(isCornerAxis)\n                .map((axis) => (\n                  <GripElement\n                    key={`grip-${axis}`}\n                    data-axis={axis}\n                    mods={{ revealed: gripsRevealed, placement: 'inside' }}\n                    aria-hidden=\"true\"\n                  />\n                ))}\n          {resizeHandles.filter(isEdgeAxis).map((axis) => (\n            <EdgeGripElement\n              key={`edge-grip-${axis}`}\n              data-axis={axis}\n              mods={{ revealed: gripsRevealed, resizing: isResizing }}\n              aria-hidden=\"true\"\n            >\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n            </EdgeGripElement>\n          ))}\n        </>\n      ) : null}\n    </BoardHostContext.Provider>\n  );\n\n  const pos = calcGridItemPosition(\n    positionParams,\n    item.x,\n    item.y,\n    item.w,\n    item.h,\n  );\n\n  // While dragging with a pointer, the widget's visual floats in the shared\n  // overlay so it is never clipped by an ancestor's `overflow: hidden`. The\n  // gesture-owning element (the one carrying `moveProps`) must NOT be the node\n  // that moves into the overlay: React Aria's `useMove` binds its pointer\n  // move/end listeners relative to the node that received `onPointerDown`, and\n  // relocating that node into the portal tears it down and mounts a fresh one\n  // (inside a `pointerEvents: 'none'` layer), which can drop the in-flight\n  // gesture. Instead we keep a stable, always-mounted in-grid host that owns the\n  // gesture for its whole lifetime, and portal a separate, non-interactive\n  // visual clone into the overlay.\n  const overlayNode = registry.overlayRef.current;\n  // Non-grabbed group members float too, from their own drag-start rect plus the\n  // one shared gesture delta. Measuring them here would be wrong (the board is\n  // mid-reflow); the registry measured every member once at drag start, which is\n  // the only safe window.\n  const memberRect = isDragMember\n    ? dragState!.memberRects.get(item.i)\n    : undefined;\n  const floatInOverlay =\n    !!overlayNode &&\n    !!dragState &&\n    dragState.pointerType !== 'keyboard' &&\n    (useOverlay || (isDragMember && !!memberRect));\n\n  // Where the floating clone sits. The grabbed widget tracks the live drag rect\n  // directly; a member tracks its own start rect offset by the same delta, so\n  // the block moves as one.\n  const floatRect =\n    floatInOverlay && dragState\n      ? isActiveDrag || !memberRect\n        ? dragState.rect\n        : {\n            left:\n              memberRect.left +\n              (dragState.rect.left - dragState.startRect.left),\n            top:\n              memberRect.top + (dragState.rect.top - dragState.startRect.top),\n            width: memberRect.width,\n            height: memberRect.height,\n          }\n      : null;\n\n  const hostStyle: CSSProperties = {\n    left: `${pos.left}px`,\n    top: `${pos.top}px`,\n    width: `${pos.width}px`,\n    height: `${pos.height}px`,\n    // Kept mounted but hidden while its clone floats, so the gesture stays live\n    // on this node (the pointer listeners never get torn down).\n    ...(floatInOverlay ? { opacity: 0, pointerEvents: 'none' } : null),\n  };\n\n  // The floating clone carries the \"drag\" affordance (raised shadow/z-index);\n  // keep the hidden host flat. Keyboard drags (which never float) still\n  // highlight the in-grid host, so only suppress `drag` when floating.\n  const hostMods = { ...mods, drag: isActiveDrag && !floatInOverlay, settled };\n\n  // The host is always rendered first, with a stable element shape, so React\n  // reuses the same DOM node across the drag transition (never remounts it).\n  const host = (\n    <WidgetElement\n      ref={hostRef}\n      // Marks this element as a board widget host so the registry can find the\n      // container widget a nested board lives in (used to keep a drag anchored to\n      // a nested board while the anchor is still over its host - e.g. the Tabs\n      // header above a nested board - instead of reflowing the ancestor board).\n      data-board-widget-host=\"\"\n      // Which widget, as opposed to \"am I inside a widget host\" - the two are\n      // separate questions and the existing attribute is used as a presence\n      // selector, so overloading it would make every such selector implicitly\n      // value-dependent. Namespaced so it cannot collide with an app's own\n      // `data-widget-id`.\n      data-board-widget-id={item.i}\n      {...mergeProps(\n        // Before `gatedMoveProps`: the press selects, and only then does the\n        // drag start and read that selection to decide what moves.\n        selectionProps,\n        gatedMoveProps,\n        stopBubbleProps,\n        hoverProps,\n        focusProps,\n        focusWithinProps,\n        a11yProps,\n        { style: hostStyle },\n      )}\n      qa={qa}\n      mods={hostMods}\n      styles={widgetStyles as Styles}\n    >\n      {floatInOverlay ? null : content}\n    </WidgetElement>\n  );\n\n  const overlayClone = floatInOverlay\n    ? createPortal(\n        <WidgetElement\n          style={{\n            position: 'absolute',\n            left: `${floatRect!.left}px`,\n            top: `${floatRect!.top}px`,\n            width: `${floatRect!.width}px`,\n            height: `${floatRect!.height}px`,\n            pointerEvents: 'none',\n          }}\n          mods={{ ...mods, drag: true, floating: true }}\n          styles={widgetStyles as Styles}\n          aria-hidden=\"true\"\n        >\n          {content}\n        </WidgetElement>,\n        overlayNode!,\n      )\n    : null;\n\n  // Corner grips that must straddle the widget edge, hoisted out of the widget's\n  // clip (see `GripLayerElement`). Positioned on the same grid rect as the host,\n  // so the two stay in step through reflows and auto-height changes.\n  const cornerAxes =\n    isResizable && !item.static && resizeGripPlacement === 'corner'\n      ? resizeHandles.filter(isCornerAxis)\n      : [];\n  // Suppressed while the widget floats in the drag overlay: the layer mirrors the\n  // widget's *grid* rect, so leaving it behind would park a live hit-zone on a\n  // cell the widget has visually left.\n  const gripLayer =\n    cornerAxes.length && !floatInOverlay ? (\n      <GripLayerElement\n        {...layerHoverProps}\n        style={{\n          left: `${pos.left}px`,\n          top: `${pos.top}px`,\n          width: `${pos.width}px`,\n          height: `${pos.height}px`,\n        }}\n        aria-hidden=\"true\"\n      >\n        {cornerAxes.map((axis) => (\n          <ResizeHandle\n            key={`handle-${axis}`}\n            axis={axis}\n            placement=\"corner\"\n            onResize={handleResize}\n          />\n        ))}\n        {cornerAxes.map((axis) => (\n          <GripElement\n            key={`grip-${axis}`}\n            data-axis={axis}\n            mods={{ revealed: gripsRevealed, placement: 'corner' }}\n            aria-hidden=\"true\"\n          />\n        ))}\n      </GripLayerElement>\n    ) : null;\n\n  return (\n    <>\n      {host}\n      {gripLayer}\n      {overlayClone}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,MAAM,wBAAwB;;;;;;AAO9B,MAAM,YAAY;AAElB,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EAKN,MAAM;EACN,QAAQ;EAcR,QAAQ;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,UAAU;GACX;EACD,QAAQ;GACN,IAAI;GACJ,4CAA4C;GAC5C,gBAAgB;GAChB,UAAU;GAEV,mBAAmB;GACpB;EACD,SAAS;GACP,IAAI;GACJ,iBAAiB;GAClB;EACD,eAAe;EACf,QAAQ;GACN,IAAI;GACJ,mBAAmB;GACpB;EAKD,SAAS;GACP,IAAI;GACJ,UAAU;GACX;EAQD,YAAY;GACV,IAAI;GACJ,SAAS;GACT,8BAA8B;GAC/B;EACD,WAAW;EACX,YAAY;GACV,IAAI;GACJ,mBAAmB;GACpB;EACD,QAAQ;GACN,IAAI;GACJ,WAAW;GACX,MAAM;GACP;EACD,aAAa;EAab,UAAU;EACX;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,MAAM;EAIN,eAAe;EAIf,iBAAiB;EACjB,qBAAqB;GACnB,IAAI;GACJ,oBAAoB,GAAG,CAAC,YAAY,EAAE;GACvC;EACD,kBAAkB;EAClB,OAAO;GACL,IAAI;GACJ,yCAAqC;GACtC;EACD,QAAQ;GACN,IAAI;GACJ,yCAAqC;GACtC;EACD,KAAK;GACH,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,QAAQ;GACN,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,MAAM;GACJ,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,OAAO;GACL,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,QAAQ;GACN,IAAI;GACJ,yCAAqC;GACrC,yCAAqC;GACrC,2CAAuC;GACvC,2CAAuC;GACxC;EACD,aAAa;EACd;CACF,CAAC;AAEF,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,UAAU;EAMV,eAAe,GAAG,UAAU;EAC5B,gBAAgB;EAChB,iBAAiB;GACf,IAAI;GACJ,oBAAoB;GACrB;EACD,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAe;EACf,SAAS;GACP,IAAI;GACJ,UAAU;GACX;EACD,YAAY;EACZ,WAAW;GACT,IAAI;GACJ,2CAAuC;GACxC;EACD,cAAc;GACZ,IAAI;GACJ,2CAAuC;GACxC;EACD,YAAY;GACV,IAAI;GACJ,2CAAuC;GACxC;EACD,aAAa;GACX,IAAI;GACJ,2CAAuC;GACxC;EACD,QAAQ;GACN,IAAI;GACJ,sBAAoB;GACpB,sBAAoB;GACpB,sBAAoB;GACpB,sBAAoB;GACrB;EACD,KAAK;GACH,IAAI;GACJ,2CAAuC;GACxC;EACD,QAAQ;GACN,IAAI;GACJ,2CAAuC;GACxC;EACD,MAAM;GACJ,IAAI;GACJ,2CAAuC;GACxC;EACD,OAAO;GACL,IAAI;GACJ,2CAAuC;GACxC;EACF;CACF,CAAC;;;;;;;;;;;;;;;;;AAkBF,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,UAAU;EACV,eAAe;EACf,QAAQ;EACT;CACF,CAAC;AAOF,MAAM,kBAAkB,MAAM;CAC5B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,SAAS;EACT,KAAK;EACL,WAAW;EACX,eAAe;EACf,SAAS;GACP,IAAI;GACJ,UAAU;GACX;EACD,YAAY;EAEZ,aAAa;GACX,IAAI;GACJ,yCAAqC;GACtC;EACD,UAAU;GACR,IAAI;GACJ,yCAAqC;GACtC;EAED,KAAK;GACH,IAAI;GACJ,qBAAmB;GACnB,qBAAmB;GACpB;EACD,QAAQ;GACN,IAAI;GACJ,qBAAmB;GACpB;EACD,MAAM;GACJ,IAAI;GACJ,qBAAmB;GACnB,yCAAqC;GACtC;EACD,OAAO;GACL,IAAI;GACJ,qBAAmB;GACpB;EACD,WAAW;GACT,IAAI;GACJ,yCAAqC;GACrC,yCAAqC;GACtC;EAED,KAAK;GACH,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,UAAU;IACX;GACF;EACF;CACF,CAAC;;AAGF,SAAS,aAAa,MAAiC;AACrD,QAAO,KAAK,WAAW;;;AAIzB,SAAS,WAAW,MAAiC;AACnD,QAAO,KAAK,WAAW;;AAczB,SAAS,aAAa,EAAE,MAAM,WAAW,YAA+B;CACtE,MAAM,EAAE,cAAc,QAAQ;EAC5B,cAAc;AACZ,YAAS,MAAM,SAAS,GAAG,EAAE;;EAE/B,OAAO,GAAG;AACR,YAAS,MAAM,QAAQ,EAAE,QAAQ,EAAE,OAAO;;EAE5C,YAAY;AACV,YAAS,MAAM,OAAO,GAAG,EAAE;;EAE9B,CAAC;CAEF,MAAM,YAAY;EAChB,gBAAgB,MAA0B,EAAE,iBAAiB;EAC7D,cAAc,MAAwB,EAAE,iBAAiB;EACzD,eAAe,MAAwB,EAAE,iBAAiB;EAC3D;AAED,QACE,oBAAC;EACC,aAAW;EACX,MAAM,EAAE,WAAW;EACnB,GAAIA,aAAW,WAAW,UAAU;EACpC,eAAY;GACZ;;;;;;;;AA2GN,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,SACA,MACA,gBACA,cACA,QACA,QAAQ,cACR,aACA,aACA,eACA,qBACA,cACA,IACA,YACA,YACA,UACA,WACA,SACA,UACA,cACA,iBACA,eAAe,OACf,aAAa,OACb,gBAAgB,OAChB,iBACA,gBACA,UACA,kBACA,oBAAoB,cAClB;CAEJ,MAAM,EAAE,MAAM,SAAS;CACvB,MAAM,YAAY,eAAe;CACjC,MAAM,UAAU,OAA8B,KAAK;CACnD,MAAM,eAAe,WAAW,WAAW,KAAK;CAKhD,MAAM,eAAe,CAAC,CAAC,WAAW,QAAQ,SAAS,KAAK,EAAE;CAQ1D,MAAM,uBAAuB,UAAU,cAAsB;AAC3D,MAAI,CAAC,gBAAgB,aAAc;EACnC,MAAM,OAAO,eAAe,YAAY,eAAe,OAAO;AAC9D,MAAI,QAAQ,EAAG;EAQf,MAAM,WAPU,qBACd,gBACA,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,EACN,CACwB,SAAS;EAClC,MAAM,aAAa,KAAK,IACtB,GACA,KAAK,MACF,WAAW,eAAe,OAAO,KAAK,yBAAyB,KACjE,CACF;AACD,eAAa,KAAK,GAAG,WAAW;GAChC;CAEF,MAAM,YAAY,eACT;EAAE;EAAc;EAAsB,GAC7C,CAAC,cAAc,qBAAqB,CACrC;CAGD,MAAM,aAAa,gBAAgB,WAAW,gBAAgB;CAE9D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,cAAc,CAAC;CAKxE,MAAM,EAAE,YAAY,iBAAiB,WAAW,mBAAmB,SAAS,EAC1E,YAAY,cACb,CAAC;CACF,MAAM,EAAE,YAAY,mBAAmB,cAAc;CACrD,MAAM,EAAE,qBAAqB,eAAe,EAC1C,qBAAqB,kBACtB,CAAC;CAIF,MAAM,gBACJ,eACA,CAAC,KAAK,UACN,CAAC,iBACA,aAAa,kBAAkB,iBAAiB;CAEnD,MAAM,EAAE,cAAc,QAAQ;EAC5B,YAAY,GAAG;AACb,OAAI,CAAC,YAAa;GAClB,MAAM,OAAO,QAAQ,SAAS,uBAAuB;GACrD,MAAM,MAAM,qBACV,gBACA,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,EACN;GACD,MAAM,KAAmB,OACrB;IACE,MAAM,KAAK;IACX,KAAK,KAAK;IACV,OAAO,KAAK;IACZ,QAAQ,KAAK;IACd,GACD;IACE,MAAM,IAAI;IACV,KAAK,IAAI;IACT,OAAO,IAAI;IACX,QAAQ,IAAI;IACb;AACL,YAAS,YAAY,SAAS,KAAK,GAAG,IAAI,EAAE,aAAa,QAAQ,QAAQ;AACzE,qBAAkB,KAAK,GAAG,QAAQ;;EAEpC,OAAO,GAAG;AACR,OAAI,CAAC,YAAa;AAClB,OAAI,EAAE,gBAAgB,YAAY;IAGhC,MAAM,QADW,iBAAiB,eAAe,GACxB,eAAe,OAAO;IAC/C,MAAM,QAAQ,eAAe,YAAY,eAAe,OAAO;AAC/D,aAAS,WACP,KAAK,KAAK,EAAE,OAAO,GAAG,OACtB,KAAK,KAAK,EAAE,OAAO,GAAG,OACtB,EAAE,YACH;AACD,sBAAkB,KAAK,GAAG,OAAO;AACjC;;AAEF,YAAS,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY;AACtD,qBAAkB,KAAK,GAAG,OAAO;;EAEnC,YAAY;AACV,OAAI,CAAC,YAAa;AAClB,YAAS,WAAW;AACpB,qBAAkB,KAAK,GAAG,MAAM;;EAEnC,CAAC;CAQF,MAAM,YAAY;EAChB,MAAM;EACN,UAAU,eAAe,eAAe,IAAI;EAC5C,wBAAwB,cACpB,EAAE,yBAAyB,mBAAmB,GAC9C,EAAE,gBAAgB,SAAS;EAC/B,cAAc,aAAa,MAAM,KAAK;EACtC,oBAAoB,aAAa,iBAAiB;EAClD,qBAAqB,eAAe,UAAU;EAC/C;CASD,MAAM,uBAAuB,WAA+B;AAG1D,SAAO,CAAC,EAAE,mBAFC,QAEsB,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;CAqB7D,MAAM,2BAA2B,MAA0B;AACzD,MAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,EAAG;AAElD,MAAI,oBAAoB,EAAE,OAAO,EAAE;AACjC,uBAAoB;AAEpB;;AAQF,IAAE,iBAAiB;AAEnB,MAAI,EAAE,YAAY,EAAE,oBAAoB;AACtC,YAAS,KAAK,GAAG,KAAK;AAEtB;;AAGF,MAAI,CAAC,WACH,UAAS,KAAK,GAAG,MAAM;;CAI3B,MAAM,uBAAuB,MAA2B;AAGtD,MAAI,EAAE,WAAW,EAAE,cAAe;AAClC,MAAI,CAAC,gBAAgB,CAAC,SAAU;AAChC,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,WAAY;AAM3C,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAGnB,WAAS,KAAK,GAAG,KAAK;;CASxB,MAAM,kBAAkB,cACpB;EACE,gBAAgB,MAA0B,EAAE,iBAAiB;EAC7D,cAAc,MAAwB,EAAE,iBAAiB;EACzD,eAAe,MAAwB,EAAE,iBAAiB;EAC3D,GACD,EAAE;CAKN,MAAM,kBAAkB,WAA+B;AACrD,MAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,MAAI,cAAc,CAAC,OAAO,QAAQ,WAAW,CAAE,QAAO;AACtD,MAAI,cAAc,OAAO,QAAQ,WAAW,CAAE,QAAO;AAQrD,SAAO,CAAC,EACN,gBACA,mBACA,OAAO,QAAQ,gBAAgB;;CAyBnC,MAAM,iBAAiB,CAAC,cACpB,EAAE,GACF;EACE,GAAG;EACH,GAAI,UAAU,iBAAiB,EAC7B,gBAAgB,MAA0C;AACxD,OAAI,eAAe,EAAE,OAAO,CAAE;AAC9B,WAAQ,SAAS,MAAM,EAAE,eAAe,MAAM,CAAC;AAC/C,aAAU,cAAe,EAAE;KAE9B;EACD,GAAI,UAAU,eAAe,EAC3B,cAAc,MAAwC;AACpD,OAAI,eAAe,EAAE,OAAO,CAAE;AAC9B,WAAQ,SAAS,MAAM,EAAE,eAAe,MAAM,CAAC;AAC/C,aAAU,YAAa,EAAE;KAE5B;EACD,GAAI,UAAU,gBAAgB,EAC5B,eAAe,MAAwC;AACrD,OAAI,eAAe,EAAE,OAAO,CAAE;AAC9B,aAAU,aAAc,EAAE;KAE7B;EACD,GAAI,UAAU,aAAa,EACzB,YAAY,MAA2C;AACrD,OAAI,EAAE,WAAW,EAAE,cAAe;AAClC,uBAAoB,EAAE;AACtB,OAAI,EAAE,iBAAkB;AACxB,aAAU,UAAW,EAAE;KAE1B;EACF;CAIL,MAAM,iBAAiB,eACnB;EACE,eAAe;EAIf,GAAI,cAAc,EAAE,GAAG,EAAE,WAAW,qBAAqB;EAC1D,GACD,EAAE;CAEN,MAAM,gBACJ,MACA,OACA,IACA,OACG;AACH,MAAI,UAAU,QAAS,eAAc,KAAK;WACjC,UAAU,MAAO,eAAc,MAAM;AAC9C,WAAS,KAAK,GAAG,MAAM,OAAO,IAAI,GAAG;;CAGvC,MAAM,OAAO;EACX,MAAM;EACN,WAAW,eAAe,CAAC;EAC3B,QAAQ,CAAC,CAAC,KAAK;EACf,UAAU;EACV,MAAM;EACN,SAAS;EACT,iBAAiB;EACjB,UAAU;EAKV,gBAAgB,iBAAiB,CAAC;EACnC;CAED,MAAM,UACJ,qBAAC,iBAAiB;EAAS,OAAO;aAC/B,cAAc,SACd,eAAe,CAAC,KAAK,SACpB;IAKI,wBAAwB,WACtB,cAAc,QAAQ,SAAS,CAAC,aAAa,KAAK,CAAC,GACnD,eACF,KAAK,SACL,oBAAC;IAEO;IACN,WAAW;IACX,UAAU;MAHL,KAIL,CACF;GACD,wBAAwB,WACrB,OACA,cACG,OAAO,aAAa,CACpB,KAAK,SACJ,oBAAC;IAEC,aAAW;IACX,MAAM;KAAE,UAAU;KAAe,WAAW;KAAU;IACtD,eAAY;MAHP,QAAQ,OAIb,CACF;GACP,cAAc,OAAO,WAAW,CAAC,KAAK,SACrC,qBAAC;IAEC,aAAW;IACX,MAAM;KAAE,UAAU;KAAe,UAAU;KAAY;IACvD,eAAY;;KAEZ,oBAAC,SAAI,gBAAa,QAAQ;KAC1B,oBAAC,SAAI,gBAAa,QAAQ;KAC1B,oBAAC,SAAI,gBAAa,QAAQ;KAC1B,oBAAC,SAAI,gBAAa,QAAQ;KAC1B,oBAAC,SAAI,gBAAa,QAAQ;;MATrB,aAAa,OAUF,CAClB;MACD,GACD;GACsB;CAG9B,MAAM,MAAM,qBACV,gBACA,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,EACN;CAYD,MAAM,cAAc,SAAS,WAAW;CAKxC,MAAM,aAAa,eACf,UAAW,YAAY,IAAI,KAAK,EAAE,GAClC;CACJ,MAAM,iBACJ,CAAC,CAAC,eACF,CAAC,CAAC,aACF,UAAU,gBAAgB,eACzB,cAAe,gBAAgB,CAAC,CAAC;CAKpC,MAAM,YACJ,kBAAkB,YACd,gBAAgB,CAAC,aACf,UAAU,OACV;EACE,MACE,WAAW,QACV,UAAU,KAAK,OAAO,UAAU,UAAU;EAC7C,KACE,WAAW,OAAO,UAAU,KAAK,MAAM,UAAU,UAAU;EAC7D,OAAO,WAAW;EAClB,QAAQ,WAAW;EACpB,GACH;CAEN,MAAM,YAA2B;EAC/B,MAAM,GAAG,IAAI,KAAK;EAClB,KAAK,GAAG,IAAI,IAAI;EAChB,OAAO,GAAG,IAAI,MAAM;EACpB,QAAQ,GAAG,IAAI,OAAO;EAGtB,GAAI,iBAAiB;GAAE,SAAS;GAAG,eAAe;GAAQ,GAAG;EAC9D;CAKD,MAAM,WAAW;EAAE,GAAG;EAAM,MAAM,gBAAgB,CAAC;EAAgB;EAAS;CAI5E,MAAM,OACJ,oBAAC;EACC,KAAK;EAKL,0BAAuB;EAMvB,wBAAsB,KAAK;EAC3B,GAAIA,aAGF,gBACA,gBACA,iBACA,YACA,YACA,kBACA,WACA,EAAE,OAAO,WAAW,CACrB;EACG;EACJ,MAAM;EACN,QAAQ;YAEP,iBAAiB,OAAO;GACX;CAGlB,MAAM,eAAe,iBACjB,aACE,oBAAC;EACC,OAAO;GACL,UAAU;GACV,MAAM,GAAG,UAAW,KAAK;GACzB,KAAK,GAAG,UAAW,IAAI;GACvB,OAAO,GAAG,UAAW,MAAM;GAC3B,QAAQ,GAAG,UAAW,OAAO;GAC7B,eAAe;GAChB;EACD,MAAM;GAAE,GAAG;GAAM,MAAM;GAAM,UAAU;GAAM;EAC7C,QAAQ;EACR,eAAY;YAEX;GACa,EAChB,YACD,GACD;CAKJ,MAAM,aACJ,eAAe,CAAC,KAAK,UAAU,wBAAwB,WACnD,cAAc,OAAO,aAAa,GAClC,EAAE;AAmCR,QACE;EACG;EAhCH,WAAW,UAAU,CAAC,iBACpB,qBAAC;GACC,GAAI;GACJ,OAAO;IACL,MAAM,GAAG,IAAI,KAAK;IAClB,KAAK,GAAG,IAAI,IAAI;IAChB,OAAO,GAAG,IAAI,MAAM;IACpB,QAAQ,GAAG,IAAI,OAAO;IACvB;GACD,eAAY;cAEX,WAAW,KAAK,SACf,oBAAC;IAEO;IACN,WAAU;IACV,UAAU;MAHL,UAAU,OAIf,CACF,EACD,WAAW,KAAK,SACf,oBAAC;IAEC,aAAW;IACX,MAAM;KAAE,UAAU;KAAe,WAAW;KAAU;IACtD,eAAY;MAHP,QAAQ,OAIb,CACF;IACe,GACjB;EAMD;KACA"}
+{"version":3,"file":"WidgetHost.js","names":["mergeProps"],"sources":["../../../../src/components/layout/Board/WidgetHost.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { CSSProperties, useMemo, useRef, useState } from 'react';\nimport { useFocusRing, useFocusWithin, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\n\nimport {\n  BoardDragState,\n  BoardHost,\n  BoardHostContext,\n  BoardRegistryContextValue,\n  ViewportRect,\n} from './board-context';\nimport { WidgetRegistration } from './board-store';\nimport {\n  calcGridColWidth,\n  calcGridItemPosition,\n  LayoutItem,\n  PositionParams,\n  ResizeHandleAxis,\n} from './grid-core';\nimport { BoardSelectModifierKey } from './use-board-select-modifier-key';\n\nimport type { BoardResizeGripPlacement } from './Widget';\n\nexport type ResizePhase = 'start' | 'move' | 'end';\n\n/**\n * Slack (px) absorbed when converting an auto-height widget's content height to\n * whole rows, so sub-pixel measurement/rounding noise never bumps an extra row.\n */\nconst AUTO_HEIGHT_TOLERANCE = 4;\n\n/**\n * Corner grip size in px, and therefore how far a `corner`-placed grip hangs\n * outside the widget: exactly half of it, since it is centred on the corner. The\n * hit-zone reads the same number so what you see is what you can grab.\n */\nconst GRIP_SIZE = 10;\n\nconst WidgetElement = tasty({\n  qa: 'BoardWidget',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    // Widgets always carry a `#surface-2` fill and rounded corners. The `card`\n    // modifier (board-level `widgetProps.isCard` or per-widget `isCard`) adds a\n    // border on top; a non-card widget is borderless so nested boards can align\n    // their columns flush with the parent grid.\n    fill: '#surface-2',\n    radius: '1cr',\n    // Selection reads as a focus-like state here - it is transient, it follows\n    // what the user is working with, and it is dropped the moment they touch\n    // something else - so it is drawn as an edge treatment rather than as a\n    // fill. `outline` stays reserved for the real focus ring (the kit's\n    // convention everywhere), and the two are kept legible side by side by\n    // token: selection is a saturated `#primary` ring, focus a `#primary-text`\n    // outline sitting one border-width further out (`outlineOffset`).\n    // A widget a live marquee currently covers gets the same treatment with the\n    // ring dimmed, so releasing the pointer only changes the strength of an edge\n    // that is already there — no geometry shift, nothing to re-read. The border\n    // is *not* dimmed with it: `#primary-border` is close to `#border` on a dark\n    // scheme, so fading it lands below the border a widget already has and the\n    // preview would read as weaker than doing nothing.\n    border: {\n      '': false,\n      card: true,\n      'pre-selected': '#primary-border',\n      selected: '#primary-border',\n    },\n    shadow: {\n      '': false,\n      'hovered & !card & !no-hover-ring & (draggable | resizing)':\n        '0 0 0 1bw #border',\n      'pre-selected': '0 0 0 1bw #primary.40',\n      selected: '0 0 0 1bw #primary',\n      // `$dialog-shadow` uses Glaze `#shadow-lg`, which adapts to dark / high-contrast schemes.\n      'drag | resizing': '$dialog-shadow',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      'focus-visible': '1bw #primary-text',\n    },\n    outlineOffset: '1bw',\n    zIndex: {\n      '': 1,\n      'drag | resizing': 10,\n    },\n    // The pointer-drag ghost (the clone that floats in the overlay) is slightly\n    // translucent so the user can see through it to whatever it hovers over -\n    // e.g. a Tabs header underneath - and land a precise drop / tab switch. The\n    // in-place host (keyboard drags, which never float) stays fully opaque.\n    opacity: {\n      '': 1,\n      floating: 0.8,\n    },\n    // Reflowing widgets animate their position and size. The actively\n    // dragged/resized element - and the floating overlay clone - must track the\n    // pointer with no lag, so they drop geometry from the list. Geometry is also\n    // dropped until the board reports `settled`: on init widgets jump to their\n    // first measured positions, and without this gate they would slide/grow in\n    // from their default box. The board lifts the gate after the first\n    // positioned paint so subsequent reflows animate normally.\n    transition: {\n      '': 'theme, shadow, opacity',\n      settled: 'theme, shadow, opacity, inset, width, height',\n      'drag | floating | resizing': 'theme, shadow, opacity',\n    },\n    boxSizing: 'border-box',\n    userSelect: {\n      '': 'auto',\n      'drag | resizing': 'none',\n    },\n    cursor: {\n      '': 'auto',\n      draggable: 'grab',\n      drag: 'grabbing',\n    },\n    touchAction: 'none',\n    // A widget owns its grid cell and must not paint outside it: a nested board\n    // with more rows than currently fit, a mid-drag reflow (an auto-height\n    // container deliberately cannot grow while a drag is in flight), or a long\n    // unbreakable string would otherwise spill over its neighbours. Clipping\n    // holds regardless of `isCard` — a borderless widget has no drawn edge, but\n    // it still has a cell.\n    //\n    // The cost is that a descendant's `outline` is cropped at the edge, since an\n    // outline is clipped by an *ancestor's* overflow rather than its own. A\n    // widget whose content needs to paint outside — a control drawing its own\n    // active ring — opts out with `overflow=\"visible\"`, or draws the ring inset\n    // with a negative `outlineOffset`.\n    overflow: 'hidden',\n  },\n});\n\nconst HandleElement = tasty({\n  qa: 'BoardResizeHandle',\n  styles: {\n    position: 'absolute',\n    zIndex: 20,\n    fill: '#clear',\n    // The corner hit-zone is drawn inside the grip layer, which takes no pointer\n    // events; `pointer-events` inherits, so it has to opt back in. Inside the\n    // widget this is what it already got from the default.\n    pointerEvents: 'auto',\n    // Overhang: how far the hit-zone extends beyond the widget edge. A\n    // `corner`-placed grip hangs out by half its own size, and the hit-zone\n    // matches it exactly - a visible grip you cannot grab is worse than no grip.\n    '--handle-size': '3x',\n    '--handle-overhang': {\n      '': '-8px',\n      'placement=corner': `${-GRIP_SIZE / 2}px`,\n    },\n    '--handle-inset': '1x',\n    width: {\n      '': '$handle-size',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'auto',\n    },\n    height: {\n      '': '$handle-size',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'auto',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"n\"] | [data-axis=\"ne\"] | [data-axis=\"nw\"]':\n        '$handle-overhang',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-inset',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"s\"] | [data-axis=\"se\"] | [data-axis=\"sw\"]':\n        '$handle-overhang',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-inset',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"w\"] | [data-axis=\"nw\"] | [data-axis=\"sw\"]':\n        '$handle-overhang',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$handle-inset',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"e\"] | [data-axis=\"ne\"] | [data-axis=\"se\"]':\n        '$handle-overhang',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$handle-inset',\n    },\n    cursor: {\n      '': 'default',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'ns-resize',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'ew-resize',\n      '[data-axis=\"ne\"] | [data-axis=\"sw\"]': 'nesw-resize',\n      '[data-axis=\"nw\"] | [data-axis=\"se\"]': 'nwse-resize',\n    },\n    touchAction: 'none',\n  },\n});\n\nconst GripElement = tasty({\n  qa: 'BoardResizeGrip',\n  styles: {\n    position: 'absolute',\n    // Both placements derive from one number, so the grip can never drift out of\n    // step with its own size: `inside` tucks it into the widget box, `corner`\n    // centres it on the widget's corner - exactly half its own size back from\n    // each edge. Consumers pick between them with `resizeGripPlacement` instead\n    // of re-deriving these offsets from the outside.\n    '--grip-size': `${GRIP_SIZE}px`,\n    '--grip-inset': '4px',\n    '--grip-offset': {\n      '': '$grip-inset',\n      'placement=corner': '($grip-size / -2)',\n    },\n    width: '$grip-size',\n    height: '$grip-size',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      revealed: 1,\n    },\n    transition: 'opacity 120ms ease-in-out',\n    borderTop: {\n      '': '0',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '2px solid #dark.40',\n    },\n    borderBottom: {\n      '': '0',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '2px solid #dark.40',\n    },\n    borderLeft: {\n      '': '0',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '2px solid #dark.40',\n    },\n    borderRight: {\n      '': '0',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '2px solid #dark.40',\n    },\n    radius: {\n      '': '0',\n      '[data-axis=\"se\"]': '4px bottom-right',\n      '[data-axis=\"sw\"]': '4px bottom-left',\n      '[data-axis=\"ne\"]': '4px top-right',\n      '[data-axis=\"nw\"]': '4px top-left',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '$grip-offset',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '$grip-offset',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '$grip-offset',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '$grip-offset',\n    },\n  },\n});\n\n/**\n * Where the corner grips are drawn when `resizeGripPlacement` is `'corner'`.\n *\n * `WidgetElement` clips its children (`overflow: hidden`, and that clipping is\n * load-bearing - see its own note), so a grip centred on the widget's corner\n * would be cut in half if it stayed inside. This layer mirrors the widget's grid\n * rect as a *sibling* of it, clips nothing, and never takes pointer events: the\n * transparent `HandleElement` inside the widget still owns the gesture, so\n * escaping the clip costs no hit-testing behaviour.\n *\n * It sits above a resting widget (`zIndex: 1`) so a grip is never hidden by the\n * neighbour it overhangs, and below a dragged or resized one (`zIndex: 10`) so a\n * lifted widget still paints over its neighbours' grips. The board's own content\n * box still clips it, so a grip on a widget flush against the board edge needs\n * `containerPadding` >= half the grip size to show in full.\n */\nconst GripLayerElement = tasty({\n  qa: 'BoardResizeGripLayer',\n  styles: {\n    position: 'absolute',\n    overflow: 'visible',\n    pointerEvents: 'none',\n    zIndex: 5,\n  },\n});\n\n// Edge axes (n/s/e/w) get a dotted grip affordance, revealed on\n// hover/focus/resize. The dots line up along the edge (a vertical column for the\n// e/w handles, a horizontal row for n/s), matching the design-system pane grip\n// (see `Layout.Pane`). Purely visual - the interaction still lives on the\n// transparent `HandleElement` hit-zone above.\nconst EdgeGripElement = tasty({\n  qa: 'BoardResizeEdgeGrip',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    gap: '2bw',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      revealed: 1,\n    },\n    transition: 'opacity 120ms ease-in-out',\n    // A column of 5 dots for the vertical edges (e/w), a row of 5 for n/s.\n    gridColumns: {\n      '': '3px',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '3px 3px 3px 3px 3px',\n    },\n    gridRows: {\n      '': '3px 3px 3px 3px 3px',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '3px',\n    },\n    // Anchor to the relevant edge and center along it.\n    top: {\n      '': '50%',\n      '[data-axis=\"n\"]': '3px',\n      '[data-axis=\"s\"]': 'auto',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"s\"]': '3px',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"w\"]': '3px',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '50%',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"e\"]': '3px',\n    },\n    transform: {\n      '': 'translate(0, 0)',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'translate(0, -50%)',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'translate(-50%, 0)',\n    },\n\n    Dot: {\n      width: '3px',\n      height: '3px',\n      radius: 'round',\n      fill: {\n        '': '#dark-03',\n        resizing: '#dark-02',\n      },\n    },\n  },\n});\n\n/** Corner axes get a visible grip affordance on hover/focus/resize. */\nfunction isCornerAxis(axis: ResizeHandleAxis): boolean {\n  return axis.length === 2;\n}\n\n/** Edge axes (n/s/e/w) get a dotted grip affordance. */\nfunction isEdgeAxis(axis: ResizeHandleAxis): boolean {\n  return axis.length === 1;\n}\n\ninterface ResizeHandleProps {\n  axis: ResizeHandleAxis;\n  placement: BoardResizeGripPlacement;\n  onResize: (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n}\n\nfunction ResizeHandle({ axis, placement, onResize }: ResizeHandleProps) {\n  const { moveProps } = useMove({\n    onMoveStart() {\n      onResize(axis, 'start', 0, 0);\n    },\n    onMove(e) {\n      onResize(axis, 'move', e.deltaX, e.deltaY);\n    },\n    onMoveEnd() {\n      onResize(axis, 'end', 0, 0);\n    },\n  });\n\n  const stopProps = {\n    onPointerDown: (e: React.PointerEvent) => e.stopPropagation(),\n    onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),\n    onTouchStart: (e: React.TouchEvent) => e.stopPropagation(),\n  };\n\n  return (\n    <HandleElement\n      data-axis={axis}\n      mods={{ placement }}\n      {...mergeProps(stopProps, moveProps)}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nexport interface WidgetHostProps {\n  boardId: string;\n  item: LayoutItem;\n  positionParams: PositionParams;\n  registration: WidgetRegistration | undefined;\n  /**\n   * Whether this widget renders with card chrome (fill/border/radius). Resolved\n   * by the owning `Board` from the per-widget `isCard` and the board-level\n   * `widgetProps.isCard` default.\n   */\n  isCard: boolean;\n  /**\n   * Whether this widget draws the resting hover ring. Resolved by the owning\n   * `Board` from the per-widget `hoverRing` and the board-level\n   * `widgetProps.hoverRing` default.\n   */\n  hoverRing: boolean;\n  /**\n   * Resolved style overrides for the rendered widget element (per-widget\n   * `styles` falling back to the board-level `widgetProps.styles`).\n   */\n  styles?: Styles;\n  isDraggable: boolean;\n  isResizable: boolean;\n  resizeHandles: ResizeHandleAxis[];\n  /**\n   * Where the corner grips sit. Resolved by the owning `Board` from the\n   * per-widget `resizeGripPlacement` and the board-level\n   * `widgetProps.resizeGripPlacement` default.\n   */\n  resizeGripPlacement: BoardResizeGripPlacement;\n  /**\n   * Whether this widget grows to fit its content. Resolved by the owning\n   * `Board` from the per-widget `isAutoHeight` and the board-level\n   * `widgetProps.isAutoHeight` default.\n   */\n  isAutoHeight: boolean;\n  /**\n   * Test id / accessible name for the rendered widget element. Resolved by the\n   * owning `Board` from the per-widget `qa` and the board-level `widgetProps.qa`\n   * default; falls back to the layout id.\n   */\n  qa?: string;\n  /**\n   * CSS selector for elements that must not start a pointer drag (e.g. form\n   * controls inside the widget). A pointer-down whose target matches this\n   * selector never begins a drag.\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start. A\n   * pointer-down outside a matching element never begins a drag.\n   */\n  dragHandle?: string;\n  /**\n   * Whether the owning board has settled its widgets' initial positions. While\n   * false, the widget does not animate `inset` (left/top) so the first\n   * positioned paint isn't seen as a transition. Lifted after the board's first\n   * measured render.\n   */\n  settled?: boolean;\n  registry: BoardRegistryContextValue;\n  dragState: BoardDragState | null;\n  onResize: (\n    id: string,\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n  /**\n   * Report the minimum number of rows this widget needs to fit its content\n   * (typically a nested board). The owning board grows the item to this height\n   * when it is taller than the current one, and treats it as the resize floor\n   * so the widget cannot be dragged shorter than its content requires.\n   */\n  onAutoHeight: (id: string, neededRows: number) => void;\n  /**\n   * Notify the owning board of a drag gesture's lifecycle so it can emit the\n   * public drag callbacks. Fires after the registry has updated drag state.\n   */\n  onDragLifecycle?: (id: string, phase: ResizePhase) => void;\n  /** Whether this widget can be selected (board selection on and not opted out). */\n  isSelectable?: boolean;\n  isSelected?: boolean;\n  /**\n   * A live marquee currently covers this widget, so it *will* be selected when\n   * the pointer is released. Provisional: it never reaches the selection model,\n   * the callbacks or the live region.\n   */\n  isPreSelected?: boolean;\n  /** CSS selector for descendants whose clicks must not change the selection. */\n  selectionCancel?: string;\n  /** Id of the board-owned node holding the shared \"Selected\" description. */\n  selectedHintId?: string;\n  /** Apply a selection gesture. `additive` toggles instead of replacing. */\n  onSelect?: (id: string, additive: boolean) => void;\n  /** Drop the whole selection. Called when the user interacts elsewhere. */\n  onSelectionReset?: () => void;\n  /** Pointer-event property carrying the platform additive-selection modifier. */\n  selectModifierKey?: BoardSelectModifierKey;\n}\n\n/**\n * The positioned, interactive wrapper a board renders for each layout item it\n * owns. Content is pulled from the shared store (by id), so any board can host\n * any widget. Dragging uses React Aria `useMove`; during a drag the widget\n * renders into the shared overlay portal so it can float outside its board.\n */\nexport function WidgetHost(props: WidgetHostProps) {\n  const {\n    boardId,\n    item,\n    positionParams,\n    registration,\n    isCard,\n    hoverRing,\n    styles: widgetStyles,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    resizeGripPlacement,\n    isAutoHeight,\n    qa,\n    dragCancel,\n    dragHandle,\n    registry,\n    dragState,\n    settled,\n    onResize,\n    onAutoHeight,\n    onDragLifecycle,\n    isSelectable = false,\n    isSelected = false,\n    isPreSelected = false,\n    selectionCancel,\n    selectedHintId,\n    onSelect,\n    onSelectionReset,\n    selectModifierKey = 'metaKey',\n  } = props;\n\n  const { t } = useI18n();\n  const ariaLabel = registration?.['aria-label'];\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const isActiveDrag = dragState?.itemId === item.i;\n  // Every member of a group drag floats, not just the grabbed one — otherwise\n  // the rest sit motionless while their placeholders move, which reads as\n  // broken. Only the grabbed host owns a live `useMove` gesture, so hiding the\n  // others is trivially safe.\n  const isDragMember = !!dragState?.itemIds.includes(item.i);\n\n  // Translate a nested board's reported height deficit (signed px: positive when\n  // it is squeezed, negative when it has slack) into the absolute number of rows\n  // this widget needs, and report it to the owning board. The widget's chrome\n  // cancels out: the needed pixel height is the widget's current pixel height\n  // plus the deficit. A small tolerance keeps sub-pixel rounding from bumping an\n  // extra row. Skipped during a drag (the widget is floating in the overlay).\n  const requestHeightDeficit = useEvent((deficitPx: number) => {\n    if (!isAutoHeight || isActiveDrag) return;\n    const step = positionParams.rowHeight + positionParams.margin[1];\n    if (step <= 0) return;\n    const current = calcGridItemPosition(\n      positionParams,\n      item.x,\n      item.y,\n      item.w,\n      item.h,\n    );\n    const neededPx = current.height + deficitPx;\n    const neededRows = Math.max(\n      1,\n      Math.ceil(\n        (neededPx + positionParams.margin[1] - AUTO_HEIGHT_TOLERANCE) / step,\n      ),\n    );\n    onAutoHeight(item.i, neededRows);\n  });\n\n  const hostValue = useMemo<BoardHost>(\n    () => ({ isAutoHeight, requestHeightDeficit }),\n    [isAutoHeight, requestHeightDeficit],\n  );\n  // Keyboard drags stay in place: moving the focused element into the overlay\n  // portal would unmount it and stop arrow-key move events.\n  const useOverlay = isActiveDrag && dragState?.pointerType !== 'keyboard';\n\n  const [isResizing, setIsResizing] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { hoverProps, isHovered } = useHover({ isDisabled: isActiveDrag });\n  // A `corner` grip and its hit-zone live outside the widget box, so hovering the\n  // half that hangs out is not hovering the widget. Without this the grip fades\n  // away exactly as the pointer arrives on it - the affordance retreats from the\n  // gesture it is inviting.\n  const { hoverProps: layerHoverProps, isHovered: isLayerHovered } = useHover({\n    isDisabled: isActiveDrag,\n  });\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  // Reveal the resize grips when the widget is interacted with (but not while it\n  // is being dragged, where the widget floats in the overlay).\n  const gripsRevealed =\n    isResizable &&\n    !item.static &&\n    !isActiveDrag &&\n    (isHovered || isLayerHovered || isFocusWithin || isResizing);\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (!isDraggable) return;\n      const rect = hostRef.current?.getBoundingClientRect();\n      const pos = calcGridItemPosition(\n        positionParams,\n        item.x,\n        item.y,\n        item.w,\n        item.h,\n      );\n      const vr: ViewportRect = rect\n        ? {\n            left: rect.left,\n            top: rect.top,\n            width: rect.width,\n            height: rect.height,\n          }\n        : {\n            left: pos.left,\n            top: pos.top,\n            width: pos.width,\n            height: pos.height,\n          };\n      registry.onDragStart(boardId, item.i, vr, e.pointerType, hostRef.current);\n      onDragLifecycle?.(item.i, 'start');\n    },\n    onMove(e) {\n      if (!isDraggable) return;\n      if (e.pointerType === 'keyboard') {\n        // Amplify arrow-key steps to a full grid cell so items actually move.\n        const colWidth = calcGridColWidth(positionParams);\n        const stepX = colWidth + positionParams.margin[0];\n        const stepY = positionParams.rowHeight + positionParams.margin[1];\n        registry.onDragMove(\n          Math.sign(e.deltaX) * stepX,\n          Math.sign(e.deltaY) * stepY,\n          e.pointerType,\n        );\n        onDragLifecycle?.(item.i, 'move');\n        return;\n      }\n      registry.onDragMove(e.deltaX, e.deltaY, e.pointerType);\n      onDragLifecycle?.(item.i, 'move');\n    },\n    onMoveEnd() {\n      if (!isDraggable) return;\n      registry.onDragEnd();\n      onDragLifecycle?.(item.i, 'end');\n    },\n  });\n\n  // `role=\"group\"` is what makes `aria-roledescription` legal here - it is\n  // invalid on a role-less `div`, which is what this element used to be. A\n  // collection role (`option`, `gridcell`, ...) would be the only way to carry a\n  // real `aria-selected`, but those require presentational children and a\n  // widget hosts arbitrary interactive content, so selection is conveyed by the\n  // board's live region plus the shared description below instead.\n  const a11yProps = {\n    role: 'group',\n    tabIndex: isDraggable || isSelectable ? 0 : undefined,\n    'aria-roledescription': isDraggable\n      ? t('board.draggableWidget', 'Draggable widget')\n      : t('board.widget', 'Widget'),\n    'aria-label': ariaLabel ?? qa ?? item.i,\n    'aria-describedby': isSelected ? selectedHintId : undefined,\n    'aria-keyshortcuts': isSelectable ? 'Space' : undefined,\n  };\n\n  // True from the moment a real move begins until the click that ends the\n  // gesture has been swallowed. `useMove` binds only pointerdown/keydown, never\n  // click, so a click handler composes with it cleanly - but the click that\n  // *terminates* a drag would otherwise land as a selection. Event order is\n  // pointerdown -> onMove* -> pointerup -> onMoveEnd -> click, so this ref is\n  // always accurate by the time the click arrives. More reliable than a pixel\n  // threshold, which has to guess.\n  const isInteractiveTarget = (target: EventTarget | null) => {\n    const el = target as HTMLElement | null;\n\n    return !!(selectionCancel && el?.closest?.(selectionCancel));\n  };\n\n  /**\n   * Selecting and starting a drag are the *same* gesture: you grab the thing you\n   * are about to move. So the press selects immediately and the drag arms behind\n   * it — move and it drags, stay still and it was only a selection. This is what\n   * every canvas tool does, and it is why there is no ambiguity to resolve with a\n   * modifier.\n   *\n   *  - a press on an interactive descendant belongs to that control, so the\n   *    selection is dropped and the press is left alone;\n   *  - <kbd>Shift</kbd> or the platform modifier toggles membership;\n   *  - a press on an unselected widget makes it the selection, so the drag that\n   *    follows moves exactly what was grabbed;\n   *  - a press on an already-selected widget changes nothing, so the drag moves\n   *    the whole group.\n   *\n   * Runs before the drag handler (see the `mergeProps` order below), so the\n   * registry resolves the group against the selection this press just made.\n   */\n  const handleSelectPointerDown = (e: React.PointerEvent) => {\n    if (!isSelectable || !onSelect || e.button !== 0) return;\n\n    if (isInteractiveTarget(e.target)) {\n      onSelectionReset?.();\n\n      return;\n    }\n\n    // A press this widget owns must never reach an ancestor widget host: in a\n    // nested board the outer widget would otherwise select itself on top of the\n    // inner selection. This has to cover the already-selected case too, which\n    // changes nothing here but is still a press this board handled — and\n    // `stopBubbleProps` below only guards draggable widgets.\n    e.stopPropagation();\n\n    if (e.shiftKey || e[selectModifierKey]) {\n      onSelect(item.i, true);\n\n      return;\n    }\n\n    if (!isSelected) {\n      onSelect(item.i, false);\n    }\n  };\n\n  const handleSelectKeyDown = (e: React.KeyboardEvent) => {\n    // Same guard the arrow keys use: only act when the host itself is focused,\n    // so Space inside a nested input or button keeps its meaning.\n    if (e.target !== e.currentTarget) return;\n    if (!isSelectable || !onSelect) return;\n    if (e.key !== ' ' && e.key !== 'Spacebar') return;\n\n    // No modifier needed here: focus already says which widget is meant, and\n    // Space cannot be mistaken for the start of a drag. Only swallow the key\n    // once we know we are acting on it, so a board without selection still\n    // scrolls on Space.\n    e.preventDefault();\n    e.stopPropagation();\n    // Space is an explicit selection gesture (a click is also \"interact with\n    // this\"), so it toggles - that is the keyboard's way to deselect one widget.\n    onSelect(item.i, true);\n  };\n\n  // When this widget is draggable it owns its gesture, so stop the pointer-down\n  // from bubbling to an ancestor widget host (e.g. a container widget hosting a\n  // nested board / Tabs). Otherwise the ancestor's `useMove` would start a\n  // second drag from the same press and the whole parent widget would move too.\n  // Non-draggable widgets let the event bubble so their container stays grabbable\n  // through their content.\n  const stopBubbleProps = isDraggable\n    ? {\n        onPointerDown: (e: React.PointerEvent) => e.stopPropagation(),\n        onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),\n        onTouchStart: (e: React.TouchEvent) => e.stopPropagation(),\n      }\n    : {};\n\n  // Gate a pointer drag by `dragHandle` / `dragCancel` selectors. Returns true\n  // when the press must NOT start a drag (outside a `dragHandle`, or matching\n  // `dragCancel`).\n  const shouldGateDrag = (target: EventTarget | null) => {\n    if (!(target instanceof Element)) return false;\n    if (dragHandle && !target.closest(dragHandle)) return true;\n    if (dragCancel && target.closest(dragCancel)) return true;\n\n    // `selectionCancel` already declares which descendants are interactive, and\n    // a drag must not start from them either — otherwise `useMove`'s\n    // `preventDefault()` on pointer-down swallows the native focus and an input\n    // inside a widget cannot be typed into. Only for selectable widgets, so a\n    // board that never opted into selection keeps its exact previous behaviour\n    // and `dragCancel` stays the only thing that gates a drag there.\n    return !!(\n      isSelectable &&\n      selectionCancel &&\n      target.closest(selectionCancel)\n    );\n  };\n\n  // The gate wraps `useMove`'s own pointer-down handlers rather than a separate\n  // capture-phase listener. When a press is gated we simply do not forward it to\n  // `useMove`, so the drag never begins. This is deliberate: `useMove`'s\n  // pointer-down handler calls both `stopPropagation()` and `preventDefault()`.\n  // Calling it (or pre-empting it with a capture-phase `stopPropagation()`)\n  // would break the very controls `dragCancel` is meant to protect - a\n  // `preventDefault()` on pointer-down cancels a native `<input>`'s focus, and a\n  // capture-phase `stopPropagation()` swallows a `<button>`'s own press events.\n  // Skipping `useMove` entirely leaves the target's default behavior and its own\n  // handlers fully intact.\n  //\n  // Keyboard moves also go through `useMove` (`onKeyDown`). Arrow keys must only\n  // move the widget when the host itself is focused — not when focus is inside a\n  // nested input, textarea, or other descendant (those events bubble to the host\n  // and would otherwise steal caret / list navigation).\n  //\n  // A non-draggable widget must not carry `moveProps` at all: `useMove`'s\n  // pointer-down handler calls `preventDefault()`, which cancels native text\n  // selection inside the widget. Read-only boards (`isDraggable={false}`) still\n  // need selectable content, so we drop the handlers entirely instead of relying\n  // on the early-returns inside the `onMove*` callbacks.\n  const gatedMoveProps = !isDraggable\n    ? {}\n    : {\n        ...moveProps,\n        ...(moveProps.onPointerDown && {\n          onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => {\n            if (shouldGateDrag(e.target)) return;\n            hostRef.current?.focus({ preventScroll: true });\n            moveProps.onPointerDown!(e);\n          },\n        }),\n        ...(moveProps.onMouseDown && {\n          onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n            if (shouldGateDrag(e.target)) return;\n            hostRef.current?.focus({ preventScroll: true });\n            moveProps.onMouseDown!(e);\n          },\n        }),\n        ...(moveProps.onTouchStart && {\n          onTouchStart: (e: React.TouchEvent<HTMLDivElement>) => {\n            if (shouldGateDrag(e.target)) return;\n            moveProps.onTouchStart!(e);\n          },\n        }),\n        ...(moveProps.onKeyDown && {\n          onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (e.target !== e.currentTarget) return;\n            handleSelectKeyDown(e);\n            if (e.defaultPrevented) return;\n            moveProps.onKeyDown!(e);\n          },\n        }),\n      };\n\n  // A non-draggable widget gets no `moveProps` at all, so its Space handling and\n  // its focusability have to come from here instead.\n  const selectionProps = isSelectable\n    ? {\n        onPointerDown: handleSelectPointerDown,\n        // A draggable widget routes Space through the drag gate below, which\n        // already enforces the host-focused rule; a non-draggable one gets no\n        // `moveProps` at all and needs its own handler.\n        ...(isDraggable ? {} : { onKeyDown: handleSelectKeyDown }),\n      }\n    : {};\n\n  const handleResize = (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => {\n    if (phase === 'start') setIsResizing(true);\n    else if (phase === 'end') setIsResizing(false);\n    onResize(item.i, axis, phase, dx, dy);\n  };\n\n  const mods = {\n    drag: isActiveDrag,\n    draggable: isDraggable && !isActiveDrag,\n    static: !!item.static,\n    resizing: isResizing,\n    card: isCard,\n    'no-hover-ring': !hoverRing,\n    hovered: isHovered,\n    'focus-visible': isFocusVisible,\n    selected: isSelected,\n    // Mutually exclusive with `selected` by construction, so the two never\n    // compete for precedence in a style map — and an additive lasso leaves the\n    // widgets it already owns looking fully selected rather than downgrading\n    // them to a preview.\n    'pre-selected': isPreSelected && !isSelected,\n  };\n\n  const content = (\n    <BoardHostContext.Provider value={hostValue}>\n      {registration?.content}\n      {isResizable && !item.static ? (\n        <>\n          {/* A `corner` grip and its hit-zone both move to the sibling\n              `GripLayerElement` below, which the widget's own `overflow: hidden`\n              cannot clip. They travel together: hoisting only the visual would\n              leave the half that hangs outside impossible to grab. */}\n          {(resizeGripPlacement === 'corner'\n            ? resizeHandles.filter((axis) => !isCornerAxis(axis))\n            : resizeHandles\n          ).map((axis) => (\n            <ResizeHandle\n              key={axis}\n              axis={axis}\n              placement={resizeGripPlacement}\n              onResize={handleResize}\n            />\n          ))}\n          {resizeGripPlacement === 'corner'\n            ? null\n            : resizeHandles\n                .filter(isCornerAxis)\n                .map((axis) => (\n                  <GripElement\n                    key={`grip-${axis}`}\n                    data-axis={axis}\n                    mods={{ revealed: gripsRevealed, placement: 'inside' }}\n                    aria-hidden=\"true\"\n                  />\n                ))}\n          {resizeHandles.filter(isEdgeAxis).map((axis) => (\n            <EdgeGripElement\n              key={`edge-grip-${axis}`}\n              data-axis={axis}\n              mods={{ revealed: gripsRevealed, resizing: isResizing }}\n              aria-hidden=\"true\"\n            >\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n              <div data-element=\"Dot\" />\n            </EdgeGripElement>\n          ))}\n        </>\n      ) : null}\n    </BoardHostContext.Provider>\n  );\n\n  const pos = calcGridItemPosition(\n    positionParams,\n    item.x,\n    item.y,\n    item.w,\n    item.h,\n  );\n\n  // While dragging with a pointer, the widget's visual floats in the shared\n  // overlay so it is never clipped by an ancestor's `overflow: hidden`. The\n  // gesture-owning element (the one carrying `moveProps`) must NOT be the node\n  // that moves into the overlay: React Aria's `useMove` binds its pointer\n  // move/end listeners relative to the node that received `onPointerDown`, and\n  // relocating that node into the portal tears it down and mounts a fresh one\n  // (inside a `pointerEvents: 'none'` layer), which can drop the in-flight\n  // gesture. Instead we keep a stable, always-mounted in-grid host that owns the\n  // gesture for its whole lifetime, and portal a separate, non-interactive\n  // visual clone into the overlay.\n  const overlayNode = registry.overlayRef.current;\n  // Non-grabbed group members float too, from their own drag-start rect plus the\n  // one shared gesture delta. Measuring them here would be wrong (the board is\n  // mid-reflow); the registry measured every member once at drag start, which is\n  // the only safe window.\n  const memberRect = isDragMember\n    ? dragState!.memberRects.get(item.i)\n    : undefined;\n  const floatInOverlay =\n    !!overlayNode &&\n    !!dragState &&\n    dragState.pointerType !== 'keyboard' &&\n    (useOverlay || (isDragMember && !!memberRect));\n\n  // Where the floating clone sits. The grabbed widget tracks the live drag rect\n  // directly; a member tracks its own start rect offset by the same delta, so\n  // the block moves as one.\n  const floatRect =\n    floatInOverlay && dragState\n      ? isActiveDrag || !memberRect\n        ? dragState.rect\n        : {\n            left:\n              memberRect.left +\n              (dragState.rect.left - dragState.startRect.left),\n            top:\n              memberRect.top + (dragState.rect.top - dragState.startRect.top),\n            width: memberRect.width,\n            height: memberRect.height,\n          }\n      : null;\n\n  const hostStyle: CSSProperties = {\n    left: `${pos.left}px`,\n    top: `${pos.top}px`,\n    width: `${pos.width}px`,\n    height: `${pos.height}px`,\n    // Kept mounted but hidden while its clone floats, so the gesture stays live\n    // on this node (the pointer listeners never get torn down).\n    ...(floatInOverlay ? { opacity: 0, pointerEvents: 'none' } : null),\n  };\n\n  // The floating clone carries the \"drag\" affordance (raised shadow/z-index);\n  // keep the hidden host flat. Keyboard drags (which never float) still\n  // highlight the in-grid host, so only suppress `drag` when floating.\n  const hostMods = { ...mods, drag: isActiveDrag && !floatInOverlay, settled };\n\n  // The host is always rendered first, with a stable element shape, so React\n  // reuses the same DOM node across the drag transition (never remounts it).\n  const host = (\n    <WidgetElement\n      ref={hostRef}\n      // Marks this element as a board widget host so the registry can find the\n      // container widget a nested board lives in (used to keep a drag anchored to\n      // a nested board while the anchor is still over its host - e.g. the Tabs\n      // header above a nested board - instead of reflowing the ancestor board).\n      data-board-widget-host=\"\"\n      // Which widget, as opposed to \"am I inside a widget host\" - the two are\n      // separate questions and the existing attribute is used as a presence\n      // selector, so overloading it would make every such selector implicitly\n      // value-dependent. Namespaced so it cannot collide with an app's own\n      // `data-widget-id`.\n      data-board-widget-id={item.i}\n      {...mergeProps(\n        // Before `gatedMoveProps`: the press selects, and only then does the\n        // drag start and read that selection to decide what moves.\n        selectionProps,\n        gatedMoveProps,\n        stopBubbleProps,\n        hoverProps,\n        focusProps,\n        focusWithinProps,\n        a11yProps,\n        { style: hostStyle },\n      )}\n      qa={qa}\n      mods={hostMods}\n      styles={widgetStyles as Styles}\n    >\n      {floatInOverlay ? null : content}\n    </WidgetElement>\n  );\n\n  const overlayClone = floatInOverlay\n    ? createPortal(\n        <WidgetElement\n          style={{\n            position: 'absolute',\n            left: `${floatRect!.left}px`,\n            top: `${floatRect!.top}px`,\n            width: `${floatRect!.width}px`,\n            height: `${floatRect!.height}px`,\n            pointerEvents: 'none',\n          }}\n          mods={{ ...mods, drag: true, floating: true }}\n          styles={widgetStyles as Styles}\n          aria-hidden=\"true\"\n        >\n          {content}\n        </WidgetElement>,\n        overlayNode!,\n      )\n    : null;\n\n  // Corner grips that must straddle the widget edge, hoisted out of the widget's\n  // clip (see `GripLayerElement`). Positioned on the same grid rect as the host,\n  // so the two stay in step through reflows and auto-height changes.\n  const cornerAxes =\n    isResizable && !item.static && resizeGripPlacement === 'corner'\n      ? resizeHandles.filter(isCornerAxis)\n      : [];\n  // Suppressed while the widget floats in the drag overlay: the layer mirrors the\n  // widget's *grid* rect, so leaving it behind would park a live hit-zone on a\n  // cell the widget has visually left.\n  const gripLayer =\n    cornerAxes.length && !floatInOverlay ? (\n      <GripLayerElement\n        {...layerHoverProps}\n        style={{\n          left: `${pos.left}px`,\n          top: `${pos.top}px`,\n          width: `${pos.width}px`,\n          height: `${pos.height}px`,\n        }}\n        aria-hidden=\"true\"\n      >\n        {cornerAxes.map((axis) => (\n          <ResizeHandle\n            key={`handle-${axis}`}\n            axis={axis}\n            placement=\"corner\"\n            onResize={handleResize}\n          />\n        ))}\n        {cornerAxes.map((axis) => (\n          <GripElement\n            key={`grip-${axis}`}\n            data-axis={axis}\n            mods={{ revealed: gripsRevealed, placement: 'corner' }}\n            aria-hidden=\"true\"\n          />\n        ))}\n      </GripLayerElement>\n    ) : null;\n\n  return (\n    <>\n      {host}\n      {gripLayer}\n      {overlayClone}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/layout/Board/board-context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/layout/Board/board-context.tsx

package/dist/components/layout/Board/board-store.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 //#region src/components/layout/Board/board-store.ts
 /**
 * A tiny external store mapping widget id -> registration.
@@ -16,7 +16,7 @@ var BoardWidgetStore = class {
 		const prev = this.map.get(reg.id);
 		this.map.set(reg.id, reg);
 		this.owners.set(reg.id, owner);
-		if (!prev || prev.content !== reg.content || prev.isDraggable !== reg.isDraggable || prev.isResizable !== reg.isResizable || prev.resizeHandles !== reg.resizeHandles || prev.resizeGripPlacement !== reg.resizeGripPlacement || prev.isCard !== reg.isCard || prev.minW !== reg.minW || prev.maxW !== reg.maxW || prev.minH !== reg.minH || prev.maxH !== reg.maxH || prev.constraints !== reg.constraints || prev.qa !== reg.qa || prev.styles !== reg.styles || prev.isAutoHeight !== reg.isAutoHeight || prev.dragCancel !== reg.dragCancel || prev.dragHandle !== reg.dragHandle || prev.isSelectable !== reg.isSelectable || prev.selectionCancel !== reg.selectionCancel || prev["aria-label"] !== reg["aria-label"]) {
+		if (!prev || prev.content !== reg.content || prev.isDraggable !== reg.isDraggable || prev.isResizable !== reg.isResizable || prev.resizeHandles !== reg.resizeHandles || prev.resizeGripPlacement !== reg.resizeGripPlacement || prev.isCard !== reg.isCard || prev.hoverRing !== reg.hoverRing || prev.minW !== reg.minW || prev.maxW !== reg.maxW || prev.minH !== reg.minH || prev.maxH !== reg.maxH || prev.constraints !== reg.constraints || prev.qa !== reg.qa || prev.styles !== reg.styles || prev.isAutoHeight !== reg.isAutoHeight || prev.dragCancel !== reg.dragCancel || prev.dragHandle !== reg.dragHandle || prev.isSelectable !== reg.isSelectable || prev.selectionCancel !== reg.selectionCancel || prev["aria-label"] !== reg["aria-label"]) {
 			this.version++;
 			this.emit();
 		}

package/dist/components/layout/Board/board-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-store.js","names":[],"sources":["../../../../src/components/layout/Board/board-store.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { LayoutConstraint, ResizeHandleAxis } from './grid-core';\nimport type { BoardResizeGripPlacement } from './Widget';\n\n/**\n * Declarative registration for a single widget.\n *\n * Widget *content* is decoupled from widget *position*: content is registered\n * here by `Board.Widget` keyed by id, while positioning/ownership lives in a\n * board's layout state. This decoupling is what allows a widget to be hosted\n * (and transferred) between different boards under the same `BoardProvider`.\n */\nexport interface WidgetRegistration {\n  id: string;\n  content: ReactNode;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n  resizeHandles?: ResizeHandleAxis[];\n  /** Where the corner resize grips sit (falls back to the board's default). */\n  resizeGripPlacement?: BoardResizeGripPlacement;\n  /**\n   * Add a card border to this widget (widgets are always filled and rounded).\n   * Falls back to the owning board's `widgetProps.isCard` when unset here.\n   */\n  isCard?: boolean;\n  /** Minimum width in grid columns (fallback when the layout item omits `minW`). */\n  minW?: number;\n  /** Maximum width in grid columns (fallback when the layout item omits `maxW`). */\n  maxW?: number;\n  /** Minimum height in grid rows (fallback when the layout item omits `minH`). */\n  minH?: number;\n  /** Maximum height in grid rows (fallback when the layout item omits `maxH`). */\n  maxH?: number;\n  constraints?: LayoutConstraint[];\n  qa?: string;\n  styles?: Styles;\n  /** Grow this widget's height to fit its content (only ever increases). */\n  isAutoHeight?: boolean;\n  /** Override the board's `dragCancel` selector for this widget. */\n  dragCancel?: string;\n  /** Override the board's `dragHandle` selector for this widget. */\n  dragHandle?: string;\n  /** Disable selection for this widget while the board's selection is on. */\n  isSelectable?: boolean;\n  /** Override the board's `selectionCancel` selector for this widget. */\n  selectionCancel?: string;\n  /** Accessible name; falls back to `qa`, then the layout item id. */\n  'aria-label'?: string;\n}\n\n/**\n * A tiny external store mapping widget id -> registration.\n *\n * Boards read from it via `useSyncExternalStore`, so a change to any widget's\n * content or config re-renders the hosting board without prop drilling through\n * the (possibly cross-board) tree.\n */\nexport class BoardWidgetStore {\n  private map = new Map<string, WidgetRegistration>();\n  // Tracks which mounted `Board.Widget` instance currently owns each id. This\n  // guards against a stale unregister from an unmounting instance clobbering a\n  // freshly-mounted instance's registration - which happens when a widget's\n  // subtree is relocated (e.g. dragging a container widget that hosts a nested\n  // board moves it into the overlay portal, remounting the inner widgets).\n  private owners = new Map<string, object>();\n  private listeners = new Set<() => void>();\n  private version = 0;\n\n  register(reg: WidgetRegistration, owner: object): void {\n    const prev = this.map.get(reg.id);\n    this.map.set(reg.id, reg);\n    this.owners.set(reg.id, owner);\n\n    // Notify on any reference change. The hosting board reads registrations\n    // during render, but `Board.Widget` registers in a layout effect (after\n    // commit), so a content/config change lands one commit late and would never\n    // be shown without an emit. Reference comparison is loop-safe: a board's own\n    // re-render reuses the same `children` element references from its\n    // (un-rerendered) parent, so `content` only differs on a genuine parent\n    // update -> we emit once and then settle.\n    const changed =\n      !prev ||\n      prev.content !== reg.content ||\n      prev.isDraggable !== reg.isDraggable ||\n      prev.isResizable !== reg.isResizable ||\n      prev.resizeHandles !== reg.resizeHandles ||\n      prev.resizeGripPlacement !== reg.resizeGripPlacement ||\n      prev.isCard !== reg.isCard ||\n      prev.minW !== reg.minW ||\n      prev.maxW !== reg.maxW ||\n      prev.minH !== reg.minH ||\n      prev.maxH !== reg.maxH ||\n      prev.constraints !== reg.constraints ||\n      prev.qa !== reg.qa ||\n      prev.styles !== reg.styles ||\n      prev.isAutoHeight !== reg.isAutoHeight ||\n      prev.dragCancel !== reg.dragCancel ||\n      prev.dragHandle !== reg.dragHandle ||\n      prev.isSelectable !== reg.isSelectable ||\n      prev.selectionCancel !== reg.selectionCancel ||\n      prev['aria-label'] !== reg['aria-label'];\n\n    if (changed) {\n      this.version++;\n      this.emit();\n    }\n  }\n\n  unregister(id: string, owner: object): void {\n    // Ignore unregister calls from an instance that no longer owns the id (a\n    // newer instance has already taken over).\n    if (this.owners.get(id) !== owner) return;\n\n    this.owners.delete(id);\n    if (this.map.delete(id)) {\n      this.version++;\n      this.emit();\n    }\n  }\n\n  get(id: string): WidgetRegistration | undefined {\n    return this.map.get(id);\n  }\n\n  getVersion = (): number => this.version;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  private emit(): void {\n    this.listeners.forEach((listener) => listener());\n  }\n}\n"],"mappings":";;;;;;;;;AA0DA,IAAa,mBAAb,MAA8B;CAC5B,AAAQ,sBAAM,IAAI,KAAiC;CAMnD,AAAQ,yBAAS,IAAI,KAAqB;CAC1C,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,UAAU;CAElB,SAAS,KAAyB,OAAqB;EACrD,MAAM,OAAO,KAAK,IAAI,IAAI,IAAI,GAAG;AACjC,OAAK,IAAI,IAAI,IAAI,IAAI,IAAI;AACzB,OAAK,OAAO,IAAI,IAAI,IAAI,MAAM;AA+B9B,MArBE,CAAC,QACD,KAAK,YAAY,IAAI,WACrB,KAAK,gBAAgB,IAAI,eACzB,KAAK,gBAAgB,IAAI,eACzB,KAAK,kBAAkB,IAAI,iBAC3B,KAAK,wBAAwB,IAAI,uBACjC,KAAK,WAAW,IAAI,UACpB,KAAK,SAAS,IAAI,QAClB,KAAK,SAAS,IAAI,QAClB,KAAK,SAAS,IAAI,QAClB,KAAK,SAAS,IAAI,QAClB,KAAK,gBAAgB,IAAI,eACzB,KAAK,OAAO,IAAI,MAChB,KAAK,WAAW,IAAI,UACpB,KAAK,iBAAiB,IAAI,gBAC1B,KAAK,eAAe,IAAI,cACxB,KAAK,eAAe,IAAI,cACxB,KAAK,iBAAiB,IAAI,gBAC1B,KAAK,oBAAoB,IAAI,mBAC7B,KAAK,kBAAkB,IAAI,eAEhB;AACX,QAAK;AACL,QAAK,MAAM;;;CAIf,WAAW,IAAY,OAAqB;AAG1C,MAAI,KAAK,OAAO,IAAI,GAAG,KAAK,MAAO;AAEnC,OAAK,OAAO,OAAO,GAAG;AACtB,MAAI,KAAK,IAAI,OAAO,GAAG,EAAE;AACvB,QAAK;AACL,QAAK,MAAM;;;CAIf,IAAI,IAA4C;AAC9C,SAAO,KAAK,IAAI,IAAI,GAAG;;CAGzB,mBAA2B,KAAK;CAEhC,aAAa,aAAuC;AAClD,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,AAAQ,OAAa;AACnB,OAAK,UAAU,SAAS,aAAa,UAAU,CAAC"}
+{"version":3,"file":"board-store.js","names":[],"sources":["../../../../src/components/layout/Board/board-store.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { LayoutConstraint, ResizeHandleAxis } from './grid-core';\nimport type { BoardResizeGripPlacement } from './Widget';\n\n/**\n * Declarative registration for a single widget.\n *\n * Widget *content* is decoupled from widget *position*: content is registered\n * here by `Board.Widget` keyed by id, while positioning/ownership lives in a\n * board's layout state. This decoupling is what allows a widget to be hosted\n * (and transferred) between different boards under the same `BoardProvider`.\n */\nexport interface WidgetRegistration {\n  id: string;\n  content: ReactNode;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n  resizeHandles?: ResizeHandleAxis[];\n  /** Where the corner resize grips sit (falls back to the board's default). */\n  resizeGripPlacement?: BoardResizeGripPlacement;\n  /**\n   * Add a card border to this widget (widgets are always filled and rounded).\n   * Falls back to the owning board's `widgetProps.isCard` when unset here.\n   */\n  isCard?: boolean;\n  /**\n   * Whether this widget shows the resting hover ring. Falls back to the owning\n   * board's `widgetProps.hoverRing` when unset here.\n   */\n  hoverRing?: boolean;\n  /** Minimum width in grid columns (fallback when the layout item omits `minW`). */\n  minW?: number;\n  /** Maximum width in grid columns (fallback when the layout item omits `maxW`). */\n  maxW?: number;\n  /** Minimum height in grid rows (fallback when the layout item omits `minH`). */\n  minH?: number;\n  /** Maximum height in grid rows (fallback when the layout item omits `maxH`). */\n  maxH?: number;\n  constraints?: LayoutConstraint[];\n  qa?: string;\n  styles?: Styles;\n  /** Grow this widget's height to fit its content (only ever increases). */\n  isAutoHeight?: boolean;\n  /** Override the board's `dragCancel` selector for this widget. */\n  dragCancel?: string;\n  /** Override the board's `dragHandle` selector for this widget. */\n  dragHandle?: string;\n  /** Disable selection for this widget while the board's selection is on. */\n  isSelectable?: boolean;\n  /** Override the board's `selectionCancel` selector for this widget. */\n  selectionCancel?: string;\n  /** Accessible name; falls back to `qa`, then the layout item id. */\n  'aria-label'?: string;\n}\n\n/**\n * A tiny external store mapping widget id -> registration.\n *\n * Boards read from it via `useSyncExternalStore`, so a change to any widget's\n * content or config re-renders the hosting board without prop drilling through\n * the (possibly cross-board) tree.\n */\nexport class BoardWidgetStore {\n  private map = new Map<string, WidgetRegistration>();\n  // Tracks which mounted `Board.Widget` instance currently owns each id. This\n  // guards against a stale unregister from an unmounting instance clobbering a\n  // freshly-mounted instance's registration - which happens when a widget's\n  // subtree is relocated (e.g. dragging a container widget that hosts a nested\n  // board moves it into the overlay portal, remounting the inner widgets).\n  private owners = new Map<string, object>();\n  private listeners = new Set<() => void>();\n  private version = 0;\n\n  register(reg: WidgetRegistration, owner: object): void {\n    const prev = this.map.get(reg.id);\n    this.map.set(reg.id, reg);\n    this.owners.set(reg.id, owner);\n\n    // Notify on any reference change. The hosting board reads registrations\n    // during render, but `Board.Widget` registers in a layout effect (after\n    // commit), so a content/config change lands one commit late and would never\n    // be shown without an emit. Reference comparison is loop-safe: a board's own\n    // re-render reuses the same `children` element references from its\n    // (un-rerendered) parent, so `content` only differs on a genuine parent\n    // update -> we emit once and then settle.\n    const changed =\n      !prev ||\n      prev.content !== reg.content ||\n      prev.isDraggable !== reg.isDraggable ||\n      prev.isResizable !== reg.isResizable ||\n      prev.resizeHandles !== reg.resizeHandles ||\n      prev.resizeGripPlacement !== reg.resizeGripPlacement ||\n      prev.isCard !== reg.isCard ||\n      prev.hoverRing !== reg.hoverRing ||\n      prev.minW !== reg.minW ||\n      prev.maxW !== reg.maxW ||\n      prev.minH !== reg.minH ||\n      prev.maxH !== reg.maxH ||\n      prev.constraints !== reg.constraints ||\n      prev.qa !== reg.qa ||\n      prev.styles !== reg.styles ||\n      prev.isAutoHeight !== reg.isAutoHeight ||\n      prev.dragCancel !== reg.dragCancel ||\n      prev.dragHandle !== reg.dragHandle ||\n      prev.isSelectable !== reg.isSelectable ||\n      prev.selectionCancel !== reg.selectionCancel ||\n      prev['aria-label'] !== reg['aria-label'];\n\n    if (changed) {\n      this.version++;\n      this.emit();\n    }\n  }\n\n  unregister(id: string, owner: object): void {\n    // Ignore unregister calls from an instance that no longer owns the id (a\n    // newer instance has already taken over).\n    if (this.owners.get(id) !== owner) return;\n\n    this.owners.delete(id);\n    if (this.map.delete(id)) {\n      this.version++;\n      this.emit();\n    }\n  }\n\n  get(id: string): WidgetRegistration | undefined {\n    return this.map.get(id);\n  }\n\n  getVersion = (): number => this.version;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  private emit(): void {\n    this.listeners.forEach((listener) => listener());\n  }\n}\n"],"mappings":";;;;;;;;;AA+DA,IAAa,mBAAb,MAA8B;CAC5B,AAAQ,sBAAM,IAAI,KAAiC;CAMnD,AAAQ,yBAAS,IAAI,KAAqB;CAC1C,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,UAAU;CAElB,SAAS,KAAyB,OAAqB;EACrD,MAAM,OAAO,KAAK,IAAI,IAAI,IAAI,GAAG;AACjC,OAAK,IAAI,IAAI,IAAI,IAAI,IAAI;AACzB,OAAK,OAAO,IAAI,IAAI,IAAI,MAAM;AAgC9B,MAtBE,CAAC,QACD,KAAK,YAAY,IAAI,WACrB,KAAK,gBAAgB,IAAI,eACzB,KAAK,gBAAgB,IAAI,eACzB,KAAK,kBAAkB,IAAI,iBAC3B,KAAK,wBAAwB,IAAI,uBACjC,KAAK,WAAW,IAAI,UACpB,KAAK,cAAc,IAAI,aACvB,KAAK,SAAS,IAAI,QAClB,KAAK,SAAS,IAAI,QAClB,KAAK,SAAS,IAAI,QAClB,KAAK,SAAS,IAAI,QAClB,KAAK,gBAAgB,IAAI,eACzB,KAAK,OAAO,IAAI,MAChB,KAAK,WAAW,IAAI,UACpB,KAAK,iBAAiB,IAAI,gBAC1B,KAAK,eAAe,IAAI,cACxB,KAAK,eAAe,IAAI,cACxB,KAAK,iBAAiB,IAAI,gBAC1B,KAAK,oBAAoB,IAAI,mBAC7B,KAAK,kBAAkB,IAAI,eAEhB;AACX,QAAK;AACL,QAAK,MAAM;;;CAIf,WAAW,IAAY,OAAqB;AAG1C,MAAI,KAAK,OAAO,IAAI,GAAG,KAAK,MAAO;AAEnC,OAAK,OAAO,OAAO,GAAG;AACtB,MAAI,KAAK,IAAI,OAAO,GAAG,EAAE;AACvB,QAAK;AACL,QAAK,MAAM;;;CAIf,IAAI,IAA4C;AAC9C,SAAO,KAAK,IAAI,IAAI,GAAG;;CAGzB,mBAA2B,KAAK;CAEhC,aAAa,aAAuC;AAClD,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,AAAQ,OAAa;AACnB,OAAK,UAAU,SAAS,aAAa,UAAU,CAAC"}

package/dist/components/layout/Board/grid-core/calculate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/calculate.ts
 /** Calculate the width of a single grid column in pixels. */
 function calcGridColWidth(positionParams) {

package/dist/components/layout/Board/grid-core/collision-modes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/collision-modes.ts
 /** Whether a single grid cell is free of every item in `others`. */
 function cellFree(others, x, y) {
@@ -153,10 +153,13 @@ function exchangeWith(layout, item, other, from, desired, limits) {
 * or `undefined` for `'revert'` (and for an unset mode), which keeps the engine
 * on its original path with no added work.
 *
-* `'swap'` is an escalation ladder, tried in order: exchange with one of the
-* widgets under the drop, else downscale at the drop cell, else revert. A dense
-* grid stays draggable that way - refusing everything that is not a clean
+* For an in-board drag, `'swap'` is an escalation ladder: exchange with one of
+* the widgets under the drop, else downscale at the drop cell, else revert. A
+* dense grid stays draggable that way - refusing everything that is not a clean
 * one-to-one trade would make the mode feel broken exactly where it is needed.
+* Cross-board callers pass `allowExchange: false`, which turns the same mode into
+* empty-anchor downscaling; the registry cancels the transfer if that resolution
+* cannot occupy the requested cell.
 */
 function createCollisionResolver(mode, options) {
 	if (!mode || mode === "revert") return void 0;

package/dist/components/layout/Board/grid-core/collision-modes.js.map

@@ -1 +1 @@
-{"version":3,"file":"collision-modes.js","names":[],"sources":["../../../../../src/components/layout/Board/grid-core/collision-modes.ts"],"sourcesContent":["/**\n * Collision resolution strategies for a grid that prevents collisions.\n *\n * Original UI Kit code (not vendored from react-grid-layout): the upstream\n * engine only ever reverts a blocked move.\n *\n * When `preventCollision` is on, `moveElement` refuses any placement that\n * overlaps an existing item and snaps the dragged item back. That is the right\n * default, but a free grid often wants the placement *resolved* instead of\n * refused - shrunk into whatever room is actually there, or exchanged with the\n * widget already sitting in the target slot. These strategies produce such a\n * resolution, and every resolution they return is overlap-free, so the caller's\n * own overlap guards keep working unchanged.\n */\n\nimport { collides } from './collision';\n\nimport type {\n  CollisionMode,\n  CollisionResolver,\n  CollisionResolverOptions,\n  Layout,\n  LayoutItem,\n} from './types';\n\n/** Whether a single grid cell is free of every item in `others`. */\nfunction cellFree(others: Layout, x: number, y: number): boolean {\n  for (let i = 0; i < others.length; i++) {\n    const o = others[i];\n    if (\n      o !== undefined &&\n      x >= o.x &&\n      x < o.x + o.w &&\n      y >= o.y &&\n      y < o.y + o.h\n    ) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * The largest rectangle anchored at `anchor` that fits without overlapping\n * `others`, growing rightward and downward only.\n *\n * Never larger than `desired` (a drag must never *upscale* a widget - growing\n * things is an explicit, opt-in operation like \"distribute evenly\", not a side\n * effect of moving them), never smaller than the item's own `minW`/`minH`, and\n * never past `cols` / `maxRows`. Among the candidates the largest-area rectangle\n * wins, breaking ties on width: a grid is read left to right, so a wide-and-flat\n * result is the less surprising of two equal-area fits.\n *\n * Returns `null` when not even the minimum size fits, which the callers treat as\n * \"no resolution\" and fall back to reverting.\n */\nexport function maxFreeRectAt(\n  others: Layout,\n  anchor: { x: number; y: number },\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n  mins?: { minW?: number; minH?: number },\n): { w: number; h: number } | null {\n  if (anchor.x < 0 || anchor.y < 0) return null;\n\n  const minW = Math.max(1, mins?.minW ?? 1);\n  const minH = Math.max(1, mins?.minH ?? 1);\n  const maxRows = limits.maxRows ?? Infinity;\n  const maxW = Math.min(desired.w, limits.cols - anchor.x);\n  const maxH = Math.min(\n    desired.h,\n    Number.isFinite(maxRows) ? maxRows - anchor.y : desired.h,\n  );\n\n  if (maxW < minW || maxH < minH) return null;\n\n  // Free height available in each column of the candidate band, measured down\n  // from the anchor row and capped at the tallest useful height.\n  const free: number[] = [];\n  for (let dx = 0; dx < maxW; dx++) {\n    let h = 0;\n    while (h < maxH && cellFree(others, anchor.x + dx, anchor.y + h)) h++;\n    free.push(h);\n    // A column with no room at all caps every wider candidate, so stop early.\n    if (h === 0) break;\n  }\n\n  let best: { w: number; h: number } | null = null;\n  let bestArea = 0;\n  let limit = maxH;\n  for (let w = 1; w <= free.length; w++) {\n    limit = Math.min(limit, free[w - 1]!);\n    if (limit < minH) break;\n    if (w < minW) continue;\n    const area = w * limit;\n    // `>=` so the widest of several equal-area fits wins: `w` only grows here, so\n    // the last match is the widest one.\n    if (area >= bestArea) {\n      best = { w, h: limit };\n      bestArea = area;\n    }\n  }\n\n  return best;\n}\n\n/**\n * Shrink the placement to the room actually available at the cell it was\n * dropped on.\n */\nfunction downscaleInPlace(\n  layout: Layout,\n  item: LayoutItem,\n  others: Layout,\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n): LayoutItem[] | null {\n  const fit = maxFreeRectAt(\n    others,\n    { x: item.x, y: item.y },\n    desired,\n    limits,\n    item,\n  );\n  if (!fit) return null;\n  // Nothing to resolve: the requested size already fits, so the collision was\n  // not a sizing problem and reverting is still the honest answer.\n  if (fit.w === item.w && fit.h === item.h) return null;\n\n  return layout.map((l) =>\n    l.i === item.i ? { ...l, w: fit.w, h: fit.h, moved: true } : l,\n  );\n}\n\n/** Number of cells two items share. Zero when they do not overlap at all. */\nfunction overlapArea(a: LayoutItem, b: LayoutItem): number {\n  const w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);\n  const h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);\n  return w > 0 && h > 0 ? w * h : 0;\n}\n\n/**\n * Exchange the placement with one of the widgets under it.\n *\n * The dragged widget takes the other's cell and the other takes the cell the\n * dragged widget came from. Each keeps as much of its own size as fits there -\n * that cell plus any free space adjacent to it - and neither ever grows.\n *\n * `from` is whatever the caller's layout says, so it is the caller that decides\n * what \"came from\" means. A pointer drag resolves every frame against the\n * arrangement the gesture started with, making it the cell the drag began at, and\n * keeping the result a pure function of where the pointer is; chaining frames off\n * each other instead would exchange with every widget swept over.\n * The slot the dragged widget is leaving is reserved for the displaced widget\n * while the dragged one is sized, so the two can never claim the same cells: the\n * result is overlap-free by construction, not by a follow-up check.\n */\nfunction exchangeWithCollision(\n  layout: Layout,\n  item: LayoutItem,\n  collisions: LayoutItem[],\n  from: { x: number; y: number },\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n): LayoutItem[] | null {\n  // Nothing to trade if the widget has not actually left a slot behind - a\n  // cross-board drop, where it never had one on this board.\n  if (from.x === item.x && from.y === item.y) return null;\n\n  // A drop that spans a boundary covers two widgets at once, and refusing those\n  // frames would leave a band mid-drag where nothing is swapped at all: the\n  // placeholder snaps back to the origin, then jumps to the far swap once the drop\n  // clears the first widget. Trade with the one the drop covers most instead, so\n  // the swap only ever changes which partner it is - never blinks away. Ties go to\n  // the widget earlier in reading order, so the choice is deterministic. Exactly\n  // one widget is ever displaced, whichever is picked.\n  const candidates = collisions\n    .filter((c) => !c.static)\n    .map((c) => ({ c, area: overlapArea(item, c) }))\n    .sort((p, q) => q.area - p.area || p.c.y - q.c.y || p.c.x - q.c.x)\n    .map(({ c }) => c);\n\n  for (const other of candidates) {\n    const exchanged = exchangeWith(layout, item, other, from, desired, limits);\n    if (exchanged) return exchanged;\n  }\n  return null;\n}\n\n/** One concrete two-widget exchange, or `null` if either side cannot fit. */\nfunction exchangeWith(\n  layout: Layout,\n  item: LayoutItem,\n  other: LayoutItem,\n  from: { x: number; y: number },\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n): LayoutItem[] | null {\n  const rest = layout.filter((l) => l.i !== item.i && l.i !== other.i);\n  // The slot being vacated, held back so the dragged widget cannot grow into the\n  // space the displaced one is about to need. Ids are never compared here (the\n  // scan works cell by cell), so this placeholder cannot clash with a real one.\n  const originSlot: LayoutItem = {\n    i: 'origin-slot-reservation',\n    x: from.x,\n    y: from.y,\n    w: desired.w,\n    h: desired.h,\n  };\n\n  const movedFit = maxFreeRectAt(\n    [...rest, originSlot],\n    { x: other.x, y: other.y },\n    desired,\n    limits,\n    item,\n  );\n  if (!movedFit) return null;\n  const moved: LayoutItem = {\n    ...item,\n    x: other.x,\n    y: other.y,\n    w: movedFit.w,\n    h: movedFit.h,\n    moved: true,\n  };\n\n  const displacedFit = maxFreeRectAt(\n    [...rest, moved],\n    { x: from.x, y: from.y },\n    { w: other.w, h: other.h },\n    limits,\n    other,\n  );\n  if (!displacedFit) return null;\n  const displaced: LayoutItem = {\n    ...other,\n    x: from.x,\n    y: from.y,\n    w: displacedFit.w,\n    h: displacedFit.h,\n    moved: true,\n  };\n\n  return layout.map((l) =>\n    l.i === item.i ? moved : l.i === other.i ? displaced : l,\n  );\n}\n\n/**\n * Build the resolver `moveElement` consults instead of reverting a blocked move,\n * or `undefined` for `'revert'` (and for an unset mode), which keeps the engine\n * on its original path with no added work.\n *\n * `'swap'` is an escalation ladder, tried in order: exchange with one of the\n * widgets under the drop, else downscale at the drop cell, else revert. A dense\n * grid stays draggable that way - refusing everything that is not a clean\n * one-to-one trade would make the mode feel broken exactly where it is needed.\n */\nexport function createCollisionResolver(\n  mode: CollisionMode | undefined,\n  options: CollisionResolverOptions,\n): CollisionResolver | undefined {\n  if (!mode || mode === 'revert') return undefined;\n\n  const limits = { cols: options.cols, maxRows: options.maxRows };\n\n  return ({ layout, item, collisions, from }) => {\n    const others = layout.filter((l) => l.i !== item.i);\n    const desired = options.desired ?? { w: item.w, h: item.h };\n\n    if (mode === 'swap' && options.allowExchange !== false) {\n      const exchanged = exchangeWithCollision(\n        layout,\n        item,\n        collisions,\n        from,\n        desired,\n        limits,\n      );\n      if (exchanged) return exchanged;\n    }\n\n    return downscaleInPlace(layout, item, others, desired, limits);\n  };\n}\n\n/**\n * Whether a layout holds no overlapping pair. A resolution is only ever accepted\n * when this holds, so the specs assert it directly.\n */\nexport function isOverlapFree(layout: Layout): boolean {\n  for (let i = 0; i < layout.length; i++) {\n    for (let j = i + 1; j < layout.length; j++) {\n      if (collides(layout[i]!, layout[j]!)) return false;\n    }\n  }\n  return true;\n}\n"],"mappings":"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"}
+{"version":3,"file":"collision-modes.js","names":[],"sources":["../../../../../src/components/layout/Board/grid-core/collision-modes.ts"],"sourcesContent":["/**\n * Collision resolution strategies for a grid that prevents collisions.\n *\n * Original UI Kit code (not vendored from react-grid-layout): the upstream\n * engine only ever reverts a blocked move.\n *\n * When `preventCollision` is on, `moveElement` refuses any placement that\n * overlaps an existing item and snaps the dragged item back. That is the right\n * default, but a free grid often wants the placement *resolved* instead of\n * refused - shrunk into whatever room is actually there, or exchanged with the\n * widget already sitting in the target slot. These strategies produce such a\n * resolution, and every resolution they return is overlap-free, so the caller's\n * own overlap guards keep working unchanged.\n */\n\nimport { collides } from './collision';\n\nimport type {\n  CollisionMode,\n  CollisionResolver,\n  CollisionResolverOptions,\n  Layout,\n  LayoutItem,\n} from './types';\n\n/** Whether a single grid cell is free of every item in `others`. */\nfunction cellFree(others: Layout, x: number, y: number): boolean {\n  for (let i = 0; i < others.length; i++) {\n    const o = others[i];\n    if (\n      o !== undefined &&\n      x >= o.x &&\n      x < o.x + o.w &&\n      y >= o.y &&\n      y < o.y + o.h\n    ) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * The largest rectangle anchored at `anchor` that fits without overlapping\n * `others`, growing rightward and downward only.\n *\n * Never larger than `desired` (a drag must never *upscale* a widget - growing\n * things is an explicit, opt-in operation like \"distribute evenly\", not a side\n * effect of moving them), never smaller than the item's own `minW`/`minH`, and\n * never past `cols` / `maxRows`. Among the candidates the largest-area rectangle\n * wins, breaking ties on width: a grid is read left to right, so a wide-and-flat\n * result is the less surprising of two equal-area fits.\n *\n * Returns `null` when not even the minimum size fits, which the callers treat as\n * \"no resolution\" and fall back to reverting.\n */\nexport function maxFreeRectAt(\n  others: Layout,\n  anchor: { x: number; y: number },\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n  mins?: { minW?: number; minH?: number },\n): { w: number; h: number } | null {\n  if (anchor.x < 0 || anchor.y < 0) return null;\n\n  const minW = Math.max(1, mins?.minW ?? 1);\n  const minH = Math.max(1, mins?.minH ?? 1);\n  const maxRows = limits.maxRows ?? Infinity;\n  const maxW = Math.min(desired.w, limits.cols - anchor.x);\n  const maxH = Math.min(\n    desired.h,\n    Number.isFinite(maxRows) ? maxRows - anchor.y : desired.h,\n  );\n\n  if (maxW < minW || maxH < minH) return null;\n\n  // Free height available in each column of the candidate band, measured down\n  // from the anchor row and capped at the tallest useful height.\n  const free: number[] = [];\n  for (let dx = 0; dx < maxW; dx++) {\n    let h = 0;\n    while (h < maxH && cellFree(others, anchor.x + dx, anchor.y + h)) h++;\n    free.push(h);\n    // A column with no room at all caps every wider candidate, so stop early.\n    if (h === 0) break;\n  }\n\n  let best: { w: number; h: number } | null = null;\n  let bestArea = 0;\n  let limit = maxH;\n  for (let w = 1; w <= free.length; w++) {\n    limit = Math.min(limit, free[w - 1]!);\n    if (limit < minH) break;\n    if (w < minW) continue;\n    const area = w * limit;\n    // `>=` so the widest of several equal-area fits wins: `w` only grows here, so\n    // the last match is the widest one.\n    if (area >= bestArea) {\n      best = { w, h: limit };\n      bestArea = area;\n    }\n  }\n\n  return best;\n}\n\n/**\n * Shrink the placement to the room actually available at the cell it was\n * dropped on.\n */\nfunction downscaleInPlace(\n  layout: Layout,\n  item: LayoutItem,\n  others: Layout,\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n): LayoutItem[] | null {\n  const fit = maxFreeRectAt(\n    others,\n    { x: item.x, y: item.y },\n    desired,\n    limits,\n    item,\n  );\n  if (!fit) return null;\n  // Nothing to resolve: the requested size already fits, so the collision was\n  // not a sizing problem and reverting is still the honest answer.\n  if (fit.w === item.w && fit.h === item.h) return null;\n\n  return layout.map((l) =>\n    l.i === item.i ? { ...l, w: fit.w, h: fit.h, moved: true } : l,\n  );\n}\n\n/** Number of cells two items share. Zero when they do not overlap at all. */\nfunction overlapArea(a: LayoutItem, b: LayoutItem): number {\n  const w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);\n  const h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);\n  return w > 0 && h > 0 ? w * h : 0;\n}\n\n/**\n * Exchange the placement with one of the widgets under it.\n *\n * The dragged widget takes the other's cell and the other takes the cell the\n * dragged widget came from. Each keeps as much of its own size as fits there -\n * that cell plus any free space adjacent to it - and neither ever grows.\n *\n * `from` is whatever the caller's layout says, so it is the caller that decides\n * what \"came from\" means. A pointer drag resolves every frame against the\n * arrangement the gesture started with, making it the cell the drag began at, and\n * keeping the result a pure function of where the pointer is; chaining frames off\n * each other instead would exchange with every widget swept over.\n * The slot the dragged widget is leaving is reserved for the displaced widget\n * while the dragged one is sized, so the two can never claim the same cells: the\n * result is overlap-free by construction, not by a follow-up check.\n */\nfunction exchangeWithCollision(\n  layout: Layout,\n  item: LayoutItem,\n  collisions: LayoutItem[],\n  from: { x: number; y: number },\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n): LayoutItem[] | null {\n  // Nothing to trade if the widget has not actually left a slot behind - a\n  // cross-board drop, where it never had one on this board.\n  if (from.x === item.x && from.y === item.y) return null;\n\n  // A drop that spans a boundary covers two widgets at once, and refusing those\n  // frames would leave a band mid-drag where nothing is swapped at all: the\n  // placeholder snaps back to the origin, then jumps to the far swap once the drop\n  // clears the first widget. Trade with the one the drop covers most instead, so\n  // the swap only ever changes which partner it is - never blinks away. Ties go to\n  // the widget earlier in reading order, so the choice is deterministic. Exactly\n  // one widget is ever displaced, whichever is picked.\n  const candidates = collisions\n    .filter((c) => !c.static)\n    .map((c) => ({ c, area: overlapArea(item, c) }))\n    .sort((p, q) => q.area - p.area || p.c.y - q.c.y || p.c.x - q.c.x)\n    .map(({ c }) => c);\n\n  for (const other of candidates) {\n    const exchanged = exchangeWith(layout, item, other, from, desired, limits);\n    if (exchanged) return exchanged;\n  }\n  return null;\n}\n\n/** One concrete two-widget exchange, or `null` if either side cannot fit. */\nfunction exchangeWith(\n  layout: Layout,\n  item: LayoutItem,\n  other: LayoutItem,\n  from: { x: number; y: number },\n  desired: { w: number; h: number },\n  limits: { cols: number; maxRows?: number },\n): LayoutItem[] | null {\n  const rest = layout.filter((l) => l.i !== item.i && l.i !== other.i);\n  // The slot being vacated, held back so the dragged widget cannot grow into the\n  // space the displaced one is about to need. Ids are never compared here (the\n  // scan works cell by cell), so this placeholder cannot clash with a real one.\n  const originSlot: LayoutItem = {\n    i: 'origin-slot-reservation',\n    x: from.x,\n    y: from.y,\n    w: desired.w,\n    h: desired.h,\n  };\n\n  const movedFit = maxFreeRectAt(\n    [...rest, originSlot],\n    { x: other.x, y: other.y },\n    desired,\n    limits,\n    item,\n  );\n  if (!movedFit) return null;\n  const moved: LayoutItem = {\n    ...item,\n    x: other.x,\n    y: other.y,\n    w: movedFit.w,\n    h: movedFit.h,\n    moved: true,\n  };\n\n  const displacedFit = maxFreeRectAt(\n    [...rest, moved],\n    { x: from.x, y: from.y },\n    { w: other.w, h: other.h },\n    limits,\n    other,\n  );\n  if (!displacedFit) return null;\n  const displaced: LayoutItem = {\n    ...other,\n    x: from.x,\n    y: from.y,\n    w: displacedFit.w,\n    h: displacedFit.h,\n    moved: true,\n  };\n\n  return layout.map((l) =>\n    l.i === item.i ? moved : l.i === other.i ? displaced : l,\n  );\n}\n\n/**\n * Build the resolver `moveElement` consults instead of reverting a blocked move,\n * or `undefined` for `'revert'` (and for an unset mode), which keeps the engine\n * on its original path with no added work.\n *\n * For an in-board drag, `'swap'` is an escalation ladder: exchange with one of\n * the widgets under the drop, else downscale at the drop cell, else revert. A\n * dense grid stays draggable that way - refusing everything that is not a clean\n * one-to-one trade would make the mode feel broken exactly where it is needed.\n * Cross-board callers pass `allowExchange: false`, which turns the same mode into\n * empty-anchor downscaling; the registry cancels the transfer if that resolution\n * cannot occupy the requested cell.\n */\nexport function createCollisionResolver(\n  mode: CollisionMode | undefined,\n  options: CollisionResolverOptions,\n): CollisionResolver | undefined {\n  if (!mode || mode === 'revert') return undefined;\n\n  const limits = { cols: options.cols, maxRows: options.maxRows };\n\n  return ({ layout, item, collisions, from }) => {\n    const others = layout.filter((l) => l.i !== item.i);\n    const desired = options.desired ?? { w: item.w, h: item.h };\n\n    if (mode === 'swap' && options.allowExchange !== false) {\n      const exchanged = exchangeWithCollision(\n        layout,\n        item,\n        collisions,\n        from,\n        desired,\n        limits,\n      );\n      if (exchanged) return exchanged;\n    }\n\n    return downscaleInPlace(layout, item, others, desired, limits);\n  };\n}\n\n/**\n * Whether a layout holds no overlapping pair. A resolution is only ever accepted\n * when this holds, so the specs assert it directly.\n */\nexport function isOverlapFree(layout: Layout): boolean {\n  for (let i = 0; i < layout.length; i++) {\n    for (let j = i + 1; j < layout.length; j++) {\n      if (collides(layout[i]!, layout[j]!)) return false;\n    }\n  }\n  return true;\n}\n"],"mappings":"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"}

package/dist/components/layout/Board/grid-core/collision.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/collision.ts
 /**
 * Check if two layout items collide (overlap).

package/dist/components/layout/Board/grid-core/compactors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { collides, getFirstCollision } from "./collision.js";
 import { sortLayoutItemsByColRow, sortLayoutItemsByRowCol } from "./sort.js";
 import { bottom, cloneLayout, cloneLayoutItem, getStatics } from "./layout.js";

package/dist/components/layout/Board/grid-core/constraints.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/constraints.ts
 function clamp(value, min, max) {
 	return Math.max(min, Math.min(max, value));

package/dist/components/layout/Board/grid-core/group-move.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { collides, getFirstCollision } from "./collision.js";
 import { sortLayoutItemsByColRow, sortLayoutItemsByRowCol } from "./sort.js";
 import { bottom, cloneLayout, cloneLayoutItem, getStatics } from "./layout.js";

package/dist/components/layout/Board/grid-core/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { getAllCollisions, getFirstCollision } from "./collision.js";
 import { sortLayoutItems } from "./sort.js";