@cube-dev/ui-kit 0.0.0-canary-d326767 → 0.0.0-canary-2cd855f

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

@@ -1 +1 @@
-{"version":3,"file":"WidgetHost.js","names":["mergeProps"],"sources":["../../../../src/components/layout/Board/WidgetHost.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  ReactNode,\n  PointerEvent as ReactPointerEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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 { isDevEnv } from '../../../utils/is-dev-env';\nimport { mergeProps } from '../../../utils/react';\n\nimport {\n  BoardDragState,\n  BoardHost,\n  BoardHostContext,\n  BoardRegistryContextValue,\n  useBoardHost,\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 { BoardCornerPlacement, 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\n/**\n * How far a `corner`-placed hit-zone may reach *inward*: exactly the half of the\n * dot that is painted inside the widget, and no further. Reaching deeper would\n * park an invisible resize target over the widget's own content — and when that\n * content is a nested `Board`, the child in the bottom-right cell loses its own\n * corner handle to it and cannot be resized at all (CUB-4166).\n */\nconst CORNER_HIT_INWARD = GRIP_SIZE / 2;\n\n/**\n * Ceiling on how far the same hit-zone reaches *outward*, where there is only\n * grid gutter to cover. Past a whole grip size the target stops reading as \"that\n * dot\" and starts reading as \"somewhere near the corner\".\n */\nconst CORNER_HIT_OUTWARD_MAX = GRIP_SIZE;\n\n/**\n * Thickness of an `outside` grip: the band, measured out from the widget's edge,\n * that the affordance owns. It is the grid gutter where the gutter is big enough\n * to hold it, and this floor where it is not — an affordance thinner than this\n * stops being reliably clickable, so it overhangs the neighbour instead and the\n * board says so in development.\n */\nconst OUTSIDE_GRIP_MIN_BAND = 8;\n\n/** Length of an `outside` edge grip along the edge it belongs to. */\nconst OUTSIDE_GRIP_LENGTH = 24;\n\n/**\n * Painted thickness of an `outside` edge grip, which is deliberately less than\n * the band it sits in: the rest becomes a gap, so the control reads as a thing\n * lying in the gutter rather than as an extension of the widget's own edge.\n *\n * Only the PAINT is inset. The element keeps the whole band, so the target does\n * not shrink with the visual and the two still cannot drift apart.\n */\nconst OUTSIDE_GRIP_THICKNESS = 4;\n\n/** Gap between a widget's corner and its `outside` corner grip. */\nconst OUTSIDE_CORNER_GAP = 2;\n\n/**\n * How far an `outside` corner angle reaches out from the widget, given the gutter\n * it has to reach into: the full `GRIP_SIZE` where the gutter can take it, and\n * whatever is left over where it cannot.\n *\n * A corner grip sits in the square where the two gutters cross, which is empty —\n * but only as far as the gutters go. At `GRIP_SIZE` stepped `OUTSIDE_CORNER_GAP`\n * off the corner it reached 12px out, past the 8px gutter the defaults give it\n * and onto the diagonal neighbour, swallowing that widget's own corner. Shrinking\n * rather than warning because the angle still reads at 6px, and a grip that is a\n * little small is not the same order of problem as one covering someone else's\n * widget.\n *\n * `band` arrives floored at `OUTSIDE_GRIP_MIN_BAND`, so the result is never below\n * `OUTSIDE_GRIP_MIN_BAND - OUTSIDE_CORNER_GAP`.\n */\nfunction cornerGripExtent(band: number): number {\n  return Math.min(GRIP_SIZE, band - OUTSIDE_CORNER_GAP);\n}\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    '--handle-size': '3x',\n    '--handle-inset': '1x',\n    // An EDGE hit-zone is a band running along its edge, mostly inside the\n    // widget. It is a descendant of the host, so the sliver that hangs outside is\n    // eaten by the host's own clip and only the inward band is ever real.\n    '--edge-overhang': '-8px',\n    // A CORNER hit-zone under `corner` placement is the one that has to stay off\n    // its own content, so it is built from its two halves rather than as one\n    // square: it reaches `CORNER_HIT_INWARD` inward — the half-dot that is\n    // actually painted there, so what you see stays what you can grab — and takes\n    // the rest of its size outward, into the gutter. `WidgetHost` measures both\n    // and publishes them as `--corner-hit-size` / `--corner-hit-overhang`.\n    //\n    // `inside` placement keeps the plain 3x square: its dot sits in the content\n    // area by design, so it has nothing to stay clear of.\n    '--corner-overhang': {\n      '': '-8px',\n      'placement=corner': '$corner-hit-overhang',\n    },\n    '--corner-size': {\n      '': '$handle-size',\n      'placement=corner': '$corner-hit-size',\n    },\n    // Corner axes are the DEFAULT case in the six maps below, and each edge axis\n    // is named on its own, so a corner can never pick up an edge's geometry (it\n    // used to, via a shared `--handle-overhang`, which is how the inward reach\n    // above went unnoticed).\n    width: {\n      '': '$corner-size',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-size',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': 'auto',\n    },\n    height: {\n      '': '$corner-size',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$handle-size',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': 'auto',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"nw\"]': '$corner-overhang',\n      '[data-axis=\"n\"]': '$edge-overhang',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-inset',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"se\"] | [data-axis=\"sw\"]': '$corner-overhang',\n      '[data-axis=\"s\"]': '$edge-overhang',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$handle-inset',\n    },\n    left: {\n      '': 'auto',\n      '[data-axis=\"nw\"] | [data-axis=\"sw\"]': '$corner-overhang',\n      '[data-axis=\"w\"]': '$edge-overhang',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$handle-inset',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"ne\"] | [data-axis=\"se\"]': '$corner-overhang',\n      '[data-axis=\"e\"]': '$edge-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 * An `outside` grip: the visible control and the hit-zone in one element.\n *\n * The two used to be separate boxes of different sizes, aligned by hand, which is\n * how a 10px dot came to stand for a 24px target reaching back over the widget's\n * own content (CUB-4166). Here they cannot drift apart, because there is only one\n * box: what is painted is exactly what is grabbed.\n *\n * It lives in the grid gutter, beyond the widget's edge — never over the widget's\n * content, so a nested board's children keep every pixel of their own. The band\n * it occupies (`--grip-band-x` / `--grip-band-y`) is the gutter, floored at\n * `OUTSIDE_GRIP_MIN_BAND`. Rendered in `GripLayerElement`, which nothing clips.\n *\n * Always hit-testable, painted only once revealed: you have to be able to hover\n * it to reveal it, and `opacity` leaves hit-testing alone.\n */\nconst OutsideGripElement = tasty({\n  qa: 'BoardResizeHandle',\n  styles: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    pointerEvents: 'auto',\n    touchAction: 'none',\n    zIndex: 20,\n    opacity: {\n      '': 0,\n      revealed: 1,\n    },\n    transition: 'opacity 120ms ease-in-out, theme',\n    // Anchored to the edge it resizes and centred along it, so the control reads\n    // as belonging to that edge rather than floating near it.\n    left: {\n      '': 'auto',\n      '[data-axis=\"e\"] | [data-axis=\"ne\"] | [data-axis=\"se\"]': '100%',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '50%',\n    },\n    right: {\n      '': 'auto',\n      '[data-axis=\"w\"] | [data-axis=\"nw\"] | [data-axis=\"sw\"]': '100%',\n    },\n    top: {\n      '': 'auto',\n      '[data-axis=\"s\"] | [data-axis=\"se\"] | [data-axis=\"sw\"]': '100%',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '50%',\n    },\n    bottom: {\n      '': 'auto',\n      '[data-axis=\"n\"] | [data-axis=\"ne\"] | [data-axis=\"nw\"]': '100%',\n    },\n    // Edges centre themselves along the edge; corners step off it by the gap, so\n    // the angle sits clear of the widget it belongs to rather than touching it.\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      '[data-axis=\"se\"]': `translate(${OUTSIDE_CORNER_GAP}px, ${OUTSIDE_CORNER_GAP}px)`,\n      '[data-axis=\"sw\"]': `translate(${-OUTSIDE_CORNER_GAP}px, ${OUTSIDE_CORNER_GAP}px)`,\n      '[data-axis=\"ne\"]': `translate(${OUTSIDE_CORNER_GAP}px, ${-OUTSIDE_CORNER_GAP}px)`,\n      '[data-axis=\"nw\"]': `translate(${-OUTSIDE_CORNER_GAP}px, ${-OUTSIDE_CORNER_GAP}px)`,\n    },\n    // An edge grip spans the gutter band across, a fixed length along. A corner\n    // grip is the same angle the `inside` and `corner` placements draw - it is a\n    // familiar shape, and a filled dot read as a scrollbar rather than as a\n    // resize corner - sized to the gutter it reaches into (`cornerGripExtent`),\n    // one axis of the crossing per dimension.\n    width: {\n      '': '$outside-corner-w',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '$grip-band-x',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': `${OUTSIDE_GRIP_LENGTH}px`,\n    },\n    height: {\n      '': '$outside-corner-h',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$grip-band-y',\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': `${OUTSIDE_GRIP_LENGTH}px`,\n    },\n    // The gap on an edge grip: pad the band away on the thickness axis and clip\n    // the paint to what is left. The element - and so the target - is untouched.\n    padding: {\n      '': 0,\n      '[data-axis=\"e\"] | [data-axis=\"w\"]': '0 $grip-pad-x',\n      '[data-axis=\"n\"] | [data-axis=\"s\"]': '$grip-pad-y 0',\n    },\n    backgroundClip: 'content-box',\n    fill: {\n      '': '#clear',\n      '[data-axis=\"n\"] | [data-axis=\"s\"] | [data-axis=\"e\"] | [data-axis=\"w\"]':\n        '#dark.30',\n      '([data-axis=\"n\"] | [data-axis=\"s\"] | [data-axis=\"e\"] | [data-axis=\"w\"]) & resizing':\n        '#dark.50',\n    },\n    // Corner angles, mirroring `GripElement` so the two placements draw the same\n    // affordance in different places.\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      '': 'round',\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    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  },\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.\n *\n * Nothing clips this layer — `BoardElement` sets no `overflow` — so a grip on a\n * widget flush against its board's edge (`containerPadding: [0, 0]`, which\n * `isAligned` sets) is painted *outside* the board's content box rather than\n * cropped to fit inside it. Inside a nested board that puts it exactly on the\n * host widget's own corner: the two corners are the same point, so the two hit\n * zones cannot be separated by geometry, and `z-index` cannot arbitrate either\n * (this layer is a sibling of the host, so it outranks the whole nested subtree\n * whatever the inner handle asks for). `ResizeHandle` settles it by depth\n * instead.\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/**\n * A control anchored to one corner of a widget, centred on it.\n *\n * Lives in the same layer as the corner resize grips, which is the layer that\n * exists precisely because a widget clips its own content: a control an app\n * hangs off the corner itself is cropped in half by that clip, or by an\n * ancestor's scroll container when the widget sits in the first row. Here it is\n * a sibling of the widget rather than a descendant, so neither can reach it.\n *\n * Being outside the widget host also means `useMove` is not attached, so a press\n * on the chrome cannot start a drag — no `dragCancel` entry required.\n */\nconst CornerChromeElement = tasty({\n  qa: 'BoardWidgetCornerChrome',\n  styles: {\n    position: 'absolute',\n    // The layer takes no pointer events; chrome is interactive, so it opts back in.\n    pointerEvents: 'auto',\n    zIndex: 1,\n    top: {\n      '': 'auto',\n      'corner=ne | corner=nw': 0,\n    },\n    bottom: {\n      '': 'auto',\n      'corner=se | corner=sw': 0,\n    },\n    left: {\n      '': 'auto',\n      'corner=nw | corner=sw': 0,\n    },\n    right: {\n      '': 'auto',\n      'corner=ne | corner=se': 0,\n    },\n    // Centre it on the corner: half of its own size in each direction. The\n    // default matches `ne`, which is also the default placement, so chrome is\n    // still centred rather than hanging off-centre if no corner mod matches.\n    transform: {\n      '': 'translate(50%, -50%)',\n      'corner=nw': 'translate(-50%, -50%)',\n      'corner=se': 'translate(50%, 50%)',\n      'corner=sw': 'translate(-50%, 50%)',\n    },\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\n/** `data-qa` of a resize hit-zone, as published by `HandleElement`. */\nconst HANDLE_QA = 'BoardResizeHandle';\n\n/**\n * The deepest resize hit-zone under `point` belonging to a board nested deeper\n * than `depth`, or `null` when the caller is already the innermost one there.\n *\n * Asked of the document rather than of a registry, deliberately: the two handles\n * belong to different boards, which share no owner below the app root, and \"what\n * is under this pixel\" is the browser's own question to answer.\n * `elementsFromPoint` skips `pointer-events: none` nodes, so everything it hands\n * back is something the pointer could genuinely have landed on.\n */\nfunction findDeeperHandle(\n  point: { x: number; y: number },\n  depth: number,\n): HTMLElement | null {\n  let stack: Element[];\n\n  try {\n    // Absent in jsdom, where the pointer path is not exercised anyway.\n    if (typeof document.elementsFromPoint !== 'function') return null;\n    stack = document.elementsFromPoint(point.x, point.y);\n  } catch {\n    return null;\n  }\n\n  let deepest: HTMLElement | null = null;\n  let deepestDepth = depth;\n\n  for (const node of stack) {\n    if (!(node instanceof HTMLElement)) continue;\n    if (node.dataset.qa !== HANDLE_QA) continue;\n    const nodeDepth = Number(node.dataset.boardDepth);\n    if (!Number.isFinite(nodeDepth) || nodeDepth <= deepestDepth) continue;\n    deepest = node;\n    deepestDepth = nodeDepth;\n  }\n\n  return deepest;\n}\n\n/**\n * Hand a press to `target` unchanged.\n *\n * Safe because of how `useMove` (which owns the resize gesture) tracks a\n * pointer: through `window` listeners matched on `pointerId`, never through\n * `setPointerCapture`. So only the opening `pointerdown` is re-dispatched — every\n * real `pointermove`/`pointerup` that follows drives the forwarded gesture just\n * as it would drive a direct one.\n */\nfunction forwardPointerDown(e: ReactPointerEvent, target: HTMLElement): void {\n  const forwarded = new PointerEvent('pointerdown', {\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n    pointerId: e.pointerId,\n    pointerType: e.pointerType,\n    isPrimary: e.isPrimary,\n    button: e.button,\n    buttons: e.buttons,\n    clientX: e.clientX,\n    clientY: e.clientY,\n    screenX: e.screenX,\n    screenY: e.screenY,\n    shiftKey: e.shiftKey,\n    ctrlKey: e.ctrlKey,\n    altKey: e.altKey,\n    metaKey: e.metaKey,\n  });\n\n  // `useMove` seeds the gesture from the PAGE pair and then measures every later\n  // delta against it, so a wrong seed does not merely offset the resize - it\n  // makes the first move jump. `pageX`/`pageY` are not init-dictionary members\n  // (they are derived from the client pair), so copy the originals across instead\n  // of trusting the derivation to agree with the real events that follow.\n  Object.defineProperty(forwarded, 'pageX', {\n    value: e.pageX,\n    configurable: true,\n  });\n  Object.defineProperty(forwarded, 'pageY', {\n    value: e.pageY,\n    configurable: true,\n  });\n\n  target.dispatchEvent(forwarded);\n}\n\n/**\n * Warnings already emitted, keyed by their own text. A widget that yields its\n * only resize affordance is a layout mistake, not an event: it is the same\n * mistake every single time the user reaches for that corner, so it is worth\n * saying exactly once.\n */\nconst yieldWarnings = new Set<string>();\n\nfunction warnOnce(message: string | undefined): void {\n  if (!message || yieldWarnings.has(message)) return;\n  yieldWarnings.add(message);\n  console.warn(message);\n}\n\ninterface ResizeHandleProps {\n  axis: ResizeHandleAxis;\n  placement: BoardResizeGripPlacement;\n  /** Nesting depth of the board this handle's widget belongs to. */\n  boardDepth: number;\n  /**\n   * What to warn (once) if this handle yields to a deeper one and its widget has\n   * no edge axis left to be resized from. Built by `WidgetHost`, and `undefined`\n   * when the widget does have a fallback or in production.\n   */\n  yieldWarning?: string;\n  /**\n   * `outside` placement only, where the control and the hit-zone are one element:\n   * whether it is currently painted. It stays hit-testable either way — you have\n   * to be able to hover it to reveal it.\n   */\n  isRevealed?: boolean;\n  /** `outside` placement only: whether a resize is in flight on this widget. */\n  isResizing?: boolean;\n  onResize: (\n    axis: ResizeHandleAxis,\n    phase: ResizePhase,\n    dx: number,\n    dy: number,\n  ) => void;\n}\n\nfunction ResizeHandle({\n  axis,\n  placement,\n  boardDepth,\n  yieldWarning,\n  isRevealed,\n  isResizing,\n  onResize,\n}: 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: ReactPointerEvent) => e.stopPropagation(),\n    onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),\n    onTouchStart: (e: React.TouchEvent) => e.stopPropagation(),\n  };\n\n  const handleProps = mergeProps(stopProps, moveProps);\n\n  /**\n   * Two resize hit-zones can want the same pixel. A `corner`-placed zone\n   * straddles its widget's corner, and in a nested board that sits flush — which\n   * `isAligned` guarantees, since it pins `containerPadding` to `[0, 0]` — the\n   * host widget's corner and its bottom-right child's corner ARE one point.\n   * Geometry has nothing left to separate them with, and `z-index` cannot\n   * arbitrate either (see `GripLayerElement`), so the tie is broken here: the\n   * innermost handle takes the press. It is the more specific target, and the\n   * outer widget can still be resized from its edges — where it has any, which is\n   * what `yieldWarning` is about.\n   *\n   * Decided on the press rather than on hover so that touch, which has no hover\n   * to decide on, is covered by the same code. Nothing is lost by deciding this\n   * late: both handles ask for the same resize cursor anyway.\n   */\n  const onPointerDown = (e: ReactPointerEvent) => {\n    const deeper = findDeeperHandle({ x: e.clientX, y: e.clientY }, boardDepth);\n\n    if (deeper) {\n      // The press still must not reach the host and start a widget drag.\n      e.stopPropagation();\n      e.preventDefault();\n      warnOnce(yieldWarning);\n      forwardPointerDown(e, deeper);\n      return;\n    }\n\n    handleProps.onPointerDown?.(e);\n  };\n\n  // `outside` is one element for the control and its hit-zone; the other\n  // placements keep a transparent zone with a separate grip drawn near it.\n  const Element = placement === 'outside' ? OutsideGripElement : HandleElement;\n\n  return (\n    <Element\n      data-axis={axis}\n      // Read by `findDeeperHandle` on a handle it can only reach through the DOM.\n      data-board-depth={boardDepth}\n      mods={{ placement, revealed: isRevealed, resizing: isResizing }}\n      {...handleProps}\n      onPointerDown={onPointerDown}\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  /** Corner-anchored chrome, drawn outside the widget's clip. */\n  cornerChrome?: ReactNode;\n  /** Which corner {@link cornerChrome} is centred on. */\n  cornerChromePlacement?: BoardCornerPlacement;\n  /** App-defined modifiers merged into the host's own, for style maps to match. */\n  mods?: Record<string, boolean | string | undefined>;\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 resize grips sit, if a consumer said. Resolved by the owning `Board`\n   * from the per-widget `resizeGripPlacement`, the board-level\n   * `widgetProps.resizeGripPlacement`, and the board's own prop — and left\n   * `undefined` when none of them set it, in which case this host resolves it from\n   * its own content: `outside` for a widget holding a nested `Board`, `inside`\n   * otherwise.\n   */\n  resizeGripPlacement?: BoardResizeGripPlacement;\n  /**\n   * Nesting depth of the owning board (0 at the top level). Published on every\n   * resize hit-zone so a press on a corner two boards share can be settled by\n   * depth — see `ResizeHandle`.\n   */\n  boardDepth: number;\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    cornerChrome,\n    cornerChromePlacement = 'ne',\n    mods: customMods,\n    styles: widgetStyles,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    resizeGripPlacement,\n    boardDepth,\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  // How many nested `Board`s this widget is holding. A count rather than a flag\n  // because a widget may hold more than one (a Tabs panel per board), and each\n  // registers and deregisters on its own schedule.\n  const [nestedBoardCount, setNestedBoardCount] = useState(0);\n  const registerNestedBoard = useEvent(() => {\n    setNestedBoardCount((count) => count + 1);\n\n    return () => setNestedBoardCount((count) => Math.max(0, count - 1));\n  });\n\n  // Whether the pointer is on a widget of a board nested inside this one. Also a\n  // count: the pointer can be leaving one child as it arrives on another, and the\n  // two reports interleave.\n  const [descendantHoverCount, setDescendantHoverCount] = useState(0);\n  const setDescendantHovered = useEvent((hovered: boolean) => {\n    setDescendantHoverCount((count) => Math.max(0, count + (hovered ? 1 : -1)));\n  });\n\n  const hostValue = useMemo<BoardHost>(\n    () => ({\n      isAutoHeight,\n      requestHeightDeficit,\n      registerNestedBoard,\n      setDescendantHovered,\n    }),\n    [\n      isAutoHeight,\n      requestHeightDeficit,\n      registerNestedBoard,\n      setDescendantHovered,\n    ],\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  // Where this widget's grips go, when nobody said explicitly.\n  //\n  // A widget holding a board puts them OUTSIDE its box, in the grid gutter; every\n  // other widget keeps them INSIDE. That is what stops the two levels of a nested\n  // board claiming the same pixel: the container's affordance is beyond its edge,\n  // its children's are within theirs, and no geometry is shared. An explicit\n  // `resizeGripPlacement` still wins - a consumer that wants the old look, or\n  // wants a container's grips inside, says so.\n  const placement: BoardResizeGripPlacement =\n    resizeGripPlacement ?? (nestedBoardCount > 0 ? 'outside' : 'inside');\n\n  // Report this widget's hover to the container holding it (null at the top\n  // level), so only one level of a nested board shows grips at a time. Balanced\n  // by construction: the cleanup runs on un-hover and on unmount, so a widget\n  // that disappears mid-hover cannot leave its container stood down for good.\n  //\n  // The grip layer counts as this widget, not as a gap between it and its\n  // container. It matters once this widget is itself a container — three levels\n  // deep, a widget holding a board inside a board — because then its own grips\n  // are `outside`, in the gutter, off its box. Reporting only `isHovered` there\n  // left the pointer sitting on this widget's grips while the container above\n  // still thought nothing of its own was hovered, and both levels lit up at once:\n  // exactly the collision the placement split exists to prevent.\n  const parentHost = useBoardHost();\n  const reportHoverToHost = parentHost?.setDescendantHovered;\n  const isSelfHovered = isHovered || isLayerHovered;\n  useEffect(() => {\n    if (!reportHoverToHost || !isSelfHovered) return;\n\n    reportHoverToHost(true);\n\n    return () => reportHoverToHost(false);\n  }, [reportHoverToHost, isSelfHovered]);\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  //\n  // A container stands down while the pointer is on one of its children: the\n  // pointer is inside every ancestor at once, so without this, hovering a child\n  // lights up its grips and every container's above it.\n  const gripsRevealed =\n    isResizable &&\n    !item.static &&\n    !isActiveDrag &&\n    !descendantHoverCount &&\n    (isSelfHovered || 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   * Pressing something interactive means the user has moved on from the\n   * selection, so the selection is dropped — always, whatever the control is and\n   * whatever it does with the event.\n   *\n   * That \"always\" is why this is a *capture*-phase handler and not part of\n   * `handleSelectPointerDown` below. A bubble-phase handler only sees the\n   * presses that reach the host, and a control is free to call\n   * `stopPropagation()` before that happens — React Aria's `usePress` does it by\n   * default, which is why some in-widget buttons dropped the selection and\n   * others silently did not. Capture runs top-down, so it lands before any\n   * descendant can speak. Portaled controls (a menu opened from a widget's\n   * toolbar) are covered too: React propagates events along the React tree, so a\n   * portal declared inside this widget still passes through here.\n   *\n   * Nothing is stopped or prevented here — the handler only reads the target, so\n   * the control keeps its press, its focus and its default behaviour intact.\n   */\n  const handleSelectPointerDownCapture = (e: React.PointerEvent) => {\n    if (!isSelectable || e.button !== 0) return;\n\n    if (isInteractiveTarget(e.target)) {\n      onSelectionReset?.();\n    }\n  };\n\n  // The React capture handler above is dispatched from the React root, so a\n  // descendant that stops the *native* event (charting and mapping libraries\n  // attach their own listeners and do exactly that) keeps it from ever reaching\n  // React — capture phase included. A native capture listener on the host node\n  // itself sits below any such descendant and cannot be pre-empted. The two\n  // overlap for the ordinary case and that costs nothing: clearing an already\n  // empty selection is a no-op.\n  useEffect(() => {\n    const node = hostRef.current;\n\n    if (!node || !isSelectable || !selectionCancel || !onSelectionReset) return;\n\n    const handleCapture = (event: PointerEvent) => {\n      if (event.button !== 0) return;\n\n      const target = event.target as HTMLElement | null;\n\n      if (target?.closest?.(selectionCancel)) {\n        onSelectionReset();\n      }\n    };\n\n    node.addEventListener('pointerdown', handleCapture, true);\n\n    return () => node.removeEventListener('pointerdown', handleCapture, true);\n  }, [isSelectable, selectionCancel, onSelectionReset]);\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   *    press is left alone (the selection was already dropped in the capture\n   *    phase above);\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)) return;\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        onPointerDownCapture: handleSelectPointerDownCapture,\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  // A widget whose only resize axes are corners has nothing to fall back on if a\n  // nested board's child takes one of those corners from it (see `ResizeHandle`).\n  // That is a layout mistake with no visible symptom other than \"resizing this\n  // container does nothing\", so say so out loud — but only when it actually\n  // happens, since whether a child sits in that corner is a runtime question.\n  const cornerYieldWarning =\n    isDevEnv() && !resizeHandles.some(isEdgeAxis)\n      ? `Board: widget \"${item.i}\" yielded a resize press to a handle of a board nested inside it, because their handles sit on the same point (a nested board with no \\`containerPadding\\` puts its last child's corner exactly on its host's). The innermost handle wins, and this widget has only corner \\`resizeHandles\\`, so it can no longer be resized there. Give it an edge axis to fall back on (e.g. \\`resizeHandles={['se', 'e', 's']}\\`), or give the nested board some \\`containerPadding\\` so the two corners stop coinciding.`\n      : undefined;\n\n  // An `outside` grip needs gutter to sit in. Warn where there is not enough,\n  // since the fallback (keep the band, overhang the neighbour) is visible and the\n  // fix — widen `margin` — belongs to the board, not to the widget.\n  //\n  // `isDevEnv()` rather than a bare `process.env.NODE_ENV` check: the build folds\n  // that constant away and keeps whichever branch it resolved to, so a\n  // `!== 'production'` guard compiled at a dev NODE_ENV disappears and leaves the\n  // warning firing in consumers' production bundles. `isDevEnv()` is evaluated at\n  // runtime, so one build serves both — the same reason Tasty's diagnostics do it.\n  if (isDevEnv() && placement === 'outside') {\n    const [marginX, marginY] = positionParams.margin;\n\n    if (marginX < OUTSIDE_GRIP_MIN_BAND || marginY < OUTSIDE_GRIP_MIN_BAND) {\n      warnOnce(\n        `Board: widget \"${item.i}\" holds a nested board, so its resize grips are drawn outside its box - but this board's \\`margin\\` is [${marginX}, ${marginY}] and a grip needs ${OUTSIDE_GRIP_MIN_BAND}px of gutter to sit in. The grips keep their size and overhang the neighbouring widgets. Raise \\`margin\\` to at least ${OUTSIDE_GRIP_MIN_BAND}px on both axes, or set \\`resizeGripPlacement\\` explicitly to put them back inside.`,\n      );\n    }\n  }\n\n  const content = (\n    <BoardHostContext.Provider value={hostValue}>\n      {registration?.content}\n      {isResizable && !item.static && placement !== 'outside' ? (\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. Under\n              `outside` the whole set moves there and this branch renders nothing:\n              no part of the affordance belongs over the widget's own content. */}\n          {(placement === 'corner'\n            ? resizeHandles.filter((axis) => !isCornerAxis(axis))\n            : resizeHandles\n          ).map((axis) => (\n            <ResizeHandle\n              key={axis}\n              axis={axis}\n              placement={placement}\n              boardDepth={boardDepth}\n              yieldWarning={cornerYieldWarning}\n              onResize={handleResize}\n            />\n          ))}\n          {placement === '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  // A corner hit-zone reaches only `CORNER_HIT_INWARD` into the widget, so the\n  // rest of its size has to come from outward, where there is nothing but grid\n  // gutter to cover. Half the gutter is the ceiling: past the midline the zone\n  // would start eating into the NEIGHBOUR's content, which is the same bug\n  // pointing the other way. `CORNER_HIT_INWARD` is the floor, so the zone is\n  // never smaller than the dot it stands for even on a gutterless board — there\n  // it matches the dot exactly, overhang for overhang.\n  const cornerHitOutward = Math.min(\n    CORNER_HIT_OUTWARD_MAX,\n    Math.max(\n      CORNER_HIT_INWARD,\n      Math.min(positionParams.margin[0], positionParams.margin[1]) / 2,\n    ),\n  );\n\n  // An `outside` grip owns a band measured out from the widget's edge: the grid\n  // gutter, where the gutter can hold it. Below the floor it keeps the floor and\n  // overhangs the neighbour instead — an affordance too thin to hit is worse than\n  // one that encroaches, and the warning below makes the encroachment a choice\n  // rather than a surprise.\n  const gripBand: [number, number] = [\n    Math.max(OUTSIDE_GRIP_MIN_BAND, positionParams.margin[0]),\n    Math.max(OUTSIDE_GRIP_MIN_BAND, positionParams.margin[1]),\n  ];\n\n  // Published on the host as well as on the grip layer. Both carry handles for\n  // this same widget — edge axes stay inside the host, corner axes are hoisted\n  // out — and a handle whose geometry depended on which of the two it happened to\n  // land in would be a trap for the next person to move one.\n  const cornerHitVars = {\n    '--corner-hit-size': `${CORNER_HIT_INWARD + cornerHitOutward}px`,\n    '--corner-hit-overhang': `${-cornerHitOutward}px`,\n    '--grip-band-x': `${gripBand[0]}px`,\n    '--grip-band-y': `${gripBand[1]}px`,\n    // What the band gives up to the gap, split evenly so the painted pill floats\n    // in the middle of the gutter instead of leaning on one side of it.\n    '--grip-pad-x': `${Math.max(0, (gripBand[0] - OUTSIDE_GRIP_THICKNESS) / 2)}px`,\n    '--grip-pad-y': `${Math.max(0, (gripBand[1] - OUTSIDE_GRIP_THICKNESS) / 2)}px`,\n    // A corner grip lies in the square where the two gutters cross, so each of\n    // its dimensions is bounded by its own axis's band.\n    '--outside-corner-w': `${cornerGripExtent(gripBand[0])}px`,\n    '--outside-corner-h': `${cornerGripExtent(gripBand[1])}px`,\n  } as CSSProperties;\n\n  const hostStyle: CSSProperties = {\n    ...cornerHitVars,\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  // App mods go UNDER the board's own: a custom mod must never be able to\n  // shadow `selected`, `drag` and friends, which the board's own style map and\n  // its accessibility wiring both depend on.\n  const hostMods = {\n    ...customMods,\n    ...mods,\n    drag: isActiveDrag && !floatInOverlay,\n    settled,\n  };\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          // `hostMods` rather than `mods`, so the app's own modifiers survive the\n          // gesture: the clone IS the widget while a pointer drag is in flight\n          // (the in-grid host is hidden), and a custom state blinking off for the\n          // duration of the drag is exactly when it would be most noticeable.\n          mods={{ ...hostMods, 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  // Grips that must escape the widget's clip, hoisted into `GripLayerElement`\n  // (see its own note). Positioned on the same grid rect as the host, so the two\n  // stay in step through reflows and auto-height changes.\n  //\n  // Under `corner` that is the corner axes, whose grips straddle the edge. Under\n  // `outside` it is every axis, since the whole affordance lives in the gutter.\n  const layerAxes =\n    isResizable && !item.static\n      ? placement === 'outside'\n        ? resizeHandles\n        : placement === 'corner'\n          ? resizeHandles.filter(isCornerAxis)\n          : []\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  // The layer is also what carries corner chrome, so it renders when either the\n  // grips or the chrome need it.\n  const gripLayer =\n    (layerAxes.length || cornerChrome) && !floatInOverlay ? (\n      <GripLayerElement\n        {...layerHoverProps}\n        style={{\n          ...cornerHitVars,\n          left: `${pos.left}px`,\n          top: `${pos.top}px`,\n          width: `${pos.width}px`,\n          height: `${pos.height}px`,\n        }}\n        // Only the grips are decorative. Chrome is real, focusable UI, so the\n        // layer can only be hidden from assistive tech when it holds no chrome.\n        aria-hidden={cornerChrome ? undefined : 'true'}\n      >\n        {layerAxes.map((axis) => (\n          <ResizeHandle\n            key={`handle-${axis}`}\n            axis={axis}\n            placement={placement}\n            boardDepth={boardDepth}\n            yieldWarning={cornerYieldWarning}\n            isRevealed={gripsRevealed}\n            isResizing={isResizing}\n            onResize={handleResize}\n          />\n        ))}\n        {/* `outside` needs no separate grip: its hit-zone IS the control. */}\n        {placement === 'outside'\n          ? null\n          : layerAxes.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        {cornerChrome ? (\n          <CornerChromeElement mods={{ corner: cornerChromePlacement }}>\n            {cornerChrome}\n          </CornerChromeElement>\n        ) : null}\n      </GripLayerElement>\n    ) : null;\n\n  return (\n    <>\n      {host}\n      {gripLayer}\n      {overlayClone}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WidgetHost.js","names":["mergeProps"],"sources":["../../../../src/components/layout/Board/WidgetHost.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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 { BoardCornerPlacement, 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/**\n * A control anchored to one corner of a widget, centred on it.\n *\n * Lives in the same layer as the corner resize grips, which is the layer that\n * exists precisely because a widget clips its own content: a control an app\n * hangs off the corner itself is cropped in half by that clip, or by an\n * ancestor's scroll container when the widget sits in the first row. Here it is\n * a sibling of the widget rather than a descendant, so neither can reach it.\n *\n * Being outside the widget host also means `useMove` is not attached, so a press\n * on the chrome cannot start a drag — no `dragCancel` entry required.\n */\nconst CornerChromeElement = tasty({\n  qa: 'BoardWidgetCornerChrome',\n  styles: {\n    position: 'absolute',\n    // The layer takes no pointer events; chrome is interactive, so it opts back in.\n    pointerEvents: 'auto',\n    zIndex: 1,\n    top: {\n      '': 'auto',\n      'corner=ne | corner=nw': 0,\n    },\n    bottom: {\n      '': 'auto',\n      'corner=se | corner=sw': 0,\n    },\n    left: {\n      '': 'auto',\n      'corner=nw | corner=sw': 0,\n    },\n    right: {\n      '': 'auto',\n      'corner=ne | corner=se': 0,\n    },\n    // Centre it on the corner: half of its own size in each direction. The\n    // default matches `ne`, which is also the default placement, so chrome is\n    // still centred rather than hanging off-centre if no corner mod matches.\n    transform: {\n      '': 'translate(50%, -50%)',\n      'corner=nw': 'translate(-50%, -50%)',\n      'corner=se': 'translate(50%, 50%)',\n      'corner=sw': 'translate(-50%, 50%)',\n    },\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  /** Corner-anchored chrome, drawn outside the widget's clip. */\n  cornerChrome?: ReactNode;\n  /** Which corner {@link cornerChrome} is centred on. */\n  cornerChromePlacement?: BoardCornerPlacement;\n  /** App-defined modifiers merged into the host's own, for style maps to match. */\n  mods?: Record<string, boolean | string | undefined>;\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    cornerChrome,\n    cornerChromePlacement = 'ne',\n    mods: customMods,\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   * Pressing something interactive means the user has moved on from the\n   * selection, so the selection is dropped — always, whatever the control is and\n   * whatever it does with the event.\n   *\n   * That \"always\" is why this is a *capture*-phase handler and not part of\n   * `handleSelectPointerDown` below. A bubble-phase handler only sees the\n   * presses that reach the host, and a control is free to call\n   * `stopPropagation()` before that happens — React Aria's `usePress` does it by\n   * default, which is why some in-widget buttons dropped the selection and\n   * others silently did not. Capture runs top-down, so it lands before any\n   * descendant can speak. Portaled controls (a menu opened from a widget's\n   * toolbar) are covered too: React propagates events along the React tree, so a\n   * portal declared inside this widget still passes through here.\n   *\n   * Nothing is stopped or prevented here — the handler only reads the target, so\n   * the control keeps its press, its focus and its default behaviour intact.\n   */\n  const handleSelectPointerDownCapture = (e: React.PointerEvent) => {\n    if (!isSelectable || e.button !== 0) return;\n\n    if (isInteractiveTarget(e.target)) {\n      onSelectionReset?.();\n    }\n  };\n\n  // The React capture handler above is dispatched from the React root, so a\n  // descendant that stops the *native* event (charting and mapping libraries\n  // attach their own listeners and do exactly that) keeps it from ever reaching\n  // React — capture phase included. A native capture listener on the host node\n  // itself sits below any such descendant and cannot be pre-empted. The two\n  // overlap for the ordinary case and that costs nothing: clearing an already\n  // empty selection is a no-op.\n  useEffect(() => {\n    const node = hostRef.current;\n\n    if (!node || !isSelectable || !selectionCancel || !onSelectionReset) return;\n\n    const handleCapture = (event: PointerEvent) => {\n      if (event.button !== 0) return;\n\n      const target = event.target as HTMLElement | null;\n\n      if (target?.closest?.(selectionCancel)) {\n        onSelectionReset();\n      }\n    };\n\n    node.addEventListener('pointerdown', handleCapture, true);\n\n    return () => node.removeEventListener('pointerdown', handleCapture, true);\n  }, [isSelectable, selectionCancel, onSelectionReset]);\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   *    press is left alone (the selection was already dropped in the capture\n   *    phase above);\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)) return;\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        onPointerDownCapture: handleSelectPointerDownCapture,\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  // App mods go UNDER the board's own: a custom mod must never be able to\n  // shadow `selected`, `drag` and friends, which the board's own style map and\n  // its accessibility wiring both depend on.\n  const hostMods = {\n    ...customMods,\n    ...mods,\n    drag: isActiveDrag && !floatInOverlay,\n    settled,\n  };\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          // `hostMods` rather than `mods`, so the app's own modifiers survive the\n          // gesture: the clone IS the widget while a pointer drag is in flight\n          // (the in-grid host is hidden), and a custom state blinking off for the\n          // duration of the drag is exactly when it would be most noticeable.\n          mods={{ ...hostMods, 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  // The layer is also what carries corner chrome, so it renders when either the\n  // grips or the chrome need it.\n  const gripLayer =\n    (cornerAxes.length || cornerChrome) && !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        // Only the grips are decorative. Chrome is real, focusable UI, so the\n        // layer can only be hidden from assistive tech when it holds no chrome.\n        aria-hidden={cornerChrome ? undefined : '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        {cornerChrome ? (\n          <CornerChromeElement mods={{ corner: cornerChromePlacement }}>\n            {cornerChrome}\n          </CornerChromeElement>\n        ) : null}\n      </GripLayerElement>\n    ) : null;\n\n  return (\n    <>\n      {host}\n      {gripLayer}\n      {overlayClone}\n    </>\n  );\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"board-context.js","names":[],"sources":["../../../../src/components/layout/Board/board-context.tsx"],"sourcesContent":["import { createContext, MutableRefObject, useContext } from 'react';\n\nimport type { BoardWidgetStore } from './board-store';\nimport type {\n  CollisionMode,\n  Compactor,\n  LayoutConstraint,\n  LayoutItem,\n  PositionParams,\n} from './grid-core';\nimport type { BoardLayoutChangeReason } from './use-board-layout';\n\n/** A rectangle in viewport (client) coordinates. */\nexport interface ViewportRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Everything the cross-board registry needs to read from / write to a single\n * board. Methods read live refs so a single stable entry can be registered once\n * per board and stay current across renders.\n */\nexport interface BoardEntry {\n  id: string;\n  /** Viewport rect of the content area where widgets are positioned. */\n  getContentRect: () => DOMRect | null;\n  /** The DOM node of the content area (used to detect nested-in-drag boards). */\n  getContentNode: () => HTMLElement | null;\n  getPositionParams: () => PositionParams;\n  getConstraints: () => LayoutConstraint[];\n  getCompactor: () => Compactor;\n  /**\n   * How this board resolves a placement its compactor would otherwise refuse.\n   * A board-level policy rather than part of the `Compactor`, which is a public\n   * type consumers implement.\n   */\n  getCollisionMode: () => CollisionMode;\n  getMaxRows: () => number;\n  getContainerHeight: () => number;\n  getLayout: () => LayoutItem[];\n  /**\n   * Keys of the widgets currently selected on this board, or `null` when the\n   * board has no selection. Read at drag start to decide whether the gesture\n   * moves one widget or a whole group.\n   */\n  getSelectedKeys: () => ReadonlySet<string> | null;\n  /** Update the board layout. `commit` fires `onLayoutChange`. */\n  applyLayout: (\n    layout: LayoutItem[],\n    commit: boolean,\n    reason?: BoardLayoutChangeReason,\n  ) => void;\n  /** Replace every drop-slot preview. Pass `[]` to clear. */\n  setPlaceholders: (items: LayoutItem[]) => void;\n  isDroppable: () => boolean;\n}\n\n/** Emitted when a widget is dropped from one board into another. */\nexport interface WidgetTransferInfo {\n  widgetId: string;\n  fromBoardId: string;\n  toBoardId: string;\n  item: LayoutItem;\n}\n\n/** Live drag state, shared across boards for overlay + placeholders. */\nexport interface BoardDragState {\n  sourceBoardId: string;\n  /** Board currently owning the dragged item (changes as it crosses boards). */\n  currentBoardId: string;\n  itemId: string;\n  /** Snapshot of the dragged item (grid units; w/h preserved across boards). */\n  item: LayoutItem;\n  /**\n   * Every widget moving in this gesture, the grabbed one first. Length 1 for an\n   * ordinary drag, so `itemIds[0] === itemId` always holds and any check against\n   * this set is a strict superset of the equivalent check against `itemId`.\n   */\n  itemIds: string[];\n  /** Drag-start snapshots of `itemIds`, in the same order. */\n  items: LayoutItem[];\n  /** Dragged widget rect in viewport coordinates (follows the pointer). */\n  rect: ViewportRect;\n  /** `rect` as measured at drag start — lets any host derive the gesture delta. */\n  startRect: ViewportRect;\n  /**\n   * Viewport rect of every group member's host, measured once at drag start.\n   * Drag start is the only safe window to measure (see `frozenRectsRef` in the\n   * registry); measuring later would feed the preview back into itself.\n   */\n  memberRects: Map<string, ViewportRect>;\n  pointerType: string;\n  /**\n   * Ids of boards nested inside the dragged widget, captured at drag start.\n   * Such a board is never a drop target, and it suppresses its own grid-line\n   * overlay while its host widget is being dragged (the whole widget floats, so\n   * the inner grid lines would only add clutter).\n   */\n  nestedBoardIds: Set<string>;\n}\n\nexport interface BoardRegistryContextValue {\n  store: BoardWidgetStore;\n  overlayRef: MutableRefObject<HTMLDivElement | null>;\n  registerBoard: (entry: BoardEntry) => () => void;\n  onDragStart: (\n    boardId: string,\n    itemId: string,\n    rect: ViewportRect,\n    pointerType: string,\n    /** The dragged widget's host node, used to exclude boards nested inside it. */\n    widgetNode: HTMLElement | null,\n  ) => void;\n  onDragMove: (deltaX: number, deltaY: number, pointerType: string) => void;\n  onDragEnd: () => void;\n  dragState: BoardDragState | null;\n  /**\n   * Synchronously-updated mirror of `dragState`. `dragState` is React state, so\n   * a handler running in the same tick as `onDragStart` — such as the drag\n   * lifecycle `WidgetHost` fires immediately afterwards — still sees the\n   * previous value and must read this instead.\n   */\n  getDragState: () => BoardDragState | null;\n}\n\nexport const BoardRegistryContext =\n  createContext<BoardRegistryContextValue | null>(null);\n\nexport function useBoardRegistry(): BoardRegistryContextValue | null {\n  return useContext(BoardRegistryContext);\n}\n\n/**\n * A stable boolean signalling whether a Board widget is currently being\n * dragged. Provided by `BoardProvider` (and therefore by any standalone\n * `Board`, which self-wraps in one). Unlike the full `dragState`, this only\n * flips on drag start/end, so components that only care about \"is a drag in\n * progress\" (e.g. `Tabs` spring-loading a tab on hover) can subscribe without\n * re-rendering on every pointer move. Defaults to `false` outside any Board.\n */\nexport const BoardDragActiveContext = createContext<boolean>(false);\n\nexport function useBoardDragActive(): boolean {\n  return useContext(BoardDragActiveContext);\n}\n\n/**\n * What a nested `Board` inherits as its `showGridLines` default. The drag-scoped\n * subset of `BoardGridLines`: an ancestor's `true` is handed down as `'drag'`\n * (a nested board shows lines while a drag is in flight, not permanently), while\n * `'any-drag'` is handed down verbatim so the whole nested tree keeps advertising\n * every board a widget could land on.\n */\nexport type BoardInheritedGridLines = false | 'drag' | 'any-drag';\n\n/**\n * Whether an ancestor `Board` has its grid-line overlay enabled, and with which\n * drag scope. A nested board that does not set `showGridLines` explicitly reads\n * this to inherit the behaviour. Defaults to `false` outside any grid-lined\n * board.\n */\nexport const BoardGridLinesContext =\n  createContext<BoardInheritedGridLines>(false);\n\nexport function useBoardGridLines(): BoardInheritedGridLines {\n  return useContext(BoardGridLinesContext);\n}\n\n/**\n * The resolved grid metrics a `Board` exposes to any boards nested inside its\n * widgets. A nested board with `isAligned` reads these to inherit the parent's\n * column pitch (column width + horizontal margin) and target row height, so its\n * cells line up with the surrounding layout instead of stretching.\n */\nexport interface BoardMetrics {\n  /** Resolved pixel width of one parent column. */\n  colWidth: number;\n  /** Resolved parent row height in pixels (the alignment target). */\n  rowHeight: number;\n  /** Parent [horizontal, vertical] margin between widgets in pixels. */\n  margin: readonly [number, number];\n  /** Parent [horizontal, vertical] container padding in pixels. */\n  containerPadding: readonly [number, number];\n  /**\n   * How deep this board is nested: 0 for a top-level board, and one more for each\n   * board rendered inside a widget. Resize handles publish it as\n   * `data-board-depth` so a press on a corner that two boards' handles share can\n   * be settled by depth — see `ResizeHandle`.\n   */\n  depth: number;\n}\n\nexport const BoardMetricsContext = createContext<BoardMetrics | null>(null);\n\nexport function useBoardMetrics(): BoardMetrics | null {\n  return useContext(BoardMetricsContext);\n}\n\n/**\n * Information a `WidgetHost` exposes to the content it renders (including a\n * nested `Board`). Lets a nested board know whether its host widget auto-sizes\n * its height and, if so, ask the host to grow to fit the board's natural size.\n */\nexport interface BoardHost {\n  /** Whether the host widget grows its height to fit its content. */\n  isAutoHeight: boolean;\n  /**\n   * Ask the host widget to grow so it provides `px` more content height. Only\n   * ever increases the host's height. No-op when the host does not auto-size.\n   */\n  requestHeightDeficit: (px: number) => void;\n  /**\n   * A nested `Board` announces itself here, and the host widget answers by moving\n   * its own resize grips *outside* its box - see `resolveGripPlacement`. This is\n   * how the rule \"a widget's grips go inside it, a board container's go outside\"\n   * applies itself: a widget cannot inspect its own content, but a board can\n   * introduce itself to whatever is holding it.\n   *\n   * Returns the deregistration callback, so a board that unmounts (or moves to\n   * another host) hands the corner back.\n   */\n  registerNestedBoard: () => () => void;\n  /**\n   * A widget of a nested `Board` reports the pointer arriving on or leaving it, so\n   * its host can stand down and show only one set of grips at a time. Without\n   * this, hovering a child reveals the child's grips *and* every ancestor\n   * container's, since the pointer is inside all of them at once.\n   */\n  setDescendantHovered: (hovered: boolean) => void;\n}\n\nexport const BoardHostContext = createContext<BoardHost | null>(null);\n\nexport function useBoardHost(): BoardHost | null {\n  return useContext(BoardHostContext);\n}\n"],"mappings":";;;;AAgIA,MAAa,uBACX,cAAgD,KAAK;AAEvD,SAAgB,mBAAqD;AACnE,QAAO,WAAW,qBAAqB;;;;;;;;;;AAWzC,MAAa,yBAAyB,cAAuB,MAAM;AAEnE,SAAgB,qBAA8B;AAC5C,QAAO,WAAW,uBAAuB;;;;;;;;AAkB3C,MAAa,wBACX,cAAuC,MAAM;AAE/C,SAAgB,oBAA6C;AAC3D,QAAO,WAAW,sBAAsB;;AA2B1C,MAAa,sBAAsB,cAAmC,KAAK;AAE3E,SAAgB,kBAAuC;AACrD,QAAO,WAAW,oBAAoB;;AAoCxC,MAAa,mBAAmB,cAAgC,KAAK;AAErE,SAAgB,eAAiC;AAC/C,QAAO,WAAW,iBAAiB"}
+{"version":3,"file":"board-context.js","names":[],"sources":["../../../../src/components/layout/Board/board-context.tsx"],"sourcesContent":["import { createContext, MutableRefObject, useContext } from 'react';\n\nimport type { BoardWidgetStore } from './board-store';\nimport type {\n  CollisionMode,\n  Compactor,\n  LayoutConstraint,\n  LayoutItem,\n  PositionParams,\n} from './grid-core';\nimport type { BoardLayoutChangeReason } from './use-board-layout';\n\n/** A rectangle in viewport (client) coordinates. */\nexport interface ViewportRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Everything the cross-board registry needs to read from / write to a single\n * board. Methods read live refs so a single stable entry can be registered once\n * per board and stay current across renders.\n */\nexport interface BoardEntry {\n  id: string;\n  /** Viewport rect of the content area where widgets are positioned. */\n  getContentRect: () => DOMRect | null;\n  /** The DOM node of the content area (used to detect nested-in-drag boards). */\n  getContentNode: () => HTMLElement | null;\n  getPositionParams: () => PositionParams;\n  getConstraints: () => LayoutConstraint[];\n  getCompactor: () => Compactor;\n  /**\n   * How this board resolves a placement its compactor would otherwise refuse.\n   * A board-level policy rather than part of the `Compactor`, which is a public\n   * type consumers implement.\n   */\n  getCollisionMode: () => CollisionMode;\n  getMaxRows: () => number;\n  getContainerHeight: () => number;\n  getLayout: () => LayoutItem[];\n  /**\n   * Keys of the widgets currently selected on this board, or `null` when the\n   * board has no selection. Read at drag start to decide whether the gesture\n   * moves one widget or a whole group.\n   */\n  getSelectedKeys: () => ReadonlySet<string> | null;\n  /** Update the board layout. `commit` fires `onLayoutChange`. */\n  applyLayout: (\n    layout: LayoutItem[],\n    commit: boolean,\n    reason?: BoardLayoutChangeReason,\n  ) => void;\n  /** Replace every drop-slot preview. Pass `[]` to clear. */\n  setPlaceholders: (items: LayoutItem[]) => void;\n  isDroppable: () => boolean;\n}\n\n/** Emitted when a widget is dropped from one board into another. */\nexport interface WidgetTransferInfo {\n  widgetId: string;\n  fromBoardId: string;\n  toBoardId: string;\n  item: LayoutItem;\n}\n\n/** Live drag state, shared across boards for overlay + placeholders. */\nexport interface BoardDragState {\n  sourceBoardId: string;\n  /** Board currently owning the dragged item (changes as it crosses boards). */\n  currentBoardId: string;\n  itemId: string;\n  /** Snapshot of the dragged item (grid units; w/h preserved across boards). */\n  item: LayoutItem;\n  /**\n   * Every widget moving in this gesture, the grabbed one first. Length 1 for an\n   * ordinary drag, so `itemIds[0] === itemId` always holds and any check against\n   * this set is a strict superset of the equivalent check against `itemId`.\n   */\n  itemIds: string[];\n  /** Drag-start snapshots of `itemIds`, in the same order. */\n  items: LayoutItem[];\n  /** Dragged widget rect in viewport coordinates (follows the pointer). */\n  rect: ViewportRect;\n  /** `rect` as measured at drag start — lets any host derive the gesture delta. */\n  startRect: ViewportRect;\n  /**\n   * Viewport rect of every group member's host, measured once at drag start.\n   * Drag start is the only safe window to measure (see `frozenRectsRef` in the\n   * registry); measuring later would feed the preview back into itself.\n   */\n  memberRects: Map<string, ViewportRect>;\n  pointerType: string;\n  /**\n   * Ids of boards nested inside the dragged widget, captured at drag start.\n   * Such a board is never a drop target, and it suppresses its own grid-line\n   * overlay while its host widget is being dragged (the whole widget floats, so\n   * the inner grid lines would only add clutter).\n   */\n  nestedBoardIds: Set<string>;\n}\n\nexport interface BoardRegistryContextValue {\n  store: BoardWidgetStore;\n  overlayRef: MutableRefObject<HTMLDivElement | null>;\n  registerBoard: (entry: BoardEntry) => () => void;\n  onDragStart: (\n    boardId: string,\n    itemId: string,\n    rect: ViewportRect,\n    pointerType: string,\n    /** The dragged widget's host node, used to exclude boards nested inside it. */\n    widgetNode: HTMLElement | null,\n  ) => void;\n  onDragMove: (deltaX: number, deltaY: number, pointerType: string) => void;\n  onDragEnd: () => void;\n  dragState: BoardDragState | null;\n  /**\n   * Synchronously-updated mirror of `dragState`. `dragState` is React state, so\n   * a handler running in the same tick as `onDragStart` — such as the drag\n   * lifecycle `WidgetHost` fires immediately afterwards — still sees the\n   * previous value and must read this instead.\n   */\n  getDragState: () => BoardDragState | null;\n}\n\nexport const BoardRegistryContext =\n  createContext<BoardRegistryContextValue | null>(null);\n\nexport function useBoardRegistry(): BoardRegistryContextValue | null {\n  return useContext(BoardRegistryContext);\n}\n\n/**\n * A stable boolean signalling whether a Board widget is currently being\n * dragged. Provided by `BoardProvider` (and therefore by any standalone\n * `Board`, which self-wraps in one). Unlike the full `dragState`, this only\n * flips on drag start/end, so components that only care about \"is a drag in\n * progress\" (e.g. `Tabs` spring-loading a tab on hover) can subscribe without\n * re-rendering on every pointer move. Defaults to `false` outside any Board.\n */\nexport const BoardDragActiveContext = createContext<boolean>(false);\n\nexport function useBoardDragActive(): boolean {\n  return useContext(BoardDragActiveContext);\n}\n\n/**\n * What a nested `Board` inherits as its `showGridLines` default. The drag-scoped\n * subset of `BoardGridLines`: an ancestor's `true` is handed down as `'drag'`\n * (a nested board shows lines while a drag is in flight, not permanently), while\n * `'any-drag'` is handed down verbatim so the whole nested tree keeps advertising\n * every board a widget could land on.\n */\nexport type BoardInheritedGridLines = false | 'drag' | 'any-drag';\n\n/**\n * Whether an ancestor `Board` has its grid-line overlay enabled, and with which\n * drag scope. A nested board that does not set `showGridLines` explicitly reads\n * this to inherit the behaviour. Defaults to `false` outside any grid-lined\n * board.\n */\nexport const BoardGridLinesContext =\n  createContext<BoardInheritedGridLines>(false);\n\nexport function useBoardGridLines(): BoardInheritedGridLines {\n  return useContext(BoardGridLinesContext);\n}\n\n/**\n * The resolved grid metrics a `Board` exposes to any boards nested inside its\n * widgets. A nested board with `isAligned` reads these to inherit the parent's\n * column pitch (column width + horizontal margin) and target row height, so its\n * cells line up with the surrounding layout instead of stretching.\n */\nexport interface BoardMetrics {\n  /** Resolved pixel width of one parent column. */\n  colWidth: number;\n  /** Resolved parent row height in pixels (the alignment target). */\n  rowHeight: number;\n  /** Parent [horizontal, vertical] margin between widgets in pixels. */\n  margin: readonly [number, number];\n  /** Parent [horizontal, vertical] container padding in pixels. */\n  containerPadding: readonly [number, number];\n}\n\nexport const BoardMetricsContext = createContext<BoardMetrics | null>(null);\n\nexport function useBoardMetrics(): BoardMetrics | null {\n  return useContext(BoardMetricsContext);\n}\n\n/**\n * Information a `WidgetHost` exposes to the content it renders (including a\n * nested `Board`). Lets a nested board know whether its host widget auto-sizes\n * its height and, if so, ask the host to grow to fit the board's natural size.\n */\nexport interface BoardHost {\n  /** Whether the host widget grows its height to fit its content. */\n  isAutoHeight: boolean;\n  /**\n   * Ask the host widget to grow so it provides `px` more content height. Only\n   * ever increases the host's height. No-op when the host does not auto-size.\n   */\n  requestHeightDeficit: (px: number) => void;\n}\n\nexport const BoardHostContext = createContext<BoardHost | null>(null);\n\nexport function useBoardHost(): BoardHost | null {\n  return useContext(BoardHostContext);\n}\n"],"mappings":";;;;AAgIA,MAAa,uBACX,cAAgD,KAAK;AAEvD,SAAgB,mBAAqD;AACnE,QAAO,WAAW,qBAAqB;;;;;;;;;;AAWzC,MAAa,yBAAyB,cAAuB,MAAM;AAEnE,SAAgB,qBAA8B;AAC5C,QAAO,WAAW,uBAAuB;;;;;;;;AAkB3C,MAAa,wBACX,cAAuC,MAAM;AAE/C,SAAgB,oBAA6C;AAC3D,QAAO,WAAW,sBAAsB;;AAoB1C,MAAa,sBAAsB,cAAmC,KAAK;AAE3E,SAAgB,kBAAuC;AACrD,QAAO,WAAW,oBAAoB;;AAkBxC,MAAa,mBAAmB,cAAgC,KAAK;AAErE,SAAgB,eAAiC;AAC/C,QAAO,WAAW,iBAAiB"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { collides } from "./collision.js";
 
 //#region src/components/layout/Board/grid-core/placement.ts

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { distributeEvenly, placeInFreeSlot } from "./grid-core/placement.js";
 import { getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "./grid-core/compactors.js";
 import { aspectRatio, boundedX, boundedY, containerBounds, gridBounds, maxSize, minMaxSize, minSize, snapToGrid } from "./grid-core/constraints.js";

package/dist/components/layout/Board/responsive-utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { cloneLayout, correctBounds } from "./grid-core/layout.js";
 
 //#region src/components/layout/Board/responsive-utils.ts

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { BoardWidgetStore } from "./board-store.js";
 import { collides } from "./grid-core/collision.js";

package/dist/components/layout/Board/use-board-select-modifier-key.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { useIsDarwin } from "../../../utils/react/useIsDarwin.js";
 
 //#region src/components/layout/Board/use-board-select-modifier-key.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/components/layout/Flex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Flow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Grid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/layout/Prefix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";