@cube-dev/ui-kit 0.143.1 → 0.144.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Board.js","names":[],"sources":["../../../../src/components/layout/Board/Board.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport {\n  BoardEntry,\n  BoardMetrics,\n  BoardMetricsContext,\n  useBoardHost,\n  useBoardMetrics,\n  useBoardRegistry,\n} from './board-context';\nimport { BoardProvider } from './BoardProvider';\nimport {\n  applySizeConstraints,\n  bottom,\n  calcGridColWidth,\n  calcGridItemPosition,\n  calcWH,\n  clamp,\n  cloneLayout,\n  Compactor,\n  CompactType,\n  correctBounds,\n  defaultConstraints,\n  getAllCollisions,\n  getCompactor,\n  getLayoutItem,\n  LayoutConstraint,\n  LayoutItem,\n  modifyLayout,\n  Position,\n  PositionParams,\n  ResizeHandleAxis,\n} from './grid-core';\nimport { useBoardLayout } from './use-board-layout';\nimport { ResizePhase, WidgetHost } from './WidgetHost';\n\nconst BoardElement = tasty({\n  qa: 'Board',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    width: '100%',\n    flexGrow: 1,\n    minHeight: '0',\n    fill: '#clear',\n    boxSizing: 'border-box',\n  },\n});\n\nconst ContentLayer = tasty({\n  styles: {\n    position: 'absolute',\n    inset: 0,\n  },\n});\n\nconst PlaceholderElement = tasty({\n  qa: 'BoardPlaceholder',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    fill: '#purple.10',\n    radius: '1cr',\n    border: '#purple.40',\n    zIndex: 2,\n    pointerEvents: 'none',\n    transition: 'transform 80ms linear, width 80ms linear, height 80ms linear',\n    boxSizing: 'border-box',\n  },\n});\n\n// Grid overlay drawn behind the widgets. Each snap cell is painted as a faint\n// block (column stripes intersected with a row-band alpha mask); the margin gaps\n// between cells stay transparent. The element is positioned as an explicit\n// rectangle inset by the board's resolved padding and sized to the grid content\n// so the padding reads as a symmetric frame on every edge. Its size, position\n// and gradients come from the board's position params via inline `style`. The\n// fill uses the `#border` token (via its CSS var) so it adapts to the scheme.\nconst GridOverlayElement = tasty({\n  qa: 'BoardGridOverlay',\n  styles: {\n    position: 'absolute',\n    zIndex: 0,\n    pointerEvents: 'none',\n    boxSizing: 'border-box',\n    opacity: '.5',\n  },\n});\n\n/**\n * Lower bound for the reduced row height used by an aligned nested board, so a\n * very short container can never collapse its rows to zero.\n */\nconst MIN_ALIGNED_ROW_HEIGHT = 24;\n\nexport type BoardCompactType = 'vertical' | 'horizontal' | 'free' | null;\n\n/**\n * Payload passed to the drag/resize lifecycle callbacks. `layout` is the board's\n * current layout at the moment the callback fires, `item` is the affected item\n * (falls back to `oldItem` if the item just left this board via a cross-board\n * transfer), `oldItem` is that item as it was when the gesture started, and\n * `placeholder` is the current drop-slot preview (if any).\n */\nexport interface BoardInteractionInfo {\n  layout: LayoutItem[];\n  item: LayoutItem;\n  oldItem: LayoutItem;\n  placeholder: LayoutItem | null;\n}\n\n/** Visibility of the internal grid-line overlay. */\nexport type BoardGridLines = boolean | 'drag';\n\nexport interface CubeBoardProps\n  extends Omit<\n      AllBaseProps,\n      'children' | 'onDragStart' | 'onDrag' | 'onResize'\n    >,\n    Omit<ContainerStyleProps, 'margin'> {\n  /** Stable board id (used for cross-board drag). Auto-generated if omitted. */\n  id?: string;\n  /** Controlled layout. */\n  layout?: LayoutItem[];\n  /** Initial layout for uncontrolled usage. */\n  defaultLayout?: LayoutItem[];\n  onLayoutChange?: (layout: LayoutItem[]) => void;\n  /** Called when a drag gesture starts. */\n  onDragStart?: (info: BoardInteractionInfo) => void;\n  /** Called on every step of a drag gesture. */\n  onDrag?: (info: BoardInteractionInfo) => void;\n  /** Called when a drag gesture ends (after the layout is committed). */\n  onDragStop?: (info: BoardInteractionInfo) => void;\n  /** Called when a resize gesture starts. */\n  onResizeStart?: (info: BoardInteractionInfo) => void;\n  /** Called on every step of a resize gesture. */\n  onResize?: (info: BoardInteractionInfo) => void;\n  /** Called when a resize gesture ends (after the layout is committed). */\n  onResizeStop?: (info: BoardInteractionInfo) => void;\n  /** Number of columns. @default 12 */\n  cols?: number;\n  /** Row height in pixels. @default 100 */\n  rowHeight?: number;\n  /** [horizontal, vertical] margin between widgets in pixels. @default [8, 8] */\n  margin?: [number, number];\n  /** [horizontal, vertical] padding inside the board. Defaults to `margin`. */\n  containerPadding?: [number, number];\n  /** Maximum number of rows. @default Infinity */\n  maxRows?: number;\n  /**\n   * Compaction behavior. `'vertical'` / `'horizontal'` reflow widgets to remove\n   * gaps; `'free'` places each widget exactly where dropped and never pushes its\n   * neighbours (pair with `allowOverlap` to let widgets stack, otherwise moving\n   * onto an occupied cell is blocked); `null` disables compaction but still\n   * resolves collisions the legacy react-grid-layout way. @default 'vertical'\n   */\n  compact?: BoardCompactType;\n  /** Allow widgets to overlap. @default false */\n  allowOverlap?: boolean;\n  /** Block movement into occupied cells instead of pushing. @default false */\n  preventCollision?: boolean;\n  /** Enable dragging for all widgets. @default true */\n  isDraggable?: boolean;\n  /** Enable resizing for all widgets. @default true */\n  isResizable?: boolean;\n  /** Whether this board accepts widgets dropped from other boards. @default true */\n  isDroppable?: boolean;\n  /** Which resize handles to show. @default ['se'] */\n  resizeHandles?: ResizeHandleAxis[];\n  /**\n   * CSS selector for elements that must not start a pointer drag (e.g. form\n   * controls inside a widget: `\"input,textarea,button,a,.no-drag\"`). Keyboard\n   * moves are unaffected. Can be overridden per widget on `Board.Widget`.\n   */\n  dragCancel?: string;\n  /**\n   * CSS selector for the only elements from which a pointer drag may start.\n   * Can be overridden per widget on `Board.Widget`.\n   */\n  dragHandle?: string;\n  /**\n   * Show grid lines behind the widgets. `true` always shows them, `'drag'`\n   * shows them only while a widget is being dragged or resized, `false` never.\n   * @default false\n   */\n  showGridLines?: BoardGridLines;\n  /**\n   * Align this board's grid with an ancestor `Board`'s layout. Only takes\n   * effect when the board is nested inside another `Board`'s widget. When set,\n   * the board inherits the parent's column pitch (deriving its own column count\n   * from its measured width so cells stay parent-sized) and inherits the\n   * parent's row height as a target, shrinking rows slightly when needed to fit\n   * the height the container widget grants it. @default false\n   */\n  isAligned?: boolean;\n  /** Grid/item layout constraints. */\n  constraints?: LayoutConstraint[];\n  /**\n   * Explicit container width in pixels. When provided, disables automatic width\n   * measurement (useful for SSR and tests).\n   */\n  width?: number;\n  children?: ReactNode;\n}\n\nfunction compactTypeToCore(compact: BoardCompactType): CompactType {\n  if (compact === 'free') return null;\n  return compact;\n}\n\nfunction BoardInner(\n  props: CubeBoardProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    id: providedId,\n    layout: controlledLayout,\n    defaultLayout,\n    onLayoutChange,\n    onDragStart,\n    onDrag,\n    onDragStop,\n    onResizeStart,\n    onResize: onResizeProp,\n    onResizeStop,\n    cols = 12,\n    rowHeight = 100,\n    margin = [8, 8],\n    containerPadding,\n    maxRows = Infinity,\n    compact = 'vertical',\n    allowOverlap = false,\n    preventCollision = false,\n    isDraggable = true,\n    isResizable = true,\n    isDroppable = true,\n    resizeHandles = ['se'],\n    dragCancel,\n    dragHandle,\n    showGridLines = false,\n    isAligned = false,\n    constraints,\n    width: providedWidth,\n    children,\n    ...otherProps\n  } = props;\n\n  const registry = useBoardRegistry()!;\n  const parentMetrics = useBoardMetrics();\n  const host = useBoardHost();\n  const aligned = isAligned && !!parentMetrics;\n  const generatedId = useId();\n  const boardId = providedId ?? generatedId;\n\n  const containerRef = useCombinedRefs(ref);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = useState<number>(0);\n  // Rendered height is only needed for aligned nested boards (to fit rows into\n  // the space the container grants). It never drives the board's own height, so\n  // measuring it cannot create a feedback loop.\n  const [measuredHeight, setMeasuredHeight] = useState<number>(0);\n  const width = providedWidth ?? measuredWidth;\n\n  const onResizeContainer = useEvent(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    // A hidden container (e.g. the board inside an inactive tab after a\n    // spring-loaded tab switch) reports 0. Keep the last non-zero measurement so\n    // the board stays \"ready\" and keeps its widget hosts mounted while briefly\n    // hidden. Otherwise the board would render nothing, unmounting the widget\n    // that owns an in-flight drag gesture and stranding the drag (React Aria's\n    // `useMove` tears down its listeners on unmount, so the drop never fires).\n    const nextWidth = el.offsetWidth;\n    const nextHeight = el.offsetHeight;\n    if (nextWidth > 0) setMeasuredWidth(nextWidth);\n    if (nextHeight > 0) setMeasuredHeight(nextHeight);\n  });\n  useResizeObserver({ ref: containerRef, onResize: onResizeContainer });\n  useEffect(() => {\n    if (providedWidth == null) {\n      onResizeContainer();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [providedWidth]);\n\n  const {\n    layout,\n    layoutRef,\n    placeholder,\n    placeholderRef,\n    setPlaceholder,\n    applyLayout,\n  } = useBoardLayout({\n    layout: controlledLayout,\n    defaultLayout,\n    onLayoutChange,\n  });\n\n  // Re-render when any widget's registered content/config changes.\n  useSyncExternalStore(registry.store.subscribe, registry.store.getVersion);\n\n  // In aligned mode the board inherits the parent's gap so widget edges line up\n  // with the surrounding layout; otherwise it uses its own `margin`.\n  const effectiveMargin: readonly [number, number] = aligned\n    ? parentMetrics!.margin\n    : margin;\n  // The board keeps its own padding (it sits inside the container's chrome);\n  // when unspecified it defaults to the effective gap.\n  const resolvedPadding: readonly [number, number] =\n    containerPadding ?? effectiveMargin;\n\n  const rows = Math.max(\n    bottom(layout),\n    placeholder ? placeholder.y + placeholder.h : 0,\n  );\n\n  // Derive the aligned column count so each column keeps the parent's pixel\n  // pitch: as the container widget is resized, columns are added/removed rather\n  // than stretched. `containerWidth` is then back-solved so `calcGridColWidth`\n  // returns exactly the parent's column width.\n  const parentColWidth = aligned ? parentMetrics!.colWidth : 0;\n  const alignedCols =\n    aligned && width > 0\n      ? Math.max(\n          1,\n          Math.floor(\n            (width - resolvedPadding[0] * 2 + effectiveMargin[0]) /\n              (parentColWidth + effectiveMargin[0]),\n          ),\n        )\n      : cols;\n  const effectiveCols = aligned ? alignedCols : cols;\n  const effectiveContainerWidth = aligned\n    ? parentColWidth * effectiveCols +\n      effectiveMargin[0] * Math.max(0, effectiveCols - 1) +\n      resolvedPadding[0] * 2\n    : width;\n\n  // Row height inherits the parent's as the target, but shrinks (never grows\n  // beyond it) so the board's rows fit the height the container grants. When\n  // the height is unbounded/unmeasured, it stays at the parent's row height.\n  const parentRowHeight = aligned ? parentMetrics!.rowHeight : rowHeight;\n  const effectiveRowHeight =\n    aligned && rows > 0 && measuredHeight > 0\n      ? clamp(\n          (measuredHeight -\n            Math.max(0, rows - 1) * effectiveMargin[1] -\n            resolvedPadding[1] * 2) /\n            rows,\n          MIN_ALIGNED_ROW_HEIGHT,\n          parentRowHeight,\n        )\n      : parentRowHeight;\n\n  const positionParams = useMemo<PositionParams>(\n    () => ({\n      margin: effectiveMargin,\n      containerPadding: resolvedPadding,\n      containerWidth: effectiveContainerWidth,\n      cols: effectiveCols,\n      rowHeight: effectiveRowHeight,\n      maxRows,\n    }),\n    [\n      effectiveMargin[0],\n      effectiveMargin[1],\n      resolvedPadding[0],\n      resolvedPadding[1],\n      effectiveContainerWidth,\n      effectiveCols,\n      effectiveRowHeight,\n      maxRows,\n    ],\n  );\n\n  // 'free' means no compaction (nothing is pushed up/left or recompacted) AND a\n  // dragged widget never pushes or swaps its neighbours: it is placed exactly\n  // where dropped. Without `allowOverlap` a move onto an occupied cell is\n  // blocked (the widget stays at its last free spot); with `allowOverlap`\n  // widgets may stack. The explicit `preventCollision` prop still applies to the\n  // compacting modes (`vertical` / `horizontal`) and to the legacy `null` mode.\n  const compactor = useMemo<Compactor>(\n    () =>\n      getCompactor(\n        compactTypeToCore(compact),\n        allowOverlap,\n        compact === 'free' ? !allowOverlap : preventCollision,\n      ),\n    [compact, allowOverlap, preventCollision],\n  );\n\n  const resolvedConstraints = constraints ?? defaultConstraints;\n\n  const computedHeight =\n    rows > 0\n      ? rows * effectiveRowHeight +\n        Math.max(0, rows - 1) * effectiveMargin[1] +\n        resolvedPadding[1] * 2\n      : effectiveRowHeight;\n  // An aligned board fills the height the container grants it, so it reports its\n  // measured height; otherwise it reports the height its content needs.\n  const containerHeight =\n    aligned && measuredHeight > 0 ? measuredHeight : computedHeight;\n\n  // Live refs so the stable registry entry always reads current values.\n  const liveRef = useRef({\n    positionParams,\n    compactor,\n    constraints: resolvedConstraints,\n    maxRows,\n    containerHeight,\n    isDroppable,\n  });\n  liveRef.current = {\n    positionParams,\n    compactor,\n    constraints: resolvedConstraints,\n    maxRows,\n    containerHeight,\n    isDroppable,\n  };\n\n  const applyLayoutEvent = useEvent(applyLayout);\n  const setPlaceholderEvent = useEvent(setPlaceholder);\n\n  const entryRef = useRef<BoardEntry | null>(null);\n  if (!entryRef.current) {\n    entryRef.current = {\n      id: boardId,\n      getContentRect: () => contentRef.current?.getBoundingClientRect() ?? null,\n      getContentNode: () => contentRef.current,\n      getPositionParams: () => liveRef.current.positionParams,\n      getConstraints: () => liveRef.current.constraints,\n      getCompactor: () => liveRef.current.compactor,\n      getMaxRows: () => liveRef.current.maxRows,\n      getContainerHeight: () => liveRef.current.containerHeight,\n      getLayout: () => layoutRef.current,\n      applyLayout: (next, commit) => applyLayoutEvent(next, commit),\n      setPlaceholder: (item) => setPlaceholderEvent(item),\n      isDroppable: () => liveRef.current.isDroppable,\n    };\n  }\n\n  useEffect(() => {\n    const entry = entryRef.current!;\n    // Keep the entry's id in sync with the (possibly changed) board id before\n    // registering. The previous effect's cleanup has already removed the old id,\n    // so registering here keys the entry under the current id.\n    entry.id = boardId;\n    return registry.registerBoard(entry);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [boardId]);\n\n  // When the aligned column count changes (the container was resized), reflow\n  // the layout to the new width: clamp items back into bounds and recompact so\n  // nothing overflows the narrower/wider grid.\n  const recompactForCols = useEvent((nextCols: number) => {\n    const corrected = correctBounds(cloneLayout(layoutRef.current), {\n      cols: nextCols,\n    });\n    const compacted = [\n      ...liveRef.current.compactor.compact(corrected, nextCols),\n    ];\n    applyLayoutEvent(compacted, true);\n  });\n  // `null` until the first *measured* aligned column count is established. This\n  // avoids treating the initial zero-width -> measured-width transition as a\n  // column-count change: a board that measures its own width (no explicit\n  // `width` prop) renders first with `width === 0`, so `effectiveCols` falls\n  // back to `cols` and only becomes the derived aligned count once measured.\n  // Seeding the baseline on that first measured value (without committing)\n  // prevents an unsolicited reflow + `onLayoutChange` before the user interacts.\n  const prevAlignedColsRef = useRef<number | null>(null);\n  useEffect(() => {\n    if (!aligned) {\n      // Re-entering aligned mode should re-seed from the next measured value.\n      prevAlignedColsRef.current = null;\n      return;\n    }\n    // Wait for a real width measurement; the fallback-`cols` value that stands\n    // in before measurement is not a meaningful aligned column count.\n    if (width <= 0) return;\n    if (prevAlignedColsRef.current === null) {\n      prevAlignedColsRef.current = effectiveCols;\n      return;\n    }\n    if (prevAlignedColsRef.current === effectiveCols) return;\n    prevAlignedColsRef.current = effectiveCols;\n    recompactForCols(effectiveCols);\n  }, [aligned, width, effectiveCols, recompactForCols]);\n\n  // Natural height this board wants: its rows at the (unshrunk) target row\n  // height. When aligned rows are shrunk to fit a short container, this exceeds\n  // the measured height by the amount the board was squeezed.\n  const naturalHeight =\n    rows > 0\n      ? rows * parentRowHeight +\n        Math.max(0, rows - 1) * effectiveMargin[1] +\n        resolvedPadding[1] * 2\n      : parentRowHeight;\n\n  // Report this aligned board's height deficit to an auto-sizing host so the\n  // host can both grow to fit and pin its resize floor. The value is signed:\n  // positive when the board is squeezed (needs more height), negative when the\n  // container is taller than needed (so the floor can be lowered). The host\n  // never shrinks the widget on its own - it only grows and clamps resizing.\n  const requestHeightDeficit = host?.requestHeightDeficit;\n  useEffect(() => {\n    if (!aligned || !host?.isAutoHeight || !requestHeightDeficit) return;\n    if (measuredHeight <= 0) return;\n    requestHeightDeficit(naturalHeight - measuredHeight);\n  }, [\n    aligned,\n    host?.isAutoHeight,\n    requestHeightDeficit,\n    naturalHeight,\n    measuredHeight,\n  ]);\n\n  // In-board resize orchestration.\n  const resizeStateRef = useRef<{\n    id: string;\n    axis: ResizeHandleAxis;\n    item: LayoutItem;\n    origin: Position;\n    accX: number;\n    accY: number;\n  } | null>(null);\n\n  // Minimum rows each auto-height widget currently needs to fit its content.\n  // Read during resize so a widget can never be dragged shorter than its\n  // content, and used to grow the item when the content needs more room.\n  const autoHeightMinRowsRef = useRef<Record<string, number>>({});\n\n  const handleResize = useEvent(\n    (\n      id: string,\n      axis: ResizeHandleAxis,\n      phase: ResizePhase,\n      dx: number,\n      dy: number,\n    ) => {\n      const pp = liveRef.current.positionParams;\n\n      if (phase === 'start') {\n        const rawItem = getLayoutItem(layoutRef.current, id);\n        if (!rawItem) return;\n        // Layout-item constraints win; otherwise fall back to the ones declared\n        // on the owning `Board.Widget` so `applySizeConstraints` picks them up.\n        const item: LayoutItem = {\n          ...rawItem,\n          constraints:\n            rawItem.constraints ?? registry.store.get(id)?.constraints,\n        };\n        resizeStateRef.current = {\n          id,\n          axis,\n          item: { ...item },\n          origin: calcGridItemPosition(pp, item.x, item.y, item.w, item.h),\n          accX: 0,\n          accY: 0,\n        };\n        setPlaceholder({ ...item });\n        onResizeStart?.({\n          layout: layoutRef.current,\n          item: { ...item },\n          oldItem: { ...item },\n          placeholder: { ...item },\n        });\n        return;\n      }\n\n      const rs = resizeStateRef.current;\n      if (!rs) return;\n\n      if (phase === 'end') {\n        const finalLayout = [...layoutRef.current];\n        applyLayout(finalLayout, true);\n        setPlaceholder(null);\n        onResizeStop?.({\n          layout: finalLayout,\n          item: getLayoutItem(finalLayout, id) ?? rs.item,\n          oldItem: rs.item,\n          placeholder: null,\n        });\n        resizeStateRef.current = null;\n        return;\n      }\n\n      rs.accX += dx;\n      rs.accY += dy;\n\n      const { origin, item, axis: handle } = rs;\n      let newW = origin.width;\n      let newH = origin.height;\n      if (handle.includes('e')) newW = origin.width + rs.accX;\n      if (handle.includes('w')) newW = origin.width - rs.accX;\n      if (handle.includes('s')) newH = origin.height + rs.accY;\n      if (handle.includes('n')) newH = origin.height - rs.accY;\n      newW = Math.max(newW, 8);\n      newH = Math.max(newH, 8);\n\n      const raw = calcWH(pp, newW, newH, item.x, item.y, handle);\n      const constrained = applySizeConstraints(\n        liveRef.current.constraints,\n        item,\n        raw.w,\n        raw.h,\n        handle,\n        {\n          cols: pp.cols,\n          maxRows: liveRef.current.maxRows,\n          containerWidth: pp.containerWidth,\n          containerHeight: liveRef.current.containerHeight,\n          rowHeight: pp.rowHeight,\n          margin: pp.margin,\n          layout: layoutRef.current,\n        },\n      );\n\n      // An auto-height widget cannot be resized shorter than the content it\n      // hosts (a nested board) currently needs, so pin its height to the floor.\n      const floorRows = autoHeightMinRowsRef.current[id] ?? 0;\n      const finalW = constrained.w;\n      const finalH = Math.max(constrained.h, floorRows);\n\n      let x = item.x;\n      let y = item.y;\n      if (handle.includes('w')) x = item.x + item.w - finalW;\n      if (handle.includes('n')) y = item.y + item.h - finalH;\n      x = Math.max(0, x);\n      y = Math.max(0, y);\n\n      let newItem: LayoutItem = {\n        ...item,\n        x,\n        y,\n        w: finalW,\n        h: finalH,\n      };\n\n      // Collision-blocking modes (`free` without `allowOverlap`, or an explicit\n      // `preventCollision`) run a no-op/gap-filling compactor that never\n      // resolves overlaps, so a resize must be blocked here the same way the\n      // drag path blocks a move (`moveElement` reverts on collision). Without\n      // this, growing or moving an edge via a resize handle could push the box\n      // onto an occupied cell. When the new box overlaps a neighbour, revert to\n      // the last committed box for this widget so the gesture stalls at the\n      // last valid size/position instead of overlapping.\n      const compactor = liveRef.current.compactor;\n      if (compactor.preventCollision && !compactor.allowOverlap) {\n        const collides = getAllCollisions(layoutRef.current, newItem).some(\n          (other) => other.i !== id,\n        );\n        if (collides) {\n          const lastValid = getLayoutItem(layoutRef.current, id);\n          if (lastValid) newItem = { ...lastValid };\n        }\n      }\n\n      const working = modifyLayout(layoutRef.current, newItem);\n      const compacted = [...compactor.compact(working, pp.cols)];\n      applyLayout(compacted, false);\n      const nextPlaceholder = getLayoutItem(compacted, id) ?? newItem;\n      setPlaceholder(nextPlaceholder);\n      onResizeProp?.({\n        layout: compacted,\n        item: getLayoutItem(compacted, id) ?? newItem,\n        oldItem: rs.item,\n        placeholder: nextPlaceholder,\n      });\n    },\n  );\n\n  // Record an auto-height widget's needed rows. Grow the item when its content\n  // needs more height (only ever increases); the stored value is also the\n  // resize floor enforced in `handleResize`.\n  const handleAutoHeight = useEvent((id: string, neededRows: number) => {\n    autoHeightMinRowsRef.current[id] = neededRows;\n    const current = getLayoutItem(layoutRef.current, id);\n    if (!current || neededRows <= current.h) return;\n    // While a drag or resize gesture is in flight the layout is transient - the\n    // registry (drag) and `handleResize` write uncommitted previews and commit\n    // only on drop / release. Growing an auto-height widget here with\n    // `commit: true` would fire `onLayoutChange` mid-gesture and persist the\n    // in-flight positions of the widget being moved. Skip the grow-commit; the\n    // floor ref is already updated above (so `handleResize` still respects it),\n    // and the deficit effect re-fires once the gesture settles.\n    if (registry.dragState || resizeStateRef.current) return;\n    const pp = liveRef.current.positionParams;\n    const working = modifyLayout(layoutRef.current, {\n      ...current,\n      h: neededRows,\n    });\n    const compacted = [...liveRef.current.compactor.compact(working, pp.cols)];\n    applyLayout(compacted, true);\n  });\n\n  // The dragged item captured at gesture start, so drag callbacks can report the\n  // original position throughout (and after a cross-board transfer removes the\n  // item from this board's layout).\n  const dragOldItemRef = useRef<LayoutItem | null>(null);\n\n  const handleDragLifecycle = useEvent((id: string, phase: ResizePhase) => {\n    const currentLayout = layoutRef.current;\n    const liveItem = getLayoutItem(currentLayout, id);\n\n    if (phase === 'start') {\n      dragOldItemRef.current = liveItem ? { ...liveItem } : null;\n    }\n    const oldItem = dragOldItemRef.current ?? liveItem;\n    if (!oldItem) return;\n    const item = liveItem ?? oldItem;\n\n    const info: BoardInteractionInfo = {\n      layout: currentLayout,\n      item,\n      oldItem,\n      // Read the live ref, not render-time state: the registry calls\n      // `setPlaceholder` synchronously right before this fires, and that only\n      // schedules a re-render, so `placeholder` state still holds the previous\n      // value (or a stale preview after the drop clears it to `null`).\n      placeholder: placeholderRef.current,\n    };\n    if (phase === 'start') onDragStart?.(info);\n    else if (phase === 'move') onDrag?.(info);\n    else {\n      onDragStop?.(info);\n      dragOldItemRef.current = null;\n    }\n  });\n\n  const styles: Styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const dragState = registry.dragState;\n  const ready = width > 0;\n\n  const placeholderStyle = placeholder\n    ? (() => {\n        const pos = calcGridItemPosition(\n          positionParams,\n          placeholder.x,\n          placeholder.y,\n          placeholder.w,\n          placeholder.h,\n        );\n        return {\n          transform: `translate(${pos.left}px, ${pos.top}px)`,\n          width: `${pos.width}px`,\n          height: `${pos.height}px`,\n        };\n      })()\n    : null;\n\n  const showPlaceholder = placeholder && placeholderStyle;\n\n  const gridLinesVisible =\n    showGridLines === true ||\n    (showGridLines === 'drag' && (!!dragState || !!placeholder));\n  const gridOverlayStyle = gridLinesVisible\n    ? (() => {\n        const colWidth = calcGridColWidth(positionParams);\n        const rowHeightPx = positionParams.rowHeight;\n        // A grid with margins has real gaps between cells, so any line-based\n        // overlay either misses a cell edge (single line at the cell pitch) or\n        // shows a double line in every gap (a line at both edges). Instead,\n        // paint each snap cell as a faint block sized exactly `colWidth` x\n        // `rowHeightPx` with the margin gaps left transparent: the blocks line\n        // up 1:1 with the drop-zone placeholder and there are no lines to\n        // double. Column stripes form the background; a row-band alpha mask\n        // intersects them into cells.\n        const pitchX = colWidth + effectiveMargin[0];\n        const pitchY = rowHeightPx + effectiveMargin[1];\n        // Position the overlay as an explicit rectangle inset by the board's\n        // resolved padding and sized to exactly cover the grid content (cols x\n        // rows). This makes the padding a symmetric frame on all four edges (the\n        // previous `inset: 0` + top-left-anchored repeat left the padding\n        // unvisualized on the right/bottom and inside any extra min-height) and\n        // lets the cell pattern tile from the overlay's own origin.\n        const padX = resolvedPadding[0];\n        const padY = resolvedPadding[1];\n        const gridWidth = Math.max(0, effectiveContainerWidth - padX * 2);\n        const gridHeight =\n          rows > 0 ? rows * rowHeightPx + (rows - 1) * effectiveMargin[1] : 0;\n        const fill = 'var(--border-color)';\n        const columns = `repeating-linear-gradient(to right, ${fill} 0, ${fill} ${colWidth}px, transparent ${colWidth}px, transparent ${pitchX}px)`;\n        const rowsGrad = `repeating-linear-gradient(to bottom, #000 0, #000 ${rowHeightPx}px, transparent ${rowHeightPx}px, transparent ${pitchY}px)`;\n        return {\n          left: `${padX}px`,\n          top: `${padY}px`,\n          width: `${gridWidth}px`,\n          height: `${gridHeight}px`,\n          backgroundImage: columns,\n          backgroundPosition: '0 0',\n          backgroundRepeat: 'repeat',\n          maskImage: rowsGrad,\n          WebkitMaskImage: rowsGrad,\n          maskPosition: '0 0',\n          WebkitMaskPosition: '0 0',\n          maskRepeat: 'repeat',\n          WebkitMaskRepeat: 'repeat',\n        };\n      })()\n    : null;\n\n  // Metrics this board exposes to any aligned boards nested inside its widgets.\n  const boardMetrics = useMemo<BoardMetrics>(\n    () => ({\n      colWidth: calcGridColWidth(positionParams),\n      rowHeight: positionParams.rowHeight,\n      margin: positionParams.margin,\n      containerPadding: positionParams.containerPadding,\n    }),\n    [positionParams],\n  );\n\n  return (\n    <BoardMetricsContext.Provider value={boardMetrics}>\n      <BoardElement\n        {...filterBaseProps(otherProps, { eventProps: true })}\n        ref={containerRef}\n        styles={styles}\n        // Non-aligned: use min-height (not a fixed height) so the board\n        // auto-sizes to its content by default but can still grow to fill a\n        // taller parent. Widgets are absolutely positioned, so growing never\n        // shifts them, and the content layer (inset: 0) always covers the full\n        // board -> the whole board is droppable. Aligned: omit the inline height\n        // so the board fills (and is bounded by) the space the container grants,\n        // which is what drives the reduced row height.\n        style={aligned ? undefined : { minHeight: `${containerHeight}px` }}\n        mods={{\n          dragging: !!dragState,\n          'drop-target': dragState?.currentBoardId === boardId,\n        }}\n      >\n        <ContentLayer ref={contentRef}>\n          {ready && gridOverlayStyle ? (\n            <GridOverlayElement aria-hidden=\"true\" style={gridOverlayStyle} />\n          ) : null}\n          {ready\n            ? layout.map((item) => {\n                const registration = registry.store.get(item.i);\n                const widgetDraggable =\n                  isDraggable &&\n                  registration?.isDraggable !== false &&\n                  item.isDraggable !== false &&\n                  !item.static;\n                const widgetResizable =\n                  isResizable &&\n                  registration?.isResizable !== false &&\n                  item.isResizable !== false &&\n                  !item.static;\n                const handles =\n                  item.resizeHandles ??\n                  registration?.resizeHandles ??\n                  resizeHandles;\n                const widgetDragCancel = registration?.dragCancel ?? dragCancel;\n                const widgetDragHandle = registration?.dragHandle ?? dragHandle;\n\n                return (\n                  <WidgetHost\n                    key={item.i}\n                    boardId={boardId}\n                    item={item}\n                    positionParams={positionParams}\n                    registration={registration}\n                    isDraggable={widgetDraggable}\n                    isResizable={widgetResizable}\n                    resizeHandles={handles}\n                    dragCancel={widgetDragCancel}\n                    dragHandle={widgetDragHandle}\n                    registry={registry}\n                    dragState={dragState}\n                    onResize={handleResize}\n                    onAutoHeight={handleAutoHeight}\n                    onDragLifecycle={handleDragLifecycle}\n                  />\n                );\n              })\n            : null}\n          {showPlaceholder ? (\n            <PlaceholderElement aria-hidden=\"true\" style={placeholderStyle!} />\n          ) : null}\n        </ContentLayer>\n        {children}\n      </BoardElement>\n    </BoardMetricsContext.Provider>\n  );\n}\n\nconst BoardInnerForwarded = forwardRef(BoardInner);\n\n/**\n * A draggable and resizable widget grid. Widgets are declared with\n * `Board.Widget` and positioned via a `layout`. Wrap multiple boards in a\n * `BoardProvider` to enable dragging widgets between them.\n */\nexport const Board = forwardRef(function Board(\n  props: CubeBoardProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const existingRegistry = useBoardRegistry();\n\n  if (existingRegistry) {\n    return <BoardInnerForwarded {...props} ref={ref} />;\n  }\n\n  return (\n    <BoardProvider>\n      <BoardInnerForwarded {...props} ref={ref} />\n    </BoardProvider>\n  );\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+
+import { WidgetTransferInfo } from "./board-context.js";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/layout/Board/BoardProvider.d.ts
+interface CubeBoardProviderProps {
+  children?: ReactNode;
+  /**
+   * Fired when a widget is dropped from one board into another. Use it to move
+   * the widget's `Board.Widget` declaration into the destination container when
+   * the source container can unmount (e.g. an inactive `Tab`).
+   */
+  onWidgetTransfer?: (info: WidgetTransferInfo) => void;
+}
+/**
+ * Shares a single drag context across multiple `Board`s so widgets can be
+ * dragged from one board to another (including out of a nested board into its
+ * parent). Also hosts the fixed drag overlay used to render the dragged widget
+ * above everything, so ancestor `overflow: hidden` never clips it.
+ *
+ * A standalone `Board` provides its own registry automatically; wrap several
+ * boards in a `BoardProvider` only when you need cross-board dragging.
+ */
+declare function BoardProvider(props: CubeBoardProviderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BoardProvider, CubeBoardProviderProps };
+//# sourceMappingURL=BoardProvider.d.ts.map

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

@@ -0,0 +1,47 @@
+/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+import { BoardDragActiveContext, BoardRegistryContext } from "./board-context.js";
+import { useBoardRegistry } from "./use-board-registry.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/Board/BoardProvider.tsx
+const OverlayElement = tasty({
+	qa: "BoardDragOverlay",
+	styles: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		zIndex: 999999,
+		pointerEvents: "none",
+		overflow: "visible"
+	}
+});
+/**
+* Shares a single drag context across multiple `Board`s so widgets can be
+* dragged from one board to another (including out of a nested board into its
+* parent). Also hosts the fixed drag overlay used to render the dragged widget
+* above everything, so ancestor `overflow: hidden` never clips it.
+*
+* A standalone `Board` provides its own registry automatically; wrap several
+* boards in a `BoardProvider` only when you need cross-board dragging.
+*/
+function BoardProvider(props) {
+	const { children, onWidgetTransfer } = props;
+	const registry = useBoardRegistry({ onWidgetTransfer });
+	return /* @__PURE__ */ jsx(BoardRegistryContext.Provider, {
+		value: registry,
+		children: /* @__PURE__ */ jsxs(BoardDragActiveContext.Provider, {
+			value: registry.dragState != null,
+			children: [children, /* @__PURE__ */ jsx(OverlayElement, {
+				ref: registry.overlayRef,
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+
+//#endregion
+export { BoardProvider };
+//# sourceMappingURL=BoardProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoardProvider.js","names":[],"sources":["../../../../src/components/layout/Board/BoardProvider.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport {\n  BoardDragActiveContext,\n  BoardRegistryContext,\n  WidgetTransferInfo,\n} from './board-context';\nimport { useBoardRegistry } from './use-board-registry';\n\nconst OverlayElement = tasty({\n  qa: 'BoardDragOverlay',\n  styles: {\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    zIndex: 999999,\n    pointerEvents: 'none',\n    overflow: 'visible',\n  },\n});\n\nexport interface CubeBoardProviderProps {\n  children?: ReactNode;\n  /**\n   * Fired when a widget is dropped from one board into another. Use it to move\n   * the widget's `Board.Widget` declaration into the destination container when\n   * the source container can unmount (e.g. an inactive `Tab`).\n   */\n  onWidgetTransfer?: (info: WidgetTransferInfo) => void;\n}\n\n/**\n * Shares a single drag context across multiple `Board`s so widgets can be\n * dragged from one board to another (including out of a nested board into its\n * parent). Also hosts the fixed drag overlay used to render the dragged widget\n * above everything, so ancestor `overflow: hidden` never clips it.\n *\n * A standalone `Board` provides its own registry automatically; wrap several\n * boards in a `BoardProvider` only when you need cross-board dragging.\n */\nexport function BoardProvider(props: CubeBoardProviderProps) {\n  const { children, onWidgetTransfer } = props;\n  const registry = useBoardRegistry({ onWidgetTransfer });\n\n  return (\n    <BoardRegistryContext.Provider value={registry}>\n      <BoardDragActiveContext.Provider value={registry.dragState != null}>\n        {children}\n        <OverlayElement ref={registry.overlayRef} aria-hidden=\"true\" />\n      </BoardDragActiveContext.Provider>\n    </BoardRegistryContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,eAAe;EACf,UAAU;EACX;CACF,CAAC;;;;;;;;;;AAqBF,SAAgB,cAAc,OAA+B;CAC3D,MAAM,EAAE,UAAU,qBAAqB;CACvC,MAAM,WAAW,iBAAiB,EAAE,kBAAkB,CAAC;AAEvD,QACE,oBAAC,qBAAqB;EAAS,OAAO;YACpC,qBAAC,uBAAuB;GAAS,OAAO,SAAS,aAAa;cAC3D,UACD,oBAAC;IAAe,KAAK,SAAS;IAAY,eAAY;KAAS;IAC/B;GACJ"}

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

@@ -0,0 +1,52 @@
+
+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;
+  /**
+   * Called when the measured container width changes, with the current column
+   * count for the active breakpoint. Mirrors react-grid-layout's
+   * `WidthProvider` `onWidthChange`. Not fired while width is unmeasured (0) or
+   * when an explicit `width` is provided.
+   */
+  onWidthChange?: (width: number, 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,101 @@
+/** @license MIT | @cube-dev/ui-kit v0.144.0 | 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, onWidthChange, 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 widthForBreakpoint = providedWidth ?? measuredWidth;
+	const activeBreakpoint = forcedBreakpoint ?? getBreakpointFromWidth(breakpoints, widthForBreakpoint);
+	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]);
+	const onWidthChangeEvent = useEvent(() => onWidthChange?.(widthForBreakpoint, activeCols));
+	useEffect(() => {
+		if (providedWidth != null) return;
+		if (measuredWidth <= 0) return;
+		onWidthChangeEvent();
+	}, [measuredWidth, activeCols]);
+	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   * Called when the measured container width changes, with the current column\n   * count for the active breakpoint. Mirrors react-grid-layout's\n   * `WidthProvider` `onWidthChange`. Not fired while width is unmeasured (0) or\n   * when an explicit `width` is provided.\n   */\n  onWidthChange?: (width: number, 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    onWidthChange,\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  // Report width changes (measured widths only; an explicit `width` disables\n  // measurement, and an unmeasured board reports 0 which we skip).\n  const onWidthChangeEvent = useEvent(() =>\n    onWidthChange?.(widthForBreakpoint, activeCols),\n  );\n  useEffect(() => {\n    if (providedWidth != null) return;\n    if (measuredWidth <= 0) return;\n    onWidthChangeEvent();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [measuredWidth, activeCols]);\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":";;;;;;;;;;;AAkEA,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,eACA,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;CAErB,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,mBACJ,oBAAoB,uBAAuB,aAAa,mBAAmB;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;CAItB,MAAM,qBAAqB,eACzB,gBAAgB,oBAAoB,WAAW,CAChD;AACD,iBAAgB;AACd,MAAI,iBAAiB,KAAM;AAC3B,MAAI,iBAAiB,EAAG;AACxB,sBAAoB;IAEnB,CAAC,eAAe,WAAW,CAAC;AAS/B,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

@@ -0,0 +1,49 @@
+
+import { LayoutConstraint, ResizeHandleAxis } from "./grid-core/types.js";
+import { Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+
+//#region src/components/layout/Board/Widget.d.ts
+interface CubeBoardWidgetProps {
+  /** Unique id, must match the `i` of a layout item in a `Board`. */
+  id: string;
+  /** Widget content. */
+  children?: ReactNode;
+  /** Disable dragging for this widget. */
+  isDraggable?: boolean;
+  /** Disable resizing for this widget. */
+  isResizable?: boolean;
+  /** Which resize handles to show (overrides the board default). */
+  resizeHandles?: ResizeHandleAxis[];
+  /** Per-widget layout constraints. */
+  constraints?: LayoutConstraint[];
+  /** Test id applied to the rendered widget element. */
+  qa?: string;
+  /** Style overrides applied to the rendered widget element. */
+  styles?: Styles;
+  /**
+   * Grow this widget's height in its board to fit its content (only ever
+   * increases). Pair with a nested `Board isAligned` to make the container
+   * 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
+ * are performed by the owning `Board` (the component itself renders nothing),
+ * which is what allows a widget to be transferred between boards.
+ */
+declare function Widget(props: CubeBoardWidgetProps): null;
+//#endregion
+export { CubeBoardWidgetProps, Widget };
+//# sourceMappingURL=Widget.d.ts.map

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

@@ -0,0 +1,42 @@
+/** @license MIT | @cube-dev/ui-kit v0.144.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { useBoardRegistry } from "./board-context.js";
+import { useEffect, useRef } from "react";
+
+//#region src/components/layout/Board/Widget.tsx
+/**
+* Declares a widget's content and per-widget options. Rendering and positioning
+* are performed by the owning `Board` (the component itself renders nothing),
+* which is what allows a widget to be transferred between boards.
+*/
+function Widget(props) {
+	const { id, children, isDraggable, isResizable, resizeHandles, constraints, qa, styles, isAutoHeight, dragCancel, dragHandle } = props;
+	const registry = useBoardRegistry();
+	const ownerRef = useRef({});
+	useLayoutEffect$1(() => {
+		registry?.store.register({
+			id,
+			content: children,
+			isDraggable,
+			isResizable,
+			resizeHandles,
+			constraints,
+			qa,
+			styles,
+			isAutoHeight,
+			dragCancel,
+			dragHandle
+		}, ownerRef.current);
+	});
+	useEffect(() => {
+		const owner = ownerRef.current;
+		return () => {
+			registry?.store.unregister(id, owner);
+		};
+	}, [id]);
+	return null;
+}
+
+//#endregion
+export { Widget };
+//# sourceMappingURL=Widget.js.map

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

@@ -0,0 +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   * 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"}