@cube-dev/ui-kit 0.0.0-canary-73fed1d → 0.0.0-canary-3cf647a

package/dist/components/form/Form/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -22,6 +22,8 @@ const BoardElement = tasty({
 		position: "relative",
 		display: "block",
 		width: "100%",
+		flexGrow: 1,
+		minHeight: "0",
 		fill: "#clear",
 		boxSizing: "border-box"
 	}

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

@@ -1 +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 { BoardEntry, useBoardRegistry } from './board-context';\nimport { BoardProvider } from './BoardProvider';\nimport {\n  applySizeConstraints,\n  bottom,\n  calcGridItemPosition,\n  calcWH,\n  Compactor,\n  CompactType,\n  defaultConstraints,\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    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\nexport type BoardCompactType = 'vertical' | 'horizontal' | 'free' | null;\n\nexport interface CubeBoardProps\n  extends Omit<AllBaseProps, 'children'>,\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  /** 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  /** Compaction behavior. @default 'vertical' */\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  /** 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    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    constraints,\n    width: providedWidth,\n    children,\n    ...otherProps\n  } = props;\n\n  const registry = useBoardRegistry()!;\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  const width = providedWidth ?? measuredWidth;\n\n  const onResizeContainer = useEvent(() => {\n    const el = containerRef.current;\n    if (el) {\n      setMeasuredWidth(el.offsetWidth);\n    }\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 { layout, layoutRef, placeholder, setPlaceholder, 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  const resolvedPadding = containerPadding ?? margin;\n\n  const positionParams = useMemo<PositionParams>(\n    () => ({\n      margin,\n      containerPadding: resolvedPadding,\n      containerWidth: width,\n      cols,\n      rowHeight,\n      maxRows,\n    }),\n    [\n      margin[0],\n      margin[1],\n      resolvedPadding[0],\n      resolvedPadding[1],\n      width,\n      cols,\n      rowHeight,\n      maxRows,\n    ],\n  );\n\n  const compactor = useMemo<Compactor>(() => {\n    // 'free' means true free positioning: widgets can overlap and nothing is\n    // pushed or recompacted. Force allowOverlap so `moveElement` short-circuits\n    // on collision and the (no-op) compactor leaves items exactly where dropped.\n    if (compact === 'free') {\n      return getCompactor(null, true, preventCollision);\n    }\n    return getCompactor(\n      compactTypeToCore(compact),\n      allowOverlap,\n      preventCollision,\n    );\n  }, [compact, allowOverlap, preventCollision]);\n\n  const resolvedConstraints = constraints ?? defaultConstraints;\n\n  const rows = Math.max(\n    bottom(layout),\n    placeholder ? placeholder.y + placeholder.h : 0,\n  );\n  const containerHeight =\n    rows > 0\n      ? rows * rowHeight +\n        Math.max(0, rows - 1) * margin[1] +\n        resolvedPadding[1] * 2\n      : rowHeight;\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  // 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  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        return;\n      }\n\n      const rs = resizeStateRef.current;\n      if (!rs) return;\n\n      if (phase === 'end') {\n        applyLayout([...layoutRef.current], true);\n        setPlaceholder(null);\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      let x = item.x;\n      let y = item.y;\n      if (handle.includes('w')) x = item.x + item.w - constrained.w;\n      if (handle.includes('n')) y = item.y + item.h - constrained.h;\n      x = Math.max(0, x);\n      y = Math.max(0, y);\n\n      const newItem: LayoutItem = {\n        ...item,\n        x,\n        y,\n        w: constrained.w,\n        h: constrained.h,\n      };\n      const working = modifyLayout(layoutRef.current, newItem);\n      const compacted = [\n        ...liveRef.current.compactor.compact(working, pp.cols),\n      ];\n      applyLayout(compacted, false);\n      setPlaceholder(getLayoutItem(compacted, id) ?? newItem);\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  return (\n    <BoardElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={containerRef}\n      styles={styles}\n      // Use min-height (not a fixed height) so the board auto-sizes to its\n      // content by default but can still grow to fill a taller parent (e.g. a\n      // nested board stretched inside a container widget). Widgets are absolutely\n      // positioned, so growing never shifts them, and the content layer\n      // (inset: 0) always covers the full board -> the whole board is droppable.\n      style={{ minHeight: `${containerHeight}px` }}\n      mods={{\n        dragging: !!dragState,\n        'drop-target': dragState?.currentBoardId === boardId,\n      }}\n    >\n      <ContentLayer ref={contentRef}>\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\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                  registry={registry}\n                  dragState={dragState}\n                  onResize={handleResize}\n                />\n              );\n            })\n          : null}\n        {showPlaceholder ? (\n          <PlaceholderElement aria-hidden=\"true\" style={placeholderStyle!} />\n        ) : null}\n      </ContentLayer>\n      {children}\n    </BoardElement>\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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"}
+{"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 { BoardEntry, useBoardRegistry } from './board-context';\nimport { BoardProvider } from './BoardProvider';\nimport {\n  applySizeConstraints,\n  bottom,\n  calcGridItemPosition,\n  calcWH,\n  Compactor,\n  CompactType,\n  defaultConstraints,\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\nexport type BoardCompactType = 'vertical' | 'horizontal' | 'free' | null;\n\nexport interface CubeBoardProps\n  extends Omit<AllBaseProps, 'children'>,\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  /** 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  /** Compaction behavior. @default 'vertical' */\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  /** 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    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    constraints,\n    width: providedWidth,\n    children,\n    ...otherProps\n  } = props;\n\n  const registry = useBoardRegistry()!;\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  const width = providedWidth ?? measuredWidth;\n\n  const onResizeContainer = useEvent(() => {\n    const el = containerRef.current;\n    if (el) {\n      setMeasuredWidth(el.offsetWidth);\n    }\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 { layout, layoutRef, placeholder, setPlaceholder, 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  const resolvedPadding = containerPadding ?? margin;\n\n  const positionParams = useMemo<PositionParams>(\n    () => ({\n      margin,\n      containerPadding: resolvedPadding,\n      containerWidth: width,\n      cols,\n      rowHeight,\n      maxRows,\n    }),\n    [\n      margin[0],\n      margin[1],\n      resolvedPadding[0],\n      resolvedPadding[1],\n      width,\n      cols,\n      rowHeight,\n      maxRows,\n    ],\n  );\n\n  const compactor = useMemo<Compactor>(() => {\n    // 'free' means true free positioning: widgets can overlap and nothing is\n    // pushed or recompacted. Force allowOverlap so `moveElement` short-circuits\n    // on collision and the (no-op) compactor leaves items exactly where dropped.\n    if (compact === 'free') {\n      return getCompactor(null, true, preventCollision);\n    }\n    return getCompactor(\n      compactTypeToCore(compact),\n      allowOverlap,\n      preventCollision,\n    );\n  }, [compact, allowOverlap, preventCollision]);\n\n  const resolvedConstraints = constraints ?? defaultConstraints;\n\n  const rows = Math.max(\n    bottom(layout),\n    placeholder ? placeholder.y + placeholder.h : 0,\n  );\n  const containerHeight =\n    rows > 0\n      ? rows * rowHeight +\n        Math.max(0, rows - 1) * margin[1] +\n        resolvedPadding[1] * 2\n      : rowHeight;\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  // 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  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        return;\n      }\n\n      const rs = resizeStateRef.current;\n      if (!rs) return;\n\n      if (phase === 'end') {\n        applyLayout([...layoutRef.current], true);\n        setPlaceholder(null);\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      let x = item.x;\n      let y = item.y;\n      if (handle.includes('w')) x = item.x + item.w - constrained.w;\n      if (handle.includes('n')) y = item.y + item.h - constrained.h;\n      x = Math.max(0, x);\n      y = Math.max(0, y);\n\n      const newItem: LayoutItem = {\n        ...item,\n        x,\n        y,\n        w: constrained.w,\n        h: constrained.h,\n      };\n      const working = modifyLayout(layoutRef.current, newItem);\n      const compacted = [\n        ...liveRef.current.compactor.compact(working, pp.cols),\n      ];\n      applyLayout(compacted, false);\n      setPlaceholder(getLayoutItem(compacted, id) ?? newItem);\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  return (\n    <BoardElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={containerRef}\n      styles={styles}\n      // Use min-height (not a fixed height) so the board auto-sizes to its\n      // content by default but can still grow to fill a taller parent (e.g. a\n      // nested board stretched inside a container widget). Widgets are absolutely\n      // positioned, so growing never shifts them, and the content layer\n      // (inset: 0) always covers the full board -> the whole board is droppable.\n      style={{ minHeight: `${containerHeight}px` }}\n      mods={{\n        dragging: !!dragState,\n        'drop-target': dragState?.currentBoardId === boardId,\n      }}\n    >\n      <ContentLayer ref={contentRef}>\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\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                  registry={registry}\n                  dragState={dragState}\n                  onResize={handleResize}\n                />\n              );\n            })\n          : null}\n        {showPlaceholder ? (\n          <PlaceholderElement aria-hidden=\"true\" style={placeholderStyle!} />\n        ) : null}\n      </ContentLayer>\n      {children}\n    </BoardElement>\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

@@ -1,10 +1,17 @@
 
+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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { BoardRegistryContext } from "./board-context.js";
 import { useBoardRegistry } from "./use-board-registry.js";
 import { tasty } from "@tenphi/tasty";
@@ -28,8 +28,8 @@ const OverlayElement = tasty({
 * boards in a `BoardProvider` only when you need cross-board dragging.
 */
 function BoardProvider(props) {
-	const { children } = props;
-	const registry = useBoardRegistry();
+	const { children, onWidgetTransfer } = props;
+	const registry = useBoardRegistry({ onWidgetTransfer });
 	return /* @__PURE__ */ jsxs(BoardRegistryContext.Provider, {
 		value: registry,
 		children: [children, /* @__PURE__ */ jsx(OverlayElement, {

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

@@ -1 +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 { BoardRegistryContext } 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\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 } = props;\n  const registry = useBoardRegistry();\n\n  return (\n    <BoardRegistryContext.Provider value={registry}>\n      {children}\n      <OverlayElement ref={registry.overlayRef} aria-hidden=\"true\" />\n    </BoardRegistryContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAMA,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;;;;;;;;;;AAeF,SAAgB,cAAc,OAA+B;CAC3D,MAAM,EAAE,aAAa;CACrB,MAAM,WAAW,kBAAkB;AAEnC,QACE,qBAAC,qBAAqB;EAAS,OAAO;aACnC,UACD,oBAAC;GAAe,KAAK,SAAS;GAAY,eAAY;IAAS;GACjC"}
+{"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 { BoardRegistryContext, WidgetTransferInfo } 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      {children}\n      <OverlayElement ref={registry.overlayRef} aria-hidden=\"true\" />\n    </BoardRegistryContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAMA,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,qBAAC,qBAAqB;EAAS,OAAO;aACnC,UACD,oBAAC;GAAe,KAAK,SAAS;GAAY,eAAY;IAAS;GACjC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useBoardRegistry } from "./board-context.js";
 import { useEffect, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { calcGridColWidth, calcGridItemPosition } from "./grid-core/calculate.js";
 import { tasty } from "@tenphi/tasty";
@@ -241,37 +241,46 @@ function WidgetHost(props) {
 		mods: { revealed: gripsRevealed },
 		"aria-hidden": "true"
 	}, `grip-${axis}`))] }) : null] });
-	if (useOverlay && dragState) {
-		const overlayNode = registry.overlayRef.current;
-		const overlayWidget = /* @__PURE__ */ jsx(WidgetElement, {
-			...mergeProps$1(moveProps, hoverProps, focusWithinProps, a11yProps, { style: {
-				position: "absolute",
-				left: `${dragState.rect.left}px`,
-				top: `${dragState.rect.top}px`,
-				width: `${dragState.rect.width}px`,
-				height: `${dragState.rect.height}px`,
-				pointerEvents: "none"
-			} }),
-			qa: registration?.qa,
-			mods,
-			styles: registration?.styles,
-			children: content
-		});
-		return /* @__PURE__ */ jsx(Fragment$1, { children: overlayNode ? createPortal(overlayWidget, overlayNode) : overlayWidget });
-	}
 	const pos = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h);
-	return /* @__PURE__ */ jsx(WidgetElement, {
+	const overlayNode = registry.overlayRef.current;
+	const floatInOverlay = useOverlay && !!overlayNode && !!dragState;
+	const hostStyle = {
+		transform: `translate(${pos.left}px, ${pos.top}px)`,
+		width: `${pos.width}px`,
+		height: `${pos.height}px`,
+		...floatInOverlay ? {
+			opacity: 0,
+			pointerEvents: "none"
+		} : null
+	};
+	const hostMods = {
+		...mods,
+		drag: isActiveDrag && !floatInOverlay
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WidgetElement, {
 		ref: hostRef,
-		...mergeProps$1(moveProps, hoverProps, focusWithinProps, a11yProps, { style: {
-			transform: `translate(${pos.left}px, ${pos.top}px)`,
-			width: `${pos.width}px`,
-			height: `${pos.height}px`
-		} }),
+		...mergeProps$1(moveProps, hoverProps, focusWithinProps, a11yProps, { style: hostStyle }),
 		qa: registration?.qa,
-		mods,
+		mods: hostMods,
 		styles: registration?.styles,
+		children: floatInOverlay ? null : content
+	}), floatInOverlay ? createPortal(/* @__PURE__ */ jsx(WidgetElement, {
+		style: {
+			position: "absolute",
+			left: `${dragState.rect.left}px`,
+			top: `${dragState.rect.top}px`,
+			width: `${dragState.rect.width}px`,
+			height: `${dragState.rect.height}px`,
+			pointerEvents: "none"
+		},
+		mods: {
+			...mods,
+			drag: true
+		},
+		styles: registration?.styles,
+		"aria-hidden": "true",
 		children: content
-	});
+	}), overlayNode) : null] });
 }
 
 //#endregion

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, useRef, useState } from 'react';\nimport { useFocusWithin, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport {\n  BoardDragState,\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\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      'drag | resizing': '0 2x 4x #dark.20',\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\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  } = props;\n\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const isActiveDrag = dragState?.itemId === item.i;\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);\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  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    <>\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    </>\n  );\n\n  // While dragging with a pointer, render the widget into the shared overlay so\n  // it floats above everything (immune to ancestor overflow clipping).\n  if (useOverlay && dragState) {\n    const overlayNode = registry.overlayRef.current;\n    const overlayStyle: CSSProperties = {\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\n    const overlayWidget = (\n      <WidgetElement\n        {...mergeProps(moveProps, hoverProps, focusWithinProps, a11yProps, {\n          style: overlayStyle,\n        })}\n        qa={registration?.qa}\n        mods={mods}\n        styles={registration?.styles as Styles}\n      >\n        {content}\n      </WidgetElement>\n    );\n\n    return (\n      <>\n        {overlayNode ? createPortal(overlayWidget, overlayNode) : overlayWidget}\n      </>\n    );\n  }\n\n  const pos = calcGridItemPosition(\n    positionParams,\n    item.x,\n    item.y,\n    item.w,\n    item.h,\n  );\n  const style: CSSProperties = {\n    transform: `translate(${pos.left}px, ${pos.top}px)`,\n    width: `${pos.width}px`,\n    height: `${pos.height}px`,\n  };\n\n  return (\n    <WidgetElement\n      ref={hostRef}\n      {...mergeProps(moveProps, hoverProps, focusWithinProps, a11yProps, {\n        style,\n      })}\n      qa={registration?.qa}\n      mods={mods}\n      styles={registration?.styles as Styles}\n    >\n      {content}\n    </WidgetElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,mBAAmB;GACpB;EACD,QAAQ;GACN,IAAI;GACJ,mBAAmB;GACpB;EACD,YAAY;EACZ,WAAW;EACX,YAAY;GACV,IAAI;GACJ,mBAAmB;GACpB;EACD,QAAQ;GACN,IAAI;GACJ,WAAW;GACX,MAAM;GACP;EACD,aAAa;EACb,UAAU;EACX;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,MAAM;EAEN,iBAAiB;EACjB,qBAAqB;EACrB,kBAAkB;EAClB,OAAO;GACL,IAAI;GACJ,yCAAqC;GACtC;EACD,QAAQ;GACN,IAAI;GACJ,yCAAqC;GACtC;EACD,KAAK;GACH,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,QAAQ;GACN,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,MAAM;GACJ,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,OAAO;GACL,IAAI;GACJ,+DACE;GACF,yCAAqC;GACtC;EACD,QAAQ;GACN,IAAI;GACJ,yCAAqC;GACrC,yCAAqC;GACrC,2CAAuC;GACvC,2CAAuC;GACxC;EACD,aAAa;EACd;CACF,CAAC;AAEF,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAe;EACf,SAAS;GACP,IAAI;GACJ,UAAU;GACX;EACD,YAAY;EACZ,WAAW;GACT,IAAI;GACJ,2CAAuC;GACxC;EACD,cAAc;GACZ,IAAI;GACJ,2CAAuC;GACxC;EACD,YAAY;GACV,IAAI;GACJ,2CAAuC;GACxC;EACD,aAAa;GACX,IAAI;GACJ,2CAAuC;GACxC;EACD,QAAQ;GACN,IAAI;GACJ,sBAAoB;GACpB,sBAAoB;GACpB,sBAAoB;GACpB,sBAAoB;GACrB;EACD,KAAK;GACH,IAAI;GACJ,2CAAuC;GACxC;EACD,QAAQ;GACN,IAAI;GACJ,2CAAuC;GACxC;EACD,MAAM;GACJ,IAAI;GACJ,2CAAuC;GACxC;EACD,OAAO;GACL,IAAI;GACJ,2CAAuC;GACxC;EACF;CACF,CAAC;;AAGF,SAAS,aAAa,MAAiC;AACrD,QAAO,KAAK,WAAW;;AAazB,SAAS,aAAa,EAAE,MAAM,YAA+B;CAC3D,MAAM,EAAE,cAAc,QAAQ;EAC5B,cAAc;AACZ,YAAS,MAAM,SAAS,GAAG,EAAE;;EAE/B,OAAO,GAAG;AACR,YAAS,MAAM,QAAQ,EAAE,QAAQ,EAAE,OAAO;;EAE5C,YAAY;AACV,YAAS,MAAM,OAAO,GAAG,EAAE;;EAE9B,CAAC;CAEF,MAAM,YAAY;EAChB,gBAAgB,MAA0B,EAAE,iBAAiB;EAC7D,cAAc,MAAwB,EAAE,iBAAiB;EACzD,eAAe,MAAwB,EAAE,iBAAiB;EAC3D;AAED,QACE,oBAAC;EACC,aAAW;EACX,GAAIA,aAAW,WAAW,UAAU;EACpC,eAAY;GACZ;;;;;;;;AA6BN,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,SACA,MACA,gBACA,cACA,aACA,aACA,eACA,UACA,WACA,aACE;CAEJ,MAAM,UAAU,OAA8B,KAAK;CACnD,MAAM,eAAe,WAAW,WAAW,KAAK;CAGhD,MAAM,aAAa,gBAAgB,WAAW,gBAAgB;CAE9D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,cAAc,CAAC;CACxE,MAAM,EAAE,qBAAqB,eAAe,EAC1C,qBAAqB,kBACtB,CAAC;CAIF,MAAM,gBACJ,eACA,CAAC,KAAK,UACN,CAAC,iBACA,aAAa,iBAAiB;CAEjC,MAAM,EAAE,cAAc,QAAQ;EAC5B,YAAY,GAAG;AACb,OAAI,CAAC,YAAa;GAClB,MAAM,OAAO,QAAQ,SAAS,uBAAuB;GACrD,MAAM,MAAM,qBACV,gBACA,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,EACN;GACD,MAAM,KAAmB,OACrB;IACE,MAAM,KAAK;IACX,KAAK,KAAK;IACV,OAAO,KAAK;IACZ,QAAQ,KAAK;IACd,GACD;IACE,MAAM,IAAI;IACV,KAAK,IAAI;IACT,OAAO,IAAI;IACX,QAAQ,IAAI;IACb;AACL,YAAS,YAAY,SAAS,KAAK,GAAG,IAAI,EAAE,YAAY;;EAE1D,OAAO,GAAG;AACR,OAAI,CAAC,YAAa;AAClB,OAAI,EAAE,gBAAgB,YAAY;IAGhC,MAAM,QADW,iBAAiB,eAAe,GACxB,eAAe,OAAO;IAC/C,MAAM,QAAQ,eAAe,YAAY,eAAe,OAAO;AAC/D,aAAS,WACP,KAAK,KAAK,EAAE,OAAO,GAAG,OACtB,KAAK,KAAK,EAAE,OAAO,GAAG,OACtB,EAAE,YACH;AACD;;AAEF,YAAS,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY;;EAExD,YAAY;AACV,OAAI,CAAC,YAAa;AAClB,YAAS,WAAW;;EAEvB,CAAC;CAEF,MAAM,YAAY;EAChB,UAAU,cAAc,IAAI;EAC5B,wBAAwB,cAAc,qBAAqB;EAC3D,cAAc,cAAc,MAAM,KAAK;EACxC;CAED,MAAM,gBACJ,MACA,OACA,IACA,OACG;AACH,MAAI,UAAU,QAAS,eAAc,KAAK;WACjC,UAAU,MAAO,eAAc,MAAM;AAC9C,WAAS,KAAK,GAAG,MAAM,OAAO,IAAI,GAAG;;CAGvC,MAAM,OAAO;EACX,MAAM;EACN,WAAW,eAAe,CAAC;EAC3B,QAAQ,CAAC,CAAC,KAAK;EACf,UAAU;EACX;CAED,MAAM,UACJ,8CACG,cAAc,SACd,eAAe,CAAC,KAAK,SACpB,8CACG,cAAc,KAAK,SAClB,oBAAC;EAA8B;EAAM,UAAU;IAA5B,KAA4C,CAC/D,EACD,cAAc,OAAO,aAAa,CAAC,KAAK,SACvC,oBAAC;EAEC,aAAW;EACX,MAAM,EAAE,UAAU,eAAe;EACjC,eAAY;IAHP,QAAQ,OAIb,CACF,IACD,GACD,QACH;AAKL,KAAI,cAAc,WAAW;EAC3B,MAAM,cAAc,SAAS,WAAW;EAUxC,MAAM,gBACJ,oBAAC;GACC,GAAIA,aAAW,WAAW,YAAY,kBAAkB,WAAW,EACjE,OAZ8B;IAClC,UAAU;IACV,MAAM,GAAG,UAAU,KAAK,KAAK;IAC7B,KAAK,GAAG,UAAU,KAAK,IAAI;IAC3B,OAAO,GAAG,UAAU,KAAK,MAAM;IAC/B,QAAQ,GAAG,UAAU,KAAK,OAAO;IACjC,eAAe;IAChB,EAMI,CAAC;GACF,IAAI,cAAc;GACZ;GACN,QAAQ,cAAc;aAErB;IACa;AAGlB,SACE,4CACG,cAAc,aAAa,eAAe,YAAY,GAAG,gBACzD;;CAIP,MAAM,MAAM,qBACV,gBACA,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,EACN;AAOD,QACE,oBAAC;EACC,KAAK;EACL,GAAIA,aAAW,WAAW,YAAY,kBAAkB,WAAW,EACjE,OAVuB;GAC3B,WAAW,aAAa,IAAI,KAAK,MAAM,IAAI,IAAI;GAC/C,OAAO,GAAG,IAAI,MAAM;GACpB,QAAQ,GAAG,IAAI,OAAO;GACvB,EAOI,CAAC;EACF,IAAI,cAAc;EACZ;EACN,QAAQ,cAAc;YAErB;GACa"}
+{"version":3,"file":"WidgetHost.js","names":["mergeProps"],"sources":["../../../../src/components/layout/Board/WidgetHost.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { CSSProperties, useRef, useState } from 'react';\nimport { useFocusWithin, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport {\n  BoardDragState,\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\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      'drag | resizing': '0 2x 4x #dark.20',\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\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  } = props;\n\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const isActiveDrag = dragState?.itemId === item.i;\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);\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  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    <>\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    </>\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      {...mergeProps(moveProps, hoverProps, focusWithinProps, 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.d.ts

@@ -0,0 +1,16 @@
+
+import { LayoutItem } from "./grid-core/types.js";
+import "./board-store.js";
+import { MutableRefObject } from "react";
+
+//#region src/components/layout/Board/board-context.d.ts
+/** Emitted when a widget is dropped from one board into another. */
+interface WidgetTransferInfo {
+  widgetId: string;
+  fromBoardId: string;
+  toBoardId: string;
+  item: LayoutItem;
+}
+//#endregion
+export { WidgetTransferInfo };
+//# sourceMappingURL=board-context.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"board-context.js","names":[],"sources":["../../../../src/components/layout/Board/board-context.tsx"],"sourcesContent":["import { createContext, MutableRefObject, useContext } from 'react';\n\nimport type { BoardWidgetStore } from './board-store';\nimport type {\n  Compactor,\n  LayoutConstraint,\n  LayoutItem,\n  PositionParams,\n} from './grid-core';\n\n/** A rectangle in viewport (client) coordinates. */\nexport interface ViewportRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Everything the cross-board registry needs to read from / write to a single\n * board. Methods read live refs so a single stable entry can be registered once\n * per board and stay current across renders.\n */\nexport interface BoardEntry {\n  id: string;\n  /** Viewport rect of the content area where widgets are positioned. */\n  getContentRect: () => DOMRect | null;\n  /** The DOM node of the content area (used to detect nested-in-drag boards). */\n  getContentNode: () => HTMLElement | null;\n  getPositionParams: () => PositionParams;\n  getConstraints: () => LayoutConstraint[];\n  getCompactor: () => Compactor;\n  getMaxRows: () => number;\n  getContainerHeight: () => number;\n  getLayout: () => LayoutItem[];\n  /** Update the board layout. `commit` fires `onLayoutChange`. */\n  applyLayout: (layout: LayoutItem[], commit: boolean) => void;\n  setPlaceholder: (item: LayoutItem | null) => void;\n  isDroppable: () => boolean;\n}\n\n/** Live drag state, shared across boards for overlay + placeholders. */\nexport interface BoardDragState {\n  sourceBoardId: string;\n  /** Board currently owning the dragged item (changes as it crosses boards). */\n  currentBoardId: string;\n  itemId: string;\n  /** Snapshot of the dragged item (grid units; w/h preserved across boards). */\n  item: LayoutItem;\n  /** Dragged widget rect in viewport coordinates (follows the pointer). */\n  rect: ViewportRect;\n  pointerType: string;\n}\n\nexport interface BoardRegistryContextValue {\n  store: BoardWidgetStore;\n  overlayRef: MutableRefObject<HTMLDivElement | null>;\n  registerBoard: (entry: BoardEntry) => () => void;\n  onDragStart: (\n    boardId: string,\n    itemId: string,\n    rect: ViewportRect,\n    pointerType: string,\n  ) => void;\n  onDragMove: (deltaX: number, deltaY: number, pointerType: string) => void;\n  onDragEnd: () => void;\n  dragState: BoardDragState | null;\n}\n\nexport const BoardRegistryContext =\n  createContext<BoardRegistryContextValue | null>(null);\n\nexport function useBoardRegistry(): BoardRegistryContextValue | null {\n  return useContext(BoardRegistryContext);\n}\n"],"mappings":";;;;AAqEA,MAAa,uBACX,cAAgD,KAAK;AAEvD,SAAgB,mBAAqD;AACnE,QAAO,WAAW,qBAAqB"}
+{"version":3,"file":"board-context.js","names":[],"sources":["../../../../src/components/layout/Board/board-context.tsx"],"sourcesContent":["import { createContext, MutableRefObject, useContext } from 'react';\n\nimport type { BoardWidgetStore } from './board-store';\nimport type {\n  Compactor,\n  LayoutConstraint,\n  LayoutItem,\n  PositionParams,\n} from './grid-core';\n\n/** A rectangle in viewport (client) coordinates. */\nexport interface ViewportRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Everything the cross-board registry needs to read from / write to a single\n * board. Methods read live refs so a single stable entry can be registered once\n * per board and stay current across renders.\n */\nexport interface BoardEntry {\n  id: string;\n  /** Viewport rect of the content area where widgets are positioned. */\n  getContentRect: () => DOMRect | null;\n  /** The DOM node of the content area (used to detect nested-in-drag boards). */\n  getContentNode: () => HTMLElement | null;\n  getPositionParams: () => PositionParams;\n  getConstraints: () => LayoutConstraint[];\n  getCompactor: () => Compactor;\n  getMaxRows: () => number;\n  getContainerHeight: () => number;\n  getLayout: () => LayoutItem[];\n  /** Update the board layout. `commit` fires `onLayoutChange`. */\n  applyLayout: (layout: LayoutItem[], commit: boolean) => void;\n  setPlaceholder: (item: LayoutItem | null) => void;\n  isDroppable: () => boolean;\n}\n\n/** Emitted when a widget is dropped from one board into another. */\nexport interface WidgetTransferInfo {\n  widgetId: string;\n  fromBoardId: string;\n  toBoardId: string;\n  item: LayoutItem;\n}\n\n/** Live drag state, shared across boards for overlay + placeholders. */\nexport interface BoardDragState {\n  sourceBoardId: string;\n  /** Board currently owning the dragged item (changes as it crosses boards). */\n  currentBoardId: string;\n  itemId: string;\n  /** Snapshot of the dragged item (grid units; w/h preserved across boards). */\n  item: LayoutItem;\n  /** Dragged widget rect in viewport coordinates (follows the pointer). */\n  rect: ViewportRect;\n  pointerType: string;\n}\n\nexport interface BoardRegistryContextValue {\n  store: BoardWidgetStore;\n  overlayRef: MutableRefObject<HTMLDivElement | null>;\n  registerBoard: (entry: BoardEntry) => () => void;\n  onDragStart: (\n    boardId: string,\n    itemId: string,\n    rect: ViewportRect,\n    pointerType: string,\n  ) => void;\n  onDragMove: (deltaX: number, deltaY: number, pointerType: string) => void;\n  onDragEnd: () => void;\n  dragState: BoardDragState | null;\n}\n\nexport const BoardRegistryContext =\n  createContext<BoardRegistryContextValue | null>(null);\n\nexport function useBoardRegistry(): BoardRegistryContextValue | null {\n  return useContext(BoardRegistryContext);\n}\n"],"mappings":";;;;AA6EA,MAAa,uBACX,cAAgD,KAAK;AAEvD,SAAgB,mBAAqD;AACnE,QAAO,WAAW,qBAAqB"}

package/dist/components/layout/Board/board-store.d.ts

@@ -0,0 +1,3 @@
+
+import { Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 //#region src/components/layout/Board/board-store.ts
 /**
 * A tiny external store mapping widget id -> registration.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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

@@ -3,6 +3,7 @@ import { Compactor, Layout, LayoutConstraint, LayoutItem, ResizeHandleAxis } fro
 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 { WidgetTransferInfo } from "./board-context.js";
 import { BoardProvider, CubeBoardProviderProps } from "./BoardProvider.js";
 import { CubeBoardWidgetProps, Widget } from "./Widget.js";
 import * as react from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | 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";

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';\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 { 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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73fed1d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { cloneLayout } from "./grid-core/layout.js";
 import { useCallback, useEffect, useRef, useState } from "react";