@dxos/react-ui-mosaic 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.8.4-main.abd8ff62ef",
+  "version": "0.8.4-main.bc2380dfbc",
   "description": "Modular UI components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
@@ -52,8 +52,9 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "3.2.10",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/view": "^6.38.5",
     "@fluentui/react-tabster": "9.26.11",
+    "@playwright/test": "1.57.0",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
@@ -61,20 +62,20 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@tanstack/react-virtual": "^3.13.18",
     "bind-event-listener": "^3.0.0",
-    "@dxos/async": "0.8.4-main.abd8ff62ef",
-    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
-    "@dxos/log": "0.8.4-main.abd8ff62ef",
-    "@dxos/echo": "0.8.4-main.abd8ff62ef",
-    "@dxos/keys": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-list": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-attention": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-dnd": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-search": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
-    "@dxos/util": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef"
+    "@dxos/async": "0.8.4-main.bc2380dfbc",
+    "@dxos/echo": "0.8.4-main.bc2380dfbc",
+    "@dxos/keys": "0.8.4-main.bc2380dfbc",
+    "@dxos/log": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-client": "0.8.4-main.bc2380dfbc",
+    "@dxos/invariant": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-attention": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-dnd": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-list": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-search": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc",
+    "@dxos/util": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-menu": "0.8.4-main.bc2380dfbc"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -83,25 +84,25 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^8.0.10",
-    "@dxos/echo-atom": "0.8.4-main.abd8ff62ef",
-    "@dxos/random": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef",
-    "@dxos/schema": "0.8.4-main.abd8ff62ef",
-    "@dxos/test-utils": "0.8.4-main.abd8ff62ef",
-    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
-    "@dxos/types": "0.8.4-main.abd8ff62ef"
+    "vite": "^8.0.13",
+    "@dxos/echo-atom": "0.8.4-main.bc2380dfbc",
+    "@dxos/random": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc2380dfbc",
+    "@dxos/storybook-utils": "0.8.4-main.bc2380dfbc",
+    "@dxos/schema": "0.8.4-main.bc2380dfbc",
+    "@dxos/test-utils": "0.8.4-main.bc2380dfbc",
+    "@dxos/types": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/random": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
+    "@dxos/random": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Board/Board.stories.tsx

@@ -175,7 +175,7 @@ const DefaultStory = ({ debug = false, columns: columnsProp = 0 }: DefaultStoryP
 
   return (
     <Mosaic.Root asChild debug={debug}>
-      <div role='none' className={mx('grid md:p-2 overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}>
+      <div className={mx('grid md:p-2 overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}>
         <Board.Root model={model}>
           <Board.Content id='board' debug={debug} eventHandler={eventHandler} Tile={DefaultBoardColumn} />
         </Board.Root>

package/src/components/Board/Column.tsx

@@ -8,10 +8,8 @@ import React, {
   type PropsWithChildren,
   type ReactElement,
   type Ref as ReactRef,
-  type RefObject,
   forwardRef,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 
@@ -50,7 +48,10 @@ export function useBoardColumn<TColumn = unknown>(): TColumn | undefined {
   return value?.column as TColumn | undefined;
 }
 
-type BoardColumnProps<TColumn = any> = Pick<MosaicTileProps<TColumn>, 'classNames' | 'location' | 'data' | 'debug'>;
+type BoardColumnProps<TColumn = any> = Pick<
+  MosaicTileProps<TColumn>,
+  'classNames' | 'location' | 'data' | 'debug' | 'draggable'
+>;
 
 //
 // Column Root
@@ -59,17 +60,16 @@ type BoardColumnProps<TColumn = any> = Pick<MosaicTileProps<TColumn>, 'className
 const BOARD_COLUMN_ROOT_NAME = 'Board.Column.Root';
 
 type BoardColumnRootProps<TColumn = any> = PropsWithChildren<BoardColumnProps<TColumn>> & {
-  dragHandleRef?: RefObject<HTMLButtonElement | null>;
+  // Pass the actual button element (not a ref). Refs don't trigger re-renders, so reading
+  // `ref.current` at render time leaves Mosaic.Tile's `dragHandle` prop null forever.
+  // Consumers should track this with `useState` and a callback ref on `Board.Column.Header`.
+  dragHandle?: HTMLButtonElement | null;
 };
 
 const BoardColumnRootInner = composable<HTMLDivElement, BoardColumnRootProps>(
-  ({ classNames, children, location, data, debug, dragHandleRef: dragHandleRefProp, ...rest }, forwardedRef) => {
+  ({ classNames, children, location, data, debug, draggable, dragHandle, ...rest }, forwardedRef) => {
     const { model } = useBoard(BOARD_COLUMN_ROOT_NAME);
 
-    // TODO(burdon): Use merge ref hook (see react-hooks).
-    const internalRef = useRef<HTMLButtonElement>(null);
-    const dragHandleRef = dragHandleRefProp ?? internalRef;
-
     return (
       <Mosaic.Tile
         asChild
@@ -77,7 +77,8 @@ const BoardColumnRootInner = composable<HTMLDivElement, BoardColumnRootProps>(
         id={model.getColumnId(data)}
         data={data}
         debug={debug}
-        dragHandle={dragHandleRef.current}
+        draggable={draggable}
+        dragHandle={dragHandle}
       >
         <Focus.Group
           {...rest}
@@ -240,10 +241,10 @@ const BOARD_DEFAULT_COLUMN_NAME = 'Board.DefaultColumn';
 type DefaultBoardColumnProps = BoardColumnProps & Pick<BoardColumnBodyProps, 'Tile'>;
 
 const DefaultBoardColumn = forwardRef<HTMLDivElement, DefaultBoardColumnProps>(
-  ({ classNames, location, data, debug, Tile = BoardItem }, forwardedRef) => {
+  ({ classNames, location, data, debug, draggable, Tile = BoardItem }, forwardedRef) => {
     const { model } = useBoard(BOARD_DEFAULT_COLUMN_NAME);
     const [DebugInfo, debugHandler] = useContainerDebug(debug);
-    const dragHandleRef = useRef<HTMLButtonElement>(null);
+    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
     const [column, updateColumn] = useObject(data);
 
     const eventHandler = useEventHandlerAdapter<Ref.Unknown>({
@@ -270,12 +271,13 @@ const DefaultBoardColumn = forwardRef<HTMLDivElement, DefaultBoardColumnProps>(
         )}
         location={location}
         data={data}
-        dragHandleRef={dragHandleRef}
+        draggable={draggable}
+        dragHandle={dragHandle}
         ref={forwardedRef}
       >
-        <BoardColumnHeader label={Obj.getLabel(data) ?? data.id} dragHandleRef={dragHandleRef} />
+        <BoardColumnHeader label={Obj.getLabel(data) ?? data.id} dragHandleRef={setDragHandle} />
         <BoardColumnBody data={data} eventHandler={eventHandler} debug={debugHandler} Tile={Tile} />
-        <div role='none' className='flex flex-col col-span-full'>
+        <div className='flex flex-col col-span-full'>
           <BoardColumnFooter data={data} />
           <DebugInfo />
         </div>

package/src/components/Board/Item.tsx

@@ -3,7 +3,7 @@
 //
 
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import React, { type ReactElement, type Ref as ReactRef, forwardRef, useMemo, useRef } from 'react';
+import React, { type ReactElement, type Ref as ReactRef, forwardRef, useMemo, useRef, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { Card, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
@@ -21,15 +21,17 @@ const BOARD_ITEM_NAME = 'Board.Item';
 
 type BoardItemProps<TItem extends Obj.Unknown = any> = Pick<
   MosaicTileProps<TItem>,
-  'classNames' | 'location' | 'data' | 'debug'
+  'classNames' | 'location' | 'data' | 'debug' | 'draggable'
 >;
 
 const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
-  ({ classNames, data, location, debug }, forwardedRef) => {
+  ({ classNames, data, location, debug, draggable }, forwardedRef) => {
     const { t } = useTranslation(translationKey);
     const rootRef = useRef<HTMLDivElement>(null);
     const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
-    const dragHandleRef = useRef<HTMLButtonElement>(null);
+    // Use state (callback ref) so the dragHandle prop updates when the button mounts.
+    // Refs don't trigger re-renders, so reading `.current` at render time leaves the prop null.
+    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
 
     const { model } = useBoard(BOARD_ITEM_NAME);
     const column = useBoardColumn();
@@ -58,7 +60,8 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
         <Mosaic.Tile
           ref={rootRef}
           asChild
-          dragHandle={dragHandleRef.current}
+          draggable={draggable}
+          dragHandle={dragHandle}
           id={data.id}
           data={data}
           location={location}
@@ -72,7 +75,7 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
               onClick={(event) => event.currentTarget.focus()}
             >
               <Card.Toolbar>
-                <Card.DragHandle ref={dragHandleRef} testId='mosaicBoard.cardDragHandle' />
+                <Card.DragHandle ref={setDragHandle} testId='mosaicBoard.cardDragHandle' />
                 <Card.Title data-testid='mosaicBoard.cardTitle'>{label}</Card.Title>
                 {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
                 <Menu.Trigger asChild disabled={!items?.length}>
@@ -91,7 +94,7 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
               </Card.Row>
               <Card.Row icon='ph--tag--regular'>
                 {label && (
-                  <div role='none' className='shrink-0 flex gap-1 items-center text-xs'>
+                  <div className='shrink-0 flex gap-1 items-center text-xs'>
                     <Tag palette={getHashStyles(label).hue}>{label}</Tag>
                   </div>
                 )}

package/src/components/Mosaic/Container.tsx

@@ -60,6 +60,11 @@ type MosaicContainerContextValue<TData = any, Location = LocationType> = {
   /** Set the current item by ID. */
   setCurrentId: (id: string | undefined) => void;
 
+  /** IDs of selected (aria-selected) items. */
+  selectedIds?: ReadonlySet<string>;
+  /** Request to set or unset selection on an item by ID. */
+  setSelected: (id: string, selected: boolean) => void;
+
   /** Register a scroll-to-item callback (provided by Stack/VirtualStack). */
   registerScrollTo: (fn: ((id: string) => void) | undefined) => void;
 };
@@ -86,6 +91,10 @@ type MosaicContainerProps = PropsWithChildren<
     currentId?: string;
     /** Called when a tile requests to become current. */
     onCurrentChange?: (id: string | undefined) => void;
+    /** Controlled set of selected item IDs. */
+    selectedIds?: ReadonlySet<string>;
+    /** Called when a tile requests to toggle selection. */
+    onSelectionChange?: (id: string, selected: boolean) => void;
     debug?: () => ReactNode;
   }
 >;
@@ -102,6 +111,8 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
       withFocus,
       currentId,
       onCurrentChange,
+      selectedIds,
+      onSelectionChange,
       debug,
       ...props
     },
@@ -126,6 +137,10 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
     const [activeLocation, setActiveLocation] = useState<LocationType | undefined>();
     const [scrolling, setScrolling] = useState(false);
     const setCurrentId = useCallback((id: string | undefined) => onCurrentChange?.(id), [onCurrentChange]);
+    const setSelected = useCallback(
+      (id: string, selected: boolean) => onSelectionChange?.(id, selected),
+      [onSelectionChange],
+    );
 
     // Scroll-to-item: Stack/VirtualStack registers its implementation.
     const scrollToRef = useRef<((id: string) => void) | undefined>(undefined);
@@ -283,6 +298,8 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
         setActiveLocation={setActiveLocation}
         currentId={currentId}
         setCurrentId={setCurrentId}
+        selectedIds={selectedIds}
+        setSelected={setSelected}
         registerScrollTo={registerScrollTo}
       >
         <Comp

package/src/components/Mosaic/Placeholder.tsx

@@ -30,6 +30,11 @@ const MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = 'mosaic-placeholder-orientation';
 // State attribute: data-[mosaic-placeholder-state=active]
 const MOSAIC_PLACEHOLDER_STATE_ATTR = 'mosaic-placeholder-state';
 
+// Location attribute: data-[mosaic-placeholder-location=0.5]. Identifies the
+// placeholder's slot in its container (0.5, 1.5, 2.5, …) so tests can target
+// a specific gap unambiguously without relying on layout-dependent indices.
+const MOSAIC_PLACEHOLDER_LOCATION_ATTR = 'mosaic-placeholder-location';
+
 type MosaicPlaceholderProps<Location = LocationType> = ThemedClassName<
   PropsWithChildren<{
     asChild?: boolean;
@@ -94,6 +99,7 @@ const MosaicPlaceholder = <Location extends LocationType = LocationType>({
       {...{
         [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
         [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? 'active' : 'idle',
+        [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
       }}
       role='none'
       className={mx('relative', classNames)}

package/src/components/Mosaic/Stack.tsx

@@ -85,6 +85,7 @@ const MosaicStackInner = composable<HTMLDivElement, MosaicStackProps>(
       orientation = orientationProp,
       dragging,
       currentId,
+      selectedIds,
       registerScrollTo,
     } = useMosaicContainerContext(MOSAIC_STACK_NAME);
     const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
@@ -130,6 +131,7 @@ const MosaicStackInner = composable<HTMLDivElement, MosaicStackProps>(
               location={index + 1}
               draggable={draggable}
               current={getId(item) === currentId}
+              selected={selectedIds?.has(getId(item))}
               debug={debug}
             />
             {draggable && <InternalPlaceholder orientation={orientation} location={index + 1.5} />}
@@ -178,7 +180,8 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
     forwardedRef,
   ) => {
     invariant(Tile);
-    const { id, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+    const { id, dragging, currentId, selectedIds, registerScrollTo } =
+      useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
     const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
     // In draggable mode virtual indices alternate: even=placeholder, odd=tile.
     // Wrap estimateSize so placeholders get 0 (their actual negligible height) and
@@ -293,6 +296,7 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
                   location={location}
                   draggable={draggable}
                   current={getId(data) === currentId}
+                  selected={selectedIds?.has(getId(data))}
                   debug={debug}
                 />
               ) : (

package/src/components/Mosaic/Tile.tsx

@@ -61,6 +61,8 @@ type MosaicTileProps<TData = any, TLocation = LocationType> = ThemedClassName<
     draggable?: boolean;
     /** Whether this tile is the current (aria-current) item. */
     current?: boolean;
+    /** Whether this tile is selected (aria-selected). */
+    selected?: boolean;
     debug?: boolean;
   }>
 >;
@@ -77,6 +79,7 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
       data: dataProp,
       draggable: draggableProp,
       current,
+      selected,
       debug: _,
       ...props
     },
@@ -211,11 +214,12 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
             [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
           }}
           role='listitem'
-          // Pair `current` prop with `aria-current="true"` so the
-          // `dx-current` utility (which keys off `aria-[current=true]:`)
-          // actually fires. Without this the prop is purely advisory and
-          // any `dx-current` styling on the tile would silently no-op.
+          // Pair `current` / `selected` props with `aria-current` / `aria-selected`
+          // so the `dx-current` / `dx-selected` / `dx-hover` utilities (which key
+          // off those attributes) actually fire. Without this the props are purely
+          // advisory and the corresponding styling silently no-ops.
           aria-current={current ? 'true' : undefined}
+          aria-selected={selected ? 'true' : undefined}
           className={className}
           ref={composedRef}
         >

package/src/hooks/useContainerDebug.tsx

@@ -25,7 +25,7 @@ export const useContainerDebug = (debug?: boolean): UseContainerDebug => {
     }
 
     return [
-      ({ classNames }) => <div role='none' className={mx('overflow-hidden', classNames)} ref={debugRef} />,
+      ({ classNames }) => <div className={mx('overflow-hidden', classNames)} ref={debugRef} />,
       () => debugRef.current && createPortal(<ContainerInfo />, debugRef.current),
     ];
   }, [debug, debugRef]);

package/src/playwright/board-manager.ts

@@ -2,7 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import type { Locator, Page } from '@playwright/test';
+import { type Locator, type Page, expect } from '@playwright/test';
+
+/**
+ * Edge of the target tile to drop on. Pragmatic-dnd assigns the closest edge
+ * based on cursor position; a stale (pre-layout-shift) cursor can land in the
+ * wrong half. When `dragTo` is called with an `edge`, the helper waits for the
+ * target tile to register the drag, re-measures the target after the
+ * placeholder has expanded, repositions the cursor near the requested edge,
+ * and confirms via `data-mosaic-tile-edge` before releasing.
+ */
+export type DragEdge = 'top' | 'bottom' | 'left' | 'right';
 
 export class BoardManager {
   private readonly _page: Page;
@@ -84,19 +94,137 @@ export class ItemManager {
     return this.locator.getByTestId('mosaicBoard.cardTitle');
   }
 
-  async dragTo(target: Locator, offset = { x: 0, y: 0 }): Promise<void> {
+  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }, edge?: DragEdge): Promise<void> {
     const handle = this.locator.getByTestId('mosaicBoard.cardDragHandle');
-    const box = await target.boundingBox();
-    if (box) {
-      await handle.hover();
-      await this._page.mouse.down();
-      // Allow the drag monitor to register the grab before moving.
-      await this._page.waitForTimeout(100);
+    const handleBox = await handle.boundingBox();
+    if (!handleBox) {
+      return;
+    }
+
+    // Capture stable ElementHandles to source and target before the drag
+    // begins. Both `nth(N)` locators shift when `useVisibleItems` filters the
+    // source out of its column, so we need raw DOM references that survive
+    // the reconciliation.
+    const targetHandle = await target.elementHandle();
+    const box = targetHandle ? await targetHandle.boundingBox() : null;
+    if (!targetHandle || !box) {
+      return;
+    }
+    const sourceHandle = await this.locator.elementHandle();
+
+    await handle.hover();
+    await this._page.mouse.down();
+    // Allow the drag monitor to register the grab before moving.
+    await this._page.waitForTimeout(100);
+
+    if (edge) {
+      // Stage 1: trigger the dragstart. A 1-pixel nudge near the press
+      // point primes pragmatic-dnd's HTML5 dragstart, then a long move
+      // over the target tile commits the drag past every browser's
+      // "click vs drag" threshold.
+      await this._page.mouse.move(handleBox.x + handleBox.width / 2 + 1, handleBox.y + handleBox.height / 2, {
+        steps: 1,
+      });
+      await this._page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 4 });
+
+      // Wait for `data-mosaic-container-state="active"` so we know the
+      // dragstart has been processed. This alone is *not* enough: pragmatic-
+      // dnd's `monitorForElements.onDragStart` (Root.tsx) and the
+      // `dropTargetForElements.onDragStart` (Container.tsx) write into
+      // independent React state, and only the latter drives the attribute.
+      // The former drives `useVisibleItems` filtering, which is what
+      // physically reflows the column. So we ALSO wait for the source tile
+      // to detach from the DOM — that's the unambiguous signal that the
+      // reflow has happened and any cached bbox is stale.
+      await expect
+        .poll(() => this._page.locator('[data-mosaic-container-state="active"]').count(), { timeout: 2000 })
+        .toBeGreaterThan(0);
+      if (sourceHandle) {
+        await this._page.waitForFunction((el) => !el || !el.isConnected, sourceHandle, { timeout: 2000 });
+      }
+
+      // Stage 2: walk siblings on the (now reflowed) drag-time DOM and aim
+      // at the placeholder representing the requested edge. The Fragment
+      // keying on item id keeps the target tile's adjacent placeholder DOM
+      // node stable across reconciliation, but its `location` prop and bbox
+      // both change once the source is filtered out — measure after the
+      // reflow, never before.
+      const placeholderHandle = await this._adjacentPlaceholder(targetHandle, edge);
+      if (placeholderHandle) {
+        const phBox = await placeholderHandle.boundingBox();
+        if (phBox) {
+          const aimX = phBox.x + phBox.width / 2;
+          const aimY = phBox.y + Math.max(phBox.height / 2, 1);
+          await this._page.mouse.move(aimX, aimY, { steps: 4 });
+
+          // Some browser/CDP combinations need a follow-up nudge to push
+          // the dragOver event through — re-aim with a 1px offset and poll.
+          const isActive = () =>
+            placeholderHandle.evaluate((el) => el.getAttribute('data-mosaic-placeholder-state') === 'active');
+          if (!(await isActive())) {
+            const start = Date.now();
+            let nudge = 0;
+            while (Date.now() - start < 3000) {
+              await this._page.waitForTimeout(100);
+              nudge = (nudge + 1) % 4;
+              const dx = nudge === 0 || nudge === 2 ? 1 : -1;
+              const dy = nudge === 1 || nudge === 2 ? 1 : -1;
+              await this._page.mouse.move(aimX + dx, aimY + dy, { steps: 1 });
+              if (await isActive()) {
+                break;
+              }
+            }
+            await expect
+              .poll(() => placeholderHandle.evaluate((el) => el.getAttribute('data-mosaic-placeholder-state')), {
+                timeout: 1000,
+              })
+              .toBe('active');
+          }
+
+          // Re-centre on the now-expanded placeholder so the drop lands
+          // solidly inside it.
+          const expanded = await placeholderHandle.boundingBox();
+          if (expanded) {
+            await this._page.mouse.move(expanded.x + expanded.width / 2, expanded.y + expanded.height / 2, {
+              steps: 2,
+            });
+          }
+        }
+      }
+    } else {
+      // Legacy path: no explicit edge — rely on the offset placement and a
+      // small settle delay before releasing.
       await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });
-      // Allow the drop target to process the hover before releasing.
       await this._page.waitForTimeout(100);
-      await this._page.mouse.up();
     }
+    await this._page.mouse.up();
+  }
+
+  /**
+   * Find the placeholder element adjacent to `target` on the requested
+   * side via DOM walk. Returns `null` if the target has no matching
+   * sibling (e.g. when the caller passes a non-tile target).
+   */
+  private async _adjacentPlaceholder(
+    targetHandle: import('@playwright/test').ElementHandle<Element | SVGElement | HTMLElement>,
+    edge: DragEdge,
+  ): Promise<import('@playwright/test').ElementHandle<HTMLElement> | null> {
+    const before = edge === 'top' || edge === 'left';
+    const result = await targetHandle.evaluateHandle((el, beforeArg) => {
+      let sibling: Element | null = beforeArg ? el.previousElementSibling : el.nextElementSibling;
+      while (sibling && !sibling.hasAttribute('data-mosaic-placeholder-location')) {
+        sibling = beforeArg ? sibling.previousElementSibling : sibling.nextElementSibling;
+      }
+      return sibling as HTMLElement | null;
+    }, before);
+    const handle = result.asElement() as import('@playwright/test').ElementHandle<HTMLElement> | null;
+    if (!handle) {
+      return null;
+    }
+    // `evaluateHandle` returning `null` still produces a non-null JSHandle —
+    // verify the underlying element actually exists.
+    const exists = await handle.evaluate((el) => el !== null);
+    return exists ? handle : null;
   }
 
   /**

package/src/playwright/smoke.spec.ts

@@ -52,7 +52,7 @@ test.describe('Board', () => {
     const secondLabel = await column.item(1).title().textContent();
 
     // Drag first item below the second item.
-    await column.item(0).dragTo(column.item(1).locator, { x: 0, y: BELOW_OFFSET });
+    await column.item(0).dragTo(column.item(1).locator, { x: 0, y: BELOW_OFFSET }, 'bottom');
 
     // Item count should stay the same.
     await expect(column.items()).toHaveCount(countBefore);
@@ -73,7 +73,7 @@ test.describe('Board', () => {
     const draggedLabel = await col0.item(0).title().textContent();
 
     // Drag above the first item in the target column.
-    await col0.item(0).dragTo(col1.item(0).locator, { x: 0, y: ABOVE_OFFSET });
+    await col0.item(0).dragTo(col1.item(0).locator, { x: 0, y: ABOVE_OFFSET }, 'top');
 
     await expect(col0.items()).toHaveCount(col0CountBefore - 1);
     await expect(col1.items()).toHaveCount(col1CountBefore + 1);
@@ -89,7 +89,7 @@ test.describe('Board', () => {
     const draggedLabel = await col0.item(0).title().textContent();
 
     // Drag to below the first item in the target column.
-    await col0.item(0).dragTo(col1.item(0).locator, { x: 0, y: BELOW_OFFSET });
+    await col0.item(0).dragTo(col1.item(0).locator, { x: 0, y: BELOW_OFFSET }, 'bottom');
 
     await expect(col0.items()).toHaveCount(col0CountBefore - 1);
     await expect(col1.items()).toHaveCount(col1CountBefore + 1);

package/src/testing/CardContainer.tsx

@@ -21,7 +21,7 @@ export const CardContainer = ({ children, role, icon = 'ph--arrow-line-down--reg
   switch (role) {
     case 'popover':
       return (
-        <div role='none' className='flex justify-center'>
+        <div className='flex justify-center'>
           <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>
         </div>
       );
@@ -80,14 +80,11 @@ export const IntrinsicCardContainer = ({
 
   return (
     <div
-      role='none'
       className='relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg'
       style={sizeStyle(size, 'horizontal')}
       {...resizeAttributes}
     >
-      <div role='none' className='dx-container flex flex-col'>
-        {children}
-      </div>
+      <div className='dx-container flex flex-col'>{children}</div>
       <ResizeHandle
         side='inline-end'
         fallbackSize={DEFAULT_BLOCK_SIZE}