@cube-dev/ui-kit 0.0.0-canary-aa1b153 → 0.0.0-canary-c26fe9d

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | Cube Dev Team */
 import { BoardDragActiveContext, BoardRegistryContext } from "./board-context.js";
 import { useBoardRegistry } from "./use-board-registry.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -0,0 +1,45 @@
+
+import { LayoutItem } from "./grid-core/types.js";
+import { CubeBoardProps } from "./Board.js";
+import { BreakpointCols, Breakpoints, ResponsiveLayouts } from "./responsive-utils.js";
+import * as react from "react";
+
+//#region src/components/layout/Board/BoardResponsive.d.ts
+interface CubeBoardResponsiveProps extends Omit<CubeBoardProps, 'layout' | 'defaultLayout' | 'cols' | 'onLayoutChange' | 'width' | 'breakpoints'> {
+  /** Map of breakpoint name -> minimum container width in pixels. */
+  breakpoints: Breakpoints;
+  /** Map of breakpoint name -> column count. */
+  cols: BreakpointCols;
+  /** Controlled per-breakpoint layouts. */
+  layouts?: ResponsiveLayouts;
+  /** Initial per-breakpoint layouts for uncontrolled usage. */
+  defaultLayouts?: ResponsiveLayouts;
+  /**
+   * Called when a drag or resize is committed. Receives the active breakpoint's
+   * layout and the full map of all breakpoint layouts.
+   */
+  onLayoutChange?: (currentLayout: LayoutItem[], allLayouts: ResponsiveLayouts) => void;
+  /** Called when the active breakpoint changes. */
+  onBreakpointChange?: (breakpoint: string, cols: number) => void;
+  /**
+   * Force a specific breakpoint regardless of the measured width (e.g. for a
+   * fixed-size screenshot or PDF export).
+   */
+  breakpoint?: string;
+  /**
+   * Explicit container width in pixels. When provided, disables automatic width
+   * measurement (useful for SSR, tests, and forced-size exports).
+   */
+  width?: number;
+}
+/**
+ * A responsive wrapper around `Board` that selects a layout and column count
+ * based on the container's width (or a forced breakpoint). Mirrors the model of
+ * react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`
+ * and `cols`, with `onLayoutChange` reporting both the active layout and the
+ * full map.
+ */
+declare const BoardResponsive: react.ForwardRefExoticComponent<CubeBoardResponsiveProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BoardResponsive, CubeBoardResponsiveProps };
+//# sourceMappingURL=BoardResponsive.d.ts.map

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

@@ -0,0 +1,94 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | Cube Dev Team */
+import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { getCompactor } from "./grid-core/compactors.js";
+import { Board } from "./Board.js";
+import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint } from "./responsive-utils.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useResizeObserver } from "@react-aria/utils";
+
+//#region src/components/layout/Board/BoardResponsive.tsx
+function compactTypeToCore(compact) {
+	if (compact === "free") return null;
+	return compact;
+}
+function BoardResponsiveInner(props, ref) {
+	const { breakpoints, cols, layouts: controlledLayouts, defaultLayouts, onLayoutChange, onBreakpointChange, breakpoint: forcedBreakpoint, width: providedWidth, compact = "vertical", allowOverlap = false, preventCollision = false, ...boardProps } = props;
+	const boardRef = useRef(null);
+	const combinedRef = useCombinedRefs(ref, boardRef);
+	const [measuredWidth, setMeasuredWidth] = useState(0);
+	useResizeObserver({
+		ref: boardRef,
+		onResize: useEvent(() => {
+			const next = boardRef.current?.offsetWidth ?? 0;
+			if (next > 0) setMeasuredWidth((prev) => prev === next ? prev : next);
+		})
+	});
+	const isControlled = controlledLayouts !== void 0;
+	const [internalLayouts, setInternalLayouts] = useState(() => controlledLayouts ?? defaultLayouts ?? {});
+	const currentLayouts = isControlled ? controlledLayouts : internalLayouts;
+	const layoutsRef = useRef(currentLayouts);
+	layoutsRef.current = currentLayouts;
+	const activeBreakpoint = forcedBreakpoint ?? getBreakpointFromWidth(breakpoints, providedWidth ?? measuredWidth);
+	const activeCols = getColsFromBreakpoint(activeBreakpoint, cols);
+	const lastBreakpointRef = useRef(activeBreakpoint);
+	const compactor = useMemo(() => getCompactor(compactTypeToCore(compact), allowOverlap, preventCollision), [
+		compact,
+		allowOverlap,
+		preventCollision
+	]);
+	const currentLayout = useMemo(() => {
+		const existing = currentLayouts[activeBreakpoint];
+		if (existing) return existing;
+		return findOrGenerateResponsiveLayout(currentLayouts, breakpoints, activeBreakpoint, lastBreakpointRef.current, activeCols, compactor);
+	}, [
+		currentLayouts,
+		breakpoints,
+		activeBreakpoint,
+		activeCols,
+		compactor
+	]);
+	const onBreakpointChangeEvent = useEvent(() => onBreakpointChange?.(activeBreakpoint, activeCols));
+	const bpInitializedRef = useRef(false);
+	useEffect(() => {
+		if (!bpInitializedRef.current) {
+			bpInitializedRef.current = true;
+			lastBreakpointRef.current = activeBreakpoint;
+			return;
+		}
+		onBreakpointChangeEvent();
+		lastBreakpointRef.current = activeBreakpoint;
+	}, [activeBreakpoint]);
+	return /* @__PURE__ */ jsx(Board, {
+		ref: combinedRef,
+		layout: currentLayout,
+		cols: activeCols,
+		width: providedWidth,
+		compact,
+		allowOverlap,
+		preventCollision,
+		onLayoutChange: useEvent((next) => {
+			const merged = {
+				...layoutsRef.current,
+				[activeBreakpoint]: next
+			};
+			layoutsRef.current = merged;
+			if (!isControlled) setInternalLayouts(merged);
+			onLayoutChange?.(next, merged);
+		}),
+		...boardProps
+	});
+}
+/**
+* A responsive wrapper around `Board` that selects a layout and column count
+* based on the container's width (or a forced breakpoint). Mirrors the model of
+* react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`
+* and `cols`, with `onLayoutChange` reporting both the active layout and the
+* full map.
+*/
+const BoardResponsive = forwardRef(BoardResponsiveInner);
+
+//#endregion
+export { BoardResponsive };
+//# sourceMappingURL=BoardResponsive.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoardResponsive.js","names":[],"sources":["../../../../src/components/layout/Board/BoardResponsive.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useCombinedRefs } from '../../../utils/react';\n\nimport { Board } from './Board';\nimport { Compactor, CompactType, getCompactor, LayoutItem } from './grid-core';\nimport {\n  BreakpointCols,\n  Breakpoints,\n  findOrGenerateResponsiveLayout,\n  getBreakpointFromWidth,\n  getColsFromBreakpoint,\n  ResponsiveLayouts,\n} from './responsive-utils';\n\nimport type { BoardCompactType, CubeBoardProps } from './Board';\n\nexport interface CubeBoardResponsiveProps\n  extends Omit<\n    CubeBoardProps,\n    | 'layout'\n    | 'defaultLayout'\n    | 'cols'\n    | 'onLayoutChange'\n    | 'width'\n    | 'breakpoints'\n  > {\n  /** Map of breakpoint name -> minimum container width in pixels. */\n  breakpoints: Breakpoints;\n  /** Map of breakpoint name -> column count. */\n  cols: BreakpointCols;\n  /** Controlled per-breakpoint layouts. */\n  layouts?: ResponsiveLayouts;\n  /** Initial per-breakpoint layouts for uncontrolled usage. */\n  defaultLayouts?: ResponsiveLayouts;\n  /**\n   * Called when a drag or resize is committed. Receives the active breakpoint's\n   * layout and the full map of all breakpoint layouts.\n   */\n  onLayoutChange?: (\n    currentLayout: LayoutItem[],\n    allLayouts: ResponsiveLayouts,\n  ) => void;\n  /** Called when the active breakpoint changes. */\n  onBreakpointChange?: (breakpoint: string, cols: number) => void;\n  /**\n   * Force a specific breakpoint regardless of the measured width (e.g. for a\n   * fixed-size screenshot or PDF export).\n   */\n  breakpoint?: string;\n  /**\n   * Explicit container width in pixels. When provided, disables automatic width\n   * measurement (useful for SSR, tests, and forced-size exports).\n   */\n  width?: number;\n}\n\nfunction compactTypeToCore(compact: BoardCompactType): CompactType {\n  if (compact === 'free') return null;\n  return compact;\n}\n\nfunction BoardResponsiveInner(\n  props: CubeBoardResponsiveProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    breakpoints,\n    cols,\n    layouts: controlledLayouts,\n    defaultLayouts,\n    onLayoutChange,\n    onBreakpointChange,\n    breakpoint: forcedBreakpoint,\n    width: providedWidth,\n    compact = 'vertical',\n    allowOverlap = false,\n    preventCollision = false,\n    ...boardProps\n  } = props;\n\n  const boardRef = useRef<HTMLDivElement | null>(null);\n  const combinedRef = useCombinedRefs(ref, boardRef);\n  const [measuredWidth, setMeasuredWidth] = useState(0);\n\n  const onResizeElement = useEvent(() => {\n    const next = boardRef.current?.offsetWidth ?? 0;\n    if (next > 0) setMeasuredWidth((prev) => (prev === next ? prev : next));\n  });\n  useResizeObserver({ ref: boardRef, onResize: onResizeElement });\n\n  const isControlled = controlledLayouts !== undefined;\n  const [internalLayouts, setInternalLayouts] = useState<ResponsiveLayouts>(\n    () => controlledLayouts ?? defaultLayouts ?? {},\n  );\n  const currentLayouts = isControlled ? controlledLayouts! : internalLayouts;\n  const layoutsRef = useRef(currentLayouts);\n  layoutsRef.current = currentLayouts;\n\n  const widthForBreakpoint = providedWidth ?? measuredWidth;\n  const activeBreakpoint =\n    forcedBreakpoint ?? getBreakpointFromWidth(breakpoints, widthForBreakpoint);\n  const activeCols = getColsFromBreakpoint(activeBreakpoint, cols);\n\n  // Previous breakpoint, used as the preferred source when synthesizing a layout\n  // for a breakpoint that has none yet.\n  const lastBreakpointRef = useRef(activeBreakpoint);\n\n  // This compactor is only used to synthesize a layout for a breakpoint that has\n  // none yet (compaction/bounds correction), so `preventCollision` has no effect\n  // here - the drag-time behavior comes from the child `Board`'s own compactor\n  // (see the free-mode note in `Board.tsx`).\n  const compactor = useMemo<Compactor>(\n    () =>\n      getCompactor(compactTypeToCore(compact), allowOverlap, preventCollision),\n    [compact, allowOverlap, preventCollision],\n  );\n\n  // Keep a stable reference for an existing breakpoint's layout so the child\n  // `Board` (which syncs controlled layout by reference) is not reset every\n  // render or mid-drag. Only a genuinely missing breakpoint is synthesized.\n  const currentLayout = useMemo(() => {\n    const existing = currentLayouts[activeBreakpoint];\n    if (existing) return existing;\n    return findOrGenerateResponsiveLayout(\n      currentLayouts,\n      breakpoints,\n      activeBreakpoint,\n      lastBreakpointRef.current,\n      activeCols,\n      compactor,\n    );\n  }, [currentLayouts, breakpoints, activeBreakpoint, activeCols, compactor]);\n\n  // Remember the last breakpoint (for synthesizing a missing one) and emit\n  // breakpoint changes after commit, skipping the initial mount.\n  const onBreakpointChangeEvent = useEvent(() =>\n    onBreakpointChange?.(activeBreakpoint, activeCols),\n  );\n  const bpInitializedRef = useRef(false);\n  useEffect(() => {\n    if (!bpInitializedRef.current) {\n      bpInitializedRef.current = true;\n      lastBreakpointRef.current = activeBreakpoint;\n      return;\n    }\n    onBreakpointChangeEvent();\n    lastBreakpointRef.current = activeBreakpoint;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeBreakpoint]);\n\n  const handleLayoutChange = useEvent((next: LayoutItem[]) => {\n    const merged = { ...layoutsRef.current, [activeBreakpoint]: next };\n    layoutsRef.current = merged;\n    if (!isControlled) setInternalLayouts(merged);\n    onLayoutChange?.(next, merged);\n  });\n\n  return (\n    <Board\n      ref={combinedRef}\n      layout={currentLayout}\n      cols={activeCols}\n      width={providedWidth}\n      compact={compact}\n      allowOverlap={allowOverlap}\n      preventCollision={preventCollision}\n      onLayoutChange={handleLayoutChange}\n      {...boardProps}\n    />\n  );\n}\n\n/**\n * A responsive wrapper around `Board` that selects a layout and column count\n * based on the container's width (or a forced breakpoint). Mirrors the model of\n * react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`\n * and `cols`, with `onLayoutChange` reporting both the active layout and the\n * full map.\n */\nexport const BoardResponsive = forwardRef(BoardResponsiveInner);\n"],"mappings":";;;;;;;;;;;AA2DA,SAAS,kBAAkB,SAAwC;AACjE,KAAI,YAAY,OAAQ,QAAO;AAC/B,QAAO;;AAGT,SAAS,qBACP,OACA,KACA;CACA,MAAM,EACJ,aACA,MACA,SAAS,mBACT,gBACA,gBACA,oBACA,YAAY,kBACZ,OAAO,eACP,UAAU,YACV,eAAe,OACf,mBAAmB,OACnB,GAAG,eACD;CAEJ,MAAM,WAAW,OAA8B,KAAK;CACpD,MAAM,cAAc,gBAAgB,KAAK,SAAS;CAClD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;AAMrD,mBAAkB;EAAE,KAAK;EAAU,UAJX,eAAe;GACrC,MAAM,OAAO,SAAS,SAAS,eAAe;AAC9C,OAAI,OAAO,EAAG,mBAAkB,SAAU,SAAS,OAAO,OAAO,KAAM;IACvE;EAC4D,CAAC;CAE/D,MAAM,eAAe,sBAAsB;CAC3C,MAAM,CAAC,iBAAiB,sBAAsB,eACtC,qBAAqB,kBAAkB,EAAE,CAChD;CACD,MAAM,iBAAiB,eAAe,oBAAqB;CAC3D,MAAM,aAAa,OAAO,eAAe;AACzC,YAAW,UAAU;CAGrB,MAAM,mBACJ,oBAAoB,uBAAuB,aAFlB,iBAAiB,cAEiC;CAC7E,MAAM,aAAa,sBAAsB,kBAAkB,KAAK;CAIhE,MAAM,oBAAoB,OAAO,iBAAiB;CAMlD,MAAM,YAAY,cAEd,aAAa,kBAAkB,QAAQ,EAAE,cAAc,iBAAiB,EAC1E;EAAC;EAAS;EAAc;EAAiB,CAC1C;CAKD,MAAM,gBAAgB,cAAc;EAClC,MAAM,WAAW,eAAe;AAChC,MAAI,SAAU,QAAO;AACrB,SAAO,+BACL,gBACA,aACA,kBACA,kBAAkB,SAClB,YACA,UACD;IACA;EAAC;EAAgB;EAAa;EAAkB;EAAY;EAAU,CAAC;CAI1E,MAAM,0BAA0B,eAC9B,qBAAqB,kBAAkB,WAAW,CACnD;CACD,MAAM,mBAAmB,OAAO,MAAM;AACtC,iBAAgB;AACd,MAAI,CAAC,iBAAiB,SAAS;AAC7B,oBAAiB,UAAU;AAC3B,qBAAkB,UAAU;AAC5B;;AAEF,2BAAyB;AACzB,oBAAkB,UAAU;IAE3B,CAAC,iBAAiB,CAAC;AAStB,QACE,oBAAC;EACC,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACE;EACK;EACI;EAClB,gBAhBuB,UAAU,SAAuB;GAC1D,MAAM,SAAS;IAAE,GAAG,WAAW;KAAU,mBAAmB;IAAM;AAClE,cAAW,UAAU;AACrB,OAAI,CAAC,aAAc,oBAAmB,OAAO;AAC7C,oBAAiB,MAAM,OAAO;IAC9B;EAYE,GAAI;GACJ;;;;;;;;;AAWN,MAAa,kBAAkB,WAAW,qBAAqB"}

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

@@ -27,6 +27,16 @@ interface CubeBoardWidgetProps {
    * expand until the inner board's rows fit at the parent's row height.
    */
   isAutoHeight?: boolean;
+  /**
+   * CSS selector for elements that must not start a pointer drag inside this
+   * widget (overrides the board's `dragCancel`).
+   */
+  dragCancel?: string;
+  /**
+   * CSS selector for the only elements from which a pointer drag may start
+   * inside this widget (overrides the board's `dragHandle`).
+   */
+  dragHandle?: string;
 }
 /**
  * Declares a widget's content and per-widget options. Rendering and positioning

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useBoardRegistry } from "./board-context.js";
 import { useEffect, useRef } from "react";
@@ -10,7 +10,7 @@ import { useEffect, useRef } from "react";
 * which is what allows a widget to be transferred between boards.
 */
 function Widget(props) {
-	const { id, children, isDraggable, isResizable, resizeHandles, constraints, qa, styles, isAutoHeight } = props;
+	const { id, children, isDraggable, isResizable, resizeHandles, constraints, qa, styles, isAutoHeight, dragCancel, dragHandle } = props;
 	const registry = useBoardRegistry();
 	const ownerRef = useRef({});
 	useLayoutEffect$1(() => {
@@ -23,7 +23,9 @@ function Widget(props) {
 			constraints,
 			qa,
 			styles,
-			isAutoHeight
+			isAutoHeight,
+			dragCancel,
+			dragHandle
 		}, ownerRef.current);
 	});
 	useEffect(() => {

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 { Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\nexport interface CubeBoardWidgetProps {\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  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /** Style overrides applied to the rendered widget element. */\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\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    constraints,\n    qa,\n    styles,\n    isAutoHeight,\n  } = props;\n  const registry = useBoardRegistry();\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        constraints,\n        qa,\n        styles,\n        isAutoHeight,\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":";;;;;;;;;;;AAsCA,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,aACA,IACA,QACA,iBACE;CACJ,MAAM,WAAW,kBAAkB;CAInC,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACD,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 { Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\nexport interface CubeBoardWidgetProps {\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  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /** Style overrides applied to the rendered widget element. */\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\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    constraints,\n    qa,\n    styles,\n    isAutoHeight,\n    dragCancel,\n    dragHandle,\n  } = props;\n  const registry = useBoardRegistry();\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        constraints,\n        qa,\n        styles,\n        isAutoHeight,\n        dragCancel,\n        dragHandle,\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":";;;;;;;;;;;AAgDA,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,aACA,IACA,QACA,cACA,YACA,eACE;CACJ,MAAM,WAAW,kBAAkB;CAInC,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,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.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { BoardHostContext } from "./board-context.js";
@@ -182,7 +182,7 @@ function ResizeHandle({ axis, onResize }) {
 * renders into the shared overlay portal so it can float outside its board.
 */
 function WidgetHost(props) {
-	const { boardId, item, positionParams, registration, isDraggable, isResizable, resizeHandles, registry, dragState, onResize, onAutoHeight } = props;
+	const { boardId, item, positionParams, registration, isDraggable, isResizable, resizeHandles, dragCancel, dragHandle, registry, dragState, onResize, onAutoHeight, onDragLifecycle } = props;
 	const hostRef = useRef(null);
 	const isActiveDrag = dragState?.itemId === item.i;
 	const isAutoHeight = registration?.isAutoHeight === true;
@@ -221,6 +221,7 @@ function WidgetHost(props) {
 				height: pos.height
 			};
 			registry.onDragStart(boardId, item.i, vr, e.pointerType, hostRef.current);
+			onDragLifecycle?.(item.i, "start");
 		},
 		onMove(e) {
 			if (!isDraggable) return;
@@ -228,13 +229,16 @@ function WidgetHost(props) {
 				const stepX = calcGridColWidth(positionParams) + positionParams.margin[0];
 				const stepY = positionParams.rowHeight + positionParams.margin[1];
 				registry.onDragMove(Math.sign(e.deltaX) * stepX, Math.sign(e.deltaY) * stepY, e.pointerType);
+				onDragLifecycle?.(item.i, "move");
 				return;
 			}
 			registry.onDragMove(e.deltaX, e.deltaY, e.pointerType);
+			onDragLifecycle?.(item.i, "move");
 		},
 		onMoveEnd() {
 			if (!isDraggable) return;
 			registry.onDragEnd();
+			onDragLifecycle?.(item.i, "end");
 		}
 	});
 	const a11yProps = {
@@ -247,6 +251,26 @@ function WidgetHost(props) {
 		onMouseDown: (e) => e.stopPropagation(),
 		onTouchStart: (e) => e.stopPropagation()
 	} : {};
+	const shouldGateDrag = (target) => {
+		if (!(target instanceof Element)) return false;
+		if (dragHandle && !target.closest(dragHandle)) return true;
+		return !!(dragCancel && target.closest(dragCancel));
+	};
+	const gatedMoveProps = isDraggable && (dragHandle || dragCancel) ? {
+		...moveProps,
+		...moveProps.onPointerDown && { onPointerDown: (e) => {
+			if (shouldGateDrag(e.target)) return;
+			moveProps.onPointerDown(e);
+		} },
+		...moveProps.onMouseDown && { onMouseDown: (e) => {
+			if (shouldGateDrag(e.target)) return;
+			moveProps.onMouseDown(e);
+		} },
+		...moveProps.onTouchStart && { onTouchStart: (e) => {
+			if (shouldGateDrag(e.target)) return;
+			moveProps.onTouchStart(e);
+		} }
+	} : moveProps;
 	const handleResize = (axis, phase, dx, dy) => {
 		if (phase === "start") setIsResizing(true);
 		else if (phase === "end") setIsResizing(false);
@@ -288,7 +312,7 @@ function WidgetHost(props) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WidgetElement, {
 		ref: hostRef,
 		"data-board-widget-host": "",
-		...mergeProps$1(moveProps, stopBubbleProps, hoverProps, focusWithinProps, a11yProps, { style: hostStyle }),
+		...mergeProps$1(gatedMoveProps, stopBubbleProps, hoverProps, focusWithinProps, a11yProps, { style: hostStyle }),
 		qa: registration?.qa,
 		mods: hostMods,
 		styles: registration?.styles,

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 { useFocusWithin, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useEvent } from '../../../_internal/hooks';\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';\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\nconst WidgetElement = tasty({\n  qa: 'BoardWidget',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    fill: '#surface',\n    radius: '1cr',\n    border: true,\n    shadow: {\n      '': false,\n      // `$dialog-shadow` uses Glaze `#shadow-lg`, which adapts to dark / high-contrast schemes.\n      'drag | resizing': '$dialog-shadow',\n    },\n    zIndex: {\n      '': 1,\n      'drag | resizing': 10,\n    },\n    transition: 'theme, shadow',\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    overflow: 'hidden',\n  },\n});\n\nconst HandleElement = tasty({\n  qa: 'BoardResizeHandle',\n  styles: {\n    position: 'absolute',\n    zIndex: 20,\n    fill: '#clear',\n    // Overhang: how far the hit-zone extends beyond the widget edge.\n    '--handle-size': '24px',\n    '--handle-overhang': '-8px',\n    '--handle-inset': '8px',\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    width: '10px',\n    height: '10px',\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\"]': '0 0 4px 0',\n      '[data-axis=\"sw\"]': '0 0 0 4px',\n      '[data-axis=\"ne\"]': '0 4px 0 0',\n      '[data-axis=\"nw\"]': '4px 0 0 0',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '4px',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '4px',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '4px',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '4px',\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\ninterface ResizeHandleProps {\n  axis: ResizeHandleAxis;\n  onResize: (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n}\n\nfunction ResizeHandle({ axis, 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      {...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  isDraggable: boolean;\n  isResizable: boolean;\n  resizeHandles: ResizeHandleAxis[];\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\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    isDraggable,\n    isResizable,\n    resizeHandles,\n    registry,\n    dragState,\n    onResize,\n    onAutoHeight,\n  } = props;\n\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const isActiveDrag = dragState?.itemId === item.i;\n  const isAutoHeight = registration?.isAutoHeight === true;\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  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 || 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    },\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        return;\n      }\n      registry.onDragMove(e.deltaX, e.deltaY, e.pointerType);\n    },\n    onMoveEnd() {\n      if (!isDraggable) return;\n      registry.onDragEnd();\n    },\n  });\n\n  const a11yProps = {\n    tabIndex: isDraggable ? 0 : undefined,\n    'aria-roledescription': isDraggable ? 'Draggable widget' : undefined,\n    'aria-label': registration?.qa ?? item.i,\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  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  };\n\n  const content = (\n    <BoardHostContext.Provider value={hostValue}>\n      {registration?.content}\n      {isResizable && !item.static ? (\n        <>\n          {resizeHandles.map((axis) => (\n            <ResizeHandle key={axis} axis={axis} onResize={handleResize} />\n          ))}\n          {resizeHandles.filter(isCornerAxis).map((axis) => (\n            <GripElement\n              key={`grip-${axis}`}\n              data-axis={axis}\n              mods={{ revealed: gripsRevealed }}\n              aria-hidden=\"true\"\n            />\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  const floatInOverlay = useOverlay && !!overlayNode && !!dragState;\n\n  const hostStyle: CSSProperties = {\n    transform: `translate(${pos.left}px, ${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 };\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      {...mergeProps(\n        moveProps,\n        stopBubbleProps,\n        hoverProps,\n        focusWithinProps,\n        a11yProps,\n        { style: hostStyle },\n      )}\n      qa={registration?.qa}\n      mods={hostMods}\n      styles={registration?.styles 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: `${dragState!.rect.left}px`,\n            top: `${dragState!.rect.top}px`,\n            width: `${dragState!.rect.width}px`,\n            height: `${dragState!.rect.height}px`,\n            pointerEvents: 'none',\n          }}\n          mods={{ ...mods, drag: true }}\n          styles={registration?.styles as Styles}\n          aria-hidden=\"true\"\n        >\n          {content}\n        </WidgetElement>,\n        overlayNode!,\n      )\n    : null;\n\n  return (\n    <>\n      {host}\n      {overlayClone}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"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 { useFocusWithin, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useEvent } from '../../../_internal/hooks';\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';\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\nconst WidgetElement = tasty({\n  qa: 'BoardWidget',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    fill: '#surface',\n    radius: '1cr',\n    border: true,\n    shadow: {\n      '': false,\n      // `$dialog-shadow` uses Glaze `#shadow-lg`, which adapts to dark / high-contrast schemes.\n      'drag | resizing': '$dialog-shadow',\n    },\n    zIndex: {\n      '': 1,\n      'drag | resizing': 10,\n    },\n    transition: 'theme, shadow',\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    overflow: 'hidden',\n  },\n});\n\nconst HandleElement = tasty({\n  qa: 'BoardResizeHandle',\n  styles: {\n    position: 'absolute',\n    zIndex: 20,\n    fill: '#clear',\n    // Overhang: how far the hit-zone extends beyond the widget edge.\n    '--handle-size': '24px',\n    '--handle-overhang': '-8px',\n    '--handle-inset': '8px',\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    width: '10px',\n    height: '10px',\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\"]': '0 0 4px 0',\n      '[data-axis=\"sw\"]': '0 0 0 4px',\n      '[data-axis=\"ne\"]': '0 4px 0 0',\n      '[data-axis=\"nw\"]': '4px 0 0 0',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '4px',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '4px',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '4px',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '4px',\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\ninterface ResizeHandleProps {\n  axis: ResizeHandleAxis;\n  onResize: (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n}\n\nfunction ResizeHandle({ axis, 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      {...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  isDraggable: boolean;\n  isResizable: boolean;\n  resizeHandles: ResizeHandleAxis[];\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  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}\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    isDraggable,\n    isResizable,\n    resizeHandles,\n    dragCancel,\n    dragHandle,\n    registry,\n    dragState,\n    onResize,\n    onAutoHeight,\n    onDragLifecycle,\n  } = props;\n\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const isActiveDrag = dragState?.itemId === item.i;\n  const isAutoHeight = registration?.isAutoHeight === true;\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  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 || 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  const a11yProps = {\n    tabIndex: isDraggable ? 0 : undefined,\n    'aria-roledescription': isDraggable ? 'Draggable widget' : undefined,\n    'aria-label': registration?.qa ?? item.i,\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    return !!(dragCancel && target.closest(dragCancel));\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. Keyboard moves go through `onKeyDown` and are never\n  // gated.\n  const gatedMoveProps =\n    isDraggable && (dragHandle || dragCancel)\n      ? {\n          ...moveProps,\n          ...(moveProps.onPointerDown && {\n            onPointerDown: (e: React.PointerEvent) => {\n              if (shouldGateDrag(e.target)) return;\n              moveProps.onPointerDown!(e);\n            },\n          }),\n          ...(moveProps.onMouseDown && {\n            onMouseDown: (e: React.MouseEvent) => {\n              if (shouldGateDrag(e.target)) return;\n              moveProps.onMouseDown!(e);\n            },\n          }),\n          ...(moveProps.onTouchStart && {\n            onTouchStart: (e: React.TouchEvent) => {\n              if (shouldGateDrag(e.target)) return;\n              moveProps.onTouchStart!(e);\n            },\n          }),\n        }\n      : moveProps;\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  };\n\n  const content = (\n    <BoardHostContext.Provider value={hostValue}>\n      {registration?.content}\n      {isResizable && !item.static ? (\n        <>\n          {resizeHandles.map((axis) => (\n            <ResizeHandle key={axis} axis={axis} onResize={handleResize} />\n          ))}\n          {resizeHandles.filter(isCornerAxis).map((axis) => (\n            <GripElement\n              key={`grip-${axis}`}\n              data-axis={axis}\n              mods={{ revealed: gripsRevealed }}\n              aria-hidden=\"true\"\n            />\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  const floatInOverlay = useOverlay && !!overlayNode && !!dragState;\n\n  const hostStyle: CSSProperties = {\n    transform: `translate(${pos.left}px, ${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 };\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      {...mergeProps(\n        gatedMoveProps,\n        stopBubbleProps,\n        hoverProps,\n        focusWithinProps,\n        a11yProps,\n        { style: hostStyle },\n      )}\n      qa={registration?.qa}\n      mods={hostMods}\n      styles={registration?.styles 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: `${dragState!.rect.left}px`,\n            top: `${dragState!.rect.top}px`,\n            width: `${dragState!.rect.width}px`,\n            height: `${dragState!.rect.height}px`,\n            pointerEvents: 'none',\n          }}\n          mods={{ ...mods, drag: true }}\n          styles={registration?.styles as Styles}\n          aria-hidden=\"true\"\n        >\n          {content}\n        </WidgetElement>,\n        overlayNode!,\n      )\n    : null;\n\n  return (\n    <>\n      {host}\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.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | 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.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | 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.constraints !== reg.constraints || prev.qa !== reg.qa || prev.styles !== reg.styles || prev.isAutoHeight !== reg.isAutoHeight) {
+		if (!prev || prev.content !== reg.content || prev.isDraggable !== reg.isDraggable || prev.isResizable !== reg.isResizable || prev.resizeHandles !== reg.resizeHandles || prev.constraints !== reg.constraints || prev.qa !== reg.qa || prev.styles !== reg.styles || prev.isAutoHeight !== reg.isAutoHeight || prev.dragCancel !== reg.dragCancel || prev.dragHandle !== reg.dragHandle) {
 			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';\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  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}\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.constraints !== reg.constraints ||\n      prev.qa !== reg.qa ||\n      prev.styles !== reg.styles ||\n      prev.isAutoHeight !== reg.isAutoHeight;\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":";;;;;;;;;AAgCA,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;AAoB9B,MAVE,CAAC,QACD,KAAK,YAAY,IAAI,WACrB,KAAK,gBAAgB,IAAI,eACzB,KAAK,gBAAgB,IAAI,eACzB,KAAK,kBAAkB,IAAI,iBAC3B,KAAK,gBAAgB,IAAI,eACzB,KAAK,OAAO,IAAI,MAChB,KAAK,WAAW,IAAI,UACpB,KAAK,iBAAiB,IAAI,cAEf;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';\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  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}\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.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\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":";;;;;;;;;AAoCA,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;AAsB9B,MAZE,CAAC,QACD,KAAK,YAAY,IAAI,WACrB,KAAK,gBAAgB,IAAI,eACzB,KAAK,gBAAgB,IAAI,eACzB,KAAK,kBAAkB,IAAI,iBAC3B,KAAK,gBAAgB,IAAI,eACzB,KAAK,OAAO,IAAI,MAChB,KAAK,WAAW,IAAI,UACpB,KAAK,iBAAiB,IAAI,gBAC1B,KAAK,eAAe,IAAI,cACxB,KAAK,eAAe,IAAI,YAEb;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.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | 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.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | 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.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | 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.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | 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/layout.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/sort.ts
 /**
 * Sort layout items based on the compaction type.

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

@@ -2,7 +2,9 @@
 import { Compactor, Layout, LayoutConstraint, LayoutItem, ResizeHandleAxis } from "./grid-core/types.js";
 import { getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "./grid-core/compactors.js";
 import { aspectRatio, boundedX, boundedY, containerBounds, gridBounds, maxSize, minMaxSize, minSize, snapToGrid } from "./grid-core/constraints.js";
-import { BoardCompactType, CubeBoardProps } from "./Board.js";
+import { BoardCompactType, BoardGridLines, BoardInteractionInfo, CubeBoardProps } from "./Board.js";
+import { BreakpointCols, Breakpoints, ResponsiveLayouts } from "./responsive-utils.js";
+import { BoardResponsive, CubeBoardResponsiveProps } from "./BoardResponsive.js";
 import { WidgetTransferInfo } from "./board-context.js";
 import { BoardProvider, CubeBoardProviderProps } from "./BoardProvider.js";
 import { CubeBoardWidgetProps, Widget } from "./Widget.js";
@@ -12,6 +14,7 @@ import * as react from "react";
 declare const Board: react.ForwardRefExoticComponent<CubeBoardProps & react.RefAttributes<HTMLDivElement>> & {
   Widget: typeof Widget;
   Provider: typeof BoardProvider;
+  Responsive: react.ForwardRefExoticComponent<CubeBoardResponsiveProps & react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { Board };

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

@@ -1,14 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aa1b153 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c26fe9d | Cube Dev Team */
 import { getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "./grid-core/compactors.js";
 import { aspectRatio, boundedX, boundedY, containerBounds, gridBounds, maxSize, minMaxSize, minSize, snapToGrid } from "./grid-core/constraints.js";
 import { BoardProvider } from "./BoardProvider.js";
 import { Board as Board$1 } from "./Board.js";
+import { BoardResponsive } from "./BoardResponsive.js";
 import { Widget } from "./Widget.js";
 
 //#region src/components/layout/Board/index.tsx
 const Board = Object.assign(Board$1, {
 	Widget,
-	Provider: BoardProvider
+	Provider: BoardProvider,
+	Responsive: BoardResponsive
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["BoardBase"],"sources":["../../../../src/components/layout/Board/index.tsx"],"sourcesContent":["import { Board as BoardBase } from './Board';\nimport { BoardProvider } from './BoardProvider';\nimport { Widget } from './Widget';\n\nconst Board = Object.assign(BoardBase, {\n  Widget,\n  Provider: BoardProvider,\n});\n\nexport { Board };\nexport { BoardProvider };\nexport { Widget as BoardWidget };\n\nexport type { CubeBoardProps, BoardCompactType } from './Board';\nexport type { CubeBoardWidgetProps } from './Widget';\nexport type { CubeBoardProviderProps } from './BoardProvider';\nexport type { WidgetTransferInfo } from './board-context';\n\nexport type {\n  Layout,\n  LayoutItem,\n  ResizeHandleAxis,\n  Compactor,\n  LayoutConstraint,\n  PositionParams,\n} from './grid-core';\n\nexport {\n  verticalCompactor,\n  horizontalCompactor,\n  noCompactor,\n  getCompactor,\n  gridBounds,\n  minMaxSize,\n  containerBounds,\n  boundedX,\n  boundedY,\n  aspectRatio,\n  snapToGrid,\n  minSize,\n  maxSize,\n} from './grid-core';\n"],"mappings":";;;;;;;;AAIA,MAAM,QAAQ,OAAO,OAAOA,SAAW;CACrC;CACA,UAAU;CACX,CAAC"}
+{"version":3,"file":"index.js","names":["BoardBase"],"sources":["../../../../src/components/layout/Board/index.tsx"],"sourcesContent":["import { Board as BoardBase } from './Board';\nimport { BoardProvider } from './BoardProvider';\nimport { BoardResponsive } from './BoardResponsive';\nimport { Widget } from './Widget';\n\nconst Board = Object.assign(BoardBase, {\n  Widget,\n  Provider: BoardProvider,\n  Responsive: BoardResponsive,\n});\n\nexport { Board };\nexport { BoardProvider };\nexport { BoardResponsive };\nexport { Widget as BoardWidget };\n\nexport type {\n  CubeBoardProps,\n  BoardCompactType,\n  BoardGridLines,\n  BoardInteractionInfo,\n} from './Board';\nexport type { CubeBoardResponsiveProps } from './BoardResponsive';\nexport type { CubeBoardWidgetProps } from './Widget';\nexport type { CubeBoardProviderProps } from './BoardProvider';\nexport type { WidgetTransferInfo } from './board-context';\nexport type {\n  Breakpoints as BoardBreakpoints,\n  BreakpointCols as BoardBreakpointCols,\n  ResponsiveLayouts as BoardResponsiveLayouts,\n} from './responsive-utils';\n\nexport type {\n  Layout,\n  LayoutItem,\n  ResizeHandleAxis,\n  Compactor,\n  LayoutConstraint,\n  PositionParams,\n} from './grid-core';\n\nexport {\n  verticalCompactor,\n  horizontalCompactor,\n  noCompactor,\n  getCompactor,\n  gridBounds,\n  minMaxSize,\n  containerBounds,\n  boundedX,\n  boundedY,\n  aspectRatio,\n  snapToGrid,\n  minSize,\n  maxSize,\n} from './grid-core';\n"],"mappings":";;;;;;;;;AAKA,MAAM,QAAQ,OAAO,OAAOA,SAAW;CACrC;CACA,UAAU;CACV,YAAY;CACb,CAAC"}

package/dist/components/layout/Board/responsive-utils.d.ts

@@ -0,0 +1,13 @@
+
+import { LayoutItem } from "./grid-core/types.js";
+
+//#region src/components/layout/Board/responsive-utils.d.ts
+/** Map of breakpoint name -> minimum container width (px). */
+type Breakpoints = Record<string, number>;
+/** Map of breakpoint name -> column count. */
+type BreakpointCols = Record<string, number>;
+/** Map of breakpoint name -> layout. */
+type ResponsiveLayouts = Record<string, LayoutItem[]>;
+//#endregion
+export { BreakpointCols, Breakpoints, ResponsiveLayouts };
+//# sourceMappingURL=responsive-utils.d.ts.map