npm - @cube-dev/ui-kit - Versions diffs - 0.165.0 → 0.166.0 - Mend

@cube-dev/ui-kit 0.165.0 → 0.166.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (564) hide show

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/collision-modes.ts
 /** Whether a single grid cell is free of every item in `others`. */
 function cellFree(others, x, y) {

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

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

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

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

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

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

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

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

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

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

package/dist/components/layout/Board/grid-core/placement.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import { Layout, LayoutItem } from "./types.js";
+//#region src/components/layout/Board/grid-core/placement.d.ts
+/**
+ * The first position at or below the preferred cell where `item` fits without
+ * overlapping any of `others` (which must themselves be overlap-free), scanning
+ * left-to-right then top-to-bottom and never past `maxRows`; if the band below
+ * is full, upward toward the top.
+ *
+ * This is the rule the board itself applies when it has to land a widget that
+ * cannot stay where it was dropped, so using it for a programmatic add is what
+ * makes the two agree.
+ *
+ * A finite `maxRows` mirrors the `gridBounds` constraint the normal landing path
+ * applies (`clamp(y, 0, maxRows - h)`): the item's bottom edge stays within the
+ * row limit even when the landing cell is blocked, so the downward scan cannot
+ * push it off the board. If the whole valid band is full the item is clamped to
+ * the limit — bounds win over overlap, exactly as `gridBounds` does. With an
+ * unbounded `maxRows` there is always a free slot below every existing item, so
+ * the downward scan terminates on its own.
+ *
+ * The returned item is a copy; `item` is not mutated. Its `w` is capped to
+ * `cols`, and no other dimension is changed — this never resizes to fit.
+ */
+declare function placeInFreeSlot(others: Layout, item: LayoutItem, cols: number, maxRows?: number): LayoutItem;
+/**
+ * Tile every item evenly across both axes of a `cols × rows` grid, keeping the
+ * row structure the layout already has: items are grouped into visual rows by
+ * their current `y`, `rows` is divided across those groups, and `cols` across
+ * each group's members.
+ *
+ * So three items on one line become three equal full-height columns; move one
+ * below and the top line becomes two half-width cells while the lower item
+ * spans the full width at half height. Grouping by `y` rather than reflowing
+ * from scratch is what makes the result recognisably the user's arrangement
+ * instead of an arbitrary repack.
+ *
+ * A visual row holding more items than the grid is wide is wrapped into
+ * sub-rows of at most `cols`, so nothing tiles past the right edge. That can
+ * take the result past `rows`; the caller decides whether to grow the grid or
+ * let its bounds clip.
+ *
+ * This is the one operation that deliberately GROWS items — every gesture-driven
+ * path refuses to, because growing on a move is a surprise. Here it is the whole
+ * point, which is why it is a call the app makes rather than a mode the board is
+ * in. Returns new items in the input's order; the input is not mutated.
+ */
+declare function distributeEvenly(layout: Layout, {
+  cols,
+  rows
+}: {
+  cols: number;
+  rows: number;
+}): LayoutItem[];
+//#endregion
+export { distributeEvenly, placeInFreeSlot };
+//# sourceMappingURL=placement.d.ts.map

package/dist/components/layout/Board/grid-core/placement.js ADDED Viewed

@@ -0,0 +1,153 @@
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+import { collides } from "./collision.js";
+//#region src/components/layout/Board/grid-core/placement.ts
+/**
+* Placing items into a grid without dragging them there.
+*
+* A board's own gestures resolve placement through the compactor and the
+* collision resolver. An app that adds a widget programmatically — a toolbar
+* drop, a widget moved between boards by code, an "arrange these for me"
+* command — has to answer the same question with no gesture in hand, and had no
+* way to ask the engine for the answer. Left to solve it themselves, apps
+* re-implement the scan, and the same drop lands in two different cells
+* depending on whether a pointer or a code path served it.
+*
+* Original UI Kit code (not vendored from react-grid-layout).
+*/
+/**
+* The first position at or below the preferred cell where `item` fits without
+* overlapping any of `others` (which must themselves be overlap-free), scanning
+* left-to-right then top-to-bottom and never past `maxRows`; if the band below
+* is full, upward toward the top.
+*
+* This is the rule the board itself applies when it has to land a widget that
+* cannot stay where it was dropped, so using it for a programmatic add is what
+* makes the two agree.
+*
+* A finite `maxRows` mirrors the `gridBounds` constraint the normal landing path
+* applies (`clamp(y, 0, maxRows - h)`): the item's bottom edge stays within the
+* row limit even when the landing cell is blocked, so the downward scan cannot
+* push it off the board. If the whole valid band is full the item is clamped to
+* the limit — bounds win over overlap, exactly as `gridBounds` does. With an
+* unbounded `maxRows` there is always a free slot below every existing item, so
+* the downward scan terminates on its own.
+*
+* The returned item is a copy; `item` is not mutated. Its `w` is capped to
+* `cols`, and no other dimension is changed — this never resizes to fit.
+*/
+function placeInFreeSlot(others, item, cols, maxRows = Infinity) {
+	const w = Math.min(item.w, cols);
+	const maxY = Number.isFinite(maxRows) ? Math.max(0, maxRows - item.h) : Infinity;
+	const fits = (x, y) => !others.some((o) => collides(o, {
+		...item,
+		x,
+		y,
+		w
+	}));
+	const preferX = Math.min(Math.max(0, item.x), cols - w);
+	const startY = Math.min(Math.max(0, item.y), maxY);
+	if (fits(preferX, startY)) return {
+		...item,
+		x: preferX,
+		y: startY,
+		w
+	};
+	const scanBottom = Number.isFinite(maxRows) ? maxY : startY + others.reduce((m, o) => Math.max(m, o.y + o.h), 0) + 1;
+	for (let y = startY; y <= scanBottom; y++) for (let x = 0; x <= cols - w; x++) if (fits(x, y)) return {
+		...item,
+		x,
+		y,
+		w
+	};
+	for (let y = startY - 1; y >= 0; y--) for (let x = 0; x <= cols - w; x++) if (fits(x, y)) return {
+		...item,
+		x,
+		y,
+		w
+	};
+	return {
+		...item,
+		x: preferX,
+		y: startY,
+		w
+	};
+}
+/**
+* Split `total` cells across `parts` groups as evenly as possible: each group
+* gets at least one, and the first `total % parts` groups get one extra so the
+* pieces sum to `total`. With more groups than cells every group still gets one
+* and the sum overflows, which the grid's own bounds then clip — the best
+* available answer when there is less than a cell to go round.
+*/
+function splitEvenly(total, parts) {
+	if (parts <= 0) return [];
+	const base = Math.max(1, Math.floor(total / parts));
+	const remainder = base * parts >= total ? 0 : total - base * parts;
+	return Array.from({ length: parts }, (_, i) => base + (i < remainder ? 1 : 0));
+}
+/**
+* Tile every item evenly across both axes of a `cols × rows` grid, keeping the
+* row structure the layout already has: items are grouped into visual rows by
+* their current `y`, `rows` is divided across those groups, and `cols` across
+* each group's members.
+*
+* So three items on one line become three equal full-height columns; move one
+* below and the top line becomes two half-width cells while the lower item
+* spans the full width at half height. Grouping by `y` rather than reflowing
+* from scratch is what makes the result recognisably the user's arrangement
+* instead of an arbitrary repack.
+*
+* A visual row holding more items than the grid is wide is wrapped into
+* sub-rows of at most `cols`, so nothing tiles past the right edge. That can
+* take the result past `rows`; the caller decides whether to grow the grid or
+* let its bounds clip.
+*
+* This is the one operation that deliberately GROWS items — every gesture-driven
+* path refuses to, because growing on a move is a surprise. Here it is the whole
+* point, which is why it is a call the app makes rather than a mode the board is
+* in. Returns new items in the input's order; the input is not mutated.
+*/
+function distributeEvenly(layout, { cols, rows }) {
+	if (layout.length === 0) return [];
+	const gridCols = Math.max(1, cols);
+	const gridRows = Math.max(1, rows);
+	const sorted = [...layout].sort((a, b) => a.y !== b.y ? a.y - b.y : a.x - b.x);
+	const groups = [];
+	let lastY = null;
+	for (const item of sorted) {
+		if (lastY === null || item.y !== lastY) {
+			groups.push([]);
+			lastY = item.y;
+		}
+		groups[groups.length - 1].push(item);
+	}
+	const rowGroups = [];
+	for (const group of groups) if (group.length <= gridCols) rowGroups.push(group);
+	else for (let i = 0; i < group.length; i += gridCols) rowGroups.push(group.slice(i, i + gridCols));
+	const rowHeights = splitEvenly(gridRows, rowGroups.length);
+	const placed = /* @__PURE__ */ new Map();
+	let y = 0;
+	rowGroups.forEach((group, gi) => {
+		const h = rowHeights[gi];
+		const widths = splitEvenly(gridCols, group.length);
+		let x = 0;
+		group.forEach((item, ci) => {
+			const w = widths[ci];
+			placed.set(item.i, {
+				...item,
+				x,
+				y,
+				w,
+				h
+			});
+			x += w;
+		});
+		y += h;
+	});
+	return layout.map((item) => placed.get(item.i) ?? item);
+}
+//#endregion
+export { distributeEvenly, placeInFreeSlot };
+//# sourceMappingURL=placement.js.map

package/dist/components/layout/Board/grid-core/placement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"placement.js","names":[],"sources":["../../../../../src/components/layout/Board/grid-core/placement.ts"],"sourcesContent":["/**\n * Placing items into a grid without dragging them there.\n *\n * A board's own gestures resolve placement through the compactor and the\n * collision resolver. An app that adds a widget programmatically — a toolbar\n * drop, a widget moved between boards by code, an \"arrange these for me\"\n * command — has to answer the same question with no gesture in hand, and had no\n * way to ask the engine for the answer. Left to solve it themselves, apps\n * re-implement the scan, and the same drop lands in two different cells\n * depending on whether a pointer or a code path served it.\n *\n * Original UI Kit code (not vendored from react-grid-layout).\n */\n\nimport { collides } from './collision';\n\nimport type { Layout, LayoutItem } from './types';\n\n/**\n * The first position at or below the preferred cell where `item` fits without\n * overlapping any of `others` (which must themselves be overlap-free), scanning\n * left-to-right then top-to-bottom and never past `maxRows`; if the band below\n * is full, upward toward the top.\n *\n * This is the rule the board itself applies when it has to land a widget that\n * cannot stay where it was dropped, so using it for a programmatic add is what\n * makes the two agree.\n *\n * A finite `maxRows` mirrors the `gridBounds` constraint the normal landing path\n * applies (`clamp(y, 0, maxRows - h)`): the item's bottom edge stays within the\n * row limit even when the landing cell is blocked, so the downward scan cannot\n * push it off the board. If the whole valid band is full the item is clamped to\n * the limit — bounds win over overlap, exactly as `gridBounds` does. With an\n * unbounded `maxRows` there is always a free slot below every existing item, so\n * the downward scan terminates on its own.\n *\n * The returned item is a copy; `item` is not mutated. Its `w` is capped to\n * `cols`, and no other dimension is changed — this never resizes to fit.\n */\nexport function placeInFreeSlot(\n others: Layout,\n item: LayoutItem,\n cols: number,\n maxRows = Infinity,\n): LayoutItem {\n const w = Math.min(item.w, cols);\n const maxY = Number.isFinite(maxRows)\n ? Math.max(0, maxRows - item.h)\n : Infinity;\n const fits = (x: number, y: number) =>\n !others.some((o) => collides(o, { ...item, x, y, w }));\n const preferX = Math.min(Math.max(0, item.x), cols - w);\n const startY = Math.min(Math.max(0, item.y), maxY);\n if (fits(preferX, startY)) return { ...item, x: preferX, y: startY, w };\n const scanBottom = Number.isFinite(maxRows)\n ? maxY\n : startY + others.reduce((m, o) => Math.max(m, o.y + o.h), 0) + 1;\n for (let y = startY; y <= scanBottom; y++) {\n for (let x = 0; x <= cols - w; x++) {\n if (fits(x, y)) return { ...item, x, y, w };\n }\n }\n // The landing row (clamped to the limit) and everything below it were full;\n // look upward for a free slot still inside the board before giving up.\n for (let y = startY - 1; y >= 0; y--) {\n for (let x = 0; x <= cols - w; x++) {\n if (fits(x, y)) return { ...item, x, y, w };\n }\n }\n return { ...item, x: preferX, y: startY, w };\n}\n\n/**\n * Split `total` cells across `parts` groups as evenly as possible: each group\n * gets at least one, and the first `total % parts` groups get one extra so the\n * pieces sum to `total`. With more groups than cells every group still gets one\n * and the sum overflows, which the grid's own bounds then clip — the best\n * available answer when there is less than a cell to go round.\n */\nfunction splitEvenly(total: number, parts: number): number[] {\n if (parts <= 0) return [];\n const base = Math.max(1, Math.floor(total / parts));\n const remainder = base * parts >= total ? 0 : total - base * parts;\n return Array.from(\n { length: parts },\n (_, i) => base + (i < remainder ? 1 : 0),\n );\n}\n\n/**\n * Tile every item evenly across both axes of a `cols × rows` grid, keeping the\n * row structure the layout already has: items are grouped into visual rows by\n * their current `y`, `rows` is divided across those groups, and `cols` across\n * each group's members.\n *\n * So three items on one line become three equal full-height columns; move one\n * below and the top line becomes two half-width cells while the lower item\n * spans the full width at half height. Grouping by `y` rather than reflowing\n * from scratch is what makes the result recognisably the user's arrangement\n * instead of an arbitrary repack.\n *\n * A visual row holding more items than the grid is wide is wrapped into\n * sub-rows of at most `cols`, so nothing tiles past the right edge. That can\n * take the result past `rows`; the caller decides whether to grow the grid or\n * let its bounds clip.\n *\n * This is the one operation that deliberately GROWS items — every gesture-driven\n * path refuses to, because growing on a move is a surprise. Here it is the whole\n * point, which is why it is a call the app makes rather than a mode the board is\n * in. Returns new items in the input's order; the input is not mutated.\n */\nexport function distributeEvenly(\n layout: Layout,\n { cols, rows }: { cols: number; rows: number },\n): LayoutItem[] {\n if (layout.length === 0) return [];\n\n const gridCols = Math.max(1, cols);\n const gridRows = Math.max(1, rows);\n\n const sorted = [...layout].sort((a, b) =>\n a.y !== b.y ? a.y - b.y : a.x - b.x,\n );\n\n const groups: LayoutItem[][] = [];\n let lastY: number | null = null;\n for (const item of sorted) {\n if (lastY === null || item.y !== lastY) {\n groups.push([]);\n lastY = item.y;\n }\n groups[groups.length - 1].push(item);\n }\n\n const rowGroups: LayoutItem[][] = [];\n for (const group of groups) {\n if (group.length <= gridCols) {\n rowGroups.push(group);\n } else {\n for (let i = 0; i < group.length; i += gridCols) {\n rowGroups.push(group.slice(i, i + gridCols));\n }\n }\n }\n\n const rowHeights = splitEvenly(gridRows, rowGroups.length);\n const placed = new Map<string, LayoutItem>();\n let y = 0;\n rowGroups.forEach((group, gi) => {\n const h = rowHeights[gi];\n const widths = splitEvenly(gridCols, group.length);\n let x = 0;\n group.forEach((item, ci) => {\n const w = widths[ci];\n placed.set(item.i, { ...item, x, y, w, h });\n x += w;\n });\n y += h;\n });\n\n // Emit in the caller's order, not the sort's: a layout is keyed by `i`, and\n // reordering it would churn every consumer that diffs the array positionally.\n return layout.map((item) => placed.get(item.i) ?? item);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,gBACd,QACA,MACA,MACA,UAAU,UACE;CACZ,MAAM,IAAI,KAAK,IAAI,KAAK,GAAG,KAAK;CAChC,MAAM,OAAO,OAAO,SAAS,QAAQ,GACjC,KAAK,IAAI,GAAG,UAAU,KAAK,EAAE,GAC7B;CACJ,MAAM,QAAQ,GAAW,MACvB,CAAC,OAAO,MAAM,MAAM,SAAS,GAAG;EAAE,GAAG;EAAM;EAAG;EAAG;EAAG,CAAC,CAAC;CACxD,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,EAAE,EAAE,OAAO,EAAE;CACvD,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,EAAE,EAAE,KAAK;AAClD,KAAI,KAAK,SAAS,OAAO,CAAE,QAAO;EAAE,GAAG;EAAM,GAAG;EAAS,GAAG;EAAQ;EAAG;CACvE,MAAM,aAAa,OAAO,SAAS,QAAQ,GACvC,OACA,SAAS,OAAO,QAAQ,GAAG,MAAM,KAAK,IAAI,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG;AAClE,MAAK,IAAI,IAAI,QAAQ,KAAK,YAAY,IACpC,MAAK,IAAI,IAAI,GAAG,KAAK,OAAO,GAAG,IAC7B,KAAI,KAAK,GAAG,EAAE,CAAE,QAAO;EAAE,GAAG;EAAM;EAAG;EAAG;EAAG;AAK/C,MAAK,IAAI,IAAI,SAAS,GAAG,KAAK,GAAG,IAC/B,MAAK,IAAI,IAAI,GAAG,KAAK,OAAO,GAAG,IAC7B,KAAI,KAAK,GAAG,EAAE,CAAE,QAAO;EAAE,GAAG;EAAM;EAAG;EAAG;EAAG;AAG/C,QAAO;EAAE,GAAG;EAAM,GAAG;EAAS,GAAG;EAAQ;EAAG;;;;;;;;;AAU9C,SAAS,YAAY,OAAe,OAAyB;AAC3D,KAAI,SAAS,EAAG,QAAO,EAAE;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,MAAM,CAAC;CACnD,MAAM,YAAY,OAAO,SAAS,QAAQ,IAAI,QAAQ,OAAO;AAC7D,QAAO,MAAM,KACX,EAAE,QAAQ,OAAO,GAChB,GAAG,MAAM,QAAQ,IAAI,YAAY,IAAI,GACvC;;;;;;;;;;;;;;;;;;;;;;;;AAyBH,SAAgB,iBACd,QACA,EAAE,MAAM,QACM;AACd,KAAI,OAAO,WAAW,EAAG,QAAO,EAAE;CAElC,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK;CAClC,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK;CAElC,MAAM,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,MAClC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EACnC;CAED,MAAM,SAAyB,EAAE;CACjC,IAAI,QAAuB;AAC3B,MAAK,MAAM,QAAQ,QAAQ;AACzB,MAAI,UAAU,QAAQ,KAAK,MAAM,OAAO;AACtC,UAAO,KAAK,EAAE,CAAC;AACf,WAAQ,KAAK;;AAEf,SAAO,OAAO,SAAS,GAAG,KAAK,KAAK;;CAGtC,MAAM,YAA4B,EAAE;AACpC,MAAK,MAAM,SAAS,OAClB,KAAI,MAAM,UAAU,SAClB,WAAU,KAAK,MAAM;KAErB,MAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,SACrC,WAAU,KAAK,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC;CAKlD,MAAM,aAAa,YAAY,UAAU,UAAU,OAAO;CAC1D,MAAM,yBAAS,IAAI,KAAyB;CAC5C,IAAI,IAAI;AACR,WAAU,SAAS,OAAO,OAAO;EAC/B,MAAM,IAAI,WAAW;EACrB,MAAM,SAAS,YAAY,UAAU,MAAM,OAAO;EAClD,IAAI,IAAI;AACR,QAAM,SAAS,MAAM,OAAO;GAC1B,MAAM,IAAI,OAAO;AACjB,UAAO,IAAI,KAAK,GAAG;IAAE,GAAG;IAAM;IAAG;IAAG;IAAG;IAAG,CAAC;AAC3C,QAAK;IACL;AACF,OAAK;GACL;AAIF,QAAO,OAAO,KAAK,SAAS,OAAO,IAAI,KAAK,EAAE,IAAI,KAAK"}