@dxos/react-ui-mosaic 0.9.1-staging.ee54ba693a → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.9.1-staging.ee54ba693a",
+  "version": "0.11.0",
   "description": "Modular UI components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,26 +19,22 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./playwright": {
       "source": "./src/playwright/index.ts",
       "types": "./dist/types/src/playwright/index.d.ts",
-      "browser": "./dist/lib/browser/playwright/index.mjs",
-      "node": "./dist/lib/node-esm/playwright/index.mjs"
+      "import": "./dist/lib/playwright.mjs"
     },
     "./testing": {
       "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
-      "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "import": "./dist/lib/testing.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -51,8 +47,8 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "3.2.10",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
     "@fluentui/react-tabster": "9.26.11",
     "@playwright/test": "1.57.0",
     "@radix-ui/react-compose-refs": "1.1.1",
@@ -62,46 +58,48 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@tanstack/react-virtual": "^3.13.18",
     "bind-event-listener": "^3.0.0",
-    "@dxos/async": "0.9.1-staging.ee54ba693a",
-    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
-    "@dxos/log": "0.9.1-staging.ee54ba693a",
-    "@dxos/keys": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-dnd": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-search": "0.9.1-staging.ee54ba693a",
-    "@dxos/util": "0.9.1-staging.ee54ba693a"
+    "@dxos/async": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui-dnd": "0.11.0",
+    "@dxos/react-ui-menu": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/react-ui-list": "0.11.0",
+    "@dxos/react-ui-search": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/util": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
-    "@dxos/schema": "0.9.1-staging.ee54ba693a",
-    "@dxos/test-utils": "0.9.1-staging.ee54ba693a",
-    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
-    "@dxos/types": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
+    "vite": "^8.1.4",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/test-utils": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/types": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/random": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -11,6 +11,7 @@ import { type Database, Filter, Obj, Ref } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { random } from '@dxos/random';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Dnd, type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { mx } from '@dxos/ui-theme';
@@ -20,8 +21,8 @@ import { translations } from '#translations';
 import { useEventHandlerAdapter } from '../../hooks';
 import { TestColumn, TestItem } from '../../testing';
 import { Focus } from '../Focus';
-import { Mosaic, type MosaicEventHandler } from '../Mosaic';
-import { Board, type BoardModel } from './Board';
+import { Board } from './Board';
+import { type BoardModel } from './BoardContext';
 import { DefaultBoardColumn } from './Column';
 
 random.seed(999);
@@ -57,7 +58,7 @@ type StoryArgs = {
 
 type TestBoardModelResult = {
   model: BoardModel<TestColumn, TestItem>;
-  eventHandler: MosaicEventHandler<TestColumn>;
+  eventHandler: DndContainerHandler<TestColumn>;
 };
 
 const useTestBoardModel = (): TestBoardModelResult => {
@@ -172,10 +173,10 @@ const DefaultStory = ({ debug = false, columns: columnsProp = 0 }: StoryArgs) =>
   }
 
   return (
-    <Mosaic.Root asChild debug={debug}>
+    <Dnd.Root>
       <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.Content debug={debug} eventHandler={eventHandler} Tile={DefaultBoardColumn} />
         </Board.Root>
         {debug && (
           <Focus.Group classNames='flex flex-col gap-2 overflow-hidden'>
@@ -183,7 +184,7 @@ const DefaultStory = ({ debug = false, columns: columnsProp = 0 }: StoryArgs) =>
           </Focus.Group>
         )}
       </div>
-    </Mosaic.Root>
+    </Dnd.Root>
   );
 };
 

package/src/components/Board/Board.tsx

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Atom, useAtomValue } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, {
   type PropsWithChildren,
   type ReactElement,
@@ -15,59 +14,17 @@ import React, {
 
 import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
+import { type DndContainerHandler, useDndRootContext } from '@dxos/react-ui-dnd';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
 import { useContainerDebug } from '../../hooks';
 import { Focus } from '../Focus';
-import {
-  type GetId,
-  Mosaic,
-  type MosaicEventHandler,
-  type MosaicPlaceholderProps,
-  type MosaicStackProps,
-  mosaicStyles,
-  useMosaic,
-} from '../Mosaic';
-import { BoardColumn, type BoardColumnProps, DefaultBoardColumn, useBoardColumn } from './Column';
+import { Mosaic, type MosaicPlaceholderProps, type MosaicStackProps, mosaicStyles } from '../Mosaic';
+import { BoardContextProvider, type BoardContextValue, useBoardContext } from './BoardContext';
+import { BoardColumn, type BoardColumnProps, DefaultBoardColumn } from './Column';
 import { BoardItem, type BoardItemProps } from './Item';
 
-//
-// Model
-//
-
-export interface BoardModel<TColumn = any, TItem = any> {
-  getColumnId: GetId<TColumn>;
-  getItemId: GetId<TItem>;
-  isColumn: (obj: unknown) => obj is TColumn;
-  isItem: (obj: unknown) => obj is TItem;
-  columns: Atom.Atom<readonly TColumn[] | TColumn[]>;
-  items: (column: TColumn) => Atom.Atom<TItem[]>;
-  getColumns: () => TColumn[];
-  getItems: (column: TColumn) => TItem[];
-  onColumnCreate?: () => Promise<TColumn>;
-  onColumnDelete?: (column: TColumn) => void;
-  onItemCreate?: (column: TColumn) => Promise<TItem>;
-  onItemDelete?: (column: TColumn, item: TItem) => void;
-}
-
-//
-// Context
-//
-
-const BOARD_NAME = 'Board';
-
-type BoardContextValue<TColumn = any, TItem = any> = {
-  model: BoardModel<TColumn, TItem>;
-};
-
-const [BoardContextProvider, useBoardContext] = createContext<BoardContextValue>(BOARD_NAME);
-
-/** Hook to read the board model from context (e.g. in custom column tiles). Pass TColumn and TItem for typed model. */
-function useBoard<TColumn = any, TItem = any>(displayName?: string): BoardContextValue<TColumn, TItem> {
-  return useBoardContext(displayName ?? BOARD_NAME) as BoardContextValue<TColumn, TItem>;
-}
-
 //
 // Root
 //
@@ -91,14 +48,13 @@ const BoardRoot = BoardRootInner as <TColumn = any, TItem = any>(props: BoardRoo
 const BOARD_CONTENT_NAME = 'Board.Content';
 
 type BoardContentProps<TColumn = any> = ThemedClassName<{
-  id: string;
   debug?: boolean;
-  eventHandler?: MosaicEventHandler<TColumn>;
+  eventHandler?: DndContainerHandler<TColumn>;
   Tile?: MosaicStackProps<TColumn>['Tile'];
 }>;
 
 const BoardContentInner = composable<HTMLDivElement, BoardContentProps>(
-  ({ id: _id, debug, eventHandler, Tile = DefaultBoardColumn, ...props }, forwardedRef) => {
+  ({ debug, eventHandler, Tile = DefaultBoardColumn, ...props }, forwardedRef) => {
     const { model } = useBoardContext(BOARD_CONTENT_NAME);
     const [DebugInfo, debugHandler] = useContainerDebug(debug);
     const [viewport, setViewport] = useState<HTMLElement | null>(null);
@@ -115,6 +71,7 @@ const BoardContentInner = composable<HTMLDivElement, BoardContentProps>(
             autoScroll={viewport}
             eventHandler={eventHandler}
             debug={debugHandler}
+            placeholderDebug={debug}
           >
             <ScrollArea.Root orientation='horizontal' centered padding>
               <ScrollArea.Viewport classNames='snap-mandatory snap-x md:snap-none' ref={setViewport}>
@@ -160,7 +117,7 @@ BoardPlaceholder.displayName = BOARD_PLACEHOLDER_NAME;
 const BOARD_DEBUG_NAME = 'Board.Debug';
 
 export const BoardDebug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {
-  const { containers, dragging } = useMosaic(BOARD_DEBUG_NAME);
+  const { containers, dragging } = useDndRootContext(BOARD_DEBUG_NAME);
   const counter = useRef(0);
   return (
     <JsonHighlighter
@@ -186,6 +143,4 @@ export const Board = {
   Debug: BoardDebug,
 };
 
-export { useBoard, useBoardColumn };
-
 export type { BoardColumnProps, BoardContentProps, BoardItemProps, BoardRootProps };

package/src/components/Board/BoardColumnContext.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+// Kept out of `Column.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so the context and hook exported beside them force a full page reload on every edit.
+
+export const BOARD_COLUMN_CONTEXT_NAME = 'Board.Column';
+
+export type BoardColumnContextValue<TColumn = unknown> = {
+  column: TColumn;
+};
+
+export const [BoardColumnProvider, useBoardColumnContext] = createContext<BoardColumnContextValue | null>(
+  BOARD_COLUMN_CONTEXT_NAME,
+  null,
+);
+
+/** Returns the current column when rendered inside a board column (e.g., in column header or item tile). */
+export function useBoardColumn<TColumn = unknown>(): TColumn | undefined {
+  const value = useBoardColumnContext(BOARD_COLUMN_CONTEXT_NAME);
+  return value?.column as TColumn | undefined;
+}

package/src/components/Board/BoardContext.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
+
+import { type GetId } from '@dxos/react-ui-dnd';
+
+// Kept out of `Board.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so the model, context and hook exported beside them force a full page reload on every edit.
+
+export interface BoardModel<TColumn = any, TItem = any> {
+  getColumnId: GetId<TColumn>;
+  getItemId: GetId<TItem>;
+  isColumn: (obj: unknown) => obj is TColumn;
+  isItem: (obj: unknown) => obj is TItem;
+  columns: Atom.Atom<readonly TColumn[] | TColumn[]>;
+  items: (column: TColumn) => Atom.Atom<TItem[]>;
+  getColumns: () => TColumn[];
+  getItems: (column: TColumn) => TItem[];
+  onColumnCreate?: () => Promise<TColumn>;
+  onColumnDelete?: (column: TColumn) => void;
+  onItemCreate?: (column: TColumn) => Promise<TItem>;
+  onItemDelete?: (column: TColumn, item: TItem) => void;
+}
+
+//
+// Context
+//
+
+export const BOARD_NAME = 'Board';
+
+export type BoardContextValue<TColumn = any, TItem = any> = {
+  model: BoardModel<TColumn, TItem>;
+};
+
+export const [BoardContextProvider, useBoardContext] = createContext<BoardContextValue>(BOARD_NAME);
+
+/** Hook to read the board model from context (e.g. in custom column tiles). Pass TColumn and TItem for typed model. */
+export function useBoard<TColumn = any, TItem = any>(displayName?: string): BoardContextValue<TColumn, TItem> {
+  return useBoardContext(displayName ?? BOARD_NAME) as BoardContextValue<TColumn, TItem>;
+}

package/src/components/Board/Column.tsx

@@ -3,7 +3,6 @@
 //
 
 import { useAtomValue } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
 import React, {
   type PropsWithChildren,
   type ReactElement,
@@ -14,7 +13,7 @@ import React, {
 } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import { useObject } from '@dxos/react-client/echo';
+import { useObject } from '@dxos/echo-react';
 import { IconButton, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
@@ -25,30 +24,10 @@ import { translationKey } from '#translations';
 import { useContainerDebug, useEventHandlerAdapter } from '../../hooks';
 import { Focus } from '../Focus';
 import { Mosaic, type MosaicContainerProps, type MosaicStackProps, type MosaicTileProps } from '../Mosaic';
-import { useBoard } from './Board';
+import { BoardColumnProvider, useBoardColumn } from './BoardColumnContext';
+import { useBoard } from './BoardContext';
 import { BoardItem } from './Item';
 
-//
-// Column context
-//
-
-const BOARD_COLUMN_CONTEXT_NAME = 'Board.Column';
-
-export type BoardColumnContextValue<TColumn = unknown> = {
-  column: TColumn;
-};
-
-const [BoardColumnProvider, useBoardColumnContext] = createContext<BoardColumnContextValue | null>(
-  BOARD_COLUMN_CONTEXT_NAME,
-  null,
-);
-
-/** Returns the current column when rendered inside a board column (e.g., in column header or item tile). */
-export function useBoardColumn<TColumn = unknown>(): TColumn | undefined {
-  const value = useBoardColumnContext(BOARD_COLUMN_CONTEXT_NAME);
-  return value?.column as TColumn | undefined;
-}
-
 type BoardColumnProps<TColumn = any> = Pick<
   MosaicTileProps<TColumn>,
   'classNames' | 'location' | 'data' | 'debug' | 'draggable'
@@ -87,7 +66,7 @@ const BoardColumnRootInner = composable<HTMLDivElement, BoardColumnRootProps>(
           border
           classNames={mx(
             'group/column',
-            'h-full w-full md:w-card-default-width snap-center bg-deck-surface',
+            'h-full w-full md:w-card-default-width snap-center dx-deck-surface',
             'overflow-hidden',
             classNames,
           )}
@@ -134,9 +113,16 @@ const BoardColumnHeader = composable<HTMLDivElement, BoardColumnHeaderProps>(
 
     return (
       <Menu.Root>
-        <Toolbar.Root {...composableProps(props)} data-testid='board-column-header' ref={forwardedRef}>
+        {/* TODO(burdon): Use Card.Header. */}
+        <Toolbar.Root
+          {...composableProps(props, { classNames: 'gap-0' })}
+          data-testid='board-column-header'
+          ref={forwardedRef}
+        >
           <Toolbar.DragHandle ref={dragHandleRef} testId='mosaicBoard.columnDragHandle' />
-          <Toolbar.Text data-testid='mosaicBoard.columnTitle'>{label}</Toolbar.Text>
+          <Toolbar.Text classNames='grow px-0' data-testid='mosaicBoard.columnTitle'>
+            {label}
+          </Toolbar.Text>
           {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
           <Menu.Trigger asChild disabled={!columnMenuItems?.length}>
             <Toolbar.IconButton

package/src/components/Board/Item.tsx

@@ -14,8 +14,8 @@ import { translationKey } from '#translations';
 
 import { Focus } from '../Focus';
 import { Mosaic, type MosaicTileProps } from '../Mosaic';
-import { useBoard } from './Board';
-import { useBoardColumn } from './Column';
+import { useBoardColumn } from './BoardColumnContext';
+import { useBoard } from './BoardContext';
 
 const BOARD_ITEM_NAME = 'Board.Item';
 

package/src/components/Board/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
+export { type BoardColumnContextValue, useBoardColumn } from './BoardColumnContext';
+export { type BoardModel, useBoard } from './BoardContext';
+
 export * from './Board';

package/src/components/Mosaic/Container.tsx

@@ -6,7 +6,6 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { bind } from 'bind-event-listener';
@@ -23,59 +22,34 @@ import React, {
   useState,
 } from 'react';
 
-import { type AllowedAxis, composable, composableProps } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
+import {
+  type DndContainerData,
+  type DndLocation,
+  type DndTileData,
+  getSourceData,
+  useDndRootContext,
+} from '@dxos/react-ui-dnd';
 import { isTruthy } from '@dxos/util';
 
 import { useFocus } from '../Focus';
-import { type MosaicDraggingState, useMosaicRootContext } from './Root';
 import {
-  type LocationType,
-  type MosaicContainerData,
-  type MosaicEventHandler,
-  type MosaicTileData,
-  getSourceData,
-} from './types';
+  MOSAIC_CONTAINER_NAME,
+  MosaicContainerContextProvider,
+  type MosaicContainerContextValue,
+  type MosaicContainerState,
+} from './MosaicContainerContext';
 
 //
 // Container
 //
 
-const MOSAIC_CONTAINER_NAME = 'Mosaic.Container';
-
-type MosaicContainerState = { type: 'idle' } | { type: 'active'; bounds?: DOMRect };
-
-type MosaicContainerContextValue<TData = any, Location = LocationType> = {
-  id: string;
-  eventHandler: MosaicEventHandler<TData>;
-  orientation?: AllowedAxis;
-  dragging?: MosaicDraggingState;
-  scrolling?: boolean;
-  state: MosaicContainerState;
-
-  /** Active drop location. */
-  activeLocation?: Location;
-  setActiveLocation: (location: Location | undefined) => void;
-
-  /** ID of the current (aria-current) item. */
-  currentId?: string;
-  /** 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;
-};
-
-const [MosaicContainerContextProvider, useMosaicContainerContext] =
-  createContext<MosaicContainerContextValue>('MosaicContainer');
-
 // State attribute: [&:has(>_[data-mosaic-container-state=active])]
 const MOSAIC_CONTAINER_STATE_ATTR = 'mosaic-container-state';
 
+// Debug flag on the container's `group` element; Placeholder reads it via `group-data-[mosaic-debug=true]` (see styles.ts).
+const MOSAIC_CONTAINER_DEBUG_ATTR = 'mosaic-debug';
+
 // CSS variables: [var(--mosaic-placeholder-xxx)]
 const MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = '--mosaic-placeholder-width';
 const MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = '--mosaic-placeholder-height';
@@ -104,6 +78,8 @@ type MosaicContainerProps = PropsWithChildren<
     /** Called when a tile requests to toggle selection. */
     onSelectionChange?: (id: string, selected: boolean) => void;
     debug?: () => ReactNode;
+    /** Toggles the `group` target that Placeholder's debug-highlight selectors read (see styles.ts). */
+    placeholderDebug?: boolean;
   }
 >;
 
@@ -126,6 +102,7 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
       selectedIds,
       onSelectionChange,
       debug,
+      placeholderDebug,
       ...props
     },
     forwardedRef,
@@ -144,9 +121,9 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
     );
 
     // State.
-    const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);
+    const { dragging } = useDndRootContext(MOSAIC_CONTAINER_NAME);
     const [state, setState] = useState<MosaicContainerState>({ type: 'idle' });
-    const [activeLocation, setActiveLocation] = useState<LocationType | undefined>();
+    const [activeLocation, setActiveLocation] = useState<DndLocation | undefined>();
     const [scrolling, setScrolling] = useState(false);
     const setCurrentId = useCallback((id: string | undefined) => onCurrentChange?.(id), [onCurrentChange]);
     const setSelected = useCallback(
@@ -179,18 +156,18 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
     }, [setFocus, withFocus, state]);
 
     // Register handler.
-    const { addContainer, removeContainer } = useMosaicRootContext(eventHandler.id);
+    const { addContainer, removeContainer } = useDndRootContext(eventHandler.id);
     useEffect(() => {
       addContainer(eventHandler);
       return () => removeContainer(eventHandler.id);
     }, [eventHandler]);
 
-    const data = useMemo<MosaicContainerData>(
+    const data = useMemo<DndContainerData>(
       () =>
         ({
           type: 'container',
           id: eventHandler.id,
-        }) satisfies MosaicContainerData,
+        }) satisfies DndContainerData,
       [eventHandler.id],
     );
 
@@ -242,14 +219,14 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
              * Dragging started in this container.
              */
             onDragStart: ({ source }) => {
-              const sourceData = source.data as MosaicTileData;
+              const sourceData = source.data as DndTileData;
               setState({ type: 'active', bounds: sourceData.bounds });
             },
             /**
              * Dragging entered this container.
              */
             onDragEnter: ({ source }) => {
-              const sourceData = source.data as MosaicTileData;
+              const sourceData = source.data as DndTileData;
               setState({ type: 'active', bounds: sourceData.bounds });
             },
             /**
@@ -258,7 +235,7 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
              * triggering `onDragLeave`, which then causes the item to be added and removed continually (flickering).
              */
             onDragLeave: ({ source }) => {
-              const sourceData = source.data as MosaicTileData;
+              const sourceData = source.data as DndTileData;
               if (sourceData.containerId !== eventHandler.id) {
                 setState({ type: 'idle' });
               }
@@ -317,7 +294,7 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
       >
         <Comp
           {...composableProps(props, {
-            classNames: 'h-full',
+            classNames: 'h-full group',
             style: {
               [MOSAIC_CONTAINER_PLACEHOLDER_WIDTH]:
                 state.type === 'active' && state.bounds ? `${state.bounds.width}px` : '0px',
@@ -327,6 +304,7 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
           })}
           {...{
             [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
+            [`data-${MOSAIC_CONTAINER_DEBUG_ATTR}`]: placeholderDebug,
           }}
           ref={composedRef}
         >
@@ -340,6 +318,6 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
 
 MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
 
-export { MosaicContainer, useMosaicContainerContext };
+export { MosaicContainer };
 
-export type { MosaicContainerProps, MosaicContainerState };
+export type { MosaicContainerProps };

package/src/components/Mosaic/DragHandle.tsx

@@ -7,7 +7,7 @@ import React, { type ReactNode, forwardRef } from 'react';
 
 import { Button, IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { useMosaicTileContext } from './Tile';
+import { useMosaicTileContext } from './MosaicTileContext';
 
 const MOSAIC_DRAG_HANDLE_NAME = 'Mosaic.DragHandle';